jsdk-offical/dist/jsfx.css

JSDK is the most comprehensive TypeScript framework, like JDK.

@charset "UTF-8";
/* ColorMode */
/**
 * YIQ color contrast function
 * $color: Acceptable values are between 0 and 255.
 */
:root {
  --font-hg: 1.2rem;
  --font-lg: 1.1rem;
  --font-md: 1rem;
  --font-sm: 0.85rem;
  --font-xs: 0.75rem;
  --color-primary: #5867dd;
  --color-secondary: #716aca;
  --color-accent: #9816f4;
  --color-metal: #95a5a6;
  --color-light: #ecf0f1;
  --color-dark: #34495e;
  --color-success: #34bfa3;
  --color-info: #36a3f7;
  --color-warning: #ffb822;
  --color-danger: #f4516c;
  --border-round: 0.2rem;
  --border-square: 0rem;
  --border-pill: 1.3rem;
}

html {
  font-size: 14px;
}

.gpu {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.disabled, :disabled {
  opacity: 0.8 !important;
  filter: alpha(opacity=80) !important;
  cursor: not-allowed !important;
  color: #aaa !important;
}

.transparent {
  background: transparent !important;
}

/** Font Sizes */
.font-hg {
  font-size: var(--font-hg);
}

.font-lg {
  font-size: var(--font-lg);
}

.font-md {
  font-size: var(--font-md);
}

.font-sm {
  font-size: var(--font-sm);
}

.font-xs {
  font-size: var(--font-xs);
}

/**
 * @override Bootstrap4 css
 **/
/** Text Colors */
.text-primary {
  color: var(--color-primary) !important;
}

a.text-primary:focus,
a.text-primary:hover {
  color: var(--color-primary) !important;
}

/** Background Colors */
.bg-primary {
  background-color: var(--color-primary) !important;
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
  background-color: var(--color-primary) !important;
}

.border-primary {
  border-color: var(--color-primary) !important;
}

.focus-primary:focus {
  border-color: var(--color-primary) !important;
}

/** Text Colors */
.text-secondary {
  color: var(--color-secondary) !important;
}

a.text-secondary:focus,
a.text-secondary:hover {
  color: var(--color-secondary) !important;
}

/** Background Colors */
.bg-secondary {
  background-color: var(--color-secondary) !important;
}

a.bg-secondary:focus,
a.bg-secondary:hover,
button.bg-secondary:focus,
button.bg-secondary:hover {
  background-color: var(--color-secondary) !important;
}

.border-secondary {
  border-color: var(--color-secondary) !important;
}

.focus-secondary:focus {
  border-color: var(--color-secondary) !important;
}

/** Text Colors */
.text-accent {
  color: var(--color-accent) !important;
}

a.text-accent:focus,
a.text-accent:hover {
  color: var(--color-accent) !important;
}

/** Background Colors */
.bg-accent {
  background-color: var(--color-accent) !important;
}

a.bg-accent:focus,
a.bg-accent:hover,
button.bg-accent:focus,
button.bg-accent:hover {
  background-color: var(--color-accent) !important;
}

.border-accent {
  border-color: var(--color-accent) !important;
}

.focus-accent:focus {
  border-color: var(--color-accent) !important;
}

/** Text Colors */
.text-metal {
  color: var(--color-metal) !important;
}

a.text-metal:focus,
a.text-metal:hover {
  color: var(--color-metal) !important;
}

/** Background Colors */
.bg-metal {
  background-color: var(--color-metal) !important;
}

a.bg-metal:focus,
a.bg-metal:hover,
button.bg-metal:focus,
button.bg-metal:hover {
  background-color: var(--color-metal) !important;
}

.border-metal {
  border-color: var(--color-metal) !important;
}

.focus-metal:focus {
  border-color: var(--color-metal) !important;
}

/** Text Colors */
.text-light {
  color: var(--color-light) !important;
}

a.text-light:focus,
a.text-light:hover {
  color: var(--color-light) !important;
}

/** Background Colors */
.bg-light {
  background-color: var(--color-light) !important;
}

a.bg-light:focus,
a.bg-light:hover,
button.bg-light:focus,
button.bg-light:hover {
  background-color: var(--color-light) !important;
}

.border-light {
  border-color: var(--color-light) !important;
}

.focus-light:focus {
  border-color: var(--color-light) !important;
}

/** Text Colors */
.text-dark {
  color: var(--color-dark) !important;
}

a.text-dark:focus,
a.text-dark:hover {
  color: var(--color-dark) !important;
}

/** Background Colors */
.bg-dark {
  background-color: var(--color-dark) !important;
}

a.bg-dark:focus,
a.bg-dark:hover,
button.bg-dark:focus,
button.bg-dark:hover {
  background-color: var(--color-dark) !important;
}

.border-dark {
  border-color: var(--color-dark) !important;
}

.focus-dark:focus {
  border-color: var(--color-dark) !important;
}

/** Text Colors */
.text-success {
  color: var(--color-success) !important;
}

a.text-success:focus,
a.text-success:hover {
  color: var(--color-success) !important;
}

/** Background Colors */
.bg-success {
  background-color: var(--color-success) !important;
}

a.bg-success:focus,
a.bg-success:hover,
button.bg-success:focus,
button.bg-success:hover {
  background-color: var(--color-success) !important;
}

.border-success {
  border-color: var(--color-success) !important;
}

.focus-success:focus {
  border-color: var(--color-success) !important;
}

/** Text Colors */
.text-info {
  color: var(--color-info) !important;
}

a.text-info:focus,
a.text-info:hover {
  color: var(--color-info) !important;
}

/** Background Colors */
.bg-info {
  background-color: var(--color-info) !important;
}

a.bg-info:focus,
a.bg-info:hover,
button.bg-info:focus,
button.bg-info:hover {
  background-color: var(--color-info) !important;
}

.border-info {
  border-color: var(--color-info) !important;
}

.focus-info:focus {
  border-color: var(--color-info) !important;
}

/** Text Colors */
.text-warning {
  color: var(--color-warning) !important;
}

a.text-warning:focus,
a.text-warning:hover {
  color: var(--color-warning) !important;
}

/** Background Colors */
.bg-warning {
  background-color: var(--color-warning) !important;
}

a.bg-warning:focus,
a.bg-warning:hover,
button.bg-warning:focus,
button.bg-warning:hover {
  background-color: var(--color-warning) !important;
}

.border-warning {
  border-color: var(--color-warning) !important;
}

.focus-warning:focus {
  border-color: var(--color-warning) !important;
}

/** Text Colors */
.text-danger {
  color: var(--color-danger) !important;
}

a.text-danger:focus,
a.text-danger:hover {
  color: var(--color-danger) !important;
}

/** Background Colors */
.bg-danger {
  background-color: var(--color-danger) !important;
}

a.bg-danger:focus,
a.bg-danger:hover,
button.bg-danger:focus,
button.bg-danger:hover {
  background-color: var(--color-danger) !important;
}

.border-danger {
  border-color: var(--color-danger) !important;
}

.focus-danger:focus {
  border-color: var(--color-danger) !important;
}

/** items alignment */
.items-middle {
  display: flex;
  align-items: center;
}

.items-top {
  display: flex;
  align-items: flex-start;
}

.items-bottom {
  display: flex;
  align-items: flex-end;
}

.items-left {
  display: flex;
  justify-content: flex-start;
}

.items-right {
  display: flex;
  justify-content: flex-end;
}

.items-center {
  display: flex;
  justify-content: center;
}

/** Flex */
.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.border-shadow {
  box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.19) !important;
}

