:root {
  --gray-1: #333439;
  --gray-2: #4f4f4f;
  --gray-3: #828282;
  --gray-4: #bdbdbd;
  --gray-5: #e0e0e0;
  --orange: #f2994a;
  --appprimary: #27ae60;
  --blue-1: #007aff;
  --white: #ffffff;
  --appprimary: #27ae60;
  --black: #000000;
  --desert-storm: #f8f8f8;
  --tan-hide: #f89d5ccc;
  --ebony: #0b0b1e;
  --tan-hide: #f2994a3d;
  --mercury: #e7e7e7;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-l: 16px;
  --font-size-xxl: 20px;
  --font-family-sf_pro-bold: "SF Pro-Bold", Helvetica;
  --font-family-sf_pro-medium: "SF Pro-Medium", Helvetica;
  --font-family-sf_pro-semibold: "SF Pro-Semibold", Helvetica;
  --font-family-sf_pro-regular: "SF Pro-Regular", Helvetica;

  --color-default: #333439;
  --dark-blue: #007AFF;
  --light-blue: #EBF5FF;
}

.staff-checkin {
  align-items: flex-start;
  background-color: #eff4f8;
  border: 1px none;
  display: flex;
  height: 700px;
  overflow: hidden;
  /*width: 1440px;*/
  width: 100%;
}

.staff-checkin .overlap-group1 {
  height: 100%;
  position: relative;
  /*width: 1440px;*/
  width: 100%;
}

.staff-checkin .side-menu {
  align-items: flex-end;
  background-color: var(--white);
  box-shadow: 0px -4px 12px #93939340;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 1024px;
  left: 0;
  padding: 15px 5px;
  position: absolute;
  top: 0;
  width: 64px;
}

.staff-checkin .logo-white-1 {
  align-items: center;
  display: flex;
  height: 33px;
  margin-right: 1px;
  padding: 0 2.1px;
  width: 53px;
}

.staff-checkin .frame-2 {
  align-items: flex-start;
  display: flex;
  width: 49px;
}

.staff-checkin .group-container {
  height: 30px;
  position: relative;
  width: 49px;
}

.staff-checkin .group-3 {
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 49px;
}

.staff-checkin .group-2 {
  height: 12px;
  left: 0;
  position: absolute;
  top: 0;
  width: 12px;
}

.staff-checkin .frame-7683 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 574px;
  margin-right: 5px;
  position: relative;
  width: 44px;
}

.staff-checkin .frame-2608551 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  width: fit-content;
}

.staff-checkin .item {
  display: flex;
  gap: 10px;
  position: relative;
  width: fit-content;
}

.staff-checkin .item-sidemenu {
  align-items: flex-start;
  border-radius: 4px;
  flex-direction: column;
  padding: 10px 12px;
}

.staff-checkin .frame-7174 {
  align-items: center;
  display: flex;
  gap: 12px;
  position: relative;
  width: fit-content;
}

