:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#Schedules {
  display: flex;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#Schedules a {
  color: var(--primary-blue, #1072DF);
  text-decoration: underline;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
#ShiftMateContainer .no-filter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#ShiftMateContainer .no-filter-pair {
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  gap: 1rem;
}
#ShiftMateContainer .no-filter-icon {
  --dimensions: 10.0625rem;
  width: var(--dimensions);
  height: var(--dimensions);
}
#ShiftMateContainer .no-filter-label {
  color: var(--primary-dark-25, rgba(29, 49, 72, 0.25));
  font-family: "Open Sans", sans-serif;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
#ShiftMateContainer .instructions {
  padding: 3rem;
  color: var(--primary-dark-75, rgba(29, 49, 72, 0.75));
  font-family: var(--font-family, Open Sans, sans-serif);
  font-size: var(--font-size-xxl, 1.25rem);
  font-style: normal;
  font-weight: var(--font-weight-xs, 400);
  line-height: 24px;
}
#ShiftMateContainer .instructions button.open-filter-button {
  cursor: pointer;
  background: transparent;
  font-size: var(--font-size-xxl, 1.25rem);
  border: none;
  color: var(--primary-blue, #1072DF);
  font-weight: var(--font-weight-lg, 700);
  text-decoration-line: underline;
  text-decoration-style: solid;
  outline: none;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
#ShiftMateContainer .icon-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.375rem;
}
#ShiftMateContainer .txt {
  font-family: var(--font-family, Open Sans, sans-serif);
}
#ShiftMateContainer .txt-l {
  color: var(--carmen-primary-600, #1D3148);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5rem;
}
#ShiftMateContainer .txt-m {
  color: var(--carmen-primary-60075, rgba(29, 49, 72, 0.75));
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5rem;
}
#ShiftMateContainer .txt-s {
  color: var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5rem;
}
#ShiftMateContainer .txt-xs {
  color: var(--carmen-primary-600, #1D3148);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.5rem;
}
#ShiftMateContainer .schedules-container {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  align-items: flex-start;
  align-self: stretch;
  gap: 0;
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#ShiftMateContainer .calendar {
  margin-block-start: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 3500px;
  padding-block-end: 1.5rem;
  gap: 1.5rem;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 12px 12px 0 0;
  background: var(--white, white);
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
}
#ShiftMateContainer .calendar-container {
  width: 100%;
  padding-block: 0;
  padding-inline: 0.25rem;
  display: grid;
  grid-template-columns: repeat(96, minmax(0, 1fr));
  grid-template-rows: auto;
  position: relative;
}
#ShiftMateContainer .calendar-header, #ShiftMateContainer .calendar-open-shifts, #ShiftMateContainer .calendar-employee-shifts {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 96;
}
#ShiftMateContainer .calendar-open-shifts {
  margin-block-end: 1rem;
}
#ShiftMateContainer .calendar-open-shifts > *:not(:first-child):not(.chip-container) {
  background: #EDEDED;
}
#ShiftMateContainer .calendar-open-shifts-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(672, minmax(0, 1fr));
  grid-template-rows: repeat(96, minmax(0, 1fr));
  grid-column: 13/-1;
  height: 6.75rem;
}
#ShiftMateContainer .calendar-open-shifts-row-chip {
  display: flex;
  width: 100%;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--primary-dark-50, rgba(29, 49, 72, 0.5));
  background: var(--white, white);
  position: relative;
  height: 1.5rem;
  box-sizing: border-box;
}
#ShiftMateContainer .calendar-open-shifts-row-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--primary-dark-50, rgba(29, 49, 72, 0.5));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5rem;
}
#ShiftMateContainer .calendar-open-shifts-row-layout {
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: grid;
}
#ShiftMateContainer .calendar-open-shifts-row-layout-cell {
  grid-row: 1/-1;
  grid-column: span 24;
  border: 1px solid rgba(29, 49, 72, 0.05);
  background: #EDEDED;
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.09);
}
#ShiftMateContainer .calendar-open-shifts-row-layout-cell:nth-child(2n) {
  border-right: 1px solid rgba(29, 49, 72, 0.25);
}
#ShiftMateContainer .calendar-employee-shifts {
  position: relative;
  margin-block-end: 0.125rem;
}
#ShiftMateContainer .calendar-employee-shifts:nth-last-child(1) {
  margin-block-end: 0.875rem;
}
#ShiftMateContainer .calendar-cell {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 12;
}
#ShiftMateContainer .calendar-cell > * {
  grid-column: 1/-1;
}
#ShiftMateContainer .calendar-month {
  place-self: center;
}
#ShiftMateContainer .calendar.collapsed {
  padding: 0;
  border-radius: 0.75rem;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