/** Border Radius */
.border-round {
  border-radius: var(--border-round) !important;
}

.border-square {
  border-radius: var(--border-square) !important;
}

.border-pill {
  border-radius: var(--border-pill) !important;
}

.border-square-left {
  border-top-left-radius: var(--border-square) !important;
  border-bottom-left-radius: var(--border-square) !important;
}

.border-square-right {
  border-top-right-radius: var(--border-square) !important;
  border-bottom-right-radius: var(--border-square) !important;
}

.border-round-left {
  border-top-left-radius: var(--border-round) !important;
  border-bottom-left-radius: var(--border-round) !important;
}

.border-round-right {
  border-top-right-radius: var(--border-round) !important;
  border-bottom-right-radius: var(--border-round) !important;
}

.border-pill-left {
  border-top-left-radius: var(--border-pill) !important;
  border-bottom-left-radius: var(--border-pill) !important;
}

.border-pill-right {
  border-top-right-radius: var(--border-pill) !important;
  border-bottom-right-radius: var(--border-pill) !important;
}

.badge {
  padding: 0.1em 0.2em;
  vertical-align: middle;
}

.badge-pill {
  padding-right: 0.3em;
  padding-left: 0.3em;
}

.jsfx-badge {
  position: relative;
}

.jsfx-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -8px;
  padding: 1px 3px;
  font-size: 12px;
  text-align: center;
  border-radius: 50%;
  line-height: 13px;
}

.badge-primary {
  background-color: var(--color-primary);
}

.jsfx-badge.jsfx-badge-primary[data-badge]:after {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 0.05rem rgba(88, 103, 221, 0.5);
}

.badge-secondary {
  background-color: var(--color-secondary);
}

.jsfx-badge.jsfx-badge-secondary[data-badge]:after {
  background: var(--color-secondary);
  color: #fff;
  box-shadow: 0 0 0 0.05rem rgba(113, 106, 202, 0.5);
}

.badge-accent {
  background-color: var(--color-accent);
}

.jsfx-badge.jsfx-badge-accent[data-badge]:after {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 0.05rem rgba(152, 22, 244, 0.5);
}

.badge-metal {
  background-color: var(--color-metal);
}

.jsfx-badge.jsfx-badge-metal[data-badge]:after {
  background: var(--color-metal);
  color: #212529;
  box-shadow: 0 0 0 0.05rem rgba(149, 165, 166, 0.5);
}

.badge-light {
  background-color: var(--color-light);
}

.jsfx-badge.jsfx-badge-light[data-badge]:after {
  background: var(--color-light);
  color: #212529;
  box-shadow: 0 0 0 0.05rem rgba(236, 240, 241, 0.5);
}

.badge-dark {
  background-color: var(--color-dark);
}

.jsfx-badge.jsfx-badge-dark[data-badge]:after {
  background: var(--color-dark);
  color: #fff;
  box-shadow: 0 0 0 0.05rem rgba(52, 73, 94, 0.5);
}

.badge-success {
  background-color: var(--color-success);
}

.jsfx-badge.jsfx-badge-success[data-badge]:after {
  background: var(--color-success);
  color: #fff;
  box-shadow: 0 0 0 0.05rem rgba(52, 191, 163, 0.5);
}

.badge-info {
  background-color: var(--color-info);
}

.jsfx-badge.jsfx-badge-info[data-badge]:after {
  background: var(--color-info);
  color: #fff;
  box-shadow: 0 0 0 0.05rem rgba(54, 163, 247, 0.5);
}

.badge-warning {
  background-color: var(--color-warning);
}

.jsfx-badge.jsfx-badge-warning[data-badge]:after {
  background: var(--color-warning);
  color: #212529;
  box-shadow: 0 0 0 0.05rem rgba(255, 184, 34, 0.5);
}

.badge-danger {
  background-color: var(--color-danger);
}

.jsfx-badge.jsfx-badge-danger[data-badge]:after {
  background: var(--color-danger);
  color: #fff;
  box-shadow: 0 0 0 0.05rem rgba(244, 81, 108, 0.5);
}

