@instawork/design-system/css/components.css

The design system for Instawork's web apps

:root, .force-light, .force-light * {
  --base-color-string: 3, 24, 56;
  --text-color: #151519;
  --text-color-inverse: #ebebee;
  --text-color-light: #606373;
  --text-color-light-inverse: #c8cad1;
  --primary-color-string: 41, 82, 239;
  --primary-color: rgb(var(--primary-color-string));
  --accent-color-string: 41, 82, 239;
  --accent-color: rgb(var(--accent-color-string));
  --accent-color-light: rgba(var(--accent-color-string), 8%);
  --light-color-string: 255, 255, 255;
  --light-color: #FFF;
  --dark-color: #151519;
  --border-color: #dadbe0;
  --background-color: #fafbff;
  --card-background-color: #FFF;
  --hover-color-string: 20, 23, 30;
  --hover-color: rgba(var(--hover-color-string), 0.04);
  --background-color-inverse: var(--text-color);
  --icon-color: brightness(1);
  --shadow-color-string: 0, 0, 0;
  --shadow: 0 0.25rem 1rem rgba(var(--shadow-color-string), .04), 0 0.125rem 0.25rem rgba(var(--shadow-color-string), .08);
  --shadow-hover: 0.5rem 1rem rgba(var(--shadow-color-string), .08), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02), 0 0.125rem 1rem rgba(var(--shadow-color-string), .08);
  --shadow-focus: 0.5rem 1rem rgba(var(--shadow-color-string), .12), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02);
  --border-radius: 0.5rem;
  --bg-accent-default: #e6f2ff;
  --bg-accent-emphasis: #4778ff;
  --bg-celebration-default: #fef1cf;
  --bg-celebration-emphasis: #fbb90e;
  --bg-default: #ffffff;
  --bg-destructive-default: #fee6e6;
  --bg-destructive-emphasis: #ff4847;
  --bg-muted: #bdc4c4;
  --bg-subtle: #f4f4f4;
  --bg-success-default: #d6fecd;
  --bg-success-emphasis: #63cb76;
  --bg-warning-default: #fef1cf;
  --bg-warning-emphasis: #d99000;
  --border-accent: #4778ff;
  --border-default: #8d9494;
  --border-destructive: #ff4847;
  --border-muted: #e1e3e3;
  --border-on_emphasis: #ffffff;
  --border-success: #63cb76;
  --border-warning: #fbb90e;
  --button-bg-destructive-default: #ff4847;
  --button-bg-destructive-disabled: #bdc4c4;
  --button-bg-destructive-hover: #ffffff;
  --button-bg-destructive-loading: #ff9796;
  --button-bg-destructive-pressed: #d92b2b;
  --button-bg-primary-default: #4778ff;
  --button-bg-primary-disabled: #bdc4c4;
  --button-bg-primary-hover: #ffffff;
  --button-bg-primary-loading: #80aaff;
  --button-bg-primary-pressed: #255ccc;
  --button-border-destructive-default: #ff4847;
  --button-border-destructive-disabled: #bdc4c4;
  --button-border-destructive-hover: #ffffff;
  --button-border-destructive-loading: #ff9796;
  --button-border-destructive-pressed: #d92b2b;
  --button-border-primary-default: #4778ff;
  --button-border-primary-disabled: #bdc4c4;
  --button-border-primary-hover: #ffffff;
  --button-border-primary-loading: #80aaff;
  --button-border-primary-pressed: #255ccc;
  --button-fg-destructive-default: #ff4847;
  --button-fg-destructive-disabled: #bdc4c4;
  --button-fg-destructive-hover: #ffffff;
  --button-fg-destructive-loading: #ff9796;
  --button-fg-destructive-pressed: #d92b2b;
  --button-fg-on_emphasis: #ffffff;
  --button-fg-primary-default: #4778ff;
  --button-fg-primary-disabled: #bdc4c4;
  --button-fg-primary-hover: #ffffff;
  --button-fg-primary-loading: #80aaff;
  --button-fg-primary-pressed: #255ccc;
  --fg-accent-default: #4778ff;
  --fg-accent-emphasis: #3964bb;
  --fg-celebration-default: #fbb90e;
  --fg-celebration-emphasis: #d99000;
  --fg-default: #1f1f1f;
  --fg-destructive-default: #d92b2b;
  --fg-destructive-emphasis: #bb3939;
  --fg-muted: #4e4d4d;
  --fg-on_emphasis: #ffffff;
  --fg-subtle: #8d9494;
  --fg-success-default: #2db245;
  --fg-success-emphasis: #08771d;
  --fg-warning-default: #d99000;
  --fg-warning-emphasis: #946300;
}