#ShiftMateContainer .calendar-toolbar {
  display: flex;
  padding-block: 0.5rem;
  padding-inline-start: 2.5rem;
  padding-inline-end: 0;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  gap: 1.5rem;
  flex: 1 0 0;
  border-radius: 12px 12px 0 0;
  background: var(--carmen-gray-400, #EDEEEF);
}
#ShiftMateContainer .calendar-toolbar-job-code-label {
  color: var(--carmen-primary-600, #1D3148);
  font-size: var(--font-size-medium, 0.875rem);
  font-weight: var(--font-weight-lg, 700);
  line-height: 1.5rem;
}
#ShiftMateContainer .calendar-toolbar .collapse-expand-button {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  color: var(--carmen-primary-600, #1D3148);
  padding-inline-end: 1rem;
}
#ShiftMateContainer .calendar-toolbar.collapsed {
  border-radius: 0.75rem;
  background: var(--carmen-gray-400, #EDEEEF);
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#ShiftMateContainer .calendar-layout {
  grid-column: 13/-1;
  grid-row: 1/50;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(84, minmax(0, 1fr));
}
#ShiftMateContainer .calendar-layout-column {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 12;
  grid-row: 1/-1;
  border-radius: 12px;
  border: 1px solid var(--carmen-gray-600, #D5D7D9);
}
#ShiftMateContainer .calendar-layout-column:nth-child(4) {
  background-color: hsla(214, 50%, 90%, 0.25);
  border-radius: 12px;
}
#ShiftMateContainer .calendar-layout-column.override-bg {
  background: transparent;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

.schedule-header-container {
  display: flex;
  padding-block: 0.625rem;
  gap: 0.5rem;
}

.schedule-data-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.schedule-date {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.25rem;
}

.schedule-date-number {
  color: var(--primary-dark-75, rgba(29, 49, 72, 0.75));
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
}

.schedule-date-day {
  color: var(--primary-dark-75, rgba(29, 49, 72, 0.75));
  font-size: 0.875rem;
  font-weight: 300;
}

.employee-and-hours {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  align-self: stretch;
}

.icon-pair {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-block: 0.125rem;
}

.icon {
  --dimensions: 1.25rem;
  fill: var(--primary-dark-100, #1D3148);
  opacity: 0.25;
  width: var(--dimensions);
  height: var(--dimensions);
}

.count {
  color: var(--primary-dark-50, rgba(29, 49, 72, 0.5));
  font-size: 0.75rem;
  font-weight: 600;
}

.selected {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(0deg, rgba(53, 144, 243, 0.15) 0%, rgba(53, 144, 243, 0.15) 100%), #FFF;
  border-radius: 12px 12px 0 0;
}.right {
  border-radius: 12px 0px 0px 12px;
}

.left {
  border-radius: 0px 12px 12px 0px;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--carmen-primary-300, #D9E3F1);
  height: 3rem;
  width: 1.375rem;
  padding-block: 0.5rem;
  z-index: 10;
}

.change-week-icon {
  fill: #1D3148;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#ShiftMateContainer .calendar .open-shift-header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.0625rem;
  border-radius: 12px 0 0 12px;
  border: 1px solid var(--carmen-gray-400, #EDEEEF);
  border-right: unset;
}
#ShiftMateContainer .calendar .open-shift-header-title {
  color: var(--carmen-primary-600, #1D3148);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 24px;
}
#ShiftMateContainer .calendar .open-shift-header-text {
  color: var(--carmen-primary-600, #1D3148);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --schedule-chip-color: var(--primary-dark-50, rgba(29, 49, 72, 0.5));
  --schedule-chip-background: var(--white, white);
  --schedule-chip-border: 1px solid var(--primary-dark-25, rgba(29, 49, 72, 0.25));
  --schedule-chip-box-shadow: none;
}

#ShiftMateContainer .chip-container {
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 3px;
  user-select: none;
  transition-duration: var(--transition-normal, 300ms);
  transition-property: background, color, border, box-shadow;
  transition-timing-function: ease-out;
  position: absolute;
  z-index: 10;
  display: flex;
  height: 1.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  gap: 8px;
  padding: 8px;
  flex-shrink: 0;
  background: var(--schedule-chip-background, var(--white, white));
  border: var(--schedule-chip-border, 1px solid var(--carmen-primary-60050, rgba(29, 49, 72, 0.5)));
  box-shadow: var(--schedule-chip-box-shadow, none);
}
#ShiftMateContainer .chip-container .chip-text {
  color: var(--schedule-chip-color, var(--primary-dark-50, rgba(29, 49, 72, 0.5)));
  text-align: center;
  font-size: var(--font-size-small, 0.75rem);
  font-weight: var(--schedule-chip-weight, var(--font-weight-md, 600));
  line-height: 28px;
}
#ShiftMateContainer .chip-container.open {
  --schedule-chip-color: var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
  --schedule-chip-background: var(--white, white);
  --schedule-chip-border: 1px solid var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
  --schedule-chip-box-shadow: none;
}
#ShiftMateContainer .chip-container.open:hover {
  --schedule-chip-color: var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
  --schedule-chip-background: var(--carmen-primary-300, #D9E3F1);
  --schedule-chip-border: 1px solid var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
  --schedule-chip-box-shadow: none;
}
#ShiftMateContainer .chip-container.open:active {
  --schedule-chip-color: var(--carmen-primary-60075, rgba(29, 49, 72, 0.75));
  --schedule-chip-background: var(--carmen-primary-400, #A1BCDB);
  --schedule-chip-border: 1px solid var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
  --schedule-chip-box-shadow: none;
}
#ShiftMateContainer .chip-container.open.selected {
  --schedule-chip-color: var(--carmen-primary-60075, rgba(29, 49, 72, 0.75));
  --schedule-chip-background: var(--carmen-gray-100, white);
  --schedule-chip-border: 2px solid var(--carmen-primary-60075, rgba(29, 49, 72, 0.75));
  --schedule-chip-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