.jsfx-button {
  --bgcolor: #eee;
  --bdcolor: #ccc;
  --color: black;
  --hover-color: black;
  --hover-bgcolor: #eeea;
  --dropdown-header-color: black;
  --dropdown-item-focus-color: #16181b;
  --dropdown-item-focus-bgcolor: var(--color-light);
  --dropdown-item-active-color: #fff;
  --dropdown-item-active-bgcolor: var(--color-metal);
}

button:focus {
  outline: 0;
}

.btn {
  color: var(--color);
  border: 1px solid var(--bdcolor);
  background-color: var(--bgcolor);
}

.btn:hover {
  color: var(--hover-color);
  background-color: var(--hover-bgcolor);
}

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 2px #ecf0f1;
}

.btn:not(.btn-outline):focus, .btn:not(.btn-outline).focus {
  box-shadow: 0 0 0 1px #ccc;
}

.btn .badge {
  position: relative;
  top: -1px;
  right: -5px;
}

.dropup .dropdown-toggle::after,
.dropdown .dropdown-toggle::after,
.dropright .dropdown-toggle::after {
  margin-left: .555em;
}

.dropleft .dropdown-toggle::after {
  margin-right: .555em;
}

.dropdown-divider {
  margin: 0.35rem 0;
}

.dropdown-header {
  font-size: 0.95rem;
  line-height: 0.9;
  color: var(--dropdown-header-color);
}

.dropdown-item {
  font-size: 0.95rem;
  font-weight: 300;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--dropdown-item-focus-color);
  text-decoration: none;
  background-color: var(--dropdown-item-focus-bgcolor);
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--dropdown-item-active-color);
  text-decoration: none;
  background-color: var(--dropdown-item-active-bgcolor);
}

.btn:not(.border-round):not(.border-pill) {
  border-radius: var(--border-square);
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:focus,
.btn-primary.btn-outline:focus,
.show > .btn-primary.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #4354d9;
}

.btn-primary:not(:disabled):hover {
  color: #fff !important;
  background-color: #384ad7 !important;
  border-color: #2e40d4 !important;
  box-shadow: none !important;
}

.btn-primary.btn-outline {
  color: var(--color-primary);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-primary);
}

.btn-primary.btn-outline:not(:disabled):hover {
  color: #fff !important;
  background-color: #384ad7 !important;
  box-shadow: none !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-primary.btn-outline:not(:disabled):not(.disabled):active,
.btn-primary.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-primary.btn-outline.dropdown-toggle {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.dropdown-item.primary.active {
  color: unset;
  background-color: var(--color-primary);
}

.dropdown-item.primary:hover,
.dropdown-item.primary:focus {
  color: unset !important;
  background-color: rgba(88, 103, 221, 0.5) !important;
}

.btn-secondary,
.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:focus,
.btn-secondary.btn-outline:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #5f57c3;
}

.btn-secondary:not(:disabled):hover {
  color: #fff !important;
  background-color: #564ec0 !important;
  border-color: #4d44bd !important;
  box-shadow: none !important;
}

.btn-secondary.btn-outline {
  color: var(--color-secondary);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-secondary);
}

.btn-secondary.btn-outline:not(:disabled):hover {
  color: #fff !important;
  background-color: #564ec0 !important;
  box-shadow: none !important;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.btn-secondary.btn-outline:not(:disabled):not(.disabled):active,
.btn-secondary.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-secondary.btn-outline.dropdown-toggle {
  color: #fff;
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.dropdown-item.secondary.active {
  color: unset;
  background-color: var(--color-secondary);
}

.dropdown-item.secondary:hover,
.dropdown-item.secondary:focus {
  color: unset !important;
  background-color: rgba(113, 106, 202, 0.5) !important;
}

.btn-accent,
.btn-accent.disabled,
.btn-accent:disabled {
  color: #fff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-accent:focus,
.btn-accent.btn-outline:focus,
.show > .btn-accent.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #8b0be6;
}

.btn-accent:not(:disabled):hover {
  color: #fff !important;
  background-color: #840ad9 !important;
  border-color: #7c0acd !important;
  box-shadow: none !important;
}

.btn-accent.btn-outline {
  color: var(--color-accent);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-accent);
}

.btn-accent.btn-outline:not(:disabled):hover {
  color: #fff !important;
  background-color: #840ad9 !important;
  box-shadow: none !important;
}

.btn-accent:not(:disabled):not(.disabled):active,
.btn-accent:not(:disabled):not(.disabled).active,
.show > .btn-accent.dropdown-toggle,
.btn-accent.btn-outline:not(:disabled):not(.disabled):active,
.btn-accent.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-accent.btn-outline.dropdown-toggle {
  color: #fff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.dropdown-item.accent.active {
  color: unset;
  background-color: var(--color-accent);
}

.dropdown-item.accent:hover,
.dropdown-item.accent:focus {
  color: unset !important;
  background-color: rgba(152, 22, 244, 0.5) !important;
}

.btn-metal,
.btn-metal.disabled,
.btn-metal:disabled {
  color: #212529;
  background-color: var(--color-metal);
  border-color: var(--color-metal);
}

.btn-metal:focus,
.btn-metal.btn-outline:focus,
.show > .btn-metal.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #87999a;
}

.btn-metal:not(:disabled):hover {
  color: #212529 !important;
  background-color: #809395 !important;
  border-color: #798d8f !important;
  box-shadow: none !important;
}

.btn-metal.btn-outline {
  color: var(--color-metal);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-metal);
}

.btn-metal.btn-outline:not(:disabled):hover {
  color: #212529 !important;
  background-color: #809395 !important;
  box-shadow: none !important;
}

