:root {
  /* ============================================================
     IIA v6 design system — canonical token source (--iia-*)
     Mirrors insites_core/insites_admin/styles/sass/_root.sass so
     the component bundle resolves v6 standalone in EVERY module,
     not only where the admin CSS happens to load. Brand #436CF2,
     Poppins, 4px radius. Dark-mode (-dm-) values are defined for
     parity; switching is not wired here (the design is light).
     ============================================================ */
  --iia-text-1: #000000;
  --iia-text-2: #323232;
  --iia-text-3: #575757;
  --iia-text-buttonlabel: #FFFFFF;
  --iia-text-white: #FFFFFF;
  --iia-text-dm-1: #FFFFFF;
  --iia-text-dm-2: #E0E0E0;
  --iia-text-dm-3: #E0E0E0;
  --iia-text-dm-buttonlabel: #1F1F1F;
  --iia-text-dm-white: #FFFFFF;
  --iia-main: #436CF2;
  --iia-main-light: #436CF214;
  --iia-main-dark: #3159DB;
  --iia-main-dm: #436CF2;
  --iia-main-dm-light: #2B3042;
  --iia-main-dm-dark: #3159DB;
  --iia-sidebar: #0F0F0F;
  --iia-sidebar-dm: #141414;
  --iia-sidebar-hover: #242424;
  --iia-header: #FDFDFD;
  --iia-header-dm: #141414;
  --iia-ui-1: #F8F8F8;
  --iia-ui-2: #84848F;
  --iia-ui-3: #DFDFDF;
  --iia-ui-4: #F7F7F7;
  --iia-ui-5: #FDFDFD;
  --iia-ui-dm-1: #2E2E2E;
  --iia-ui-dm-2: #CCCCCC;
  --iia-ui-dm-3: #3D3D3D;
  --iia-ui-dm-4: #0F0F0F;
  --iia-ui-dm-5: #1F1F1F;
  --iia-alert-negative: #DF1F1F;
  --iia-alert-negative-light: #DF1F1F14;
  --iia-alert-negative-dark: #CC1717;
  --iia-alert-dm-negative: #E74E3B;
  --iia-alert-dm-negative-light: #FB30240A;
  --iia-alert-dm-negative-dark: #E32217;
  --iia-alert-positive: #048801;
  --iia-alert-positive-light: #04880114;
  --iia-alert-positive-dark: #026900;
  --iia-alert-dm-positive: #439639;
  --iia-alert-dm-positive-light: #1D980F0A;
  --iia-alert-dm-positive-dark: #128006;
  --iia-alert-warning: #EC9C00;
  --iia-alert-warning-light: #FBAC1314;
  --iia-alert-warning-dark: #CC8700;
  --iia-alert-dm-warning: #D9991D;
  --iia-alert-dm-warning-light: #FBAC130A;
  --iia-alert-dm-warning-dark: #DB940B;

  /* ============================================================
     Component bridge — every --ins-* token the v3 components read
     is now an alias onto the --iia-* system above. This is the
     migration the reskin skipped: components inherit v6 instead of
     the old v2 palette, with no per-page overrides. Legacy category
     accents (pink/purple/turquoise/fuchsia/information) have no v6
     equivalent and keep their v2 values; they are unused in the
     redesigned CRM surfaces.
     ============================================================ */
  /* Ink / text ramp */
  --ins-color-ink: var(--iia-text-1);
  --ins-color-ink40: var(--iia-ui-2);
  --ins-color-ink10: var(--iia-ui-3);
  --ins-color-ink5: var(--iia-ui-1);
  --ins-color-ink1: var(--iia-text-white);
  --ins-color-white: var(--iia-text-white);
  /* Primary / accent */
  --ins-color-blue: var(--iia-main);
  --ins-color-blue2: var(--iia-main-dark);
  --ins-color-blue-20p: var(--iia-main-light);
  --ins-color-blue-10p: var(--iia-main-light);
  --ins-color-primary: var(--iia-main);
  /* Success / positive */
  --ins-color-green: var(--iia-alert-positive);
  --ins-color-green2: var(--iia-alert-positive-dark);
  --ins-color-green-10p: var(--iia-alert-positive-light);
  --ins-color-success: var(--iia-alert-positive);
  /* Warning / amber (orange + yellow both map to the single v6 warning) */
  --ins-color-orange: var(--iia-alert-warning);
  --ins-color-orange2: var(--iia-alert-warning-dark);
  --ins-color-orange-10p: var(--iia-alert-warning-light);
  --ins-color-warning: var(--iia-alert-warning);
  --ins-color-yellow: var(--iia-alert-warning);
  --ins-color-yellow2: var(--iia-alert-warning-dark);
  --ins-color-yellow-10p: var(--iia-alert-warning-light);
  /* Negative / danger */
  --ins-color-red: var(--iia-alert-negative);
  --ins-color-red2: var(--iia-alert-negative-dark);
  --ins-color-red-10p: var(--iia-alert-negative-light);
  --ins-color-negative: var(--iia-alert-negative);
  --ins-color-negative-10p: var(--iia-alert-negative-light);
  /* Neutral greys */
  --ins-color-grey: var(--iia-ui-3);
  --ins-color-grey2: var(--iia-ui-3);
  --ins-color-grey-10p: var(--iia-ui-1);
  /* Legacy category accents — no v6 equivalent, kept at v2 */
  --ins-color-pink: #ff3366;
  --ins-color-pink2: #ff1a53;
  --ins-color-pink-10p: #feebf0;
  --ins-color-turquoise: #2bbad9;
  --ins-color-turquoise2: #24aac7;
  --ins-color-turquoise-10p: #eaf8fb;
  --ins-color-purple: #694fcd;
  --ins-color-fushcia: #c65bbb;
  --ins-color-information1: #ff3366;
  --ins-color-information2: #fdd835;
  /* Tables / surfaces */
  --ins-color-table-odd: var(--iia-ui-5);
  --ins-color-table-even: var(--iia-ui-4);
  --ins-color-disabled_readonly_bg: var(--iia-ui-4);
  --ins-bg-color: var(--iia-ui-5);
  --ins-bg-color2: var(--iia-ui-3);
  --ins-bg-color3: var(--iia-ui-2);
  --ins-bg-color4: var(--iia-ui-1);
  --ins-bg-color5: var(--iia-ui-4);
  /* Borders */
  --ins-border-radius: 4px;
  --ins-border-thickness: 1px;
  --ins-border-style: solid;
  --ins-border-color: var(--iia-ui-3);
  /* Shadows (geometry + neutral, unchanged) */
  --ins-shadow-x: 1px;
  --ins-shadow-y: 1px;
  --ins-shadow-blur: 2px;
  --ins-shadow-color: var(--iia-ui-3);
  /* Type */
  --ins-font-family: "Poppins", sans-serif
}

[class=hydrated] {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent
}

ins-button button[disabled] {
  pointer-events: none
}

ins-button button,
ins-button button[type=button],
ins-button button[type=reset],
ins-button button[type=submit] {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  overflow: hidden;
  font-family: var(--ins-font-family);
  font-weight: 600 !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.5;
  vertical-align: top;
  min-width: 52px;
  height: 38px;
  border: none;
  border-radius: var(--ins-border-radius);
  padding: 0 16px;
  transition: background .35s;
  transition: width .35s;
  cursor: pointer
}

ins-button button.blue,
ins-button button.primary,
ins-button button[type=button].blue,
ins-button button[type=button].primary,
ins-button button[type=reset].blue,
ins-button button[type=reset].primary,
ins-button button[type=submit].blue,
ins-button button[type=submit].primary {
  background-color: transparent;
  color: var(--ins-color-blue)
}

ins-button button.blue.solid,
ins-button button.primary.solid,
ins-button button[type=button].blue.solid,
ins-button button[type=button].primary.solid,
ins-button button[type=reset].blue.solid,
ins-button button[type=reset].primary.solid,
ins-button button[type=submit].blue.solid,
ins-button button[type=submit].primary.solid {
  background-color: var(--ins-color-blue);
  color: var(--ins-color-ink1)
}

ins-button button.blue.solid:not([disabled]):hover,
ins-button button.primary.solid:not([disabled]):hover,
ins-button button[type=button].blue.solid:not([disabled]):hover,
ins-button button[type=button].primary.solid:not([disabled]):hover,
ins-button button[type=reset].blue.solid:not([disabled]):hover,
ins-button button[type=reset].primary.solid:not([disabled]):hover,
ins-button button[type=submit].blue.solid:not([disabled]):hover,
ins-button button[type=submit].primary.solid:not([disabled]):hover {
  background: var(--ins-color-blue2)
}

@media only screen and (max-width:425px) {

  ins-button button.blue.solid:not([disabled]):hover,
  ins-button button.primary.solid:not([disabled]):hover,
  ins-button button[type=button].blue.solid:not([disabled]):hover,
  ins-button button[type=button].primary.solid:not([disabled]):hover,
  ins-button button[type=reset].blue.solid:not([disabled]):hover,
  ins-button button[type=reset].primary.solid:not([disabled]):hover,
  ins-button button[type=submit].blue.solid:not([disabled]):hover,
  ins-button button[type=submit].primary.solid:not([disabled]):hover {
    background-color: #00f
  }
}

ins-button button.blue.outlined .ripple-wave,
ins-button button.blue:not(.solid) .ripple-wave,
ins-button button.primary.outlined .ripple-wave,
ins-button button.primary:not(.solid) .ripple-wave,
ins-button button[type=button].blue.outlined .ripple-wave,
ins-button button[type=button].blue:not(.solid) .ripple-wave,
ins-button button[type=button].primary.outlined .ripple-wave,
ins-button button[type=button].primary:not(.solid) .ripple-wave,
ins-button button[type=reset].blue.outlined .ripple-wave,
ins-button button[type=reset].blue:not(.solid) .ripple-wave,
ins-button button[type=reset].primary.outlined .ripple-wave,
ins-button button[type=reset].primary:not(.solid) .ripple-wave,
ins-button button[type=submit].blue.outlined .ripple-wave,
ins-button button[type=submit].blue:not(.solid) .ripple-wave,
ins-button button[type=submit].primary.outlined .ripple-wave,
ins-button button[type=submit].primary:not(.solid) .ripple-wave {
  background-color: rgba(30, 134, 227, .25)
}

ins-button button.blue.outlined,
ins-button button.primary.outlined,
ins-button button[type=button].blue.outlined,
ins-button button[type=button].primary.outlined,
ins-button button[type=reset].blue.outlined,
ins-button button[type=reset].primary.outlined,
ins-button button[type=submit].blue.outlined,
ins-button button[type=submit].primary.outlined {
  border: 1px solid var(--ins-color-blue);
  background-color: transparent
}

ins-button button.blue.outlined.is-loading,
ins-button button.primary.outlined.is-loading,
ins-button button[type=button].blue.outlined.is-loading,
ins-button button[type=button].primary.outlined.is-loading,
ins-button button[type=reset].blue.outlined.is-loading,
ins-button button[type=reset].primary.outlined.is-loading,
ins-button button[type=submit].blue.outlined.is-loading,
ins-button button[type=submit].primary.outlined.is-loading {
  background-color: var(--ins-color-blue)
}

ins-button button.blue:not([disabled]):active,
ins-button button.blue:not([disabled]):hover,
ins-button button.primary:not([disabled]):active,
ins-button button.primary:not([disabled]):hover,
ins-button button[type=button].blue:not([disabled]):active,
ins-button button[type=button].blue:not([disabled]):hover,
ins-button button[type=button].primary:not([disabled]):active,
ins-button button[type=button].primary:not([disabled]):hover,
ins-button button[type=reset].blue:not([disabled]):active,
ins-button button[type=reset].blue:not([disabled]):hover,
ins-button button[type=reset].primary:not([disabled]):active,
ins-button button[type=reset].primary:not([disabled]):hover,
ins-button button[type=submit].blue:not([disabled]):active,
ins-button button[type=submit].blue:not([disabled]):hover,
ins-button button[type=submit].primary:not([disabled]):active,
ins-button button[type=submit].primary:not([disabled]):hover {
  background-color: var(--ins-color-blue-10p)
}

@media only screen and (max-width:425px) {

  ins-button button.blue:not([disabled]):active,
  ins-button button.blue:not([disabled]):hover,
  ins-button button.primary:not([disabled]):active,
  ins-button button.primary:not([disabled]):hover,
  ins-button button[type=button].blue:not([disabled]):active,
  ins-button button[type=button].blue:not([disabled]):hover,
  ins-button button[type=button].primary:not([disabled]):active,
  ins-button button[type=button].primary:not([disabled]):hover,
  ins-button button[type=reset].blue:not([disabled]):active,
  ins-button button[type=reset].blue:not([disabled]):hover,
  ins-button button[type=reset].primary:not([disabled]):active,
  ins-button button[type=reset].primary:not([disabled]):hover,
  ins-button button[type=submit].blue:not([disabled]):active,
  ins-button button[type=submit].blue:not([disabled]):hover,
  ins-button button[type=submit].primary:not([disabled]):active,
  ins-button button[type=submit].primary:not([disabled]):hover {
    background: 0 0
  }
}

ins-button button.blue.is-loading:active,
ins-button button.blue.is-loading:hover,
ins-button button.primary.is-loading:active,
ins-button button.primary.is-loading:hover,
ins-button button[type=button].blue.is-loading:active,
ins-button button[type=button].blue.is-loading:hover,
ins-button button[type=button].primary.is-loading:active,
ins-button button[type=button].primary.is-loading:hover,
ins-button button[type=reset].blue.is-loading:active,
ins-button button[type=reset].blue.is-loading:hover,
ins-button button[type=reset].primary.is-loading:active,
ins-button button[type=reset].primary.is-loading:hover,
ins-button button[type=submit].blue.is-loading:active,
ins-button button[type=submit].blue.is-loading:hover,
ins-button button[type=submit].primary.is-loading:active,
ins-button button[type=submit].primary.is-loading:hover {
  background-color: #00f !important
}

ins-button button.green,
ins-button button.positive,
ins-button button[type=button].green,
ins-button button[type=button].positive,
ins-button button[type=reset].green,
ins-button button[type=reset].positive,
ins-button button[type=submit].green,
ins-button button[type=submit].positive {
  background-color: transparent;
  color: var(--ins-color-green)
}

ins-button button.green.solid,
ins-button button.positive.solid,
ins-button button[type=button].green.solid,
ins-button button[type=button].positive.solid,
ins-button button[type=reset].green.solid,
ins-button button[type=reset].positive.solid,
ins-button button[type=submit].green.solid,
ins-button button[type=submit].positive.solid {
  background-color: var(--ins-color-green);
  color: var(--ins-color-ink1)
}

ins-button button.green.solid:not([disabled]):hover,
ins-button button.positive.solid:not([disabled]):hover,
ins-button button[type=button].green.solid:not([disabled]):hover,
ins-button button[type=button].positive.solid:not([disabled]):hover,
ins-button button[type=reset].green.solid:not([disabled]):hover,
ins-button button[type=reset].positive.solid:not([disabled]):hover,
ins-button button[type=submit].green.solid:not([disabled]):hover,
ins-button button[type=submit].positive.solid:not([disabled]):hover {
  background: var(--ins-color-green2)
}

@media only screen and (max-width:425px) {

  ins-button button.green.solid:not([disabled]):hover,
  ins-button button.positive.solid:not([disabled]):hover,
  ins-button button[type=button].green.solid:not([disabled]):hover,
  ins-button button[type=button].positive.solid:not([disabled]):hover,
  ins-button button[type=reset].green.solid:not([disabled]):hover,
  ins-button button[type=reset].positive.solid:not([disabled]):hover,
  ins-button button[type=submit].green.solid:not([disabled]):hover,
  ins-button button[type=submit].positive.solid:not([disabled]):hover {
    background-color: green
  }
}

ins-button button.green.outlined .ripple-wave,
ins-button button.green:not(.solid) .ripple-wave,
ins-button button.positive.outlined .ripple-wave,
ins-button button.positive:not(.solid) .ripple-wave,
ins-button button[type=button].green.outlined .ripple-wave,
ins-button button[type=button].green:not(.solid) .ripple-wave,
ins-button button[type=button].positive.outlined .ripple-wave,
ins-button button[type=button].positive:not(.solid) .ripple-wave,
ins-button button[type=reset].green.outlined .ripple-wave,
ins-button button[type=reset].green:not(.solid) .ripple-wave,
ins-button button[type=reset].positive.outlined .ripple-wave,
ins-button button[type=reset].positive:not(.solid) .ripple-wave,
ins-button button[type=submit].green.outlined .ripple-wave,
ins-button button[type=submit].green:not(.solid) .ripple-wave,
ins-button button[type=submit].positive.outlined .ripple-wave,
ins-button button[type=submit].positive:not(.solid) .ripple-wave {
  background-color: rgba(30, 134, 227, .25)
}

ins-button button.green.outlined,
ins-button button.positive.outlined,
ins-button button[type=button].green.outlined,
ins-button button[type=button].positive.outlined,
ins-button button[type=reset].green.outlined,
ins-button button[type=reset].positive.outlined,
ins-button button[type=submit].green.outlined,
ins-button button[type=submit].positive.outlined {
  border: 1px solid var(--ins-color-green);
  background-color: transparent
}

ins-button button.green.outlined.is-loading,
ins-button button.positive.outlined.is-loading,
ins-button button[type=button].green.outlined.is-loading,
ins-button button[type=button].positive.outlined.is-loading,
ins-button button[type=reset].green.outlined.is-loading,
ins-button button[type=reset].positive.outlined.is-loading,
ins-button button[type=submit].green.outlined.is-loading,
ins-button button[type=submit].positive.outlined.is-loading {
  background-color: var(--ins-color-green)
}

ins-button button.green:not([disabled]):active,
ins-button button.green:not([disabled]):hover,
ins-button button.positive:not([disabled]):active,
ins-button button.positive:not([disabled]):hover,
ins-button button[type=button].green:not([disabled]):active,
ins-button button[type=button].green:not([disabled]):hover,
ins-button button[type=button].positive:not([disabled]):active,
ins-button button[type=button].positive:not([disabled]):hover,
ins-button button[type=reset].green:not([disabled]):active,
ins-button button[type=reset].green:not([disabled]):hover,
ins-button button[type=reset].positive:not([disabled]):active,
ins-button button[type=reset].positive:not([disabled]):hover,
ins-button button[type=submit].green:not([disabled]):active,
ins-button button[type=submit].green:not([disabled]):hover,
ins-button button[type=submit].positive:not([disabled]):active,
ins-button button[type=submit].positive:not([disabled]):hover {
  background-color: var(--ins-color-green-10p)
}

@media only screen and (max-width:425px) {

  ins-button button.green:not([disabled]):active,
  ins-button button.green:not([disabled]):hover,
  ins-button button.positive:not([disabled]):active,
  ins-button button.positive:not([disabled]):hover,
  ins-button button[type=button].green:not([disabled]):active,
  ins-button button[type=button].green:not([disabled]):hover,
  ins-button button[type=button].positive:not([disabled]):active,
  ins-button button[type=button].positive:not([disabled]):hover,
  ins-button button[type=reset].green:not([disabled]):active,
  ins-button button[type=reset].green:not([disabled]):hover,
  ins-button button[type=reset].positive:not([disabled]):active,
  ins-button button[type=reset].positive:not([disabled]):hover,
  ins-button button[type=submit].green:not([disabled]):active,
  ins-button button[type=submit].green:not([disabled]):hover,
  ins-button button[type=submit].positive:not([disabled]):active,
  ins-button button[type=submit].positive:not([disabled]):hover {
    background: 0 0
  }
}

ins-button button.green.is-loading:active,
ins-button button.green.is-loading:hover,
ins-button button.positive.is-loading:active,
ins-button button.positive.is-loading:hover,
ins-button button[type=button].green.is-loading:active,
ins-button button[type=button].green.is-loading:hover,
ins-button button[type=button].positive.is-loading:active,
ins-button button[type=button].positive.is-loading:hover,
ins-button button[type=reset].green.is-loading:active,
ins-button button[type=reset].green.is-loading:hover,
ins-button button[type=reset].positive.is-loading:active,
ins-button button[type=reset].positive.is-loading:hover,
ins-button button[type=submit].green.is-loading:active,
ins-button button[type=submit].green.is-loading:hover,
ins-button button[type=submit].positive.is-loading:active,
ins-button button[type=submit].positive.is-loading:hover {
  background-color: green !important
}

ins-button button.orange,
ins-button button.warning,
ins-button button[type=button].orange,
ins-button button[type=button].warning,
ins-button button[type=reset].orange,
ins-button button[type=reset].warning,
ins-button button[type=submit].orange,
ins-button button[type=submit].warning {
  background-color: transparent;
  color: var(--ins-color-orange)
}

ins-button button.orange.solid,
ins-button button.warning.solid,
ins-button button[type=button].orange.solid,
ins-button button[type=button].warning.solid,
ins-button button[type=reset].orange.solid,
ins-button button[type=reset].warning.solid,
ins-button button[type=submit].orange.solid,
ins-button button[type=submit].warning.solid {
  background-color: var(--ins-color-orange);
  color: var(--ins-color-ink1)
}

ins-button button.orange.solid:not([disabled]):hover,
ins-button button.warning.solid:not([disabled]):hover,
ins-button button[type=button].orange.solid:not([disabled]):hover,
ins-button button[type=button].warning.solid:not([disabled]):hover,
ins-button button[type=reset].orange.solid:not([disabled]):hover,
ins-button button[type=reset].warning.solid:not([disabled]):hover,
ins-button button[type=submit].orange.solid:not([disabled]):hover,
ins-button button[type=submit].warning.solid:not([disabled]):hover {
  background: var(--ins-color-orange2)
}

@media only screen and (max-width:425px) {

  ins-button button.orange.solid:not([disabled]):hover,
  ins-button button.warning.solid:not([disabled]):hover,
  ins-button button[type=button].orange.solid:not([disabled]):hover,
  ins-button button[type=button].warning.solid:not([disabled]):hover,
  ins-button button[type=reset].orange.solid:not([disabled]):hover,
  ins-button button[type=reset].warning.solid:not([disabled]):hover,
  ins-button button[type=submit].orange.solid:not([disabled]):hover,
  ins-button button[type=submit].warning.solid:not([disabled]):hover {
    background-color: orange
  }
}

ins-button button.orange.outlined .ripple-wave,
ins-button button.orange:not(.solid) .ripple-wave,
ins-button button.warning.outlined .ripple-wave,
ins-button button.warning:not(.solid) .ripple-wave,
ins-button button[type=button].orange.outlined .ripple-wave,
ins-button button[type=button].orange:not(.solid) .ripple-wave,
ins-button button[type=button].warning.outlined .ripple-wave,
ins-button button[type=button].warning:not(.solid) .ripple-wave,
ins-button button[type=reset].orange.outlined .ripple-wave,
ins-button button[type=reset].orange:not(.solid) .ripple-wave,
ins-button button[type=reset].warning.outlined .ripple-wave,
ins-button button[type=reset].warning:not(.solid) .ripple-wave,
ins-button button[type=submit].orange.outlined .ripple-wave,
ins-button button[type=submit].orange:not(.solid) .ripple-wave,
ins-button button[type=submit].warning.outlined .ripple-wave,
ins-button button[type=submit].warning:not(.solid) .ripple-wave {
  background-color: rgba(30, 134, 227, .25)
}

ins-button button.orange.outlined,
ins-button button.warning.outlined,
ins-button button[type=button].orange.outlined,
ins-button button[type=button].warning.outlined,
ins-button button[type=reset].orange.outlined,
ins-button button[type=reset].warning.outlined,
ins-button button[type=submit].orange.outlined,
ins-button button[type=submit].warning.outlined {
  border: 1px solid var(--ins-color-orange);
  background-color: transparent
}

ins-button button.orange.outlined.is-loading,
ins-button button.warning.outlined.is-loading,
ins-button button[type=button].orange.outlined.is-loading,
ins-button button[type=button].warning.outlined.is-loading,
ins-button button[type=reset].orange.outlined.is-loading,
ins-button button[type=reset].warning.outlined.is-loading,
ins-button button[type=submit].orange.outlined.is-loading,
ins-button button[type=submit].warning.outlined.is-loading {
  background-color: var(--ins-color-orange)
}

ins-button button.orange:not([disabled]):active,
ins-button button.orange:not([disabled]):hover,
ins-button button.warning:not([disabled]):active,
ins-button button.warning:not([disabled]):hover,
ins-button button[type=button].orange:not([disabled]):active,
ins-button button[type=button].orange:not([disabled]):hover,
ins-button button[type=button].warning:not([disabled]):active,
ins-button button[type=button].warning:not([disabled]):hover,
ins-button button[type=reset].orange:not([disabled]):active,
ins-button button[type=reset].orange:not([disabled]):hover,
ins-button button[type=reset].warning:not([disabled]):active,
ins-button button[type=reset].warning:not([disabled]):hover,
ins-button button[type=submit].orange:not([disabled]):active,
ins-button button[type=submit].orange:not([disabled]):hover,
ins-button button[type=submit].warning:not([disabled]):active,
ins-button button[type=submit].warning:not([disabled]):hover {
  background-color: var(--ins-color-orange-10p)
}

@media only screen and (max-width:425px) {

  ins-button button.orange:not([disabled]):active,
  ins-button button.orange:not([disabled]):hover,
  ins-button button.warning:not([disabled]):active,
  ins-button button.warning:not([disabled]):hover,
  ins-button button[type=button].orange:not([disabled]):active,
  ins-button button[type=button].orange:not([disabled]):hover,
  ins-button button[type=button].warning:not([disabled]):active,
  ins-button button[type=button].warning:not([disabled]):hover,
  ins-button button[type=reset].orange:not([disabled]):active,
  ins-button button[type=reset].orange:not([disabled]):hover,
  ins-button button[type=reset].warning:not([disabled]):active,
  ins-button button[type=reset].warning:not([disabled]):hover,
  ins-button button[type=submit].orange:not([disabled]):active,
  ins-button button[type=submit].orange:not([disabled]):hover,
  ins-button button[type=submit].warning:not([disabled]):active,
  ins-button button[type=submit].warning:not([disabled]):hover {
    background: 0 0
  }
}

ins-button button.orange.is-loading:active,
ins-button button.orange.is-loading:hover,
ins-button button.warning.is-loading:active,
ins-button button.warning.is-loading:hover,
ins-button button[type=button].orange.is-loading:active,
ins-button button[type=button].orange.is-loading:hover,
ins-button button[type=button].warning.is-loading:active,
ins-button button[type=button].warning.is-loading:hover,
ins-button button[type=reset].orange.is-loading:active,
ins-button button[type=reset].orange.is-loading:hover,
ins-button button[type=reset].warning.is-loading:active,
ins-button button[type=reset].warning.is-loading:hover,
ins-button button[type=submit].orange.is-loading:active,
ins-button button[type=submit].orange.is-loading:hover,
ins-button button[type=submit].warning.is-loading:active,
ins-button button[type=submit].warning.is-loading:hover {
  background-color: orange !important
}

ins-button button.negative,
ins-button button.red,
ins-button button[type=button].negative,
ins-button button[type=button].red,
ins-button button[type=reset].negative,
ins-button button[type=reset].red,
ins-button button[type=submit].negative,
ins-button button[type=submit].red {
  background-color: transparent;
  color: var(--ins-color-red)
}

ins-button button.negative.solid,
ins-button button.red.solid,
ins-button button[type=button].negative.solid,
ins-button button[type=button].red.solid,
ins-button button[type=reset].negative.solid,
ins-button button[type=reset].red.solid,
ins-button button[type=submit].negative.solid,
ins-button button[type=submit].red.solid {
  background-color: var(--ins-color-red);
  color: var(--ins-color-ink1)
}

ins-button button.negative.solid:not([disabled]):hover,
ins-button button.red.solid:not([disabled]):hover,
ins-button button[type=button].negative.solid:not([disabled]):hover,
ins-button button[type=button].red.solid:not([disabled]):hover,
ins-button button[type=reset].negative.solid:not([disabled]):hover,
ins-button button[type=reset].red.solid:not([disabled]):hover,
ins-button button[type=submit].negative.solid:not([disabled]):hover,
ins-button button[type=submit].red.solid:not([disabled]):hover {
  background: var(--ins-color-red2)
}

@media only screen and (max-width:425px) {

  ins-button button.negative.solid:not([disabled]):hover,
  ins-button button.red.solid:not([disabled]):hover,
  ins-button button[type=button].negative.solid:not([disabled]):hover,
  ins-button button[type=button].red.solid:not([disabled]):hover,
  ins-button button[type=reset].negative.solid:not([disabled]):hover,
  ins-button button[type=reset].red.solid:not([disabled]):hover,
  ins-button button[type=submit].negative.solid:not([disabled]):hover,
  ins-button button[type=submit].red.solid:not([disabled]):hover {
    background-color: red
  }
}

ins-button button.negative.outlined .ripple-wave,
ins-button button.negative:not(.solid) .ripple-wave,
ins-button button.red.outlined .ripple-wave,
ins-button button.red:not(.solid) .ripple-wave,
ins-button button[type=button].negative.outlined .ripple-wave,
ins-button button[type=button].negative:not(.solid) .ripple-wave,
ins-button button[type=button].red.outlined .ripple-wave,
ins-button button[type=button].red:not(.solid) .ripple-wave,
ins-button button[type=reset].negative.outlined .ripple-wave,
ins-button button[type=reset].negative:not(.solid) .ripple-wave,
ins-button button[type=reset].red.outlined .ripple-wave,
ins-button button[type=reset].red:not(.solid) .ripple-wave,
ins-button button[type=submit].negative.outlined .ripple-wave,
ins-button button[type=submit].negative:not(.solid) .ripple-wave,
ins-button button[type=submit].red.outlined .ripple-wave,
ins-button button[type=submit].red:not(.solid) .ripple-wave {
  background-color: rgba(30, 134, 227, .25)
}

ins-button button.negative.outlined,
ins-button button.red.outlined,
ins-button button[type=button].negative.outlined,
ins-button button[type=button].red.outlined,
ins-button button[type=reset].negative.outlined,
ins-button button[type=reset].red.outlined,
ins-button button[type=submit].negative.outlined,
ins-button button[type=submit].red.outlined {
  border: 1px solid var(--ins-color-red);
  background-color: transparent
}

ins-button button.negative.outlined.is-loading,
ins-button button.red.outlined.is-loading,
ins-button button[type=button].negative.outlined.is-loading,
ins-button button[type=button].red.outlined.is-loading,
ins-button button[type=reset].negative.outlined.is-loading,
ins-button button[type=reset].red.outlined.is-loading,
ins-button button[type=submit].negative.outlined.is-loading,
ins-button button[type=submit].red.outlined.is-loading {
  background-color: var(--ins-color-red)
}

ins-button button.negative:not([disabled]):active,
ins-button button.negative:not([disabled]):hover,
ins-button button.red:not([disabled]):active,
ins-button button.red:not([disabled]):hover,
ins-button button[type=button].negative:not([disabled]):active,
ins-button button[type=button].negative:not([disabled]):hover,
ins-button button[type=button].red:not([disabled]):active,
ins-button button[type=button].red:not([disabled]):hover,
ins-button button[type=reset].negative:not([disabled]):active,
ins-button button[type=reset].negative:not([disabled]):hover,
ins-button button[type=reset].red:not([disabled]):active,
ins-button button[type=reset].red:not([disabled]):hover,
ins-button button[type=submit].negative:not([disabled]):active,
ins-button button[type=submit].negative:not([disabled]):hover,
ins-button button[type=submit].red:not([disabled]):active,
ins-button button[type=submit].red:not([disabled]):hover {
  background-color: var(--ins-color-red-10p)
}

@media only screen and (max-width:425px) {

  ins-button button.negative:not([disabled]):active,
  ins-button button.negative:not([disabled]):hover,
  ins-button button.red:not([disabled]):active,
  ins-button button.red:not([disabled]):hover,
  ins-button button[type=button].negative:not([disabled]):active,
  ins-button button[type=button].negative:not([disabled]):hover,
  ins-button button[type=button].red:not([disabled]):active,
  ins-button button[type=button].red:not([disabled]):hover,
  ins-button button[type=reset].negative:not([disabled]):active,
  ins-button button[type=reset].negative:not([disabled]):hover,
  ins-button button[type=reset].red:not([disabled]):active,
  ins-button button[type=reset].red:not([disabled]):hover,
  ins-button button[type=submit].negative:not([disabled]):active,
  ins-button button[type=submit].negative:not([disabled]):hover,
  ins-button button[type=submit].red:not([disabled]):active,
  ins-button button[type=submit].red:not([disabled]):hover {
    background: 0 0
  }
}

ins-button button.negative.is-loading:active,
ins-button button.negative.is-loading:hover,
ins-button button.red.is-loading:active,
ins-button button.red.is-loading:hover,
ins-button button[type=button].negative.is-loading:active,
ins-button button[type=button].negative.is-loading:hover,
ins-button button[type=button].red.is-loading:active,
ins-button button[type=button].red.is-loading:hover,
ins-button button[type=reset].negative.is-loading:active,
ins-button button[type=reset].negative.is-loading:hover,
ins-button button[type=reset].red.is-loading:active,
ins-button button[type=reset].red.is-loading:hover,
ins-button button[type=submit].negative.is-loading:active,
ins-button button[type=submit].negative.is-loading:hover,
ins-button button[type=submit].red.is-loading:active,
ins-button button[type=submit].red.is-loading:hover {
  background-color: red !important
}

ins-button button.information-1,
ins-button button.pink,
ins-button button[type=button].information-1,
ins-button button[type=button].pink,
ins-button button[type=reset].information-1,
ins-button button[type=reset].pink,
ins-button button[type=submit].information-1,
ins-button button[type=submit].pink {
  background-color: transparent;
  color: var(--ins-color-pink)
}

ins-button button.information-1.solid,
ins-button button.pink.solid,
ins-button button[type=button].information-1.solid,
ins-button button[type=button].pink.solid,
ins-button button[type=reset].information-1.solid,
ins-button button[type=reset].pink.solid,
ins-button button[type=submit].information-1.solid,
ins-button button[type=submit].pink.solid {
  background-color: var(--ins-color-pink);
  color: var(--ins-color-ink1)
}

ins-button button.information-1.solid:not([disabled]):hover,
ins-button button.pink.solid:not([disabled]):hover,
ins-button button[type=button].information-1.solid:not([disabled]):hover,
ins-button button[type=button].pink.solid:not([disabled]):hover,
ins-button button[type=reset].information-1.solid:not([disabled]):hover,
ins-button button[type=reset].pink.solid:not([disabled]):hover,
ins-button button[type=submit].information-1.solid:not([disabled]):hover,
ins-button button[type=submit].pink.solid:not([disabled]):hover {
  background: var(--ins-color-pink2)
}

@media only screen and (max-width:425px) {

  ins-button button.information-1.solid:not([disabled]):hover,
  ins-button button.pink.solid:not([disabled]):hover,
  ins-button button[type=button].information-1.solid:not([disabled]):hover,
  ins-button button[type=button].pink.solid:not([disabled]):hover,
  ins-button button[type=reset].information-1.solid:not([disabled]):hover,
  ins-button button[type=reset].pink.solid:not([disabled]):hover,
  ins-button button[type=submit].information-1.solid:not([disabled]):hover,
  ins-button button[type=submit].pink.solid:not([disabled]):hover {
    background-color: pink
  }
}

ins-button button.information-1.outlined .ripple-wave,
ins-button button.information-1:not(.solid) .ripple-wave,
ins-button button.pink.outlined .ripple-wave,
ins-button button.pink:not(.solid) .ripple-wave,
ins-button button[type=button].information-1.outlined .ripple-wave,
ins-button button[type=button].information-1:not(.solid) .ripple-wave,
ins-button button[type=button].pink.outlined .ripple-wave,
ins-button button[type=button].pink:not(.solid) .ripple-wave,
ins-button button[type=reset].information-1.outlined .ripple-wave,
ins-button button[type=reset].information-1:not(.solid) .ripple-wave,
ins-button button[type=reset].pink.outlined .ripple-wave,
ins-button button[type=reset].pink:not(.solid) .ripple-wave,
ins-button button[type=submit].information-1.outlined .ripple-wave,
ins-button button[type=submit].information-1:not(.solid) .ripple-wave,
ins-button button[type=submit].pink.outlined .ripple-wave,
ins-button button[type=submit].pink:not(.solid) .ripple-wave {
  background-color: rgba(30, 134, 227, .25)
}

ins-button button.information-1.outlined,
ins-button button.pink.outlined,
ins-button button[type=button].information-1.outlined,
ins-button button[type=button].pink.outlined,
ins-button button[type=reset].information-1.outlined,
ins-button button[type=reset].pink.outlined,
ins-button button[type=submit].information-1.outlined,
ins-button button[type=submit].pink.outlined {
  border: 1px solid var(--ins-color-pink);
  background-color: transparent
}

ins-button button.information-1.outlined.is-loading,
ins-button button.pink.outlined.is-loading,
ins-button button[type=button].information-1.outlined.is-loading,
ins-button button[type=button].pink.outlined.is-loading,
ins-button button[type=reset].information-1.outlined.is-loading,
ins-button button[type=reset].pink.outlined.is-loading,
ins-button button[type=submit].information-1.outlined.is-loading,
ins-button button[type=submit].pink.outlined.is-loading {
  background-color: var(--ins-color-pink)
}

ins-button button.information-1:not([disabled]):active,
ins-button button.information-1:not([disabled]):hover,
ins-button button.pink:not([disabled]):active,
ins-button button.pink:not([disabled]):hover,
ins-button button[type=button].information-1:not([disabled]):active,
ins-button button[type=button].information-1:not([disabled]):hover,
ins-button button[type=button].pink:not([disabled]):active,
ins-button button[type=button].pink:not([disabled]):hover,
ins-button button[type=reset].information-1:not([disabled]):active,
ins-button button[type=reset].information-1:not([disabled]):hover,
ins-button button[type=reset].pink:not([disabled]):active,
ins-button button[type=reset].pink:not([disabled]):hover,
ins-button button[type=submit].information-1:not([disabled]):active,
ins-button button[type=submit].information-1:not([disabled]):hover,
ins-button button[type=submit].pink:not([disabled]):active,
ins-button button[type=submit].pink:not([disabled]):hover {
  background-color: var(--ins-color-pink-10p)
}

@media only screen and (max-width:425px) {

  ins-button button.information-1:not([disabled]):active,
  ins-button button.information-1:not([disabled]):hover,
  ins-button button.pink:not([disabled]):active,
  ins-button button.pink:not([disabled]):hover,
  ins-button button[type=button].information-1:not([disabled]):active,
  ins-button button[type=button].information-1:not([disabled]):hover,
  ins-button button[type=button].pink:not([disabled]):active,
  ins-button button[type=button].pink:not([disabled]):hover,
  ins-button button[type=reset].information-1:not([disabled]):active,
  ins-button button[type=reset].information-1:not([disabled]):hover,
  ins-button button[type=reset].pink:not([disabled]):active,
  ins-button button[type=reset].pink:not([disabled]):hover,
  ins-button button[type=submit].information-1:not([disabled]):active,
  ins-button button[type=submit].information-1:not([disabled]):hover,
  ins-button button[type=submit].pink:not([disabled]):active,
  ins-button button[type=submit].pink:not([disabled]):hover {
    background: 0 0
  }
}

ins-button button.information-1.is-loading:active,
ins-button button.information-1.is-loading:hover,
ins-button button.pink.is-loading:active,
ins-button button.pink.is-loading:hover,
ins-button button[type=button].information-1.is-loading:active,
ins-button button[type=button].information-1.is-loading:hover,
ins-button button[type=button].pink.is-loading:active,
ins-button button[type=button].pink.is-loading:hover,
ins-button button[type=reset].information-1.is-loading:active,
ins-button button[type=reset].information-1.is-loading:hover,
ins-button button[type=reset].pink.is-loading:active,
ins-button button[type=reset].pink.is-loading:hover,
ins-button button[type=submit].information-1.is-loading:active,
ins-button button[type=submit].information-1.is-loading:hover,
ins-button button[type=submit].pink.is-loading:active,
ins-button button[type=submit].pink.is-loading:hover {
  background-color: pink !important
}

ins-button button.information-2,
ins-button button.yellow,
ins-button button[type=button].information-2,
ins-button button[type=button].yellow,
ins-button button[type=reset].information-2,
ins-button button[type=reset].yellow,
ins-button button[type=submit].information-2,
ins-button button[type=submit].yellow {
  background-color: transparent;
  color: var(--ins-color-yellow)
}

ins-button button.information-2.solid,
ins-button button.yellow.solid,
ins-button button[type=button].information-2.solid,
ins-button button[type=button].yellow.solid,
ins-button button[type=reset].information-2.solid,
ins-button button[type=reset].yellow.solid,
ins-button button[type=submit].information-2.solid,
ins-button button[type=submit].yellow.solid {
  background-color: var(--ins-color-yellow);
  color: var(--ins-color-ink1)
}

ins-button button.information-2.solid:not([disabled]):hover,
ins-button button.yellow.solid:not([disabled]):hover,
ins-button button[type=button].information-2.solid:not([disabled]):hover,
ins-button button[type=button].yellow.solid:not([disabled]):hover,
ins-button button[type=reset].information-2.solid:not([disabled]):hover,
ins-button button[type=reset].yellow.solid:not([disabled]):hover,
ins-button button[type=submit].information-2.solid:not([disabled]):hover,
ins-button button[type=submit].yellow.solid:not([disabled]):hover {
  background: var(--ins-color-yellow2)
}

@media only screen and (max-width:425px) {

  ins-button button.information-2.solid:not([disabled]):hover,
  ins-button button.yellow.solid:not([disabled]):hover,
  ins-button button[type=button].information-2.solid:not([disabled]):hover,
  ins-button button[type=button].yellow.solid:not([disabled]):hover,
  ins-button button[type=reset].information-2.solid:not([disabled]):hover,
  ins-button button[type=reset].yellow.solid:not([disabled]):hover,
  ins-button button[type=submit].information-2.solid:not([disabled]):hover,
  ins-button button[type=submit].yellow.solid:not([disabled]):hover {
    background-color: #ff0
  }
}

ins-button button.information-2.outlined .ripple-wave,
ins-button button.information-2:not(.solid) .ripple-wave,
ins-button button.yellow.outlined .ripple-wave,
ins-button button.yellow:not(.solid) .ripple-wave,
ins-button button[type=button].information-2.outlined .ripple-wave,
ins-button button[type=button].information-2:not(.solid) .ripple-wave,
ins-button button[type=button].yellow.outlined .ripple-wave,
ins-button button[type=button].yellow:not(.solid) .ripple-wave,
ins-button button[type=reset].information-2.outlined .ripple-wave,
ins-button button[type=reset].information-2:not(.solid) .ripple-wave,
ins-button button[type=reset].yellow.outlined .ripple-wave,
ins-button button[type=reset].yellow:not(.solid) .ripple-wave,
ins-button button[type=submit].information-2.outlined .ripple-wave,
ins-button button[type=submit].information-2:not(.solid) .ripple-wave,
ins-button button[type=submit].yellow.outlined .ripple-wave,
ins-button button[type=submit].yellow:not(.solid) .ripple-wave {
  background-color: rgba(30, 134, 227, .25)
}

ins-button button.information-2.outlined,
ins-button button.yellow.outlined,
ins-button button[type=button].information-2.outlined,
ins-button button[type=button].yellow.outlined,
ins-button button[type=reset].information-2.outlined,
ins-button button[type=reset].yellow.outlined,
ins-button button[type=submit].information-2.outlined,
ins-button button[type=submit].yellow.outlined {
  border: 1px solid var(--ins-color-yellow);
  background-color: transparent
}

ins-button button.information-2.outlined.is-loading,
ins-button button.yellow.outlined.is-loading,
ins-button button[type=button].information-2.outlined.is-loading,
ins-button button[type=button].yellow.outlined.is-loading,
ins-button button[type=reset].information-2.outlined.is-loading,
ins-button button[type=reset].yellow.outlined.is-loading,
ins-button button[type=submit].information-2.outlined.is-loading,
ins-button button[type=submit].yellow.outlined.is-loading {
  background-color: var(--ins-color-yellow)
}

ins-button button.information-2:not([disabled]):active,
ins-button button.information-2:not([disabled]):hover,
ins-button button.yellow:not([disabled]):active,
ins-button button.yellow:not([disabled]):hover,
ins-button button[type=button].information-2:not([disabled]):active,
ins-button button[type=button].information-2:not([disabled]):hover,
ins-button button[type=button].yellow:not([disabled]):active,
ins-button button[type=button].yellow:not([disabled]):hover,
ins-button button[type=reset].information-2:not([disabled]):active,
ins-button button[type=reset].information-2:not([disabled]):hover,
ins-button button[type=reset].yellow:not([disabled]):active,
ins-button button[type=reset].yellow:not([disabled]):hover,
ins-button button[type=submit].information-2:not([disabled]):active,
ins-button button[type=submit].information-2:not([disabled]):hover,
ins-button button[type=submit].yellow:not([disabled]):active,
ins-button button[type=submit].yellow:not([disabled]):hover {
  background-color: var(--ins-color-yellow-10p)
}

@media only screen and (max-width:425px) {

  ins-button button.information-2:not([disabled]):active,
  ins-button button.information-2:not([disabled]):hover,
  ins-button button.yellow:not([disabled]):active,
  ins-button button.yellow:not([disabled]):hover,
  ins-button button[type=button].information-2:not([disabled]):active,
  ins-button button[type=button].information-2:not([disabled]):hover,
  ins-button button[type=button].yellow:not([disabled]):active,
  ins-button button[type=button].yellow:not([disabled]):hover,
  ins-button button[type=reset].information-2:not([disabled]):active,
  ins-button button[type=reset].information-2:not([disabled]):hover,
  ins-button button[type=reset].yellow:not([disabled]):active,
  ins-button button[type=reset].yellow:not([disabled]):hover,
  ins-button button[type=submit].information-2:not([disabled]):active,
  ins-button button[type=submit].information-2:not([disabled]):hover,
  ins-button button[type=submit].yellow:not([disabled]):active,
  ins-button button[type=submit].yellow:not([disabled]):hover {
    background: 0 0
  }
}

ins-button button.information-2.is-loading:active,
ins-button button.information-2.is-loading:hover,
ins-button button.yellow.is-loading:active,
ins-button button.yellow.is-loading:hover,
ins-button button[type=button].information-2.is-loading:active,
ins-button button[type=button].information-2.is-loading:hover,
ins-button button[type=button].yellow.is-loading:active,
ins-button button[type=button].yellow.is-loading:hover,
ins-button button[type=reset].information-2.is-loading:active,
ins-button button[type=reset].information-2.is-loading:hover,
ins-button button[type=reset].yellow.is-loading:active,
ins-button button[type=reset].yellow.is-loading:hover,
ins-button button[type=submit].information-2.is-loading:active,
ins-button button[type=submit].information-2.is-loading:hover,
ins-button button[type=submit].yellow.is-loading:active,
ins-button button[type=submit].yellow.is-loading:hover {
  background-color: #ff0 !important
}

ins-button button.turquoise,
ins-button button[type=button].turquoise,
ins-button button[type=reset].turquoise,
ins-button button[type=submit].turquoise {
  background-color: transparent;
  color: var(--ins-color-turquoise)
}

ins-button button.turquoise.solid,
ins-button button[type=button].turquoise.solid,
ins-button button[type=reset].turquoise.solid,
ins-button button[type=submit].turquoise.solid {
  background-color: var(--ins-color-turquoise);
  color: var(--ins-color-ink1)
}

ins-button button.turquoise.solid:not([disabled]):hover,
ins-button button[type=button].turquoise.solid:not([disabled]):hover,
ins-button button[type=reset].turquoise.solid:not([disabled]):hover,
ins-button button[type=submit].turquoise.solid:not([disabled]):hover {
  background: var(--ins-color-turquoise2)
}

@media only screen and (max-width:425px) {

  ins-button button.turquoise.solid:not([disabled]):hover,
  ins-button button[type=button].turquoise.solid:not([disabled]):hover,
  ins-button button[type=reset].turquoise.solid:not([disabled]):hover,
  ins-button button[type=submit].turquoise.solid:not([disabled]):hover {
    background-color: #40e0d0
  }
}

ins-button button.turquoise.outlined .ripple-wave,
ins-button button.turquoise:not(.solid) .ripple-wave,
ins-button button[type=button].turquoise.outlined .ripple-wave,
ins-button button[type=button].turquoise:not(.solid) .ripple-wave,
ins-button button[type=reset].turquoise.outlined .ripple-wave,
ins-button button[type=reset].turquoise:not(.solid) .ripple-wave,
ins-button button[type=submit].turquoise.outlined .ripple-wave,
ins-button button[type=submit].turquoise:not(.solid) .ripple-wave {
  background-color: rgba(30, 134, 227, .25)
}

ins-button button.turquoise.outlined,
ins-button button[type=button].turquoise.outlined,
ins-button button[type=reset].turquoise.outlined,
ins-button button[type=submit].turquoise.outlined {
  border: 1px solid var(--ins-color-turquoise);
  background-color: transparent
}

ins-button button.turquoise.outlined.is-loading,
ins-button button[type=button].turquoise.outlined.is-loading,
ins-button button[type=reset].turquoise.outlined.is-loading,
ins-button button[type=submit].turquoise.outlined.is-loading {
  background-color: var(--ins-color-turquoise)
}

ins-button button.turquoise:not([disabled]):active,
ins-button button.turquoise:not([disabled]):hover,
ins-button button[type=button].turquoise:not([disabled]):active,
ins-button button[type=button].turquoise:not([disabled]):hover,
ins-button button[type=reset].turquoise:not([disabled]):active,
ins-button button[type=reset].turquoise:not([disabled]):hover,
ins-button button[type=submit].turquoise:not([disabled]):active,
ins-button button[type=submit].turquoise:not([disabled]):hover {
  background-color: var(--ins-color-turquoise-10p)
}

@media only screen and (max-width:425px) {

  ins-button button.turquoise:not([disabled]):active,
  ins-button button.turquoise:not([disabled]):hover,
  ins-button button[type=button].turquoise:not([disabled]):active,
  ins-button button[type=button].turquoise:not([disabled]):hover,
  ins-button button[type=reset].turquoise:not([disabled]):active,
  ins-button button[type=reset].turquoise:not([disabled]):hover,
  ins-button button[type=submit].turquoise:not([disabled]):active,
  ins-button button[type=submit].turquoise:not([disabled]):hover {
    background: 0 0
  }
}

ins-button button.turquoise.is-loading:active,
ins-button button.turquoise.is-loading:hover,
ins-button button[type=button].turquoise.is-loading:active,
ins-button button[type=button].turquoise.is-loading:hover,
ins-button button[type=reset].turquoise.is-loading:active,
ins-button button[type=reset].turquoise.is-loading:hover,
ins-button button[type=submit].turquoise.is-loading:active,
ins-button button[type=submit].turquoise.is-loading:hover {
  background-color: #40e0d0 !important
}

ins-button button.grey,
ins-button button.secondary,
ins-button button[type=button].grey,
ins-button button[type=button].secondary,
ins-button button[type=reset].grey,
ins-button button[type=reset].secondary,
ins-button button[type=submit].grey,
ins-button button[type=submit].secondary {
  background-color: transparent;
  color: var(--ins-color-grey)
}

ins-button button.grey.solid,
ins-button button.secondary.solid,
ins-button button[type=button].grey.solid,
ins-button button[type=button].secondary.solid,
ins-button button[type=reset].grey.solid,
ins-button button[type=reset].secondary.solid,
ins-button button[type=submit].grey.solid,
ins-button button[type=submit].secondary.solid {
  background-color: var(--ins-color-grey);
  color: var(--ins-color-ink1)
}

ins-button button.grey.solid:not([disabled]):hover,
ins-button button.secondary.solid:not([disabled]):hover,
ins-button button[type=button].grey.solid:not([disabled]):hover,
ins-button button[type=button].secondary.solid:not([disabled]):hover,
ins-button button[type=reset].grey.solid:not([disabled]):hover,
ins-button button[type=reset].secondary.solid:not([disabled]):hover,
ins-button button[type=submit].grey.solid:not([disabled]):hover,
ins-button button[type=submit].secondary.solid:not([disabled]):hover {
  background: var(--ins-color-grey2)
}

@media only screen and (max-width:425px) {

  ins-button button.grey.solid:not([disabled]):hover,
  ins-button button.secondary.solid:not([disabled]):hover,
  ins-button button[type=button].grey.solid:not([disabled]):hover,
  ins-button button[type=button].secondary.solid:not([disabled]):hover,
  ins-button button[type=reset].grey.solid:not([disabled]):hover,
  ins-button button[type=reset].secondary.solid:not([disabled]):hover,
  ins-button button[type=submit].grey.solid:not([disabled]):hover,
  ins-button button[type=submit].secondary.solid:not([disabled]):hover {
    background-color: grey
  }
}

ins-button button.grey.outlined .ripple-wave,
ins-button button.grey:not(.solid) .ripple-wave,
ins-button button.secondary.outlined .ripple-wave,
ins-button button.secondary:not(.solid) .ripple-wave,
ins-button button[type=button].grey.outlined .ripple-wave,
ins-button button[type=button].grey:not(.solid) .ripple-wave,
ins-button button[type=button].secondary.outlined .ripple-wave,
ins-button button[type=button].secondary:not(.solid) .ripple-wave,
ins-button button[type=reset].grey.outlined .ripple-wave,
ins-button button[type=reset].grey:not(.solid) .ripple-wave,
ins-button button[type=reset].secondary.outlined .ripple-wave,
ins-button button[type=reset].secondary:not(.solid) .ripple-wave,
ins-button button[type=submit].grey.outlined .ripple-wave,
ins-button button[type=submit].grey:not(.solid) .ripple-wave,
ins-button button[type=submit].secondary.outlined .ripple-wave,
ins-button button[type=submit].secondary:not(.solid) .ripple-wave {
  background-color: rgba(30, 134, 227, .25)
}

ins-button button.grey.outlined,
ins-button button.secondary.outlined,
ins-button button[type=button].grey.outlined,
ins-button button[type=button].secondary.outlined,
ins-button button[type=reset].grey.outlined,
ins-button button[type=reset].secondary.outlined,
ins-button button[type=submit].grey.outlined,
ins-button button[type=submit].secondary.outlined {
  border: 1px solid var(--ins-color-grey);
  background-color: transparent
}

ins-button button.grey.outlined.is-loading,
ins-button button.secondary.outlined.is-loading,
ins-button button[type=button].grey.outlined.is-loading,
ins-button button[type=button].secondary.outlined.is-loading,
ins-button button[type=reset].grey.outlined.is-loading,
ins-button button[type=reset].secondary.outlined.is-loading,
ins-button button[type=submit].grey.outlined.is-loading,
ins-button button[type=submit].secondary.outlined.is-loading {
  background-color: var(--ins-color-grey)
}

ins-button button.grey:not([disabled]):active,
ins-button button.grey:not([disabled]):hover,
ins-button button.secondary:not([disabled]):active,
ins-button button.secondary:not([disabled]):hover,
ins-button button[type=button].grey:not([disabled]):active,
ins-button button[type=button].grey:not([disabled]):hover,
ins-button button[type=button].secondary:not([disabled]):active,
ins-button button[type=button].secondary:not([disabled]):hover,
ins-button button[type=reset].grey:not([disabled]):active,
ins-button button[type=reset].grey:not([disabled]):hover,
ins-button button[type=reset].secondary:not([disabled]):active,
ins-button button[type=reset].secondary:not([disabled]):hover,
ins-button button[type=submit].grey:not([disabled]):active,
ins-button button[type=submit].grey:not([disabled]):hover,
ins-button button[type=submit].secondary:not([disabled]):active,
ins-button button[type=submit].secondary:not([disabled]):hover {
  background-color: var(--ins-color-grey-10p)
}

@media only screen and (max-width:425px) {

  ins-button button.grey:not([disabled]):active,
  ins-button button.grey:not([disabled]):hover,
  ins-button button.secondary:not([disabled]):active,
  ins-button button.secondary:not([disabled]):hover,
  ins-button button[type=button].grey:not([disabled]):active,
  ins-button button[type=button].grey:not([disabled]):hover,
  ins-button button[type=button].secondary:not([disabled]):active,
  ins-button button[type=button].secondary:not([disabled]):hover,
  ins-button button[type=reset].grey:not([disabled]):active,
  ins-button button[type=reset].grey:not([disabled]):hover,
  ins-button button[type=reset].secondary:not([disabled]):active,
  ins-button button[type=reset].secondary:not([disabled]):hover,
  ins-button button[type=submit].grey:not([disabled]):active,
  ins-button button[type=submit].grey:not([disabled]):hover,
  ins-button button[type=submit].secondary:not([disabled]):active,
  ins-button button[type=submit].secondary:not([disabled]):hover {
    background: 0 0
  }
}

ins-button button.grey.is-loading:active,
ins-button button.grey.is-loading:hover,
ins-button button.secondary.is-loading:active,
ins-button button.secondary.is-loading:hover,
ins-button button[type=button].grey.is-loading:active,
ins-button button[type=button].grey.is-loading:hover,
ins-button button[type=button].secondary.is-loading:active,
ins-button button[type=button].secondary.is-loading:hover,
ins-button button[type=reset].grey.is-loading:active,
ins-button button[type=reset].grey.is-loading:hover,
ins-button button[type=reset].secondary.is-loading:active,
ins-button button[type=reset].secondary.is-loading:hover,
ins-button button[type=submit].grey.is-loading:active,
ins-button button[type=submit].grey.is-loading:hover,
ins-button button[type=submit].secondary.is-loading:active,
ins-button button[type=submit].secondary.is-loading:hover {
  background-color: grey !important
}

ins-button button:focus,
ins-button button[type=button]:focus,
ins-button button[type=reset]:focus,
ins-button button[type=submit]:focus {
  outline: 0
}

ins-button button:disabled,
ins-button button[type=button]:disabled,
ins-button button[type=reset]:disabled,
ins-button button[type=submit]:disabled {
  opacity: .5;
  cursor: default
}

ins-button button.round,
ins-button button[type=button].round,
ins-button button[type=reset].round,
ins-button button[type=submit].round {
  border-radius: 50% !important;
  padding: 0;
  height: 38px;
  width: 38px;
  min-width: 38px
}

ins-button button.round.is-loading,
ins-button button[type=button].round.is-loading,
ins-button button[type=reset].round.is-loading,
ins-button button[type=submit].round.is-loading {
  padding: 0 9px;
  width: 38px
}

ins-button button.size--small,
ins-button button[type=button].size--small,
ins-button button[type=reset].size--small,
ins-button button[type=submit].size--small {
  height: 24px;
  font-size: 10px;
  border-radius: 2px !important;
  letter-spacing: .5px !important
}

ins-button button.size--small.is-loading .spinner,
ins-button button[type=button].size--small.is-loading .spinner,
ins-button button[type=reset].size--small.is-loading .spinner,
ins-button button[type=submit].size--small.is-loading .spinner {
  border-width: 2px
}

ins-button button.size--small.is-loading .spinner,
ins-button button.size--small.is-loading .spinner:after,
ins-button button[type=button].size--small.is-loading .spinner,
ins-button button[type=button].size--small.is-loading .spinner:after,
ins-button button[type=reset].size--small.is-loading .spinner,
ins-button button[type=reset].size--small.is-loading .spinner:after,
ins-button button[type=submit].size--small.is-loading .spinner,
ins-button button[type=submit].size--small.is-loading .spinner:after {
  width: 16px;
  height: 16px
}

ins-button button.size--small .btn__icon,
ins-button button[type=button].size--small .btn__icon,
ins-button button[type=reset].size--small .btn__icon,
ins-button button[type=submit].size--small .btn__icon {
  font-size: 10px;
  width: initial;
  height: initial
}

ins-button button.size--large,
ins-button button[type=button].size--large,
ins-button button[type=reset].size--large,
ins-button button[type=submit].size--large {
  height: 48px;
  padding: 10px 24px;
  font-size: 14px
}

ins-button button.cursor--text,
ins-button button[type=button].cursor--text,
ins-button button[type=reset].cursor--text,
ins-button button[type=submit].cursor--text {
  cursor: text !important
}

ins-button button.cursor--default,
ins-button button[type=button].cursor--default,
ins-button button[type=reset].cursor--default,
ins-button button[type=submit].cursor--default {
  cursor: default !important
}

ins-button button.text-transform--uppercase,
ins-button button[type=button].text-transform--uppercase,
ins-button button[type=reset].text-transform--uppercase,
ins-button button[type=submit].text-transform--uppercase {
  text-transform: uppercase !important
}

ins-button button.text-transform--lowercase,
ins-button button[type=button].text-transform--lowercase,
ins-button button[type=reset].text-transform--lowercase,
ins-button button[type=submit].text-transform--lowercase {
  text-transform: lowercase !important
}

ins-button button.text-transform--none,
ins-button button[type=button].text-transform--none,
ins-button button[type=reset].text-transform--none,
ins-button button[type=submit].text-transform--none {
  text-transform: none !important
}

ins-button button.is-loading,
ins-button button[type=button].is-loading,
ins-button button[type=reset].is-loading,
ins-button button[type=submit].is-loading {
  cursor: wait;
  opacity: 1;
  width: 52px;
  padding-left: 16px;
  padding-right: 16px
}

ins-button button.is-loading .spinner,
ins-button button[type=button].is-loading .spinner,
ins-button button[type=reset].is-loading .spinner,
ins-button button[type=submit].is-loading .spinner {
  position: relative;
  border: 3px solid rgba(255, 255, 255, .2);
  border-left-color: #fff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear
}

ins-button button.is-loading .spinner,
ins-button button.is-loading .spinner:after,
ins-button button[type=button].is-loading .spinner,
ins-button button[type=button].is-loading .spinner:after,
ins-button button[type=reset].is-loading .spinner,
ins-button button[type=reset].is-loading .spinner:after,
ins-button button[type=submit].is-loading .spinner,
ins-button button[type=submit].is-loading .spinner:after {
  border-radius: 50%;
  width: 20px;
  height: 20px
}

ins-button button.is-loading .btn__label,
ins-button button[type=button].is-loading .btn__label,
ins-button button[type=reset].is-loading .btn__label,
ins-button button[type=submit].is-loading .btn__label {
  opacity: 0;
  transition: none;
  display: block;
  height: 0
}

ins-button button .btn__icon,
ins-button button[type=button] .btn__icon,
ins-button button[type=reset] .btn__icon,
ins-button button[type=submit] .btn__icon {
  margin-right: 8px;
  display: inline-block;
  width: 18px;
  height: 18px;
  font-size: 17px;
  vertical-align: middle
}

ins-button button .btn__icon.action,
ins-button button[type=button] .btn__icon.action,
ins-button button[type=reset] .btn__icon.action,
ins-button button[type=submit] .btn__icon.action {
  margin-right: 0;
  margin-left: 0
}

ins-button button .btn__icon.right,
ins-button button[type=button] .btn__icon.right,
ins-button button[type=reset] .btn__icon.right,
ins-button button[type=submit] .btn__icon.right {
  margin-right: 0;
  margin-left: 8px
}

ins-button button .btn__label,
ins-button button[type=button] .btn__label,
ins-button button[type=reset] .btn__label,
ins-button button[type=submit] .btn__label {
  display: inline-block;
  word-break: initial;
  opacity: 1;
  transition: opacity .35s;
  transition-delay: .1s
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

ins-button .ripple-wave {
  position: absolute;
  background: rgba(255, 255, 255, .25);
  border-radius: 100%;
  transform: scale(0);
  pointer-events: none
}

ins-button .ripple-wave.show {
  animation: ripple .75s ease-out
}
ins-button .ins-button-options-wrap.options-only .btn__label.v-align {
  display: none;
}

ins-button .ins-button-options-wrap.options-only .carets {
  width: 38px;
  right: auto;
  left: 0;
  border-left: none
}

ins-button .ins-button-options-wrap.options-only button.size--small+.carets {
  width: 24px
}

ins-button .ins-button-options-wrap.options-only button.size--large+.carets {
  width: 48px
}

ins-button .ins-button-options-wrap.options-only .carets::before {
  display: none
}

ins-button .ins-button-options-wrap.options-only button .btn__icon {
  margin-right: 0
}

ins-button .ins-button-options-wrap.options-only button.has-options {
  padding: 0;
  min-width: 38px
}

ins-button .ins-button-options-wrap.options-only button.size--small {
  min-width: 24px
}
ins-button .ins-button-options-wrap.options-only button.size--large {
  min-width: 48px
}

ins-button .ins-button-options-wrap.options-only button .btn__icon,
ins-button .ins-button-options-wrap.options-only button[type=button] .btn__icon,
ins-button .ins-button-options-wrap.options-only button[type=reset] .btn__icon,
ins-button .ins-button-options-wrap.options-only button[type=submit] .btn__icon {
  margin-right: 0;
  letter-spacing: normal;
  width: auto;
  height: auto
}

ins-button .ins-button-options-wrap.options-only .options-wrap {
  width: auto;
  right: 0
}

@-webkit-keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0
  }
}

@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0
  }
}

html [type=button] {
  -webkit-appearance: none !important
}

.ins-button-options-wrap {
  display: inline-block;
  position: relative
}

.ins-button-options-wrap button.has-options {
  padding-right: 46px;
  margin-bottom: 0
}

.ins-button-options-wrap button.has-options.is-loading {
  padding-right: 16px
}

.ins-button-options-wrap .carets {
  position: absolute;
  right: 0;
  width: 30px;
  height: 100%;
  top: 0;
  cursor: pointer
}

.ins-button-options-wrap .carets.blue,
.ins-button-options-wrap .carets.primary {
  color: var(--ins-color-blue);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-blue)
}

.ins-button-options-wrap .carets.green,
.ins-button-options-wrap .carets.positive {
  color: var(--ins-color-green);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-green)
}

.ins-button-options-wrap .carets.orange,
.ins-button-options-wrap .carets.warning {
  color: var(--ins-color-orange);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-orange)
}

.ins-button-options-wrap .carets.negative,
.ins-button-options-wrap .carets.red {
  color: var(--ins-color-red);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-red)
}

.ins-button-options-wrap .carets.information-1,
.ins-button-options-wrap .carets.pink {
  color: var(--ins-color-pink);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-pink)
}

.ins-button-options-wrap .carets.information-2,
.ins-button-options-wrap .carets.yellow {
  color: var(--ins-color-yellow);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-yellow)
}

.ins-button-options-wrap .carets.grey,
.ins-button-options-wrap .carets.secondary {
  color: var(--ins-color-grey);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-grey)
}

.ins-button-options-wrap .carets.turquoise {
  color: var(--ins-color-turquoise);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-turquoise)
}

.ins-button-options-wrap .carets.solid {
  color: var(--ins-color-white);
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-white)
}

.ins-button-options-wrap .carets.loading {
  display: none
}

.ins-button-options-wrap .icon-caret-down:before,
.ins-button-options-wrap .icon-caret-up:before {
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 5px)
}

.ins-button-options-wrap .icon-caret-up:before {
  top: calc(50% - 10px)
}

.ins-button-options-wrap .options-wrap {
  position: absolute;
  text-align: left;
  top: calc(100% + 8px);
  z-index: 9999;
  width: 100%;
  display: none
}

.ins-button-options-wrap .options-wrap.drop-up {
  top: auto;
  bottom: calc(100% + 8px)
}

.ins-button-options-wrap .options-wrap ul.option-wrap {
  font-family: var(--ins-font-family);
  background: var(--ins-bg-color);
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e4e6ec;
  border-radius: var(--ins-border-radius);
  box-shadow: 0 2px 4px 0 rgba(15, 21, 38, .14), 1px 1px 3px 0 rgba(140, 148, 164, .2)
}

.ins-button-options-wrap .options-wrap .option {
  padding: 8px 15px;
  font-size: 12px;
  color: #8c94a4;
  cursor: pointer;
  line-height: 1.6
}

.ins-button-options-wrap .options-wrap .option:hover {
  color: #2c3148;
  background-color: var(--ins-bg-color2)
}

.ins-button-options-wrap .options-wrap.show {
  display: block
}

.ins-button-group[disabled] {
  pointer-events: none
}

.ins-button-group button {
  background: var(--ins-bg-color);
  font-size: 12px;
  line-height: 34px;
  padding: 0 16px;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-blue);
  outline: 0;
  border-right: none;
  color: var(--ins-color-blue);
  font-weight: 400;
  transition: background-color .3s;
  -webkit-transition: background-color .3s
}

.ins-button-group button[disabled] {
  pointer-events: none
}

.ins-button-group button:hover {
  cursor: pointer;
  background: #e6f1fc
}

.ins-button-group button:first-child {
  border-top-left-radius: var(--ins-border-radius);
  border-bottom-left-radius: var(--ins-border-radius)
}

.ins-button-group button:last-child {
  border-top-right-radius: var(--ins-border-radius);
  border-bottom-right-radius: var(--ins-border-radius);
  border-right: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-blue)
}

.ins-button-group button.active {
  background: var(--ins-color-blue);
  color: var(--ins-bg-color)
}

.ins-button-group button.grey {
  border-color: var(--ins-color-ink40);
  color: var(--ins-color-ink40)
}

.ins-button-group button.grey:last-child {
  border-color: var(--ins-color-ink40)
}

.ins-button-group button.grey:hover {
  cursor: pointer;
  background: var(--ins-bg-color4)
}

.ins-button-group button.grey.active {
  background: var(--ins-color-ink40);
  color: var(--ins-bg-color)
}

.ins-button-group.small button {
  font-size: 10px;
  line-height: 22px
}

.ins-button-group.large button {
  font-size: 12px;
  line-height: 48px
}

.ins-checkbox-card-wrap {
  position: relative;
  background: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  box-sizing: border-box;
  margin-top: 0;
  padding: 15px;
  box-shadow: none;
  cursor: pointer
}

.ins-checkbox-card-wrap:hover {
  box-shadow: 0 4px 13px var(--ins-shadow-color)
}

.ins-checkbox-card-wrap:focus {
  box-shadow: 0 4px 13px var(--ins-shadow-color);
  outline: 0
}

.ins-checkbox-card-wrap.outlined {
  border-style: dashed;
  box-shadow: none
}

.ins-checkbox-card-wrap .ins-checkbox-card-input {
  display: none
}

.ins-checkbox-card-wrap.no-padding {
  padding: 0
}

.ins-checkbox-card-wrap.disabled {
  opacity: .5;
  pointer-events: none
}

.ins-checkbox-card-wrap.selected {
  margin-top: -3px;
  box-shadow: 0 4px 13px var(--ins-shadow-color)
}

.ins-checkbox-card-wrap.selected .selected-wrap {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 28px;
  height: 28px;
  background-color: var(--ins-bg-color2);
  color: var(--ins-color-white);
  border-radius: 50%;
  font-size: 16px;
  padding-top: 6px;
  text-align: center;
  box-sizing: border-box;
  transition: all .15s
}

.ins-checkbox-card-wrap.selected.ink {
  border-color: var(--ins-color-ink)
}

.ins-checkbox-card-wrap.selected.ink .selected-wrap {
  background-color: var(--ins-color-ink)
}

.ins-checkbox-card-wrap.selected.blue {
  border-color: var(--ins-color-blue)
}

.ins-checkbox-card-wrap.selected.blue .selected-wrap {
  background-color: var(--ins-color-blue)
}

.ins-checkbox-card-wrap.selected.ink5 {
  border-color: var(--ins-color-ink5)
}

.ins-checkbox-card-wrap.selected.ink5 .selected-wrap {
  background-color: var(--ins-color-ink5)
}

.ins-checkbox-card-wrap.selected.ink1 {
  border-color: var(--ins-color-ink1)
}

.ins-checkbox-card-wrap.selected.ink1 .selected-wrap {
  background-color: var(--ins-color-ink1)
}

.ins-checkbox-card-wrap.selected.ink10 {
  border-color: var(--ins-color-ink10)
}

.ins-checkbox-card-wrap.selected.ink10 .selected-wrap {
  background-color: var(--ins-color-ink10)
}

.ins-checkbox-card-wrap.selected.ink40 {
  border-color: var(--ins-color-ink40)
}

.ins-checkbox-card-wrap.selected.ink40 .selected-wrap {
  background-color: var(--ins-color-ink40)
}

.ins-checkbox-card-wrap.selected.warning {
  border-color: var(--ins-color-warning)
}

.ins-checkbox-card-wrap.selected.warning .selected-wrap {
  background-color: var(--ins-color-warning)
}

.ins-checkbox-card-wrap.selected.negative {
  border-color: var(--ins-color-negative)
}

.ins-checkbox-card-wrap.selected.negative .selected-wrap {
  background-color: var(--ins-color-negative)
}

.ins-checkbox-card-wrap.selected.turquoise {
  border-color: var(--ins-color-turquoise)
}

.ins-checkbox-card-wrap.selected.turquoise .selected-wrap {
  background-color: var(--ins-color-turquoise)
}

.ins-checkbox-card-wrap.selected.information1 {
  border-color: var(--ins-color-information1)
}

.ins-checkbox-card-wrap.selected.information1 .selected-wrap {
  background-color: var(--ins-color-information1)
}

.ins-checkbox-card-wrap.selected.information2 {
  border-color: var(--ins-color-information2)
}

.ins-checkbox-card-wrap.selected.information2 .selected-wrap {
  background-color: var(--ins-color-information2)
}

.ins-checkbox-card-wrap.selected.green,
.ins-checkbox-card-wrap.selected.positive {
  border-color: var(--ins-color-green)
}

.ins-checkbox-card-wrap.selected.green .selected-wrap,
.ins-checkbox-card-wrap.selected.positive .selected-wrap {
  background-color: var(--ins-color-green)
}

.ins-credit-card-wrap {
  border-radius: 10px;
  background: #fff;
  box-shadow: 1px 1px 3px #e4e6ed;
  transition: all .15s;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  color: var(--ins-color-ink);
  padding: 6% 5%;
  margin-bottom: 16px;
  min-height: 142px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}

.ins-credit-card-wrap .insites-user-card-details {
  position: absolute;
  bottom: 9%
}

.ins-credit-card-wrap:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .15);
  transition: box-shadow .6s ease
}

.ins-credit-card-wrap_brand {
  min-height: 20%
}

.ins-credit-card-wrap_brand svg {
  width: 24%
}

.ins-credit-card-wrap_expired {
  position: absolute;
  bottom: 9%;
  right: 6%;
  color: #f27474
}

.ins-credit-card-main-wrap {
  position: relative;
  padding-bottom: 56.66%
}

.ins-credit-card-main-wrap .close-btn {
  font-size: 18px;
  line-height: 10px;
  position: absolute;
  right: 6%;
  top: 9%;
  color: var(--ins-color-ink40);
  cursor: pointer
}

.ins-credit-card-main-wrap .close-btn:hover {
  color: var(--ins-color-ink)
}

.ins-credit-card-main-wrap.active .ins-credit-card-wrap {
  background: linear-gradient(292.96deg, #2d9cdb 6.72%, #56ccf2 91.78%);
  color: #fff
}

.ins-credit-card-main-wrap.active .ins-credit-card-wrap_expired {
  color: #fff
}

.ins-credit-card-main-wrap.active .close-btn {
  color: #e4e6ec
}

.ins-credit-card-main-wrap.active .close-btn:hover {
  color: #fff
}

.ins-credit-card-max-size {
  max-width: 432px
}

.ins-credit-card-compact-size {
  max-width: none;
  max-height: 98px;
  position: relative;
  margin-bottom: 16px
}

.ins-credit-card-compact-size.has-tag {
  max-height: 110px;
}

.ins-credit-card-compact-size.has-label {
  max-height: 108px;
}

.ins-credit-card-compact-size.has-tag.has-label {
  max-height: 132px;
}

.ins-credit-card-main-wrap.compact {
  padding-bottom: 0
}

.ins-credit-card-main-wrap.compact .ins-credit-card-wrap {
  position: relative;
  padding: 24px;
  border-radius: 4px;
  box-shadow: none;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  -webkit-transition: border-color .25s ease-in-out;
  transition: border-color .25s ease-in-out;
  min-height: 90px;
  margin-bottom: 0
}

.ins-credit-card-compact-size:hover .ins-credit-card-main-wrap.compact .ins-credit-card-wrap {
  border-color: var(--ins-color-ink40);
  cursor: pointer
}

.ins-credit-card-compact-size .ins-credit-card-main-wrap.compact.active .ins-credit-card-wrap {
  background: #fff;
  border-color: var(--ins-color-blue)
}

.ins-credit-card-main-wrap.compact.active .insites-user-card-details {
  color: var(--ins-color-ink)
}

.ins-credit-card-main-wrap.active.compact .close-btn,
.ins-credit-card-main-wrap.compact .close-btn {
  position: absolute;
  right: 40px;
  top: 40px;
  color: var(--ins-color-ink40)
}

.ins-credit-card-main-wrap.active.compact .close-btn:hover,
.ins-credit-card-main-wrap.compact .close-btn:hover {
  color: var(--ins-color-negative)
}

.ins-credit-card-main-wrap.compact ins-radio {
  position: absolute;
  top: 30px;
  left: 24px
}

.ins-credit-card-main-wrap.compact .insites-user-card-details-expiry {
  color: var(--ins-color-ink40);
  font-size: 12px;
  font-weight: 400
}

.ins-credit-card-main-wrap.compact .insites-user-card-details-expiry.expired {
  font-weight: 600;
  color: var(--ins-color-negative)
}

.ins-credit-card-main-wrap:not(.compact) .insites-user-card-details {
  width: 100%;
}

.ins-credit-card-main-wrap.compact .insites-user-card-details {
  position: static;
  padding-left: 114px;
  top: 28px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  margin-left: 40px;
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family);
  margin-left: 0
}

.ins-credit-card-main-wrap.compact ins-radio .ins-radio.ins-radio-checkbox {
  padding: 0
}

.ins-credit-card-main-wrap.compact .ins-credit-card-wrap_brand {
  position: absolute;
  top: 24px;
  left: 56px;
  height: 40px;
  min-height: 0
}

.ins-credit-card-main-wrap.compact .ins-credit-card-wrap_brand svg {
  height: 40px;
  width: auto
}

ins-credit-card .has-tag .ins-credit-card-main-wrap:not(.compact) .insites-user-card-tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 48px;
  width: 100%
}

ins-credit-card .has-tag .ins-credit-card-main-wrap.compact .insites-user-card-tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 48px
}

ins-credit-card .has-tag .ins-credit-card-main-wrap .insites-user-card-tag ins-tag span.ins-tag,
ins-credit-card .has-tag .ins-credit-card-main-wrap .insites-user-card-tag ins-tag span.tagged {
  font-weight: 600;
  font-size: 10px;
  line-height: 18px;
  padding: 0 8px;
  min-width: 0;
  display: inline-block;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

ins-credit-card .has-tag .ins-credit-card-main-wrap.compact .insites-user-card-tag ins-tag span.ins-tag > span,
ins-credit-card .has-tag .ins-credit-card-main-wrap.compact .insites-user-card-tag ins-tag span.tagged > span {
  font-size: 8px
}

ins-credit-card .has-label .ins-credit-card-main-wrap.compact .insites-user-card-label {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 4px;
  padding-right: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

ins-credit-card .has-label .ins-credit-card-main-wrap:not(.compact) .insites-user-card-label {
  padding-right: 48px;
  line-height: 18px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

ins-credit-card .ins-credit-card-main-wrap.compact .options-btn {
  position: absolute;
  top: 23px;
  right: 29px;
}

ins-credit-card .ins-credit-card-main-wrap:not(.compact) .options-btn {
  position: absolute;
  right: 3%;
  top: 5%;
}

ins-credit-card .ins-credit-card-main-wrap .options-btn ins-button button.grey {
  color: var(--ins-color-ink40)
}

ins-code-editor .ins-code-editor {
  margin-bottom: 20px
}

ins-code-editor textarea.codemirror {
  display: none
}

ins-code-editor .ins-form-error {
  display: none;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: #f27474;
  margin-top: 4px
}

ins-code-editor label {
  font-size: 12px;
  font-weight: 600;
  color: #2c3148;
  font-family: var(--ins-font-family);
  margin-bottom: 2px;
  min-height: 20px;
  display: block
}

ins-code-editor label.disabled {
  color: #8c94a4
}

ins-code-editor .active label {
  color: #1e86e3
}

ins-code-editor .active .CodeMirror-wrap {
  border: 1px solid #1e86e3
}

ins-code-editor .CodeMirror-wrap {
  padding: 0
}

ins-code-editor .CodeMirror-wrap::before {
  position: absolute;
  right: 2px;
  top: 2px;
  opacity: 0;
  content: "F10 to toggle fullscreen view";
  -webkit-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  transition: all .5s ease-in;
  color: #bbb;
  font-size: 12px;
  padding: 0 .5em;
  background: #f5f2f0;
  background: rgba(224, 224, 224, .3);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, .2);
  border-radius: .5em
}

ins-code-editor .CodeMirror-wrap.fullscreen-help::before {
  opacity: 1
}

ins-code-editor .has-error label {
  color: #f27474
}

ins-code-editor .has-error .CodeMirror-wrap {
  border: 1px solid #f27474
}

ins-code-editor .has-error .ins-form-error {
  display: block
}

ins-code-editor .CodeMirror {
  margin-bottom: 8px;
  border: 1px solid #e4e6ec;
  border-radius: .3em
}

ins-code-editor .cm-s-default.CodeMirror {
  background: #1a1d2c;
  color: #f8f8f2
}

ins-code-editor .cm-s-default div.CodeMirror-selected {
  background: #49483e
}

ins-code-editor .cm-s-default .CodeMirror-line::selection,
ins-code-editor .cm-s-default .CodeMirror-line>span::selection,
ins-code-editor .cm-s-default .CodeMirror-line>span>span::selection {
  background: rgba(73, 72, 62, .99)
}

ins-code-editor .cm-s-default .CodeMirror-line::-moz-selection,
ins-code-editor .cm-s-default .CodeMirror-line>span::-moz-selection,
ins-code-editor .cm-s-default .CodeMirror-line>span>span::-moz-selection {
  background: rgba(73, 72, 62, .99)
}

ins-code-editor .cm-s-default .CodeMirror-gutters {
  background: #282b3c;
  border-right: 0
}

ins-code-editor .cm-s-default .CodeMirror-guttermarker {
  color: #fff
}

ins-code-editor .cm-s-default .CodeMirror-guttermarker-subtle {
  color: #d0d0d0
}

ins-code-editor .cm-s-default .CodeMirror-linenumber {
  color: #d0d0d0
}

ins-code-editor .cm-s-default .CodeMirror-cursor {
  border-left: 1px solid #f8f8f0
}

ins-code-editor .cm-s-default span.cm-comment {
  color: #75715e
}

ins-code-editor .cm-s-default span.cm-atom {
  color: #ae81ff
}

ins-code-editor .cm-s-default span.cm-number {
  color: #ae81ff
}

ins-code-editor .cm-s-default span.cm-comment.cm-attribute {
  color: #97b757
}

ins-code-editor .cm-s-default span.cm-comment.cm-def {
  color: #bc9262
}

ins-code-editor .cm-s-default span.cm-comment.cm-tag {
  color: #bc6283
}

ins-code-editor .cm-s-default span.cm-comment.cm-type {
  color: #5998a6
}

ins-code-editor .cm-s-default span.cm-attribute,
ins-code-editor .cm-s-default span.cm-property {
  color: #a6e22e
}

ins-code-editor .cm-s-default span.cm-keyword {
  color: #f92672
}

ins-code-editor .cm-s-default span.cm-builtin {
  color: #66d9ef
}

ins-code-editor .cm-s-default span.cm-string {
  color: #e6db74
}

ins-code-editor .cm-s-default span.cm-variable {
  color: #f8f8f2
}

ins-code-editor .cm-s-default span.cm-variable-2 {
  color: #9effff
}

ins-code-editor .cm-s-default span.cm-type,
ins-code-editor .cm-s-default span.cm-variable-3 {
  color: #66d9ef
}

ins-code-editor .cm-s-default span.cm-def {
  color: #fd971f
}

ins-code-editor .cm-s-default span.cm-bracket {
  color: #f8f8f2
}

ins-code-editor .cm-s-default span.cm-tag {
  color: #f92672
}

ins-code-editor .cm-s-default span.cm-header {
  color: #ae81ff
}

ins-code-editor .cm-s-default span.cm-link {
  color: #ae81ff
}

ins-code-editor .cm-s-default span.cm-error {
  background: #f92672;
  color: #f8f8f0
}

ins-code-editor .cm-s-default .CodeMirror-activeline-background {
  background: #373831
}

ins-code-editor .cm-s-default .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #fff !important
}

ins-code-editor span.cm-invalidchar {
  display: none
}

ins-code-editor .CodeMirror-dialog {
  position: absolute;
  left: 0;
  right: 0;
  background: inherit;
  z-index: 15;
  padding: .1em .8em;
  overflow: hidden;
  color: inherit
}

ins-code-editor div.CodeMirror-cursors {
  visibility: visible
}

ins-code-editor .CodeMirror-dialog-top {
  border-bottom: 1px solid #eee;
  top: 0
}

ins-code-editor .CodeMirror-dialog-bottom {
  border-top: 1px solid #eee;
  bottom: 0
}

ins-code-editor .CodeMirror-dialog input {
  font-size: 13px;
  border: none !important;
  outline: 0 !important;
  background: 0 0 !important;
  width: 100%;
  -webkit-box-shadow: none !important;
  box-shadow: none;
  color: inherit;
  display: inline-block;
  font-family: inherit;
  margin-bottom: 0;
  padding: 0;
  height: 25px
}

ins-code-editor .CodeMirror-dialog button {
  font-size: 70%
}

ins-code-editor .CodeMirror-fullscreen {
  z-index: 32000;
  margin-bottom: 0;
  height: 100%;
  top: 0;
  border-radius: 0
}

ins-code-editor .CodeMirror-fullscreen.CodeMirror-wrap {
  border: none
}

ins-code-editor .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

.ins-form-field-wrap {
  font-family: var(--ins-font-family);
  margin-bottom: 20px
}

.ins-form-field-wrap .ins-form-label {
  font-family: var(--ins-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  margin-bottom: 3px;
  display: block;
  line-height: 1.4;
  min-height: 20px
}

.ins-form-field-wrap .ins-form-label.disabled {
  color: var(--ins-color-ink40)
}

.ins-form-field-wrap .ins-form-label.active {
  color: var(--ins-color-primary)
}

.ins-form-field-wrap .ins-form-field {
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family);
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  box-shadow: none;
  box-sizing: border-box;
  border-radius: var(--ins-border-radius);
  margin: 0;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  padding: 10px;
  -webkit-transition: border-color .25s ease-in-out;
  transition: border-color .25s ease-in-out
}

.ins-form-field-wrap .ins-form-field:-moz-placeholder,
.ins-form-field-wrap .ins-form-field::-moz-placeholder {
  color: var(--ins-color-ink40)
}

.ins-form-field-wrap .ins-form-field:-ms-input-placeholder {
  color: var(--ins-color-ink40)
}

.ins-form-field-wrap .ins-form-field::-webkit-input-placeholder {
  color: var(--ins-color-ink40)
}

.ins-form-field-wrap .ins-form-field:hover {
  border-color: var(--ins-color-ink40)
}

.ins-form-field-wrap .ins-form-field:focus {
  border-color: var(--ins-color-primary);
  box-shadow: none;
  outline: 0
}

.ins-form-field-wrap .ins-form-field:disabled,
.ins-form-field-wrap .ins-form-field:read-only:not([read-only=false]) {
  border-color: var(--ins-color-ink10);
  background-color: var(--ins-color-disabled_readonly_bg);
  color: var(--ins-color-ink40);
  cursor: not-allowed
}

.ins-form-field-wrap .ins-form-field:read-only:not([read-only=false]) {
  cursor: text
}

.ins-form-field-wrap.is-invalid .ins-form-label {
  color: var(--ins-color-negative)
}

.ins-form-field-wrap.is-invalid .ins-form-field {
  color: var(--ins-color-negative);
  border-color: var(--ins-color-negative);
  background-color: var(--ins-color-red-10p)
}

.ins-form-field-wrap.is-invalid .ins-form-field:-moz-placeholder,
.ins-form-field-wrap.is-invalid .ins-form-field::-moz-placeholder {
  color: var(--ins-color-negative)
}

.ins-form-field-wrap.is-invalid .ins-form-field:-ms-input-placeholder {
  color: var(--ins-color-negative)
}

.ins-form-field-wrap.is-invalid .ins-form-field::-webkit-input-placeholder {
  color: var(--ins-color-negative)
}

.ins-form-field-wrap.is-invalid .ins-form-error {
  display: block;
  margin-top: 4px;
  font-family: var(--ins-font-family);
  font-size: 12px;
  line-height: 16px;
  color: var(--ins-color-negative)
}

.ins-form-field-wrap .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

ins-date-time .ins-form-field-wrap .ins-form-field:read-only:not([read-only=false]) {
  background-color: var(--ins-bg-color);
  color: var(--ins-color-ink)
}

ins-date-time .ins-form-field-wrap .ins-form-field:read-only:not([read-only=false]):focus {
  border-color: var(--ins-color-primary)
}

ins-date-time .ins-form-field-wrap.is-invalid .ins-form-field:read-only:not([read-only=false]) {
  color: var(--ins-color-negative);
  border-color: var(--ins-color-negative);
  background-color: var(--ins-color-red-10p)
}

ins-date-time .ins-form-field-wrap.disabled .ins-form-field:read-only:not([read-only=false]),
ins-date-time .ins-form-field-wrap.readonly .ins-form-field:read-only:not([read-only=false]) {
  background-color: var(--ins-color-disabled_readonly_bg);
  color: var(--ins-color-ink40)
}

ins-date-time .ins-date-time-wrap_input {
  position: relative
}

/* On phones flatpickr swaps in the native date input, which draws its own picker button at the
   right edge. The field's calendar icon sat on top of it and swallowed the tap (TW#26807060). */
ins-date-time .flatpickr-mobile ~ i[class^=icon-] {
  display: none
}

ins-date-time i[class^=icon-] {
  font-size: 16px;
  position: absolute;
  right: 8px;
  top: calc(50% - 8px);
  color: #8c94a4;
  -webkit-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out
}

ins-date-time[disabled] input {
  cursor: not-allowed !important
}

ins-date-time .ins-date-time-wrap,
ins-date-time .ins-datepicker-wrap {
  position: relative
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar {
  border-radius: 0;
  margin-top: 4px;
  background-color: var(--ins-bg-color);
  font-family: var(--ins-font-family);
  font-size: 12px;
  font-weight: 400;
  -webkit-box-shadow: 0 2px 4px 0 rgba(15, 21, 38, .14), 1px 1px 3px 0 rgba(140, 148, 164, .2);
  box-shadow: 0 2px 4px 0 rgba(15, 21, 38, .14), 1px 1px 3px 0 rgba(140, 148, 164, .2);
  padding: 7px 7px 12px;
  top: 60px !important;
  right: initial !important;
  left: 0 !important
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.noCalendar.showTimeInput.hasTime,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.noCalendar.showTimeInput.hasTime {
  padding: 7px;
  width: auto;
  border-radius: var(--ins-border-radius)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.noCalendar.showTimeInput.hasTime .flatpickr-time,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.noCalendar.showTimeInput.hasTime .flatpickr-time {
  border: 0;
  padding-top: 0
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-month,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-month {
  height: 30px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg,
ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg {
  display: none
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months {
  background: var(--ins-bg-color5);
  color: var(--ins-color-ink);
  padding: 4px;
  position: relative;
  padding-top: 6px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
  top: calc(50% - 14px)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month:before,
ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:before,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month:before,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:before {
  content: " ";
  display: block;
  border-left: 2px solid var(--ins-bg-color3);
  border-top: 2px solid var(--ins-bg-color3);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  cursor: pointer;
  width: 8px;
  height: 8px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover:before,
ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover:before,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover:before,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover:before {
  border-left: 2px solid #2c3148;
  border-top: 2px solid #2c3148
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
  left: 2px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  right: 2px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month:before,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-next-month:before {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month {
  font-size: 14px;
  padding: 0;
  height: 30px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month select,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month select {
  background-color: var(--ins-bg-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  font-size: 14px;
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  padding: 5px 7px 5px 6px;
  width: auto;
  height: auto;
  margin-right: 5px;
  border-radius: 3px;
  line-height: 18px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper {
  width: 8ch
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper:hover,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper:hover {
  background-color: transparent
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span {
  position: absolute
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper input,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper input {
  background-color: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  font-size: 14px;
  padding: 4px 12px 5px 6px;
  box-shadow: none;
  box-sizing: border-box
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer {
  margin-left: -7px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .dayContainer,
ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-weekdays,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .dayContainer,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-weekdays {
  padding: 0 7px;
  background-color: var(--ins-bg-color5);
  height: auto;
  box-sizing: border-box
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-weekdaycontainer,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-weekdaycontainer {
  padding: 10px 0;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-weekday,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-weekday {
  font-size: 12px;
  font-weight: 400;
  color: var(--ins-color-ink40)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-days,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-days {
  font-size: 12px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day {
  border-radius: 0;
  line-height: 30px;
  height: 32px;
  color: var(--ins-color-ink)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.flatpickr-disabled,
ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.nextMonthDay,
ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.prevMonthDay,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.flatpickr-disabled,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.nextMonthDay,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.prevMonthDay {
  color: var(--ins-color-ink10)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today {
  border-color: transparent
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.selected,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.selected {
  color: var(--ins-color-white);
  background: var(--ins-color-blue);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-blue)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.arrowTop:after,
ins-date-time .ins-date-time-wrap .flatpickr-calendar.arrowTop:before,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.arrowTop:after,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.arrowTop:before {
  display: none
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  height: auto;
  border-top: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  display: block;
  padding-top: 5px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .numInputWrapper,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .numInputWrapper {
  float: none;
  width: auto;
  height: auto;
  display: inline-block;
  margin: 0 5px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .numInputWrapper input,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .numInputWrapper input {
  color: var(--ins-bg-ink);
  background-color: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  padding: 0 17px 0 5px;
  box-sizing: border-box;
  display: block;
  text-align: left;
  height: 26px;
  font-weight: 400;
  font-size: 14px;
  box-shadow: none;
  box-sizing: border-box
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .flatpickr-am-pm,
ins-date-time .ins-date-time-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .flatpickr-time-separator,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .flatpickr-am-pm,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .flatpickr-time-separator {
  float: none;
  width: auto;
  height: auto;
  display: inline-block;
  color: var(--ins-bg-ink)
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .flatpickr-am-pm,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .flatpickr-am-pm {
  font-size: 14px
}

ins-date-time .ins-date-time-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .flatpickr-am-pm:hover,
ins-date-time .ins-datepicker-wrap .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time .flatpickr-am-pm:hover {
  background-color: transparent
}

.block {
  display: block
}

.inline-block {
  display: inline-block
}

.position-relative {
  position: relative
}

.position-absolute {
  position: absolute
}

.row-margin-x {
  margin-right: -.9375rem;
  margin-left: -.9375rem
}

@media screen and (max-width:339px) {
  .row-margin-x {
    margin-right: 0;
    margin-left: 0
  }
}

.vertical-align-middle {
  display: flex;
  align-items: center;
  position: relative
}

.vertical-align-middle.align-left {
  align-items: flex-start
}

.vertical-align-middle.align-right {
  align-items: flex-end
}

.flex-align-right {
  display: flex;
  align-items: flex-end;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.image-picker .img-container img,
.image-picker .img-placeholder span,
.image-picker.rectangle .img-container img,
.image-picker.rectangle .img-preview-holder .texts_image,
.image-picker.square .img-container img,
.image-picker.square .img-preview-holder .texts_image,
ins-editor .redactor-toolbar .re-button-icon i,
ins-editor .redactor-toolbar .re-fullscreen i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

ins-editor button {
  margin-top: 8px
}

ins-editor .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

.no-margin {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0
}

.no-margin-top {
  margin-top: 0
}

.no-margin-bottom {
  margin-bottom: 0
}

.no-margin-left {
  margin-left: 0
}

.no-margin-right {
  margin-right: 0
}

.margin-bottom-30 {
  margin-bottom: 30px
}

.padding-left--x-small {
  padding-left: 8px
}

.padding-left--small {
  padding-left: 16px
}

.padding-right--x-small {
  padding-right: 8px
}

.padding-right--small {
  padding-right: 16px
}

@media only screen and (max-width:639px) {

  .cell.padding-left--small,
  .cell.padding-left--x-small,
  .cell.padding-right--small,
  .cell.padding-right--x-small {
    padding-left: 0;
    padding-right: 0
  }
}

.height-full {
  height: 100%
}

.height-auto {
  height: auto
}

ins-editor {
  font-family: "Open Sans", sans-serif;
  margin-bottom: 20px
}

ins-editor .ins-editor {
  margin-bottom: 20px
}

ins-editor .re-fullscreen {
  position: relative
}

ins-editor .re-fullscreen::before {
  font-family: Redactor !important;
  position: absolute;
  left: 10px;
  content: "\e908"
}

ins-editor .ins-form-error {
  font-size: 12px;
  display: none;
  font-family: "Open Sans", sans-serif;
  line-height: 16px;
  color: #f27474;
  margin-top: 8px;
  margin-bottom: 0
}

ins-editor ins-button {
  pointer-events: none
}

ins-editor .redactor-source {
  display: none !important
}

ins-editor .redactor-styles {
  min-height: 300px
}

ins-editor .redactor-focus.redactor-styles-on,
ins-editor .redactor-focus:focus.redactor-styles-on {
  border-color: none
}

ins-editor .redactor-source-view .redactor-toolbar {
  background: #282a3c
}

ins-editor label {
  font-size: 12px;
  font-weight: 600;
  color: #2c3148;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 2px;
  min-height: 20px;
  display: block
}

ins-editor .active label {
  color: #1e86e3
}

ins-editor .active .redactor-box {
  border: 1px solid #1e86e3 !important
}

ins-editor .has-error label {
  color: #f27474
}

ins-editor .has-error .redactor-box {
  border: 1px solid #f27474 !important
}

ins-editor .has-error .ins-form-error {
  display: block
}

ins-editor .disabled label {
  color: #8c94a4
}

ins-editor .disabled .redactor-box {
  border: 1px solid #8c94a4 !important
}

ins-editor-dropdown a:focus,
ins-editor-dropdown a:hover {
  outline: 0;
  color: #fff !important;
  background-color: #1e86e3 !important
}

ins-editor-dropdown a.redactor-dropdown-item-disabled {
  display: none;
  visibility: hidden
}

ins-editor-focus.redactor-styles-on {
  border-color: #1e86e3 !important
}

ins-editor .CodeMirror-dialog input {
  font-size: 13px;
  border: none !important;
  outline: 0 !important;
  background: 0 0 !important;
  width: 100%;
  -webkit-box-shadow: none !important;
  box-shadow: none;
  color: inherit;
  display: inline-block;
  font-family: inherit;
  margin-bottom: 0;
  padding: 0;
  height: 25px
}

ins-editor-modal-header {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  letter-spacing: .14px;
  line-height: 24px;
  font-weight: 400
}

ins-editor-modal-body {
  padding: 20px;
  font-size: 14px;
  line-height: 18px
}

ins-editor-modal-body span.error {
  color: #f27474;
  letter-spacing: .2px;
  display: none
}

ins-editor-modal-body input:focus {
  border-color: #1e86e3;
  box-shadow: none;
  transition: all ease-in-out .5s
}

ins-editor-modal-body input.error {
  border: 1px solid #f27474;
  background-color: #fef8f8
}

ins-editor-modal-body input.error+span.error {
  display: block
}

ins-editor-modal-body #modal-link-url {
  margin-bottom: 3px
}

ins-editor-modal-footer {
  border-top: none;
  margin-top: 0;
  padding: 0 20px 20px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row-reverse
}

ins-editor-modal-footer button {
  color: #fff;
  background-color: #1e86e3;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  letter-spacing: 1px;
  border-radius: 4px
}

ins-editor-modal-footer button:last-child {
  margin-right: 15px
}

ins-editor-modal-footer button:focus,
ins-editor-modal-footer button:hover {
  background: #1a79ce;
  color: #fff
}

ins-editor-modal-footer button.redactor-button-unstyled {
  float: none;
  letter-spacing: 1px;
  border: 1px solid #1e86e3;
  color: #1e86e3;
  background-color: transparent
}

ins-editor-modal-footer button.redactor-button-unstyled:focus,
ins-editor-modal-footer button.redactor-button-unstyled:hover {
  text-decoration: none !important;
  text-transform: uppercase !important;
  color: #1e86e3;
  border: 1px solid #1e86e3;
  background: #e6f1fc
}

ins-editor-modal .redactor-close {
  opacity: 1;
  outline: 0;
  cursor: pointer;
  padding: 0 16px;
  font-size: 28px;
  font-weight: 300;
  font-family: "Open Sans", sans-serif;
  color: #2c3148;
  vertical-align: text-top
}

ins-editor-modal .redactor-close::before {
  content: "\D7";
  font-family: "Open Sans", sans-serif;
  font-weight: 300
}

ins-editor .redactor-box.redactor-styles-on .redactor-toolbar {
  padding: 16px;
  padding-right: 10px
}

ins-editor .redactor-read-only {
  margin-top: 0
}

ins-editor .redactor-toolbar {
  background-color: #f2f4f8
}

ins-editor .redactor-toolbar .re-button-icon,
ins-editor .redactor-toolbar .re-fullscreen {
  position: relative;
  background-color: #e4e6ec;
  width: 34px;
  height: 34px;
  color: #8c94a4;
  box-shadow: none;
  margin-right: 2px;
  margin-bottom: 2px
}

ins-editor .redactor-toolbar .re-button-icon:hover,
ins-editor .redactor-toolbar .re-fullscreen:hover {
  background-color: #0068c4;
  color: #fff
}

ins-editor .redactor-box.redactor-styles-on {
  border-color: rgba(0, 0, 0, .075)
}

ins-editor .CodeMirror-wrap {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 0
}

ins-editor .CodeMirror-wrap::before {
  position: absolute;
  right: 2px;
  top: 2px;
  opacity: 0;
  content: "F10 to toggle fullscreen view";
  -webkit-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  transition: all .5s ease-in;
  color: #bbb;
  font-size: 12px;
  padding: 0 .5em;
  background: #f5f2f0;
  background: rgba(224, 224, 224, .3);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, .2);
  border-radius: .5em
}

ins-editor .CodeMirror-wrap.fullscreen-help::before {
  opacity: 1
}

ins-editor.has-error .redactor-label {
  color: #f27474
}

ins-editor.has-error .redactor-box.redactor-styles-on {
  border-color: #f27474 !important
}

ins-editor.has-error .CodeMirror-wrap {
  border-left: solid 1px #f27474 !important;
  border-right: solid 1px #f27474 !important;
  border-bottom: solid 1px #f27474 !important
}

ins-editor .cm-s-default.CodeMirror {
  background: #1a1d2c;
  color: #f8f8f2
}

ins-editor .cm-s-default div.CodeMirror-selected {
  background: #49483e
}

ins-editor .cm-s-default .CodeMirror-line::selection,
ins-editor .cm-s-default .CodeMirror-line>span::selection,
ins-editor .cm-s-default .CodeMirror-line>span>span::selection {
  background: rgba(73, 72, 62, .99)
}

ins-editor .cm-s-default .CodeMirror-line::-moz-selection,
ins-editor .cm-s-default .CodeMirror-line>span::-moz-selection,
ins-editor .cm-s-default .CodeMirror-line>span>span::-moz-selection {
  background: rgba(73, 72, 62, .99)
}

ins-editor .cm-s-default .CodeMirror-gutters {
  background: #282b3c;
  border-right: 0
}

ins-editor .cm-s-default .CodeMirror-guttermarker {
  color: #fff
}

ins-editor .cm-s-default .CodeMirror-guttermarker-subtle {
  color: #d0d0d0
}

ins-editor .cm-s-default .CodeMirror-linenumber {
  color: #d0d0d0
}

ins-editor .cm-s-default .CodeMirror-cursor {
  border-left: 1px solid #f8f8f0
}

ins-editor .cm-s-default span.cm-comment {
  color: #75715e
}

ins-editor .cm-s-default span.cm-atom {
  color: #ae81ff
}

ins-editor .cm-s-default span.cm-number {
  color: #ae81ff
}

ins-editor .cm-s-default span.cm-comment.cm-attribute {
  color: #97b757
}

ins-editor .cm-s-default span.cm-comment.cm-def {
  color: #bc9262
}

ins-editor .cm-s-default span.cm-comment.cm-tag {
  color: #bc6283
}

ins-editor .cm-s-default span.cm-comment.cm-type {
  color: #5998a6
}

ins-editor .cm-s-default span.cm-attribute,
ins-editor .cm-s-default span.cm-property {
  color: #a6e22e
}

ins-editor .cm-s-default span.cm-keyword {
  color: #f92672
}

ins-editor .cm-s-default span.cm-builtin {
  color: #66d9ef
}

ins-editor .cm-s-default span.cm-string {
  color: #e6db74
}

ins-editor .cm-s-default span.cm-variable {
  color: #f8f8f2
}

ins-editor .cm-s-default span.cm-variable-2 {
  color: #9effff
}

ins-editor .cm-s-default span.cm-type,
ins-editor .cm-s-default span.cm-variable-3 {
  color: #66d9ef
}

ins-editor .cm-s-default span.cm-def {
  color: #fd971f
}

ins-editor .cm-s-default span.cm-bracket {
  color: #f8f8f2
}

ins-editor .cm-s-default span.cm-tag {
  color: #f92672
}

ins-editor .cm-s-default span.cm-header {
  color: #ae81ff
}

ins-editor .cm-s-default span.cm-link {
  color: #ae81ff
}

ins-editor .cm-s-default span.cm-error {
  background: #f92672;
  color: #f8f8f0
}

ins-editor .cm-s-default .CodeMirror-activeline-background {
  background: #373831
}

ins-editor .cm-s-default .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #fff !important
}

ins-editor .CodeMirror-fullscreen {
  z-index: 32000;
  margin-bottom: 0
}

ins-editor ul {
  list-style-type: disc
}

ins-editor ul ul {
  list-style-type: circle
}

ins-editor ul ul ul {
  list-style-type: square
}

ins-editor ol {
  list-style-type: decimal
}

ins-editor ol ol {
  list-style-type: lower-alpha
}

ins-editor ol ol ol {
  list-style-type: lower-roman
}

ins-editor.code-mode .re-button {
  opacity: .3;
  pointer-events: none
}

.image-picker .img-container img,
.image-picker .img-placeholder span,
.image-picker.rectangle .img-container img,
.image-picker.rectangle .img-preview-holder .texts_image,
.image-picker.square .img-container img,
.image-picker.square .img-preview-holder .texts_image,
ins-editor .redactor-toolbar .re-button-icon i,
ins-editor .redactor-toolbar .re-fullscreen i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

.ins-backdrop-wrap {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .25);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998
}

.ins-backdrop-wrap.light {
  background: rgba(255, 255, 255, .9)
}

.ins-card-wrap {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  border-radius: 3px;
  margin-top: 0;
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  background: var(--ins-color-bg);
  transition: all .15s;
  padding: 20px
}

.ins-card-wrap:hover {
  margin-top: -3px;
  box-shadow: 0 4px 13px var(--ins-shadow-color)
}

.ins-card-wrap.outlined {
  border-style: dashed;
  box-shadow: none
}

.ins-card-wrap.steady:hover {
  margin-top: 0;
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color)
}

.ins-card-wrap.no-padding {
  padding: 0
}

.image-picker {
  margin-bottom: 30px;
  font-family: var(--ins-font-family);
  line-height: 1.4
}

.image-picker .img-placeholder {
  margin-bottom: 0;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: relative;
  cursor: pointer
}

.image-picker .img-placeholder span {
  text-align: center;
  width: 100px;
  margin: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.image-picker .img-placeholder .icon-wrap {
  width: 100%;
  top: calc(50% - 16px);
  position: absolute;
  color: var(--ins-color-ink10);
  text-align: center;
  font-size: 32px
}

.image-picker .img-container {
  margin: 0 20px 10px 0;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  border-radius: 50%;
  position: relative;
  width: 120px;
  height: 120px
}

.image-picker .img-container img {
  height: auto;
  max-height: 100%
}

.image-picker .profile {
  border-radius: 50%
}

.image-picker .texts_image {
  color: var(--ins-color-ink40);
  display: block;
  font-size: 12px
}

.image-picker .texts_uploadinfo {
  color: var(--ins-color-ink40);
  display: block;
  font-size: 12px;
  margin-bottom: 12px
}

.image-picker .texts_uploadinfo .file-size {
  text-transform: uppercase
}

.image-picker .inline-block {
  display: inline-block;
  vertical-align: middle
}

.image-picker .clearfix::after {
  display: table;
  content: " ";
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  clear: both
}

.image-picker .show {
  display: block !important
}

.image-picker .modal {
  display: none
}

.image-picker .modal .ins-card-wrap.steady {
  position: fixed;
  margin-left: -250px;
  margin-top: -250px;
  left: 50%;
  top: 50%;
  z-index: 9999;
  width: 500px;
  box-shadow: none;
  height: auto !important
}

@media screen and (max-width:640px) {
  .image-picker .modal .ins-card-wrap.steady {
    width: 100%;
    left: 0;
    margin-left: 0
  }
}

.image-picker .modal .ins-card-wrap.steady .controllers {
  text-align: right
}

.image-picker .modal .ins-card-wrap.steady .controllers ins-button:first-child {
  float: left
}

@media screen and (max-width:650px) {
  .image-picker .modal .ins-card-wrap.steady .controllers ins-button:first-child {
    float: none
  }
}

.image-picker .modal .ins-card-wrap.steady .controllers ins-button:first-child .ins-button {
  margin-left: 0
}

.image-picker .modal .ins-card-wrap.steady .controllers .cancel-crop-btn,
.image-picker .modal .ins-card-wrap.steady .controllers .crop-btn,
.image-picker .modal .ins-card-wrap.steady .controllers .save-btn {
  display: none
}

.image-picker .modal .ins-card-wrap.steady .controllers .hidden-input {
  display: none
}

.image-picker .modal .ins-card-wrap.steady .controllers.has-image .crop-btn,
.image-picker .modal .ins-card-wrap.steady .controllers.has-image .save-btn {
  display: initial
}

.image-picker .modal .ins-card-wrap.steady .controllers.cropping .crop-btn {
  display: none
}

.image-picker .modal .ins-card-wrap.steady .controllers.cropping .cancel-crop-btn {
  display: initial
}

.image-picker .modal .ins-card-wrap.steady .modal-header {
  position: relative
}

.image-picker .modal .ins-card-wrap.steady .modal-header h3 {
  font-size: 18px;
  color: var(--ins-color-ink);
  margin-bottom: 20px;
  font-size: 300
}

.image-picker .modal .ins-card-wrap.steady .modal-header .icon-close-1 {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--ins-color-ink40);
  cursor: pointer
}

.image-picker .modal .ins-card-wrap.steady .error-wrap {
  display: none;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: var(--ins-color-negative);
  margin-bottom: 20px;
  margin-top: 10px;
  height: auto
}

.image-picker .modal .ins-card-wrap.steady .image-preview {
  border: var(--ins-border-thickness) dashed var(--ins-border-color);
  margin: 0 0 20px;
  height: 200px;
  width: 100%;
  z-index: 1;
  text-align: center;
  position: relative
}

.image-picker .modal .ins-card-wrap.steady .image-preview .placeholder-text {
  color: var(--ins-color-ink40);
  font-size: 14px;
  margin-bottom: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  top: calc(50% - 14px)
}

.image-picker .modal .ins-card-wrap.steady .image-preview img {
  object-fit: scale-down;
  max-width: 100%;
  max-height: 100%
}

.image-picker .modal .ins-card-wrap.steady .image-preview .label-content {
  color: var(--ins-color-ink40);
  position: absolute;
  z-index: 0;
  width: 100%
}

.image-picker .modal .ins-card-wrap.steady .image-preview .label-content h4 {
  font-family: var(--ins-font-family);
  font-size: 16px;
  margin-top: 20px
}

.image-picker .modal .ins-card-wrap.steady .image-preview .label-content i {
  font-size: 40px;
  top: 15px;
  position: relative
}

.image-picker .modal .ins-card-wrap.steady .image-preview.svg-type img {
  max-height: 200px
}

.image-picker .modal .ins-card-wrap.steady .image-preview.has-image {
  background-color: #e4e6ec
}

.image-picker .modal .ins-card-wrap.steady .image-preview.has-image .placeholder-text {
  display: none
}

.image-picker .modal .ins-card-wrap.steady .ins-button {
  margin-left: 15px;
  font-size: 12px
}

@media screen and (max-width:640px) {
  .image-picker .modal .ins-card-wrap.steady .ins-button {
    display: block;
    margin-bottom: 10px;
    margin-left: 0;
    width: 100%
  }
}

.image-picker .modal.show.has-error .ins-card-wrap .error-wrap {
  display: block
}

.image-picker .modal.show.has-error .ins-card-wrap .placeholder-text {
  color: var(--ins-color-negative)
}

.image-picker .modal.show.has-error .ins-card-wrap .image-preview {
  border-color: var(--ins-color-negative);
  margin-bottom: 0
}

.image-picker.rectangle .img-preview-holder {
  border-radius: 0
}

.image-picker.rectangle .img-preview-holder .texts_image {
  text-align: center
}

.image-picker.rectangle .img-preview-holder,
.image-picker.rectangle .profile {
  width: auto
}

.image-picker.rectangle .img-container {
  border-radius: 0;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  position: relative;
  width: 360px;
  height: 120px
}

@media screen and (max-width:920px) {
  .image-picker.rectangle .img-container {
    width: 100%
  }
}

.image-picker.rectangle .img-container img {
  border-radius: 0;
  height: auto;
  max-height: 100%
}

.image-picker.square .img-preview-holder {
  border-radius: 0;
  margin-bottom: 5px
}

.image-picker.square .img-preview-holder .texts_image {
  text-align: center
}

.image-picker.square .img-preview-holder,
.image-picker.square .profile {
  width: auto
}

.image-picker.square .img-container {
  margin-right: 20px;
  border-radius: 0;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  position: relative;
  width: 120px;
  height: 120px
}

.image-picker.square .img-container img {
  border-radius: 0;
  height: auto;
  max-height: 100%;
  border: none
}

.cropper-line.line-s {
  margin-bottom: 0
}

.cropper-crop-box span {
  margin-bottom: 0
}

.ins-form-field-wrap .input-wrap {
  position: relative
}

.ins-form-field-wrap .icon-wrap {
  font-size: 16px;
  position: absolute;
  right: 8px;
  top: calc(50% - 8px);
  color: var(--ins-color-ink40);
  -webkit-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out
}

.ins-form-field-wrap .icon-wrap.hover:hover {
  color: var(--ins-color-blue);
  cursor: pointer
}

.ins-form-field-wrap .ins-form-field:focus+.icon-wrap {
  color: var(--ins-color-primary)
}

.ins-form-field-wrap .ins-form-field:focus:read-only+.icon-wrap {
  color: var(--ins-color-ink40)
}

.ins-form-field-wrap .is-invalid .icon-wrap {
  color: var(--ins-color-negative)
}

.ins-input-wrap .unit-left,
.ins-input-wrap .unit-right {
  position: absolute;
  top: 9px;
  font-size: 14px;
  color: #8c94a4;
  font-family: "Open Sans", sans-serif
}

.ins-input-wrap .unit-right {
  right: 10px
}

.ins-input-wrap .unit-left {
  left: 10px
}

.ins-input-wrap.has-icon input {
  padding-right: 32px
}

.ins-input-wrap.has-unit-right.has-icon input {
  padding-right: 52px
}

.ins-input-wrap.has-unit-right.has-icon .unit-right {
  right: 30px
}

.ins-input-wrap.has-color .ins-form-field {
  width: calc(100% - 40px - 12px);
  display: inline-block
}

.ins-input-wrap.has-color .ins-form-field.color {
  width: 40px;
  padding: 3px 5px;
  float: right;
  cursor: pointer
}

.ins-input-wrap.has-color .ins-form-field.color[readonly] {
  background-color: var(--ins-color-disabled_readonly_bg);
  pointer-events: none
}

.ins-input-wrap.has-color .unit-right {
  right: 60px
}

.ins-input-wrap.has-color.has-icon .icon-wrap {
  right: 60px
}

.ins-input-wrap.has-color.has-icon.has-unit-right .unit-right {
  right: 82px
}

ins-input .ins-form-field-wrap.ins-input-wrap.has-icon.has-color input[type="text"].ins-form-field {
  padding-left: 32px;
  padding-right: 10px;
}
ins-input .ins-form-field-wrap.ins-input-wrap.has-icon.has-color .icon-wrap.color-wrap {
  left: 10px;
  width: 16px;
}

ins-input-file .ins-form-label .ins-input-tooltip {
  margin-bottom: 6px
}

ins-input-file[disabled] {
  pointer-events: none;
  cursor: not-allowed
}

ins-input-file[disabled] .ins-dropzone {
  border-color: var(--ins-bg-color4)
}

ins-input-file[disabled] .ins-dropzone .dz-message {
  color: var(--ins-color-ink40);
  opacity: .5
}

ins-input-file[disabled] .ins-dropzone .dz-clickable {
  cursor: not-allowed
}

ins-input-file[disabled] .ins-dropzone .dz-details {
  opacity: 1;
  pointer-events: initial
}

ins-input-file[disabled] .ins-dropzone .dz-preview {
  min-height: 70px
}

ins-input-file[disabled] .ins-dropzone .dz-remove {
  display: none
}

ins-input-file[disabled] .ins-input-file-wrapper .file-restrictions,
ins-input-file[disabled] .ins-input-file-wrapper label {
  color: var(--ins-color-ink40)
}

ins-input-file[has-error="true"] .ins-dropzone {
  border-color: var(--ins-color-negative);
  background-color: var(--ins-color-red-10p)
}

ins-input-file[has-error="true"] .dz-message,
ins-input-file[has-error="true"] .ins-input-file-wrapper.is-invalid .file-restrictions,
ins-input-file[has-error="true"] .ins-input-file-wrapper.is-invalid .ins-form-error,
ins-input-file[has-error="true"] label {
  color: var(--ins-color-negative)
}

ins-input-file[has-error="true"] .ins-input-file-wrapper.is-invalid .ins-form-error {
  display: block;
}

ins-input-file .file-restrictions {
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family);
  margin-bottom: 2px
}

ins-input-file .file-restrictions span {
  font-weight: 400;
  margin-bottom: 0
}

.ins-input-file-wrapper .ins-form-error {
  display: none;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px
}

.ins-dropzone {
  border: 2px dashed;
  border-color: var(--ins-color-ink10);
  margin-top: 4px;
  margin-bottom: 8px;
  border-radius: 5px;
  width: 100%;
  min-height: 80px;
  padding: 10px;
  background: 0 0;
  font-family: var(--ins-font-family)
}

.ins-dropzone .dz-message {
  color: var(--ins-color-ink40);
  font-style: italic;
  font-size: 14px
}

.ins-dropzone .dz-preview {
  width: 85px;
  max-width: 85px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px
}

.ins-dropzone .dz-preview.dz-image-preview {
  background-color: transparent
}

.ins-dropzone .dz-preview .dz-remove {
  margin-top: 2px;
  font-size: 10px;
  color: var(--ins-color-blue)
}

.ins-dropzone .dz-preview .dz-image {
  border-radius: var(--ins-border-radius);
  width: 100%;
  height: initial;
  min-height: 85px;
  max-height: 85px
}

.ins-dropzone .dz-preview .dz-image[class*=icon-] {
  font-size: 46px;
  color: var(--ins-color-ink10);
  background: 0 0;
  text-align: center;
  position: relative
}

.ins-dropzone .dz-preview .dz-image[class*=icon-]:before {
  position: relative;
  top: 4px
}

.ins-dropzone .dz-preview .dz-image[class*=icon-] img {
  display: none
}

.ins-dropzone .dz-preview .dz-image[class*=icon-]~.dz-details {
  opacity: 1
}

.ins-dropzone .dz-preview .dz-details {
  padding: 1.5em .5em
}

.ins-dropzone .dz-preview .dz-progress {
  display: none
}

.ins-dropzone.auto-upload .dz-preview .dz-progress {
  height: 12px;
  display: block
}

.ins-dropzone.auto-upload .dz-preview .dz-error-mark,
.ins-dropzone.auto-upload .dz-preview .dz-success-mark {
  top: 40%
}

.ins-dropzone.auto-upload .dz-preview .dz-success-mark {
  color: var(--ins-color-green)
}

.ins-dropzone.auto-upload .dz-preview .dz-error-mark {
  color: var(--ins-color-negative)
}

ins-input-multiple .ins-input-multiple {
  margin-bottom: 20px
}

ins-input-multiple .ins-input-multiple label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  margin-bottom: 2px
}

ins-input-multiple .ins-input-multiple .error-message {
  display: none;
  font-size: 12px;
  line-height: 16px;
  color: var(--ins-color-red)
}

ins-input-multiple .ins-input-multiple-container {
  padding: 6px 8px;
  width: 100%;
  background-color: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  margin-bottom: 4px;
  font-size: .875rem;
  position: relative;
  color: var(--ins-color-ink40);
  cursor: pointer;
  -webkit-transition: border-color .15s ease-in, border-radius .15s ease-in;
  transition: border-color .15s ease-in, border-radius .15s ease-in
}

ins-input-multiple .ins-input-multiple-container input {
  background: var(--ins-bg-color);
  font-size: 14px
}

ins-input-multiple .ins-input-multiple-container:hover {
  border-color: var(--ins-bg-color3)
}

ins-input-multiple .ins-input-multiple.active label {
  color: var(--ins-color-blue)
}

ins-input-multiple .ins-input-multiple.active .ins-input-multiple-container {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-blue)
}

ins-input-multiple .ins-input-multiple.has-error label {
  color: var(--ins-color-red)
}

ins-input-multiple .ins-input-multiple.has-error .error-message {
  display: block
}

ins-input-multiple .ins-input-multiple.has-error .ins-input-multiple-container {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-red);
  background: var(--ins-color-red-10p)
}

ins-input-multiple .ins-input-multiple.has-error .ins-input-multiple-container input {
  background: var(--ins-color-red-10p)
}

ins-input-multiple .ins-input-multiple.disabled label {
  color: var(--ins-color-ink40)
}

ins-input-multiple .ins-input-multiple-choice {
  display: inline-block;
  background: var(--ins-bg-color2);
  padding: 2px 8px;
  border-radius: 5px;
  position: relative;
  padding-right: 28px;
  margin: 0 5px 6px 5px;
  cursor: pointer
}

ins-input-multiple .ins-input-multiple-choice span {
  font-size: 14px;
  color: var(--ins-color-ink)
}

ins-input-multiple .ins-input-multiple-choice .icon-close {
  color: var(--ins-color-ink40);
  font-size: 7px;
  margin-left: 10px;
  position: absolute;
  right: 8px;
  top: calc(50% - 4px)
}

ins-input-multiple .ins-input-multiple-text {
  width: 100%;
  display: block;
  margin-bottom: 0;
  position: relative
}

ins-input-multiple .ins-input-multiple-text input,
ins-input-multiple .ins-input-multiple-text input:active,
ins-input-multiple .ins-input-multiple-text input:focus {
  border: none;
  outline: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding: 0 5px;
  height: 25px
}

ins-input-multiple .ins-input-multiple-text .icon-add {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  padding: 7px;
  padding-right: 2px;
  border-radius: 4px;
  color: var(--ins-color-ink40)
}

ins-input-multiple .ins-input-multiple.disabled .ins-input-multiple-choice,
ins-input-multiple .ins-input-multiple.readonly .ins-input-multiple-choice {
  padding-right: 8px
}

ins-input-multiple .ins-input-multiple.disabled .has-value-readonly,
ins-input-multiple .ins-input-multiple.readonly .has-value-readonly {
  display: none
}

ins-input-multiple .ins-input-multiple.disabled input,
ins-input-multiple .ins-input-multiple.readonly input {
  background: var(--ins-color-disabled_readonly_bg)
}

ins-input-multiple .ins-input-multiple.disabled .ins-input-multiple-container,
ins-input-multiple .ins-input-multiple.readonly .ins-input-multiple-container {
  border-color: var(--ins-bg-color2);
  background-color: var(--ins-color-disabled_readonly_bg);
  color: var(--ins-color-ink40)
}

ins-input-multiple .ins-input-multiple.disabled .ins-input-multiple-container:hover,
ins-input-multiple .ins-input-multiple.readonly .ins-input-multiple-container:hover {
  border-color: var(--ins-bg-color2)
}

ins-input-multiple .ins-input-multiple.disabled .icon-add,
ins-input-multiple .ins-input-multiple.readonly .icon-add {
  cursor: not-allowed
}

.iti__flag {
  background-image: url(/assets/images/intl-tel-input/flags.png)
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
  .iti__flag {
    background-image: url(/assets/images/intl-tel-input/flags@2x.png)
  }
}

.ins-input-tel-wrap .phone {
  visibility: hidden
}

.ins-input-tel-wrap .iti input {
  opacity: 0;
  width: 1px;
  padding: 0 !important;
  position: absolute;
  left: 0;
  top: 0
}

.ins-input-tel-wrap .iti .iti__flag-container {
  padding: 0;
  position: relative
}

.ins-input-tel-wrap .iti .iti__flag-container .iti__selected-flag {
  min-height: 38px;
  line-height: 1.5;
  font-size: 14px;
  border-radius: var(--ins-border-radius);
  background: var(--ins-bg-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  height: auto;
  padding: 8px;
  outline: 0;
  width: 94px !important;
  -webkit-transition: var(--ins-border-color) .25s ease-in-out, -webkit-box-shadow .5s;
  transition: var(--ins-border-color) .25s ease-in-out, -webkit-box-shadow .5s;
  transition: box-shadow .5s, var(--ins-border-color) .25s ease-in-out
}

.ins-input-tel-wrap .iti .iti__flag-container .iti__selected-flag:hover {
  border-color: var(--ins-color-ink40)
}

.ins-input-tel-wrap .iti .iti__flag-container .iti__selected-flag:focus {
  border-color: var(--ins-color-blue);
  box-shadow: none
}

.ins-input-tel-wrap .iti .iti__flag-container:hover .selected-flag {
  background-color: var(--ins-bg-color)
}

.ins-input-tel-wrap .iti .selected-dial-code {
  padding-left: 25px
}

.ins-input-tel-wrap .iti .iti__country-list {
  z-index: 11;
  font-size: 14px;
  margin-left: 0;
  margin-top: 6px;
  border-radius: var(--ins-border-radius);
  border-color: var(--ins-color-ink10)
}

.ins-input-tel-wrap .iti .iti__country-list .iti__divider {
  padding: 0;
  margin: 0;
  border-color: var(--ins-border-color)
}

.ins-input-tel-wrap .iti .iti__country-list .iti__country {
  line-height: 1.6
}

.ins-input-tel-wrap .row-col-container::after {
  display: block;
  content: "";
  clear: both
}

.ins-input-tel-wrap .col-container {
  float: left
}

.ins-input-tel-wrap .col-container input::-webkit-inner-spin-button,
.ins-input-tel-wrap .col-container input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.ins-input-tel-wrap .col-container input[type=number] {
  -moz-appearance: textfield
}

.ins-input-tel-wrap .col-container.column-2 {
  width: 50px;
  margin: 0 8px
}

.ins-input-tel-wrap .col-container.column-3 {
  width: calc(100% - 162px)
}

.ins-input-tel-wrap .col-container .iti-arrow {
  border-top: 4px solid var(--ins-color-ink10) !important
}

.ins-input-tel-wrap .icon-caret-down {
  color: var(--ins-color-ink40);
  font-size: 16px;
  position: absolute;
  top: calc(50% - 8px);
  right: 10px;
  border: none
}

.ins-input-tel-wrap.read-only .iti .iti__flag-container .iti__selected-flag {
  background-color: var(--ins-bg-color5);
  cursor: text
}

.ins-input-tel-wrap.read-only .iti .iti__flag-container .iti__selected-flag:focus,
.ins-input-tel-wrap.read-only .iti .iti__flag-container .iti__selected-flag:hover {
  border-color: var(--ins-color-ink10)
}

.ins-input-tel-wrap.no-areacode .column-2 {
  display: none
}

.ins-input-tel-wrap.no-areacode .column-3 {
  margin-left: 8px;
  width: calc(100% - 102px)
}

@media only screen and (max-width:400px) {
  .ins-input-tel-wrap .col-container {
    float: left
  }

  .ins-input-tel-wrap .col-container.column-2 {
    width: calc(100% - 104px);
    margin: 0 0 9px 9px
  }

  .ins-input-tel-wrap .col-container.column-3 {
    width: 100%;
    display: block;
    float: none
  }

  .ins-input-tel-wrap.no-areacode .column-3 {
    float: left;
    margin-left: 8px;
    width: calc(100% - 102px)
  }
}

.ins-input-phone-wrap .iti {
  display: block
}

.ins-input-phone-wrap .iti .iti__country-list {
  z-index: 11;
  font-size: 14px;
  margin-left: 0;
  margin-top: 6px;
  border-radius: var(--ins-border-radius);
  border-color: var(--ins-color-ink10)
}

.ins-input-phone-wrap .iti .iti__country-list .iti__divider {
  padding: 0;
  margin: 0;
  border-color: var(--ins-border-color)
}

.ins-input-phone-wrap .iti .iti__country-list .iti__country {
  line-height: 1.6
}

.ins-input-slider {
  margin-top: 40px;
  margin-bottom: 20px;
  font-family: var(--ins-font-family)
}

.ins-input-slider .rangeSlider {
  background-color: var(--ins-bg-color4);
  box-shadow: none;
  height: 8px;
  border-radius: 8px;
  display: inline-block;
  max-width: 200px;
  margin: 0 15px 0;
  cursor: pointer
}

.ins-input-slider .rangeSlider:hover {
  background-color: #edf0f4
}

.ins-input-slider .rangeSlider:hover .ins-input-slider_tooltip {
  display: block
}

.ins-input-slider .rangeSlider__fill {
  background-color: #cee2f6;
  box-shadow: none;
  transition: width .15s
}

.ins-input-slider .rangeSlider__handle {
  border: none;
  box-shadow: none;
  width: 18px;
  height: 18px;
  background: 0 0;
  top: -5px;
  transition: all .25s
}

.ins-input-slider .rangeSlider__handle:before {
  content: "";
  display: block;
  background: rgba(30, 134, 227, .1);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: absolute;
  left: -4px;
  top: -4px
}

.ins-input-slider .rangeSlider__handle:after {
  background-color: var(--ins-color-primary)
}

.ins-input-slider .rangeSlider__handle:active {
  background: 0 0
}

.ins-input-slider .rangeSlider__handle:active:before {
  background: rgba(30, 134, 227, .3)
}

.ins-input-slider .rangeSlider__handle:active .ins-input-slider_tooltip,
.ins-input-slider .rangeSlider__handle:hover .ins-input-slider_tooltip {
  display: block
}

.ins-input-slider .ins-input-slider_tooltip {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 5px 15px;
  background: var(--ins-color-primary);
  border-radius: 4px;
  color: var(--ins-color-white);
  font-size: 14px
}

.ins-input-slider .ins-input-slider_tooltip:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: var(--ins-color-primary);
  position: absolute;
  left: calc(50% - 3px);
  transform: rotate(45deg);
  bottom: -3px
}

.ins-input-slider .ins-input-slider_label {
  display: inline;
  font-size: initial;
  line-height: initial
}

.ins-input-slider .ins-input-slider_label input[type=number] {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  padding: 8px 14px;
  font-size: 16px;
  min-width: 100px;
  outline: 0;
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  margin-left: 15px;
  margin-bottom: 8px;
  box-shadow: none
}

.ins-input-slider .ins-input-slider_label input[type=number]:disabled {
  background: var(--ins-bg-color5);
  color: var(--ins-color-ink40)
}

.ins-input-slider .ins-input-slider_label input::-webkit-inner-spin-button,
.ins-input-slider .ins-input-slider_label input::-webkit-outer-spin-button,
.ins-input-slider .ins-input-slider_label input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none
}

.ins-input-slider .ins-input-slider_label.no-label input[type=number] {
  margin-left: 0
}

.ins-input-slider input[type=range]:focus+.rangeSlider .rangeSlider__handle {
  box-shadow: none
}

.ins-input-slider .ins-form-error {
  font-size: 12px;
  color: var(--ins-color-negative)
}

.ins-input-slider.slider-only .rangeSlider {
  margin: 0 0 10px
}

.ins-input-slider .rangeSlider--disabled {
  pointer-events: none;
  opacity: 1
}

.ins-input-slider .rangeSlider--disabled .rangeSlider__handle:after {
  background: #a5d1f9
}

.ins-input-slider.right .ins-input-slider_max {
  margin-right: 40px
}

.ins-input-slider.left .ins-input-slider_label {
  margin-right: 40px
}

.ins-input-slider.top .ins-input-slider_label {
  display: block;
  margin-bottom: 30px
}

.ins-input-slider.bottom .ins-input-slider_label {
  display: block;
  margin-top: 30px
}

.ins-input-slider.disabled .ins-input-slider_label,
.ins-input-slider.disabled span {
  color: var(--ins-color-ink40)
}

.ins-input-slider .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

.ins-input-stepper {
  box-sizing: border-box
}

.ins-input-stepper * {
  box-sizing: border-box;
  line-height: initial
}

.ins-input-stepper_input-wrap {
  overflow: hidden;
  display: inline-block;
  background-color: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ins-input-stepper_input-wrap div {
  display: inline-block
}

.ins-input-stepper_input-wrap input {
  background-color: transparent;
  position: relative;
  top: -3px;
  width: 60px;
  border: none;
  display: inline-block;
  padding: 8px;
  font-size: 14px;
  line-height: 1px;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  height: 32px;
  box-shadow: none;
  border: none;
  box-sizing: border-box;
  border-radius: 0;
  line-height: 1.5
}

.ins-input-stepper_input-wrap input::-webkit-inner-spin-button,
.ins-input-stepper_input-wrap input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.ins-input-stepper_input-wrap input[type=number] {
  -moz-appearance: textfield
}

.ins-input-stepper_input-wrap:hover {
  border-color: var(--ins-color-ink40)
}

.ins-input-stepper_input-wrap:hover .ins-input-stepper_minus,
.ins-input-stepper_input-wrap:hover .ins-input-stepper_plus {
  background-color: var(--ins-bg-color4)
}

.ins-input-stepper_input-wrap.active {
  border-color: var(--ins-color-primary)
}

.ins-input-stepper_input {
  padding-top: 5px
}

.ins-input-stepper_minus,
.ins-input-stepper_plus {
  font-size: 18px;
  line-height: 1px;
  padding: 10px;
  color: var(--ins-color-ink40);
  cursor: pointer
}

.ins-input-stepper_minus {
  border-right: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ins-input-stepper_plus {
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ins-input-stepper.disabled .ins-input-stepper_input,
.ins-input-stepper.disabled .ins-input-stepper_minus,
.ins-input-stepper.disabled .ins-input-stepper_plus,
.ins-input-stepper.readonly .ins-input-stepper_input,
.ins-input-stepper.readonly .ins-input-stepper_minus,
.ins-input-stepper.readonly .ins-input-stepper_plus {
  cursor: text;
  border-color: var(--ins-color-ink10);
  background-color: var(--ins-color-disabled_readonly_bg);
  color: var(--ins-color-ink10)
}

.ins-input-stepper.disabled .ins-input-stepper_input input,
.ins-input-stepper.readonly .ins-input-stepper_input input {
  color: var(--ins-color-ink40)
}

.ins-input-stepper.disabled .ins-input-stepper_input-wrap,
.ins-input-stepper.disabled .ins-input-stepper_input-wrap:hover,
.ins-input-stepper.readonly .ins-input-stepper_input-wrap,
.ins-input-stepper.readonly .ins-input-stepper_input-wrap:hover {
  border-color: var(--ins-color-ink10)
}

.ins-input-stepper.disabled .ins-input-stepper_input,
.ins-input-stepper.disabled .ins-input-stepper_minus,
.ins-input-stepper.disabled .ins-input-stepper_plus {
  cursor: not-allowed
}

.ins-input-stepper.disabled .ins-input-stepper_input input {
  cursor: not-allowed
}

.ins-input-stepper.is-invalid .ins-input-stepper_input,
.ins-input-stepper.is-invalid .ins-input-stepper_minus,
.ins-input-stepper.is-invalid .ins-input-stepper_plus {
  border-color: var(--ins-color-negative);
  background-color: var(--ins-color-red-10p);
  color: var(--ins-color-negative)
}

.ins-input-stepper.is-invalid .ins-input-stepper_input input {
  color: var(--ins-color-negative)
}

.ins-input-stepper.is-invalid .ins-input-stepper_input-wrap,
.ins-input-stepper.is-invalid .ins-input-stepper_input-wrap:hover {
  border-color: var(--ins-color-negative)
}

ins-markdown-editor .markdown-editor-wrap.ins-form-field {
  padding: 0;
  border: none
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar:not(.fullscreen) {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  border-bottom: none;
}

ins-markdown-editor .ins-markdown-editor .CodeMirror-wrap:not(.CodeMirror-fullscreen) {
  border-top: none;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
}

ins-markdown-editor .ins-markdown-editor {
  margin-bottom: 15px
}

ins-markdown-editor .ins-markdown-editor.active .editor-toolbar:not(.fullscreen) {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-primary);
  border-bottom: none;
}

ins-markdown-editor .ins-markdown-editor.active .CodeMirror-wrap:not(.CodeMirror-fullscreen) {
  border-top: none;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-primary);
}

ins-markdown-editor .ins-markdown-editor.active .CodeMirror-wrap:not(.CodeMirror-fullscreen).CodeMirror-sided {
  border-right: none
}

ins-markdown-editor .ins-markdown-editor label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family);
  margin-bottom: 2px
}

ins-markdown-editor .ins-markdown-editor label.disabled {
  color: var(--ins-color-ink40)
}

ins-markdown-editor .ins-markdown-editor label.active {
  color: var(--ins-color-blue)
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar {
  opacity: 1;
  background: var(--ins-bg-color4);
  padding: 16px;
  border: none
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar:hover {
  opacity: 1
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar.fullscreen {
  z-index: 1051;
  height: 66px;
  padding: 16px;
  background: var(--ins-bg-color4)
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar .separator,
ins-markdown-editor .ins-markdown-editor .editor-toolbar::after,
ins-markdown-editor .ins-markdown-editor .editor-toolbar::before {
  display: none
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar a {
  background: var(--ins-bg-color2);
  border: none;
  margin-right: 2px;
  font-size: 14px;
  border-radius: var(--ins-border-radius);
  color: #8c94a4 !important;
  height: 34px;
  width: 34px
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar a::before {
  line-height: 34px
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar a.active,
ins-markdown-editor .ins-markdown-editor .editor-toolbar a:hover {
  background: var(--ins-color-blue);
  color: var(--ins-color-white) !important
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar a:active,
ins-markdown-editor .ins-markdown-editor .editor-toolbar a:focus {
  outline: 0
}

ins-markdown-editor .ins-markdown-editor .editor-toolbar.disabled-for-preview a:not(.no-disable) {
  opacity: .4;
  background: var(--ins-bg-color2)
}

ins-markdown-editor .ins-markdown-editor .CodeMirror {
  border: none
}

ins-markdown-editor .ins-markdown-editor .CodeMirror-fullscreen {
  top: 66px;
  z-index: 99999;
  border-radius: 0
}

ins-markdown-editor .ins-markdown-editor .editor-preview-side {
  top: 66px;
  z-index: 99999;
  border-radius: 0;
  border-top: none;
  border-left: none
}

ins-markdown-editor .ins-markdown-editor.is-invalid .editor-toolbar:not(.fullscreen) {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-negative);
  border-bottom: none
}

ins-markdown-editor .ins-markdown-editor.is-invalid .CodeMirror-wrap:not(.CodeMirror-fullscreen) {
  border-top: none;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-negative)
}

ins-markdown-editor .ins-markdown-editor.is-invalid .CodeMirror-wrap:not(.CodeMirror-fullscreen).CodeMirror-sided {
  border-right: none
}

ins-markdown-editor .ins-markdown-editor.is-invalid label {
  color: var(--ins-color-negative)
}

ins-markdown-editor .ins-markdown-editor.is-invalid .ins-form-error {
  margin-top: 4px;
  display: block;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: #f27474
}

ins-checkbox [type=checkbox],
ins-checkbox [type=radio],
ins-radio [type=checkbox],
ins-radio [type=radio] {
  margin: 0
}

ins-checkbox .ins-radio-checkbox,
ins-radio .ins-radio-checkbox {
  padding: 0 10px
}

ins-checkbox .ins-radio-checkbox label,
ins-radio .ins-radio-checkbox label {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--ins-font-family);
  color: var(--ins-color-ink40)
}

ins-checkbox .ins-radio-checkbox label .ins-checkbox-radio-label,
ins-radio .ins-radio-checkbox label .ins-checkbox-radio-label {
  display: inline-block;
  margin-left: 10px
}

ins-checkbox .ins-radio-checkbox .ripple-check,
ins-radio .ins-radio-checkbox .ripple-check {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: background .15s ease-out;
  -moz-transition: background .15s ease-out;
  transition: background .15s ease-out;
  position: relative;
  width: 16px;
  height: 16px;
  background: var(--ins-bg-color2);
  border: none;
  color: var(--ins-color-white);
  cursor: pointer;
  display: inline-block;
  outline: 0;
  z-index: 2;
  border-radius: 1px;
  top: 2px
}

ins-checkbox .ins-radio-checkbox .ripple-check:hover,
ins-radio .ins-radio-checkbox .ripple-check:hover {
  background: var(--ins-bg-color3)
}

ins-checkbox[disabled] .ins-radio-checkbox .ripple-check:hover,
ins-radio[disabled] .ins-radio-checkbox .ripple-check:hover {
  cursor: not-allowed
}

@media only screen and (max-width:425px) {

  ins-checkbox .ins-radio-checkbox .ripple-check:hover,
  ins-radio .ins-radio-checkbox .ripple-check:hover {
    background: #e4e6ec
  }
}

ins-checkbox .ins-radio-checkbox .ripple-check:checked,
ins-radio .ins-radio-checkbox .ripple-check:checked {
  background: var(--ins-color-primary)
}

ins-checkbox .ins-radio-checkbox .ripple-check:checked::before,
ins-radio .ins-radio-checkbox .ripple-check:checked::before {
  width: 16px;
  height: 16px;
  position: absolute;
  top: -1px;
  display: inline-block;
  font-size: 8px;
  text-align: center;
  line-height: 16px;
  content: "\e926";
  font-family: insites-20-fonticon !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased
}

ins-checkbox .ins-radio-checkbox .ripple-check:checked::after,
ins-radio .ins-radio-checkbox .ripple-check:checked::after {
  -webkit-animation: click-wave .3s;
  -moz-animation: click-wave .3s;
  animation: click-wave .3s;
  background: #1e86e3;
  content: "";
  display: block;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  border-radius: 1px
}

ins-checkbox .ins-radio-checkbox .ripple-check.radio,
ins-radio .ins-radio-checkbox .ripple-check.radio {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  position: relative;
  top: 4px
}

ins-checkbox .ins-radio-checkbox .ripple-check.radio:checked::before,
ins-radio .ins-radio-checkbox .ripple-check.radio:checked::before {
  width: 18px;
  height: 18px;
  line-height: 20px
}

ins-checkbox .ins-radio-checkbox .ripple-check.radio:checked::after,
ins-radio .ins-radio-checkbox .ripple-check.radio:checked::after {
  width: 18px;
  height: 18px;
  border-radius: 50%
}

ins-checkbox .ins-input-tooltip,
ins-radio .ins-input-tooltip {
  line-height: 16px;
  position: relative;
  top: -2px
}

ins-checkbox .ins-checkbox-radio-label {
  margin-left: 12px
}

ins-checkbox .ins-radio-checkbox .ripple-check:checked::before {
  top: 0
}

@-webkit-keyframes click-wave {
  0% {
    transform: scale(1);
    opacity: .35
  }

  100% {
    transform: scale(2);
    opacity: 0
  }
}

@-moz-keyframes click-wave {
  0% {
    transform: scale(1);
    opacity: .35
  }

  100% {
    transform: scale(2);
    opacity: 0
  }
}

@-o-keyframes click-wave {
  0% {
    transform: scale(1);
    opacity: .35
  }

  100% {
    transform: scale(2);
    opacity: 0
  }
}

@keyframes click-wave {
  0% {
    transform: scale(1);
    opacity: .65
  }

  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

.ins-select {
  margin-bottom: 20px
}

.ins-select-wrap {
  font-family: var(--ins-font-family);
  color: var(--ins-color-ink);
  position: relative;
}

.ins-select-wrap .main-spinner-wrap {
  display: none;
  position: absolute;
  right: 21px;
  top: 27px
}

.ins-select-wrap.initializing .main-spinner-wrap {
  display: block
}

.ins-select-wrap .spinner-wrap {
  height: 32px;
  position: relative;
  display: none
}

.ins-select-wrap .spinner {
  border-width: 2px;
  position: absolute;
  border: 3px solid var(--ins-color-ink40);
  border-left: 3px solid var(--ins-bg-color);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  left: calc(50% - 4px);
  top: 8px
}

.ins-select-wrap .spinner,
.ins-select-wrap .spinner:after {
  border-radius: 50%;
  width: 16px;
  height: 16px
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.ins-select-wrap .ins-select-label-wrap {
  font-family: var(--ins-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  margin-bottom: 3px;
  display: block;
  line-height: 1.4;
  min-height: 20px
}

.ins-select-wrap .ins-select-value-wrap {
  min-height: 39px;
  background: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  font-size: .875rem;
  position: relative;
  color: var(--ins-color-ink40);
  cursor: pointer
}

.ins-select-wrap .ins-select-value-wrap:hover {
  border-color: var(--ins-color-ink40)
}

.ins-select-wrap .ins-select-value-wrap:focus {
  outline: 0;
  border-color: var(--ins-color-blue)
}

.ins-select-wrap .ins-select-value-wrap.multiple .multiple-item-wrap {
  display: inline-block;
  background-color: var(--ins-bg-color2);
  border-radius: var(--ins-border-radius);
  margin: 6px 4px;
  font-size: 14px;
  padding: 1px 8px;
  position: relative;
  padding-right: 28px;
  color: var(--ins-color-ink)
}

.ins-select-wrap .ins-select-value-wrap.multiple .multiple-item-wrap .icon-close {
  font-size: 7px;
  margin-left: 10px;
  position: absolute;
  color: var(--ins-color-ink40);
  padding: 4px;
  top: calc(50% - 8px);
  right: 4px;
  cursor: pointer
}

.ins-select-wrap .ins-select-value-wrap.multiple .multiple-item-wrap .icon-close:hover {
  color: #2c3148
}

.ins-select-wrap .ins-select-value-wrap.multiple .multiple-placeholder {
  padding: 10px
}

.ins-select-wrap .ins-select-value-wrap.multiple.has-value .ins-select-value-input {
  display: none
}

.ins-select-wrap .ins-select-value-wrap i.icon-caret-down {
  font-size: 16px;
  position: absolute;
  right: 11px;
  top: calc(50% - 8px);
  color: var(--ins-color-ink40)
}

.ins-select-wrap .ins-select-value-input {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  padding-right: 30px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  border-radius: var(--ins-border-radius);
  font-size: .875rem;
  background: var(--ins-bg-color);
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family)
}

.ins-select-wrap .ins-select-value-input::-webkit-input-placeholder {
  color: var(--ins-color-ink40)
}

.ins-select-wrap .ins-select-value-input::-moz-placeholder {
  color: var(--ins-color-ink40)
}

.ins-select-wrap .ins-select-value-input:-ms-input-placeholder {
  color: var(--ins-color-ink40)
}

.ins-select-wrap .ins-select-value-input:-moz-placeholder {
  color: var(--ins-color-ink40)
}

.ins-select-wrap .ins-select-value-input.active,
.ins-select-wrap .ins-select-value-input:focus,
.ins-select-wrap .ins-select-value-input:hover {
  border: none;
  outline: 0;
  box-shadow: none
}

.ins-select-wrap .ins-select-value-input[readonly] {
  background-color: var(--ins-bg-color);
  cursor: text
}

.ins-select-wrap .ins-select-value-input[disabled] {
  background-color: var(--ins-bg-color5);
  color: var(--ins-color-ink40);
  cursor: not-allowed
}

.ins-select-wrap .done-wrap {
  top: 0;
  background-color: var(--ins-bg-color5);
  font-family: var(--ins-font-family);
  font-size: .875rem;
  padding: 10px;
  color: var(--ins-color-ink40);
  cursor: pointer;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer
}

.ins-select-wrap .done-wrap:hover {
  color: var(--ins-color-ink);
  background-color: var(--ins-bg-color2)
}

.ins-select-wrap .ins-select-options-wrap.drop-up .done-wrap {
  border-radius: 4px 4px 0 0;
}

.ins-select-wrap .scroll-wrap {
  max-height: 226px;
  overflow: auto
}

.ins-select-wrap .scroll-wrap::-webkit-scrollbar {
  width: 7px;
  height: 7px
}

.ins-select-wrap .scroll-wrap::-webkit-scrollbar-track {
  box-shadow: none;
  -webkit-box-shadow: none
}

.ins-select-wrap .scroll-wrap::-webkit-scrollbar-thumb {
  background-color: var(--ins-bg-color2);
  border-radius: 16px;
  outline: 0
}

.ins-select-wrap .ins-select-options-wrap {
  background-color: transparent;
  border: solid 1px transparent;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
  border-top: none;
  overflow: hidden;
  height: 0;
  position: absolute;
  z-index: 990;
  width: 100%
}

.ins-select-wrap .ins-select-options-wrap.with-dynamic-option .scroll-wrap {
  max-height: calc(222px - 72px)
}

.ins-select-wrap .ins-select-options-wrap.with-dynamic-option .dynamic-option-wrap {
  display: flex
}

.ins-select-wrap .ins-select-options-wrap.searching .ins-select-option-wrap {
  display: none
}

.ins-select-wrap .ins-select-options-wrap.searching .dynamic-option-wrap {
  display: none
}

.ins-select-wrap .ins-select-options-wrap.searching .spinner-wrap {
  display: block
}

.ins-select-wrap .ins-select-options-wrap.loading .spinner-wrap {
  display: block
}

.ins-select-wrap .ins-select-options-wrap::-webkit-scrollbar {
  width: 7px
}

.ins-select-wrap .ins-select-options-wrap::-webkit-scrollbar-track {
  box-shadow: none;
  -webkit-box-shadow: none
}

.ins-select-wrap .ins-select-options-wrap::-webkit-scrollbar-thumb {
  background-color: var(--ins-bg-color2);
  border-radius: 16px;
  outline: 0
}

.ins-select-wrap .ins-select-options-wrap .no-more-options,
.ins-select-wrap .ins-select-options-wrap .no-result-text {
  font-size: .875rem;
  padding: 10px;
  margin-bottom: 0;
  display: none
}

.ins-select-wrap .ins-select-options-wrap.no-result .no-result-text {
  display: block
}

.ins-select-wrap .ins-select-options-wrap.no-result .no-more-options {
  display: none
}

.ins-select-wrap.small .ins-select-options-wrap .no-more-options {
  font-size: 12px
}

.ins-select-wrap .ins-select-options-wrap.drop-up {
  top: inherit;
  bottom: calc(100% + 8px)
}

.ins-select-wrap .dynamic-option-wrap {
  padding: 16px;
  border-top: solid 1px #e4e6ec;
  display: none
}

.ins-select-wrap .dynamic-option-wrap::after {
  clear: both;
  content: "";
  display: block
}

.ins-select-wrap .dynamic-option-wrap .dynamic-option-input-wrap {
  flex: 9
}

.ins-select-wrap .dynamic-option-wrap input {
  width: calc(100% - 15px);
  height: auto;
  min-height: 36px;
  margin-bottom: 0;
  margin-right: 14px;
  padding: 0 8px 1px;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 4px;
  border: 1px solid #e4e6ec;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2c3148
}

.ins-select-wrap .dynamic-option-wrap input:focus {
  border-color: #1e86e3;
  box-shadow: none;
  outline: 0
}

.ins-select-wrap .dynamic-option-wrap input.invalid {
  color: #f27474;
  border-color: #f27474;
  background-color: #f8edee
}

.ins-select-wrap .dynamic-option-wrap button {
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 4px;
  background-color: #1e86e3;
  outline: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  cursor: pointer
}

.ins-select-wrap .dynamic-option-wrap .error-message {
  display: block;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  line-height: 16px;
  color: #f27474;
  margin-top: 2px;
  float: left;
  width: 100%
}

.ins-select-wrap.disabled .ins-select-value-wrap,
.ins-select-wrap.readonly .ins-select-value-wrap {
  background-color: #fafbfc;
  cursor: not-allowed
}

.ins-select-wrap.disabled .ins-select-value-wrap:hover,
.ins-select-wrap.readonly .ins-select-value-wrap:hover {
  border-color: #e4e6ec
}

.ins-select-wrap.disabled .ins-select-value-wrap.multiple .multiple-item-wrap .icon-close,
.ins-select-wrap.readonly .ins-select-value-wrap.multiple .multiple-item-wrap .icon-close {
  cursor: not-allowed
}

.ins-select-wrap.disabled .ins-select-value-wrap.multiple .multiple-item-wrap .icon-close:hover,
.ins-select-wrap.readonly .ins-select-value-wrap.multiple .multiple-item-wrap .icon-close:hover {
  color: #8c94a4
}

.ins-select-wrap.readonly .ins-select-value-input[readonly] {
  border-color: #e4e6ec !important;
  background-color: #fafbfc;
  color: #8c94a4
}

.ins-select-wrap.disabled {
  color: #8c94a4
}

.ins-select-wrap.disabled .ins-select-label-wrap {
  color: #8c94a4
}

.ins-select-wrap.disabled .ins-select-value-wrap.multiple .multiple-item-wrap {
  color: #8c94a4
}

.ins-select-wrap.disabled .ins-select-value-wrap:focus {
  outline: 0;
  border-color: #e4e6ec
}

.ins-select-wrap.activated label {
  color: var(--ins-color-primary)
}

.ins-select-wrap.activated .ins-select-value-wrap {
  color: var(--ins-color-ink);
  border-color: var(--ins-color-blue);
  border-bottom-color: transparent;
  border-radius: 4px 4px 0 0;
  cursor: initial
}

.ins-select-wrap.activated .ins-select-value-wrap.multiple .ins-select-value-input {
  display: block
}

.ins-select-wrap.activated .ins-select-options-wrap {
  background-color: var(--ins-bg-color);
  border-color: var(--ins-color-blue);
  margin-top: -1px;
  height: auto
}

.ins-select-wrap.activated.drop-up .ins-select-value-wrap {
  border-bottom-color: var(--ins-color-primary);
  border-radius: 0 0 4px 4px;
  border-top-color: transparent
}

.ins-select-wrap.activated.drop-up .ins-select-options-wrap {
  top: inherit;
  bottom: 39px;
  border-top: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-blue);
  margin: 0;
}

.ins-select-wrap.is-invalid label {
  color: var(--ins-color-negative)
}

.ins-select-wrap.is-invalid .ins-form-error {
  display: block;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: var(--ins-color-negative);
  margin-top: 4px;
  height: 16px !important
}

ins-select .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

.ins-select-wrap.is-invalid .ins-select-value-wrap {
  border-color: var(--ins-color-negative);
  color: var(--ins-color-negative);
  background-color: var(--ins-color-red-10p)
}

.ins-select-wrap.is-invalid .ins-select-value-input {
  background-color: var(--ins-color-red-10p)
}

.ins-select-wrap.is-invalid.activated .ins-select-options-wrap {
  top: calc(100% - 24px);
  border-color: var(--ins-color-negative)
}

.ins-select-wrap.is-invalid.activated.drop-up .ins-select-value-wrap {
  border-bottom-color: var(--ins-color-negative)
}

.ins-select-wrap.is-invalid.activated.drop-up .ins-select-options-wrap {
  top: initial;
  border-top-color: var(--ins-color-negative)
}

.ins-select-wrap.no-options .no-more-options {
  display: block
}

.ins-select-wrap.buttonise {
  display: inline-block;
  background: var(--ins-bg-color2);
  border-radius: var(--ins-border-radius);
  position: relative
}

.ins-select-wrap.buttonise .scroll-wrap {
  margin-top: 0
}

.ins-select-wrap.buttonise .ins-select-label-wrap {
  margin-bottom: 0;
  display: inline-block;
  vertical-align: top;
  padding: 7px 7px;
  cursor: default;
  position: relative;
  cursor: pointer
}

.ins-select-wrap.buttonise .ins-select-label-wrap.ripple {
  background-position: center;
  transition: background .8s;
  border-radius: var(--ins-border-radius)
}

.ins-select-wrap.buttonise .ins-select-label-wrap.ripple:hover {
  background: #e4e6ec radial-gradient(circle, transparent 1%, #e4e6ec 1%) center/15000%
}

.ins-select-wrap.buttonise .ins-select-label-wrap.ripple:active {
  background-color: #d3d9dd;
  background-size: 100%;
  transition: background 0s
}

.ins-select-wrap.buttonise .ins-select-label-wrap span {
  font-size: .75rem;
  font-weight: 400;
  margin-left: 5px;
  padding-right: 24px
}

.ins-select-wrap.buttonise .ins-select-label-wrap i.icon-caret-down {
  color: var(--ins-color-ink40);
  font-size: 14px;
  line-height: 5px;
  width: 10px;
  height: 5px;
  position: absolute;
  display: block;
  right: 5px;
  top: calc(50% - 2px)
}

.ins-select-wrap.buttonise .ins-select-value-wrap {
  display: inline-block;
  width: auto;
  border: none;
  background: 0 0;
  font-size: .75rem;
  height: auto;
  padding-left: 8px;
  padding-right: 24px
}

.ins-select-wrap.buttonise .ins-select-options-wrap {
  opacity: 0;
  background-color: transparent;
  position: absolute;
  top: calc(100% + 8px);
  min-width: 200px;
  width: 100%;
  left: 0;
  border: solid 1px transparent;
  border-radius: var(--ins-border-radius);
  box-shadow: 0 0 0 transparent;
  overflow: hidden
}

.ins-select-wrap.buttonise .ins-select-options-searchbar {
  position: relative;
  padding: 14px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  background-color: var(--ins-bg-color)
}

.ins-select-wrap.buttonise .ins-select-options-searchbar .ins-select-value-input {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  padding: 10px 12px
}

.ins-select-wrap.buttonise .ins-select-options-searchbar .icon-search {
  position: absolute;
  right: 24px;
  top: calc(50% - 8px);
  color: var(--ins-color-ink40)
}

.ins-select-wrap.buttonise .no-result-text {
  margin-top: 16px
}

.ins-select-wrap.buttonise.activated .ins-select-label-wrap {
  color: var(--ins-color-ink)
}

.ins-select-wrap.buttonise.activated .ins-select-options-wrap {
  opacity: 1;
  background-color: var(--ins-bg-color);
  border-color: var(--ins-color-ink10);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  margin-top: 0
}

.ins-select-wrap.buttonise.small .ins-select-label-wrap,
.ins-select-wrap.buttonise.small .ins-select-label-wrap span,
.ins-select-wrap.buttonise.small .ins-select-value-wrap {
  font-size: .625rem
}

.ins-select-wrap.buttonise.small .ins-select-option-wrap {
  font-size: .75rem
}

.ins-select-wrap.buttonise.disabled .ins-select-label-wrap,
.ins-select-wrap.buttonise.readonly .ins-select-label-wrap {
  cursor: not-allowed
}

.ins-select-option-wrap {
  opacity: 0;
  background-color: var(--ins-bg-color);
  font-family: var(--ins-font-family);
  font-size: .875rem;
  padding: 12px 10px;
  color: var(--ins-color-ink40);
  cursor: pointer
}

ins-input-select[blank-label]:not([multiple]) .ins-select-option-wrap.no-value {
  opacity: .5
}

.ins-select-option-wrap:hover {
  color: var(--ins-color-ink);
  background-color: var(--ins-bg-color2)
}

.ins-select-option-wrap.selected {
  color: var(--ins-color-ink);
  background-color: var(--ins-bg-color5);
  display: none
}

.ins-select-option-wrap.disabled {
  color: #e4e6ec;
  cursor: initial
}

.ins-select-option-wrap.disabled:hover {
  background-color: var(--ins-bg-color)
}

.ins-select-option-wrap.hidden {
  display: none
}

.ins-select-wrap.activated .ins-select-option-wrap {
  opacity: 1
}

.ins-select-group {
  margin-bottom: 20px
}

.ins-select-group_label {
  font-family: var(--ins-font-family);
  font-size: .875rem;
  padding: 12px 10px;
  background-color: var(--ins-bg-color4);
  color: var(--ins-color-ink)
}

.ins-select-group_options .ins-select-option-wrap {
  padding-left: 30px
}

.ins-select-options-wrap.no-options .ins-select-group {
  display: none
}

.ins-textarea-wrap textarea {
  min-height: 200px;
  resize: vertical
}

.ins-textarea-wrap .ins-textarea-counter {
  color: #2c3148;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  text-align: right;
  float: right;
  max-width: 50%
}

.ins-textarea-wrap.with-counter textarea {
  margin-bottom: 8px
}

.ins-textarea-wrap.is-invalid .with-counter .ins-form-error {
  float: left;
  max-width: 50%
}

.ins-textarea-wrap.is-invalid .with-counter .ins-textarea-counter {
  color: #f27474
}

ins-toggle-switch .v-switch {
  display: inline-block;
  padding: 10px 10px 0 10px
}

ins-toggle-switch .v-switch .ins-switch {
  position: relative;
  display: inline-block;
  min-width: 60px;
  height: 34px;
  line-height: 1.8;
  margin: 0;
  font-size: 16px
}

ins-toggle-switch .v-switch .ins-switch input {
  display: none
}

ins-toggle-switch .v-switch .ins-slider {
  position: absolute;
  cursor: pointer;
  top: 7px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ins-bg-color2);
  -webkit-transition: .4s;
  transition: .4s;
  margin: 0;
  height: 16px;
  width: 40px
}

ins-toggle-switch .v-switch .ins-slider:hover>i:before {
  -webkit-transition: .4s;
  transition: .4s;
  content: "";
  border: solid 9px var(--ins-color-ink10) !important;
  height: 38px;
  width: 38px;
  position: absolute;
  border-radius: 50px;
  top: calc(50% - 19px);
  right: calc(50% - 9px);
  opacity: .3;
  box-sizing: border-box
}

ins-toggle-switch .v-switch .ins-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  bottom: -2px;
  background-color: var(--ins-bg-color);
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0 0 1px #b6b6b9;
  box-sizing: border-box
}

ins-toggle-switch .v-switch input:checked+.ins-slider {
  background: var(--ins-color-blue-20p)
}

ins-toggle-switch .v-switch input:focus+.ins-slider {
  box-shadow: 0 0 1px var(--ins-color-blue)
}

ins-toggle-switch .v-switch input:checked+.ins-slider:before,
ins-toggle-switch .v-switch input:checked+.ins-slider>i:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
  background-color: var(--ins-color-blue);
  border: none
}

ins-toggle-switch .v-switch input:checked+.ins-slider>i:before {
  border: solid 10px var(--ins-color-blue) !important;
  opacity: .1 !important
}

ins-toggle-switch .v-switch .ins-slider.round {
  border-radius: 34px
}

ins-toggle-switch .v-switch .ins-slider.round:before {
  border-radius: 50%;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

ins-toggle-switch .v-switch .ins-label {
  font-family: var(--ins-font-family);
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  padding-left: 52px;
  margin-top: -5px;
  color: var(--ins-color-ink40)
}

ins-toggle-switch .v-switch.disabled input:checked+.ins-slider:hover>i:before {
  border-color: transparent !important;
  background: 0 0
}

ins-toggle-switch .ins-input-tooltip {
  line-height: 16px;
  position: relative;
  top: -1px
}
ins-toggle-switch .has-input-label.v-switch {
  padding: 0;
}
ins-toggle-switch .has-input-label .input-label {
  font-family: var(--ins-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  display: block;
  line-height: 1.4;
  min-height: 20px;
  margin-bottom: 3px;
}
ins-toggle-switch .has-input-label .ins-form-error {
  display: block;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: var(--ins-color-negative);
  margin-top: 4px;
}
ins-toggle-switch .has-input-label.is-invalid .input-label, ins-toggle-switch .has-input-label.is-invalid .ins-label {
  color: var(--ins-color-negative);
}
ins-toggle-switch .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40);
}

.ins-bar-chart {
  background-color: var(--ins-bg-color);
  position: relative;
  min-height: 60px
}

.ins-bar-chart h2 {
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 300;
  font-family: var(--ins-font-family)
}

@media only screen and (max-width:736px) {
  ins-line-chart h2 {
    position: relative
  }
}

@media only screen and (max-width:320px) {
  ins-line-chart h2 {
    position: relative
  }
}

.ins-card-wrap {
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  margin-top: 0;
  background: var(--ins-bg-color);
  transition: all .15s;
  padding: 20px
}

.ins-card-wrap:hover {
  margin-top: -3px;
  box-shadow: 0 4px 13px var(--ins-shadow-color)
}

.ins-card-wrap.outlined {
  border-style: dashed;
  box-shadow: none
}

.ins-card-wrap.steady:hover {
  margin-top: 0;
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color)
}

.ins-card-wrap.no-padding {
  padding: 0
}

.ins-dropdown {
  position: relative;
  display: inline-block
}

.ins-dropdown_label {
  padding-left: 15px;
  padding-right: 30px;
  position: relative;
  cursor: pointer
}

.ins-dropdown_label .icon-angle-down {
  position: absolute;
  right: 10px;
  top: calc(50% - 7px)
}

.ins-dropdown_label a {
  color: var(--ins-color-primary);
  text-decoration: none
}

.ins-dropdown_menu {
  display: none;
  padding-top: 15px;
  position: absolute;
  min-width: 200%;
  max-width: 300px;
  z-index: 100
}

.ins-dropdown:hover {
  color: var(--ins-color-primary)
}

.ins-dropdown:hover .ins-dropdown_menu {
  display: block
}

.ins-dropdown_menu-card {
  border-radius: var(--ins-border-radius);
  background-color: var(--ins-bg-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color)
}

.ins-dropdown.lined .ins-dropdown-item {
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ins-dropdown.lined .ins-dropdown-item:last-child {
  border-bottom: none
}

ins-dropdown {
  display: none;
  box-sizing: border-box;
  font-family: var(--ins-font-family);
  font-size: 14px
}

ins-dropdown * {
  box-sizing: border-box
}

ins-dropdown.hydrated {
  display: block
}

.ins-dropdown-item {
  display: block;
  padding: 15px;
  color: var(--ins-color-ink);
  text-decoration: none
}

.ins-dropdown-item:hover {
  background-color: var(--ins-bg-color4)
}

.ins-dropdown-item.submenu {
  position: relative
}

.ins-dropdown-item_label {
  position: relative;
  padding-right: 15px
}

.ins-dropdown-item_label .icon-angle-right {
  position: absolute;
  top: calc(50% - 7px);
  right: 0
}

.ins-dropdown-item_submenu {
  display: none;
  width: 100%;
  max-width: 300px;
  position: absolute;
  z-index: 101;
  padding-left: 15px;
  left: 100%;
  top: 0;
  cursor: pointer
}

.ins-dropdown-item_submenu-card {
  border-radius: var(--ins-border-radius);
  background-color: var(--ins-bg-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color)
}

.ins-dropdown-item.submenu:hover {
  color: var(--ins-color-primary)
}

.ins-dropdown-item.submenu:hover>.ins-dropdown-item_submenu {
  display: block
}

ins-dropdown-item {
  box-sizing: border-box;
  font-family: var(--ins-font-family);
  font-size: 14px
}

ins-dropdown-item * {
  box-sizing: border-box
}

ins-filter .filter {
  font-size: 12px;
  font-family: var(--ins-font-family);
  display: inline-block;
  position: relative;
  margin-right: 20px
}

ins-filter .filter__label {
  margin-right: 18px;
  display: block;
  float: left;
  margin-top: 7px
}

ins-filter .filter__date {
  display: inline-block
}

ins-filter .filter__btn-container {
  display: inline-block;
  position: relative;
  vertical-align: middle
}

ins-filter .date-filter {
  border-radius: var(--ins-border-radius);
  background-color: var(--ins-bg-color2);
  display: inline-block;
  padding: 7px 7px;
  color: var(--ins-color-ink);
  cursor: pointer;
  overflow: hidden;
  position: relative
}

ins-filter .date-filter__text {
  font-weight: 600
}

ins-filter .date-filter .fas {
  margin-left: 8px;
  color: var(--ins-color-ink40);
  font-size: 12px
}

ins-filter .date-range {
  background-color: var(--ins-bg-color);
  font-size: 14px;
  box-shadow: 0 2px 4px 0 var(--ins-shadow-color), 1px 1px 3px 0 var(--ins-shadow-color);
  border-radius: var(--ins-border-radius);
  display: none;
  position: absolute;
  min-width: 656px;
  padding: 8px;
  z-index: 3
}

ins-filter .date-range.active {
  display: block;
  top: 42px;
  left: 0
}

ins-filter .date-range__opt-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5px
}

ins-filter .date-range__opt-container>div {
  display: inline-block;
  font-size: 12px;
  color: var(--ins-color-ink40);
  cursor: pointer;
  margin: 6px 0
}

ins-filter .date-range__opt-container>div>div {
  display: inline-block;
  padding: 5px;
  border-radius: var(--ins-border-radius)
}

ins-filter .date-range__opt-container>div>div:hover {
  background-color: var(--ins-bg-color2);
  color: var(--ins-color-ink);
  font-weight: 600
}

ins-filter .date-range__action {
  display: block;
  color: var(--ins-color-ink40);
  padding: 15px 0 5px;
  width: 100%
}

ins-filter .date-range__input {
  display: none;
}

ins-filter .date-range__action input {
  padding: 2px;
  border-radius: 2px;
  text-align: center;
  font-size: 12px;
  font-family: var(--ins-font-family);
  color: var(--ins-color-ink);
  background-color: var(--ins-bg-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  display: inline-block;
  box-shadow: none;
  margin: 0;
  width: auto;
  height: auto
}

ins-filter .date-range__action input::-webkit-calendar-picker-indicator,
ins-filter .date-range__action input::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none
}

ins-filter .date-range__cancel-apply {
  float: right
}

ins-filter .date-range__cancel-apply ins-button:first-of-type {
  margin-right: 10px
}

ins-filter .date-range__cancel-apply button {
  min-width: 76px
}

ins-filter .date-range input[type=date]::-webkit-input-placeholder {
  visibility: hidden !important
}

ins-filter .date-range i.fas {
  position: absolute
}

ins-filter ins-filter-item:last-child {
  margin-right: 0
}

.active-tab {
  background-color: var(--ins-bg-color2);
  color: var(--ins-color-ink);
  font-weight: 600
}

ins-filter .input-wrap {
  position: relative;
  display: inline-block;
  padding: 6px 6px 0;
  background: var(--ins-bg-color5)
}

ins-filter .input-wrap .ins-form-field {
  display: none
}

ins-filter .input-wrap .flatpickr-calendar {
  position: relative;
  top: 0 !important;
  left: 0 !important;
  margin: 0;
  display: inline-block;
  padding-bottom: 0;
  box-shadow: none;
  background: var(--ins-bg-color5)
}

ins-filter .ins-label {
  display: none
}

@media only screen and (max-width:768px) {
  ins-filter .filter {
    margin-bottom: 20px;
    box-sizing: border-box
  }

  ins-filter .d-spacer {
    display: none
  }

  ins-filter .ins-label {
    display: block;
    font-family: var(--ins-font-family);
    font-size: 12px;
    font-weight: 600;
    color: var(--ins-color-ink);
    margin-bottom: 3px;
    display: block;
    line-height: 1.4
  }

  ins-filter .input-wrap {
    display: none
  }

  ins-filter .date-range {
    width: 100%;
    min-width: auto;
    box-sizing: border-box
  }

  ins-filter .date-range.active {
    top: initial
  }

  ins-filter .date-range__opt-container {
    display: block
  }

  ins-filter .date-range__opt-container>div {
    display: inline-block;
    min-width: 33.33%;
    padding: 8px;
    box-sizing: border-box
  }

  ins-filter .date-range__opt-container>div>div {
    display: block;
    padding: 8px;
    text-align: center;
    background: var(--ins-bg-color5);
    color: var(--ins-color-ink)
  }

  ins-filter .date-range__opt-container>div>div.active-tab {
    background: var(--ins-bg-color2)
  }

  ins-filter .date-range__action {
    padding: 0 8px;
    box-sizing: border-box
  }

  ins-filter .date-range__action input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 20px;
    outline: 0
  }

  ins-filter .date-range__action input::-webkit-calendar-picker-indicator,
  ins-filter .date-range__action input::-webkit-inner-spin-button {
    display: initial;
    -webkit-appearance: initial
  }

  ins-filter .date-range__action input.ins-date-from {
    margin-bottom: 10px
  }

  ins-filter .date-range__cancel-apply {
    float: none;
    text-align: right
  }

  ins-filter .date-range__cancel-apply button {
    min-width: 80px;
    margin-bottom: 20px;
    font-size: 12px;
    padding: 8px;
    height: auto
  }
}

@media only screen and (max-width:420px) {

  ins-filter .filter,
  ins-filter .filter__btn-container,
  ins-filter .filter__date,
  ins-filter .filter__label {
    display: block;
    width: 100%
  }

  ins-filter .filter__label {
    margin: 0 0 10px;
    float: none
  }

  ins-filter .date-filter {
    width: 100%;
    box-sizing: border-box;
    position: relative
  }

  ins-filter .date-filter i {
    position: absolute;
    right: 10px;
    top: 10px
  }

  ins-filter .date-range__cancel-apply button {
    width: 100%;
    min-width: auto;
    margin-bottom: 20px
  }

  ins-filter .date-range.active {
    top: 0
  }
}

ins-filter-item {
  display: inline-block;
  margin-right: 15px
}

ins-filter-item .filter-item {
  cursor: pointer;
  position: relative
}

ins-filter-item .filter-item__button {
  overflow: hidden;
  position: relative;
  border-radius: var(--ins-border-radius);
  background-color: #e4e6ec;
  padding: 7px 7px;
  color: var(--ins-color-ink);
  cursor: pointer
}

ins-filter-item .filter-item__button--text {
  font-weight: 600
}

ins-filter-item .filter-item__button--option {
  font-weight: 400
}

ins-filter-item .filter-item__button--option .fas {
  margin-left: 8px;
  color: var(--ins-color-ink40);
  font-size: 12px
}

ins-filter-item .filter-item__options {
  font-size: 14px;
  box-shadow: 0 2px 4px 0 rgba(15, 21, 38, .14), 1px 1px 3px 0 rgba(140, 148, 164, .2);
  border-radius: var(--ins-border-radius);
  padding: 7px 0;
  display: none;
  position: absolute;
  min-width: 240px;
  cursor: default;
  z-index: 2;
  background-color: var(--ins-bg-color)
}

ins-filter-item .filter-item__options.active {
  display: block;
  top: 42px
}

ins-filter-item .filter-item__options>div {
  color: var(--ins-color-ink40);
  padding: 7px 15px;
  margin: 5px 0;
  cursor: pointer
}

ins-filter-item .filter-item__options>div:hover {
  background-color: #e4e6ec;
  color: #1a1d2c
}

ins-filter-item .filter-item__options>div.selected {
  color: var(--ins-color-ink);
  background-color: #fafbfc
}

@media only screen and (max-width:420px) {
  ins-filter-item {
    display: block;
    width: 100%
  }

  ins-filter-item .filter-item {
    margin-top: 0;
    margin-bottom: 16px
  }

  ins-filter-item .filter-item__button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative
  }

  ins-filter-item .filter-item__button i {
    position: absolute;
    right: 10px;
    top: 10px
  }

  ins-filter-item .filter-item__options.active {
    width: 100%;
    top: 40px
  }
}

.ift-table-wrap {
  background-color: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  font-size: 14px
}

.ift-table-wrap.no-wrap {
  box-shadow: none;
  border: none;
  border-radius: 0
}

.ift-table-wrap__title {
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family);
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 20px;
  padding: 20px;
  padding-bottom: 0;
  display: inline-block
}

.ift-table-wrap .loading-screen {
  padding: 30px 0
}

.ift-table {
  display: table;
  table-layout: fixed;
  width: 100%
}

.ift-table .ift-row {
  display: table-row
}

.ift-table .ift-row:nth-child(odd) {
  background-color: var(--ins-color-table-odd)
}

.ift-table .ift-row:nth-child(even) {
  background-color: var(--ins-color-table-even)
}

.ift-table .ift-row:hover:nth-child(odd) {
  background-color: unset
}

.ift-table .ift-cell {
  display: table-cell;
  padding: 11px 10px;
  word-break: break-word
}

.ift-table .ift-cell:first-child {
  width: 30%;
  padding-left: 20px
}

@media only screen and (max-width:768px) {
  .ift-table .ift-cell:first-child {
    width: 100%
  }
}

.ift-table .ift-cell:last-child {
  padding-left: 20px
}

.ift-table .ift-cell.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ift-table .ift-cell.overflow-ellipsis div {
  display: inline-block
}

@media only screen and (max-width:768px) {
  .ift-table .ift-cell {
    display: block;
    max-width: 100%
  }
}

.ift-table .ift-label {
  font-weight: 600
}

.ift-table .ift-content {
  font-weight: 300
}

.ins-line-chart {
  background-color: var(--ins-bg-color);
  position: relative;
  min-height: 60px
}

.ins-line-chart h2 {
  margin-top: 0;
  font-size: 24px;
  font-weight: 300;
  font-family: var(--ins-font-family)
}

.ins-line-chart svg.highcharts-root {
  font-family: var(--ins-font-family)
}

@media only screen and (max-width:736px) {
  .ins-line-chart h2 {
    position: relative
  }
}

@media only screen and (max-width:320px) {
  .ins-line-chart h2 {
    position: relative
  }
}

ins-markdown .ins-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family);
  margin-bottom: 2px
}

ins-markdown .ins-label.disabled {
  color: var(--ins-color-ink40)
}

ins-markdown .ins-label.active {
  color: var(--ins-color-blue)
}

.ins-notifications-wrap {
  position: fixed;
  width: 380px;
  right: 0;
  height: 100vh;
  top: 0;
  z-index: 9999;
  background-color: var(--ins-bg-color);
  box-sizing: border-box
}

.ins-notifications-wrap .ins-nw-header {
  padding: 22px;
  position: relative;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  box-sizing: border-box
}

.ins-notifications-wrap .ins-nw-header h1 {
  font-size: 24px;
  font-family: var(--ins-font-family);
  font-weight: 300;
  margin: 0;
  color: var(--ins-color-ink)
}

.ins-notifications-wrap .ins-nw-header .ins-nwh-close {
  position: absolute;
  top: calc(50% - 8px);
  right: 20px;
  color: var(--ins-color-ink40);
  border: none;
  background: 0 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
  cursor: pointer
}

.ins-notifications-wrap .ins-nw-items-wrap {
  padding: 20px
}

.hide-slot {
  display: none
}

.ins-notifications-item-wrap {
  box-sizing: border-box;
  padding: 14px 0 14px 38px;
  position: relative;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  top: 100vh;
  transition: top 1s ease-in-out, opacity 1s ease-in-out;
  opacity: 0
}

.ins-notifications-item-wrap.show {
  top: 0;
  opacity: 1
}

.ins-notifications-item-wrap .ins-niw-status-wrap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--ins-bg-color4);
  position: absolute;
  left: 0;
  top: 15px;
  color: var(--ins-color-white);
  font-size: 10px;
  padding: 5px 6px;
  box-sizing: border-box
}

.ins-notifications-item-wrap .ins-niw-status-wrap.green {
  background-color: var(--ins-color-green)
}

.ins-notifications-item-wrap .ins-niw-status-wrap.blue {
  background-color: var(--ins-color-blue)
}

.ins-notifications-item-wrap .ins-niw-status-wrap.red {
  background-color: var(--ins-color-red)
}

.ins-notifications-item-wrap .icon-today {
  font-size: 11px;
  margin-left: 1px
}

.ins-notifications-item-wrap .icon-settings {
  margin-left: 1px
}

.ins-notifications-item-wrap h2 {
  overflow-wrap: break-word;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  font-family: var(--ins-font-family);
  color: var(--ins-color-ink);
  margin-bottom: 16px;
  margin-top: 16px
}

.ins-notifications-item-wrap h3 {
  overflow-wrap: break-word;
  font-size: 14px;
  position: relative;
  font-weight: 400;
  font-family: var(--ins-font-family);
  color: var(--ins-color-ink);
  margin-bottom: 8px
}

.ins-notifications-item-wrap .ins-niw-duration-wrap {
  font-size: 11px;
  position: absolute;
  right: 0;
  font-weight: 400;
  color: var(--ins-color-ink40);
  top: 50%;
  margin-top: -8px
}

.ins-notifications-item-wrap .ins-niw-ago-wrap {
  font-size: 11px;
  margin-bottom: 8px;
  font-weight: 400;
  color: var(--ins-color-ink40)
}

.ins-notifications-item-wrap p {
  overflow-wrap: break-word;
  font-size: 12px;
  line-height: 20px;
  color: var(--ins-color-ink40)
}

.ins-notifications-item-wrap p a {
  color: var(--ins-color-blue);
  text-decoration: none;
  margin-left: 5px;
  font-weight: 600
}

.ins-notifications-item-wrap p a.link-only {
  margin-left: 0
}

.ins-progress-bar {
  font-family: var(--ins-font-family);
  color: var(--ins-border-ink);
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  width: 100%;
  background: 0 0;
  text-align: center;
  padding: 4px 15px;
  box-sizing: border-box;
  font-size: 12px;
  transition: width .75s;
  position: relative
}

.ins-progress-bar.hidden {
  display: none
}

.ins-progress-bar .progress {
  background-color: var(--ins-color-blue);
  margin: 0;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  transition: width .35s
}

ins-sort .insites-sortable {
  display: flex;
  flex-flow: row wrap;
  width: 100%
}

ins-sort .insites-sortable>* {
  flex: 1 0 100%
}

ins-sort>div>div>* {
  cursor: move
}

ins-sort .sortable-ghost {
  opacity: .6
}

.ins-sparkline {
  background-color: var(--ins-bg-color);
  color: var(--ins-color-ink)
}

.ins-sparkline i {
  color: var(--ins-color-blue);
  padding-right: 12px
}

.ins-sparkline h3 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  font-family: var(--ins-font-family);
  display: inline-block
}

.ins-sparkline .value {
  font-size: 55px;
  font-weight: 300;
  font-family: var(--ins-font-family);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .8px;
  line-height: 98px;
  display: block
}

.ins-sparkline .chart-container {
  width: 100%;
  height: auto
}

.ins-sparkline .description {
  color: var(--ins-color-ink40);
  font-size: 12px;
  letter-spacing: .13px;
  line-height: 17px;
  position: relative
}

.ins-sparkline .description .arrow {
  position: absolute;
  left: 5px;
  top: 3px;
  background: var(--ins-color-ink);
  display: inline-block;
  height: 9px;
  width: 2px
}

.ins-sparkline .description .arrow:before {
  position: absolute;
  content: "";
  height: 7px;
  width: 2px;
  top: -2px;
  left: -2px;
  background: var(--ins-color-ink);
  transform: rotate(51deg)
}

.ins-sparkline .description .arrow:after {
  position: absolute;
  content: "";
  height: 7px;
  width: 2px;
  top: -2px;
  left: 2px;
  background: var(--ins-color-ink);
  transform: rotate(-51deg)
}

.ins-sparkline .description.decrease,
.ins-sparkline .description.increase {
  padding-left: 18px
}

.ins-sparkline .description.increase span {
  color: var(--ins-color-green)
}

.ins-sparkline .description.increase span.arrow,
.ins-sparkline .description.increase span.arrow:after,
.ins-sparkline .description.increase span.arrow:before {
  background-color: var(--ins-color-green)
}

.ins-sparkline .description.decrease span {
  color: var(--ins-color-red)
}

.ins-sparkline .description.decrease span.arrow {
  transform: rotate(180deg)
}

.ins-sparkline .description.decrease span.arrow,
.ins-sparkline .description.decrease span.arrow:after,
.ins-sparkline .description.decrease span.arrow:before {
  background-color: var(--ins-color-red)
}

.ins-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--ins-bg-color)
}

.ins-steps ins-step:last-child {
  flex: none
}

.ins-steps ins-step:last-child .ins-step_progress-bar {
  display: none
}

.ins-steps.ins-steps_inline .ins-step_indicator {
  float: left;
  margin: 0;
  margin-right: 10px
}

.ins-steps.ins-steps_inline .ins-step_description {
  display: inline-block;
  margin-top: 0
}

ins-steps {
  display: none
}

ins-steps.hydrated {
  display: block;
  box-sizing: border-box
}

ins-steps.hydrated * {
  box-sizing: border-box
}

ins-steps.hydrated[clickable] ins-step:not([disabled]) .ins-step_details {
  cursor: pointer
}

ins-steps.hydrated[clickable] ins-step:not([disabled]) .ins-step_details:hover .ins-step_indicator {
  border-color: var(--ins-color-ink)
}

ins-steps.hydrated[clickable] ins-step:not([disabled]) .ins-step_details:hover .ins-step_description {
  color: var(--ins-color-ink)
}

@media only screen and (max-width:425px) {
  ins-step:first-child .ins-step_details {
    padding-left: 0
  }

  ins-step:last-child .ins-step_details {
    padding-right: 0
  }

  .ins-steps.ins-steps_inline .ins-step_details {
    text-overflow: clip;
    white-space: nowrap
  }
}

.ins-step {
  position: relative;
  font-family: var(--ins-font-family)
}

.ins-step_progress-bar {
  width: 100%;
  height: 2px;
  background: var(--ins-color-ink40);
  position: absolute;
  top: calc(50% - 1px);
  left: 0
}

.ins-step_details {
  text-align: center;
  float: left;
  padding: 15px 25px;
  background-color: var(--ins-bg-color);
  position: relative
}

.ins-step::after {
  content: "";
  display: block;
  clear: both
}

.ins-step_indicator {
  width: 24px;
  height: 24px;
  background-color: var(--ins-color-ink10);
  border: solid 2px var(--ins-color-ink40);
  border-radius: 50%;
  margin: 0 auto
}

.ins-step_indicator .complete-icon,
.ins-step_indicator .ins-step_dot {
  display: none
}

.ins-step_indicator.ins-step_indicator-icon {
  width: auto;
  height: auto;
  background-color: transparent;
  border: 0;
  border-radius: 0
}

.ins-step_indicator.ins-step_indicator-icon span {
  font-size: 18px
}

.ins-step_indicator span {
  font-size: 14px;
  display: block;
  color: var(--ins-color-ink40)
}

.ins-step_description {
  font-size: 12px;
  color: var(--ins-color-ink40);
  margin-top: 10px
}

.ins-step.completed .ins-step_progress-bar {
  background-color: var(--ins-color-primary)
}

.ins-step.completed .ins-step_description {
  color: var(--ins-color-primary)
}

.ins-step.completed .ins-step_indicator {
  border-color: var(--ins-color-primary);
  background: var(--ins-color-primary)
}

.ins-step.completed .ins-step_indicator span {
  display: none
}

.ins-step.completed .ins-step_indicator .complete-icon {
  display: block;
  font-size: 10px;
  margin-top: 5px;
  margin-left: -1px;
  color: var(--ins-color-white)
}

.ins-step.completed .ins-step_indicator-icon {
  border: 0;
  background: 0 0
}

.ins-step.completed .ins-step_indicator-icon .complete-icon {
  color: var(--ins-color-primary);
  font-size: 18px
}

.ins-step.completed.has-error .complete-icon {
  display: none
}

.ins-step.active .ins-step_description,
.ins-step.active .ins-step_indicator {
  color: var(--ins-color-ink)
}

.ins-step.active .ins-step_indicator {
  border-color: var(--ins-color-ink);
  background: var(--ins-bg-color)
}

.ins-step.active .ins-step_indicator .ins-step_dot {
  width: 12px;
  height: 12px;
  background: var(--ins-color-ink);
  display: block;
  border-radius: 50%;
  margin: 4px auto 0
}

.ins-step.active .ins-step_indicator span {
  color: var(--ins-color-ink)
}

.ins-step.active .ins-step_indicator i.complete-icon {
  display: none
}

.ins-step.active.has-error .ins-step_dot {
  background-color: var(--ins-color-negative)
}

.ins-step.active.has-error .ins-step_indicator,
.ins-step.has-error .ins-step_indicator {
  border-color: var(--ins-color-negative);
  background-color: var(--ins-color-red-10p)
}

.ins-step.active.has-error .ins-step_indicator-icon,
.ins-step.has-error .ins-step_indicator-icon {
  background-color: transparent
}

.ins-step.active.has-error .ins-step_indicator-icon span,
.ins-step.has-error .ins-step_indicator-icon span {
  display: block;
  color: var(--ins-color-negative)
}

.ins-step.active.has-error .ins-step_description,
.ins-step.has-error .ins-step_description {
  color: var(--ins-color-negative)
}

.ins-step.active.has-error .ins-step_progress-bar,
.ins-step.has-error .ins-step_progress-bar {
  background-color: var(--ins-color-negative)
}

ins-step {
  display: none
}

ins-step.hydrated {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  flex: 1
}

ins-step.hydrated * {
  box-sizing: border-box
}

@media only screen and (max-width:425px) {
  .ins-step_details {
    padding: 10px
  }
}

.ins-thumbnail {
  width: 100%
}

.ins-thumbnail .preview-left-btn {
  float: left
}

.ins-thumbnail .download-right-btn.has-preview {
  float: right
}

.ins-thumbnail .img-thumbnail-box {
  text-align: center;
  box-sizing: border-box;
  background: var(--ins-bg-color4)
}

.ins-thumbnail .img-thumbnail-box img {
  max-width: 120px;
  display: block;
  margin: 0 auto
}

.ins-thumbnail .img-thumbnail-box svg {
  margin: 30px 0 20px
}

.ins-thumbnail-btn {
  border-top: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  padding: 16px;
  text-align: center
}

.ins-thumbnail-btn:after {
  clear: both;
  display: block;
  content: ""
}

.ins-thumbnail-img.hover a,
.ins-thumbnail-img:hover a {
  transition: all .35s ease;
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0)
}

.ins-thumbnail-img.hover a:nth-child(2),
.ins-thumbnail-img:hover a:nth-child(2) {
  transition-delay: .1s
}

.ins-thumbnail-img.hover a:nth-child(3),
.ins-thumbnail-img:hover a:nth-child(3) {
  transition-delay: .2s
}

.ins-thumbnail-img {
  position: relative;
  transition: all .35s ease;
  width: 100%;
  background: var(--ins-bg-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  border-radius: var(--ins-border-radius);
  margin-bottom: 15px
}

.ins-thumbnail-btn>:last-child {
  margin-bottom: 0
}

.icon-small {
  width: 100%
}

.ins-thumbnail-img .ins-thumbnail-btn button.ins-button {
  padding-left: 8px;
  padding-right: 8px
}

.ins-thumbnail-description {
  width: 100%;
  color: var(--ins-color-ink);
  font-size: 12px;
  font-family: var(--ins-font-family);
  text-align: center;
  letter-spacing: 0;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box
}

.download-right-btn {
  padding-left: 0;
  padding-right: 0
}

.ins-thumbnail-description.blue {
  color: var(--ins-color-blue)
}

.no-source {
  text-align: center;
  padding: 20px 16px;
  font-size: 14px;
  color: var(--ins-color-red)
}

ins-tab {
  font-family: var(--ins-font-family)
}

ins-tab .ins-tab {
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  margin-top: 0;
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  background: var(--ins-bg-color);
  transition: all .15s
}

ins-tab .ins-tab .ins-tab-headers {
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  z-index: 0;
  list-style-type: none;
  margin: 0
}

ins-tab .ins-tab .ins-tab-headers::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: " ";
  height: 1px;
  width: 100%;
  background: var(--ins-color-ink10)
}

ins-tab .ins-tab .ins-tab-headers.scrollable {
  border-bottom: none
}

ins-tab .ins-tab .ins-tab-headers.scrollable::-webkit-scrollbar {
  width: 7px;
  height: 7px
}

ins-tab .ins-tab .ins-tab-headers.scrollable::-webkit-scrollbar-track {
  box-shadow: none;
  -webkit-box-shadow: none
}

ins-tab .ins-tab .ins-tab-headers.scrollable::-webkit-scrollbar-thumb {
  background-color: var(--ins-color-ink10);
  border-radius: 16px;
  outline: 0
}

ins-tab .ins-tab .ins-tab-headers.scrollable:hover {
  overflow-x: auto
}

ins-tab .ins-tab .ins-tab-headers.scrollable:hover+ins-tab-item {
  display: block;
  margin-top: -5px
}

ins-tab .ins-tab .ins-tab-headers.scrollable .ins-tab-header {
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

@media screen and (max-width:639px) {
  ins-tab .ins-tab .ins-tab-headers.scrollable {
    overflow-x: auto
  }

  ins-tab .ins-tab .ins-tab-headers.scrollable:hover {
    overflow-x: auto
  }

  ins-tab .ins-tab .ins-tab-headers.scrollable:hover+ins-tab-item {
    display: block;
    margin-top: 0
  }
}

ins-tab .ins-tab .ins-tab-headers .ins-tab-header {
  cursor: pointer;
  display: inline-block;
  padding: 15px 25px;
  color: var(--ins-color-ink40);
  font-size: 14px;
  line-height: 14px;
  position: relative
}

ins-tab .ins-tab .ins-tab-headers .ins-tab-header span:nth-child(2) {
  padding-left: 5px
}

@media screen and (max-width:639px) {
  ins-tab .ins-tab .ins-tab-headers .ins-tab-header {
    padding: 13px 20px
  }
}

ins-tab .ins-tab .ins-tab-headers .ins-tab-header::before {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  content: " ";
  background: var(--ins-border-color2)
}

ins-tab .ins-tab .ins-tab-headers .ins-tab-header.disabled {
  cursor: not-allowed;
  opacity: .4
}

ins-tab .ins-tab .ins-tab-headers .ins-tab-header.active,
ins-tab .ins-tab .ins-tab-headers .ins-tab-header:focus,
ins-tab .ins-tab .ins-tab-headers .ins-tab-header:hover {
  color: var(--ins-border-ink);
  position: relative
}

ins-tab .ins-tab .ins-tab-headers .ins-tab-header.active::before,
ins-tab .ins-tab .ins-tab-headers .ins-tab-header:focus::before,
ins-tab .ins-tab .ins-tab-headers .ins-tab-header:hover::before {
  content: " ";
  background: var(--ins-color-blue);
  z-index: 1;
  bottom: 0
}

ins-tab .ins-tab .ins-tab-headers .ins-tab-header.has-error::before {
  content: " ";
  background: var(--ins-color-red);
  z-index: 1;
  bottom: 0
}

ins-tab-item>div {
  display: none;
  padding: 40px 20px
}

ins-tab-item>div.no-padding {
  padding: 40px 0
}

ins-tab-item>div.active {
  display: block
}

@media screen and (max-width:639px) {
  ins-tab-item>div {
    padding: 20px 10px
  }
}

ins-tab-item>div .ins-tab {
  border: none
}

ins-tag span.ins-tag,
ins-tag span.tagged {
  border-radius: var(--ins-border-radius);
  font-family: var(--ins-font-family);
  background-color: var(--ins-bg-color3);
  padding: 6px 10px;
  min-width: 70px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: var(--ins-color-white);
  text-align: center;
  display: inline-block
}

ins-tag span.ins-tag.font-inherit,
ins-tag span.tagged.font-inherit {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

ins-tag span.ins-tag span,
ins-tag span.tagged span {
  margin-right: 3px
}

ins-tag span.ins-tag.blue,
ins-tag span.tagged.blue {
  background-color: var(--ins-color-blue)
}

ins-tag span.ins-tag.yellow,
ins-tag span.tagged.yellow {
  background-color: var(--ins-color-yellow)
}

ins-tag span.ins-tag.new,
ins-tag span.ins-tag.orange,
ins-tag span.tagged.new,
ins-tag span.tagged.orange {
  background-color: var(--ins-color-orange)
}

ins-tag span.ins-tag.closed,
ins-tag span.ins-tag.grey,
ins-tag span.tagged.closed,
ins-tag span.tagged.grey {
  background-color: var(--ins-color-grey)
}

ins-tag span.ins-tag.pending ins-tag span.ins-tag.yellow,
ins-tag span.ins-tag.pending ins-tag span.tagged.yellow,
ins-tag span.tagged.pending ins-tag span.ins-tag.yellow,
ins-tag span.tagged.pending ins-tag span.tagged.yellow {
  background-color: var(--ins-color-yellow)
}

ins-tag span.ins-tag.archived,
ins-tag span.ins-tag.disabled,
ins-tag span.ins-tag.error,
ins-tag span.ins-tag.flagged,
ins-tag span.ins-tag.invalid,
ins-tag span.ins-tag.negative,
ins-tag span.ins-tag.red,
ins-tag span.tagged.archived,
ins-tag span.tagged.disabled,
ins-tag span.tagged.error,
ins-tag span.tagged.flagged,
ins-tag span.tagged.invalid,
ins-tag span.tagged.negative,
ins-tag span.tagged.red {
  background-color: var(--ins-color-red)
}

ins-tag span.ins-tag.active,
ins-tag span.ins-tag.enabled,
ins-tag span.ins-tag.green,
ins-tag span.ins-tag.open,
ins-tag span.ins-tag.positive,
ins-tag span.ins-tag.published,
ins-tag span.ins-tag.valid,
ins-tag span.tagged.active,
ins-tag span.tagged.enabled,
ins-tag span.tagged.green,
ins-tag span.tagged.open,
ins-tag span.tagged.positive,
ins-tag span.tagged.published,
ins-tag span.tagged.valid {
  background-color: var(--ins-color-green)
}

ins-tag span.ins-tag.light,
ins-tag span.tagged.light {
  background-color: var(--ins-bg-color2);
  color: var(--ins-color-ink)
}

ins-tag span.ins-tag.light.blue,
ins-tag span.tagged.light.blue {
  background-color: var(--ins-color-blue-10p);
  color: var(--ins-color-blue)
}

ins-tag span.ins-tag.light.new,
ins-tag span.ins-tag.light.orange,
ins-tag span.tagged.light.new,
ins-tag span.tagged.light.orange {
  background-color: var(--ins-color-orange-10p);
  color: var(--ins-color-orange)
}

ins-tag span.ins-tag.light.closed,
ins-tag span.ins-tag.light.grey,
ins-tag span.tagged.light.closed,
ins-tag span.tagged.light.grey {
  background-color: var(--ins-bg-color3)
}

ins-tag span.ins-tag.light.pending,
ins-tag span.ins-tag.light.yellow,
ins-tag span.tagged.light.pending,
ins-tag span.tagged.light.yellow {
  background-color: var(--ins-color-yellow-10p);
  color: var(--ins-color-yellow)
}

ins-tag span.ins-tag.light.archived,
ins-tag span.ins-tag.light.disabled,
ins-tag span.ins-tag.light.error,
ins-tag span.ins-tag.light.flagged,
ins-tag span.ins-tag.light.invalid,
ins-tag span.ins-tag.light.negative,
ins-tag span.ins-tag.light.red,
ins-tag span.tagged.light.archived,
ins-tag span.tagged.light.disabled,
ins-tag span.tagged.light.error,
ins-tag span.tagged.light.flagged,
ins-tag span.tagged.light.invalid,
ins-tag span.tagged.light.negative,
ins-tag span.tagged.light.red {
  background-color: var(--ins-color-red-10p);
  color: var(--ins-color-red)
}

ins-tag span.ins-tag.light.active,
ins-tag span.ins-tag.light.enabled,
ins-tag span.ins-tag.light.green,
ins-tag span.ins-tag.light.open,
ins-tag span.ins-tag.light.positive,
ins-tag span.ins-tag.light.published,
ins-tag span.ins-tag.light.valid,
ins-tag span.tagged.light.active,
ins-tag span.tagged.light.enabled,
ins-tag span.tagged.light.green,
ins-tag span.tagged.light.open,
ins-tag span.tagged.light.positive,
ins-tag span.tagged.light.published,
ins-tag span.tagged.light.valid {
  background-color: var(--ins-color-green-10p);
  color: var(--ins-color-green)
}

ins-tag span.ins-tag.outlined,
ins-tag span.tagged.outlined {
  background-color: transparent;
  color: var(--ins-bg-color3);
  border: 1px solid var(--ins-bg-color3)
}

ins-tag span.ins-tag.outlined.blue,
ins-tag span.tagged.outlined.blue {
  background-color: transparent;
  color: var(--ins-color-blue);
  border: 1px solid var(--ins-color-blue)
}

ins-tag span.ins-tag.outlined.yellow,
ins-tag span.tagged.outlined.yellow {
  background-color: transparent;
  color: var(--ins-color-yellow);
  border: 1px solid var(--ins-color-yellow)
}

ins-tag span.ins-tag.outlined.new,
ins-tag span.ins-tag.outlined.orange,
ins-tag span.tagged.outlined.new,
ins-tag span.tagged.outlined.orange {
  background-color: transparent;
  color: var(--ins-color-orange);
  border: 1px solid var(--ins-color-orange)
}

ins-tag span.ins-tag.outlined.closed,
ins-tag span.ins-tag.outlined.grey,
ins-tag span.tagged.outlined.closed,
ins-tag span.tagged.outlined.grey {
  background-color: transparent;
  color: var(--ins-color-grey);
  border: 1px solid var(--ins-color-grey)
}

ins-tag span.ins-tag.outlined.pending ins-tag span.ins-tag.outlined.yellow,
ins-tag span.ins-tag.outlined.pending ins-tag span.tagged.outlined.yellow,
ins-tag span.tagged.outlined.pending ins-tag span.ins-tag.outlined.yellow,
ins-tag span.tagged.outlined.pending ins-tag span.tagged.outlined.yellow {
  background-color: transparent;
  color: var(--ins-color-yellow);
  border: 1px solid var(--ins-color-yellow)
}

ins-tag span.ins-tag.outlined.archived,
ins-tag span.ins-tag.outlined.disabled,
ins-tag span.ins-tag.outlined.error,
ins-tag span.ins-tag.outlined.flagged,
ins-tag span.ins-tag.outlined.invalid,
ins-tag span.ins-tag.outlined.negative,
ins-tag span.ins-tag.outlined.red,
ins-tag span.tagged.outlined.archived,
ins-tag span.tagged.outlined.disabled,
ins-tag span.tagged.outlined.error,
ins-tag span.tagged.outlined.flagged,
ins-tag span.tagged.outlined.invalid,
ins-tag span.tagged.outlined.negative,
ins-tag span.tagged.outlined.red {
  background-color: transparent;
  color: var(--ins-color-red);
  border: 1px solid var(--ins-color-red)
}

ins-tag span.ins-tag.outlined.active,
ins-tag span.ins-tag.outlined.enabled,
ins-tag span.ins-tag.outlined.green,
ins-tag span.ins-tag.outlined.open,
ins-tag span.ins-tag.outlined.positive,
ins-tag span.ins-tag.outlined.published,
ins-tag span.ins-tag.outlined.valid,
ins-tag span.tagged.outlined.active,
ins-tag span.tagged.outlined.enabled,
ins-tag span.tagged.outlined.green,
ins-tag span.tagged.outlined.open,
ins-tag span.tagged.outlined.positive,
ins-tag span.tagged.outlined.published,
ins-tag span.tagged.outlined.valid {
  background-color: transparent;
  color: var(--ins-color-green);
  border: 1px solid var(--ins-color-green)
}









.ins-timeline-wrap {
  background-color: var(--ins-bg-color)
}

.ins-timeline-wrap .ins-timeline-body {
  word-break: break-word
}

.ins-timeline-wrap .ins-timeline-header {
  padding: 20px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ins-timeline-wrap .ins-timeline-header h3 {
  font-family: var(--ins-font-family);
  font-size: 18px;
  margin-bottom: 0;
  color: var(--ins-color-ink)
}

.ins-timeline-wrap .ins-timeline-list {
  position: relative;
  margin: 0;
  overflow: auto;
  display: block
}

.ins-timeline-wrap .ins-timeline-list:first-child {
  padding-top: 10px
}

.ins-timeline-wrap .ins-timeline-list.loading {
  display: none
}

.ins-timeline-wrap .ins-timeline-list:before {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% + 0px);
  background: var(--ins-bg-color2);
  position: absolute;
  left: 36px;
  top: 0
}

.ins-timeline-item-wrap {
  padding: 10px 20px;
  position: relative;
  color: var(--ins-color-ink)
}

.ins-timeline-item-wrap .ins-icon-wrap {
  width: 31px;
  height: 31px;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-ink);
  border-radius: 50%;
  text-align: center;
  padding-top: 6px;
  position: absolute;
  left: 20px;
  top: calc(50% - 16px);
  background-color: var(--ins-bg-color);
  font-size: 13px;
  box-sizing: border-box
}

.ins-timeline-item-wrap .ins-icon-wrap.solid {
  background-color: var(--ins-color-ink);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.no-icon {
  width: 11px;
  height: 11px;
  left: 31px;
  top: calc(50% - 6px);
  padding: 0
}

.ins-timeline-item-wrap .ins-icon-wrap.grey {
  border-color: var(--ins-color-ink40);
  color: var(--ins-color-ink40)
}

.ins-timeline-item-wrap .ins-icon-wrap.grey.solid {
  background-color: var(--ins-color-ink40);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.pink {
  border-color: var(--ins-color-pink);
  color: var(--ins-color-pink)
}

.ins-timeline-item-wrap .ins-icon-wrap.pink.solid {
  background-color: var(--ins-color-pink);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.red {
  border-color: var(--ins-color-red);
  color: var(--ins-color-red)
}

.ins-timeline-item-wrap .ins-icon-wrap.red.solid {
  background-color: var(--ins-color-red);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.blue {
  border-color: var(--ins-color-blue);
  color: var(--ins-color-blue)
}

.ins-timeline-item-wrap .ins-icon-wrap.blue.solid {
  background-color: var(--ins-color-blue);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.green {
  border-color: var(--ins-color-green);
  color: var(--ins-color-green)
}

.ins-timeline-item-wrap .ins-icon-wrap.green.solid {
  background-color: var(--ins-color-green);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.turquoise {
  border-color: var(--ins-color-turquoise);
  color: var(--ins-color-turquoise)
}

.ins-timeline-item-wrap .ins-icon-wrap.turquoise.solid {
  background-color: var(--ins-color-turquoise);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.purple {
  border-color: var(--ins-color-purple);
  color: var(--ins-color-purple)
}

.ins-timeline-item-wrap .ins-icon-wrap.purple.solid {
  background-color: var(--ins-color-purple);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.fushcia {
  border-color: var(--ins-color-purple);
  color: var(--ins-color-purple)
}

.ins-timeline-item-wrap .ins-icon-wrap.fushcia.solid {
  background-color: var(--ins-color-purple);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.yellow {
  border-color: var(--ins-color-yellow);
  color: var(--ins-color-yellow)
}

.ins-timeline-item-wrap .ins-icon-wrap.yellow.solid {
  background-color: var(--ins-color-yellow);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-icon-wrap.orange {
  border-color: var(--ins-color-orange);
  color: var(--ins-color-orange)
}

.ins-timeline-item-wrap .ins-icon-wrap.orange.solid {
  background-color: var(--ins-color-orange);
  color: var(--ins-color-white)
}

.ins-timeline-item-wrap .ins-timeline-body {
  font-family: var(--ins-font-family);
  font-size: 14px;
  width: calc(100% - 50px);
  margin-left: 50px;
  box-sizing: border-box;
  padding: 15px;
  background: var(--ins-bg-color5);
  border-radius: var(--ins-border-radius);
  position: relative;
  white-space: no-wrap;
  display: table
}

.ins-timeline-item-wrap .ins-timeline-body .ins-timeline-heading {
  margin-bottom: 15px
}

.ins-timeline-item-wrap .ins-timeline-body .ins-timeline-heading h6 {
  font-size: 18px;
  line-height: 24px
}

.ins-timeline-item-wrap .ins-timeline-body .ins-timeline-datetime {
  margin-top: 15px
}

.ins-timeline-item-wrap .ins-timeline-body .ins-timeline-datetime p {
  font-size: 10px;
  line-height: 15px;
  margin-bottom: 0;
  color: var(--ins-color-ink40)
}

.ins-timeline-item-wrap .ins-timeline-body .ins-timeline-content {
  box-sizing: border-box
}

.ins-timeline-item-wrap .ins-timeline-body .ins-timeline-content.inline-content {
  display: table-cell;
  width: 100%;
  max-width: 85%
}

.ins-timeline-item-wrap .ins-timeline-body .ins-timeline-actions {
  box-sizing: border-box;
  text-align: right;
  margin-top: 10px
}

.ins-timeline-item-wrap .ins-timeline-body .ins-timeline-actions.inline-content {
  display: table-cell;
  padding-left: 20px;
  margin-top: 0;
  width: 100%;
  max-width: 200px;
  vertical-align: middle
}

ins-timeline-item .ins-timeline-item-wrap .ins-icon-wrap > span {
  color: attr(data-hex);
}

ins-tooltip .ins-tooltip-wrap {
  display: inline-block;
  position: relative
}

ins-tooltip .ins-tooltip-wrap .tooltip-inner {
  font-size: 14px;
  font-weight: 400
}

ins-tooltip .ins-tooltip-wrap .tooltip-label {
  transition: all .1s ease;
  vertical-align: middle;
  font-size: 9px;
  font-family: var(--ins-font-family);
  font-weight: 600;
  padding: 2.5px 6px;
  color: var(--ins-color-ink40);
  cursor: pointer;
  background-color: var(--ins-bg-color2)
}

ins-tooltip .ins-tooltip-wrap .tooltip-label i {
  font-style: normal
}

ins-tooltip .ins-tooltip-wrap .tooltip-label:hover {
  background-color: var(--ins-color-blue);
  color: var(--ins-color-white)
}

ins-tooltip .ins-tooltip-wrap .tooltip-label.circle {
  border-radius: 50%;
  display: inline-block;
  font-size: 12px;
  padding: 0;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 1.5
}

ins-tooltip .ins-tooltip-wrap .tooltip-label.rectangle {
  padding: 3px 6px
}

ins-tooltip .ins-tooltip-wrap .tooltip-label.no-background {
  background: 0 0
}

ins-tooltip .ins-tooltip-wrap .tooltip-label.no-background:hover {
  color: var(--ins-color-blue)
}

ins-tooltip .popper,
ins-tooltip .tooltip {
  position: absolute;
  background-color: var(--ins-bg-color);
  color: var(--ins-color-ink);
  border-radius: 2px;
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  padding: 16px;
  font-size: 14px;
  max-width: initial;
  z-index: 9999;
  top: -6px !important
}

@media screen and (max-width:1280px) {

  ins-tooltip .popper,
  ins-tooltip .tooltip {
    max-width: 60vw
  }
}

@media screen and (max-width:568px) {

  ins-tooltip .popper,
  ins-tooltip .tooltip {
    max-width: 50vw
  }
}

ins-tooltip .popper[x-out-of-boundaries],
ins-tooltip .tooltip[x-out-of-boundaries] {
  display: none;
  visibility: hidden
}

ins-tooltip .popper .popper__arrow,
ins-tooltip .tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 12px
}

ins-tooltip .popper .popper__arrow,
ins-tooltip .tooltip .tooltip-arrow {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-bg-color)
}

ins-tooltip .popper[x-placement^=top],
ins-tooltip .tooltip[x-placement^=top] {
  margin-bottom: 5px
}

ins-tooltip .popper[x-placement^=top] .popper__arrow,
ins-tooltip .tooltip[x-placement^=top] .tooltip-arrow {
  width: 10px;
  height: 10px;
  background: #fff;
  border: none;
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  transform: rotate(45deg);
  margin: 0;
  bottom: -5px
}

ins-tooltip .popper[x-placement^=bottom],
ins-tooltip .tooltip[x-placement^=bottom] {
  margin-top: 12px
}

ins-tooltip .popper[x-placement^=bottom] .popper__arrow,
ins-tooltip .tooltip[x-placement^=bottom] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0
}

ins-tooltip .popper[x-placement^=right],
ins-tooltip .tooltip[x-placement^=right] {
  margin-left: 6px
}

ins-tooltip .popper[x-placement^=right] .popper__arrow,
ins-tooltip .tooltip[x-placement^=right] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0
}

ins-tooltip .popper[x-placement^=left],
ins-tooltip .tooltip[x-placement^=left] {
  margin-right: 6px
}

ins-tooltip .popper[x-placement^=left] .popper__arrow,
ins-tooltip .tooltip[x-placement^=left] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0
}

ins-drawer .ins-drawer-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999
}

ins-drawer .ins-drawer-wrap ins-backdrop {
  display: none
}

ins-drawer .ins-drawer-wrap .ins-content {
  background: var(--ins-bg-color);
  position: fixed;
  z-index: 9999;
  width: 420px;
  height: 100dvh;
  max-height: 100dvh;
  padding-bottom: 95px;
  box-sizing: border-box;
  transition: right .35s;
  -webkit-transition: right .35s;
  box-shadow: 0 0 3px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
  overflow: auto;
  right: -420px
}

@media screen and (max-width:468px) {
  ins-drawer .ins-drawer-wrap .ins-content {
    width: 100%;
    right: -100%
  }
}

ins-drawer .ins-drawer-wrap .ins-content.left {
  right: initial;
  left: -420px;
  transition: left .35s;
  -webkit-transition: left .35s
}

@media screen and (max-width:468px) {
  ins-drawer .ins-drawer-wrap .ins-content.left {
    right: initial;
    width: 100%;
    left: -100%
  }
}

ins-drawer .ins-drawer-wrap .ins-content .ins-drawer-body {
  padding: 20px
}

ins-drawer .ins-drawer-wrap .ins-content .ins-drawer-body.no-padding {
  padding: 0
}

ins-drawer .ins-drawer-wrap.opened .ins-content {
  right: 0
}

ins-drawer .ins-drawer-wrap.opened .ins-content.left {
  right: initial;
  left: 0
}

ins-drawer .ins-drawer-wrap.opened ins-backdrop {
  display: block
}

ins-drawer .ins-drawer-header {
  padding: 20px;
  position: relative
}

ins-drawer .ins-drawer-header.bordered {
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

ins-drawer .ins-drawer-header.sticky {
  position: fixed;
  top: 0;
  width: inherit;
  z-index: 5;
  background: var(--ins-bg-color);
  box-sizing: border-box
}

ins-drawer .ins-drawer-header.sticky+.ins-drawer-body {
  margin-top: 80px
}

ins-drawer .ins-drawer-header h4 {
  display: inline-block;
  font-size: 24px;
  font-family: var(--ins-font-family);
  font-weight: 300;
  margin: 0;
  color: var(--ins-color-ink);
  padding-right: 20px
}

ins-drawer .ins-drawer-header h4 span {
  margin-right: 5px
}

ins-drawer .ins-drawer-header .ins-drawer-close-btn {
  position: absolute;
  outline: 0;
  top: calc(50% - 8px);
  right: 20px;
  color: var(--ins-color-ink40);
  border: none;
  background: 0 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
  cursor: pointer
}

.ins-loader-wrap {
  width: 100%;
  text-align: center
}

.ins-loader-wrap--state {
  max-width: 70px;
  margin: 0 auto 25px
}

.ins-loader-wrap--state img,
.ins-loader-wrap--state svg {
  width: 100%
}

.ins-loader-wrap--title {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ins-color-green);
  margin-top: 0
}

.ins-loader-wrap--title.warning {
  color: var(--ins-color-warning)
}

.ins-loader-wrap--title.help {
  color: var(--ins-color-information1)
}

.ins-loader-wrap--title.error {
  color: var(--ins-color-negative)
}

.ins-loader-wrap--message {
  font-size: .875rem;
  font-weight: 400;
  color: var(--ins-color-ink);
  margin-top: 16px
}

.ins-loader-wrap .cls-1 {
  fill: #323d53
}

.ins-loader-wrap .green .cls-1,
.ins-loader-wrap .positive .cls-1 {
  fill: var(--ins-color-success)
}

.ins-loader-wrap .warning .cls-1 {
  fill: var(--ins-color-warning)
}

.ins-loader-wrap .negative .cls-1 {
  fill: var(--ins-color-negative)
}

.ins-loader-wrap .information-1 .cls-1 {
  fill: var(--ins-color-information1)
}

.ins-loader-wrap .information-2 .cls-1 {
  fill: var(--ins-color-information2)
}

.ins-loader-wrap .blue .cls-1 {
  fill: var(--ins-color-blue)
}

.ins-loader-wrap .turquoise .cls-1 {
  fill: var(--ins-color-turquoise)
}

.ins-loader-wrap .grey .cls-1 {
  fill: var(--ins-color-grey)
}

@keyframes anim-rotate {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

.ins-loader-wrap .spinner {
  animation: anim-rotate 3s infinite linear
}

.ins-modal-wrap.show-modal {
  display: block;
  z-index: 9999;
  box-sizing: border-box;
  height: auto;
  width: auto;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.ins-modal-wrap.show-modal ins-card {
  position: static;
  top: 10%;
  z-index: 9999;
  min-width: 320px
}

.ins-modal-wrap.show-modal ins-card .ins-card-wrap {
  padding: 0;
  border: none;
  box-shadow: 0 8px 21px #2c3148;
  position: relative;
  left: auto;
  margin: 90px auto 1.75rem;
  height: auto;
  max-width: 600px
}

@media screen and (max-width:640px) {
  .ins-modal-wrap.show-modal ins-card .ins-card-wrap {
    margin: 1.75rem auto 1.75rem
  }
}

.ins-modal-wrap.show-modal ins-card .ins-card-wrap:hover {
  box-shadow: 0 8px 21px #2c3148
}

.ins-modal-wrap.show-modal.light ins-card .ins-card-wrap {
  box-shadow: 0 8px 21px #8c94a4
}

.ins-modal-wrap.show-modal.light ins-card .ins-card-wrap:hover {
  box-shadow: 0 8px 21px #8c94a4
}

.ins-modal-wrap.show-modal .ins-modal-head {
  box-sizing: border-box;
  position: relative;
  padding: 18px 56px 14px 20px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ins-modal-wrap.show-modal .ins-modal-head h1 {
  color: var(--ins-color-ink);
  font-size: 24px;
  font-weight: 300;
  font-family: var(--ins-font-family);
  margin-bottom: 20px;
  margin: 0
}

.ins-modal-wrap.show-modal .ins-modal-head .icon-close-1 {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px;
  cursor: pointer
}

.ins-modal-wrap.show-modal .ins-modal-head.no-heading {
  border-bottom: 0
}

.ins-modal-wrap.show-modal .ins-modal-head.no-heading .icon-close-1 {
  top: 10px;
  right: 10px
}

.ins-modal-wrap.show-modal .ins-modal-body {
  position: relative;
  width: 100%;
  height: auto;
  left: 0;
  padding: 20px;
  overflow: auto;
  box-sizing: border-box
}

.ins-modal-wrap.show-modal .ins-modal-button-wrap {
  box-sizing: border-box;
  bottom: 0;
  width: 100%;
  left: 0;
  padding: 15px 12px;
  border-top: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

ins-modal .ins-modal-wrap.show-modal:not(.full-height) .ins-modal-button-wrap {
  position: static;
}

.ins-modal-wrap.show-modal .ins-modal-button-wrap button {
  min-width: 82px;
  margin: 0 8px
}

.ins-modal-wrap.show-modal .ins-modal-button-wrap.text-center {
  text-align: center
}

.ins-modal-wrap.show-modal .ins-modal-button-wrap.text-left {
  text-align: left
}

.ins-modal-wrap.show-modal .ins-modal-button-wrap.text-right {
  text-align: right
}

.ins-modal-wrap.show-modal.auto .ins-modal-body,
.ins-modal-wrap.show-modal.auto .ins-modal-button-wrap {
  position: relative
}

.ins-modal-wrap.show-modal.no-button .ins-modal-body {
  height: auto
}

.ins-modal-wrap {
  display: none
}

ins-modal .ins-modal-wrap.show-modal.full-height.full-height {
  overflow: hidden
}

ins-modal .ins-modal-wrap.show-modal.full-height ins-card .ins-card-wrap {
  margin: 30px auto 1.75rem
}

ins-modal .ins-modal-wrap.show-modal.full-height .ins-modal-body {
  max-height: calc(100vh - 161px)
}

ins-modal .ins-modal-wrap.show-modal.full-height.has-heading:not(.no-button) .ins-modal-body {
  max-height: calc(100vh - 195px)
}

ins-modal .ins-modal-wrap.show-modal.full-height.no-button:not(.has-heading) .ins-modal-body {
  max-height: calc(100vh - 92px)
}

ins-modal .ins-modal-wrap.show-modal.full-height.no-button.has-heading .ins-modal-body {
  max-height: calc(100vh - 126px)
}

ins-modal .ins-modal-wrap.show-modal.full-height .ins-modal-button-wrap.text-center {
  position: static
}

ins-modal .ins-modal-wrap.show-modal.full-height .ins-modal-head-h1 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

@media screen and (max-width: 639px) {
  ins-modal .ins-modal-wrap.show-modal.full-height ins-card .ins-card-wrap {
    margin: 0
  }

  ins-modal .ins-modal-wrap.show-modal.full-height .ins-modal-body {
    max-height: calc(100dvh - 101px)
  }

  ins-modal .ins-modal-wrap.show-modal.full-height.has-heading:not(.no-button) .ins-modal-body {
    max-height: calc(100dvh - 135px)
  }

  ins-modal .ins-modal-wrap.show-modal.full-height.no-button:not(.has-heading) .ins-modal-body {
    max-height: calc(100dvh - 32px)
  }

  ins-modal .ins-modal-wrap.show-modal.full-height.no-button.has-heading .ins-modal-body {
    max-height: calc(100dvh - 68px)
  }
}

.ins-accordion.menu {
  font-family: "Open Sans", Arial, Helvetica, sans-serif
}

.ins-accordion.menu ins-accordion-item:first-of-type .ins-accordion-item_header {
  border-top: solid 1px #e4e6ec
}

.ins-accordion.menu .ins-accordion-item .ins-accordion-item_header {
  padding-top: 0
}

.ins-accordion.menu .ins-accordion-item .inner-head {
  border-radius: 0;
  border-top: 0
}

.ins-accordion.menu .ins-accordion-item .inner-head:hover {
  border-color: #e4e6ec;
  background-color: var(--ins-bg-color4)
}

.ins-accordion.menu .ins-accordion-item.open>.ins-accordion-item_header>.inner-head:hover {
  border-color: var(--ins-color-primary);
  background-color: var(--ins-color-primary)
}

.ins-accordion.menu .ins-accordion-item.arrow-activated .inner-head:hover {
  background-color: var(--ins-bg-color)
}

.ins-accordion.menu .ins-accordion-item_content .inner-content {
  padding: 0
}

ins-accordion-item {
  width: 100%
}

.ins-accordion-item {
  background-color: var(--ins-bg-color)
}

.ins-accordion-item_header {
  padding-top: 14px;
  outline: 0 !important
}

.ins-accordion-item_header>.inner-head {
  background-color: var(--ins-bg-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  font-size: 14px;
  line-height: 14px;
  padding: 14px;
  box-sizing: border-box;
  border-radius: 2px;
  color: #2c3148;
  position: relative;
  font-weight: 600;
  cursor: pointer
}

.ins-accordion-item_header>.inner-head a {
  text-decoration: none;
  color: #2c3148;
  padding: 0
}

.ins-accordion-item_header>.inner-head a:hover {
  text-decoration: underline
}

.ins-accordion-item_header>.inner-head:hover {
  border-color: var(--ins-color-primary)
}

.ins-accordion-item_header.disabled {
  pointer-events: none;
  cursor: not-allowed
}

.ins-accordion-item_header.disabled>.inner-head {
  border-color: var(--ins-color-ink5);
  color: var(--ins-color-ink10)
}

.ins-accordion-item_header .icon {
  margin-right: 12px
}

.ins-accordion-item_header_caret-wrap {
  position: absolute;
  top: calc(50% - 13px);
  right: 12px
}

.ins-accordion-item_header .close-icon,
.ins-accordion-item_header .open-icon {
  display: none;
  padding: 4px;
  cursor: pointer;
  font-size: 18px
}

.ins-accordion-item_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s
}

.ins-accordion-item_content .inner-content {
  padding: 14px;
  font-size: 14px;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ins-accordion-item_content .inner-content .inner-head {
  border-top: 0;
  border-left: 0;
  border-right: 0
}

.ins-accordion-item.closed>.ins-accordion-item_header>.inner-head>.ins-accordion-item_header_caret-wrap>.open-icon {
  display: block
}

.ins-accordion-item.open>.ins-accordion-item_header>.inner-head>.ins-accordion-item_header_caret-wrap>.close-icon {
  display: block
}

.ins-accordion-item.open>.ins-accordion-item_header>.inner-head {
  border-color: var(--ins-color-primary);
  background-color: var(--ins-color-primary);
  color: var(--ins-color-white);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

.ins-accordion-item.open>.ins-accordion-item_header>.inner-head a {
  color: var(--ins-color-white)
}

.ins-accordion-item.arrow-activated .inner-head {
  cursor: initial
}

.ins-accordion-item.arrow-activated .inner-head .icon-angle-down,
.ins-accordion-item.arrow-activated .inner-head .icon-angle-up {
  cursor: pointer
}

.ins-accordion-link {
  background-color: var(--ins-bg-color);
  font-size: 14px;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  line-height: 14px
}

.ins-accordion-link_link {
  display: block;
  color: #2c3148;
  font-weight: 600;
  padding: 14px;
  cursor: pointer;
  text-decoration: none
}

.ins-accordion-link_link:visited {
  color: #2c3148
}

.ins-accordion-link_link:hover {
  color: #1e86e3;
  text-decoration: underline
}

.ins-accordion-link_icon {
  margin-right: 12px;
  width: 16px;
  display: inline-block
}

.ins-accordion-link.before {
  border-bottom: 0
}

.ins-accordion-link.after {
  border-top: 0
}

.ins-accordion-link:hover {
  background-color: #f2f4f8;
  color: #1e86e3
}

.ins-accordion-link.active>.ins-accordion-link_link {
  color: #1e86e3;
  background-color: var(--ins-bg-color)
}

.ins-accordion-link.disabled {
  pointer-events: none;
  border-color: var(--ins-color-ink5);
  cursor: not-allowed
}

.ins-accordion-link.disabled>.ins-accordion-link_link {
  color: #e4e6ec
}

.ins-accordion-item_content .ins-accordion-link {
  border: none;
  border-bottom: solid 1px #e4e6ec
}

.ins-accordion-item_content .ins-accordion-link_link {
  padding: 14px
}

.ins-accordion-item_content ins-accordion-link:last-child .ins-accordion-link {
  border-bottom: none
}

.ins-backdrop-wrap {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .25);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0
}

.ins-backdrop-wrap.light {
  background: rgba(255, 255, 255, .9)
}

.ins-carousel {
  font-family: var(--ins-font-family);
  color: #2c3148
}

.ins-carousel div {
  box-sizing: border-box
}

.ins-carousel img {
  width: 100%
}

.ins-carousel_heading {
  font-size: 1.5rem;
  font-weight: 300
}

.ins-carousel_sub-heading {
  font-size: 1.25rem;
  font-weight: 300
}

.ins-carousel_body-text {
  font-size: 1rem
}

.ins-carousel_slides {
  overflow: auto;
  background-color: var(--ins-bg-color2)
}

.ins-carousel_ctrl-btns ins-button button {
  border-radius: 0 !important;
  width: 42px;
  height: 42px;
  position: absolute;
  top: calc(50% - 21px);
  z-index: 3
}

.ins-carousel_ctrl-btns ins-button button i {
  font-size: 20px;
  width: 18px;
  height: 22px
}

.ins-carousel_ctrl-btns ins-button:nth-child(1) button {
  left: 0
}

.ins-carousel_ctrl-btns ins-button:nth-child(2) button {
  right: 0
}

.ins-carousel_footer button {
  margin-bottom: 40px
}

.ins-carousel_paginations {
  margin: 0;
  list-style: none;
  width: 100%;
  text-align: center;
  left: 0;
  padding: 0
}

.ins-carousel_paginations .pagination {
  display: inline-block;
  width: 30px;
  height: 4px;
  background-color: var(--ins-bg-color3);
  margin: 0 5px;
  cursor: pointer
}

.ins-carousel_paginations .pagination.active {
  background-color: var(--ins-color-primary)
}

.ins-carousel.layout-1 .ins-carousel_head,
.ins-carousel.layout-2 .ins-carousel_head {
  text-align: center
}

.ins-carousel.layout-1 .ins-carousel_body-text,
.ins-carousel.layout-1 .ins-carousel_heading,
.ins-carousel.layout-2 .ins-carousel_body-text,
.ins-carousel.layout-2 .ins-carousel_heading {
  max-width: 998px;
  margin: 0 auto 20px
}

.ins-carousel.layout-1 .ins-carousel_footer,
.ins-carousel.layout-2 .ins-carousel_footer {
  text-align: center
}

.ins-carousel.layout-1 .ins-carousel_sub-heading,
.ins-carousel.layout-2 .ins-carousel_sub-heading {
  padding: 30px 0
}

.ins-carousel.layout-1 .ins-carousel_body,
.ins-carousel.layout-2 .ins-carousel_body {
  position: relative;
  padding: 0 84px
}

.ins-carousel.layout-1 .ins-carousel_body.no-buttons,
.ins-carousel.layout-2 .ins-carousel_body.no-buttons {
  padding: 0
}

.ins-carousel.layout-2 {
  position: relative
}

.ins-carousel.layout-2 .ins-carousel_footer,
.ins-carousel.layout-2 .ins-carousel_head {
  position: relative;
  z-index: 2
}

.ins-carousel.layout-2 .ins-carousel_head {
  padding: 40px 84px 0
}

.ins-carousel.layout-2 .ins-carousel_head h1,
.ins-carousel.layout-2 .ins-carousel_head p {
  margin-bottom: 0;
  padding-bottom: 30px
}

.ins-carousel.layout-2 .ins-carousel_sub-heading {
  margin-bottom: 0
}

.ins-carousel.layout-2 .ins-carousel_body {
  position: absolute;
  width: 100%;
  top: 0
}

.ins-carousel.layout-2 .ins-carousel_footer {
  padding: 0 84px
}

.ins-carousel.layout-2 .ins-carousel_paginations {
  position: absolute;
  bottom: 20px;
  width: 100%;
  z-index: 3
}

.ins-carousel.layout-3 {
  position: relative;
  padding: 0 84px
}

.ins-carousel.layout-3::after {
  content: "";
  clear: both;
  display: block
}

.ins-carousel.layout-3 .ins-carousel_left {
  float: left;
  width: 50%;
  padding: 30px 20px
}

.ins-carousel.layout-3 .ins-carousel_right {
  float: right;
  width: 50%
}

.ins-carousel.layout-3 .ins-carousel_sub-heading {
  margin-bottom: 30px
}

.ins-carousel.layout-3 .ins-carousel_paginations {
  text-align: left
}

@media only screen and (max-width:768px) {

  .ins-carousel.layout-1 .ins-carousel_body,
  .ins-carousel.layout-2 .ins-carousel_body,
  .ins-carousel.layout-3 .ins-carousel_body {
    padding: 0
  }

  .ins-carousel.layout-1 .ins-carousel_ctrl-btns,
  .ins-carousel.layout-2 .ins-carousel_ctrl-btns,
  .ins-carousel.layout-3 .ins-carousel_ctrl-btns {
    display: none
  }

  .ins-carousel.layout-2 .ins-carousel_head {
    padding: 20px
  }

  .ins-carousel.layout-3 {
    padding: 0
  }

  .ins-carousel.layout-3 .ins-carousel_left,
  .ins-carousel.layout-3 .ins-carousel_right {
    float: none;
    width: 100%
  }

  .ins-carousel.layout-3 .ins-carousel_left {
    padding: 20px 0
  }
}

.ins-heading-wrap {
  position: relative;
  margin-bottom: 20px
}

.ins-heading-wrap:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: var(--ins-bg-color2);
  top: calc(50% - 1px);
  left: 0;
  z-index: 0
}

.ins-heading-wrap.without-line:before {
  content: none
}

.ins-heading-wrap .label-wrap {
  position: relative;
  color: var(--ins-color-ink);
  z-index: 1;
  display: inline-block;
  padding: 10px 0;
  padding-right: 15px
}

.ins-heading-wrap .label-wrap h1,
.ins-heading-wrap .label-wrap h2,
.ins-heading-wrap .label-wrap h3,
.ins-heading-wrap .label-wrap h4,
.ins-heading-wrap .label-wrap h5,
.ins-heading-wrap .label-wrap h6 {
  font-family: var(--ins-font-family);
  font-weight: 300;
  margin-bottom: 0;
  display: inline-block
}

.ins-heading-wrap .label-wrap h1 {
  font-size: 4rem
}

.ins-heading-wrap .label-wrap h2 {
  font-size: 3.5rem
}

.ins-heading-wrap .label-wrap h3 {
  font-size: 3rem
}

.ins-heading-wrap .label-wrap h4 {
  font-size: 2rem
}

.ins-heading-wrap .label-wrap h5 {
  font-size: 1.5rem
}

.ins-heading-wrap .label-wrap h6 {
  font-size: 1.125rem
}

.ins-heading-wrap .label-wrap .icon-edit {
  margin-left: 15px;
  font-size: 14px;
  color: var(--ins-color-ink10);
  cursor: pointer;
  border: none;
  box-shadow: none;
  outline: 0;
  background-color: transparent
}

.ins-heading-wrap .label-wrap:hover .icon-edit {
  color: var(--ins-color-primary)
}

.ins-heading-wrap .input-wrap {
  display: none
}

.ins-heading-wrap .input-wrap .ins-input-wrap {
  width: calc(100% - 162px);
  margin: 0;
  margin-right: 10px;
  display: inline-block
}

.ins-heading-wrap .input-wrap input {
  margin-bottom: 0
}

.ins-heading-wrap .input-wrap-buttons {
  display: inline-block
}

.ins-heading-wrap.editing:before {
  content: none
}

.ins-heading-wrap.editing .label-wrap {
  display: none
}

.ins-heading-wrap.editing .input-wrap {
  display: block
}

.ins-gallery {
  box-sizing: border-box
}

.ins-gallery * {
  box-sizing: border-box
}

.ins-gallery.zoomable {
  width: 50%
}

.ins-gallery.zoomable .ins-gallery_lens {
  display: block;
  position: absolute;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-ink40);
  cursor: search;
  width: 120px;
  height: 80px
}

.ins-gallery.with-indicator .ins-gallery_progress {
  display: block
}

.ins-gallery_progress {
  display: none;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  font-size: 12px;
  color: var(--ins-color-ink)
}

.ins-gallery_lens {
  display: none
}

.ins-gallery_zoom {
  display: none;
  position: absolute;
  left: calc(100% + 15px);
  top: 0;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-ink5);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  width: calc(100% - 20px);
  height: 100%
}

.ins-gallery_zoom.zooming {
  display: block
}

.ins-gallery_current-image {
  text-align: center;
  margin-bottom: 20px;
  position: relative
}

.ins-gallery_current-image img {
  max-width: 100%;
  max-height: 100%;
  min-width: 280px;
  background-color: var(--ins-bg-color4);
  border: 0;
  outline: 0
}

.ins-gallery_thumbnails {
  text-align: center
}

.ins-gallery_slide {
  width: 100%
}

.ins-gallery_thumb-slider {
  position: relative
}

.ins-gallery_thumb-slider .ins-gallery_thumbnails {
  width: calc(100% - 60px);
  margin: 0 auto
}

.ins-gallery_thumb-slider .ins-gallery_thumbnails>div {
  margin: 0 auto
}

.ins-gallery_thumb-slider-next,
.ins-gallery_thumb-slider-prev {
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 100%;
  width: 30px
}

.ins-gallery_thumb-slider-next:hover .ins-gallery_next-arrow,
.ins-gallery_thumb-slider-next:hover .ins-gallery_prev-arrow,
.ins-gallery_thumb-slider-prev:hover .ins-gallery_next-arrow,
.ins-gallery_thumb-slider-prev:hover .ins-gallery_prev-arrow {
  border-color: var(--ins-color-primary)
}

.ins-gallery_thumb-slider-prev {
  left: 0
}

.ins-gallery_thumb-slider-next {
  right: 0
}

.ins-gallery_next-arrow,
.ins-gallery_prev-arrow {
  width: 12px;
  height: 12px;
  border-top: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-ink);
  position: absolute;
  top: calc(50% - 8px)
}

.ins-gallery_prev-arrow {
  border-left: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-ink);
  transform: rotate(-45deg);
  left: calc(50% - 5px)
}

.ins-gallery_next-arrow {
  border-right: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-ink);
  transform: rotate(45deg);
  right: calc(50% - 5px)
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

ins-gallery.is-loading .spinner {
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  border: 3px solid var(--ins-color-ink10);
  border-left-color: var(--ins-color-ink40);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear
}

ins-gallery.is-loading .spinner,
ins-gallery.is-loading .spinner:after {
  border-radius: 50%;
  width: 20px;
  height: 20px
}

@media only screen and (max-width:768px) {
  .ins-gallery.zoomable {
    width: 100%
  }

  .ins-gallery.zoomable .ins-gallery_zoom {
    left: 0;
    top: calc(100% + 5px);
    width: 100%
  }
}

.ins-gallery-image {
  cursor: pointer;
  width: 60px;
  height: 60px;
  overflow: hidden;
  display: inline-block;
  box-sizing: border-box;
  transition: .25s border;
  border: var(--ins-border-style) var(--ins-border-thickness) transparent
}

.ins-gallery-image:hover {
  border-color: var(--ins-color-ink)
}

.ins-gallery-image img {
  max-width: 100%;
  max-height: 100%;
  background-color: var(--ins-bg-color4);
  outline: 0;
  object-fit: cover;
  height: 60px;
  width: 60px
}

ins-gallery-image {
  display: inline-block;
  padding: 5px
}

ins-gallery-image.active .ins-gallery-image {
  border-color: var(--ins-color-primary)
}

.ins-form-field {
  font-size: 16px;
  font-family: var(--ins-font-family);
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 2px;
  border: solid 1px #e4e6ec;
  background: var(--ins-bg-color);
  width: 100%;
  display: block
}

.off-canvas-content {
  position: relative
}

body.mini ins-sidebar:not(.style-guide) .sidebar {
  width: 50px;
  overflow: initial
}

body.mini ins-sidebar:not(.style-guide) .sidebar .insites-logo-wrap img {
  width: auto;
  margin: 0 auto
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap {
  padding: 0
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .relative-wrap {
  position: relative
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap a {
  padding-top: 14px;
  padding-bottom: 15px;
  padding-left: 18px;
  padding-right: 0;
  width: 50px;
  height: 48px
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .fas {
  margin-left: 0
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .fas.icon-chevron-right,
body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .ins-sidebar-item-label {
  opacity: 0;
  transition: opacity .15s ease-in-out
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap {
  left: 50px;
  height: auto;
  box-shadow: 1px 1px 2px #aaa;
  padding: 0;
  top: -50px
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap>.btn-nav-wrap>.btn-nav>span {
  margin-left: 28px
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap div.ins-sidebar-item-wrap {
  width: 240px
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap a {
  padding: 16px;
  text-align: left;
  width: 100%
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap a span {
  opacity: 1
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap .fas {
  margin-right: 10px
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap .fas.icon-chevron-right,
body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap .ins-sidebar-item-label {
  display: inline-block
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap div.ins-sidebar-item-wrap {
  position: initial
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap .submenu-wrap {
  left: 0;
  top: 0;
  height: 100%;
  box-shadow: none
}

body.mini ins-sidebar:not(.style-guide) .sidebar ins-sidebar-item div.ins-sidebar-item-wrap.active a {
  padding-left: 15px
}

body.mini ins-sidebar:not(.style-guide) .sidebar .ins-sidebar-footer-item-wrap {
  float: none;
  display: block;
  width: 100% !important;
  position: relative
}

body.mini ins-sidebar:not(.style-guide) .sidebar .ins-sidebar-footer-item-wrap .ins-sfiw-button {
  padding: 19px 0
}

body.mini ins-sidebar:not(.style-guide) .sidebar .ins-sidebar-footer-item-wrap .menu-item-wrap {
  width: 240px;
  left: 50px;
  height: auto;
  top: auto;
  bottom: 0;
  box-shadow: 1px 2px 3px #ddd;
  padding-bottom: 0
}

body.mini ins-sidebar:not(.style-guide) .sidebar .ins-sidebar-footer-item-wrap .ins-sidebar-item-wrap {
  width: 100%
}

body.mini ins-sidebar:not(.style-guide) .sidebar .ins-sidebar-footer-item-wrap .ins-sidebar-item-wrap a {
  width: 100%
}

body.mini ins-sidebar:not(.style-guide) .sidebar .ins-sidebar-footer-item-wrap .ins-sidebar-item-wrap a .ins-sidebar-item-label {
  opacity: 1;
  display: inline-block
}

body.mini ins-sidebar:not(.style-guide) .sidebar .sidebar-action>div {
  width: 100%
}

body.mini ins-sidebar:not(.style-guide) .sidebar-items-wrap>ins-sidebar-item>.ins-sidebar-item-wrap.show-tooltip,
body.mini ins-sidebar:not(.style-guide) .sidebar-items-wrap>div>ins-sidebar-item>.ins-sidebar-item-wrap.show-tooltip {
  position: relative;
  overflow: initial;
}

body.mini ins-sidebar:not(.style-guide) .sidebar-items-wrap>ins-sidebar-item>.ins-sidebar-item-wrap.show-tooltip>.ins-sidebar-item-tooltip,
body.mini ins-sidebar:not(.style-guide) .sidebar-items-wrap>div>ins-sidebar-item>.ins-sidebar-item-wrap.show-tooltip>.ins-sidebar-item-tooltip {
  display: block
}

body.mini ins-sidebar:not(.style-guide)>.ins-sidebar.show-tooltip .ins-sidebar-item-tooltip {
  display: block
}

body.mini .ins-renderer-wrap.content {
  margin-left: 50px;
  width: calc(100% - 50px)
}

body.mini .ins-header-wrap {
  width: 100%
}

body.mini .ins-header-wrap .burger {
  margin-left: 65px
}

.sidebar .insites-logo-wrap img.icon-img {
  display: none
}

@media (max-width:1024px) {
  .sidebar {
    box-shadow: 1px 0 10px rgba(0, 0, 0, .15)
  }

  .ins-renderer-wrap.content {
    margin-left: 50px;
    width: calc(100% - 50px)
  }

  .burger {
    margin-left: 255px
  }

  body.mini .sidebar {
    position: fixed;
    box-shadow: none
  }
}

.ins-breadcrumbs {
  position: absolute;
  top: 106px;
  right: 20px
}

.ins-breadcrumbs ul {
  margin: 0;
  padding: 0;
  line-height: 10px
}

.ins-breadcrumbs ul li {
  display: inline;
  padding-right: 10px
}

.ins-breadcrumbs ul li .crumb-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--ins-color-ink)
}

.ins-breadcrumbs ul li .crumb-label.has-link:hover {
  cursor: pointer;
  color: #1e86e3
}

.ins-breadcrumbs ul li .arrow-right {
  width: 7px;
  height: 7px;
  border-top: solid 1px #8c94a4;
  border-right: solid 1px #8c94a4;
  display: inline-block;
  transform: rotate(45deg);
  margin-left: 8px
}

.ins-breadcrumbs ul li:last-of-type {
  padding-right: 0
}

.ins-breadcrumbs ul li:last-of-type a {
  color: #c9cdd4
}

.ins-breadcrumbs ul li:last-of-type .crumb-label {
  font-size: 12px;
  color: var(--ins-color-ink40)
}

.ins-breadcrumbs ul li:last-of-type .crumb-label.has-link:hover {
  cursor: text;
  color: var(--ins-color-ink40)
}

.ins-breadcrumbs ul li:last-of-type .arrow-right {
  display: none
}

.ins-breadcrumbs ul li a {
  color: var(--ins-color-ink40)
}

@media (max-width:414px) {
  .ins-breadcrumbs {
    position: initial;
    margin-bottom: 20px;
    padding-left: 3px
  }
}

ins-header .ins-header-wrap {
  width: 100%;
  height: 56px;
  background-color: var(--ins-color-ink);
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000
}

ins-header .ins-header-wrap .icon-nav {
  background: 0 0;
  border: none;
  padding: 0 10px;
  color: var(--ins-color-white);
  margin-left: 14px;
  font-size: 16px;
  cursor: pointer;
  outline: 0
}

ins-header .ins-header-wrap .icon-nav i {
  width: 16px;
  height: 16px;
  position: relative;
  display: block
}

ins-header .ins-header-wrap .icon-nav i:before {
  position: absolute;
  top: 2px;
  left: 0
}

ins-header .ins-header-wrap .icon-nav.fl {
  float: left
}

ins-header .minified-navs {
  display: none;
  position: absolute;
  top: 0;
  right: 0
}

ins-header .ins-header-buttons {
  display: inline-block;
  min-height: 22px
}

ins-header .full-width-navs {
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: flex-end
}

.ellipsis {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  float: right;
  width: 30px;
  height: 34px;
  margin-top: 11px;
  margin-right: 11px;
  transition: .5s ease-in-out;
  display: none
}

.ellipsis span {
  width: 3px;
  height: 3px;
  background: var(--ins-bg-color);
  display: block;
  margin: 5px auto;
  transition: all .5s ease-in-out;
  border-radius: 50%
}

.ellipsis.active span {
  width: 25px;
  height: 1px;
  border-radius: 0
}

.ellipsis.active span:nth-child(2) {
  opacity: 0
}

.ellipsis.active span:nth-child(1) {
  -webkit-transform: translateY(6px) rotate(45deg);
  -ms-transform: translateY(6px) rotate(45deg);
  -o-transform: translateY(6px) rotate(45deg);
  transform: translateY(6px) rotate(45deg)
}

.ellipsis.active span:nth-child(3) {
  -webkit-transform: translateY(-6px) rotate(-45deg);
  -ms-transform: translateY(-6px) rotate(-45deg);
  -o-transform: translateY(-6px) rotate(-45deg);
  transform: translateY(-6px) rotate(-45deg)
}

.burger {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  float: left;
  width: 30px;
  height: 34px;
  margin-top: 11px;
  margin-left: 255px;
  transition: .5s ease-in-out;
  animation: burger 1s ease infinite
}

.burger span {
  border-radius: 0;
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  margin: 10px 0;
  top: 6px;
  background: var(--ins-bg-color);
  transition: .5s ease-in-out;
  width: 16px;
  transform: translate(0, 0)
}

.burger span:first-child {
  top: 0;
  width: 9px;
  transform: rotate(-45deg) translate(-4px, 1px)
}

.burger span:last-child {
  top: 12px;
  width: 9px;
  transform: rotate(45deg) translate(-4px, -1px)
}

.mini .burger span:first-child,
.mini .burger span:last-child {
  width: 16px;
  transform: none
}

.displayNoneIpad {
  display: none
}

@media only screen and (max-width:630px) {
  ins-header .ins-header-wrap {
    padding-right: 0
  }

  ins-header .ins-header-wrap .ins-header-user-wrap {
    display: block;
    width: 100%
  }

  ins-header .ins-header-wrap .ins-header-user-wrap .ins-header-desktop-view {
    display: none
  }

  ins-header .ins-header-wrap .ins-header-user-wrap .ins-header-mobile-view {
    display: block
  }

  ins-header .full-width-navs {
    display: block;
    padding-top: 56px;
    margin-left: 50px;
    width: 100%;
    height: 100vh;
    background: #2c3148;
    position: relative;
    right: -100vw;
    transition: right .5s ease-in-out
  }

  ins-header .full-width-navs .icon-nav {
    display: none
  }

  ins-header .full-width-navs.active {
    right: 0
  }

  ins-header .minified-navs {
    display: block
  }

  ins-header .minified-navs .ellipsis {
    display: block
  }
}

.ins-header-user-wrap {
  display: inline-block;
  padding: 0 30px;
  position: relative;
  text-align: left;
  min-height: 22px
}

.ins-header-user-wrap .ins-card-wrap {
  padding: 0
}

.ins-header-user-wrap .icon-keyboard-arrow-up {
  display: none
}

.ins-header-user-wrap .btn-nav.ins-huw-toggle {
  margin: 0;
  padding: 0 10px;
  font-size: 14px;
  color: var(--ins-color-white);
  border: none;
  background: 0 0;
  position: relative;
  padding-right: 30px;
  outline: 0;
  cursor: pointer;
  font-family: var(--ins-font-family);
  display: block;
  opacity: .5
}

.ins-header-user-wrap .btn-nav.ins-huw-toggle .toggle-icon {
  font-size: 6px;
  position: absolute;
  top: calc(50% - 3px);
  right: 10px
}

.ins-header-user-wrap .ins-header-user-options {
  width: 130%;
  min-width: 174px;
  position: absolute;
  right: 26px;
  top: 21px;
  box-sizing: border-box;
  padding: 10px;
  padding-top: 30px;
  display: none;
  z-index: 9999
}

.ins-header-user-wrap .ins-header-user-options ul {
  padding: 0;
  margin: 10px 0;
  list-style: none
}

.ins-header-user-wrap .ins-header-user-options ul li {
  padding: 10px 20px 10px 50px;
  position: relative
}

.ins-header-user-wrap .ins-header-user-options ul li a {
  text-decoration: none;
  color: var(--ins-color-ink40)
}

.ins-header-user-wrap .ins-header-user-options ul li a [class^=icon-] {
  margin-right: 15px;
  left: 20px;
  top: 14px;
  position: absolute
}

.ins-header-user-wrap .ins-header-user-options ul li:hover {
  background-color: #e4e6ec
}

.ins-header-user-wrap .ins-header-user-options:hover {
  display: block
}

.ins-header-user-wrap.active .btn-nav.ins-huw-toggle {
  opacity: 1
}

.ins-header-user-wrap:hover .btn-nav.ins-huw-toggle {
  opacity: 1
}

.ins-header-user-wrap:hover .icon-keyboard-arrow-down {
  display: none
}

.ins-header-user-wrap:hover .icon-keyboard-arrow-up {
  display: block
}

.ins-header-user-wrap:hover .ins-header-user-options {
  display: block
}

.ins-header-mobile-view {
  display: none
}

.ins-header-mobile-view .ins-header-mobile-view__logout,
.ins-header-mobile-view .ins-header-mobile-view__user {
  padding: 15px 0
}

.ins-header-mobile-view .ins-header-mobile-view__logout a,
.ins-header-mobile-view .ins-header-mobile-view__logout i,
.ins-header-mobile-view .ins-header-mobile-view__user a,
.ins-header-mobile-view .ins-header-mobile-view__user i {
  color: #fff;
  font-size: 14px;
  font-family: var(--ins-font-family);
  display: inline-block;
  vertical-align: middle
}

.ins-header-mobile-view .ins-header-mobile-view__logout i,
.ins-header-mobile-view .ins-header-mobile-view__user i {
  padding-right: 20px
}

@media only screen and (max-width:630px) {
  .ins-header-mobile-view {
    display: block
  }
}

ins-instances .ins-instances-wrap {
  display: inline-block;
  position: relative;
  margin-top: 3px
}

ins-instances .ins-instances-wrap.sub-item-active a.ins-instances-item {
  display: none
}

ins-instances .ins-instances-wrap:after,
ins-instances .ins-instances-wrap:before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 1px;
  height: 54px;
  background-color: #25293f
}

ins-instances .ins-instances-wrap:after {
  left: 1px;
  background-color: #363c58
}

ins-instances .ins-card-wrap {
  padding: 0
}

ins-instances .ins-input-wrap {
  padding: 20px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

ins-instances .ins-input-wrap input {
  margin-bottom: 0
}

ins-instances .ins-instances-options {
  display: none;
  position: absolute;
  z-index: 9999;
  width: 200%;
  min-width: 230px;
  right: 0;
  top: 24px;
  padding: 29px 0
}

ins-instances .ins-instances-options .scroll-wrap {
  max-height: 220px;
  overflow: auto;
  padding: 20px 0
}

ins-instances .ins-instances-options .scroll-wrap::-webkit-scrollbar {
  width: 7px
}

ins-instances .ins-instances-options .scroll-wrap::-webkit-scrollbar-track {
  box-shadow: none;
  -webkit-box-shadow: none
}

ins-instances .ins-instances-options .scroll-wrap::-webkit-scrollbar-thumb {
  background-color: var(--ins-bg-color2);
  border-radius: 16px;
  outline: 0
}

ins-instances .ins-instances-options:hover {
  display: block
}

ins-instances .active-instance {
  padding-left: 30px;
  min-height: 30px;
  display: flex;
  align-items: initial
}

ins-instances .active-instance img {
  background-color: var(--ins-bg-color);
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  margin-right: 15px;
  margin-bottom: -10px;
  max-width: 100%;
  display: inline-block
}

ins-instances .active-instance .icons-wrap {
  display: none;
  font-size: 6px;
  opacity: .5;
  color: var(--ins-color-white);
  position: absolute;
  right: 0;
  margin: 0;
  top: calc(50% - 9px)
}

ins-instances .active-instance .icons-wrap .icon-keyboard-arrow-up {
  display: block;
  margin: 4px
}

ins-instances .active-instance .icons-wrap .icon-keyboard-arrow-up.down {
  transform: rotate(180deg)
}

ins-instances .active-instance button {
  border: 0;
  background: 0 0;
  color: var(--ins-color-white);
  font-size: 14px;
  font-family: var(--ins-font-family);
  outline: 0;
  cursor: pointer;
  padding: 0;
  position: relative
}

ins-instances .active-instance button .active-instance-label {
  opacity: .5
}

ins-instances .active-instance:hover+.ins-instances-options {
  display: block
}

ins-instances .active-instance:hover .active-instance-label,
ins-instances .active-instance:hover .icons-wrap {
  opacity: 1
}

ins-instances .active-instance.has-items {
  padding-right: 30px
}

ins-instances .active-instance.has-items .icons-wrap {
  display: block
}

@media only screen and (max-width:630px) {
  ins-instances .ins-instances-wrap {
    display: block;
    width: 100%
  }

  ins-instances .ins-instances-wrap:after,
  ins-instances .ins-instances-wrap:before {
    width: 100%;
    height: 1px
  }

  ins-instances .ins-instances-wrap:after {
    top: 1px
  }

  ins-instances .active-instance {
    padding-left: 20px;
    text-align: left
  }

  ins-instances .active-instance button {
    height: 65px
  }

  ins-instances .active-instance button .active-instance-label {
    opacity: 1
  }

  ins-instances .active-instance.has-items .icons-wrap {
    display: none
  }

  ins-instances .ins-instances-options {
    display: none !important
  }
}

.ins-instances-item-wrap {
  text-align: left;
  margin-right: 2px
}

.ins-instances-item-wrap.sub-item-active .instance-sub-item__container {
  display: block
}

.ins-instances-item-wrap .instance-sub-item__container {
  display: none
}

.ins-instances-item-wrap a {
  display: block;
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--ins-color-ink40);
  font-size: 16px;
  position: relative
}

.ins-instances-item-wrap a .logo-wrap {
  float: left;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  border-radius: 50%;
  margin-right: 15px;
  background-color: var(--ins-bg-color5);
  overflow: hidden
}

.ins-instances-item-wrap a .logo-wrap img {
  width: 100%
}

.ins-instances-item-wrap a .instance-label {
  float: left;
  margin-top: 3px
}

.ins-instances-item-wrap a .icon-chevron-right {
  position: absolute;
  font-size: 10px;
  top: calc(50% - 5px);
  right: 20px;
  opacity: 0
}

.ins-instances-item-wrap a:after {
  clear: both;
  content: "";
  display: block
}

.ins-instances-item-wrap a:hover {
  color: var(--ins-color-ink);
  background-color: var(--ins-bg-color2)
}

.ins-instances-item-wrap .instance-sub-item__container a {
  color: var(--ins-color-primary);
  font-weight: 600;
  padding-left: 29px
}

.ins-instances-item-wrap .instance-sub-item__container a:hover {
  background-color: unset
}

.ins-instances-item-wrap .instance-sub-item__container a i.fas {
  font-size: 10px;
  margin-right: 20px;
  vertical-align: 1px
}

.ins-renderer-wrap {
  padding: 63px 0 0 20px;
  box-sizing: border-box;
  background: #fafbfc
}

.ins-renderer-wrap.content {
  width: calc(100% - 240px);
  min-height: calc(100vh - 75px);
  margin-left: 240px;
  padding-top: 75px;
  background-color: #fafbfc;
  transition: margin .5s ease-in-out, width .5s ease-in-out
}

.ins-renderer-wrap.content.no-sidebar {
  width: 100%;
  margin-left: 0
}

.ins-renderer-wrap .ins-renderer__slot-wrap {
  padding-right: 20px;
  padding-bottom: 40px
}

.ins-renderer-wrap .ins-renderer__iframe-wrap {
  display: none
}

.ins-renderer-wrap.app .ins-renderer__iframe-wrap {
  display: block
}

.ins-renderer-wrap.app .ins-renderer__slot-wrap {
  display: none
}

.ins-renderer-wrap__title {
  opacity: .87;
  color: var(--ins-color-ink);
  font-size: 30px;
  font-weight: 300;
  margin: 10px 0;
  font-family: var(--ins-font-family);
  position: relative;
  min-height: 44px
}

@media only screen and (max-width:768px) {
  .ins-renderer-wrap__title {
    padding: 0
  }
}

.ins-renderer-wrap iframe {
  border: none;
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  box-sizing: border-box
}

@media only screen and (max-width:320px) {
  .ins-renderer-wrap__title h2 {
    padding: 0 10px
  }
}

/* .ins-sidebar .ins-sidebar-tooltip {
  display: none;
}

.ins-sidebar.show-tooltip .ins-sidebar-tooltip {
  position: fixed;
  background: #2c3148;
  color: var(--ins-color-white);
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 2px;
  z-index: 9999
} */

.sidebar {
  width: 240px;
  height: 100vh;
  position: fixed;
  top: 0;
  background-color: #f5f6f8;
  overflow: hidden;
  transition: .5s ease-in-out;
  z-index: 1050
}

.sidebar .insites-logo-wrap {
  width: 100%;
  height: 56px;
  background-color: #1a1d2c;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
  position: relative;
  z-index: 2001;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center
}

.sidebar .insites-logo-wrap img {
  max-width: 180px;
  max-height: 46px;
  margin: auto;
  margin: 0 auto;
  transition: margin .5s ease-in-out;
  box-sizing: border-box
}

.sidebar .insites-logo-wrap img.ins-hide {
  display: none
}

.sidebar .sidebar-items-wrap {
  position: relative;
  padding: 16px 0;
  height: calc(100% - 109px);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar .sidebar-items-wrap>ins-sidebar-item>.no-icon .fas,
.sidebar .sidebar-items-wrap>div>ins-sidebar-item>.no-icon .fas {
  border: solid 1px #1e86e3;
  height: 12px;
  width: 12px;
  margin-right: 19px
}

.sidebar .sidebar-action {
  background-color: #e4e6ec;
  width: 100%;
  position: absolute;
  bottom: 0
}

.sidebar .sidebar-action>div {
  height: 48px;
  width: calc(100% / 3);
  display: inline-block;
  padding: 13px;
  text-align: center
}

.sidebar .sidebar-action>div:hover {
  color: var(--ins-color-white);
  background-color: var(--ins-color-ink);
  cursor: pointer
}

ins-sidebar-item div.ins-sidebar-item-wrap {
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden
}

ins-sidebar-item div.ins-sidebar-item-wrap a {
  color: var(--ins-color-ink40);
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding-right: 16px;
  padding-left: 18px;
  padding-top: 14px;
  padding-bottom: 15px;
  position: relative;
  box-sizing: border-box;
  width: 240px;
  height: 48px;
  transition: width .5s ease-in-out
}

ins-sidebar-item div.ins-sidebar-item-wrap a .fas {
  color: #1e86e3;
  margin-right: 13px;
  display: inline-block;
  width: 18px;
  position: relative;
  top: 4px;
  vertical-align: top
}

ins-sidebar-item div.ins-sidebar-item-wrap a:hover {
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family);
  font-size: 14px;
  background-color: #e4e6ec
}

ins-sidebar-item div.ins-sidebar-item-wrap a .ins-sidebar-item-label {
  opacity: 1;
  transition: opacity .35s ease-in-out;
  transition-delay: .5s;
  display: inline-block;
  width: 83%
}

ins-sidebar-item div.ins-sidebar-item-wrap a .ins-sidebar-item-label .ext-icon {
  margin-left: 16px
}

ins-sidebar-item div.ins-sidebar-item-wrap .fas.icon-chevron-right {
  font-size: 10px;
  color: var(--ins-color-ink40);
  position: absolute;
  top: calc(50% - 5px);
  right: 0;
  opacity: 1;
  transition: opacity .5s ease-in-out
}

ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap {
  display: none;
  position: absolute;
  background-color: var(--ins-bg-color4);
  box-sizing: border-box;
  width: 240px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1001;
  padding: 16px 0
}

ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap.is-active {
  display: block;
  overflow: auto
}

ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap .btn-nav-wrap {
  padding: 16px
}

ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap .btn-nav-wrap .btn-nav {
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 14px;
  color: #1e86e3;
  font-size: 14px;
  font-weight: 600;
  display: block;
  padding: 2px 0
}

ins-sidebar-item div.ins-sidebar-item-wrap .submenu-wrap .btn-nav-wrap .btn-nav .fas {
  color: #1e86e3;
  margin-right: 16px;
  display: inline-block;
  width: 18px
}

ins-sidebar-item div.ins-sidebar-item-wrap .hide-slot {
  display: none
}

ins-sidebar-item div.ins-sidebar-item-wrap.active>.ins-ripple-button>a {
  background-color: #e4e6ec;
  color: var(--ins-color-ink);
  font-weight: 600;
  border-left: solid 3px #1e86e3;
  box-sizing: border-box;
  padding-left: 15px
}

html {
  -webkit-tap-highlight-color: #000
}

.ins-ripple-button {
  width: 100%;
  -webkit-appearance: none;
  position: relative;
  background: 0 0;
  display: block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all .35s ease-in-out;
  text-align: left
}

.ins-ripple-button:focus,
.ins-ripple-button:hover {
  outline: 0;
  text-decoration: none
}

.ins-ripple-button:not(:disabled) {
  cursor: pointer
}

.ins-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: 0 0
}

.ins-ripple__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #d2d4d8
}

.ins-ripple.activated .ins-ripple__circle {
  -webkit-animation: a-ripple .5s ease-in;
  animation: a-ripple .5s ease-in
}

@-webkit-keyframes a-ripple {
  0% {
    opacity: 0
  }

  25% {
    opacity: 1
  }

  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0
  }
}

@keyframes a-ripple {
  0% {
    opacity: 0
  }

  25% {
    opacity: 1
  }

  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0
  }
}

.ripple-wave {
  position: absolute;
  background: rgba(255, 255, 255, .45);
  border-radius: 100%;
  transform: scale(0);
  pointer-events: none
}

.ripple-wave.show {
  animation: ripple .75s ease-out
}

@-webkit-keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0
  }
}

@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0
  }
}

.ins-sidebar-item-tooltip {
  display: none;
  position: fixed;
  white-space: nowrap;
  opacity: 1;
  background: #2c3148;
  color: var(--ins-color-white);
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 2px;
  height: auto;
  opacity: .95;
  z-index: 9999
}

.ins-sidebar-footer-wrap {
  background-color: #e4e6ec;
  width: 240px;
  position: fixed;
  bottom: 0;
  transition: width .5s ease-in-out;
  z-index: 1001
}

.ins-sidebar-footer-wrap .ins-sidebar-footer-menu-toggle {
  display: none
}

.mini .sidebar .ins-sidebar-footer-wrap {
  width: 50px
}

.mini .sidebar .ins-sidebar-footer-menu-toggle {
  display: block
}

.mini .sidebar .slot-wrapper {
  display: none
}

.ins-sidebar-footer-item-wrap {
  float: left;
  height: 53px;
  width: 100%
}

.ins-sidebar-footer-item-wrap .ins-sfiw-button {
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 20px 0 18px;
  color: var(--ins-color-ink);
  outline: 0;
  cursor: pointer;
  border: none
}

.ins-sidebar-footer-item-wrap .ins-sfiw-button:active,
.ins-sidebar-footer-item-wrap .ins-sfiw-button:hover {
  background: #2c3148;
  color: var(--ins-color-white)
}

.ins-sidebar-footer-item-wrap {
  float: left;
  height: 53px
}

.ins-sidebar-footer-item-wrap .ins-sfiw-button {
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 20px 0 18px;
  color: var(--ins-color-ink);
  outline: 0;
  cursor: pointer
}

.ins-sidebar-footer-item-wrap .ins-sfiw-button:active,
.ins-sidebar-footer-item-wrap .ins-sfiw-button:hover {
  background: #2c3148;
  color: var(--ins-color-white)
}

.ins-sidebar-footer-item-wrap .ins-sfiw-button-back {
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 14px;
  color: #1e86e3;
  font-size: 14px;
  display: block;
  padding: 16px
}

.ins-sidebar-footer-item-wrap .ins-sfiw-button-back .fas {
  color: #1e86e3;
  margin-right: 16px;
  display: inline-block;
  width: 18px
}

.ins-sidebar-footer-item-wrap .menu-item-wrap {
  display: none;
  position: absolute;
  z-index: 1002;
  top: calc(-100vh + 110px);
  height: calc(100vh - 110px);
  padding: 16px 0;
  background: #f5f6f8
}

.ins-sidebar-footer-item-wrap .menu-item-wrap.visible {
  display: block;
  overflow: auto
}

.ibt-table-wrap {
  background-color: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color)
}

.ibt-table-wrap__title {
  color: #1a1d2c;
  font-size: 24px;
  font-weight: 300;
  font-family: var(--ins-font-family);
  margin-bottom: 20px;
  padding: 20px;
  padding-bottom: 0;
  display: inline-block
}

.ibt-table-wrap .ibt-table-header-wrap {
  position: relative
}

.ibt-table-wrap .ins-searchbar-container {
  position: absolute;
  min-width: 350px;
  right: 20px;
  top: calc(50% - 20px)
}

.ibt-table-wrap .ins-searchbar-container.left {
  left: 20px
}

.ibt-table-wrap__settings {
  background-color: var(--ins-bg-color);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.ibt-table-wrap__settings:after {
  content: "";
  display: block;
  clear: both
}

.ibt-table-wrap .ibt-table-action-container,
.ibt-table-wrap .pagination-wrap {
  padding: 15px 20px;
  box-sizing: border-box
}

.ibt-table-wrap .ibt-table-action-container {
  align-items: center;
  width: auto;
  flex: 1;
  display: flex
}

.ibt-table-wrap .pagination-wrap {
  flex-direction: row;
  width: auto;
  float: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 14px ​20px;
  padding-right: 20px
}

.ibt-table-wrap .pagination-wrap.full {
  width: 100%;
  justify-content: end;
  float: none
}

.ibt-table-wrap .ibt-table-action-container .ins-select-wrap.buttonise {
  margin-right: 10px;
  min-width: 111px;
  margin-bottom: 0
}

.ibt-table-wrap .ibt-table-action-container .ins-select-wrap.buttonise .ins-select-label-wrap {
  padding: 3px 5px;
  width: 100%;
  box-sizing: border-box
}

.ibt-table-wrap .ibt-table-action-container .ins-select-wrap.buttonise .ins-select-label-wrap span {
  float: left;
  margin-top: 2px;
  font-weight: 600
}

.ibt-table-wrap .ibt-table-action-container .ins-select-wrap.buttonise .ins-select-options-wrap {
  width: 100%;
  min-width: auto
}

.ibt-table-wrap .pagination-wrap {
  text-align: right
}

.ibt-table-wrap .pagination-wrap>div {
  display: inline-block
}

.ibt-table-wrap .pagination-wrap>.ibt-table-wrap__prev-next {
  display: flex;
  align-items: center
}

.ibt-table-wrap__page,
.ibt-table-wrap__pagination,
.ibt-table-wrap__tablePage {
  color: var(--ins-color-ink40);
  font-size: 12px
}

.ibt-table-wrap__page {
  margin: 0 30px
}

.ibt-table-wrap__prev-next button {
  padding: 4px;
  cursor: pointer;
  color: var(--ins-color-ink40);
  outline: 0;
  background-color: transparent;
  border: none;
  font-size: 16px;
  height: 26px
}

.ibt-table-wrap__prev-next button:hover {
  color: var(--ins-color-primary);
  background-color: var(--ins-color-ink10)
}

.ibt-table-wrap__prev-next button.next,
.ibt-table-wrap__prev-next button.prev {
  font-size: 15px;
  min-width: 24px
}

.ibt-table-wrap__prev-next button:disabled {
  cursor: not-allowed;
  opacity: .5
}

.ibt-table-wrap__prev-next button:disabled:hover {
  color: var(--ins-color-ink40);
  background-color: transparent
}

.ibt-table-wrap__prev-next button.page {
  font-size: 12px;
  min-width: 24px
}

.ibt-table-wrap__prev-next button.page.active {
  color: var(--ins-color-primary)
}

.ibt-table-wrap__prev-next button.page.active:disabled {
  color: var(--ins-color-primary);
  opacity: 1
}

.ibt-table-wrap__pagination {
  position: relative;
  margin-left: auto
}

.ibt-table-wrap__pagination--option {
  color: var(--ins-color-ink40);
  border: none;
  font-family: var(--ins-font-family);
  padding: 2px;
  padding-right: 15px;
  appearance: none;
  outline: 0;
  display: inline;
  background-image: none;
  font-size: 12px;
  margin: 0;
  width: auto;
  height: auto;
  position: relative;
  z-index: 2;
  background-color: transparent
}

.ibt-table-wrap__pagination--option:focus {
  border: none;
  box-shadow: none;
  background-color: transparent
}

.ibt-table-wrap__pagination span {
  margin-right: 10px
}

.ibt-table-wrap__pagination:before {
  content: "";
  width: 1px;
  height: 1px;
  border-top: solid 4px #8c94a4;
  border-left: solid 4px transparent;
  border-right: solid 4px transparent;
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 1
}

.ibt-table-wrap .pagination-wrap * {
  font-family: var(--ins-font-family);
}

.ibt-table-wrap .ibt-table {
  display: table;
  table-layout: fixed;
  width: 100%;
  font-family: var(--ins-font-family)
}

.ibt-table-wrap .ibt-table_tr {
  display: table-row;
  height: 64px
}

.ibt-table-wrap .ibt-table_tr:nth-child(even) {
  background-color: var(--ins-color-table-even)
}

.ibt-table-wrap .ibt-table_tr:hover:nth-child(odd) {
  background-color: var(--ins-color-table-odd)
}

.ibt-table-wrap .ibt-table_tr .action-wrap {
  opacity: 0;
  pointer-events: none
}

.ibt-table-wrap .ibt-table_tr:hover .action-wrap {
  opacity: 1;
  pointer-events: auto
}

.ibt-table-wrap .ibt-table_tr:hover .action-wrap .action-item {
  cursor: pointer
}

.ibt-table-wrap .ibt-table_td,
.ibt-table-wrap .ibt-table_th {
  display: table-cell;
  padding: 11px 10px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  color: var(--ins-color-ink);
  font-size: 14px;
  word-wrap: break-word
}

.ibt-table-wrap .ibt-table_td.checkbox,
.ibt-table-wrap .ibt-table_th.checkbox {
  width: 50px;
  position: relative;
  box-sizing: border-box
}

.ibt-table-wrap .ibt-table_td.checkbox .ins-checkbox-wrap,
.ibt-table-wrap .ibt-table_th.checkbox .ins-checkbox-wrap {
  padding: 0;
  height: 16px;
  text-align: right
}

.ibt-table-wrap .ibt-table_td.checkbox input[type=checkbox],
.ibt-table-wrap .ibt-table_th.checkbox input[type=checkbox] {
  margin: 0 auto 0;
  display: block
}

.ibt-table-wrap .ibt-table_td.text-right,
.ibt-table-wrap .ibt-table_th.text-right {
  text-align: right
}

.ibt-table-wrap .ibt-table_td:first-child,
.ibt-table-wrap .ibt-table_th:first-child {
  padding-left: 20px
}

.ibt-table-wrap .ibt-table_td:first-child.checkbox,
.ibt-table-wrap .ibt-table_th:first-child.checkbox {
  padding-left: 20px
}

.ibt-table-wrap .ibt-table_td:last-child,
.ibt-table-wrap .ibt-table_th:last-child {
  padding-right: 20px
}

.ibt-table-wrap .ibt-table_td.overflow-ellipsis,
.ibt-table-wrap .ibt-table_th.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ibt-table-wrap .ibt-table_td.overflow-ellipsis .input-label-wrap,
.ibt-table-wrap .ibt-table_th.overflow-ellipsis .input-label-wrap {
  display: inline-block
}

.ibt-table-wrap .ibt-table_td.editable,
.ibt-table-wrap .ibt-table_th.editable {
  overflow: initial
}

.ibt-table-wrap .ibt-table_td.editable .input-wrap,
.ibt-table-wrap .ibt-table_th.editable .input-wrap {
  display: none
}

.ibt-table-wrap .ibt-table_td.editable .input-wrap input,
.ibt-table-wrap .ibt-table_th.editable .input-wrap input {
  margin-bottom: 0;
  margin: 10px 0;
  padding: 6px;
  height: auto
}

.ibt-table-wrap .ibt-table_td.editable .input-wrap .ins-form-field-wrap,
.ibt-table-wrap .ibt-table_th.editable .input-wrap .ins-form-field-wrap {
  margin-bottom: 0
}

.ibt-table-wrap .ibt-table_td.editable .input-wrap .ins-input-wrap input,
.ibt-table-wrap .ibt-table_th.editable .input-wrap .ins-input-wrap input {
  margin: 0
}

.ibt-table-wrap .ibt-table_td.editable .input-wrap .ins-select-wrap,
.ibt-table-wrap .ibt-table_th.editable .input-wrap .ins-select-wrap {
  margin-bottom: 0
}

.ibt-table-wrap .ibt-table_td.editable .input-wrap .ins-select-wrap input,
.ibt-table-wrap .ibt-table_th.editable .input-wrap .ins-select-wrap input {
  margin: 0;
  padding: 9px 6px 8px
}

.ibt-table-wrap .ibt-table_td.editable .input-wrap .ins-select-wrap .ins-select-value-wrap,
.ibt-table-wrap .ibt-table_th.editable .input-wrap .ins-select-wrap .ins-select-value-wrap {
  min-height: 33px
}

.ibt-table-wrap .ibt-table_td.editable .input-wrap .numInput.cur-year,
.ibt-table-wrap .ibt-table_th.editable .input-wrap .numInput.cur-year {
  margin: 0
}

.ibt-table-wrap .ibt-table_td.editable .ins-datepicker-wrap,
.ibt-table-wrap .ibt-table_th.editable .ins-datepicker-wrap {
  margin-bottom: 0
}

.ibt-table-wrap .ibt-table_th {
  font-weight: 600;
  vertical-align: middle
}

.ibt-table-wrap .ibt-table_th .label-wrap.sortable {
  cursor: pointer
}

.ibt-table-wrap .ibt-table_th:hover .icon-arrow-up {
  display: inline
}

.ibt-table-wrap .ibt-table_td {
  position: relative;
  vertical-align: middle
}

.ibt-table-wrap .ibt-table_td.has-row-actions:first-child {
  vertical-align: middle !important
}

.ibt-table-wrap .ibt-table_td.has-row-actions {
  vertical-align: top !important
}

.ibt-table-wrap .ibt-table_td.has-image {
  padding-left: 52px
}

.ibt-table-wrap .ibt-table_td.has-image .img-wrap {
  position: absolute;
  left: 10px;
}

.ibt-table-wrap .ibt-table_td.has-image .img-wrap img {
  width: 100%
}

.ibt-table-wrap .ibt-table_td.has-image .action-wrap {
  position: relative;
  bottom: 2px;
  display: block !important
}

.ibt-table-wrap .ibt-table_td:first-child.has-image {
  padding-left: 62px
}

.ibt-table-wrap .ibt-table_td:first-child.has-image .img-wrap {
  left: 20px
}

.ibt-table-wrap .ibt-table_td.has-image.checkbox,
.ibt-table-wrap .ibt-table_td:first-child.has-image.checkbox {
  padding-left: 10px;
  vertical-align: middle !important
}

.ibt-table-accordion .ibt-table-accordion_row-td .tagged.multiple-tags .ibt-tag,
.ibt-table-wrap .ibt-table_td.tagged.multiple-tags .input-label-wrap .ibt-tag {
  margin-right: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.ibt-table-accordion .ibt-table-accordion_row-td .tagged.multiple-tags .ibt-tag:last-child,
.ibt-table-wrap .ibt-table_td.tagged.multiple-tags .input-label-wrap .ibt-tag:last-child {
  margin-right: 0
}

/* TW#26847666: colour classes for a hasTag cell. ins-table puts row["<Label>_tagClass"] on the
   cell (tagged green | red | yellow | orange | blue | grey), so a screen colours a status pill
   without its status word having to be on the word-keyed lists in dist/styles/app.min.css.
   Same look as those v6 pills: a light tint behind the alert colour. */
.ibt-table-wrap .ibt-table_td.tagged.green span,
.ibt-table-wrap .ibt-table_td.tagged.positive span {
  background-color: var(--iia-alert-positive-light, #04880114);
  color: var(--iia-alert-positive, #048801)
}

.ibt-table-wrap .ibt-table_td.tagged.red span,
.ibt-table-wrap .ibt-table_td.tagged.negative span {
  background-color: var(--iia-alert-negative-light, #DF1F1F14);
  color: var(--iia-alert-negative, #DF1F1F)
}

.ibt-table-wrap .ibt-table_td.tagged.yellow span,
.ibt-table-wrap .ibt-table_td.tagged.orange span {
  background-color: var(--iia-alert-warning-light, #FBAC1314);
  color: var(--iia-alert-warning, #EC9C00)
}

.ibt-table-wrap .ibt-table_td.tagged.blue span {
  background-color: var(--iia-main-light, #436CF214);
  color: var(--iia-main, #436CF2)
}

.ibt-table-wrap .ibt-table_td.tagged.grey span {
  background-color: var(--iia-ui-3, #DFDFDF);
  color: var(--iia-text-1, #000000)
}

.ibt-table-wrap .ibt-image {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.ibt-table-accordion .ibt-image {
  max-width: 250px;
  height: auto;
  display: block;
  object-fit: contain;
}

.ibt-table-wrap .ibt-table_tr.edit-mode .editable .input-wrap {
  display: block
}

.ibt-table-wrap .ibt-table_tr.edit-mode .editable .ibt-link {
  display: none
}

.ibt-table-wrap .ibt-table_tr.edit-mode .action-wrap {
  display: none
}

.ibt-table-wrap .loading-screen {
  padding: 100px 20px
}

.ibt-table-wrap.no-label {
  background-color: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0
}

.ibt-table-wrap.no-label .ibt-table-wrap__no-heading {
  background-color: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  box-shadow: var(--ins-shadow-x) var(--ins-shadow-y) var(--ins-shadow-blur) var(--ins-shadow-color);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ibt-table-wrap.no-wrap {
  box-shadow: none;
  border: none;
  border-radius: 0
}

.ibt-table-wrap.no-label .ibt-table-header-wrap {
  padding-top: 60px
}

@media only screen and (max-width:768px) {
  .ibt-table-wrap.no-label .ibt-table-header-wrap {
    padding-top: 0
  }
}

.ibt-table-wrap.no-label .ins-searchbar-container {
  top: 0;
  right: 0
}

.ibt-table-wrap.no-label .ins-searchbar-container.left {
  right: initial;
  left: 20px
}

.ibt-table-wrap .text-right {
  text-align: right
}

.ibt-table-wrap .text-center {
  text-align: center
}

.ibt-table-accordion {
  display: none
}

.ibt-table-accordion .checkbox-wrap {
  float: left
}

.ibt-table-accordion .checkbox-wrap .ins-checkbox-wrap {
  padding: 0;
  margin-right: 20px
}

.ibt-table-accordion ins-datepicker .ins-datepicker-wrap {
  margin-bottom: 0
}

.ibt-table-accordion_th {
  padding: 20px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ibt-table-accordion_th .first-th {
  color: var(--ins-color-ink);
  font-size: 14px;
  font-weight: 600
}

.ibt-table-accordion_row-td .checkbox-wrap {
  display: flex;
  align-items: center;
  float: none
}

.ibt-table-accordion_row-td .checkbox-wrap .ins-checkbox-wrap {
  display: flex;
  align-items: center
}

.ibt-table-accordion_row-td .checkbox-wrap .ins-checkbox-wrap input[type=checkbox] {
  margin-bottom: 0
}

.ibt-table-accordion_row-td .icon-caret-down,
.ibt-table-accordion_row-td .icon-caret-up {
  position: absolute;
  right: 20px;
  top: calc(50% - 8px);
  color: var(--ins-color-ink40)
}

.ibt-table-accordion_row-td .icon-caret-up {
  display: none
}

.ibt-table-accordion_row-td.activated .icon-caret-down {
  display: none
}

.ibt-table-accordion_row-td.activated .icon-caret-up {
  display: block
}

.ibt-table-accordion_row-td.activated .ibt-table-accordion_row-head {
  border-bottom: none
}

.ibt-table-accordion_row-td.edit-mode .editable .static-value {
  display: none
}

.ibt-table-accordion_row-td.edit-mode .editable input {
  margin-bottom: 0;
  padding: 6px;
  height: auto
}

.ibt-table-accordion_row-td.edit-mode .editable .ins-select-wrap {
  margin-bottom: 0
}

.ibt-table-accordion_row-td.edit-mode .editable .ins-select-wrap input {
  padding: 9px 6px 8px
}

.ibt-table-accordion_row-td.edit-mode .editable .numInput.cur-year {
  margin: 0
}

.ibt-table-accordion_row-td.edit-mode .editable span {
  display: none
}

.ibt-table-accordion_row-td.edit-mode .editable .multiple-item-wrap span {
  display: block
}

.ibt-table-accordion .ibt-table-accordion_row-td.edit-mode .ibt-table-accordion_row-body.opened {
  height: auto !important;
}

ins-table .timezone-overlay-container ins-input-tooltip .ins-input-tooltip {
  width: auto;
  background-color: transparent;
  display: table-cell;
  vertical-align: middle;
}

ins-table .timezone-overlay-container ins-input-tooltip .ins-input-tooltip .tooltip-label {
  width: 100%;
}

ins-table .timezone-overlay-container ins-input-tooltip .ins-input-tooltip,
ins-table .timezone-overlay-container ins-input-tooltip .ins-input-tooltip:hover {
  color: var(--ins-text-1);
  font-size: 14px;
  word-wrap: break-word;
  font-family: var(--ins-font-family);
  font-weight: 400;
}

ins-table .timezone-overlay-container ins-input-tooltip .overlay-tooltip {
  width: 400px;
  padding: 8px 12px;
}
ins-table .timezone-overlay-container ins-input-tooltip .tippy-box {
  padding: 0;
  max-width: none !important;
}

ins-table .timezone-overlay-container  ins-input-tooltip .tippy-content {
  padding: 0;
}

ins-table .timezones {
  padding: 12px 0;
  gap: 16px;
  border-bottom: 1px solid var(--ins-border-color);
  display: flex;
  justify-content: space-between
}

ins-table .timezones .time {
  margin: 0
}

ins-table .timezones .time-info {
  font-weight: 600;
  margin: 0
}

ins-table .timezones.last {
  border-bottom: none
}

ins-table .ibt-table-wrap .edit-mode .timezone-overlay {
  display: none;
}

ins-table .ibt-table-action-container .ins-select-wrap.small.drop-up.activated .ins-select-options-wrap {
  bottom: calc(100% - -8px) !important;
}

.ibt-table-accordion_row-head {
  padding: 20px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  position: relative;
  background-color: var(--ins-bg-color);
  display: flex;
  align-items: center
}

.ibt-table-accordion_row-head .first-td {
  font-size: 14px;
  display: flex;
  align-items: center
}

.ibt-table-accordion_row-body {
  height: 0;
  padding: 0 16px;
  background-color: var(--ins-bg-color);
  font-size: .875rem;
  overflow: auto;
  transition: height .25s, padding .25s
}

.ibt-table-accordion_row-body table {
  margin-bottom: 0
}

.ibt-table-accordion_row-body tr,
.ibt-table-accordion_row-body tr:first-child {
  background-color: initial
}

.ibt-table-accordion_row-body .column-label {
  font-weight: 600;
  padding: 8px 0
}

.ibt-table-accordion_row-body.opened {
  padding: 16px;
  padding-top: 0;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  overflow: initial
}

.ibt-table-accordion_row-body .action-wrap {
  margin-top: 10px
}

.ibt-table-accordion_row-body .ibta-td-has-link {
  color: var(--ins-color-blue)
}

.ibt-table-accordion_row-body .ibta-td-has-link span:hover {
  cursor: pointer
}

.ibt-table-accordion.no-wrap {
  box-shadow: none;
  border: none;
  border-radius: 0
}

.ibt-table span,
.ibt-table-accordion span {
  position: relative;
  word-break: break-word
}

.ibt-table .not-sortable span,
.ibt-table-accordion .not-sortable span {
  cursor: initial
}

.ibt-table .icon-arrow-up,
.ibt-table-accordion .icon-arrow-up {
  color: var(--ins-color-ink40);
  font-size: 9px;
  margin-left: 4px;
  position: absolute;
  transform: rotateZ(0);
  transition: transform .2s ease;
  line-height: 22px;
  display: none
}

.ibt-table .icon-arrow-up.go-down,
.ibt-table-accordion .icon-arrow-up.go-down {
  transform: rotateZ(-180deg)
}

.ibt-table .icon-arrow-up.active,
.ibt-table-accordion .icon-arrow-up.active {
  color: var(--ins-color-primary);
  display: inline
}

.ibt-table .icon-arrow-down,
.ibt-table-accordion .icon-arrow-down {
  transform: rotateZ(360deg);
  -webkit-transform: rotateZ(360deg)
}

.ibt-table .img-wrap,
.ibt-table-accordion .img-wrap {
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden
}

.ibt-table .img-wrap.use-fallback,
.ibt-table-accordion .img-wrap.use-fallback {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ibt-table .img-wrap img,
.ibt-table-accordion .img-wrap img {
  width: 100%
}

.ibt-table .img-wrap .img-fallback-wrap,
.ibt-table-accordion .img-wrap .img-fallback-wrap {
  text-transform: uppercase;
  color: var(--ins-color-ink40);
  background-color: var(--ins-bg-color4);
  padding: 5px 0 6px;
  box-sizing: border-box;
  text-align: center;
  display: block !important
}

.ibt-table .action-item,
.ibt-table-accordion .action-item {
  display: inline-block;
  margin: 10px 0 0;
  padding: 0 11px;
  line-height: 12px;
  color: var(--ins-color-primary);
  font-size: 12px;
  border-right: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color)
}

.ibt-table .action-item:active,
.ibt-table .action-item:focus,
.ibt-table .action-item:hover,
.ibt-table-accordion .action-item:active,
.ibt-table-accordion .action-item:focus,
.ibt-table-accordion .action-item:hover {
  color: var(--ins-color-primary)
}

.ibt-table .action-item i.fas,
.ibt-table-accordion .action-item i.fas {
  margin-right: 5px;
  font-size: 10px
}

.ibt-table .action-item.archive,
.ibt-table-accordion .action-item.archive {
  color: var(--ins-color-negative)
}

.ibt-table .action-item.archive:active,
.ibt-table .action-item.archive:focus,
.ibt-table .action-item.archive:hover,
.ibt-table-accordion .action-item.archive:active,
.ibt-table-accordion .action-item.archive:focus,
.ibt-table-accordion .action-item.archive:hover {
  color: var(--ins-color-negative)
}

.ibt-table .action-item:first-child,
.ibt-table-accordion .action-item:first-child {
  padding-left: 0
}

.ibt-table .action-item:last-child,
.ibt-table-accordion .action-item:last-child {
  border-right: none;
  padding-right: 0
}

.ibt-table .has-link:hover .ibt-link,
.ibt-table-accordion .has-link:hover .ibt-link {
  cursor: pointer;
  color: var(--ins-color-blue)
}

.ibt-table-wrap .pagination-wrap>div.ibt-table-wrap__page-nav {
  display: flex;
}

.ibt-table-wrap__page-nav .ibt-table-wrap__page,
.ibt-table-wrap__page-nav .ibt-table-wrap__prev-next {
  align-self: center;
}

@media screen and (max-width: 1023px) {
  .ibt-table-wrap__settings {
    flex-direction: column;
  }
  .ibt-table-wrap .ibt-table-action-container {
    justify-content: center;
    padding-bottom: 0;
  }
  .ibt-table-wrap__pagination {
    margin-left: 0;
  }
  .ibt-table-wrap .pagination-wrap {
    justify-content: center;
    padding: 20px 20px;
  }
}

@media screen and (max-width:992px) {
  .ibt-table-wrap .ibt-table-wrap__settings {
    display: block
  }

  .ibt-table-wrap .ibt-table-action-container {
    padding-bottom: 0
  }
}

@media (max-width:768px) {
  .ibt-table-wrap .ibt-table__title {
    display: block;
    width: 100%
  }

  .ibt-table-wrap .ins-searchbar-container {
    min-width: auto;
    position: static;
    padding: 0;
    width: 100%
  }

  .ibt-table-wrap .ibt-table-action-container,
  .ibt-table-wrap .pagination-wrap {
    width: 100%;
    float: none;
    /* padding: 20px 20px; */
    box-sizing: border-box
  }

  .ibt-table-wrap .ibt-table-action-container {
    padding-bottom: 0
  }

  .ibt-table-wrap .no-pagination .ibt-table-action-container {
    padding-bottom: 20px
  }

  .ibt-table-wrap .ibt-table {
    display: none
  }

  .ibt-table-wrap .ibt-table-accordion {
    display: block;
    font-family: var(--ins-font-family)
  }

  .ibt-table-wrap .ibt-table-accordion.static {
    display: none
  }

  .ibt-table-wrap .ibt-table.static {
    display: table
  }

  .ibt-table-accordion .action-item {
    padding: 0 8px
  }

  .ibt-table-accordion .text-label span {
    margin-left: 12px
  }
}

@media (max-width: 639px) {
  .ibt-table-wrap .pagination-wrap {
    flex-direction: column;
  }
  .ibt-table-wrap .pagination-wrap>div.ibt-table-wrap__page-nav {
    padding-bottom: 20px;
  }
}

@media (max-width:420px) {
  .ibt-table .ibt-table__title {
    padding: 15px;
    padding-bottom: 0
  }

  .ibt-table .ins-searchbar-container {
    padding: 0 15px
  }

  .ibt-table .ibt-table-accordion_row-td,
  .ibt-table .ibt-table-accordion_th {
    padding: 14px
  }

  .ibt-table .ibt-table-accordion_row-td {
    padding: 0
  }

  .ibt-table .ibt-table-accordion_row-td .ibt-table-accordion_row-head {
    padding: 14px
  }

  .ibt-table .ibt-table-accordion_row-td .ibt-table-accordion_row-body {
    padding: 14px;
    padding-top: 0
  }

  .ibt-table .ibt-table-accordion_row-td.edit-mode span {
    color: red
  }

  .ibt-table-accordion .action-item {
    padding: 0 8px
  }

  .ibt-table-wrap__pagination {
    width: 100%
  }

  .ibt-table-wrap__pagination span {
    float: left
  }

  .ibt-table-wrap__pagination--option {
    right: 7px;
    position: relative
  }

  .ibt-table-wrap__page {
    margin: 10px 0 0 0;
    float: left
  }

  .ibt-table-wrap__prev-next {
    margin-top: 10px
  }
}

ins-table-row {
  display: table-row;
  height: 64px;
  width: 100%
}

ins-table-row:nth-child(even) {
  background-color: var(--ins-color-table-event)
}

ins-table-row:hover:nth-child(odd) {
  background-color: var(--ins-color-table-odd)
}

ins-table-td {
  display: table-cell;
  padding: 11px 10px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  color: var(--ins-color-ink);
  font-size: 14px;
  vertical-align: middle
}

ins-table-td .text-right {
  text-align: right
}

ins-table-th {
  display: table-cell;
  padding: 11px 10px;
  border-bottom: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  color: var(--ins-color-ink);
  font-size: 14px;
  font-weight: 600
}

ins-table .ibt-table-action-container ins-select .ins-select {
  display: inline-block;
  margin-bottom: 0;
}

ins-page {
  position: absolute;
  top: -9999px;
  left: -9999px
}

ins-page.hydrated {
  position: initial
}

ins-input-table .ins-input-table_row {
  position: relative
}

ins-input-table .ins-input-table_column {
  display: inline-block;
  padding-right: 16px
}

ins-input-table .ins-input-table_label {
  font-family: var(--ins-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  line-height: 1.4;
  min-height: 20px
}

ins-input-table .ins-input-table{
  margin-bottom: 20px
}

ins-input-table .table-header {
  font-family: var(--ins-font-family);
  font-size: 12px;
  color: var(--ins-color-ink);
  margin-bottom: 3px;
  line-height: 1.4;
  min-height: 20px
}

ins-input-table .ins-input-table_buttons {
  width: 80px;
  position: absolute;
  bottom: 16px;
  right: 0
}

ins-input-table .ins-form-field-wrap .ins-form-label,
ins-input-table .ins-form-field-wrap.is-invalid .ins-form-error {
  display: none
}

ins-input-table .ins-form-error {
  display: block;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: var(--ins-color-negative);
  margin-top: 4px
}

ins-input-table .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

ins-input-table .ins-input-table.has-error .ins-input-table_column,
ins-input-table .ins-input-table.has-error .ins-input-table_label {
  color: var(--ins-color-negative)
}

ins-input-table ins-button+ins-button button {
  margin-left: 0
}

@media screen and (max-width:639px) {
  ins-input-table .ins-input-table_header {
    display: none
  }

  ins-input-table .ins-input-table_column {
    display: block;
    width: 100% !important;
    padding-right: 0
  }

  ins-input-table .ins-form-field-wrap .ins-form-label {
    display: block;
    font-weight: 400
  }

  ins-input-table .ins-input-table_label {
    margin-bottom: 16px
  }

  ins-input-table .ins-input-table_buttons {
    display: block;
    position: relative;
    padding-top: 12px;
    width: 100%;
    text-align: right
  }
}

ins-button-select .ins-button-select-wrap .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

ins-button-select .ins-button-select-wrap .ins-form-error {
  margin-bottom: 0;
  display: block;
  margin-top: 4px;
  font-family: var(--ins-font-family);
  font-size: 12px;
  line-height: 16px;
  color: var(--ins-color-negative)
}

ins-button-select .ins-button-select .ins-select-search {
  display: none;
  position: relative
}

ins-button-select .ins-button-select .ins-select-search .ins-select-search-input {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  padding: 10px 12px;
  width: 100%;
  padding: 11px 10px;
  box-shadow: none;
  box-sizing: border-box;
  border-radius: var(--ins-border-radius);
  font-size: .875rem;
  background: var(--ins-bg-color);
  color: var(--ins-color-ink);
  outline: 0
}

ins-button-select .ins-button-select .ins-select-search .icon-search {
  position: absolute;
  right: 24px;
  top: calc(50% - 8px);
  color: var(--ins-color-ink40)
}

ins-button-select .ins-button-select.ins-select-wrap {
  margin-bottom: 0
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .ins-select-value-wrap {
  padding: 0
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .ins-select-options-wrap {
  min-width: 240px
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .ins-select-label-wrap i.icon-caret-down {
  width: 6px
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .ins-select-label-wrap span {
  padding-right: 14px
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .multiple.has-value .label-of-value {
  display: none
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .multiple.has-value .ins-select-label-wrap {
  padding-right: 20px
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .multiple.has-value .ins-select-label-wrap .item-label {
  padding-right: 0
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .no-result-text {
  margin-top: 0
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .spinner {
  border-left: 3px solid transparent;
  height: 13px;
  width: 13px
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .spinner:after {
  height: 13px;
  width: 13px
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .multiple-item-wrap {
  display: inline-block;
  background-color: #c5cad4;
  border-radius: var(--ins-border-radius);
  margin: 0 4px;
  font-size: 14px;
  position: relative;
  padding-right: 20px;
  padding-left: 0;
  color: var(--ins-color-ink)
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise .multiple-item-wrap .icon-close {
  font-size: 7px;
  margin-left: 10px;
  position: absolute;
  color: var(--ins-color-ink);
  padding: 4px;
  top: calc(50% - 8px);
  right: 2px;
  cursor: pointer
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise.initializing .icon-caret-down {
  display: none
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise.initializing .main-spinner-wrap {
  right: 22px;
  top: -1px
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise.small .ins-select-label-wrap,
ins-button-select .ins-button-select.ins-select-wrap.buttonise.small .ins-select-label-wrap span,
ins-button-select .ins-button-select.ins-select-wrap.buttonise.small .ins-select-value-wrap {
  font-size: .625rem
}

ins-button-select .ins-button-select.ins-select-wrap.buttonise.small .ins-select-option-wrap {
  font-size: .75rem
}

ins-button-select .ins-button-select.ins-select-wrap .ins-select-value-wrap i.icon-caret-down {
  top: 12px
}

ins-button-select .ins-button-select.ins-select-wrap .ins-select-value-wrap .ins-select-value-input {
  display: block;
  cursor: pointer
}

ins-button-select .ins-button-select.ins-select-wrap .multiple-item {
  padding: 2px 4px
}

ins-button-select .ins-button-select.ins-select-wrap.activated .ins-select-value-input {
  display: none
}

ins-button-select .ins-button-select.ins-select-wrap.activated .ins-select-value-input.has-value {
  display: block
}

ins-button-select .ins-button-select.ins-select-wrap.activated .ins-select-value-wrap.multiple .ins-select-value-input {
  display: none
}

ins-button-select .ins-button-select.ins-select-wrap.activated.drop-up .ins-select-options-wrap,
ins-button-select .ins-button-select.ins-select-wrap.activated.drop-up:not(.no-options) .ins-select-options-wrap {
  border-top: 1px solid var(--ins-color-blue);
  bottom: calc(100% - 20px);
  border-bottom: none
}

ins-button-select .ins-button-select.ins-select-wrap.activated.drop-up .dynamic-option-wrap,
ins-button-select .ins-button-select.ins-select-wrap.activated.drop-up:not(.no-options) .dynamic-option-wrap {
  border-bottom: 1px solid #e4e6ec
}

ins-button-select .ins-button-select.ins-select-wrap.activated.drop-up.no-options .ins-select-options-wrap,
ins-button-select .ins-button-select.ins-select-wrap.activated.drop-up:not(.no-options).no-options .ins-select-options-wrap {
  border-radius: 4px 4px 0 0
}

ins-button-select .ins-button-select.ins-select-wrap .main-spinner-wrap {
  right: 28px;
  top: 21px
}

ins-button-select .ins-button-select.ins-select-wrap .spinner-wrap {
  height: 38px
}

ins-button-select .ins-button-select.ins-select-wrap.initializing .icon-caret-down {
  display: none
}

ins-button-select .ins-button-select.ins-select-wrap .ins-select-options-wrap.searching .ins-select-slot-wrap {
  display: none
}

ins-button-select .ins-button-select.ins-select-wrap .scroll-wrap {
  max-height: 215px
}

ins-button-select .ins-button-select .no-result .ins-select-slot-wrap ins-button-select-group {
  display: none
}

ins-button-select .ins-button-select.activated .ins-select-search {
  display: block
}

ins-button-select .ins-select-wrap.buttonise.is-invalid .ins-select-label-wrap.ripple:hover,
ins-button-select .ins-button-select.ins-select-wrap.is-invalid {
  background: var(--ins-color-red-10p);
}

.ins-button-select.is-invalid.activated .ins-select-options-wrap {
  top: calc(100% - -7px)
}

.ins-input-select-wrap {
  margin-bottom: 20px;
}

ins-input-select .ins-input-select .ins-select-search {
  display: none;
  position: relative
}

ins-input-select .ins-input-select .ins-select-search .ins-select-search-input {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  padding: 10px 12px;
  margin: 8px;
  width: calc(100% - 16px);
  padding: 11px 10px;
  box-shadow: none;
  box-sizing: border-box;
  border-radius: var(--ins-border-radius);
  font-size: .875rem;
  background: var(--ins-bg-color);
  color: var(--ins-color-ink);
  outline: 0;
  font-family: var(--ins-font-family);
}

ins-input-select .ins-input-select .ins-select-search .icon-search {
  position: absolute;
  right: 24px;
  top: calc(50% - 8px);
  color: var(--ins-color-ink40)
}

ins-input-select .ins-input-select.ins-select-wrap .ins-select-value-wrap i.icon-caret-down {
  top: 12px
}

ins-input-select .ins-input-select.ins-select-wrap .ins-select-value-wrap .ins-select-value-input {
  display: block;
  cursor: pointer;
  font-family: var(--ins-font-family);
}

ins-input-select .ins-input-select.ins-select-wrap .multiple-item {
  padding: 2px 4px
}

ins-input-select .ins-input-select.ins-select-wrap.activated .ins-select-value-input {
  display: none
}

ins-input-select .ins-input-select.ins-select-wrap.activated .ins-select-value-input.has-value {
  display: block
}

ins-input-select .ins-input-select.ins-select-wrap.activated .ins-select-value-wrap.multiple .ins-select-value-input {
  display: none
}

ins-input-select .ins-input-select.ins-select-wrap.activated.drop-up .ins-select-options-wrap,
ins-input-select .ins-input-select.ins-select-wrap.activated.drop-up:not(.no-options) .ins-select-options-wrap {
  border-top: 1px solid var(--ins-color-blue);
  bottom: calc(100% - 24px);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

ins-input-select .ins-input-select.ins-select-wrap.activated.drop-up .dynamic-option-wrap,
ins-input-select .ins-input-select.ins-select-wrap.activated.drop-up:not(.no-options) .dynamic-option-wrap {
  border-bottom: 1px solid #e4e6ec
}

ins-input-select .ins-input-select.ins-select-wrap.activated.drop-up.no-options .ins-select-options-wrap,
ins-input-select .ins-input-select.ins-select-wrap.activated.drop-up:not(.no-options).no-options .ins-select-options-wrap {
  border-radius: 4px 4px 0 0
}

ins-input-select .ins-input-select.ins-select-wrap.activated.drop-up.is-invalid .ins-select-options-wrap,
ins-input-select .ins-input-select.ins-select-wrap.activated.drop-up:not(.no-options).is-invalid .ins-select-options-wrap {
  border-top-color: var(--ins-color-negative)
}

ins-input-select .ins-input-select.ins-select-wrap .main-spinner-wrap {
  right: 28px;
  top: 21px
}

ins-input-select .ins-input-select.ins-select-wrap .spinner-wrap {
  height: 38px
}

ins-input-select .ins-input-select.ins-select-wrap.initializing .icon-caret-down {
  display: none
}

ins-input-select .ins-input-select.ins-select-wrap .ins-select-options-wrap.searching .ins-select-slot-wrap {
  display: none
}

ins-input-select .ins-input-select.ins-select-wrap.searchable .ins-select-options-wrap .done-wrap {
  top: 56px
}

/* ins-input-select .ins-input-select.ins-select-wrap.searchable.activated .ins-select-value-wrap {
  min-height: 39px
} */

ins-input-select .ins-input-select .no-result .ins-select-slot-wrap ins-input-select-group {
  display: none
}

ins-input-select .ins-input-select.activated .ins-select-search {
  display: block
}

ins-input-select[multiple] .ins-input-select.ins-select-wrap:not(.searchable) .ins-select-value-wrap .ins-select-value-input,
ins-input-select[multiple="true"] .ins-input-select.ins-select-wrap:not(.searchable) .ins-select-value-wrap .ins-select-value-input {
  display: none
}

.ins-input-select-wrap .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

ins-radio-group .ins-radio-group-wrap {
  margin-bottom: 20px
}

ins-radio-group .ins-radio-group-label-wrap {
  font-family: var(--ins-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  display: block;
  line-height: 1.4;
  min-height: 20px;
  margin-bottom: 3px
}

ins-radio-group .ins-radio-group-wrap.disabled .ins-radio-group-label-wrap {
  color: var(--ins-color-ink40)
}

ins-radio-group .ins-radio-group-wrap.is-invalid .ins-checkbox-radio-label,
ins-radio-group .ins-radio-group-wrap.is-invalid .ins-radio-group-label-wrap {
  color: var(--ins-color-negative)
}

ins-radio-group ins-radio .ins-radio {
  margin-bottom: 10px;
  line-height: 16px
}

ins-radio-group ins-radio .ins-radio label {
  line-height: 16px
}

ins-radio-group .ins-form-error {
  display: block;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: var(--ins-color-negative);
  margin-top: 4px
}

ins-radio-group ins-radio[null-value] .ins-radio-checkbox label .ins-checkbox-radio-label {
  color: #c8c7cc
}

ins-radio-group .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

ins-radio-group .radio-horizontal, ins-radio-group .radio-horizontal > div {
  display: flex;
  flex-wrap: wrap;
}
ins-radio-group .radio-horizontal ins-radio label {
  display: flex;
  align-items: baseline;
}
ins-radio-group .radio-horizontal ins-radio label .ripple-check {
  flex-shrink: 0;
}


ins-checkbox-group .ins-checkbox-group-wrap {
  margin-bottom: 20px;
}
ins-checkbox-group .ins-checkbox-group-label-wrap {
  font-family: var(--ins-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  display: block;
  line-height: 1.4;
  min-height: 20px;
  margin-bottom: 3px;
}
ins-checkbox-group .ins-checkbox-group-wrap.disabled .ins-checkbox-group-label-wrap {
  color: var(--ins-color-ink40);
}
ins-checkbox-group .ins-checkbox-group-wrap.is-invalid .ins-checkbox-group-label-wrap, ins-checkbox-group .ins-checkbox-group-wrap.is-invalid .ins-checkbox-radio-label {
  color: var(--ins-color-negative);
}
ins-checkbox-group ins-checkbox .ins-checkbox-wrap {
  margin-bottom: 10px;
  line-height: 16px;
}
ins-checkbox-group ins-checkbox .ins-checkbox-wrap label {
  line-height: 16px;
}
ins-checkbox-group .ins-form-error {
  display: block;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: var(--ins-color-negative);
  margin-top: 4px;
}
ins-checkbox-group .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40);
}
ins-checkbox-group .checkbox-horizontal, ins-checkbox-group .checkbox-horizontal > div {
  display: flex;
  flex-wrap: wrap;
}
ins-checkbox-group .checkbox-horizontal ins-checkbox label {
  display: flex;
  align-items: baseline;
}
ins-checkbox-group .checkbox-horizontal ins-checkbox label .ripple-check {
  flex-shrink: 0;
}
ins-alert-box .alert-box {
  font-family: var(--ins-font-family);
  padding: 16px;
  border-radius: 4px;
  border-left: 4px solid;
  opacity: 1;
  transition: 0.6s all;
  -webkit-transition: 0.6s all;
}
ins-alert-box .alert-box.error {
  background: var(--ins-color-red-10p);
  color: var(--ins-color-negative);
  border-color: var(--ins-color-negative);
}
ins-alert-box .alert-box.primary {
  background: var(--ins-color-blue-10p);
  color: var(--ins-color-primary);
  border-color: var(--ins-color-primary);
}
ins-alert-box .alert-box.success {
  background: var(--ins-color-green-10p);
  color: var(--ins-color-success);
  border-color: var(--ins-color-success);
}
ins-alert-box .alert-box.warning {
  background: var(--ins-color-orange-10p);
  color: var(--ins-color-warning);
  border-color: var(--ins-color-warning);
}
ins-alert-box .alert-box .alert-close {
  padding-left: 16px;
  float: right;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  transition: 0.3s all;
  -webkit-transition: 0.3s all;
}
ins-card-select .ins-card-select-wrap {
  margin-bottom: 20px;
}
ins-card-select .ins-card-select-label-wrap {
  font-family: var(--ins-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  display: block;
  line-height: 1.4;
  min-height: 20px;
}
ins-card-select .ins-card-select-wrap.disabled .ins-card-select-label-wrap {
  color: var(--ins-color-ink40);
}
ins-card-select .ins-form-error {
  display: block;
  font-size: 12px;
  font-family: var(--ins-font-family);
  line-height: 16px;
  color: var(--ins-color-negative);
  margin-top: 4px;
}
ins-card-select .ins-card-select-option-wrap {
  margin: 0 -12px;
  margin-bottom: 4px;
  width: calc(100% + 24px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
ins-card-select .ins-card-select-option-wrap > div {
  width: calc(100% + 24px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
ins-card-select .ins-card-select-wrap.is-invalid .ins-card-select-label-wrap {
  color: var(--ins-color-negative);
}
ins-card-select .ins-card-select-wrap.is-invalid .ins-card-select-option-wrap {
  margin-bottom: 0;
}

ins-card-select .ins-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ins-color-ink40)
}

ins-input .ins-form-field-wrap.input-active .ins-form-label {
  color: var(--ins-color-primary)
}

ins-input .ins-form-field-wrap.input-active .ins-form-field:read-only:not([read-only=false]) {
  border-color: var(--ins-color-primary)
}

ins-input .ins-form-field-wrap.is-invalid.input-active .ins-form-label,
ins-input .ins-form-field-wrap.is-invalid.input-active .ins-form-label {
  color: var(--ins-color-negative)
}

ins-input .ins-form-field-wrap.is-invalid .ins-form-field:read-only:not([read-only=false]),
ins-input .ins-form-field-wrap.is-invalid.input-active .ins-form-field:read-only:not([read-only=false]) {
  color: var(--ins-color-negative);
  border-color: var(--ins-color-negative);
  background-color: var(--ins-color-red-10p)
}

ins-input-search * {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

ins-input-search input {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  font-weight: 400;
  line-height: 1.5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

ins-input-search .ins-input-search {
  margin-bottom: 20px;
  position: relative;
  box-sizing: border-box;
}

ins-input-search .ins-input-search label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ins-color-ink);
  margin-bottom: 2px
}

ins-input-search .ins-input-search .error-message {
  display: none;
  font-size: 12px;
  line-height: 16px;
  color: var(--ins-color-negative)
}

ins-input-search .ins-input-search-container {
  background-color: var(--ins-bg-color);
  border-radius: var(--ins-border-radius);
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
  margin-bottom: 4px;
  font-size: .875rem;
  position: relative;
  color: var(--ins-color-ink40);
  cursor: pointer;
  /* -webkit-transition: border-color .15s ease-in, border-radius .15s ease-in;
  transition: border-color .15s ease-in, border-radius .15s ease-in */
  /* -webkit-transition: border-radius .15s ease-in;
  transition: border-radius .15s ease-in */
}

ins-input-search .ins-input-search-container input {
  background: var(--ins-bg-color);
  font-size: 14px
}

ins-input-search .ins-input-search-container:hover {
  border-color: var(--ins-bg-color3)
}

ins-input-search .ins-input-search.active label,
ins-input-search .ins-input-search.activated label {
  color: var(--ins-color-blue)
}

ins-input-search .ins-input-search.active .ins-input-search-container {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-blue)
}

ins-input-search .ins-input-search.has-error label {
  color: var(--ins-color-negative);
  box-sizing: border-box
}

ins-input-search .ins-input-search.has-error .error-message {
  display: block
}

ins-input-search .ins-input-search.has-error .ins-input-search-container {
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-negative);
  background: var(--ins-color-negative-10p)
}

ins-input-search .ins-input-search.has-error .ins-input-search-container input {
  background: var(--ins-color-negative-10p)
}

ins-input-search .ins-input-search-choice {
  display: inline-block;
  background: var(--ins-bg-color2);
  padding: 2px 8px;
  border-radius: 5px;
  position: relative;
  padding-right: 28px;
  margin: 0 5px 6px 5px;
  cursor: pointer
}

ins-input-search .ins-input-search-choice span {
  font-size: 14px;
  color: var(--ins-color-ink)
}

ins-input-search .ins-input-search-choice .icon-close {
  color: var(--ins-color-ink40);
  font-size: 7px;
  margin-left: 10px;
  position: absolute;
  right: 8px;
  top: calc(50% - 4px)
}

ins-input-search .ins-input-search-text {
  width: 100%;
  display: block;
  margin-bottom: 0;
  position: relative;
}

ins-input-search .ins-input-search-text input,
ins-input-search .ins-input-search-text input:active,
ins-input-search .ins-input-search-text input:focus {
  border: none;
  outline: 0;
  box-shadow: none;
  margin-bottom: 0;
  height: 39px;
  padding: 11px 10px;
  border-radius: var(--ins-border-radius);
  color: var(--ins-color-ink);
  font-family: var(--ins-font-family);
  padding-right: 75px;
}

ins-input-search .ins-input-search-text input:-moz-placeholder,
ins-input-search .ins-input-search-text input::-moz-placeholder {
  color: var(--ins-color-ink40)
}

ins-input-search .ins-input-search-text input:-ms-input-placeholder {
  color: var(--ins-color-ink40)
}

ins-input-search .ins-input-search-text input::-webkit-input-placeholder {
  color: var(--ins-color-ink40)
}

ins-input-search .ins-input-search-text .clear-icon {
  position: absolute;
  right: 35px;
  top: 4px;
  line-height: 19px;
  font-size: 14px;
  padding: 6px 8.5px;
  border-radius: 4px;
  color: var(--ins-color-ink40);
}

ins-input-search .ins-input-search-text .search-icon {
  position: absolute;
  right: 4px;
  top: 4px;
  font-size: 14px;
  padding: 6px 8.5px;
  border-radius: 4px;
  line-height: 19px;
  color: var(--ins-color-ink40);
}

ins-input-search .ins-input-search-text .clear-icon:hover,
ins-input-search .ins-input-search-text .search-icon:hover {
  background-color: var(--ins-bg-color2);
  border-radius: var(--ins-border-radius);
  color: var(--ins-color-ink);
}

ins-input-search .ins-input-search.disabled .ins-input-search-choice,
ins-input-search .ins-input-search.readonly .ins-input-search-choice {
  padding-right: 8px
}

ins-input-search .ins-input-search.disabled input,
ins-input-search .ins-input-search.readonly input {
  background: var(--ins-color-disabled_readonly_bg);
  color: var(--ins-color-ink40);
}

ins-input-search .ins-input-search.disabled .ins-input-search-container,
ins-input-search .ins-input-search.readonly .ins-input-search-container {
  border-color: var(--ins-bg-color2);
  background-color: var(--ins-color-disabled_readonly_bg);
  color: var(--ins-color-ink40)
}

ins-input-search .ins-input-search.disabled .ins-input-search-container:hover,
ins-input-search .ins-input-search.readonly .ins-input-search-container:hover {
  border-color: var(--ins-bg-color2)
}

ins-input-search .ins-input-search.disabled .search-icon,
ins-input-search .ins-input-search.readonly .search-icon {
  cursor: not-allowed
}

ins-input-search .ins-input-search-options-wrap.loading .ins-input-search-option-wrap {
  display: none
}

ins-input-search .ins-input-search-option-wrap {
  background-color: var(--ins-bg-color);
  font-family: var(--ins-font-family);
  font-size: .875rem;
  padding: 12px 10px;
  color: var(--ins-color-ink40);
  cursor: pointer;
  line-height: 21px;
}

ins-input-search[blank-label] .ins-input-search:not(.multiple-search) ins-input-search-option .ins-input-search-option-wrap.no-value {
  opacity: .5
}

ins-input-search-option .ins-input-search-option-wrap:hover {
  color: var(--ins-color-ink);
  background-color: var(--ins-bg-color2)
}

ins-input-search-option .ins-input-search-option-wrap.disabled {
  color: #e4e6ec;
  cursor: initial
}

ins-input-search-option .ins-input-search-option-wrap.disabled:hover {
  background-color: var(--ins-bg-color)
}

ins-input-search-option .ins-input-search-option-wrap.hidden {
  display: none
}

ins-input-search .ins-input-search.activated .ins-input-search-option-wrap {
  opacity: 1
}

ins-input-search .ins-input-search-value {
  box-sizing: border-box;
  line-height: 21px;
  padding-right: 40px;
}

ins-input-search .ins-input-search-value.has-value {
  margin: 3.5px;
}

ins-input-search .ins-input-search-value.has-value+.ins-input-search-text {
  position: relative;
}

ins-input-search .ins-input-search.multiple-search .ins-input-search-value.has-value+.ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.activated .has-value+.ins-input-search-text {
  width: calc(100% + 2px);
  left: -1px;
  position: absolute;
  border-radius: 0 0 4px 4px;
  border: 1px solid var(--ins-color-blue);
  border-top-color: transparent;
  z-index: 990;
}

ins-input-search .ins-input-search.multiple-search:not(.active) .has-value+.ins-input-search-text {
  border: none;
}

ins-input-search .ins-input-search.multiple-search:not(.drop-up) .ins-input-search-options-wrap.has-options+.ins-input-search-container.has-value .ins-input-search-text {
  border-radius: 0;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

ins-input-search .ins-input-search-value.has-value+.ins-input-search-text input {
  width: 100%;
  box-shadow: none;
  box-sizing: border-box;
  font-size: .875rem;
  background: var(--ins-bg-color);
  color: var(--ins-color-ink);
  transition: border-color .15s ease-in, border-radius .05s ease-in;
  opacity: 1;
}

ins-input-search .ins-input-search.multiple-search:not(.active) .ins-input-search-value.has-value+.ins-input-search-text {
  position: initial;
}

ins-input-search .ins-input-search.multiple-search:not(.active) .ins-input-search-value.has-value+.ins-input-search-text input {
  height: 0;
  opacity: 0;
  padding: 0;
}

ins-input-search .ins-input-search.multiple-search.activated .ins-input-search-value.has-value+.ins-input-search-text {
  position: absolute;
}

ins-input-search .ins-input-search.multiple-search.activated .ins-input-search-value.has-value+.ins-input-search-text input {
  opacity: 1;
  height: 39px;
  padding: 11px 10px;
}

ins-input-search .ins-input-search-value .input-search-items-wrap {
  display: inline-block;
  background-color: var(--ins-bg-color2);
  border-radius: var(--ins-border-radius);
  /* margin: 7px 0 7px 7px; */
  margin: 3.5px;
  font-size: 14px;
  padding: 2px 8px;
  position: relative;
  padding-right: 28px;
  color: var(--ins-color-ink)
}

ins-input-search .ins-input-search-value .input-search-items-wrap .icon-close {
  font-size: 7px;
  margin-left: 10px;
  position: absolute;
  color: var(--ins-color-ink40);
  padding: 4px;
  top: calc(50% - 8px);
  right: 4px;
  cursor: pointer
}

ins-input-search .ins-input-search-value .input-search-items-wrap .icon-close:hover {
  color: #2c3148
}

ins-input-search .ins-input-search.readonly .ins-input-search-value .input-search-items-wrap,
ins-input-search .ins-input-search.disabled .ins-input-search-value .input-search-items-wrap {
  padding-right: 8px;
  color: var(--ins-color-ink40);
}

ins-input-search .ins-input-search.readonly .ins-input-search-value .input-search-items-wrap .icon-close,
ins-input-search .ins-input-search.disabled .ins-input-search-value .input-search-items-wrap .icon-close {
  display: none;
}

ins-input-search .ins-input-search-options-wrap {
  background-color: transparent;
  border: solid 1px transparent;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
  border-top: none;
  overflow: hidden;
  height: 0;
  position: absolute;
  z-index: 990;
  width: 100%;
  top: 68px;
}

ins-input-search .ins-input-search-options-wrap.has-multiple-value {
  top: 105px;
}

ins-input-search .activated .ins-input-search-options-wrap.no-result {
  border: solid 1px transparent;
  visibility: hidden;
}

ins-input-search .ins-input-search.activated:not(.drop-up) .ins-input-search-options-wrap.no-result~.ins-input-search-container {
  border-bottom-color: var(--ins-color-blue);
  border-radius: 4px;
}

ins-input-search .ins-input-search.has-error.activated:not(.drop-up) .ins-input-search-options-wrap.no-result~.ins-input-search-container {
  border-bottom-color: var(--ins-color-negative);

}

ins-input-search .ins-input-search.activated.no-results.drop-up .ins-input-search-options-wrap.no-result~.ins-input-search-container,
ins-input-search .ins-input-search.activated.loading.drop-up .ins-input-search-options-wrap.no-result~.ins-input-search-container {
  border-radius: 0 0 4px 4px;
}

ins-input-search .ins-input-search.activated.no-results.drop-up .ins-input-search-options-wrap.no-result~.ins-input-search-container,
ins-input-search .ins-input-search.activated.loading:not(.drop-up) .ins-input-search-options-wrap.no-result~.ins-input-search-container {
  border-radius: 4px 4px 0 0;
}

ins-input-search .ins-input-search.activated.drop-up .ins-input-search-options-wrap.no-result~.ins-input-search-container {
  border-top-color: var(--ins-color-blue);
  border-radius: 4px;
}

ins-input-search .ins-input-search.activated .ins-input-search-container {
  color: var(--ins-color-ink);
  border-color: var(--ins-color-blue);
  border-bottom-color: transparent;
  border-radius: 4px 4px 0 0;
  cursor: initial;
  position: relative;
}

ins-input-search .ins-input-search.active .ins-input-search-container.has-value {
  border-radius: 4px 4px 0 0;
  border-bottom-color: transparent;
}

ins-input-search .activated.drop-up .ins-input-search-container {
  border-bottom-color: var(--ins-color-primary);
  border-radius: 0 0 4px 4px;
  border-top-color: transparent
}

ins-input-search .activated.drop-up .ins-input-search-container.has-value {
  border-bottom-color: transparent;
  border-radius: 0;
}

ins-input-search .activated .ins-input-search-options-wrap {
  background-color: var(--ins-bg-color);
  border-color: var(--ins-color-blue);
  margin-top: -5px;
  max-height: 181px;
  overflow-y: scroll;
  height: auto
}

ins-input-search .ins-input-search .ins-input-search-options-wrap::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
ins-input-search .ins-input-search .ins-input-search-options-wrap::-webkit-scrollbar-thumb {
  background-color: var(--ins-bg-color2);
  border-radius: 16px;
  outline: 0;
}
ins-input-search .ins-input-search .ins-input-search-options-wrap::-webkit-scrollbar-track {
  box-shadow: none;
  -webkit-box-shadow: none;
}

ins-input-search .activated.drop-up .ins-input-search-options-wrap ins-input-search-option:first-child .ins-input-search-option-wrap {
  border-radius: 4px 4px 0 0;
}

ins-input-search .activated.drop-up .ins-input-search-options-wrap {
  top: inherit;
  bottom: 82px;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  border-top: var(--ins-border-style) var(--ins-border-thickness) var(--ins-color-blue);
  margin: 0
}

ins-input-search .activated.drop-up .ins-input-search-options-wrap.has-multiple-value {
  bottom: 100px;
}

ins-input-search .no-result-text {
  font-size: .875rem;
  padding: 10px;
  margin-bottom: 0;
  display: block
}

ins-input-search .ins-input-search .spinner-wrap {
  height: 32px;
  position: absolute;
  display: none;
  box-sizing: border-box;
}

ins-input-search .ins-input-search.no-results {
  padding: 0;
}

ins-input-search .ins-input-search .spinner {
  border-width: 2px;
  border: 3px solid var(--ins-color-ink40);
  border-left: 3px solid var(--ins-bg-color);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  left: calc(50% - 4px);
  top: 8px
}

ins-input-search .ins-input-search .spinner,
ins-input-search .ins-input-search .spinner:after {
  border-radius: 50%;
  width: 16px;
  height: 16px
}

ins-input-search .ins-input-search.no-results .ins-input-search-container,
ins-input-search .ins-input-search.loading .ins-input-search-container {
  position: relative;
}

ins-input-search .ins-input-search.loading .search-icon {
  display: none;
}

ins-input-search .ins-input-search.loading .spinner-wrap {
  display: block;
  right: 10px;
  top: 12px;
  padding: 0;
  margin: 0;
}

ins-input-search .ins-input-search.disabled .ins-input-search-options-wrap {
  pointer-events: none;
  cursor: not-allowed;
}

ins-input-search .ins-input-search.disabled .ins-input-search-container {
  pointer-events: none;
  cursor: not-allowed;
  border-color: var(--ins-border-color);
}

ins-input-search .ins-input-search.readonly .ins-input-search-container {
  border-color: var(--ins-border-color);
}

ins-input-search .ins-input-search.disabled > label {
  color: var(--ins-color-ink40)
}

ins-input-search .ins-input-search .no-results-found,
ins-input-search .ins-input-search .loading-searching {
  padding: 11px 10px;
  left: -1px;
  text-align: center;
  width: calc(100% + 2px);
  background-color: var(--ins-bg-color);
  font-size: .875rem;
  font-family: var(--ins-font-family);
  color: var(--ins-color-ink);
  z-index: 990;
}

ins-input-search .ins-input-search .ins-input-search-container:hover .no-results-found,
ins-input-search .ins-input-search .ins-input-search-container:hover .loading-searching {
  border-color: var(--ins-bg-color3)
}

ins-input-search .ins-input-search.activated .ins-input-search-container .no-results-found,
ins-input-search .ins-input-search.active .ins-input-search-container .no-results-found,
ins-input-search .ins-input-search.activated .ins-input-search-container .loading-searching,
ins-input-search .ins-input-search.active .ins-input-search-container .loading-searching {
  border-color: var(--ins-color-blue);
}

ins-input-search .ins-input-search.activated.has-error .ins-input-search-container .no-results-found,
ins-input-search .ins-input-search.active.has-error .ins-input-search-container .no-results-found,
ins-input-search .ins-input-search.activated.has-error .ins-input-search-container .loading-searching,
ins-input-search .ins-input-search.active.has-error .ins-input-search-container .loading-searching {
  border-color: var(--ins-color-negative);
}

ins-input-search .ins-input-search.multiple-search.has-error .ins-input-search-value.has-value+.ins-input-search-text {
  border-color: var(--ins-color-negative);
  border-top-color: transparent;
}

ins-input-search .ins-input-search.has-error.active .ins-input-search-container input {
  background: var(--ins-bg-color);
}

ins-input-search-option .ins-input-search-option-wrap.selected {
  background: var(--ins-color-blue);
  color: var(--ins-color-ink1)
}

ins-input-search .ins-input-search.has-error.activated .ins-input-search-container .no-results-found,
ins-input-search .ins-input-search.has-error.active .ins-input-search-container .no-results-found,
ins-input-search .ins-input-search.has-error.activated .ins-input-search-container .loading-searching,
ins-input-search .ins-input-search.has-error.active .ins-input-search-container .loading-searching,
ins-input-search .ins-input-search.has-error.activated .ins-input-search-container,
ins-input-search .ins-input-search.has-error.activated .ins-input-search-options-wrap {
  border-color: var(--ins-color-negative);
}

ins-input-search .ins-input-search.loading:not(.drop-up) .ins-input-search-container,
ins-input-search .ins-input-search.no-results:not(.drop-up) .ins-input-search-container {
  border-bottom-color: transparent;
}

ins-input-search .ins-input-search.multiple-search.activated.loading:not(.drop-up) .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.activated.no-results:not(.drop-up) .ins-input-search-text {
  border-bottom-color: transparent;
  border-radius: 0;
}

ins-input-search .ins-input-search.drop-up.no-results .ins-input-search-container,
ins-input-search .ins-input-search.drop-up.loading .ins-input-search-container {
  border-top-color: transparent;
}

ins-input-search .ins-input-search.has-error.activated:not(.drop-up) .ins-input-search-container {
  border-bottom-color: transparent;
}

ins-input-search .ins-input-search.multiple-search.has-error:not(.drop-up) .ins-input-search-options-wrap.has-options+.ins-input-search-container.has-value .ins-input-search-text {
  border-color: var(--ins-color-negative);
  border-bottom-color: transparent;
  border-top-color: transparent;
}

ins-input-search .ins-input-search.multiple-search.has-error.drop-up .ins-input-search-options-wrap.has-options+.ins-input-search-container.has-value .ins-input-search-text {
  border-color: var(--ins-color-negative);
  border-top-color: transparent;
}

ins-input-search .ins-input-search.multiple-search.has-error.activated.drop-up .ins-input-search-container {
  border-radius: 4px 4px 0 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

ins-input-search .ins-input-search.multiple-search.drop-up.active .ins-input-search-container.has-value .ins-input-search-text {
  position: absolute
}

ins-input-search .ins-input-search.multiple-search.drop-up.active .ins-input-search-container.has-value .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.drop-up.activated .ins-input-search-container.has-value .ins-input-search-text {
  border-radius: 4px 4px 0 0;
  border-bottom-color: transparent;
  border-top-color: var(--ins-color-blue);
  position: absolute
}

ins-input-search .ins-input-search.multiple-search.drop-up.active .ins-input-search-container,
ins-input-search .ins-input-search.multiple-search.drop-up.activated .ins-input-search-container {
  border-radius: 0 0 4px 4px;
  border-top-color: transparent;
  border-bottom-color: var(--ins-color-blue);
}

ins-input-search .ins-input-search.multiple-search.drop-up.active .ins-input-search-options-wrap.has-multiple-value.has-options+.ins-input-search-container.has-value .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.drop-up.activated .ins-input-search-options-wrap.has-multiple-value.has-options+.ins-input-search-container.has-value .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.drop-up.loading .ins-input-search-container.has-value .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.drop-up.no-results .ins-input-search-container.has-value .ins-input-search-text {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0;
}

ins-input-search .ins-input-search.multiple-search.has-error.drop-up.active .ins-input-search-container.has-value .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.has-error.drop-up.activated .ins-input-search-container.has-value .ins-input-search-text {
  border-top-color: var(--ins-color-negative);
}

ins-input-search .ins-input-search.multiple-search.has-error.drop-up.active.loading .ins-input-search-container.has-value .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.has-error.drop-up.activated.loading .ins-input-search-container.has-value .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.has-error.drop-up.active.no-results .ins-input-search-container.has-value .ins-input-search-text,
ins-input-search .ins-input-search.multiple-search.has-error.drop-up.activated.no-results .ins-input-search-container.has-value .ins-input-search-text {
  border-top-color: transparent;
}

ins-input-search .ins-input-search.multiple-search.has-error.drop-up.active .ins-input-search-container,
ins-input-search .ins-input-search.multiple-search.has-error.drop-up.activated .ins-input-search-container {
  border-bottom-color: var(--ins-color-negative);
}

ins-input-search .ins-input-search.has-error.activated.drop-up .ins-input-search-container {
  border-top-color: transparent;
}

ins-input-search .ins-input-search.activated:not(.no-results):not(.loading):not(.multiple-search) .ins-input-search-container {
  border-radius: 4px;
  border-bottom-color: var(--ins-color-blue);
}

ins-input-search .ins-input-search.activated:not(.no-results):not(.loading):not(.multiple-search) .ins-input-search-options-wrap:not(.has-options) {
  border: none
}

ins-input-search .ins-input-search.activated:not(.multiple-search) .ins-input-search-options-wrap.has-options+.ins-input-search-container {
  border-radius: 4px 4px 0 0;
}

ins-input-search .ins-input-search.multiple-search:not(.loading):not(.no-results) .ins-input-search-options-wrap.no-options {
  border: none;
}

ins-input-search .ins-input-search.multiple-search.drop-up.active .ins-input-search-options-wrap:not(.no-options)+.ins-input-search-container {
  border-bottom-color: var(--ins-color-blue);
}

ins-input-search .ins-input-search.multiple-search.drop-up.active.has-error .ins-input-search-options-wrap:not(.no-options)+.ins-input-search-container {
  border-bottom-color: var(--ins-color-negative);
}

html {
  -webkit-tap-highlight-color: initial
}

body.no-transition * {
  transition: none !important
}

/* ============================================================================
   IIA v6 semantic token layer
   ----------------------------------------------------------------------------
   The --ins-* semantic tokens the v6 design prototypes consume, aliased onto
   the raw --iia-* palette this bundle already ships. Moved here from
   module-v6-crm so the record-page layer below, and the v6 component variants,
   resolve on every module SPA rather than only inside the CRM. Without these
   the v6 markup renders with unresolved custom properties.
   ============================================================================ */
/* ============================================================
   IIA v6 design-system semantic tokens — the layer the Claude
   Design prototypes consume (--ins-*), aliased onto the raw
   --iia-* palette the component bundle already ships.

   Source: _ds/iia-v6-design-system/tokens/{spacing,typography,colors}.css
   (Claude Design project cb92701b, read 2026-09-07). Values are the
   design system's, not invented. Only tokens the app did not already
   define are added here; existing ones (--ins-text-1/2/3, --ins-ui-*,
   --ins-border-color, --ins-font-family, --ins-color-primary) are left
   to the bundle bridge and insites_core _root.sass.

   Light theme only for now — the [data-theme='dark'] re-pointing in the
   design's colors.css is deliberately not carried (the prototype is light
   and the app's dark switch is not wired to the bridge yet).
   ============================================================ */
:root {
  /* — Spacing scale (px) — mirrors module-general/_spacers.sass */
  --ins-space-3xs: 2px;
  --ins-space-2xs: 4px;
  --ins-space-xs: 8px;
  --ins-space-sm: 16px;
  --ins-space-md: 24px;
  --ins-space-lg: 32px;
  --ins-space-xl: 40px;
  --ins-space-2xl: 48px;
  --ins-space-3xl: 56px;
  --ins-space-4xl: 64px;
  --ins-space-section: 80px;

  /* — Radius */
  --ins-radius-sm: 2px;
  --ins-radius: 4px;
  --ins-radius-lg: 8px;
  --ins-radius-pill: 999px;

  /* — Elevation */
  --iia-shadow-color-1: rgba(0, 0, 0, 0.04);
  --ins-shadow-1: 0 4px 8px 0 var(--iia-shadow-color-1);   /* cards, dropdowns */
  --ins-shadow-2: 0 4px 12px 0 rgba(0, 0, 0, 0.16);        /* modals, popovers */
  --ins-shadow-sm: 0 1px 2px 0 var(--iia-shadow-color-1);
  --ins-shadow-focus: 0 0 0 3px var(--iia-main-light);

  /* — Motion */
  --ins-duration-instant: 100ms;
  --ins-duration-fast: 150ms;
  --ins-duration-normal: 200ms;
  --ins-duration-slow: 300ms;
  --ins-duration-slower: 500ms;
  --ins-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ins-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ins-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* — Type: weights (600 = all headings & button labels) */
  --ins-weight-light: 300;
  --ins-weight-regular: 400;
  --ins-weight-semibold: 600;
  --ins-weight-bold: 700;

  /* — Type: body / control scale */
  --ins-text-xs: 12px;   /* captions, dense cells, labels */
  --ins-text-sm: 14px;   /* DEFAULT body & controls */
  --ins-text-md: 16px;   /* emphasized body, large controls */

  /* — Type: heading scale */
  --ins-title-6: 18px;
  --ins-title-5: 24px;
  --ins-title-4: 32px;
  --ins-title-3: 48px;
  --ins-title-2: 56px;
  --ins-title-1: 64px;

  /* — Type: leading & tracking */
  --ins-leading-tight: 1.2;
  --ins-leading-snug: 1.45;
  --ins-leading-normal: 1.6;
  --ins-leading-relaxed: 1.7;
  --ins-tracking-display: -1px;
  --ins-tracking-normal: 0;

  /* — Icon glyph sizes. NOT defined anywhere in the design system's
       own token files (a dangling reference in the prototype); the
       prototype pairs --iia-glyph-sm with a 16px box, so these are the
       effective rendered sizes. Adjust if the DS later defines them. */
  --iia-glyph-xs: 12px;
  --iia-glyph-sm: 16px;

  /* — Semantic colours (design-system names → raw palette) */
  --ins-main: var(--iia-main);
  --ins-main-light: var(--iia-main-light);
  --ins-main-dark: var(--iia-main-dark);
  --ins-card: var(--iia-ui-5);
  --ins-card-hover: var(--iia-ui-1);
  --ins-main-bg: var(--iia-ui-4);
  --ins-neutral: var(--iia-text-white);
  --ins-text-buttonlabel: var(--iia-text-buttonlabel);
  --ins-alert-positive: var(--iia-alert-positive);
  --ins-alert-positive-light: var(--iia-alert-positive-light);
  --ins-alert-positive-dark: var(--iia-alert-positive-dark);
  --ins-alert-negative: var(--iia-alert-negative);
  --ins-alert-negative-light: var(--iia-alert-negative-light);
  --ins-alert-negative-dark: var(--iia-alert-negative-dark);
  --ins-alert-warning: var(--iia-alert-warning);
  --ins-alert-warning-light: var(--iia-alert-warning-light);
  --ins-alert-warning-dark: var(--iia-alert-warning-dark);
  --ins-overlay: rgba(0, 0, 0, 0.25);
  --ins-disabled-opacity: 0.5;

  /* --------------------------------------------------------------------------
     Admin Shell additions (TW#26371963). The v1.5 shell design consumes 52
     semantic tokens; an audit against every stylesheet an admin page loads found
     15 undefined anywhere. These are those 15. Values are the design system's own,
     from tokens/colors.css in Claude Design project 98f44421 (read 2026-09-09),
     not invented.

     None of the 15 is redefined by the design system's own [data-theme='dark']
     block, so all are correctly light-only. Do not add dark variants without a
     design change to match.

     WHERE THE REST LIVE, because it is not obvious and it caught this audit out
     once: the chrome semantic tier (--ins-sidebar, --ins-header-bg,
     --ins-header-text, --ins-header-text-hovered) and the [data-theme='dark']
     remap of --ins-text-*/--ins-ui-* are defined in
     components.insites.io/dist/styles/app.min.css, the legacy unversioned dist
     artifact, which loads AFTER this file and therefore wins at equal
     specificity. Tokens it already defines cannot be overridden from here. None
     of the 15 below collides with it. That ownership split is a governance risk
     recorded on TW#26711229 rather than something to work around here.
     -------------------------------------------------------------------------- */

  /* Rail hover wash. The raw value already exists; only the semantic alias was missing. */
  --ins-sidebar-hover: var(--iia-sidebar-hover);

  /* Accent raws the app never carried. The design system defines these literals itself. */
  --iia-color-teal: #0B9499;
  --iia-color-teal-light: #0B949914;
  --iia-color-teal-dark: #097D81;
  --iia-color-purple: #5213C9;
  --iia-color-purple-light: #5213C914;
  --iia-color-purple-dark: #360C83;

  --ins-teal: var(--iia-color-teal);
  --ins-teal-light: var(--iia-color-teal-light);
  --ins-teal-dark: var(--iia-color-teal-dark);
  --ins-purple: var(--iia-color-purple);
  --ins-purple-light: var(--iia-color-purple-light);
  --ins-purple-dark: var(--iia-color-purple-dark);

  /* Categorical chart ramp. Literals in the design system too: no raw tier behind
     these, and the order is the ramp, so do not reorder them. Consumed by the
     dashboard lane (TW#20845317) rather than the shell, added here with the rest
     so the semantic tier matches the design system in one pass. */
  --ins-chart-1: #436CF2;
  --ins-chart-2: #0BB780;
  --ins-chart-3: #EC9C00;
  --ins-chart-4: #5213C9;
  --ins-chart-5: #0B9499;
  --ins-chart-6: #DF1F1F;
  --ins-chart-7: #0095FF;
  --ins-chart-8: #84848F;

  /* --------------------------------------------------------------------------
     Admin Shell chrome patch (TW#26371963). The v1.5 design declares 41 custom
     properties of its own, on top of the 52 design-system ones above, and its
     comment calls them a "proposed token patch for tokens/colors.css". None of
     them appear in any handoff document, so they are only discoverable by reading
     the design source. 38 were undefined in production; these are those, values
     verbatim from handoff/admin-shell/AdminShell.dc.html.

     The chrome family exists because the shell is dark in BOTH themes while the
     app around it is not. Only the surface values re-point under dark, in the
     block below.
     -------------------------------------------------------------------------- */

  --ins-chrome-bg: var(--iia-sidebar);
  --ins-chrome-hover: var(--iia-sidebar-hover);
  --ins-chrome-surface: #1A1A1A;
  --ins-chrome-border: #2E2E2E;
  --ins-chrome-rule: #2E323B;
  --ins-chrome-desk: #2E2E2E;
  --ins-chrome-fg: #FFFFFF;
  --ins-chrome-fg-muted: #B8B8B8;
  --ins-chrome-fg-subtle: #9BA1AC;
  --ins-chrome-focus: #8FA9FF;

  /* Chrome glyph sizes. NOT --iia-glyph-sm/xs, deliberately. The design declares
     those two at 13px and 11px, but production defines them at 16px and 12px and
     they have 171 consumers across the bundle and the module SPAs. Re-pointing
     them would resize icons on every screen in the product, which is a fleet-wide
     density decision and not this task's to make. Scoped to the chrome instead. */
  --ins-chrome-glyph-sm: 13px;
  --ins-chrome-glyph-xs: 11px;

  /* Glyph sizes the app never defined, so these are safe additions. */
  --iia-glyph-2xs: 9px;
  --iia-glyph-lg: 18px;
  --iia-glyph-xl: 24px;
  --iia-text-2xs: 10px;

  /* Rail surfaces and the collapsed-state group label. */
  --iia-rail-fg: #EDEDED;
  --iia-rail-fg-muted: #A3A3A3;
  --iia-rail-divider: #1F1F1F;
  --iia-rail-pill: rgba(255, 255, 255, 0.06);
  --iia-group-label: #8F8F8F;
  --iia-group-label-dm: #737373;

  /* Environment tints behind the switcher's current-instance row (8%). */
  --iia-instance-staging-light: rgba(0, 149, 255, 0.05);
  --iia-instance-production-light: rgba(11, 183, 128, 0.05);
  --iia-instance-staging-text: #0071C2;      /* switcher group labels: text-safe env inks (design literals) */
  --iia-instance-production-text: #087A56;

  /* Accessibility fix carried by the design, with its own reasoning: amber cannot
     reach 4.5:1 on white at any weight (#EC9C00 is 2.25:1, --iia-alert-warning-dark
     is 2.99:1). This ink is 4.61:1 and is for warning TEXT only, never fills. */
  --iia-alert-warning-text: #A06A00;
  --iia-alert-dm-warning-text: #E5A93A;
  --ins-alert-warning-text: var(--iia-alert-warning-text);

  --iia-badge-negative: var(--ins-alert-negative);
  --iia-overlay-scrim: rgba(15, 15, 15, 0.45);
  --iia-radius-pill-sm: 6px;

  /* Layering scale. The shell stacks nine deep, so these are a scale rather than
     ad-hoc values: raised variants exist because the rail and header swap above
     each other while a flyout is open. */
  --iia-z-header: 30;
  --iia-z-rail: 40;
  --iia-z-menu: 50;
  --iia-z-rail-raised: 70;
  --iia-z-flyout: 80;
  --iia-z-header-raised: 80;
  --iia-z-overlay: 100;
  --iia-z-scrim: 110;
  --iia-z-drawer: 115;
  --iia-z-switcher: 200;
}

/* Chrome surfaces re-point for dark; the chrome never goes light. Placed after
   :root so it wins at equal specificity when the attribute is present, which is
   how both the design and dist/styles/app.min.css do it.

   NOT included, deliberately: the design also re-points --ins-text-buttonlabel to
   white under dark. dist/styles/app.min.css sets that token under dark too and
   loads after this file, so an override here would be dead. Shell markup should
   use --ins-chrome-fg for a white chrome label instead of relying on it. */
[data-theme="dark"] {
  --ins-chrome-bg: var(--iia-sidebar-dm);
  --ins-chrome-hover: var(--iia-ui-dm-1);
  --ins-chrome-surface: var(--iia-ui-dm-5);
  --ins-chrome-border: var(--iia-ui-dm-3);
  --ins-chrome-rule: var(--iia-ui-dm-3);
  --ins-alert-warning-text: var(--iia-alert-dm-warning-text);
  --iia-badge-negative: #C93A28;
}

/* ============================================================================
   IIA v6 record-page layer
   ----------------------------------------------------------------------------
   The CRM Contact v1.4 / Company v1.0 design prototypes' own stylesheet, moved
   here from module-v6-crm so a design change is one bundle release instead of a
   rebuild and deploy per module. Every admin page already links this file, so
   consumers need no change. Also carries the .ins-table base the Stencil table
   markup relies on, which was previously duplicated per component.
   Owns: .crm-*, .fld/.k/.v, .chip, .pill, .fchip, .hm-strip/.hm-cell, .ins-table,
   .ins-pagination, and the ins-fade-in-up / ins-zoom-in keyframes.
   ============================================================================ */
/*
  crm-record.css (shared by the CRM Contact and Company record pages)
  Source: "CRM Contact v1.4 - Shane.dc.html" (Claude Design canvas page), single <style> block extracted verbatim,
  PLUS the rules that exist only in "CRM Company v1.0 - Faizal.dc.html" (its <style> block diffed against Contact's
  on 2026-09-07). Both pages import this file; the Contact copy (crm-contact.css) was promoted here and deleted.
  Extraction date: 2026-09-07

  Company-only additions (marked "Company v1.0" below): the .crm-tabhd:has(label.crm-search) wrapped-header rule,
  and the crmpage 560px block that wraps .crm-tabhd, stacks the tab-header search + action pair and visually hides
  the .crm-sbprefix search-scope prefix (sr-only). Every other Company rule already existed in the Contact block
  with identical selectors and thresholds (Company only moved the .crm-toastwrap / .crm-bulkrow rules into an
  earlier 560px block, which changes nothing), so nothing else was added or duplicated. Company's block lacks
  Contact's .crm-stickybar rules and the ins-fade-in-up keyframe; both are kept because the Contact page and the
  shared ReferenceSection / menus rely on them.

  The bare a{} rules are scoped to the two record pages (.view-contact, .view-company) so they cannot restyle
  anchors elsewhere in the admin.

  Cleaning applied: ONLY the rules below were removed. They target the Claude-Design preview-frame
  class .om-touch-preview, which does not exist in the Vue app. No rules targeting sc-if / sc-for /
  x-import / x-dc / dc-import / helmet existed in the stylesheet (verified by search), so nothing else
  was touched. Nothing renamed, reordered or reformatted. Original comments are all retained, including
  the two comment lines that introduced the removed .om-touch-preview block.

  Removed selectors (original line number in the Contact <style> block -> selector):
    L131  .om-touch-preview .crm-relacts
    L132  .om-touch-preview .crm-relacts > .crm-relkebab
    L133  .om-touch-preview .crm-relacts:not(.crm-relopen) > *:not(.crm-relkebab)
    L134  .om-touch-preview .crm-addracts
    L135  .om-touch-preview .crm-addracts > .crm-relkebab
    L136  .om-touch-preview .crm-addracts:not(.crm-relopen) > a
    L137  .om-touch-preview .crm-addracts.crm-relopen
    L138  .om-touch-preview .crm-addracts.crm-relopen > .crm-relkebab
    L139  .om-touch-preview .crm-refwrap div:has(> .crm-addracts.crm-relopen)
    L141  .om-touch-preview .crm-refwrap div:has(> .crm-addracts)
    L142  .om-touch-preview .crm-addracts.crm-relopen a
    L145  .om-touch-preview .crm-relacts.crm-relopen
    L146  .om-touch-preview .crm-relacts.crm-relopen > .crm-relkebab
    L147  .om-touch-preview .crm-relacts.crm-relopen a
    L148  .om-touch-preview .crm-relacts.crm-relopen .crm-rellabel
    L150  .om-touch-preview .crm-relcard .chip
*/

.view-contact a,.view-company a{color:var(--ins-main)}.view-contact a:hover,.view-company a:hover{color:var(--ins-main-dark)}
.crm-lnk{padding:4px 8px;margin:-4px -8px;border-radius:var(--ins-radius);text-decoration:none}
/* Reference field grid: 3 columns, 2 on tablet-width panels, 1 on mobile (container query — preview frames resize the panel, not the viewport) */
.crm-refwrap{container-type:inline-size}
/* Record grid: the third at-a-glance rail only appears when the content area is 21in-monitor wide (container query — preview frames resize the panel, not the viewport) */
.crm-recwrap{container-type:inline-size}
.crm-recgrid{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:var(--ins-space-md);align-items:start}
.crm-recgrid .crm-rail3{display:none}
/* Tablet & mobile: header metrics move out of the identity card into their own full-width card */
.crm-pagewrap{container-type:inline-size;container-name:crmpage}
.crm-hm-card{display:none}
@container (max-width:900px){.crm-hm-inline{display:none !important}.crm-hm-card{display:block}}
/* Tablet & mobile: left rail cards stack above the tab panel in one column */
@container (max-width:900px){.crm-recgrid,.crm-recgrid.crm-wide3{grid-template-columns:minmax(0,1fr)}}
/* Phone widths: identity stacks under the avatar and the actions menu pins to the card's top right */
@container crmpage (max-width:560px){
  .crm-hdr{flex-direction:column;align-items:flex-start !important;gap:var(--ins-space-sm) !important}
  /* Only the avatar row shares space with the pinned kebab, so the identity block keeps the full width */
  .crm-hdr > span[aria-hidden="true"]{margin-right:calc(36px + var(--ins-space-sm))}
  /* Stacked metrics: no stray column dividers, and each row gets its own breathing room */
  .crm-hm-card{padding:var(--ins-space-sm) !important}
  .crm-hm-card .hm-strip{gap:var(--ins-space-xs)}
  .crm-hm-card .hm-strip > div{border-left:none !important;flex-basis:100% !important}
  .crm-hm-card .hm-cell{padding:var(--ins-space-xs) var(--ins-space-sm) !important}
  /* Phone widths: filters stack, each control takes the full row */
  .crm-toolbar{flex-direction:column;align-items:stretch !important}
  .crm-toolbar > div:not(.crm-btns){width:100%}
  .crm-toolbar .fchip{width:100%;justify-content:flex-start}
  /* value sits with the caret on the right, label stays left */
  .crm-toolbar .fchip strong{margin-left:auto}
  /* Filter menus span the toolbar row instead of a 170-220px popover */
  .crm-toolbar [role="menu"]{left:0;right:0;min-width:0 !important}
  /* Pagination centres its rows-per-page, range and pager instead of splitting them apart */
  .ins-pagination{justify-content:center}
  .ins-pagination__spacer{display:none}
  /* Reference section actions (ADD …, REFRESH) take the full row.
     The app's section components add their own root element inside .crm-refwrap, so the CTA row sits
     one level deeper than in the prototype; both depths are matched. */
  .crm-refwrap > div > button,
  .crm-refwrap > div > div > button{width:100%;justify-content:center}
  .crm-addrgrid a[target="_blank"]{width:100%;box-sizing:border-box;justify-content:center}
  /* Tab header: primary action moves above the total and spans the row */
  .crm-tabhd{flex-direction:column-reverse;align-items:stretch}
  .crm-tabhd > button{width:100%;justify-content:center}
  .crm-refwrap > div:has(> button),
  .crm-refwrap > div > div:has(> button){flex-direction:column;align-items:stretch}
  /* higher specificity than the 1100px block below, which also uses !important */
  .crm-toolbar label.crm-search{width:100%;box-sizing:border-box;flex:0 0 auto !important;max-width:none !important;margin-left:0 !important}
  .crm-toolbar .crm-btns{width:100%;flex-direction:column;align-items:stretch}
  .crm-toolbar .crm-btns > button{width:100%;justify-content:center}
  .crm-hdr > div{width:100%}
  .crm-hdr-kebab{position:absolute !important;top:var(--ins-space-sm);right:var(--ins-space-sm)}
}
/* Narrow panels: tab-toolbar search moves to its own full-width top row; buttons wrap below, right-aligned */
@container (max-width:1100px){
  .crm-toolbar{row-gap:var(--ins-space-sm) !important;padding-top:var(--ins-space-sm) !important;padding-bottom:var(--ins-space-sm) !important}
  .crm-toolbar .crm-ctrls{display:contents !important}
  .crm-toolbar .crm-btns{order:-2;flex:1 1 100% !important;justify-content:flex-end}
  /* Search keeps its own width and hugs the right edge of whichever row it lands on */
  .crm-toolbar .crm-search{flex:0 1 280px !important;max-width:280px !important;margin-left:auto !important}
}
/* Company v1.0: the two rules below exist only in the Company prototype's <style> block (Contacts tab header). */
/* Wrapped tab headers: the action pair keeps to the right of whichever row it lands on.
   Unconditional — the header wraps on its own width, and the one-row case is already space-between. */
.crm-tabhd:has(label.crm-search) > div{margin-left:auto}
/* Phone only: tab-header search drops below the buttons and spans the row; tablet keeps the desktop row.
   Column direction is forced normal so the 560px column-reverse rule can't invert the order. */
@container crmpage (max-width:560px){
  .crm-tabhd{flex-wrap:wrap}
  .crm-tabhd:has(label.crm-search){flex-direction:column !important;align-items:stretch !important}
  .crm-tabhd:has(label.crm-search) > div{width:100%}
  /* Action pairs stack, each button spanning the row */
  .crm-tabhd:has(label.crm-search) > div{display:flex;flex-direction:column;align-items:stretch;gap:var(--ins-space-xs);margin-left:0}
  /* The scope prefix is implied by the field's own placeholder, so it drops out to leave room for typing */
  .crm-tabhd label.crm-search{min-width:0 !important}
  .crm-sbprefix{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .crm-tabhd:has(label.crm-search) > div > button{width:100%;justify-content:center}
  .crm-tabhd > label.crm-search{order:9;width:100%;box-sizing:border-box;flex:0 0 auto !important;max-width:none !important;margin-left:0 !important}
}
/* Dev note: production breakpoint is 1600px content width (~21in monitor). The preview's device presets zoom cosmetically without changing CSS width (max ~1430px), so the prototype uses 1400px to make the state demoable. */
@container (min-width:1340px){.crm-recgrid.crm-wide3{grid-template-columns:minmax(280px,360px) minmax(0,1fr) minmax(250px,300px)}.crm-recgrid.crm-wide3 .crm-rail3{display:flex}}
/* Left field column stays with the record while the tab panel scrolls; it only scrolls itself when taller than the viewport */
.crm-fieldcol{position:sticky;top:var(--ins-space-md);align-self:start;max-height:calc(100vh - 144px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@container (max-width:900px){.crm-fieldcol{position:static;max-height:none;overflow:visible}}
/* Below the 3-column breakpoint the rail keeps its content: it drops under the left field column instead of disappearing */
@container (max-width:1339px){
  .crm-recgrid.crm-wide3 .crm-rail3{display:flex;grid-column:1;grid-row:2}
  .crm-recgrid.crm-wide3 .crm-tabcol{grid-row:1 / span 2}
  /* The sticky field column has its own height cap, which pushed the rail past the
     fold; below the 3-column breakpoint the column flows so they sit together. */
  .crm-recgrid.crm-wide3 .crm-fieldcol{position:static;max-height:none;overflow:visible}
}
@container (max-width:900px){
  .crm-recgrid.crm-wide3 .crm-rail3{grid-column:1;grid-row:2}
  .crm-recgrid.crm-wide3 .crm-tabcol{grid-row:3}
}
.crm-refgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--crm-grid-gap, var(--ins-space-sm) var(--ins-space-md));padding:var(--crm-grid-pad, var(--ins-space-xs) 0 var(--ins-space-sm))}
.crm-refcards{gap:var(--ins-space-sm)}
.crm-rel2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Relationship card hover: lift + soft shadow; actions float in as a compact cluster at the
   card's right edge on their own surface, so the card's links stay visible and clickable. */
/* Copy buttons line up on the cell's right edge instead of floating after the value */
/* Copy button rides the text inline, so it follows the last wrapped line (Details card keeps its right-aligned rows) */
.crm-refwrap div:has(> button[aria-label="Copy value"]){display:block !important;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.crm-refwrap div:has(> button[aria-label="Copy value"]) > span{overflow-wrap:anywhere;word-break:break-word}
/* Mono values are clipped by design (nowrap + overflow hidden): keep those rows flex so the clip works */
.crm-refwrap div:has(> button[aria-label="Copy value"]):has(> span[style*="nowrap"]){display:flex !important;align-items:center;gap:6px}
.crm-refwrap div:has(> button[aria-label="Copy value"]):has(> span[style*="nowrap"]) > span{min-width:0;white-space:nowrap;word-break:normal;overflow-wrap:normal;text-overflow:ellipsis}
.crm-refwrap div:has(> button[aria-label="Copy value"]):has(> span[style*="nowrap"]) > button{margin-left:0;flex:none}
.crm-refwrap button[aria-label="Copy value"]{display:inline-flex !important;vertical-align:middle;margin-left:6px;position:relative;top:-1px}
/* Pointer devices only: a hover tooltip is dead weight on touch, where a tap fires the action */
@media (hover:hover){
button[data-tip]{position:relative}
button[data-tip]:hover::after,button[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);right:0;z-index:60;white-space:nowrap;padding:4px 8px;border-radius:var(--ins-radius);background:var(--ins-text-1);color:var(--ins-card);font-size:var(--ins-text-xs);font-weight:var(--ins-weight-regular);letter-spacing:0;text-transform:none;pointer-events:none;animation:ins-fade-in-up var(--ins-duration-fast) var(--ins-ease-out)}
/* Tables and cards clip their overflow, so a tooltip there would be cut off */
.ins-table button[data-tip]:hover::after,.crm-toastwrap button[data-tip]:hover::after{display:none}
/* Header-cell buttons keep their tooltip, dropped below so it stays inside the table's scroll box */
.ins-table thead button[data-tip]:hover::after,.ins-table thead button[data-tip]:focus-visible::after{display:block;bottom:auto;top:calc(100% + 6px)}
}
.crm-relcard{transition:box-shadow var(--ins-duration-normal) var(--ins-ease-out),transform var(--ins-duration-normal) var(--ins-ease-out),border-color var(--ins-duration-fast) var(--ins-ease-out)}
.crm-relcard:hover{box-shadow:0 8px 20px rgba(0,0,0,0.08);transform:translateY(-2px);border-color:transparent;z-index:2}
.crm-relacts{position:absolute;top:var(--ins-space-xs);right:var(--ins-space-xs);display:flex;gap:var(--ins-space-3xs);padding:3px;background:var(--ins-card);border:1px solid var(--ins-border-color);border-radius:var(--ins-radius);box-shadow:var(--ins-shadow-1);opacity:0;transform:translateY(-4px);transition:opacity var(--ins-duration-fast) var(--ins-ease-out),transform var(--ins-duration-normal) var(--ins-ease-out);pointer-events:none}
.crm-relcard:hover .crm-relacts,.crm-relacts:focus-within{opacity:1;transform:none;pointer-events:auto}
/* Address actions stay in flow; on desktop the inline Delete/Edit links need no surface, touch gets the kebab panel */
.crm-addracts{position:static;opacity:1;transform:none;pointer-events:auto;background:transparent;border:none;box-shadow:none;padding:0}
@media (hover:hover){
  .crm-addracts.crm-relopen{background:var(--ins-card);border:1px solid var(--ins-border-color);box-shadow:var(--ins-shadow-2);padding:var(--ins-space-3xs)}
}
@media (hover:none){
  .crm-relacts{opacity:1 !important;transform:none !important;pointer-events:auto !important}
  .crm-relacts > .crm-relkebab{display:inline-flex !important}
  .crm-relacts:not(.crm-relopen) > *:not(.crm-relkebab){display:none !important}
  /* Touch: the collapsed kebab is a real menu trigger, so it keeps the card surface */
  .crm-addracts{background:var(--ins-card) !important;border:1px solid var(--ins-border-color) !important;box-shadow:var(--ins-shadow-1) !important;padding:3px !important}
  .crm-addracts > .crm-relkebab{display:inline-flex !important}
  .crm-addracts:not(.crm-relopen) > a{display:none !important}
  .crm-addracts.crm-relopen{position:absolute !important;top:0;right:0;z-index:5;flex-direction:column;align-items:stretch;min-width:132px;gap:1px;padding:var(--ins-space-3xs) !important;background:var(--ins-card) !important;border:1px solid var(--ins-border-color) !important;border-radius:var(--ins-radius);box-shadow:var(--ins-shadow-2) !important}
  .crm-addracts.crm-relopen > .crm-relkebab{display:none !important}
  /* The open panel leaves the flow, so the row keeps the kebab's footprint and nothing shifts */
  .crm-refwrap div:has(> .crm-addracts.crm-relopen){padding-right:34px}
  /* the collapsed kebab sets the row height; hold it so the panel opening never shifts the card */
  .crm-refwrap div:has(> .crm-addracts){min-height:36px !important}
  .crm-addracts.crm-relopen a{width:100% !important;box-sizing:border-box;flex:none !important;justify-content:flex-start !important;gap:10px !important;margin:0 !important;padding:0 8px !important;font-size:var(--ins-text-sm) !important;font-weight:var(--ins-weight-regular) !important}
  .crm-addracts.crm-relopen a{min-height:28px !important;border-radius:var(--ins-radius) !important;text-decoration:none !important}
  .crm-addracts.crm-relopen a i{font-size:var(--iia-glyph-sm) !important;width:16px;display:inline-flex;justify-content:center}
  .crm-relacts.crm-relopen{flex-direction:column;align-items:stretch;min-width:132px;gap:1px;padding:var(--ins-space-3xs);box-shadow:var(--ins-shadow-2);z-index:5}
  .crm-relacts.crm-relopen > .crm-relkebab{display:none !important}
  .crm-relacts.crm-relopen a{width:100% !important;justify-content:flex-start !important;gap:10px;padding:0 8px}
  .crm-relacts.crm-relopen .crm-rellabel{display:inline;font-size:var(--ins-text-sm)}
}
/* Preview frames simulate size, not touch input: mirror the touch rules under the tablet/mobile frame */
  /* the collapsed kebab sets the row height; hold it so the panel opening never shifts the card */
  .crm-addracts.crm-relopen a{min-height:28px !important;border-radius:var(--ins-radius) !important;text-decoration:none !important}
  .crm-addracts.crm-relopen a i{font-size:var(--iia-glyph-sm) !important;width:16px;display:inline-flex;justify-content:center}
/* Collapsed kebab floats over the card, so every row keeps the card's 16px right padding */
@media (hover:none){
  .crm-relcard .chip{flex:0 0 100% !important;align-self:flex-start;max-width:fit-content}
}
.crm-rellabel{display:none}
@container (max-width:900px){.crm-refgrid{grid-template-columns:repeat(2,1fr)}}
@container (max-width: 400px){.crm-refgrid{grid-template-columns:1fr}}
/* Address pairs: below 340px the 280px minimum would overflow the card, so drop to one column */
@container (max-width:340px){.crm-addrgrid{grid-template-columns:minmax(0,1fr) !important}}
/* Cells top-align so wrapped names line up with their row's other columns */
.crm-evtable .ins-table td{vertical-align:top}
.crm-refwrap .crm-evtable .ins-table td,.crm-refwrap .crm-evtable .ins-table th{overflow-wrap:anywhere}
/* v5 row-hover View action: reserved space, revealed on row hover */
.crm-rowview{visibility:hidden;display:block;width:fit-content;margin-top:3px;font-size:var(--ins-text-xs);font-weight:var(--ins-weight-semibold)}
.crm-evtable tr:hover .crm-rowview{visibility:visible}
.crm-sep{visibility:hidden;color:var(--ins-border-color)}
.crm-evtable tr:hover .crm-sep{visibility:visible}
.crm-lnk:hover{background:var(--ins-main-light)}
.crm-scroll{scrollbar-width:thin;scrollbar-color:var(--ins-ui-3) transparent}
.crm-scroll::-webkit-scrollbar{width:8px;height:8px}
.crm-scroll::-webkit-scrollbar-thumb{background:var(--ins-ui-3);border-radius:var(--ins-radius)}
/* Tab strip: thin scrollbar when the strip overflows; vertical wheel scrolls it horizontally */
.crm-tabs{scrollbar-width:thin;scrollbar-color:var(--ins-ui-3) transparent}
.crm-tabs::-webkit-scrollbar{height:6px}
.crm-tabs::-webkit-scrollbar-thumb{background:var(--ins-ui-3);border-radius:var(--ins-radius)}
/* DS Table cells are 16px; pad the outer columns to the card's 24px so the table aligns with the toolbar and tabs */
.crm-evtable .ins-table th:first-child,.crm-evtable .ins-table td:first-child{padding-left:var(--crm-tblpad, var(--ins-space-md))}
.crm-evtable .ins-table th:last-child,.crm-evtable .ins-table td:last-child{padding-right:var(--crm-tblpad, var(--ins-space-md))}
/* v5 sort affordance: an unsorted sortable column shows a grey arrow only while its header is
   hovered; the active column keeps the DS brand-blue arrow at all times. */
.ins-table__sort .icon-sort{visibility:hidden}
.ins-table th.ins-th--sortable:hover .icon-sort{visibility:visible}
.ins-table__sort .icon-sort:before{content:"\e920"}
/* Pager prev/next use the angle glyphs (per review), overriding the DS Pagination's chevrons */
.ins-pagination__pager .icon-chevron-left:before{content:"\f104"}
.ins-pagination__pager .icon-chevron-right:before{content:"\f105"}
/* short value: sits on the label's line, right aligned */
.fld{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ins-space-sm);padding:var(--ins-space-xs) 0}
.fld:last-child,.fldw:last-child{padding-bottom:0}
.fld .k{font-size:var(--crm-k-size,var(--ins-text-xs));color:var(--ins-text-3);flex:none}
.fld .v{font-size:var(--ins-text-sm);color:var(--ins-text-1);text-align:right}
/* Phone: label above value, left aligned — a two-column row leaves too little
   width for an email address, which then wraps ragged-left against the label */
@container crmpage (max-width:560px){
  /* v5 parity on phones: the toast docks to the bottom, full width, out of the chrome's way */
  .crm-toastwrap{top:auto !important;right:var(--ins-space-sm) !important;bottom:var(--ins-space-sm);left:var(--ins-space-sm)}
  .crm-toastwrap .ins-toast{width:100%;max-width:none;box-sizing:border-box}
  /* Phone only: bulk footer stacks, action controls each span a row, pagination below. Tablet keeps them side by side. */
  .crm-bulkrow{flex-direction:column;align-items:stretch !important}
  .crm-bulkrow > div:last-child{width:100%}
  .crm-bulkrow > div:first-child{flex-direction:column;align-items:stretch;width:100%}
  .crm-bulkrow > div:first-child > div{width:100%}
  .crm-bulkrow > div:first-child > div > button{width:100%;justify-content:space-between}
  .crm-bulkrow > div:first-child > button{width:100%;justify-content:center}
  .fld{flex-direction:column;align-items:stretch;gap:var(--ins-space-3xs)}
  .fld .v{text-align:left;justify-content:flex-start !important;align-items:flex-start !important}
  .fld .v > button[aria-label^="Copy"]{margin-top:3px}
  .crm-mkv{flex-direction:column !important;align-items:stretch !important;gap:var(--ins-space-3xs) !important}
  .crm-mkv > span:last-child{text-align:left !important}
}
/* long value: own line, left aligned, so it never wraps ragged-left */
.fldw{display:flex;flex-direction:column;gap:var(--ins-space-3xs);padding:var(--ins-space-xs) 0}
.fldw .k{font-size:var(--crm-k-size,var(--ins-text-xs));color:var(--ins-text-3)}
.fldw .v{font-size:var(--ins-text-sm);color:var(--ins-text-1);line-height:var(--ins-leading-snug);overflow-wrap:anywhere}
.unset{font-size:var(--ins-text-xs);color:var(--ins-text-3);font-style:italic}
.chip{font-size:var(--ins-text-xs);font-weight:var(--ins-weight-semibold);background:var(--ins-ui-1);color:var(--ins-text-3);border-radius:999px;padding:2px 8px}
.pill{display:inline-flex;align-items:center;font-size:var(--ins-text-xs);color:var(--ins-text-1);background:var(--ins-ui-1);border-radius:var(--ins-radius);padding:3px 9px}
.fchip{display:inline-flex;align-items:center;gap:7px;font-size:var(--ins-text-xs);color:var(--ins-text-1);background:var(--ins-ui-3);border-radius:var(--ins-radius);padding:6px 11px;border:none;font-family:inherit;cursor:pointer}
@keyframes crm-drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* Design-system animation (_ds/tokens/animations.css) used by menus, tooltips, reference bodies; the bundle does not ship it. */
@keyframes ins-fade-in-up{0%{opacity:0;transform:translate3d(0,16px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
/* Design-system animation used by the Company prototype's confirm-delete and configure-metrics dialogs (animation:ins-zoom-in ...); the bundle does not ship it either. */
@keyframes ins-zoom-in{0%{opacity:0;transform:scale(0.96)}100%{opacity:1;transform:scale(1)}}
/* Zebra striping (tweak): even rows washed for wide-table scanning */
.crm-zebra tbody tr:nth-child(odd){background:var(--ins-ui-1)}
/* Hover paints on the cells, not the row: the sticky first cell is opaque, so a row-level tint
   would only show in the other columns (and vice versa) */
.crm-zebra tbody tr:hover{background:transparent !important}
.crm-zebra tbody tr:hover td{background:linear-gradient(rgba(0,0,0,0.03),rgba(0,0,0,0.03)),var(--ins-card)}
.crm-zebra tbody tr:nth-child(odd):hover td{background:linear-gradient(rgba(0,0,0,0.03),rgba(0,0,0,0.03)),var(--ins-ui-1)}
/* Narrow desktop: the primary column stays put while the rest of the table scrolls */
.crm-evtable .ins-table th:first-child,.crm-evtable .ins-table td:first-child{position:sticky;left:0;z-index:2;background:var(--ins-card);box-shadow:1px 0 0 var(--ins-border-color)}
/* Selection tables: the 44px checkbox strip carries no identity, so the name column pins beside it */
.crm-selcols .ins-table th:first-child,.crm-selcols .ins-table td:first-child{box-shadow:none}
.crm-selcols .ins-table th:nth-child(2),.crm-selcols .ins-table td:nth-child(2){position:sticky;left:44px;z-index:2;background:var(--ins-card);box-shadow:1px 0 0 var(--ins-border-color)}
.crm-zebra.crm-selcols tbody tr:nth-child(odd) td:nth-child(2){background:var(--ins-ui-1)}
.crm-zebra.crm-selcols tbody tr:hover td:nth-child(2){background:linear-gradient(rgba(0,0,0,0.03),rgba(0,0,0,0.03)),var(--ins-card)}
.crm-zebra.crm-selcols tbody tr:nth-child(odd):hover td:nth-child(2){background:linear-gradient(rgba(0,0,0,0.03),rgba(0,0,0,0.03)),var(--ins-ui-1)}
.crm-zebra tbody tr:nth-child(odd) td:first-child{background:var(--ins-ui-1)}
.crm-zebra tbody tr:hover td:first-child{background:linear-gradient(rgba(0,0,0,0.03),rgba(0,0,0,0.03)),var(--ins-card)}
.crm-zebra tbody tr:nth-child(odd):hover td:first-child{background:linear-gradient(rgba(0,0,0,0.03),rgba(0,0,0,0.03)),var(--ins-ui-1)}
/* Same striping for the collapsed responsive rows (header div is child 1, so rows start even) */
.crm-mzebra .crm-mrow:nth-child(even){background:var(--ins-ui-1)}
@container crmpage (max-width:900px){
  .crm-zebra tbody tr:hover td,.crm-zebra tbody tr:nth-child(odd):hover td{background:var(--ins-card)}
  .crm-zebra tbody tr:nth-child(odd):hover td{background:var(--ins-ui-1)}
  .crm-selcols .ins-table tbody tr:hover td:nth-child(2){background:var(--ins-card)}
  .crm-zebra.crm-selcols tbody tr:nth-child(odd):hover td:nth-child(2){background:var(--ins-ui-1)}
  .crm-evtable tr:hover .crm-rowview,.crm-evtable tr:hover .crm-sep{visibility:visible}
}
/* Search input states: hover darkens border, focus shows the DS brand ring */
.crm-search{transition:border-color var(--ins-duration-fast) var(--ins-ease-out),box-shadow var(--ins-duration-fast) var(--ins-ease-out)}
/* Wrapped toolbars: the search keeps to the right of its row instead of dropping to the left */
.crm-toolbar .crm-search{margin-left:auto}
.crm-search:hover{border-color:var(--ins-ui-2) !important}
.crm-search:active,.crm-search:focus-within{border-color:var(--ins-main) !important}
.crm-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.crm-search input::-ms-clear{display:none}
/* Fixed layout: column widths hold across sort/pagination instead of tracking page content */
.crm-fixedtable{overflow-x:auto}
@container (max-width:900px){
  .crm-fixedtable .ins-table th:first-child,.crm-fixedtable .ins-table td:first-child{position:sticky;left:0;z-index:1;background:var(--ins-card)}
}
/* Mobile: the table gives way to a collapsible stacked list */
.crm-mobile .crm-evtable{display:none}
.crm-mrow{border-bottom:1px solid var(--ins-border-color)}
/* The pagination footer draws its own top rule, so the last row must not double it */
.crm-mzebra .crm-mrow:not(:has(~ .crm-mrow)){border-bottom:none}
.crm-evtable .ins-table tbody tr:last-child{border-bottom:none}
.crm-evtable .ins-table tbody tr:last-child td{border-bottom:none}
.crm-mhead{display:flex;align-items:flex-start;gap:var(--ins-space-sm);width:100%;box-sizing:border-box;padding:var(--ins-space-sm);border:none;background:transparent;font-family:inherit;text-align:left;cursor:pointer}
/* Multi-line titles: badge, title and caret all start at the row's top edge */
.crm-mhead > span[aria-hidden="true"]{margin-top:0}
/* Icon lists: expanded fields line up with the row title, not the icon */
.crm-micon .crm-mbody{padding-left:calc(var(--ins-space-sm) + 26px + var(--ins-space-sm))}
.crm-mbody{padding:0 var(--ins-space-sm) var(--ins-space-sm);animation:ins-fade-in-up var(--ins-duration-fast) var(--ins-ease-out)}
/* Expanded body reads like the Details card: 12px muted label, 14px primary value, xs vertical rhythm */
.crm-mkv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ins-space-sm);padding:var(--ins-space-xs) 0;font-size:var(--ins-text-sm)}
.crm-mkv > span:first-child{flex:none;font-size:var(--crm-k-size,var(--ins-text-xs));color:var(--ins-text-3)}
.crm-mkv > span:last-child{font-size:var(--ins-text-sm);color:var(--ins-text-1);text-align:right;overflow-wrap:anywhere}
.crm-fixedtable .ins-table{table-layout:fixed;width:100%;min-width:640px}
/* Tables whose column set needs more room than the 640px floor scroll instead of crushing cells */
.crm-fixedtable.crm-widecols .ins-table{min-width:1040px}
.crm-fixedtable.crm-relcols .ins-table{min-width:920px}
/* Relationship cells hold single values, so they stay on one line and the column scrolls; only Notes wraps */
.crm-relcols .ins-table th,.crm-relcols .ins-table td{white-space:nowrap;overflow-wrap:normal}
.crm-relcols .ins-table th:last-child,.crm-relcols .ins-table td:last-child{white-space:normal;overflow-wrap:anywhere}
.crm-fixedtable .ins-table td{overflow-wrap:break-word}
/* Help tooltip: shows on hover, stays open when clicked */
.crm-tipwrap{position:relative;display:inline-flex}
.crm-tip{visibility:hidden;opacity:0;transition:opacity var(--ins-duration-fast) var(--ins-ease-out);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:50;width:max-content;max-width:240px;background:var(--ins-text-1);color:var(--ins-card);font-size:var(--ins-text-xs);line-height:var(--ins-leading-snug);padding:6px 10px;border-radius:var(--ins-radius);box-shadow:var(--ins-shadow-2);pointer-events:none}
.crm-tipwrap:hover .crm-tip,.crm-tip.open{visibility:visible;opacity:1}
.crm-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ins-text-1)}
@keyframes crm-pulse{0%,100%{opacity:1}50%{opacity:0.45}}
.skel{display:block;background:var(--ins-ui-1);border-radius:4px;animation:crm-pulse 1.4s var(--ins-ease-out) infinite}
/* Sticky condensed header: zero-height sticky anchor at the page top; the strip slides down out of it once the full header leaves the scroll viewport. Desktop only. */
.crm-stickybar{position:sticky;top:calc(-1 * var(--ins-space-md));z-index:36;height:0;margin-bottom:calc(-1 * var(--ins-space-md));pointer-events:none}
.crm-stickybar > div{pointer-events:auto;transition:transform var(--ins-duration-normal) var(--ins-ease-out),visibility 0s linear var(--ins-duration-normal)}
.crm-stickybar > div[data-on="true"]{transition:transform var(--ins-duration-normal) var(--ins-ease-out),visibility 0s}
@container crmpage (max-width:900px){.crm-stickybar{display:none}}
.crm-hot a[href],.crm-hot button:not([disabled]),.crm-hot input,.crm-hot select,.crm-hot textarea,.crm-hot [role="tab"],.crm-hot [role="menuitem"],.crm-hot [role="menuitemradio"],.crm-hot [tabindex="0"]{outline:1.5px dashed #6A8BFF;outline-offset:1px;border-radius:var(--ins-radius)}
@media (max-width:1180px){
  .crm-hm-inline.hm-strip{width:100%;order:5;border-top:1px solid var(--ins-border-color);padding-top:var(--ins-space-xs);justify-content:space-between}
  .crm-hm-inline .hm-cell{border-left:none !important;min-width:0 !important;padding:0 !important;align-items:flex-start !important}
  .crm-hm-inline .hm-cell span{text-align:left !important}
}
/* Confirm modal: stacked full-width actions on phones — two lines of wrapped label otherwise */
@container crmpage (max-width:560px){
  /* Primary action sits on top, Cancel below — thumb reach on phones */
  .crm-confirmcard{padding:var(--ins-space-md) var(--ins-space-md) var(--ins-space-sm) !important}
  .crm-confirmbtns{width:100%;align-self:stretch;flex-direction:column;align-items:stretch !important}
  .crm-confirmbtns button{width:100% !important;flex:1 1 auto;justify-content:center}
  .crm-confirmbtns button:first-child{order:2}
}

/* ============================================================================
   IIA v6 admin shell layer (TW#26371963)
   ----------------------------------------------------------------------------
   Ported from the Admin Shell v1.5 design (handoff/admin-shell/AdminShell.dc.html,
   checked in at module-v6-crm/docs/specs/admin-shell/). Every value below is the
   design's own, resolved from its renderVals(): 56px header, 216/64px rail (56px
   below 768px), 13px rail type, 32px rows on a 2px gap, 40px breadcrumb bar,
   breakpoints 640 / 768 / 1024 / 1280.

   Class names are fresh (iia-*) on purpose: none of the 77 legacy .ins-sidebar
   rules or the 35 body.mini rules in this file can match the v6 DOM, so there is
   no specificity war and the default render of both components is untouched. The
   only legacy selectors overridden are the content-column offsets, scoped under
   .iia-shell--v6 so a v5 page is unaffected.

   Tooltips: the design imports a DS Tooltip whose class names (.ins-tooltip__bubble)
   do not exist in this bundle. The behaviour it specifies — 150ms hover delay,
   fast fade-up, instant hide, suppressed after click — is applied to the shared
   [data-tip] mechanism below instead.
   ============================================================================ */

/* ---- shell frame ---------------------------------------------------------- */
.iia-shell--v6 { display: flex; flex-direction: column; min-height: 100vh; background: var(--ins-main-bg); }
.iia-shell--v6 .iia-shell__body { flex: 1; display: flex; min-height: 0; position: relative; }
.iia-shell--v6 .iia-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Legacy content offsets assumed a fixed 240/50px rail and a 75px header. The v6 rail is a flex sibling. */
.iia-shell--v6 .ins-renderer-wrap.content,
.iia-shell--v6 body.mini .ins-renderer-wrap.content,
body.mini .iia-shell--v6 .ins-renderer-wrap.content { margin-left: 0; width: auto; max-width: 100%; flex: 1 1 0%; min-width: 0; padding-top: var(--ins-space-md); min-height: 0; transition: none; }
/* width:auto, not 100%: in overlay mode (<1280px) the body row carries a collapsed-rail gutter as
   padding, and a 100% block would run that many pixels past the viewport. */
.iia-shell--v6 .ins-renderer-wrap.content.no-sidebar { margin-left: 0; width: auto; }
/* The breadcrumb bar in the header replaces the crumbs the renderer drew inside the content column, and the
   crumbs every module SPA draws in its own page title (Header.vue › .page-title-wrapper › ins-breadcrumbs in all
   eleven modules). One trail, owned by the shell; the module copy stays in the DOM so its route data still flows. */
.iia-shell--v6 .ins-renderer-wrap .ins-breadcrumbs-wrap,
.iia-shell--v6 .page-title-wrapper ins-breadcrumbs,
.iia-shell--v6 .page-title-wrapper .hide-last-breadcrumb { display: none; }
/* With its crumbs hidden, a page title that has no title text, no buttons and no filters is an empty box that still
   kept its 24px bottom margin and the empty h1's 8px, leaving 56px instead of the 24px gutter under the breadcrumb bar
   on every record view (TW#26897268). Collapse it; a title or buttons keep it. Browsers without :has() keep the gap. */
.iia-shell--v6 .page-title-wrapper:not(:has(.header-title:not(:empty))):not(:has(.buttons-wrapper)):not(:has(> :nth-child(2))) { display: none; }
/* The content column is the scroller, as in the prototype (<main style="flex:1;overflow-y:auto">): header and rail
   stay put, the page scrolls beneath the breadcrumb bar. Legacy app.min.css gives .ins-renderer-wrap overflow:hidden
   from the iframe era, which inside this fixed-height frame clipped every SPA page taller than the viewport and left
   nothing to scroll. */
.iia-shell--v6 .ins-renderer-wrap.content { overflow-y: auto; overflow-x: hidden; }
.iia-shell--v6 .ins-renderer-wrap iframe { height: calc(100vh - 56px - 40px); }
.iia-shell--v6 .ins-renderer-wrap { padding-left: var(--ins-space-md); }
/* Overlay-only scrollbar (design): a reserved gutter would eat a fifth of the collapsed rail. */
.iia-railscroll { scrollbar-width: none; -ms-overflow-style: none; }
.iia-railscroll::-webkit-scrollbar { width: 0; display: none; }

/* ---- header ---------------------------------------------------------------- */
ins-header.iia-hdr-host { display: block; position: relative; z-index: var(--iia-z-header); }
ins-header.iia-hdr-host--raised { z-index: var(--iia-z-header-raised); }
.iia-hdr {
  height: 56px; background: var(--ins-chrome-bg); color: var(--ins-chrome-fg);
  display: grid; grid-template-columns: 1fr minmax(200px, 480px) 1fr; align-items: center;
  gap: var(--ins-space-sm); padding: 0 var(--ins-space-sm); position: relative; box-sizing: border-box;
  font-family: var(--ins-font-family); font-size: var(--ins-text-sm); line-height: var(--ins-leading-normal);
}
/* The design inherits the DS body leading (1.6) everywhere in the chrome; the admin page's Foundation reset
   gives <button> a line-height of 1, which shortened every button-based row and label by 3-8px. */
.iia-hdr button, .iia-hdr a, .iia-menu button, .iia-menu a, .iia-switcher button, .iia-switcher a, .iia-flyout a, .iia-dialog button { line-height: inherit; }
.iia-hdr--no-chat { grid-template-columns: auto 1fr; padding: 0 6px; }
.iia-hdr__left { display: flex; align-items: center; gap: var(--ins-space-sm); justify-self: start; min-width: 0; }
.iia-hdr--no-chat .iia-hdr__left { gap: 0; }
.iia-hdr__toggle {
  width: 34px; height: 34px; border: none; border-radius: var(--ins-radius); background: transparent; color: var(--ins-chrome-fg-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit;
}
.iia-hdr__toggle i { font-size: var(--iia-glyph-lg); transition: transform var(--ins-duration-normal) var(--ins-ease-out); }
.iia-hdr__toggle:hover, .iia-hdr__toggle:focus-visible { background: var(--ins-chrome-hover); color: var(--ins-chrome-fg); outline: none; }
.iia-hdr__logo { display: flex; align-items: center; text-decoration: none; color: inherit; }
.iia-hdr__logo img { height: 36px; width: auto; display: block; }
.iia-hdr__right { justify-self: end; display: flex; align-items: center; flex: none; gap: var(--ins-space-xs); }
.iia-hdr--no-chat .iia-hdr__right { gap: var(--ins-space-3xs); }
.iia-hdr__btn {
  flex: none; width: 32px; height: 32px; border: none; border-radius: var(--ins-radius); background: transparent; color: var(--ins-chrome-fg-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; font-family: inherit; position: relative;
}
.iia-hdr__btn:hover, .iia-hdr__btn:focus-visible { background: var(--ins-chrome-hover); color: var(--ins-chrome-fg); outline: none; }
.iia-hdr__btn i { font-size: var(--ins-text-md); }
.iia-hdr__badgewrap { position: relative; display: flex; }
.iia-hdr__menuwrap { position: relative; flex: none; }
.iia-hdr__account { margin-left: var(--ins-space-xs); }
.iia-hdr--no-chat .iia-hdr__account { margin-left: var(--ins-space-3xs); }
.iia-hdr__avatarbtn { border: none; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 32px; height: 32px; position: relative; }
.iia-hdr__avatarbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ins-chrome-focus); }
.iia-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ins-main); color: var(--iia-text-white); font-size: var(--ins-text-xs); font-weight: var(--ins-weight-semibold); display: flex; align-items: center; justify-content: center; flex: none; }
.iia-avatar--lg { width: 36px; height: 36px; }
@media (max-width: 767px) {
  .iia-hdr__toggle, .iia-hdr__btn, .iia-hdr__avatarbtn { width: 44px; height: 44px; }
}

/* ---- support pill ---------------------------------------------------------- */
.iia-chat {
  position: relative; width: 100%; min-width: 0; height: 36px; display: flex; align-items: center; gap: var(--ins-space-xs); padding: 0 var(--ins-space-xs);
  background: var(--ins-chrome-hover); border: 1px solid var(--ins-chrome-border); border-radius: var(--ins-radius); color: var(--ins-chrome-fg-subtle);
  font-family: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.iia-chat:hover { border-color: var(--ins-chrome-fg-subtle); }
.iia-chat:focus-visible { outline: none; border-color: var(--ins-chrome-focus); }
.iia-chat > i { font-size: var(--ins-text-md); }
.iia-chat__presence { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--ins-text-xs); color: var(--ins-chrome-fg); }
.iia-chat__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ins-alert-positive); }
/* Outside support hours (TW#26801633): the label is the reply-time line and the dot goes muted. */
.iia-chat__presence--away { color: var(--ins-chrome-fg-muted); }
.iia-chat__dot--away { background: var(--ins-chrome-fg-subtle); }
.iia-chat__badge {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px; border-radius: var(--ins-radius-pill);
  background: var(--iia-badge-negative); color: var(--iia-text-white); font-size: 10px; line-height: 1; font-weight: var(--ins-weight-semibold);
  display: flex; align-items: center; justify-content: center;
}
.iia-chat__badge--lg { top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: 11px; border: 2px solid var(--ins-chrome-bg); }

/* ---- environment chip + switcher --------------------------------------- */
.iia-env { position: relative; flex: none; margin-right: var(--ins-space-xs); }
.iia-hdr--no-chat .iia-env { margin-right: var(--ins-space-3xs); }
.iia-env__trigger { display: flex; align-items: center; gap: 8px; min-height: 44px; border: none; padding: 0; background: transparent; font-family: inherit; cursor: pointer; color: var(--ins-chrome-fg-muted); }
.iia-env__trigger:focus-visible { outline: none; }
.iia-env__trigger:focus-visible .iia-env__chip { box-shadow: 0 0 0 2px var(--ins-chrome-focus); }
.iia-env__chip {
  display: flex; align-items: center; border-radius: var(--ins-radius); padding: 5px 12px; background: var(--ins-instance-staging); color: var(--iia-text-white);
  font-size: var(--iia-text-2xs); font-weight: var(--ins-weight-semibold); letter-spacing: 0.02em; text-transform: uppercase;
}
.iia-env__chip--production { background: var(--ins-instance-production); }
.iia-env__caret { flex: none; color: var(--ins-chrome-fg-muted); }

.iia-scrim { position: fixed; inset: 0; }
.iia-scrim--menu { background: var(--iia-overlay-scrim); z-index: var(--iia-z-menu); }
.iia-scrim--overlay { background: var(--iia-overlay-scrim); z-index: var(--iia-z-overlay); display: flex; justify-content: center; align-items: center; padding: var(--ins-space-md); box-sizing: border-box; }
.iia-scrim--center { align-items: center; }

.iia-switcher {
  position: absolute; right: 0; top: calc(100% + var(--ins-space-2xs)); width: 472px; max-height: min(70vh, 560px);
  display: flex; flex-direction: column; background: var(--ins-card); border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius);
  box-shadow: var(--ins-shadow-2); z-index: calc(var(--iia-z-menu) + 1); outline: none; color: var(--ins-text-2); line-height: var(--ins-leading-normal);
  animation: ins-fade-in-up var(--ins-duration-fast) var(--ins-ease-out);
}
/* Double class on purpose: the mobile media rule below sets `top: calc(100% + 6px)` on .iia-switcher at
   the same specificity and later in the file; on a fixed element that percentage is the viewport, which
   put the docked panel below the screen. */
.iia-switcher.iia-switcher--docked { position: fixed; left: 12px; right: 12px; top: 62px; width: auto; max-height: calc(100vh - 74px); border-radius: var(--ins-radius); }
.iia-switcher__title { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--ins-border-color); font-size: 14px; font-weight: var(--ins-weight-semibold); color: var(--ins-text-1); }
.iia-switcher__search { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--ins-border-color); }
.iia-switcher__searchbox { display: flex; align-items: center; gap: var(--ins-space-xs); padding: 7px 10px; border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius); background: var(--ins-main-bg); }
.iia-switcher__searchbox i { font-size: var(--ins-text-md); color: var(--ins-ui-2); }
.iia-switcher__searchbox input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--ins-text-sm); color: var(--ins-text-1); }
.iia-switcher__list { flex: 1; min-height: 0; overflow-y: auto; position: relative; padding: 4px; }
.iia-switcher__pill { position: absolute; left: 4px; right: 4px; top: 0; border-radius: var(--ins-radius); background: var(--ins-ui-1); pointer-events: none; }
.iia-switcher__empty { padding: 20px 12px; text-align: center; font-size: var(--ins-text-sm); color: var(--ins-text-3); }
.iia-switcher__group { position: relative; border-top: 1px solid var(--ins-border-color); margin: 4px 0 0; }
.iia-switcher__group--first { border-top: none; margin: 0; }
/* Design: group labels carry the environment's text-safe ink, 12px above (8px in the first group), 4px below. */
.iia-switcher__grouplabel { padding: 12px 12px 4px; font-size: var(--iia-text-2xs); font-weight: var(--ins-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--iia-instance-staging-text); }
.iia-switcher__group--first .iia-switcher__grouplabel { padding-top: 8px; }
.iia-switcher__group--production .iia-switcher__grouplabel { color: var(--iia-instance-production-text); }
.iia-switcher__row {
  position: relative; display: flex; align-items: center; gap: var(--ins-space-xs); width: 100%; box-sizing: border-box; min-height: 52px; padding: 8px 8px 8px 12px;
  border-radius: var(--ins-radius); background: transparent; font-family: inherit; font-size: var(--ins-text-sm); cursor: pointer; text-align: left; color: var(--ins-text-2);
  animation: ins-fade-in-up var(--ins-duration-normal) var(--ins-ease-out) both;
}
.iia-switcher__row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ins-main); }
.iia-switcher__row.is-current { cursor: default; }
.iia-switcher__row.is-current.is-production { background: var(--iia-instance-production-light); }
.iia-switcher__row.is-current.is-staging { background: var(--iia-instance-staging-light); }
.iia-switcher__text { flex: 1; min-width: 0; position: relative; }
.iia-switcher__name { display: block; font-weight: var(--ins-weight-semibold); color: var(--ins-text-1); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iia-switcher__domain { display: inline-flex; max-width: 100%; align-items: center; gap: var(--ins-space-2xs); margin-top: 1px; font-size: var(--ins-text-xs); color: var(--ins-text-3); text-decoration: none; border-radius: 2px; }
.iia-switcher__domain:hover { color: var(--ins-main); }
.iia-switcher__domain > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iia-switcher__domain i { flex: none; font-size: var(--ins-text-xs); color: var(--ins-ui-2); position: relative; top: -1px; }
.iia-switcher__current { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; width: 76px; padding-right: 4px; box-sizing: border-box; }
.iia-switcher__check { width: 20px; height: 20px; border-radius: 50%; background: var(--ins-instance-staging); color: var(--iia-text-white); display: inline-flex; align-items: center; justify-content: center; }
.is-production .iia-switcher__check { background: var(--ins-instance-production); }
.iia-switcher__check i { font-size: 11px; }
.iia-switcher__switch { flex: none; display: flex; justify-content: flex-end; width: 76px; }
.iia-switcher__switch ins-button .ins-button { height: 32px; min-width: 76px; text-transform: uppercase; }
.iia-switcher__foot { flex: none; padding: 10px 16px; border-top: 1px solid var(--ins-border-color); font-size: var(--ins-text-xs); line-height: 1.5; color: var(--ins-text-3); }
.iia-switcher__foot a { color: var(--ins-main); text-decoration: underline; text-underline-offset: 2px; border-radius: 2px; }
.iia-switcher__foot a:hover { color: var(--ins-main-dark); }
@media (max-width: 1023px) {
  .iia-switcher__row { min-height: 60px; }
  .iia-switcher__name { font-size: 14px; }
  .iia-switcher__domain { min-height: 24px; }
}

/* ---- header menus (help, account) ---------------------------------------- */
.iia-menu {
  position: absolute; right: 0; top: calc(100% + 12px); background: var(--ins-card); border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius);
  box-shadow: var(--ins-shadow-2); z-index: var(--iia-z-menu); color: var(--ins-text-2); font-family: var(--ins-font-family); line-height: var(--ins-leading-normal);
  animation: ins-fade-in-up var(--ins-duration-fast) var(--ins-ease-out); transform-origin: top right;
}
@media (max-width: 767px) { .iia-menu, .iia-switcher { top: calc(100% + 6px); } }
.iia-menu--help { width: 232px; padding: var(--ins-space-2xs); }
.iia-menu--account { width: 264px; padding-bottom: var(--ins-space-2xs); }
.iia-menu__head { padding: var(--ins-space-sm); border-bottom: 1px solid var(--ins-border-color); display: flex; gap: var(--ins-space-xs); align-items: center; }
.iia-menu__who { min-width: 0; }
.iia-menu__name { font-size: var(--ins-text-sm); font-weight: var(--ins-weight-semibold); color: var(--ins-text-1); }
.iia-menu__email { font-size: var(--ins-text-xs); color: var(--ins-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iia-menu__list { position: relative; padding: var(--ins-space-2xs); display: flex; flex-direction: column; gap: 2px; }
.iia-menu--help { position: absolute; }
.iia-menu__pill { position: absolute; left: var(--ins-space-2xs); right: var(--ins-space-2xs); top: 0; border-radius: var(--ins-radius); background: var(--ins-ui-1); pointer-events: none; }
.iia-menu--help .iia-menu__pill { left: var(--ins-space-2xs); right: var(--ins-space-2xs); }
.iia-menu__row {
  position: relative; display: flex; align-items: center; gap: var(--ins-space-xs); width: 100%; box-sizing: border-box; height: 40px; padding: 0 var(--ins-space-xs);
  border: none; border-radius: var(--ins-radius); background: transparent; color: var(--ins-text-2); font-family: inherit; font-size: 13px; cursor: pointer; text-align: left;
  text-decoration: none; transition: color 150ms var(--ins-ease-out);
}
.iia-menu__row:hover, .iia-menu__row:focus-visible { color: var(--ins-text-1); outline: none; }
.iia-menu__row.is-disabled { color: var(--ins-text-3); opacity: var(--ins-disabled-opacity); cursor: default; }
.iia-menu__row > i, .iia-menu__glyph, .iia-menu__fonticon { flex: none; color: var(--ins-ui-2); }
.iia-menu__row > i { font-size: var(--ins-text-md); }
.iia-menu__fonticon { width: 16px; text-align: center; }
.iia-menu__ext { margin-left: auto; font-size: var(--ins-text-xs); color: var(--ins-ui-2); }
.iia-menu__kbd { margin-left: auto; font-size: var(--ins-text-xs); border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius); padding: 1px 7px; color: var(--ins-text-3); }

/* ---- tooltips on chrome (shared data-tip, design timing) ----------------- */
.iia-hdr [data-tip] { position: relative; }
/* Geometry is the DS Tooltip's (placement=bottom): bubble 8px under the trigger, 6px 10px padding, 12px/1.4
   type on --iia-sidebar, --ins-shadow-2, a 10px arrow, centred on the trigger, 4px rise on show. */
.iia-hdr [data-tip]::after, .iia-hdr [data-tip]::before {
  position: absolute; left: 50%; z-index: var(--iia-z-menu); pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity var(--ins-duration-fast) var(--ins-ease-out) 0s, transform var(--ins-duration-fast) var(--ins-ease-out) 0s, visibility 0s linear 0s;
}
.iia-hdr [data-tip]::after {
  content: attr(data-tip); top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px);
  white-space: nowrap; padding: 6px 10px; border-radius: var(--ins-radius); background: var(--iia-sidebar); color: var(--iia-text-white); box-shadow: var(--ins-shadow-2);
  font-size: var(--ins-text-xs); line-height: 1.4; font-weight: var(--ins-weight-regular); letter-spacing: 0; text-transform: none;
}
.iia-hdr [data-tip]::before { content: ''; top: calc(100% - 2px); width: 0; height: 0; border: 5px solid transparent; border-bottom-color: var(--iia-sidebar); transform: translateX(-5px) translateY(-4px); }
.iia-hdr [data-tip]:hover::after, .iia-hdr [data-tip]:focus-visible::after, .iia-hdr [data-tip]:hover::before, .iia-hdr [data-tip]:focus-visible::before {
  opacity: 1; visibility: visible;
  transition-delay: 150ms, 150ms, 150ms; /* 150ms hover delay; hide is instant (delays above are 0) */
}
.iia-hdr [data-tip]:hover::after, .iia-hdr [data-tip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
  /* The bundle's generic `button[data-tip]:hover::after` (0,2,2) outranks the base rule above (0,2,1):
     it places its bubble ABOVE the button (bottom, right, an animation) and restyles it (4px 8px padding,
     --ins-text-1 fill, z 60). Every visual the design specifies is restated here at (0,3,2). */
  top: calc(100% + 8px); bottom: auto; right: auto; animation: none; left: 50%;
  padding: 6px 10px; background: var(--iia-sidebar); color: var(--iia-text-white); box-shadow: var(--ins-shadow-2); z-index: var(--iia-z-menu);
  font-size: var(--ins-text-xs); line-height: 1.4; border-radius: var(--ins-radius);
}
[data-theme="dark"] .iia-hdr [data-tip]:hover::after, [data-theme="dark"] .iia-hdr [data-tip]:focus-visible::after { background: var(--iia-header); color: var(--iia-sidebar); }
.iia-hdr [data-tip]:hover::before, .iia-hdr [data-tip]:focus-visible::before { transform: translateX(-5px) translateY(0); }
.iia-hdr [data-tip][data-tip-off]::after, .iia-hdr [data-tip][data-tip-off]::before { opacity: 0 !important; visibility: hidden !important; }
/* Bubbles are centred on every trigger, as the DS Tooltip is; the admin page's <html> has overflow-x hidden,
   so a bubble that pokes past a phone viewport never adds scroll width. */
/* Bubbles hang below the 56px bar over the rail (z 40) and the content; the header sits at z 30, so a
   showing bubble would paint behind the rail. Raise the header for as long as one of its tips shows. */
ins-header.iia-hdr-host:has([data-tip]:hover:not([data-tip-off]), [data-tip]:focus-visible) { z-index: var(--iia-z-header-raised); }
/* DS tooltip bubble is dark; invert it against dark chrome in dark mode (design). */
[data-theme="dark"] .iia-hdr [data-tip]::after { background: var(--iia-header); color: var(--iia-sidebar); }
[data-theme="dark"] .iia-hdr [data-tip]::before { border-bottom-color: var(--iia-header); }
/* Design review: no focus rings in the prototype; focus is carried by background/colour states above. */

/* ---- breadcrumb bar ------------------------------------------------------- */
/* Design: the bar sits INSIDE the content column, beside the rail (rail runs from y=56). ins-header owns it,
   so it is positioned from the header host's box and follows the rail width; the shell gets
   `iia-shell--crumbs` from the header while a bar is showing, which pads the content column down 40px. */
.iia-crumbs { position: absolute; top: 56px; left: 216px; right: 0; z-index: 1; display: flex; height: 40px; box-sizing: border-box; background: var(--ins-header-bg); border-bottom: 1px solid var(--ins-border-color); align-items: center; padding: 0 var(--ins-space-md); gap: var(--ins-space-xs); font-size: var(--ins-text-xs); line-height: var(--ins-leading-normal); color: var(--ins-text-3); font-family: var(--ins-font-family); transition: left var(--ins-duration-normal) var(--ins-ease-out); }
body.mini .iia-crumbs { left: 64px; }
@media (max-width: 767px) { body.mini .iia-crumbs { left: 56px; } }
.iia-shell--v6.iia-shell--crumbs .iia-shell__main { padding-top: 40px; }
.iia-crumbs__nav { min-width: 0; display: flex; align-items: center; gap: var(--ins-space-xs); }
.iia-crumbs__home { display: flex; align-items: center; gap: 6px; color: var(--ins-text-3); border-radius: var(--ins-radius); text-decoration: none; }
.iia-crumbs__home i { font-size: var(--ins-chrome-glyph-sm); }
.iia-crumbs__home:hover, .iia-crumbs__link:hover { color: var(--ins-main); }
.iia-crumbs__sep { font-size: var(--iia-glyph-2xs); color: var(--ins-ui-2); }
.iia-crumbs__link { color: var(--ins-text-3); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--ins-radius); text-decoration: none; }
.iia-crumbs__current { color: var(--ins-text-1); font-weight: var(--ins-weight-semibold); white-space: nowrap; }
/* A module heading with a submenu and no route of its own (the v5 pages' "CRM" crumb): plain text, not a dead link. */
.iia-crumbs__text { color: var(--ins-text-3); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- help panel (ins-help-panel; design L336–355) ------------------------- */
ins-help-panel { display: block; }
ins-help-panel[hidden] { display: none; }
.iia-help { display: flex; flex-direction: row; gap: var(--ins-space-md); align-items: center; background: var(--ins-card); border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius); padding: var(--ins-space-md); position: relative; margin-bottom: var(--ins-space-md); font-family: var(--ins-font-family); line-height: var(--ins-leading-normal); animation: ins-fade-in-up var(--ins-duration-normal) var(--ins-ease-out); }
.iia-help__graphic { flex: none; }
.iia-help__text { min-width: 0; padding-right: var(--ins-space-lg); align-self: stretch; }
.iia-help__heading { font-size: var(--ins-text-md); font-weight: var(--ins-weight-semibold); color: var(--ins-text-1); }
.iia-help__body { margin: var(--ins-space-2xs) 0 var(--ins-space-xs); font-size: var(--ins-text-sm); line-height: var(--ins-leading-snug); color: var(--ins-text-3); max-width: 640px; text-wrap: pretty; }
.iia-help__dismiss { position: absolute; top: var(--ins-space-xs); right: var(--ins-space-xs); width: 28px; height: 28px; border: none; border-radius: var(--ins-radius); background: transparent; color: var(--ins-ui-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--ins-chrome-glyph-sm); }
.iia-help__dismiss:hover { background: var(--ins-ui-1); color: var(--ins-text-1); }
.iia-help__dismiss:focus-visible { outline: 2px solid var(--ins-main); outline-offset: 1px; }
@media (max-width: 767px) { .iia-help { flex-direction: column; align-items: flex-start; } .iia-help__text { padding-right: 0; } }
/* The graphic's build animation (design L109–114). */
@keyframes iia-bar-build { 0% { transform: scaleY(0); opacity: 0; } 8% { opacity: 1; } 16% { transform: scaleY(1.09); opacity: 1; } 24% { transform: scaleY(1); } 86% { transform: scaleY(1); opacity: 1; } 95%, 100% { transform: scaleY(0); opacity: 0; } }
@keyframes iia-wipe-build { 0% { transform: scaleX(0); } 14%, 86% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
.iia-dash-el { transform-box: fill-box; animation-duration: 4s; animation-timing-function: var(--ins-ease-out); animation-iteration-count: infinite; }
.iia-dash-bar { transform-origin: bottom; animation-name: iia-bar-build; }
.iia-dash-wipe { transform-origin: left center; animation-name: iia-wipe-build; }
@media (prefers-reduced-motion: reduce) { .iia-dash-el { animation: none; } }

/* ---- toast (DS Toast markup + the design's timer bar; region L84–94) ------ */
.iia-toast-region { position: fixed; top: calc(56px + var(--ins-space-sm)); right: var(--ins-space-sm); z-index: var(--iia-z-scrim); display: flex; flex-direction: column; align-items: flex-end; gap: var(--ins-space-xs); pointer-events: none; }
.iia-toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; background: var(--ins-card); border-radius: var(--ins-radius); box-shadow: var(--ins-shadow-2); padding: 14px 16px; font-family: var(--ins-font-family); min-width: 280px; max-width: 380px; border-left: 3px solid var(--ins-alert-positive); animation: ins-fade-in-up var(--ins-duration-slow) var(--ins-ease-out); }
.iia-toast .ins-toast__icon { flex: none; font-size: 18px; line-height: 1; margin-top: 1px; color: var(--ins-alert-positive); }
.iia-toast .ins-toast__body { flex: 1; min-width: 0; }
.iia-toast__msg { margin: 0; font-size: var(--ins-text-sm); line-height: var(--ins-leading-snug); color: var(--ins-text-1); }
.iia-toast .ins-toast__close { flex: none; cursor: pointer; color: var(--ins-ui-2); background: none; border: 0; font-size: 14px; padding: 2px; }
.iia-toast .ins-toast__close:hover { color: var(--ins-text-2); }
.iia-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--ins-alert-positive); transform-origin: left center; animation: iia-toast-timer 4s linear forwards; }
@keyframes iia-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) { .iia-toast-region { top: auto; bottom: var(--ins-space-sm); left: var(--ins-space-sm); right: var(--ins-space-sm); align-items: stretch; } .iia-toast { width: 100%; max-width: none; box-sizing: border-box; } }
@media (prefers-reduced-motion: reduce) { .iia-toast__timer { animation: none; } }
@media (max-width: 767px) { .iia-crumbs__link { max-width: 90px; } }

/* ---- dialogs (shortcuts, production confirmation) ------------------------ */
.iia-dialog { background: var(--ins-card); border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius); box-shadow: var(--ins-shadow-2); color: var(--ins-text-2); font-family: var(--ins-font-family); animation: ins-zoom-in var(--ins-duration-fast) var(--ins-ease-out); box-sizing: border-box; max-width: 100%; }
.iia-dialog--shortcuts { width: 400px; }
.iia-dialog--prod { width: 480px; }
.iia-dialog__head { display: flex; align-items: center; gap: var(--ins-space-xs); padding: 16px; border-bottom: 1px solid var(--ins-border-color); }
.iia-dialog__title { font-size: 14px; font-weight: var(--ins-weight-semibold); color: var(--ins-text-1); }
.iia-dialog__close { margin-left: auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--ins-radius); background: transparent; color: var(--ins-text-3); cursor: pointer; }
.iia-dialog__close:hover { background: var(--ins-card-hover); color: var(--ins-text-1); }
.iia-dialog__close i { font-size: var(--ins-text-md); }
.iia-dialog__rows { padding: var(--ins-space-xs) 16px var(--ins-space-sm); display: flex; flex-direction: column; }
.iia-dialog__row { display: flex; align-items: center; gap: var(--ins-space-sm); padding: 8px 0; }
.iia-dialog__row span { flex: 1; min-width: 0; font-size: var(--ins-text-sm); color: var(--ins-text-2); }
.iia-dialog__row kbd { flex: none; font-family: 'Courier Prime', ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ins-text-1); border: 1px solid var(--ins-border-color); border-bottom-width: 2px; border-radius: var(--ins-radius); padding: 2px 8px; background: var(--ins-main-bg); }
.iia-dialog__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ins-space-md); padding: var(--ins-space-lg); }
.iia-dialog__warn { display: block; font-size: 72px; line-height: 1; color: var(--ins-alert-warning); }
.iia-dialog__h2 { margin: 0; font-size: var(--ins-title-5); line-height: var(--ins-leading-tight); font-weight: var(--ins-weight-semibold); letter-spacing: -0.5px; color: var(--ins-text-1); }
.iia-dialog__p { margin: 0; font-size: var(--ins-text-sm); line-height: 1.6; color: var(--ins-text-2); text-wrap: pretty; }
.iia-dialog__p strong { font-weight: var(--ins-weight-semibold); color: var(--ins-text-1); }
.iia-dialog__actions { display: flex; align-items: center; justify-content: center; gap: var(--ins-space-sm); width: 100%; }
.iia-dialog__actions--stack { flex-direction: column; }
.iia-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 var(--ins-space-md); border-radius: var(--ins-radius); font-family: inherit; font-size: var(--ins-text-xs); font-weight: var(--ins-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color var(--ins-duration-fast) var(--ins-ease-out); }
.iia-dialog__actions--stack .iia-btn { width: 100%; }
.iia-btn i { font-size: var(--iia-glyph-sm); }
.iia-btn--outline { border: 1px solid var(--ins-main); background: var(--ins-card); color: var(--ins-main); }
.iia-btn--outline:hover { background: var(--ins-main-light); }
.iia-btn--solid { border: none; background: var(--ins-main); color: var(--iia-text-white); }
.iia-btn--solid:hover { background: var(--ins-main-dark); }

/* ---- rail --------------------------------------------------------------- */
ins-sidebar.iia-rail {
  --iia-rail-w: 216px; --iia-rail-w-collapsed: 64px;
  flex: none; position: relative; width: var(--iia-rail-w); background: var(--ins-chrome-bg); display: flex; flex-direction: column;
  transition: width var(--ins-duration-normal) var(--ins-ease-out); z-index: var(--iia-z-rail); font-family: var(--ins-font-family); line-height: var(--ins-leading-normal); align-self: stretch;
}
ins-sidebar.iia-rail--collapsed { width: var(--iia-rail-w-collapsed); }
@media (max-width: 767px) { ins-sidebar.iia-rail { --iia-rail-w-collapsed: 56px; } }
/* Overlay mode below 1280px: the rail sits over the content; the body row keeps a collapsed-width gutter via padding. */
@media (max-width: 1279px) {
  .iia-shell--v6 .iia-shell__body { padding-left: 64px; }
  ins-sidebar.iia-rail { position: absolute; left: 0; top: 0; bottom: 0; }
  ins-sidebar.iia-rail:not(.iia-rail--collapsed) { z-index: var(--iia-z-rail-raised); box-shadow: var(--ins-shadow-2); }
}
@media (max-width: 767px) { .iia-shell--v6 .iia-shell__body { padding-left: 56px; } }
.iia-rail__scroll { position: relative; flex: 1; min-height: 0; padding: var(--ins-space-xs) 0 var(--ins-space-sm); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
@media (min-height: 980px) { .iia-rail__scroll { padding: var(--ins-space-sm) 0 var(--ins-space-md); } }
.iia-rail__scroll > div:not([class]) { display: contents; } /* any bare <div> a module partial left around its items; never the pill or a group */
/* Rail groups (design groupsDef): Dashboard alone, then Work / Build / Sell / Configure, each labelled group opening with a rule. */
.iia-rail__group { display: block; }
.iia-rail__divider { display: block; height: 1px; margin: var(--ins-space-xs) 12px 0; background: var(--iia-rail-divider); transition: background var(--ins-duration-fast) var(--ins-ease-out); }
.iia-rail__group-head { display: flex; align-items: flex-end; height: 33px; padding: 0 12px 4px 20px; overflow: hidden; transition: height var(--ins-duration-normal) var(--ins-ease-out), padding var(--ins-duration-normal) var(--ins-ease-out); }
.iia-rail__group-label { display: inline; font-size: 12px; font-weight: var(--ins-weight-semibold); letter-spacing: normal; color: var(--iia-group-label); white-space: nowrap; }
[data-theme="dark"] .iia-rail__group-label { color: var(--iia-group-label-dm); }
.iia-rail--collapsed .iia-rail__group-head { height: 0; padding: 0; }
.iia-rail--collapsed .iia-rail__group-label { display: none; }
.iia-rail__pill { position: absolute; left: 4px; right: 12px; top: 0; border-radius: var(--iia-radius-pill-sm); background: var(--iia-rail-pill); pointer-events: none; }
.iia-rail--collapsed .iia-rail__pill { left: 12px; }
.iia-rail__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--ins-chrome-bg)); }

ins-sidebar-item.iia-rail-item { display: block; position: relative; }
ins-sidebar-item.iia-rail-item--nested { display: none; }
/* The mobile-only My Profile / Sign Out rows the partials add are Foundation-hidden above 640px only.
   In v6 the account menu carries both at every width, so they never render in the rail. */
ins-sidebar.iia-rail ins-sidebar-item.hide-for-medium { display: none !important; }
.iia-rail-item__marker { position: absolute; left: 2px; top: 50%; transform: translateY(-50%) scaleY(0.35); transform-origin: center; width: 2px; height: 20px; border-radius: 9999px; background: var(--ins-main); opacity: 0; transition: opacity var(--ins-duration-fast) var(--ins-ease-out), transform 150ms var(--ins-ease-out); }
.iia-rail-item.is-active .iia-rail-item__marker { opacity: 1; transform: translateY(-50%) scaleY(1); }
.iia-rail-item__link {
  display: flex; align-items: center; justify-content: flex-start; height: 32px; margin: 2px 12px 2px 4px; padding: 0 8px 0 16px; border-radius: 6px; box-sizing: border-box;
  color: var(--iia-rail-fg-muted); background: transparent; white-space: nowrap; overflow: hidden; text-decoration: none; font-size: 13px; font-weight: 400;
  transition: padding var(--ins-duration-normal) var(--ins-ease-out), color 150ms cubic-bezier(0,0,0.2,1), background 150ms cubic-bezier(0,0,0.2,1);
}
.iia-rail-item__link:hover, .iia-rail-item.is-active .iia-rail-item__link { color: var(--iia-rail-fg); }
.iia-rail-item.is-active .iia-rail-item__link { font-weight: 500; }
.iia-rail-item__link:active { background: rgba(255, 255, 255, 0.1); }
.iia-rail-item__link:focus-visible { outline: none; background: rgba(255, 255, 255, 0.08); color: var(--iia-rail-fg); }
.iia-rail--collapsed .iia-rail-item__link { justify-content: center; margin: 2px 12px; padding: 0; }
.iia-rail-item__group { display: flex; align-items: center; gap: var(--ins-space-xs); min-width: 0; transition: transform 150ms ease-out; }
.iia-rail-item__link:active .iia-rail-item__group { transform: scale(0.985); }
.iia-rail-item__icon { position: relative; flex: none; width: 16px; height: 16px; }
.iia-rail-item__glyph { position: absolute; inset: 0; transition: opacity 200ms ease-out; }
.iia-rail-item__glyph--reg { opacity: 1; }
.iia-rail-item__glyph--fill { opacity: 0; }
.iia-rail-item.is-active .iia-rail-item__glyph--reg { opacity: 0; }
.iia-rail-item.is-active .iia-rail-item__glyph--fill { opacity: 1; }
.iia-rail-item__fonticon { font-size: 16px; line-height: 16px; display: block; }
.iia-rail-item__label { overflow: hidden; text-overflow: ellipsis; transform: translateX(0); transition: transform var(--ins-duration-normal) var(--ins-ease-out) var(--ins-duration-instant); }
.iia-rail-item__label.is-hidden { display: none; transform: translateX(-12px); }
.iia-rail-item__chevron { margin-left: auto; flex: none; color: var(--ins-chrome-fg-subtle); }
.iia-rail-item__children { display: none; }
@media (prefers-reduced-motion: reduce) {
  .iia-rail-item__marker, .iia-rail-item__glyph, .iia-rail-item__group, ins-sidebar.iia-rail, .iia-rail-item__link { transition: none; }
  .iia-rail-item__marker { transform: translateY(-50%) scaleY(1); }
}

/* ---- rail flyout ---------------------------------------------------------- */
.iia-flyout {
  position: fixed; min-width: 208px; max-height: min(70vh, 460px); overflow-y: auto; background: var(--ins-chrome-surface); border: 1px solid var(--ins-chrome-border);
  border-radius: var(--ins-radius); box-shadow: var(--ins-shadow-2); padding: var(--ins-space-2xs); z-index: var(--iia-z-flyout);
  animation: ins-fade-in-up var(--ins-duration-fast) var(--ins-ease-out); font-family: var(--ins-font-family); line-height: var(--ins-leading-normal);
}
.iia-flyout__pill { position: absolute; left: 4px; right: 4px; top: 0; border-radius: var(--iia-radius-pill-sm); background: var(--iia-rail-pill); pointer-events: none; }
.iia-flyout__label { font-size: 12px; font-weight: var(--ins-weight-semibold); letter-spacing: normal; text-transform: none; color: var(--iia-group-label); padding: var(--ins-space-xs) var(--ins-space-xs) var(--ins-space-2xs) 12px; }
[data-theme="dark"] .iia-flyout__label { color: var(--iia-group-label-dm); }
.iia-flyout__item {
  position: relative; display: flex; align-items: center; gap: var(--ins-space-xs); padding: var(--ins-space-xs) var(--ins-space-xs) var(--ins-space-xs) 12px; border-radius: 6px;
  background: transparent; color: var(--iia-rail-fg-muted); font-size: 13px; font-weight: 400; white-space: nowrap; text-decoration: none;
  transition: color 150ms cubic-bezier(0,0,0.2,1), transform 150ms ease-out; animation: iia-sub-in var(--ins-duration-fast) var(--ins-ease-out) both;
}
.iia-flyout__item:hover { color: #EDEDED; transform: scale(0.99); }
.iia-flyout__item:active { background: rgba(255, 255, 255, 0.1); transform: scale(0.985); }
.iia-flyout__item:focus-visible { outline: none; background: rgba(255, 255, 255, 0.08); color: var(--iia-rail-fg); }
.iia-flyout__item.is-active { color: var(--iia-rail-fg); font-weight: 500; }
.iia-flyout__marker { position: absolute; left: 2px; top: 50%; transform: translateY(-50%) scaleY(0.35); transform-origin: center; width: 2px; height: 20px; border-radius: 9999px; background: var(--ins-main); opacity: 0; transition: opacity var(--ins-duration-fast) var(--ins-ease-out), transform 150ms var(--ins-ease-out); }
.iia-flyout__item.is-active .iia-flyout__marker { opacity: 1; transform: translateY(-50%) scaleY(1); }
.iia-flyout__ext { margin-left: auto; font-size: var(--ins-text-xs); color: var(--ins-chrome-fg-subtle); padding-left: var(--ins-space-sm); }
@keyframes iia-sub-in { from { opacity: 0; transform: translateX(-2px); } to { opacity: 1; transform: translateX(0); } }

/* ============================================================================
   IIA v6 tab strip layer (TW#26778152)
   ----------------------------------------------------------------------------
   <ins-tab> rendered as the CRM record pages' tab strip (module-v6-crm
   RecordTabs.vue, itself the CRM Contact v1.4 prototype's tablist): icon +
   label + count chip per tab, --iia-text-3 idle / --iia-text-1 active with a
   2px --ins-main underline, icons dropped below 1280px. The strip never
   scrolls sideways; tabs that do not fit sit in a "More" menu at the end.
   Switched on by the component (class .iia-tabs on the .ins-tab wrapper) when
   the page carries the v6 Admin Shell; the legacy rules above still serve the
   legacy rendering. Selectors carry one class more than the legacy ones so
   they win without !important, except where the legacy rule sets display on
   the header itself and the [hidden] attribute has to beat it.
   ============================================================================ */
ins-tab .ins-tab.iia-tabs {
  background: var(--ins-card); border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius);
  box-shadow: none; overflow: visible;
}
ins-tab .ins-tab.iia-tabs .ins-tab-headers {
  display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--ins-border-color); overflow: visible; white-space: nowrap; position: relative; z-index: 1;
}
ins-tab .ins-tab.iia-tabs .ins-tab-headers::before { content: none; }
ins-tab .ins-tab.iia-tabs .ins-tab-headers.scrollable { overflow: visible; }
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header,
ins-tab .ins-tab.iia-tabs .ins-tab-headers .iia-tabs__more-trigger {
  display: flex; align-items: center; gap: var(--ins-space-xs); flex: none;
  margin: 0; border: none; background: transparent; padding: var(--ins-space-sm) var(--ins-space-sm);
  font-family: inherit; font-size: var(--ins-text-sm); line-height: var(--ins-leading-snug); font-weight: 400;
  color: var(--iia-text-3); cursor: pointer; box-shadow: none; position: relative;
  transition: color var(--ins-duration-fast) var(--ins-ease-out), box-shadow var(--ins-duration-fast) var(--ins-ease-out);
}
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header::before { content: none; }
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header span:nth-child(2) { padding-left: 0; }
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header:hover,
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header:focus-visible,
ins-tab .ins-tab.iia-tabs .ins-tab-headers .iia-tabs__more-trigger:hover,
ins-tab .ins-tab.iia-tabs .ins-tab-headers .iia-tabs__more-trigger:focus-visible,
ins-tab .ins-tab.iia-tabs .ins-tab-headers .iia-tabs__more-trigger.is-open {
  color: var(--iia-text-1); box-shadow: inset 0 -2px 0 var(--ins-main); outline: none;
}
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header.active {
  color: var(--iia-text-1); box-shadow: inset 0 -2px 0 var(--ins-main);
}
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header.has-error,
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header.has-error.active {
  color: var(--ins-alert-negative); box-shadow: inset 0 -2px 0 var(--ins-alert-negative);
}
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header.disabled {
  cursor: not-allowed; opacity: var(--ins-disabled-opacity); box-shadow: none; color: var(--iia-text-3);
}
/* the component hides overflowed headers with [hidden]; the display rules above must not undo that */
ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header[hidden],
ins-tab .ins-tab.iia-tabs .ins-tab-headers .iia-tabs__more[hidden] { display: none !important; }
ins-tab .ins-tab.iia-tabs .iia-tabs__icon { font-size: var(--ins-text-md); line-height: 1; }
ins-tab .ins-tab.iia-tabs .iia-tabs__count {
  font-size: var(--ins-text-xs); font-weight: var(--ins-weight-semibold); line-height: 1.4;
  background: var(--iia-ui-1); color: var(--iia-text-3); border-radius: 999px; padding: 1px 8px;
}
ins-tab .ins-tab.iia-tabs .ins-tab-header.active .iia-tabs__count,
ins-tab .ins-tab.iia-tabs .iia-tabs__more-trigger.is-open .iia-tabs__count { background: var(--ins-main-light); color: var(--ins-main); }
/* More: pinned to the end of the strip, menu drops below it */
ins-tab .ins-tab.iia-tabs .iia-tabs__more { display: block; margin-left: auto; position: relative; flex: none; }
ins-tab .ins-tab.iia-tabs .iia-tabs__more-caret { font-size: var(--ins-text-xs); transition: transform var(--ins-duration-fast) var(--ins-ease-out); }
ins-tab .ins-tab.iia-tabs .iia-tabs__more-trigger.is-open .iia-tabs__more-caret { transform: rotate(180deg); }
ins-tab .ins-tab.iia-tabs .iia-tabs__menu {
  position: absolute; top: calc(100% + 1px); right: 0; z-index: 30; min-width: 220px; max-height: 60vh; overflow-y: auto;
  margin: var(--ins-space-2xs) 0 0; padding: var(--ins-space-2xs); list-style: none;
  background: var(--ins-card); border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius); box-shadow: var(--ins-shadow-2);
  animation: ins-fade-in-up var(--ins-duration-fast) var(--ins-ease-out) both;
}
ins-tab .ins-tab.iia-tabs .iia-tabs__menu-item {
  display: flex; align-items: center; gap: var(--ins-space-xs); width: 100%; border: none; background: transparent; text-align: left;
  padding: var(--ins-space-xs) var(--ins-space-sm); border-radius: var(--ins-radius); font-family: inherit; font-size: var(--ins-text-sm);
  color: var(--iia-text-2); cursor: pointer; white-space: nowrap;
}
ins-tab .ins-tab.iia-tabs .iia-tabs__menu-item:hover,
ins-tab .ins-tab.iia-tabs .iia-tabs__menu-item:focus-visible { background: var(--iia-ui-1); color: var(--iia-text-1); outline: none; }
ins-tab .ins-tab.iia-tabs .iia-tabs__menu-item .ins-tab-header__label { flex: 1 1 auto; }
ins-tab .ins-tab.iia-tabs .iia-tabs__menu-item.has-error { color: var(--ins-alert-negative); }
ins-tab .ins-tab.iia-tabs .iia-tabs__menu-item.disabled { opacity: var(--ins-disabled-opacity); cursor: not-allowed; }
/* below 1280px the icons drop and labels stay (RecordTabs' tabIconDisp rule) */
@media (max-width: 1279px) {
  ins-tab .ins-tab.iia-tabs .ins-tab-headers .ins-tab-header .iia-tabs__icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  ins-tab .ins-tab.iia-tabs .iia-tabs__menu { animation: none; }
}

/* ============================================================================
   IIA v6 record header layer (TW#26778152)
   ----------------------------------------------------------------------------
   <ins-record-header>: the CRM Contact v1.4 / Company v1.0 identity card
   (section.crm-hdr) as a bundle component, so every module's record page
   draws the same header. Values are the prototype's own, taken from the
   inline styles on module-v6-crm ViewContact.vue. The host is an inline-size
   container: the metrics row and the stacked layout follow the header's own
   width like .crm-pagewrap does for the CRM record grid.
   ============================================================================ */
ins-record-header.ins-record-header { display: block; container-type: inline-size; }
ins-record-header.ins-record-header.is-archived .ins-record-header__card { opacity: 0.6; }
.ins-record-header__card {
  /* z-index above the tab strip that follows it (its headers sit at z 1), so a kebab menu opened
     from the actions area paints over the tabs instead of behind them */
  position: relative; z-index: 5; display: flex; align-items: center; gap: var(--ins-space-md); flex-wrap: wrap;
  background: var(--ins-card); border: 1px solid var(--ins-border-color); border-radius: var(--ins-radius); padding: var(--ins-space-sm);
  font-family: var(--ins-font-family);
}
.ins-record-header__avatar {
  width: 80px; height: 80px; flex: none; border-radius: 50%; background: var(--ins-main); color: var(--iia-text-white);
  font-size: var(--ins-title-5); font-weight: var(--ins-weight-semibold); display: inline-flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; overflow: hidden;
}
.ins-record-header__avatar i { font-size: 32px; line-height: 1; }
.ins-record-header__identity { min-width: 0; flex: 1 1 240px; display: flex; align-items: center; gap: var(--ins-space-sm); flex-wrap: wrap; }
.ins-record-header__text { min-width: 0; }
.ins-record-header__name {
  margin: 0; font-size: var(--ins-title-5); line-height: var(--ins-leading-tight); font-weight: var(--ins-weight-semibold);
  letter-spacing: -0.5px; color: var(--iia-text-1); overflow-wrap: anywhere;
}
.ins-record-header__subtitle { margin-top: var(--ins-space-3xs); font-size: var(--ins-text-sm); color: var(--iia-text-3); }
.ins-record-header__website {
  display: inline-flex; align-items: center; gap: var(--ins-space-3xs); margin-top: var(--ins-space-3xs);
  font-size: var(--ins-text-sm); color: var(--ins-main); text-decoration: none;
}
.ins-record-header__website:hover { color: var(--ins-main-dark); text-decoration: underline; }
.ins-record-header__website i { font-size: var(--ins-text-xs); }
.ins-record-header__facts { display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--ins-space-2xs); font-size: var(--ins-text-sm); color: var(--iia-text-2); }
.ins-record-header__fact + .ins-record-header__fact::before { content: "·"; margin: 0 var(--ins-space-xs); color: var(--iia-text-3); }
.ins-record-header__pills { display: flex; align-items: center; gap: var(--ins-space-xs); flex: none; align-self: flex-start; margin-top: 4px; flex-wrap: wrap; }
.ins-record-header__status-info { font-size: var(--ins-text-xs); color: var(--iia-text-3); }
.ins-record-header__pill,
.ins-record-header__pills [slot="pills"] .ins-record-header__pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px;
  font-size: var(--ins-text-xs); font-weight: var(--ins-weight-semibold); line-height: 1.4; white-space: nowrap;
  background: var(--iia-ui-1); color: var(--iia-text-3);
}
.ins-record-header__pill--green  { background: var(--ins-alert-positive-light); color: var(--ins-alert-positive); }
.ins-record-header__pill--red    { background: var(--ins-alert-negative-light); color: var(--ins-alert-negative); }
.ins-record-header__pill--orange,
.ins-record-header__pill--yellow { background: var(--ins-alert-warning-light);  color: var(--ins-alert-warning-dark); }
.ins-record-header__pill--blue   { background: var(--ins-main-light); color: var(--ins-main); }
.ins-record-header__pill--grey   { background: var(--iia-ui-1); color: var(--iia-text-3); }
/* metrics + actions sit at the end of the row; the metrics wrapper is empty (0 width) when nothing is slotted */
.ins-record-header__metrics { display: flex; align-items: center; flex: none; margin-left: auto; }
.ins-record-header__metrics:empty { display: none; }
.ins-record-header__actions { display: flex; align-items: center; gap: var(--ins-space-xs); flex: none; position: relative; }
.ins-record-header__actions:empty { display: none; }
ins-record-header.ins-record-header:not(.has-metrics) .ins-record-header__actions { margin-left: auto; }
.ins-record-header__extra:empty { display: none; }
.ins-record-header__extra { margin-top: var(--ins-space-sm); }
/* the strip inside: the same cell geometry the CRM inline header uses (hm-cell already comes from the record-page layer) */
.ins-record-header__metrics .hm-strip { position: relative; display: flex; align-items: stretch; }
/* From 1180px down the metric strip leaves the identity row and becomes a full-width row under it (crm-record.css rule for .crm-hm-inline). */
@container (max-width: 1180px) {
  .ins-record-header__metrics { width: 100%; order: 5; margin-left: 0; border-top: 1px solid var(--ins-border-color); padding-top: var(--ins-space-xs); }
  .ins-record-header__metrics .hm-strip { width: 100%; justify-content: space-between; }
  .ins-record-header__metrics .hm-cell { border-left: none !important; min-width: 0 !important; padding: 0 !important; align-items: flex-start !important; }
  .ins-record-header__metrics .hm-cell span { text-align: left !important; }
}
/* Narrow: stacked identity, actions pinned top-right (crm-record.css 560px rule for .crm-hdr / .crm-hdr-kebab). */
@container (max-width: 600px) {
  .ins-record-header__card { flex-direction: column; align-items: flex-start; gap: var(--ins-space-sm); }
  .ins-record-header__identity { width: 100%; }
  .ins-record-header__avatar { margin-right: calc(36px + var(--ins-space-sm)); }
  .ins-record-header__actions { position: absolute; top: var(--ins-space-sm); right: var(--ins-space-sm); }
  .ins-record-header__metrics { border-top: none; padding-top: 0; }
  .ins-record-header__metrics .hm-strip { flex-wrap: wrap; gap: var(--ins-space-xs); }
  .ins-record-header__metrics .hm-strip > div { flex-basis: 100% !important; }
}