.staff-checkin .icon {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .icon-soliduser-group {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .article_fill0_wght400_grad0_opsz48 {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .icon-solidbadge-check {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .icon-solidclipboard-list {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .icon-solidreceipt-tax {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .item-sidemenu-1 {
  align-items: flex-start;
  background-color: #007aff33;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  position: relative;
  width: fit-content;
}

.staff-checkin .menu-bar {
  align-items: center;
  background-color: var(--white);
  display: flex;
  gap: 16px;
  height: 56px;
  left: 0;
  padding: 0px 24px;
  position: absolute;
  top: 0;
  width: 1440px;
}

.staff-checkin .frame-2608208 {
  height: 44px;
  min-width: 40px;
  opacity: 0;
  position: relative;
}

.staff-checkin .logo-white {
  align-items: flex-end;
  display: flex;
  height: 46px;
  padding: 2.1px 2.9px;
  width: 73px;
}

.staff-checkin .frame-1 {
  align-items: flex-start;
  display: flex;
  gap: 14050px;
  overflow: hidden;
  width: 67px;
}

.staff-checkin .group {
  height: 17px;
  width: 17px;
}

.staff-checkin .group-1 {
  height: 42px;
  margin-top: -5469.09px;
  width: 67px;
}

.staff-checkin .bell-filled {
  height: 24px;
  min-width: 21px;
  position: relative;
}

.staff-checkin .frame-2608209 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  gap: 8px;
  position: relative;
}

.staff-checkin .icon-outlinechevron-double-right {
  height: 32px;
  min-width: 32px;
  position: relative;
}

.staff-checkin .item-menu {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  justify-content: center;
  padding: 1px 12px;
}

.staff-checkin .valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.staff-checkin .dashboard {
  letter-spacing: 0.38px;
  line-height: 24px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .sfpro-medium-mine-shaft-16px {
  color: var(--gray-1);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.staff-checkin .frame-2608211 {
  align-items: center;
  display: flex;
  gap: 4px;
  position: relative;
  width: fit-content;
}

.staff-checkin .frame {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative;
  width: fit-content;
}

.staff-checkin .manager {
  color: var(--gray-2);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-s);
  font-weight: 500;
  letter-spacing: 0.29px;
  line-height: 18px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .hai-pham {
  letter-spacing: 0.38px;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .slice-1 {
  height: 100px;
  left: 764px;
  position: absolute;
  top: 37px;
  width: 100px;
}

.staff-checkin .frame-2608213 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /*height: 827px;*/
  /*left: 96px;*/
  overflow: hidden;
  position: absolute;
  /*top: 80px;*/
  /*margin-top: 20px;*/
  /*width: 1312px;*/
  width: 100%;
  height: 100%;
  padding-bottom: 30px;
}

.staff-checkin .frame-2608702 {
  height: 747px;
  /*margin-right: -756px;*/
  /*min-width: 2068px;*/
  position: relative;
  width: 100%;
  overflow-x: auto;
  height: 100%;
  display: inline-flex;
  /*background-color: white;*/
  background-color: rgb(239, 244, 248);
}

.staff-checkin .overlap-group {
  /*height: 747px;*/
  position: relative;
  /*width: 2068px;*/
  width: 100%;
  height: 100%;
}

.staff-checkin .frame-2608700 {
  align-items: flex-start;
  display: flex;
  /*gap: 4px;*/
  left: 0;
  position: absolute;
  top: 0;
  width: fit-content;
  padding-bottom: 50px;
  /*background-color: white;*/
  /*overflow-y: auto;*/
  /*overflow-x: auto;*/
}

.staff-checkin .frame-26086 {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  /*height: 731px;*/
  /*height: 100%;*/
  height: 200%;
  /*height: 1000%;*/
  position: relative;
  width: fit-content;
  /*border-right: 5px solid rgb(239, 244, 248);*/
  border-right: 5px solid #f8f8f8;
}

.staff-checkin .frame-2608660 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  position: relative;
  width: fit-content;
}

.staff-checkin .staff-checkin-2 {
  align-self: stretch;
  background-color: var(--desert-storm);
}

.staff-checkin .staff-checkin-5 {
  align-items: center;
  border-radius: 4px;
  display: flex;
  gap: 8px;
  padding: 8px;
  position: relative;
}

.staff-checkin .frame-2608557 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
}

.staff-checkin .frame-260870 {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 4px;
  position: relative;
}

.staff-checkin .sfpro-bold-mine-shaft-14px {
  /*color: var(--gray-1);*/
  color: #bdbdbd;
  font-family: var(--font-family-sf_pro-bold);
  /*font-size: var(--font-size-m);*/
  /*font-size: 16px;*/
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
}

.staff-checkin .bell-8 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .frame-2608701 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  gap: 8px;
  position: relative;
}

.staff-checkin .start-830 {
  letter-spacing: 0.29px;
  line-height: 18px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .sfpro-medium-gray-12px {
  /*color: var(--gray-3);*/
  color: #828282;
  font-family: var(--font-family-sf_pro-medium);
  /*font-size: var(--font-size-s);*/
  /*font-size: 9px;*/
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.staff-checkin .component-3-3 {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--blue-1);
  border-radius: 3px;
  width: 72px;
  background-color: var(--blue-1);
}

.staff-checkin .component-3-9 {
  display: flex;
  position: relative;
}

.staff-checkin .component-3-1 {
  align-items: center;
  border-radius: 4px;
  flex: 1;
  gap: 4px;
  height: 24px;
  justify-content: center;
  padding: 1px 4px;
}

.staff-checkin .done-4 {
  flex: 1;
}

.staff-checkin .done-46 {
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .sfpro-medium-azure-radiance-12px {
  /*color: var(--blue-1);*/
  color: white;
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-s);
  font-style: normal;
  /*font-weight: 500;*/
}

.staff-checkin .icon-outlinechevron-down {
  height: 12px;
  min-width: 12px;
  position: relative;
}

.staff-checkin .bell-12 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .component-3-5 {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--gray-3);
  border-radius: 4px;
  width: 72px;
  background-color: var(--gray-3);
}

.staff-checkin .off-3 {
  flex: 1;
}

.staff-checkin .off-9 {
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .bell-10 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .component-3-4 {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--appprimary);
  border-radius: 4px;
  width: 72px;
  background-color: var(--appprimary);
}

.staff-checkin .working-4 {
  flex: 1;
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .sfpro-medium-chateau-green-12px {
  /*color: var(--appprimary);*/
  color: white;
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.staff-checkin .done-5 {
  flex: 1;
}

.staff-checkin .bell-9 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .off-2 {
  flex: 1;
}

.staff-checkin .bell-11 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .staff-checkin-4 {
  align-self: stretch;
  background-color: var(--tan-hide);
}

.staff-checkin .component-2-3 {
  align-items: center;
  border-radius: 60px;
  display: flex;
  gap: 10px;
  /*height: 16px;*/
  height: 30px;
  justify-content: center;
  /*padding: 1px 20px;*/
  position: relative;
  width: 30px;
}

.staff-checkin .component-2-2 {
  background-color: #F2994A;
}

.staff-checkin .sfpro-normal-white-14px {
  color: var(--white);
  font-family: var(--font-family-sf_pro-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.staff-checkin .enabled {
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-bottom: -2.5px;
  margin-left: -15.5px;
  margin-right: -15.5px;
  margin-top: -2.5px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .surname-7 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .component {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--orange);
  border-radius: 4px;
  display: flex;
  position: relative;
  width: 72px;
  background-color: var(--orange);
}

.staff-checkin .waiting-1 {
  flex: 1;
}

.staff-checkin .waiting-24 {
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .sfpro-medium-tan-hide-12px {
  /*color: var(--orange);*/
  color: white;
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.staff-checkin .staff-checkin-1 {
  background-color: var(--desert-storm);
  /*width: 239px;*/
  width: 100%;
}

.staff-checkin .done-3 {
  flex: 1;
}

.staff-checkin .bell-7 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .frame-2608621 {
  align-items: center;
  align-self: stretch;
  background-color: var(--desert-storm);
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 10px 12px;
  position: relative;
}

.staff-checkin .icon-solidpencil-8 {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .turn-1 {
  letter-spacing: 0.34px;
  line-height: 21px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .sfpro-bold-ebony-14px {
  color: var(--ebony);
  font-family: var(--font-family-sf_pro-bold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.staff-checkin .bell-1 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .component-1 {
  display: flex;
  position: relative;
}

.staff-checkin .component-3 {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--blue-1);
  border-radius: 4px;
  opacity: 0.5;
  width: 72px;
}

.staff-checkin .done {
  flex: 1;
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .surname {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .component-3-8 {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--orange);
  border-radius: 4px;
  opacity: 0.5;
  width: 72px;
}

.staff-checkin .waiting {
  flex: 1;
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .bell-2 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-1 {
  flex: 1;
}

.staff-checkin .component-3-2 {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--gray-3);
  border-radius: 4px;
  opacity: 0.5;
  width: 72px;
}

.staff-checkin .off {
  flex: 1;
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .bell-5 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .off-1 {
  flex: 1;
}

.staff-checkin .bell-6 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .bell-3 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-2 {
  flex: 1;
}

.staff-checkin .bell-4 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .component-3-7 {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--appprimary);
  border-radius: 4px;
  opacity: 0.5;
  width: 72px;
}

.staff-checkin .frame-2608660-1 {
  opacity: 0;
  width: fit-content;
}

.staff-checkin .frame-2608660-3 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  position: relative;
}

.staff-checkin .staff-checkin-3 {
  background-color: var(--tan-hide);
  width: 239px;
}

.staff-checkin .icon-outlinechevron-down-13 {
  margin-right: -12795px;
  margin-top: -5964.5px;
}

.staff-checkin .icon-outlinechevron-down-41 {
  height: 12px;
  min-width: 12px;
  position: relative;
}

.staff-checkin .waiting-9 {
  flex: 1;
}

.staff-checkin .working {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  position: relative;
  width: fit-content;
}

.staff-checkin .waiting-8 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-24 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .component-2-1 {
  background-color: var(--white);
}

.staff-checkin .sfpro-normal-tan-hide-14px {
  color: var(--orange);
  font-family: var(--font-family-sf_pro-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.staff-checkin .done-15 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-9 {
  margin-right: -12795px;
  margin-top: -5702px;
}

.staff-checkin .component-2 {
  align-items: center;
  background-color: #F89D5C;
  border-radius: 60px;
  gap: 10px;
  height: 16px;
  justify-content: center;
  /*padding: 1px 20px;*/
  width: 16px;
}

.staff-checkin .bell {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
}

.staff-checkin .done-14 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-22 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-outlinechevron-down-11 {
  margin-right: -12795px;
  margin-top: -5838.5px;
}

.staff-checkin .done-17 {
  flex: 1;
}

.staff-checkin .done-18 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-12 {
  margin-right: -12795px;
  margin-top: -5901.5px;
}

.staff-checkin .bell-23 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-outlinechevron-down-10 {
  margin-right: -12795px;
  margin-top: -5775.5px;
}

.staff-checkin .done-16 {
  flex: 1;
}

.staff-checkin .bell-27 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .sfpro-medium-silver-12px {
  color: var(--gray-4);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.staff-checkin .off-5 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .icon-outlinechevron-down-16 {
  margin-right: -12795px;
  margin-top: -6153.5px;
}

.staff-checkin .done-21 {
  flex: 1;
}

.staff-checkin .done-19 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-14 {
  margin-right: -12795px;
  margin-top: -6027.5px;
}

.staff-checkin .bell-25 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .waiting-10 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .waiting-11 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-26 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-20 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-15 {
  margin-right: -12795px;
  margin-top: -6090.5px;
}

.staff-checkin .frame-260866 {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 731px;
  position: relative;
  width: fit-content;
}

.staff-checkin .waiting-23 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-44 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-outlinechevron-down-39 {
  margin-right: -12018px;
  margin-top: -6098.5px;
}

.staff-checkin .done-44 {
  flex: 1;
}

.staff-checkin .bell-40 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-41 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-35 {
  margin-right: -12018px;
  margin-top: -5846.5px;
}

.staff-checkin .icon-outlinechevron-down-40 {
  margin-right: -12018px;
  margin-top: -6161.5px;
}

.staff-checkin .done-45 {
  flex: 1;
}

.staff-checkin .bell-45 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .off-8 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .icon-outlinechevron-down-36 {
  margin-right: -12018px;
  margin-top: -5909.5px;
}

.staff-checkin .done-42 {
  flex: 1;
}

.staff-checkin .bell-41 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .waiting-22 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-43 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-outlinechevron-down-38 {
  margin-right: -12018px;
  margin-top: -6035.5px;
}

.staff-checkin .done-43 {
  flex: 1;
}

.staff-checkin .done-40 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-34 {
  margin-right: -12018px;
  margin-top: -5783.5px;
}

.staff-checkin .done-38 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .icon-outlinechevron-down-33 {
  margin-right: -12018px;
  margin-top: -5710px;
}

.staff-checkin .done-39 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-37 {
  margin-right: -12018px;
  margin-top: -5972.5px;
}

.staff-checkin .waiting-21 {
  flex: 1;
}

.staff-checkin .waiting-20 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-42 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-solidpencil-7 {
  margin-right: -12185px;
  margin-top: -5621px;
}

.staff-checkin .done-11 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-6 {
  margin-right: -13054px;
  margin-top: -6027.5px;
}

.staff-checkin .waiting-6 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-19 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .waiting-7 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-20 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-12 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-7 {
  margin-right: -13054px;
  margin-top: -6090.5px;
}

.staff-checkin .done-10 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-4 {
  margin-right: -13054px;
  margin-top: -5901.5px;
}

.staff-checkin .bell-17 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .bell-21 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .off-4 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .done-13 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-8 {
  margin-right: -13054px;
  margin-top: -6153.5px;
}

.staff-checkin .done-6 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .icon-outlinechevron-down-1 {
  margin-right: -13054px;
  margin-top: -5702px;
}

.staff-checkin .done-7 {
  flex: 1;
}

.staff-checkin .bell-18 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .waiting-4 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .waiting-5 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-5 {
  margin-right: -13054px;
  margin-top: -5964.5px;
}

.staff-checkin .bell-16 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-outlinechevron-down-3 {
  margin-right: -13054px;
  margin-top: -5838.5px;
}

.staff-checkin .done-9 {
  flex: 1;
}

.staff-checkin .done-8 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-2 {
  margin-right: -13054px;
  margin-top: -5775.5px;
}

.staff-checkin .done-23 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-17 {
  margin-right: -12536px;
  margin-top: -5710px;
}

.staff-checkin .done-22 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-29 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-26 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-20 {
  margin-right: -12536px;
  margin-top: -5909.5px;
}

.staff-checkin .bell-28 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-25 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-19 {
  margin-right: -12536px;
  margin-top: -5846.5px;
}

.staff-checkin .off-6 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-33 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-29 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-24 {
  margin-right: -12536px;
  margin-top: -6161.5px;
}

.staff-checkin .icon-outlinechevron-down-22 {
  margin-right: -12536px;
  margin-top: -6035.5px;
}

.staff-checkin .done-27 {
  flex: 1;
}

.staff-checkin .waiting-14 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-31 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-28 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-23 {
  margin-right: -12536px;
  margin-top: -6098.5px;
}

.staff-checkin .waiting-15 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-32 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-outlinechevron-down-21 {
  margin-right: -12536px;
  margin-top: -5972.5px;
}

.staff-checkin .waiting-13 {
  flex: 1;
}

.staff-checkin .waiting-12 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-30 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-outlinechevron-down-18 {
  margin-right: -12536px;
  margin-top: -5783.5px;
}

.staff-checkin .done-24 {
  flex: 1;
}

.staff-checkin .icon-solidpencil-5 {
  margin-right: -12703px;
  margin-top: -5621px;
}

.staff-checkin .icon-solidpencil-6 {
  margin-right: -12444px;
  margin-top: -5621px;
}

.staff-checkin .icon-outlinechevron-down-26 {
  margin-right: -12277px;
  margin-top: -5783.5px;
}

.staff-checkin .done-32 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-29 {
  margin-right: -12277px;
  margin-top: -5972.5px;
}

.staff-checkin .waiting-17 {
  flex: 1;
}

.staff-checkin .waiting-16 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-36 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .bell-37 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .waiting-18 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .icon-outlinechevron-down-30 {
  margin-right: -12277px;
  margin-top: -6035.5px;
}

.staff-checkin .done-35 {
  flex: 1;
}

.staff-checkin .bell-34 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .done-33 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-27 {
  margin-right: -12277px;
  margin-top: -5846.5px;
}

.staff-checkin .done-37 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-32 {
  margin-right: -12277px;
  margin-top: -6161.5px;
}

.staff-checkin .bell-39 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .off-7 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .done-34 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-28 {
  margin-right: -12277px;
  margin-top: -5909.5px;
}

.staff-checkin .bell-35 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .icon-outlinechevron-down-25 {
  margin-right: -12277px;
  margin-top: -5710px;
}

.staff-checkin .done-31 {
  flex: 1;
}

.staff-checkin .done-30 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .bell-38 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .waiting-19 {
  margin-top: -1px;
  width: fit-content;
}

.staff-checkin .done-36 {
  flex: 1;
}

.staff-checkin .icon-outlinechevron-down-31 {
  margin-right: -12277px;
  margin-top: -6098.5px;
}

.staff-checkin .frame-2608660-2 {
  /*width: 255px;*/
  width: 230px;
}

.staff-checkin .bell-14 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .enabled-2 {
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-bottom: -2.5px;
  margin-left: -16.5px;
  margin-right: -16.5px;
  margin-top: -2.5px;
}

.staff-checkin .enabled-4 {
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .waiting-2 {
  flex: 1;
}

.staff-checkin .bell-15 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .enabled-3 {
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-bottom: -2.5px;
  margin-left: -17px;
  margin-right: -17px;
  margin-top: -4.5px;
}

.staff-checkin .waiting-3 {
  flex: 1;
}

.staff-checkin .bell-13 {
  flex: 1;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

.staff-checkin .scroll {
  align-items: flex-start;
  background-color: var(--desert-storm);
  border-radius: 4px 0px 0px 4px;
  display: flex;
  gap: 10px;
  height: 1054px;
  justify-content: center;
  left: 519px;
  padding: 4px 4px 200px;
  position: absolute;
  top: 212px;
  transform: rotate(-90deg);
  width: 16px;
}

.staff-checkin .rectangle-4039 {
  align-self: stretch;
  background-color: var(--gray-5);
  border-radius: 100px;
  height: 850px;
  min-width: 8px;
  position: relative;
}

.staff-checkin .sub-header {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  height: 72px;
  justify-content: space-between;
  padding: 0px 20px;
  position: relative;
  overflow-x: auto;
}

.staff-checkin .frame-2608647 {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  position: relative;
  width: fit-content;
}

.staff-checkin .component-3-6 {
  align-items: center;
  background-color: var(--blue-1);
  border-radius: 8px;
  gap: 8px;
  height: 44px;
  justify-content: center;
  /*padding: 1px 20px;*/
  width: fit-content;
  padding-left: 5px;
  padding-right: 21px;
}

.staff-checkin .enabled-1 {
  color: var(--white);
  font-family: var(--font-family-sf_pro-regular);
  font-size: var(--font-size-l);
  font-weight: 400;
  letter-spacing: 0.26px;
  line-height: 24px;
}

.staff-checkin .icon-outlineclipboard-list {
  height: 16px;
  min-width: 16px;
  position: relative;
  margin-right: 15px
}

.staff-checkin .frame-13071 {
  align-items: flex-end;
  display: flex;
  gap: 8px;
  position: relative;
  width: fit-content;
}

.staff-checkin .button-e-gray-3 {
  align-items: flex-start;
  display: flex;
  position: relative;
}

.staff-checkin .button-e-gray-2 {
  width: 45px;
}

.staff-checkin .button-structure {
  align-items: center;
  background-color: var(--white);
  border: 2px solid;
  border-color: #f2f2f2;
  border-radius: 8px;
  display: flex;
  flex: 1;
  gap: 12px;
  height: 44px;
  justify-content: center;
  padding: 12px;
  position: relative;
}

.staff-checkin .icon-outlinechevron-right {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .button-e-gray-1 {
  width: fit-content;
}

.staff-checkin .button-structure-1 {
  align-items: center;
  background-color: #f2f2f2;
  border: 2px solid #f2f2f2;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  height: 44px;
  justify-content: center;
  padding: 12px 16px;
  position: relative;
  width: fit-content;
}

.staff-checkin .button-text {
  /*color: #a3a3ac;*/
  font-family: var(--font-family-sf_pro-regular);
  font-size: var(--font-size-m);
  font-weight: 400;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -2.5px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .button-e-gray {
  align-items: flex-start;
  display: flex;
  position: relative;
  width: 44px;
}

.staff-checkin .icon-outlinechevron-left {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.staff-checkin .frame-13064 {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  position: relative;
  width: fit-content;
}

.staff-checkin .signin {
  color: var(--gray-1);
  font-family: var(--font-family-sf_pro-regular);
  font-size: var(--font-size-m);
  font-weight: 400;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .march-26-2023-wed {
  color: var(--gray-1);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-xxl);
  font-weight: 500;
  letter-spacing: 0.32px;
  line-height: 30px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.staff-checkin .calendar {
  height: 28px;
  min-width: 28px;
  position: relative;
}