.btn-metal:not(:disabled):not(.disabled):active,
.btn-metal:not(:disabled):not(.disabled).active,
.show > .btn-metal.dropdown-toggle,
.btn-metal.btn-outline:not(:disabled):not(.disabled):active,
.btn-metal.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-metal.btn-outline.dropdown-toggle {
  color: #212529;
  background-color: var(--color-metal);
  border-color: var(--color-metal);
}

.dropdown-item.metal.active {
  color: unset;
  background-color: var(--color-metal);
}

.dropdown-item.metal:hover,
.dropdown-item.metal:focus {
  color: unset !important;
  background-color: rgba(149, 165, 166, 0.5) !important;
}

.btn-light,
.btn-light.disabled,
.btn-light:disabled {
  color: #212529;
  background-color: var(--color-light);
  border-color: var(--color-light);
}

.btn-light:focus,
.btn-light.btn-outline:focus,
.show > .btn-light.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #dde4e6;
}

.btn-light:not(:disabled):hover {
  color: #212529 !important;
  background-color: #d6dfe1 !important;
  border-color: #cfd9db !important;
  box-shadow: none !important;
}

.btn-light.btn-outline {
  color: var(--color-light);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-light);
}

.btn-light.btn-outline:not(:disabled):hover {
  color: #212529 !important;
  background-color: #d6dfe1 !important;
  box-shadow: none !important;
}

.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle,
.btn-light.btn-outline:not(:disabled):not(.disabled):active,
.btn-light.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-light.btn-outline.dropdown-toggle {
  color: #212529;
  background-color: var(--color-light);
  border-color: var(--color-light);
}

.dropdown-item.light.active {
  color: unset;
  background-color: var(--color-light);
}

.dropdown-item.light:hover,
.dropdown-item.light:focus {
  color: unset !important;
  background-color: rgba(236, 240, 241, 0.5) !important;
}

.btn-dark,
.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-dark:focus,
.btn-dark.btn-outline:focus,
.show > .btn-dark.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #2b3c4e;
}

.btn-dark:not(:disabled):hover {
  color: #fff !important;
  background-color: #263645 !important;
  border-color: #22303d !important;
  box-shadow: none !important;
}

.btn-dark.btn-outline {
  color: var(--color-dark);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-dark);
}

.btn-dark.btn-outline:not(:disabled):hover {
  color: #fff !important;
  background-color: #263645 !important;
  box-shadow: none !important;
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle,
.btn-dark.btn-outline:not(:disabled):not(.disabled):active,
.btn-dark.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-dark.btn-outline.dropdown-toggle {
  color: #fff;
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.dropdown-item.dark.active {
  color: unset;
  background-color: var(--color-dark);
}

.dropdown-item.dark:hover,
.dropdown-item.dark:focus {
  color: unset !important;
  background-color: rgba(52, 73, 94, 0.5) !important;
}

.btn-success,
.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-success:focus,
.btn-success.btn-outline:focus,
.show > .btn-success.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #2fab92;
}

.btn-success:not(:disabled):hover {
  color: #fff !important;
  background-color: #2ca189 !important;
  border-color: #299781 !important;
  box-shadow: none !important;
}

.btn-success.btn-outline {
  color: var(--color-success);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-success);
}

.btn-success.btn-outline:not(:disabled):hover {
  color: #fff !important;
  background-color: #2ca189 !important;
  box-shadow: none !important;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle,
.btn-success.btn-outline:not(:disabled):not(.disabled):active,
.btn-success.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-success.btn-outline.dropdown-toggle {
  color: #fff;
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.dropdown-item.success.active {
  color: unset;
  background-color: var(--color-success);
}

.dropdown-item.success:hover,
.dropdown-item.success:focus {
  color: unset !important;
  background-color: rgba(52, 191, 163, 0.5) !important;
}

.btn-info,
.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: var(--color-info);
  border-color: var(--color-info);
}

.btn-info:focus,
.btn-info.btn-outline:focus,
.show > .btn-info.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #1d98f6;
}

.btn-info:not(:disabled):hover {
  color: #fff !important;
  background-color: #1192f6 !important;
  border-color: #0a8cf0 !important;
  box-shadow: none !important;
}

.btn-info.btn-outline {
  color: var(--color-info);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-info);
}

.btn-info.btn-outline:not(:disabled):hover {
  color: #fff !important;
  background-color: #1192f6 !important;
  box-shadow: none !important;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle,
.btn-info.btn-outline:not(:disabled):not(.disabled):active,
.btn-info.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-info.btn-outline.dropdown-toggle {
  color: #fff;
  background-color: var(--color-info);
  border-color: var(--color-info);
}

.dropdown-item.info.active {
  color: unset;
  background-color: var(--color-info);
}

.dropdown-item.info:hover,
.dropdown-item.info:focus {
  color: unset !important;
  background-color: rgba(54, 163, 247, 0.5) !important;
}

.btn-warning,
.btn-warning.disabled,
.btn-warning:disabled {
  color: #212529;
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.btn-warning:focus,
.btn-warning.btn-outline:focus,
.show > .btn-warning.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #ffb009;
}

.btn-warning:not(:disabled):hover {
  color: #212529 !important;
  background-color: #fbaa00 !important;
  border-color: #eea200 !important;
  box-shadow: none !important;
}

.btn-warning.btn-outline {
  color: var(--color-warning);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-warning);
}