#ShiftMateContainer .chip-container.closed {
  --schedule-chip-color: var(--carmen-error-300, #DD8580);
  --schedule-chip-background: var(--carmen-error-30050, rgba(246, 191, 189, 0.5));
  --schedule-chip-border: 1px solid var(--carmen-error-30050, rgba(246, 191, 189, 0.5));
  --schedule-chip-box-shadow: none;
}
#ShiftMateContainer .chip-container.closed:hover {
  --schedule-chip-color: var(--carmen-error-300, #DD8580);
  --schedule-chip-background: var(--carmen-error-30075, rgba(246, 191, 189, 0.75));
  --schedule-chip-border: 1px solid var(--carmen-error-30050, rgba(246, 191, 189, 0.5));
  --schedule-chip-box-shadow: none;
}
#ShiftMateContainer .chip-container.closed:active {
  --schedule-chip-color: var(--carmen-error-300, #DD8580);
  --schedule-chip-background: var(--carmen-error-30075, rgba(246, 191, 189, 0.75));
  --schedule-chip-border: 1px solid var(--carmen-error-30050, rgba(246, 191, 189, 0.5));
  --schedule-chip-box-shadow: none;
}
#ShiftMateContainer .chip-container.closed.selected {
  --schedule-chip-color: var(--carmen-error-300, #DD8580);
  --schedule-chip-background: var(--carmen-shift-indicator-no-show, #F6BFBD);
  --schedule-chip-border: 2px solid var(--carmen-error-30050, rgba(246, 191, 189, 0.5));
  --schedule-chip-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#ShiftMateContainer .open-shift-header-container {
  display: flex;
  grid-column: 1/13;
  min-height: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.0625rem;
  font: var(--font-family, Open Sans, sans-serif);
  border-radius: 12px 0 0 12px;
  border-top: var(--carmen-gray-400, #EDEEEF);
  border-bottom: 1px solid var(--carmen-gray-400, #EDEEEF);
  border-left: 1px solid var(--carmen-gray-400, #EDEEEF);
  background: var(--carmen-gray-100, white);
}
#ShiftMateContainer .employee-shift-header-name {
  color: var(--carmen-primary-600, #1D3148);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 24px; /* 171.429% */
}
#ShiftMateContainer .employee-shift-header-number {
  color: var(--primary-dark-50, rgba(29, 49, 72, 0.5));
  text-align: right;
  font-size: 0.625rem;
  line-height: 18px; /* 180% */
}
#ShiftMateContainer .employee-shift-hours {
  color: var(--primary-dark-50, rgba(29, 49, 72, 0.5));
  text-align: right;
  font-size: 0.625rem;
  line-height: 18px;
  display: flex;
  flex-direction: column;
}
#ShiftMateContainer .employee-shift-row {
  display: flex;
  text-align: right;
}
#ShiftMateContainer .employee-shift-value {
  display: flex;
  color: var(--carmen-primary-600, #1D3148);
  font-size: 0.75rem;
  line-height: 18px;
  text-align: right;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#ShiftMateContainer .schedule-column-container {
  display: grid;
  position: relative;
  width: 100%;
  height: 100%;
}
#ShiftMateContainer .schedule-column {
  display: flex;
  height: 6.75rem;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  border-top: 1px solid var(--carmen-gray-400, #EDEEEF);
  border-bottom: 1px solid var(--carmen-gray-400, #EDEEEF);
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
}
#ShiftMateContainer .calendar-open-shifts > .schedule-column {
  background: #EDEDED;
}
#ShiftMateContainer .twelve-hour {
  position: static;
  height: 100%;
  width: 100%;
  display: flex;
}
#ShiftMateContainer .twelve-hour:nth-child(1) {
  border-right: 1px solid var(--primary-dark-25, rgba(29, 49, 72, 0.25));
}
#ShiftMateContainer .two-hour {
  position: static;
  display: flex;
  border-right: 1px solid var(--primaryDark5, rgba(29, 49, 72, 0.05));
  height: 100%;
  width: 100%;
}
#ShiftMateContainer .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: left;
  display: grid;
}
#ShiftMateContainer .employee-shifts-row-container > div > .schedule-column-container > .schedule-column {
  background: var(--white, white);
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