.force-dark, .force-dark * {
  --text-color: #ebebee;
  --text-color-inverse: #606373;
  --text-color-light: #b7b9c3;
  --text-color-light-inverse: #606373;
  --icon-color: brightness(1);
  --light-color-string: 21, 21, 25;
  --light-color: #151519;
  --dark-color: #f9f9fa;
  --border-color: #373942;
  --background-color: #06070a;
  --hover-color-string: 250, 251, 255;
  --card-background-color: #151519;
  --shadow-color-string: 0, 0, 0;
}

.theme-info, .theme-info * {
  --primary-color-string: 131, 65, 163;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-warning, .theme-warning * {
  --primary-color-string: 224, 132, 45;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-danger, .theme-danger * {
  --primary-color-string: 219, 7, 61;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-success, .theme-success * {
  --primary-color-string: 43, 153, 72;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

p, div, span, h1, h2, h3, h4, h5, h6 {
  color: inherit;
}

iw-nested-input.form-control input,
iw-nested-input.form-control input {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-color);
}

iw-nested-input.form-control:focus-within,
iw-nested-input.form-control:focus-within {
  color: var(--text-color);
  background-color: var(--card-background-color);
  border-color: rgba(var(--primary-color-string), 0.5);
  outline: 0;
  -webkit-box-shadow: none, 0 0.25rem 0.5rem rgba(41, 82, 239, 0.04), 0 0 0.25rem 0.125rem rgba(41, 82, 239, 0.16);
          box-shadow: none, 0 0.25rem 0.5rem rgba(41, 82, 239, 0.04), 0 0 0.25rem 0.125rem rgba(41, 82, 239, 0.16);
}

iw-nested-input,
iw-nested-input.form-control {
  position: relative;
}
iw-nested-input[disabled] {
  background-color: var(--text-color-inverse);
}
iw-nested-input input,
iw-nested-input.form-control input {
  border: none;
  padding: 1px 2px;
}
iw-nested-input input:disabled, iw-nested-input input[readonly] {
  background-color: var(--text-color-inverse);
  opacity: 1;
}
iw-nested-input input:focus {
  outline: none;
}
iw-nested-input,
iw-nested-input.form-control {
  display: block;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

iw-nested-input,
iw-nested-input.form-control {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
iw-nested-input input,
iw-nested-input.form-control input {
  background-color: transparent;
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  box-flex: 1;
  max-width: 100%;
}
:root, .force-light, .force-light * {
  --base-color-string: 3, 24, 56;
  --text-color: #151519;
  --text-color-inverse: #ebebee;
  --text-color-light: #606373;
  --text-color-light-inverse: #c8cad1;
  --primary-color-string: 41, 82, 239;
  --primary-color: rgb(var(--primary-color-string));
  --accent-color-string: 41, 82, 239;
  --accent-color: rgb(var(--accent-color-string));
  --accent-color-light: rgba(var(--accent-color-string), 8%);
  --light-color-string: 255, 255, 255;
  --light-color: #FFF;
  --dark-color: #151519;
  --border-color: #dadbe0;
  --background-color: #fafbff;
  --card-background-color: #FFF;
  --hover-color-string: 20, 23, 30;
  --hover-color: rgba(var(--hover-color-string), 0.04);
  --background-color-inverse: var(--text-color);
  --icon-color: brightness(1);
  --shadow-color-string: 0, 0, 0;
  --shadow: 0 0.25rem 1rem rgba(var(--shadow-color-string), .04), 0 0.125rem 0.25rem rgba(var(--shadow-color-string), .08);
  --shadow-hover: 0.5rem 1rem rgba(var(--shadow-color-string), .08), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02), 0 0.125rem 1rem rgba(var(--shadow-color-string), .08);
  --shadow-focus: 0.5rem 1rem rgba(var(--shadow-color-string), .12), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02);
  --border-radius: 0.5rem;
  --bg-accent-default: #e6f2ff;
  --bg-accent-emphasis: #4778ff;
  --bg-celebration-default: #fef1cf;
  --bg-celebration-emphasis: #fbb90e;
  --bg-default: #ffffff;
  --bg-destructive-default: #fee6e6;
  --bg-destructive-emphasis: #ff4847;
  --bg-muted: #bdc4c4;
  --bg-subtle: #f4f4f4;
  --bg-success-default: #d6fecd;
  --bg-success-emphasis: #63cb76;
  --bg-warning-default: #fef1cf;
  --bg-warning-emphasis: #d99000;
  --border-accent: #4778ff;
  --border-default: #8d9494;
  --border-destructive: #ff4847;
  --border-muted: #e1e3e3;
  --border-on_emphasis: #ffffff;
  --border-success: #63cb76;
  --border-warning: #fbb90e;
  --button-bg-destructive-default: #ff4847;
  --button-bg-destructive-disabled: #bdc4c4;
  --button-bg-destructive-hover: #ffffff;
  --button-bg-destructive-loading: #ff9796;
  --button-bg-destructive-pressed: #d92b2b;
  --button-bg-primary-default: #4778ff;
  --button-bg-primary-disabled: #bdc4c4;
  --button-bg-primary-hover: #ffffff;
  --button-bg-primary-loading: #80aaff;
  --button-bg-primary-pressed: #255ccc;
  --button-border-destructive-default: #ff4847;
  --button-border-destructive-disabled: #bdc4c4;
  --button-border-destructive-hover: #ffffff;
  --button-border-destructive-loading: #ff9796;
  --button-border-destructive-pressed: #d92b2b;
  --button-border-primary-default: #4778ff;
  --button-border-primary-disabled: #bdc4c4;
  --button-border-primary-hover: #ffffff;
  --button-border-primary-loading: #80aaff;
  --button-border-primary-pressed: #255ccc;
  --button-fg-destructive-default: #ff4847;
  --button-fg-destructive-disabled: #bdc4c4;
  --button-fg-destructive-hover: #ffffff;
  --button-fg-destructive-loading: #ff9796;
  --button-fg-destructive-pressed: #d92b2b;
  --button-fg-on_emphasis: #ffffff;
  --button-fg-primary-default: #4778ff;
  --button-fg-primary-disabled: #bdc4c4;
  --button-fg-primary-hover: #ffffff;
  --button-fg-primary-loading: #80aaff;
  --button-fg-primary-pressed: #255ccc;
  --fg-accent-default: #4778ff;
  --fg-accent-emphasis: #3964bb;
  --fg-celebration-default: #fbb90e;
  --fg-celebration-emphasis: #d99000;
  --fg-default: #1f1f1f;
  --fg-destructive-default: #d92b2b;
  --fg-destructive-emphasis: #bb3939;
  --fg-muted: #4e4d4d;
  --fg-on_emphasis: #ffffff;
  --fg-subtle: #8d9494;
  --fg-success-default: #2db245;
  --fg-success-emphasis: #08771d;
  --fg-warning-default: #d99000;
  --fg-warning-emphasis: #946300;
}

.force-dark, .force-dark * {
  --text-color: #ebebee;
  --text-color-inverse: #606373;
  --text-color-light: #b7b9c3;
  --text-color-light-inverse: #606373;
  --icon-color: brightness(1);
  --light-color-string: 21, 21, 25;
  --light-color: #151519;
  --dark-color: #f9f9fa;
  --border-color: #373942;
  --background-color: #06070a;
  --hover-color-string: 250, 251, 255;
  --card-background-color: #151519;
  --shadow-color-string: 0, 0, 0;
}

.theme-info, .theme-info * {
  --primary-color-string: 131, 65, 163;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-warning, .theme-warning * {
  --primary-color-string: 224, 132, 45;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-danger, .theme-danger * {
  --primary-color-string: 219, 7, 61;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-success, .theme-success * {
  --primary-color-string: 43, 153, 72;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

p, div, span, h1, h2, h3, h4, h5, h6 {
  color: inherit;
}

iw-time-input.form-control input,
iw-time-input.form-control input {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-color);
}

iw-time-input.form-control:focus-within,
iw-time-input.form-control:focus-within {
  color: var(--text-color);
  background-color: var(--card-background-color);
  border-color: rgba(var(--primary-color-string), 0.5);
  outline: 0;
  -webkit-box-shadow: none, 0 0.25rem 0.5rem rgba(41, 82, 239, 0.04), 0 0 0.25rem 0.125rem rgba(41, 82, 239, 0.16);
          box-shadow: none, 0 0.25rem 0.5rem rgba(41, 82, 239, 0.04), 0 0 0.25rem 0.125rem rgba(41, 82, 239, 0.16);
}

iw-time-input,
iw-time-input.form-control {
  position: relative;
}
iw-time-input[disabled] {
  background-color: var(--text-color-inverse);
}
iw-time-input input,
iw-time-input.form-control input {
  border: none;
  padding: 1px 2px;
}
iw-time-input input:disabled, iw-time-input input[readonly] {
  background-color: var(--text-color-inverse);
  opacity: 1;
}
iw-time-input input:focus {
  outline: none;
}
iw-time-input,
iw-time-input.form-control {
  display: block;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

iw-time-input,
iw-time-input.form-control {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
iw-time-input .time-input__part,
iw-time-input .time-input__spacer,
iw-time-input.form-control .time-input__part,
iw-time-input.form-control .time-input__spacer {
  display: block;
  max-width: 100%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
iw-time-input input.time-input__part,
iw-time-input.form-control input.time-input__part {
  position: relative;
  text-align: center;
  padding: 1px;
}
iw-time-input input.time-input__part--hour,
iw-time-input.form-control input.time-input__part--hour {
  text-align: right;
}
iw-time-input input.time-input__part--meridian,
iw-time-input.form-control input.time-input__part--meridian {
  min-width: 28px;
}
iw-time-input .time-input__spacer,
iw-time-input.form-control .time-input__spacer {
  min-width: 6px;
  text-align: center;
}

iw-time-input[disabled]:not([show-disabled-value]) input.time-input__part--hour[disabled] {
  text-align: left;
}

.form-inline iw-time-input.form-control {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
:root, .force-light, .force-light * {
  --base-color-string: 3, 24, 56;
  --text-color: #151519;
  --text-color-inverse: #ebebee;
  --text-color-light: #606373;
  --text-color-light-inverse: #c8cad1;
  --primary-color-string: 41, 82, 239;
  --primary-color: rgb(var(--primary-color-string));
  --accent-color-string: 41, 82, 239;
  --accent-color: rgb(var(--accent-color-string));
  --accent-color-light: rgba(var(--accent-color-string), 8%);
  --light-color-string: 255, 255, 255;
  --light-color: #FFF;
  --dark-color: #151519;
  --border-color: #dadbe0;
  --background-color: #fafbff;
  --card-background-color: #FFF;
  --hover-color-string: 20, 23, 30;
  --hover-color: rgba(var(--hover-color-string), 0.04);
  --background-color-inverse: var(--text-color);
  --icon-color: brightness(1);
  --shadow-color-string: 0, 0, 0;
  --shadow: 0 0.25rem 1rem rgba(var(--shadow-color-string), .04), 0 0.125rem 0.25rem rgba(var(--shadow-color-string), .08);
  --shadow-hover: 0.5rem 1rem rgba(var(--shadow-color-string), .08), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02), 0 0.125rem 1rem rgba(var(--shadow-color-string), .08);
  --shadow-focus: 0.5rem 1rem rgba(var(--shadow-color-string), .12), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02);
  --border-radius: 0.5rem;
  --bg-accent-default: #e6f2ff;
  --bg-accent-emphasis: #4778ff;
  --bg-celebration-default: #fef1cf;
  --bg-celebration-emphasis: #fbb90e;
  --bg-default: #ffffff;
  --bg-destructive-default: #fee6e6;
  --bg-destructive-emphasis: #ff4847;
  --bg-muted: #bdc4c4;
  --bg-subtle: #f4f4f4;
  --bg-success-default: #d6fecd;
  --bg-success-emphasis: #63cb76;
  --bg-warning-default: #fef1cf;
  --bg-warning-emphasis: #d99000;
  --border-accent: #4778ff;
  --border-default: #8d9494;
  --border-destructive: #ff4847;
  --border-muted: #e1e3e3;
  --border-on_emphasis: #ffffff;
  --border-success: #63cb76;
  --border-warning: #fbb90e;
  --button-bg-destructive-default: #ff4847;
  --button-bg-destructive-disabled: #bdc4c4;
  --button-bg-destructive-hover: #ffffff;
  --button-bg-destructive-loading: #ff9796;
  --button-bg-destructive-pressed: #d92b2b;
  --button-bg-primary-default: #4778ff;
  --button-bg-primary-disabled: #bdc4c4;
  --button-bg-primary-hover: #ffffff;
  --button-bg-primary-loading: #80aaff;
  --button-bg-primary-pressed: #255ccc;
  --button-border-destructive-default: #ff4847;
  --button-border-destructive-disabled: #bdc4c4;
  --button-border-destructive-hover: #ffffff;
  --button-border-destructive-loading: #ff9796;
  --button-border-destructive-pressed: #d92b2b;
  --button-border-primary-default: #4778ff;
  --button-border-primary-disabled: #bdc4c4;
  --button-border-primary-hover: #ffffff;
  --button-border-primary-loading: #80aaff;
  --button-border-primary-pressed: #255ccc;
  --button-fg-destructive-default: #ff4847;
  --button-fg-destructive-disabled: #bdc4c4;
  --button-fg-destructive-hover: #ffffff;
  --button-fg-destructive-loading: #ff9796;
  --button-fg-destructive-pressed: #d92b2b;
  --button-fg-on_emphasis: #ffffff;
  --button-fg-primary-default: #4778ff;
  --button-fg-primary-disabled: #bdc4c4;
  --button-fg-primary-hover: #ffffff;
  --button-fg-primary-loading: #80aaff;
  --button-fg-primary-pressed: #255ccc;
  --fg-accent-default: #4778ff;
  --fg-accent-emphasis: #3964bb;
  --fg-celebration-default: #fbb90e;
  --fg-celebration-emphasis: #d99000;
  --fg-default: #1f1f1f;
  --fg-destructive-default: #d92b2b;
  --fg-destructive-emphasis: #bb3939;
  --fg-muted: #4e4d4d;
  --fg-on_emphasis: #ffffff;
  --fg-subtle: #8d9494;
  --fg-success-default: #2db245;
  --fg-success-emphasis: #08771d;
  --fg-warning-default: #d99000;
  --fg-warning-emphasis: #946300;
}

.force-dark, .force-dark * {
  --text-color: #ebebee;
  --text-color-inverse: #606373;
  --text-color-light: #b7b9c3;
  --text-color-light-inverse: #606373;
  --icon-color: brightness(1);
  --light-color-string: 21, 21, 25;
  --light-color: #151519;
  --dark-color: #f9f9fa;
  --border-color: #373942;
  --background-color: #06070a;
  --hover-color-string: 250, 251, 255;
  --card-background-color: #151519;
  --shadow-color-string: 0, 0, 0;
}

.theme-info, .theme-info * {
  --primary-color-string: 131, 65, 163;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-warning, .theme-warning * {
  --primary-color-string: 224, 132, 45;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-danger, .theme-danger * {
  --primary-color-string: 219, 7, 61;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-success, .theme-success * {
  --primary-color-string: 43, 153, 72;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

p, div, span, h1, h2, h3, h4, h5, h6 {
  color: inherit;
}

iw-time-range-display {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
iw-time-range-display .iw-time-range__diff {
  line-height: 0.85rem;
}

.iw-time-range__info__popover {
  margin: -0.5rem 0;
}
.iw-time-range__info__popover .iw-time-range__info__popover__item + .iw-time-range__info__popover__item {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: solid 1px var(--border-color);
}
:root, .force-light, .force-light * {
  --base-color-string: 3, 24, 56;
  --text-color: #151519;
  --text-color-inverse: #ebebee;
  --text-color-light: #606373;
  --text-color-light-inverse: #c8cad1;
  --primary-color-string: 41, 82, 239;
  --primary-color: rgb(var(--primary-color-string));
  --accent-color-string: 41, 82, 239;
  --accent-color: rgb(var(--accent-color-string));
  --accent-color-light: rgba(var(--accent-color-string), 8%);
  --light-color-string: 255, 255, 255;
  --light-color: #FFF;
  --dark-color: #151519;
  --border-color: #dadbe0;
  --background-color: #fafbff;
  --card-background-color: #FFF;
  --hover-color-string: 20, 23, 30;
  --hover-color: rgba(var(--hover-color-string), 0.04);
  --background-color-inverse: var(--text-color);
  --icon-color: brightness(1);
  --shadow-color-string: 0, 0, 0;
  --shadow: 0 0.25rem 1rem rgba(var(--shadow-color-string), .04), 0 0.125rem 0.25rem rgba(var(--shadow-color-string), .08);
  --shadow-hover: 0.5rem 1rem rgba(var(--shadow-color-string), .08), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02), 0 0.125rem 1rem rgba(var(--shadow-color-string), .08);
  --shadow-focus: 0.5rem 1rem rgba(var(--shadow-color-string), .12), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02);
  --border-radius: 0.5rem;
  --bg-accent-default: #e6f2ff;
  --bg-accent-emphasis: #4778ff;
  --bg-celebration-default: #fef1cf;
  --bg-celebration-emphasis: #fbb90e;
  --bg-default: #ffffff;
  --bg-destructive-default: #fee6e6;
  --bg-destructive-emphasis: #ff4847;
  --bg-muted: #bdc4c4;
  --bg-subtle: #f4f4f4;
  --bg-success-default: #d6fecd;
  --bg-success-emphasis: #63cb76;
  --bg-warning-default: #fef1cf;
  --bg-warning-emphasis: #d99000;
  --border-accent: #4778ff;
  --border-default: #8d9494;
  --border-destructive: #ff4847;
  --border-muted: #e1e3e3;
  --border-on_emphasis: #ffffff;
  --border-success: #63cb76;
  --border-warning: #fbb90e;
  --button-bg-destructive-default: #ff4847;
  --button-bg-destructive-disabled: #bdc4c4;
  --button-bg-destructive-hover: #ffffff;
  --button-bg-destructive-loading: #ff9796;
  --button-bg-destructive-pressed: #d92b2b;
  --button-bg-primary-default: #4778ff;
  --button-bg-primary-disabled: #bdc4c4;
  --button-bg-primary-hover: #ffffff;
  --button-bg-primary-loading: #80aaff;
  --button-bg-primary-pressed: #255ccc;
  --button-border-destructive-default: #ff4847;
  --button-border-destructive-disabled: #bdc4c4;
  --button-border-destructive-hover: #ffffff;
  --button-border-destructive-loading: #ff9796;
  --button-border-destructive-pressed: #d92b2b;
  --button-border-primary-default: #4778ff;
  --button-border-primary-disabled: #bdc4c4;
  --button-border-primary-hover: #ffffff;
  --button-border-primary-loading: #80aaff;
  --button-border-primary-pressed: #255ccc;
  --button-fg-destructive-default: #ff4847;
  --button-fg-destructive-disabled: #bdc4c4;
  --button-fg-destructive-hover: #ffffff;
  --button-fg-destructive-loading: #ff9796;
  --button-fg-destructive-pressed: #d92b2b;
  --button-fg-on_emphasis: #ffffff;
  --button-fg-primary-default: #4778ff;
  --button-fg-primary-disabled: #bdc4c4;
  --button-fg-primary-hover: #ffffff;
  --button-fg-primary-loading: #80aaff;
  --button-fg-primary-pressed: #255ccc;
  --fg-accent-default: #4778ff;
  --fg-accent-emphasis: #3964bb;
  --fg-celebration-default: #fbb90e;
  --fg-celebration-emphasis: #d99000;
  --fg-default: #1f1f1f;
  --fg-destructive-default: #d92b2b;
  --fg-destructive-emphasis: #bb3939;
  --fg-muted: #4e4d4d;
  --fg-on_emphasis: #ffffff;
  --fg-subtle: #8d9494;
  --fg-success-default: #2db245;
  --fg-success-emphasis: #08771d;
  --fg-warning-default: #d99000;
  --fg-warning-emphasis: #946300;
}

.force-dark, .force-dark * {
  --text-color: #ebebee;
  --text-color-inverse: #606373;
  --text-color-light: #b7b9c3;
  --text-color-light-inverse: #606373;
  --icon-color: brightness(1);
  --light-color-string: 21, 21, 25;
  --light-color: #151519;
  --dark-color: #f9f9fa;
  --border-color: #373942;
  --background-color: #06070a;
  --hover-color-string: 250, 251, 255;
  --card-background-color: #151519;
  --shadow-color-string: 0, 0, 0;
}

.theme-info, .theme-info * {
  --primary-color-string: 131, 65, 163;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-warning, .theme-warning * {
  --primary-color-string: 224, 132, 45;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-danger, .theme-danger * {
  --primary-color-string: 219, 7, 61;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-success, .theme-success * {
  --primary-color-string: 43, 153, 72;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

p, div, span, h1, h2, h3, h4, h5, h6 {
  color: inherit;
}

iw-time-selector.form-control input,
iw-time-selector.form-control input {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-color);
}

iw-time-selector.form-control:focus-within,
iw-time-selector.form-control:focus-within {
  color: var(--text-color);
  background-color: var(--card-background-color);
  border-color: rgba(var(--primary-color-string), 0.5);
  outline: 0;
  -webkit-box-shadow: none, 0 0.25rem 0.5rem rgba(41, 82, 239, 0.04), 0 0 0.25rem 0.125rem rgba(41, 82, 239, 0.16);
          box-shadow: none, 0 0.25rem 0.5rem rgba(41, 82, 239, 0.04), 0 0 0.25rem 0.125rem rgba(41, 82, 239, 0.16);
}

iw-time-selector,
iw-time-selector.form-control {
  position: relative;
}
iw-time-selector[disabled] {
  background-color: var(--text-color-inverse);
}
iw-time-selector input,
iw-time-selector.form-control input {
  border: none;
  padding: 1px 2px;
}
iw-time-selector input:disabled, iw-time-selector input[readonly] {
  background-color: var(--text-color-inverse);
  opacity: 1;
}
iw-time-selector input:focus {
  outline: none;
}
iw-time-selector,
iw-time-selector.form-control {
  display: block;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

iw-time-selector,
iw-time-selector.form-control {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
iw-time-selector > .iw-time-selector__value,
iw-time-selector.form-control > .iw-time-selector__value {
  border: none;
  width: 100%;
  padding: 0.625rem 1rem;
  background: transparent;
}

/*# sourceMappingURL=components.css.map*/