.btn-warning.btn-outline:not(:disabled):hover {
  color: #212529 !important;
  background-color: #fbaa00 !important;
  box-shadow: none !important;
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle,
.btn-warning.btn-outline:not(:disabled):not(.disabled):active,
.btn-warning.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-warning.btn-outline.dropdown-toggle {
  color: #212529;
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.dropdown-item.warning.active {
  color: unset;
  background-color: var(--color-warning);
}

.dropdown-item.warning:hover,
.dropdown-item.warning:focus {
  color: unset !important;
  background-color: rgba(255, 184, 34, 0.5) !important;
}

.btn-danger,
.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff;
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger:focus,
.btn-danger.btn-outline:focus,
.show > .btn-danger.dropdown-toggle:focus {
  border-radius: 1px;
  box-shadow: 0 0 0 0.05rem #f23958;
}

.btn-danger:not(:disabled):hover {
  color: #fff !important;
  background-color: #f22d4e !important;
  border-color: #f12143 !important;
  box-shadow: none !important;
}

.btn-danger.btn-outline {
  color: var(--color-danger);
  background-color: transparent;
  background-image: none;
  border-color: var(--color-danger);
}

.btn-danger.btn-outline:not(:disabled):hover {
  color: #fff !important;
  background-color: #f22d4e !important;
  box-shadow: none !important;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle,
.btn-danger.btn-outline:not(:disabled):not(.disabled):active,
.btn-danger.btn-outline:not(:disabled):not(.disabled).active,
.show > .btn-danger.btn-outline.dropdown-toggle {
  color: #fff;
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.dropdown-item.danger.active {
  color: unset;
  background-color: var(--color-danger);
}

.dropdown-item.danger:hover,
.dropdown-item.danger:focus {
  color: unset !important;
  background-color: rgba(244, 81, 108, 0.5) !important;
}

.btn-hg {
  padding: 0.5rem 1rem;
  font-size: var(--font-hg);
}

.btn-lg {
  padding: 0.4rem 0.9rem;
  font-size: var(--font-lg);
}

.btn-md {
  padding: 0.375rem 0.75rem;
  font-size: var(--font-md);
}

.btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: var(--font-sm);
}

.btn-xs {
  padding: 0.15rem 0.5rem;
  font-size: var(--font-xs);
}

div[jsfx-role="title"] {
  font-weight: 300;
  color: var(--title-color) !important;
}

div[jsfx-role="title"]:not(:empty) {
  padding-right: 15px;
}

div[jsfx-role="body"] {
  font-weight: 300;
  padding: 0px 0px;
}

.error.bs-tooltip-top .arrow::before,
.error.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--color-danger);
}

.error.bs-tooltip-bottom .arrow::before,
.error.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--color-danger);
}

.error.bs-tooltip-left .arrow::before,
.error.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: var(--color-danger);
}

.error.bs-tooltip-right .arrow::before,
.error.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: var(--color-danger);
}

.error .tooltip-inner {
  background-color: var(--color-danger);
}

.jsfx-checkbox {
  --title-color: inherit;
  --text-color: inherit;
  --border-color: #bdc3d4;
  --checked-color: #7281a4;
}

.jsfx-checkbox label > .choice:after {
  border: solid var(--checked-color);
}

.jsfx-checkbox label > .choice:after {
  top: 16%;
  left: 33%;
  width: 34%;
  height: 56%;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg);
}

.jsfx-radio {
  --text-color: inherit;
  --border-color: #bdc3d4;
  --checked-color: #7281a4;
}

.jsfx-radio label > .choice {
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  -ms-border-radius: 50% !important;
  -o-border-radius: 50% !important;
  border-radius: 50% !important;
}

.jsfx-radio label > .choice:after {
  top: 50%;
  left: 50%;
  margin-left: -3px;
  margin-top: -3px;
  height: 6px;
  width: 6px;
  border-radius: 100% !important;
}

.jsfx-radio label > .choice:after {
  border: solid var(--checked-color);
}

.jsfx-radio label.dot > .choice:after {
  background: var(--checked-color);
}

.jsfx-radio label.ring > .choice:after {
  background: #fff;
}

.jsfx-radio label.ring > input:not([disabled]):checked ~ .choice {
  background: var(--checked-color);
}

.jsfx-radio label.ring > .choice:after {
  border: solid #fff !important;
}

.jsfx-checkbox label.primary > .choice,
.jsfx-checkbox label.primary > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-primary) !important;
}

.jsfx-checkbox label.primary > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-primary);
}

.jsfx-radio label.primary > .choice {
  border: 1px solid var(--color-primary);
}

.jsfx-radio label.primary > .choice:after {
  border: solid var(--color-primary);
}

.jsfx-radio label.primary.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-primary);
}

.jsfx-checkbox label.secondary > .choice,
.jsfx-checkbox label.secondary > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-secondary) !important;
}

.jsfx-checkbox label.secondary > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-secondary);
}

.jsfx-radio label.secondary > .choice {
  border: 1px solid var(--color-secondary);
}

.jsfx-radio label.secondary > .choice:after {
  border: solid var(--color-secondary);
}

.jsfx-radio label.secondary.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-secondary);
}

.jsfx-checkbox label.accent > .choice,
.jsfx-checkbox label.accent > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-accent) !important;
}

.jsfx-checkbox label.accent > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-accent);
}

.jsfx-radio label.accent > .choice {
  border: 1px solid var(--color-accent);
}

.jsfx-radio label.accent > .choice:after {
  border: solid var(--color-accent);
}

.jsfx-radio label.accent.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-accent);
}

.jsfx-checkbox label.metal > .choice,
.jsfx-checkbox label.metal > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-metal) !important;
}

.jsfx-checkbox label.metal > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-metal);
}

.jsfx-radio label.metal > .choice {
  border: 1px solid var(--color-metal);
}

.jsfx-radio label.metal > .choice:after {
  border: solid var(--color-metal);
}

.jsfx-radio label.metal.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-metal);
}

.jsfx-checkbox label.light > .choice,
.jsfx-checkbox label.light > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-light) !important;
}

.jsfx-checkbox label.light > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-light);
}

.jsfx-radio label.light > .choice {
  border: 1px solid var(--color-light);
}

.jsfx-radio label.light > .choice:after {
  border: solid var(--color-light);
}

.jsfx-radio label.light.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-light);
}

.jsfx-checkbox label.dark > .choice,
.jsfx-checkbox label.dark > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-dark) !important;
}