:root {
  --shift-indicator-color: var(--carmen-gray-100, white);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-background: var(--soft-blue, #35779d);
  --shift-indicator-height: 6.25rem;
  --shift-indicator-transition-duration: var(--transition-normal, 300ms);
  --shift-indicator-font-size: var(--font-size-xs, 0.625rem);
}

/* Cannot use CSS variables from outside the media query */
@container shiftIndicator (width <= 55px) {
  #ShiftMateContainer {
    box-sizing: border-box;
  }
  #ShiftMateContainer .shift .indicator-layout {
    font-size: var(--font-size-xxs, 0.5rem);
    overflow: hidden;
  }
  #ShiftMateContainer .shift .indicator-layout * {
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 10px;
  }
  #ShiftMateContainer .shift .indicator-layout .position {
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 10px;
  }
}
#ShiftMateContainer .shift {
  user-select: none;
  container-type: size;
  container-name: shiftIndicator;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  transition-property: background, color, box-shadow;
  transition-duration: var(--shift-indicator-transition-duration, var(--transition-normal, 300ms));
  min-height: 100px;
  font-family: var(--font-family, Open Sans, sans-serif);
  color: var(--shift-indicator-color, var(--carmen-gray-100, white));
  font-size: var(--shift-indicator-font-size, var(--font-size-xs, 0.625rem));
  font-weight: var(--font-weight-lg, 700);
  text-align: center;
  font-style: normal;
  line-height: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--shift-indicator-height, 6.25rem);
  border-radius: 0.25rem;
  padding: 0.25rem;
  background: var(--shift-indicator-background, var(--soft-blue, #35779d));
  box-shadow: var(--shift-indicator-box-shadow, var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15)));
}
#ShiftMateContainer .shift .shift--icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
#ShiftMateContainer .shift .indicator-layout {
  display: flex;
  padding: 0.25rem 0;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 0;
  align-self: stretch;
}
#ShiftMateContainer .shift .indicator-layout .shift-icon-container {
  display: flex;
  gap: 4px;
}
#ShiftMateContainer .shift .indicator-layout .schedule-format {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 2px;
  align-self: stretch;
  flex-wrap: wrap;
}
#ShiftMateContainer .shift .indicator-layout .position {
  font-weight: var(--font-weight-md, 600);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#ShiftMateContainer .shift .indicator-layout .company {
  font-weight: var(--font-weight-xs, 400);
}
#ShiftMateContainer .shift.scheduled {
  --shift-indicator-background: var(--soft-blue, #35779d);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.scheduled:hover {
  --shift-indicator-background: var(--dark-cyan, #19638E);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.scheduled:active {
  --shift-indicator-background: var(--dark-cyan, #19638E);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.scheduled.selected {
  --shift-indicator-background: var(--very-dark-blue, #0B4566);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.too-early, #ShiftMateContainer .shift.on-time {
  --shift-indicator-background: var(--green-cyan, #138563);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.too-early:hover, #ShiftMateContainer .shift.on-time:hover {
  --shift-indicator-background: var(--dark-green-cyan, #056A4C);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.too-early:active, #ShiftMateContainer .shift.on-time:active {
  --shift-indicator-background: var(--darker-green-cyan, #00543B);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.too-early.selected, #ShiftMateContainer .shift.on-time.selected {
  --shift-indicator-background: var(--darker-green-cyan, #00543B);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.late-clocked-in, #ShiftMateContainer .shift.late-not-clocked-in {
  --shift-indicator-background: var(--red, #E21A0E);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.late-clocked-in:hover, #ShiftMateContainer .shift.late-not-clocked-in:hover {
  --shift-indicator-background: var(--darkRed, #CC0C00);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.late-clocked-in:active, #ShiftMateContainer .shift.late-not-clocked-in:active {
  --shift-indicator-background: var(--darkerRed, #A21C14);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.late-clocked-in.selected, #ShiftMateContainer .shift.late-not-clocked-in.selected {
  --shift-indicator-background: var(--darkerRed, #A21C14);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-100, white);
}
#ShiftMateContainer .shift.change-not-acknowledged {
  --shift-indicator-background: var(--medium-light-yellow, #FFE77E);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.change-not-acknowledged:hover {
  --shift-indicator-background: var(--medium-yellow, #F6D95C);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.change-not-acknowledged:active {
  --shift-indicator-background: var(--yellow, #EDCB38);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.change-not-acknowledged.selected {
  --shift-indicator-background: var(--yellow, #EDCB38);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.conflict-warning {
  --shift-indicator-background: var(--medium-light-orange, #FFAE79);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.conflict-warning:hover {
  --shift-indicator-background: var(--medium-orange, #FE9A58);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.conflict-warning:active {
  --shift-indicator-background: var(--orange, #F4853B);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.conflict-warning.selected {
  --shift-indicator-background: var(--orange, #F4853B);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.scheduled-elsewhere {
  --shift-indicator-background: var(--medium-light-cyan-blue, #A6C6D8);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-800, #6E757D);
}
#ShiftMateContainer .shift.scheduled-elsewhere:hover {
  --shift-indicator-background: var(--medium-cyan-blue, #92B9D0);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.scheduled-elsewhere:active {
  --shift-indicator-background: var(--cyan-blue, #7DA6BD);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.scheduled-elsewhere.selected {
  --shift-indicator-background: var(--cyan-blue, #7DA6BD);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.completed-shift {
  --shift-indicator-background: var(--lightest-green-cyan, #C7E3DB);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-700, #AEB1B4);
}
#ShiftMateContainer .shift.completed-shift:hover {
  --shift-indicator-background: var(--lighter-green-cyan, #B2DBCF);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.completed-shift:active {
  --shift-indicator-background: var(--lighter-green-cyan, #B2DBCF);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.completed-shift.selected {
  --shift-indicator-background: var(--lighter-green-cyan, #B2DBCF);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.timecard-flag {
  --shift-indicator-background: var(--medium-light-cyna-green, #A1D6C7);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.timecard-flag:hover {
  --shift-indicator-background: var(--medium-cyan-green, #85CFB9);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.timecard-flag:active {
  --shift-indicator-background: var(--cyan-green, #6CC8AC);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.timecard-flag.selected {
  --shift-indicator-background: var(--cyan-green, #6CC8AC);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.no-show-incomplete {
  --shift-indicator-background: var(--lightest-red, #F6BFBD);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-700, #AEB1B4);
}
#ShiftMateContainer .shift.no-show-incomplete:hover {
  --shift-indicator-background: var(--lighter-red, #EDB9B6);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.no-show-incomplete:active {
  --shift-indicator-background: var(--light-red, #E0A9A6);
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.no-show-incomplete.selected {
  --shift-indicator-background: var(--light-red, #E0A9A6);
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.offer-pending, #ShiftMateContainer .shift.offered-no {
  outline: 1px solid var(--soft-blue, #35779d);
  --shift-indicator-background: var(--soft-blue-10, rgba(53, 119, 157, 0.1019607843));
  --shift-indicator-box-shadow: none;
  --shift-indicator-color: var(--carmen-gray-800, #6E757D);
}
#ShiftMateContainer .shift.offer-pending:has(.offer-pending) .shift--icon, #ShiftMateContainer .shift.offered-no:has(.offer-pending) .shift--icon {
  color: var(--soft-blue, #35779d);
}
#ShiftMateContainer .shift.offer-pending:has(.offered-no), #ShiftMateContainer .shift.offered-no:has(.offered-no) {
  color: var(--carmen-error-300, #DD8580);
}
#ShiftMateContainer .shift.offer-pending:hover, #ShiftMateContainer .shift.offered-no:hover {
  --shift-indicator-background: var(--soft-blue-20, rgba(53, 119, 157, 0.2));
  --shift-indicator-box-shadow: none;
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.offer-pending:active, #ShiftMateContainer .shift.offered-no:active {
  --shift-indicator-background: var(--soft-blue-30, rgba(53, 119, 157, 0.3019607843));
  --shift-indicator-box-shadow: none;
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.offer-pending.selected, #ShiftMateContainer .shift.offered-no.selected {
  --shift-indicator-background: var(--soft-blue-30, rgba(53, 119, 157, 0.3019607843));
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}
#ShiftMateContainer .shift.offered-yes, #ShiftMateContainer .shift.swap-shift-request {
  outline: 3px solid var(--soft-blue, #35779d);
  --shift-indicator-background: var(--soft-blue-10, rgba(53, 119, 157, 0.1019607843));
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.offered-yes:hover, #ShiftMateContainer .shift.swap-shift-request:hover {
  --shift-indicator-background: var(--soft-blue-20, rgba(53, 119, 157, 0.2));
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.offered-yes:active, #ShiftMateContainer .shift.swap-shift-request:active {
  --shift-indicator-background: var(--soft-blue-30, rgba(53, 119, 157, 0.3019607843));
  --shift-indicator-box-shadow: var(--box-shadow-md, 2px 2px 6px 0px rgba(0, 0, 0, 0.15));
  --shift-indicator-color: var(--carmen-gray-900, #3D4249);
}
#ShiftMateContainer .shift.offered-yes.selected, #ShiftMateContainer .shift.swap-shift-request.selected {
  --shift-indicator-background: var(--soft-blue-30, rgba(53, 119, 157, 0.3019607843));
  --shift-indicator-box-shadow: var(--box-shadow-lg, 1px 2px 6px 1px rgba(0, 0, 0, 0.3));
  --shift-indicator-color: var(--carmen-gray-1000, #1F252B);
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#ShiftMateContainer .calendar-display-labels-container {
  display: flex;
  padding: 0 40px 12px 40px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
#ShiftMateContainer .calendar-employee-count-display-label {
  color: var(--carmen-primary-60075, rgba(29, 49, 72, 0.75));
  font-family: var(--font-family, Open Sans, sans-serif);
  font-size: var(--font-size-small, 0.75rem);
  font-weight: var(--font-weight-xs, 400);
  font-style: normal;
  line-height: normal;
}
#ShiftMateContainer .calendar .show-more-button {
  display: flex;
  height: 24px;
  padding: 4px 8px 4px 12px;
  gap: 2px;
  border-radius: 48px;
  border: 1px solid var(--carmen-gray-500, #E7E8EB);
  background: var(--carmen-gray-100-white, #FFF);
  color: var(--carmen-primary-600-primary-button, #1D3148);
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#FilterContainer {
  display: flex;
  flex-wrap: wrap;
  padding-block: 0.75rem;
  padding-inline: 3rem;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 0 0 1.75rem 1.75rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 224px 75px 66px 0 rgba(0, 0, 0, 0), 9px 3px 21px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(22.5px);
}
#FilterContainer .filter-section {
  height: 3.0625rem;
  gap: 0.5rem;
  flex-direction: column;
  align-items: flex-start;
}
#FilterContainer .filter-section .filter-container-label {
  color: var(--primary-dark-50, rgba(29, 49, 72, 0.5));
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-family, Open Sans, sans-serif);
  font-size: var(--font-size-small, 0.75rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem;
  text-transform: uppercase;
}
#FilterContainer .filter-section.buttons {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
}
#FilterContainer .filter-section.buttons div {
  display: flex;
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  align-items: center;
  gap: 1rem;
  border-radius: 48px;
  border: 1px solid var(--primary-dark-25, rgba(29, 49, 72, 0.25));
}
#FilterContainer .filter-divider {
  width: 0.0625rem;
  height: 3.0625rem;
  background: var(--primary-dark-10, rgba(29, 49, 72, 0.1));
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

.filter-drawer-container {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#Shiftmate-Shelf-Filter-Container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline: 2.125rem;
  flex: 1 0 0;
}
@media (min-width: 811px) {
  #Shiftmate-Shelf-Filter-Container .shelf-filter-sections {
    flex-direction: row;
    display: flex;
  }
  #Shiftmate-Shelf-Filter-Container .filter-buttons1 {
    justify-content: left;
  }
  #Shiftmate-Shelf-Filter-Container .MuiOutlinedInput-root {
    width: 15.875rem !important;
  }
  #Shiftmate-Shelf-Filter-Container .shelf-filter-divider {
    width: 0.0625rem;
    height: 16.6875rem;
    background: var(--primary-dark-10, rgba(29, 49, 72, 0.1));
    margin-inline: 2.25rem;
  }
  #Shiftmate-Shelf-Filter-Container #FilterDrawerDivider {
    width: 100%;
    height: 100%;
  }
  #Shiftmate-Shelf-Filter-Container #FilterDrawerDivider .shelf-footer-border {
    width: 100%;
    height: 2px;
    border: none;
    background-color: var(--primary-dark-10, rgba(29, 49, 72, 0.1));
  }
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
#Shiftmate-Shelf-Filter-Container .typeahead label, #ShiftMateContainer .typeahead label {
  color: var(--carmen-primary-600, #1D3148);
  font-size: var(--font-size-medium, 0.875rem);
  font-weight: var(--font-weight-xs, 400);
  line-height: 1.75rem;
}
#Shiftmate-Shelf-Filter-Container .typeahead [typeahead-base]:is(:first-child) .MuiAutocomplete-endAdornment, #ShiftMateContainer .typeahead [typeahead-base]:is(:first-child) .MuiAutocomplete-endAdornment {
  display: none;
}
#Shiftmate-Shelf-Filter-Container .typeahead [typeahead-base]:is(:first-child) .MuiInputBase-root, #ShiftMateContainer .typeahead [typeahead-base]:is(:first-child) .MuiInputBase-root {
  border-radius: 20px;
  padding: 6px;
  min-height: 2.5rem;
}
#Shiftmate-Shelf-Filter-Container .typeahead [typeahead-base]:is(:first-child) .MuiInputBase-root div.MuiButtonBase-root.MuiChip-root.MuiChip-filled[is-typeahead-chip], #ShiftMateContainer .typeahead [typeahead-base]:is(:first-child) .MuiInputBase-root div.MuiButtonBase-root.MuiChip-root.MuiChip-filled[is-typeahead-chip] {
  font-family: var(--font-family, Open Sans, sans-serif);
}
#Shiftmate-Shelf-Filter-Container .typeahead [typeahead-base]:is(:first-child) .MuiInputBase-root input, #ShiftMateContainer .typeahead [typeahead-base]:is(:first-child) .MuiInputBase-root input {
  padding: 0 0 0 5px;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
#Shiftmate-Shelf-Filter-Container .filter-container {
  font-family: var(--font-family, Open Sans, sans-serif);
}
#Shiftmate-Shelf-Filter-Container .filter-container-section .MuiBox-root {
  margin: 0;
  gap: 0;
}
#Shiftmate-Shelf-Filter-Container .filter-container-section .MuiBox-root label {
  color: var(--carmen-primary-600, #1D3148);
  line-height: 1.75rem;
  font-size: var(--font-size-medium, 0.875rem);
}
#Shiftmate-Shelf-Filter-Container .filter-container-section .MuiBox-root .MuiInputBase-root {
  border: 1px solid var(--carmen-primary-60010, rgba(29, 49, 72, 0.1));
}
#Shiftmate-Shelf-Filter-Container .filter-container-section .MuiBox-root .MuiInputBase-root input {
  color: var(--carmen-primary-600, #1D3148);
  font-size: var(--font-size-medium, 0.875rem);
  font-weight: var(--font-weight-xs, 400);
  line-height: 1.25rem;
  letter-spacing: 0.25px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#Shiftmate-Shelf-Filter-Container .filter-container-section .MuiBox-root .MuiInputBase-root input::placeholder {
  color: var(--carmen-primary-60025, rgba(29, 49, 72, 0.25));
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
#Shiftmate-Shelf-Filter-Container .filter-container-header {
  margin: 0;
  color: var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
  font-family: var(--font-family, Open Sans, sans-serif);
  font-size: var(--font-size-large, 1rem);
  font-style: normal;
  font-weight: var(--font-weight-md, 600);
  line-height: 1.75rem;
  text-transform: uppercase;
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#Shiftmate-Shelf-Filter-Container .filter-container-availability {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  gap: 3rem;
}
#Shiftmate-Shelf-Filter-Container .filter-container-availability .filter-container-label {
  font-size: var(--font-size-medium, 0.875rem);
}
#Shiftmate-Shelf-Filter-Container .filter-container-availability .filter-container-section .filter-container-checkbox-container {
  display: flex;
  gap: 0.5rem;
}
#Shiftmate-Shelf-Filter-Container .filter-container-availability .filter-container-section .filter-container-checkbox-container .CheckboxButton {
  user-select: none;
  --checkbox-gap: $s1;
  --checkbox-padding-inline-start: 0.25rem;
  --checkbox-padding-inline-end: 0.25rem;
  --checkbox-padding-block-start: 0.5rem;
  --checkbox-padding-block-end: 0.5rem;
  --checkbox-font-size: var(--font-size-medium, 0.875rem);
  --checkbox-font-weight: var(--font-weight-lg, 700);
  --checkbox-color: var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
  width: 80px;
  text-transform: uppercase;
}
#Shiftmate-Shelf-Filter-Container .filter-container-availability .filter-container-section .filter-container-checkbox-container .CheckboxButton[is-checked][success] {
  --checkbox-background: var(--carmen-success-600, #BBE5B0);
  --checkbox-color: var(--carmen-primary-600, #1D3148);
}
#Shiftmate-Shelf-Filter-Container .filter-container-availability .filter-container-advanced-options-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: stretch;
}
#Shiftmate-Shelf-Filter-Container .filter-container-availability .filter-container-advanced-options-container .advanced-filter-options {
  padding: 0.25rem 0.5rem;
  color: var(--carmen-action-600-action-button, #0077FF);
  font-size: var(--font-size-medium, 0.875rem);
  line-height: normal;
  font-weight: var(--font-weight-xs, 400);
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  user-select: none;
}:root {
  --date-picker-input-border-width: 1px;
  --date-picker-input-border-style: solid;
  --date-picker-input-border-color: rgba(29, 49, 72, 0.25);
  --date-picker-input-display: inline-flex;
  --date-picker-input-padding-block-start: 4px;
  --date-picker-input-padding-block-end: 4px;
  --date-picker-input-padding-inline-start: 24px;
  --date-picker-input-padding-inline-end: 8px;
  --date-picker-input-gap: 12px;
  --date-picker-input-border-radius: 50px;
}

.date-picker.single-date > div.MuiGrid2-root div.MuiPickersInputBase-root {
  border-radius: var(--date-picker-input-border-radius, 50px);
  border-width: var(--date-picker-input-border-width, 1px);
  border-style: var(--date-picker-input-border-style, solid);
  border-color: var(--date-picker-input-border-color, rgba(29, 49, 72, 0.25));
  display: var(--date-picker-input-display, inline-flex);
  padding-block-start: var(--date-picker-input-padding-block-start, 4px);
  padding-block-end: var(--date-picker-input-padding-block-end, 4px);
  padding-inline-start: var(--date-picker-input-padding-inline-start, 24px);
  padding-inline-end: var(--date-picker-input-padding-inline-end, 8px);
  gap: var(--date-picker-input-gap, 12px);
}
.date-picker.single-date > div.MuiGrid2-root div.MuiPickersInputBase-root > .MuiPickersSectionList-root {
  padding: 0;
}.date-picker-header {
  display: flex;
  align-items: center;
  align-self: stretch;
}:root {
  --month-picker-button-color: rgba(29, 49, 72, 0.75);
  --date-picker-font-family: "Open Sans", sans-serif;
}

.month-picker {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}
.month-picker .change-month-by-one-button {
  color: var(--month-picker-button-color, rgba(29, 49, 72, 0.75));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  width: 48px;
  height: 48px;
}
.month-picker .select-a-month-button {
  padding: 10px 4px 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: transparent;
  cursor: pointer;
  user-select: none;
  color: var(--month-picker-button-color, rgba(29, 49, 72, 0.75));
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.1px;
}
.month-picker .month-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: 4px;
}:root {
  --year-picker-button-color: rgba(29, 49, 72, 0.75);
  --date-picker-font-family: "Open Sans", sans-serif;
}

.year-picker {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}
.year-picker .change-year-by-one-button {
  color: var(--year-picker-button-color, rgba(29, 49, 72, 0.75));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  width: 48px;
  height: 48px;
}
.year-picker .select-a-year-button {
  padding: 10px 4px 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: transparent;
  cursor: pointer;
  user-select: none;
  color: var(--year-picker-button-color, rgba(29, 49, 72, 0.75));
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.1px;
}
.year-picker .year-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: 4px;
}:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#filter-footer {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;
}
#filter-footer .save-filter-button {
  color: var(--carmen-primary-60075, rgba(29, 49, 72, 0.75));
  font-size: 1rem;
  background-color: transparent;
  border: none;
  flex: unset;
  font-family: "Open Sans";
  font-weight: 400;
}
#filter-footer .apply-button {
  max-width: 250px;
}
#filter-footer .clear-all-filters-button {
  color: var(--carmen-primary-60075, rgba(29, 49, 72, 0.75));
  font-size: 1rem;
  background-color: transparent;
  border: none;
  flex: unset;
  font-family: "Open Sans";
  font-weight: 400;
  color: var(--carmen-primary-60050, rgba(29, 49, 72, 0.5));
}
#filter-footer .clear-all-filters-button > svg {
  width: 40px;
  height: 40px;
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

#FilterHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#FilterHeader .clear-all-filters-button {
  color: var(--carmen-primary-60075, rgba(29, 49, 72, 0.75));
  font-size: 1rem;
  background-color: transparent;
  border: none;
  flex: unset;
  font-family: "Open Sans";
  font-weight: 400;
  text-decoration-line: underline;
}/* Box Shadows */
/* Fonts */
:root {
  --transition-super-fast: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  /* Fonts */
  --font-family: Open Sans, sans-serif;
  --font-size-xxs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-large: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-xxl: 1.25rem;
  --font-weight-xxs: 300;
  --font-weight-xs: 400;
  --font-weight-sm: 500;
  --font-weight-md: 600;
  --font-weight-lg: 700;
  --box-shadow-md: 2px 2px 6px 0px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 1px 2px 6px 1px rgba(0, 0, 0, 0.3);
}

/* Box Shadow Variables */
/* Font Variables */
:root {
  --white: white;
  --carmen-error-300: #DD8580;
  --carmen-error-30050: rgba(246, 191, 189, 0.5);
  --carmen-error-30075: rgba(246, 191, 189, 0.75);
  --carmen-gray-100: white;
  --carmen-gray-400: #EDEEEF;
  --carmen-gray-600: #D5D7D9;
  --carmen-gray-700: #AEB1B4;
  --carmen-gray-800: #6E757D;
  --carmen-gray-900: #3D4249;
  --carmen-gray-1000: #1F252B;
  --carmen-primary-300: #D9E3F1;
  --carmen-primary-400: #A1BCDB;
  --carmen-primary-600: #1D3148;
  --carmen-primary-600-button: #1D3148;
  --carmen-primary-60075: rgba(29, 49, 72, 0.75);
  --carmen-primary-60050: rgba(29, 49, 72, 0.5);
  --carmen-primary-60025: rgba(29, 49, 72, 0.25);
  --carmen-primary-60010: rgba(29, 49, 72, 0.1);
  --carmen-action-600-action-button: #0077FF;
  --carmen-success-600: #BBE5B0;
  --primary-blue: #1072DF;
  --primary-dark-5: rgba(29, 49, 72, 0.05);
  --primary-dark-10: rgba(29, 49, 72, 0.1);
  --primary-dark-25: rgba(29, 49, 72, 0.25);
  --primary-dark-50: rgba(29, 49, 72, 0.5);
  --primary-dark-75: rgba(29, 49, 72, 0.75);
  --primary-dark-100: #1D3148;
  --soft-blue: #35779d;
  --soft-blue-10: rgba(53, 119, 157, 0.1019607843);
  --soft-blue-20: rgba(53, 119, 157, 0.2);
  --soft-blue-30: rgba(53, 119, 157, 0.3019607843);
  --dark-cyan: #19638E;
  --very-dark-blue: #0B4566;
  --green-cyan: #138563;
  --dark-green-cyan: #056A4C;
  --darker-green-cyan: #00543B;
  --lightest-green-cyan: #C7E3DB;
  --lighter-green-cyan: #B2DBCF;
  --light-green-cyan: #A5D0C3;
  --red: #E21A0E;
  --darkRed: #CC0C00;
  --darkerRed: #CC0C00;
  --medium-light-yellow: #FFE77E;
  --medium-yellow: #F6D95C;
  --yellow: #EDCB38;
  --medium-light-orange: #FFAE79;
  --medium-orange: #FE9A58;
  --orange: #F4853B;
  --medium-light-cyan-blue: #A6C6D8;
  --medium-cyan-blue: #92B9D0;
  --cyan-blue: #7DA6BD;
  --medium-light-cyan-green: #A1D6C7;
  --medium-cyan-green: #85CFB9;
  --cyan-green: #6CC8AC;
  --lightest-red: #F6BFBD;
  --lighter-red: #EDB9B6;
  --light-red: #E0A9A6;
  --carmen-shift-indicator-no-show: #F6BFBD;
}

.toggleContainer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 8px solid var(--carmen-gray-400, #EDEEEF);
  border-radius: 20px;
  background: var(--carmen-gray-400, #EDEEEF);
  font-weight: bold;
  cursor: pointer;
}

.toggleContainer::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius: 20px;
  background: var(--very-dark-blue, #0B4566);
  transition: all 0.3s;
}

.toggleContainer div {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.125rem;
  font-size: 0.875rem;
  padding-block: 0.375rem;
  padding-inline: 2rem;
  z-index: 1;
}

.toggleContainer[aria-selected=true]::before {
  left: 50%;
}

.toggleContainer > div:first-child[aria-selected=false] {
  color: var(--primary-dark-100, #1D3148);
  transition: color 0.3s;
}

.toggleContainer > div:last-child[aria-selected=true] {
  color: var(--white, white);
  transition: color 0.3s;
}

.toggleContainer > div:first-child[aria-selected=true] {
  color: var(--white, white);
  transition: color 0.3s;
}

.toggleContainer > div:last-child[aria-selected=false] {
  color: var(--primary-dark-100, #1D3148);
  transition: color 0.3s;
}