.jsfx-checkbox label.dark > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-dark);
}

.jsfx-radio label.dark > .choice {
  border: 1px solid var(--color-dark);
}

.jsfx-radio label.dark > .choice:after {
  border: solid var(--color-dark);
}

.jsfx-radio label.dark.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-dark);
}

.jsfx-checkbox label.success > .choice,
.jsfx-checkbox label.success > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-success) !important;
}

.jsfx-checkbox label.success > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-success);
}

.jsfx-radio label.success > .choice {
  border: 1px solid var(--color-success);
}

.jsfx-radio label.success > .choice:after {
  border: solid var(--color-success);
}

.jsfx-radio label.success.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-success);
}

.jsfx-checkbox label.info > .choice,
.jsfx-checkbox label.info > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-info) !important;
}

.jsfx-checkbox label.info > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-info);
}

.jsfx-radio label.info > .choice {
  border: 1px solid var(--color-info);
}

.jsfx-radio label.info > .choice:after {
  border: solid var(--color-info);
}

.jsfx-radio label.info.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-info);
}

.jsfx-checkbox label.warning > .choice,
.jsfx-checkbox label.warning > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-warning) !important;
}

.jsfx-checkbox label.warning > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-warning);
}

.jsfx-radio label.warning > .choice {
  border: 1px solid var(--color-warning);
}

.jsfx-radio label.warning > .choice:after {
  border: solid var(--color-warning);
}

.jsfx-radio label.warning.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-warning);
}

.jsfx-checkbox label.danger > .choice,
.jsfx-checkbox label.danger > input:not([disabled]):checked ~ .choice {
  border: 1px solid var(--color-danger) !important;
}

.jsfx-checkbox label.danger > input:not([disabled]) ~ .choice:after {
  border: solid var(--color-danger);
}

.jsfx-radio label.danger > .choice {
  border: 1px solid var(--color-danger);
}

.jsfx-radio label.danger > .choice:after {
  border: solid var(--color-danger);
}

.jsfx-radio label.danger.ring > input:not([disabled]):checked ~ .choice {
  background: var(--color-danger);
}

.jsfx-choice-inline {
  display: inline-flex;
  float: left;
}

.jsfx-choice-list {
  display: inline-grid;
  text-align: left;
}

.jsfx-radio label,
.jsfx-checkbox label {
  color: var(--text-color);
  float: left;
  position: relative;
  margin: auto 0px;
  display: flex;
  align-items: center;
}

.jsfx-radio label > input,
.jsfx-checkbox label > input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  filter: alpha(opacity=0);
}

.jsfx-radio .text,
.jsfx-checkbox .text {
  line-height: 1.6;
}

.jsfx-radio label.square > .choice,
.jsfx-checkbox label.square > .choice {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

.jsfx-radio label.round > .choice,
.jsfx-checkbox label.round > .choice {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.jsfx-radio label > .choice,
.jsfx-checkbox label > .choice {
  cursor: pointer;
  background-color: #fff;
  position: absolute;
  left: 0;
  height: 18px;
  width: 18px;
  border: 1px solid var(--border-color);
}

.jsfx-radio label > .choice:after,
.jsfx-checkbox label > .choice:after {
  content: '';
  position: absolute;
  display: none;
}

.jsfx-radio label > input:checked ~ .choice:after,
.jsfx-checkbox label > input:checked ~ .choice:after {
  display: block;
}

.jsfx-radio label > input:disabled ~ .choice,
.jsfx-checkbox label > input:disabled ~ .choice {
  opacity: 0.6 !important;
  filter: alpha(opacity=60) !important;
  pointer-events: none;
  background-color: lightgray !important;
  border: 1px solid #bdc3d4 !important;
}

.jsfx-radio .text:not(:empty),
.jsfx-checkbox .text:not(:empty) {
  margin-right: 10px;
}

.jsfx-radio .text:empty,
.jsfx-checkbox .text:empty {
  margin-left: 20px;
}

.jsfx-radio label.font-hg > .choice,
.jsfx-checkbox label.font-hg > .choice {
  height: 24px;
  width: 24px;
}

.jsfx-radio .font-hg .text,
.jsfx-checkbox .font-hg .text {
  margin-left: 32px;
}

.jsfx-choice-inline label.font-hg {
  height: 38px;
}

.jsfx-radio label.font-lg > .choice,
.jsfx-checkbox label.font-lg > .choice {
  height: 22px;
  width: 22px;
}

.jsfx-radio .font-lg .text,
.jsfx-checkbox .font-lg .text {
  margin-left: 30px;
}

.jsfx-choice-inline label.font-lg {
  height: 36px;
}

.jsfx-radio label.font-md > .choice,
.jsfx-checkbox label.font-md > .choice {
  height: 18px;
  width: 18px;
}

.jsfx-radio .font-md .text,
.jsfx-checkbox .font-md .text {
  margin-left: 26px;
}

.jsfx-choice-inline label.font-md {
  height: 32px;
}

.jsfx-radio label.font-sm > .choice,
.jsfx-checkbox label.font-sm > .choice {
  height: 16px;
  width: 16px;
}

.jsfx-radio .font-sm .text,
.jsfx-checkbox .font-sm .text {
  margin-left: 24px;
}

.jsfx-choice-inline label.font-sm {
  height: 30px;
}

.jsfx-radio label.font-xs > .choice,
.jsfx-checkbox label.font-xs > .choice {
  height: 14px;
  width: 14px;
}

.jsfx-radio .font-xs .text,
.jsfx-checkbox .font-xs .text {
  margin-left: 22px;
}

.jsfx-choice-inline label.font-xs {
  height: 28px;
}

.jsfx-radio label.font-hg > .choice:after {
  margin-left: -5px;
  margin-top: -5px;
  height: 10px;
  width: 10px;
}

.jsfx-radio label.font-lg > .choice:after {
  margin-left: -4px;
  margin-top: -4px;
  height: 8px;
  width: 8px;
}

.jsfx-switch {
  --on-color: var(--color-primary);
  --off-color: #ddd;
  --button-color: #fff;
  --bdcolor: #ddd;
}

/* input-checkbox */
.jsfx-switch input {
  position: relative;
  background-color: var(--off-color);
  border-radius: 20px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all .2s ease;
}

.jsfx-switch input[disabled] {
  background-color: #eee !important;
}

/* 按钮 */
.jsfx-switch input::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border: 1px solid var(--bdcolor);
  background-color: var(--button-color);
  border-radius: 50%;
  transition: all .2s ease;
}

/* checked状态时，背景颜色改变 */
.jsfx-switch input:checked {
  background-color: var(--on-color);
}

/* checked状态时，按钮位置改变 */
.jsfx-switch input:checked::after {
  left: 50%;
}

.jsfx-switch.color-primary input:checked {
  background-color: var(--color-primary);
}

.jsfx-switch.color-primary input::after {
  border: 1px solid var(--color-primary);
}

.jsfx-switch.color-secondary input:checked {
  background-color: var(--color-secondary);
}

.jsfx-switch.color-secondary input::after {
  border: 1px solid var(--color-secondary);
}

.jsfx-switch.color-accent input:checked {
  background-color: var(--color-accent);
}

.jsfx-switch.color-accent input::after {
  border: 1px solid var(--color-accent);
}

.jsfx-switch.color-metal input:checked {
  background-color: var(--color-metal);
}

.jsfx-switch.color-metal input::after {
  border: 1px solid var(--color-metal);
}

.jsfx-switch.color-light input:checked {
  background-color: var(--color-light);
}

.jsfx-switch.color-light input::after {
  border: 1px solid var(--color-light);
}

.jsfx-switch.color-dark input:checked {
  background-color: var(--color-dark);
}

.jsfx-switch.color-dark input::after {
  border: 1px solid var(--color-dark);
}

.jsfx-switch.color-success input:checked {
  background-color: var(--color-success);
}

.jsfx-switch.color-success input::after {
  border: 1px solid var(--color-success);
}

.jsfx-switch.color-info input:checked {
  background-color: var(--color-info);
}

.jsfx-switch.color-info input::after {
  border: 1px solid var(--color-info);
}

.jsfx-switch.color-warning input:checked {
  background-color: var(--color-warning);
}

.jsfx-switch.color-warning input::after {
  border: 1px solid var(--color-warning);
}

.jsfx-switch.color-danger input:checked {
  background-color: var(--color-danger);
}

.jsfx-switch.color-danger input::after {
  border: 1px solid var(--color-danger);
}

.jsfx-switch.size-hg input {
  width: 42px;
  height: 21px;
}

.jsfx-switch.size-hg div[jsfx-role="body"] {
  height: 38px;
}

.jsfx-switch.size-lg input {
  width: 40px;
  height: 20px;
}

.jsfx-switch.size-lg div[jsfx-role="body"] {
  height: 36px;
}

.jsfx-switch.size-md input {
  width: 36px;
  height: 18px;
}

.jsfx-switch.size-md div[jsfx-role="body"] {
  height: 32px;
}

.jsfx-switch.size-sm input {
  width: 34px;
  height: 17px;
}

.jsfx-switch.size-sm div[jsfx-role="body"] {
  height: 30px;
}

.jsfx-switch.size-xs input {
  width: 32px;
  height: 16px;
}

.jsfx-switch.size-xs div[jsfx-role="body"] {
  height: 28px;
}

.jsfx-textinput,
.jsfx-emailinput,
.jsfx-telinput,
.jsfx-numberinput,
.jsfx-password,
.jsfx-datepicker,
.jsfx-daterangepicker {
  --title-color: inherit;
  --color: #495057;
  --bdcolor: #ced4da;
  --focus-bdcolor: #aaa;
}

input.form-control {
  border-radius: 0;
}

.jsfx-input-group {
  display: flex;
  flex-wrap: nowrap;
}

.jsfx-numberinput input {
  padding-right: 0px;
}

.jsfx-input-group.font-hg {
  height: 38px;
}

.jsfx-input-group.font-hg .jsfx-input-icon {
  width: 38px;
}

.jsfx-input-group.font-hg > .jsfx-input-div > input {
  font-size: var(--font-hg) !important;
}

.jsfx-input-group.font-hg > .jsfx-input-div.left-icon > input {
  padding-left: 38px !important;
}

.jsfx-input-group.font-hg > .jsfx-input-div.right-icon > input {
  padding-right: 38px !important;
}

.jsfx-input-group.font-lg {
  height: 36px;
}

.jsfx-input-group.font-lg .jsfx-input-icon {
  width: 36px;
}

.jsfx-input-group.font-lg > .jsfx-input-div > input {
  font-size: var(--font-lg) !important;
}

.jsfx-input-group.font-lg > .jsfx-input-div.left-icon > input {
  padding-left: 36px !important;
}

.jsfx-input-group.font-lg > .jsfx-input-div.right-icon > input {
  padding-right: 36px !important;
}

.jsfx-input-group.font-md {
  height: 32px;
}

.jsfx-input-group.font-md .jsfx-input-icon {
  width: 32px;
}

.jsfx-input-group.font-md > .jsfx-input-div > input {
  font-size: var(--font-md) !important;
}

.jsfx-input-group.font-md > .jsfx-input-div.left-icon > input {
  padding-left: 32px !important;
}

.jsfx-input-group.font-md > .jsfx-input-div.right-icon > input {
  padding-right: 32px !important;
}

.jsfx-input-group.font-sm {
  height: 30px;
}

.jsfx-input-group.font-sm .jsfx-input-icon {
  width: 30px;
}

.jsfx-input-group.font-sm > .jsfx-input-div > input {
  font-size: var(--font-sm) !important;
}

.jsfx-input-group.font-sm > .jsfx-input-div.left-icon > input {
  padding-left: 30px !important;
}

.jsfx-input-group.font-sm > .jsfx-input-div.right-icon > input {
  padding-right: 30px !important;
}

.jsfx-input-group.font-xs {
  height: 28px;
}

.jsfx-input-group.font-xs .jsfx-input-icon {
  width: 28px;
}

.jsfx-input-group.font-xs > .jsfx-input-div > input {
  font-size: var(--font-xs) !important;
}

.jsfx-input-group.font-xs > .jsfx-input-div.left-icon > input {
  padding-left: 28px !important;
}

.jsfx-input-group.font-xs > .jsfx-input-div.right-icon > input {
  padding-right: 28px !important;
}

.jsfx-input-div {
  position: relative;
  padding: 0;
  width: 100%;
}

.jsfx-input-div input {
  color: var(--color);
  border: 1px solid var(--bdcolor);
  height: 100%;
}

.jsfx-input-div input:focus {
  color: var(--color);
  border: 1px solid var(--focus-bdcolor);
  box-shadow: none;
}

.jsfx-input-icon {
  position: absolute;
  height: 100%;
  display: inline-block;
  text-align: center;
  top: 0;
}

.jsfx-input-icon > span {
  display: table;
  height: 100%;
  width: 100%;
}

.jsfx-input-icon.left-icon {
  left: 0;
}

.jsfx-input-icon.right-icon {
  right: 0;
}

.jsfx-input-icon > span > i {
  display: table-cell;
  vertical-align: middle;
  padding-top: 2px;
  text-align: center;
  color: var(--bdcolor);
}

.jsfx-input-error,
.jsfx-input-error:focus {
  background-color: #fff6f6 !important;
  border-color: #ff000042 !important;
  border-width: 1px !important;
}

.jsfx-textarea {
  --title-color: inherit;
  --color: #495057;
  --bdcolor: #ced4da;
  --focus-bdcolor: #aaa;
}

.jsfx-textarea textarea {
  color: var(--color);
  border: 1px solid var(--bdcolor);
}

.jsfx-textarea textarea:focus {
  color: var(--color);
  border: 1px solid var(--focus-bdcolor);
  box-shadow: none;
}

.jsfx-textarea [jsfx-role=body],
.jsfx-texteditor [jsfx-role=body] {
  display: block !important;
}

.jsfx-textarea .counter:not(:empty),
.jsfx-texteditor .counter:not(:empty) {
  padding: 0px 5px;
}

.jsfx-textarea .counter,
.jsfx-texteditor .counter {
  font-size: smaller;
  right: 0;
  color: #fff;
  background-color: var(--color-success);
}

.jsfx-textarea .counter.error,
.jsfx-texteditor .counter.error {
  background-color: var(--color-danger) !important;
}

.note-editor.note-frame {
  border: 1px solid #ccc;
}

.card {
  border-radius: 0;
}

div.modal[aria-label=Help] .modal-footer {
  display: none;
}

.note-placeholder {
  display: block;
}

.jsfx-daterangepicker .form-control[readonly] {
  background-color: transparent;
}

.jsfx-select {
  --bg-color: #fff;
  --text-color: #444;
  --border-color: #aaa;
  --placeholder-color: #999;
  --arrow-color: #888;
  --selected-color: #ddd;
  --hover-bg-color: #5897fb;
  --hover-text-color: #fff;
  --choice-text-color: #000;
  --choice-back-color: #e4e4e4;
  --choice-border-color: #aaa;
  --choice-remove-color: #999;
}

.select2-container li.select2-search,
.select2-container input[type=search] {
  width: 100% !important;
}

.select2-selection--single .select2-selection__arrow {
  right: 4px !important;
}

[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: 4px !important;
}

.select2-selection--single,
.select2-selection--multiple {
  background-color: var(--bg-color) !important;
}

.select2-selection__rendered {
  color: var(--text-color) !important;
}

.select2-selection__placeholder {
  color: var(--placeholder-color) !important;
}

.select2-selection__arrow b {
  border-color: var(--arrow-color) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--arrow-color) transparent !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  outline: none !important;
  border-radius: 0;
  height: auto;
  border: 1px solid var(--border-color);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: 1px solid var(--border-color);
}

.face-shadow .select2-container--default .select2-selection--single,
.face-shadow .select2-container--default .select2-selection--multiple,
.select2-dropdown.face-shadow {
  box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.19) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--selected-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--choice-back-color);
  border: 1px solid var(--choice-border-color);
  border-radius: 0;
  color: var(--choice-text-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--choice-remove-color);
}

.select2-dropdown {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--hover-bg-color);
  color: var(--hover-text-color);
}

.face-pill .select2-container--default .select2-selection--single,
.face-pill .select2-container--default .select2-selection--multiple {
  border-radius: var(--border-pill) !important;
}

.face-round .select2-container--default .select2-selection--single,
.face-round .select2-container--default .select2-selection--multiple {
  border-radius: var(--border-round) !important;
}

.face-square .select2-container--default .select2-selection--single,
.face-square .select2-container--default .select2-selection--multiple {
  border-radius: var(--border-square) !important;
}

.face-round .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 4px;
}

.face-pill .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: var(--border-pill);
}

.select2-dropdown.face-round,
.select2-dropdown.face-pill {
  border-radius: 4px;
}

.outline.primary .select2-container--default .select2-selection--single,
.outline.primary .select2-container--default .select2-selection--multiple {
  border-color: var(--color-primary);
}

.primary .select2-container--default.select2-container--focus .select2-selection--single,
.primary .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--color-primary);
}

.select2-dropdown.primary .select2-results__option[aria-selected=true] {
  background-color: var(--color-prim