@font-face {
  font-family: "Fixel";
  src: url("./assets/fonts/FixelText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Fixel";
  src: url("./assets/fonts/FixelText-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

:root {
  --team-bg: #e5e5e5;
  --team-ink: #2f2f31;
  --team-muted: #919192;
  --team-panel: #dadada;
  --team-white: #fff;
  --team-orange: #f0934f;
  --team-green: #3ab882;
  --team-green-dark: #2a9366;
  --team-blue: #4f8ff0;
  --team-shadow: 0 1.44px 1.44px rgb(189 189 189 / 10%), 0 5.762px 11.524px rgb(140 140 140 / 5%), 0 20.167px 46.095px rgb(50 50 50 / 6%);
}

* { box-sizing: border-box; }
html, body { min-width: 1440px; min-height: 967px; margin: 0; background: var(--team-bg); }
body, button, input { font-family: "Fixel", sans-serif; }
button { border: 0; cursor: default; }
img { display: block; }

.team-artboard {
  position: relative;
  width: 1440px;
  height: 967px;
  margin: 0 auto;
  overflow: hidden;
  color: var(--team-ink);
  background: var(--team-bg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.28px;
}

.team-sidebar { position: absolute; left: 45px; top: 24px; width: 181px; height: 505px; }
.team-account { width: 181px; height: 89px; overflow: hidden; border-radius: 12px; background: var(--team-panel); }
.team-workspace-row, .team-user-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.team-workspace-row { height: 48px; padding: 12px 8px; background: rgb(255 255 255 / 20%); }
.team-workspace-name { display: flex; align-items: center; gap: 8px; width: 138px; white-space: nowrap; }
.team-workspace-name img { width: 24px; height: 24px; border-radius: 8px; }
.team-workspace-name strong { overflow: hidden; font-size: 14px; font-weight: 600; letter-spacing: -.14px; text-overflow: ellipsis; }
.team-icon-16 { width: 16px; height: 16px; }
.team-user-row { height: 41px; padding: 8px; }
.team-user-pill { display: flex; align-items: center; gap: 4px; height: 25px; padding: 4px 8px; border-radius: 8px; background: var(--team-white); font-size: 14px; font-weight: 600; letter-spacing: -.14px; white-space: nowrap; }
.team-user-pill img { width: 16px; height: 16px; }

.team-menu { display: flex; flex-direction: column; width: 181px; margin-top: 16px; }
.team-menu a { display: flex; align-items: center; gap: 8px; width: 181px; height: 50px; padding: 0 20px; color: var(--team-ink); border-radius: 8px; text-decoration: none; white-space: nowrap; }
.team-menu a img { width: 24px; height: 24px; opacity: .72; }
.team-menu a.is-active { width: 180px; color: var(--team-orange); background: rgb(255 255 255 / 60%); }
.team-menu a.is-active img { opacity: 1; filter: invert(61%) sepia(72%) saturate(642%) hue-rotate(331deg) brightness(102%) contrast(88%); }

.team-main { position: absolute; left: 274px; top: 24px; width: 1120px; height: 916px; }
.team-toolbar { position: relative; display: flex; align-items: flex-start; justify-content: space-between; width: 1120px; height: 80px; }
.team-toolbar-left { display: flex; flex-direction: column; gap: 16px; }
.team-tabs { display: flex; gap: 4px; height: 32px; }
.team-tab { display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 4px 16px; border: 1px solid rgb(47 47 49 / 20%); border-radius: 16px; color: var(--team-ink); background: transparent; font-size: 14px; font-weight: 500; letter-spacing: -.28px; }
.team-tab img { width: 16px; height: 16px; }
.team-tab.is-active { color: #fff; border-color: var(--team-ink); background: var(--team-ink); }
.team-period { display: flex; align-items: center; height: 32px; border-radius: 8px; overflow: hidden; }
.team-period button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: #fff; }
.team-period button img { width: 16px; height: 16px; }
.team-period span { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; background: rgb(255 255 255 / 60%); font-size: 14px; font-weight: 600; letter-spacing: -.14px; white-space: nowrap; }
.team-period span img { width: 16px; height: 16px; }
.team-actions { display: flex; gap: 10px; }
.team-actions button { display: grid; place-items: center; width: 56px; height: 56px; padding: 12px; border: 1px solid rgb(255 255 255 / 80%); border-radius: 50%; background: rgb(255 255 255 / 60%); }
.team-actions img { width: 24px; height: 24px; }
.team-actions button:first-child img { width: 24px; height: 24px; }
.team-add-user { position: relative; }
.team-add-user img { opacity: .78; filter: invert(48%) sepia(55%) saturate(662%) hue-rotate(103deg) brightness(87%) contrast(86%); }
.team-add-user::after { content: "+"; position: absolute; right: 13px; bottom: 12px; display: grid; place-items: center; width: 9px; height: 9px; border: 1px solid #fff; border-radius: 50%; color: #fff; background: var(--team-green-dark); font: 600 8px/9px "Fixel", sans-serif; }

.team-widget-panel { position: absolute; left: 0; top: 92px; width: 864px; height: 160px; padding: 12px 16px 16px; border-radius: 18px; background: var(--team-panel); }
.team-panel-label, .team-filter-label { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: -.24px; }
.team-panel-label > span, .team-panel-label > b, .team-filter-label > span, .team-filter-label > b { display: flex; align-items: center; gap: 4px; }
.team-panel-label img, .team-filter-label img { width: 12px; height: 12px; }
.team-panel-label > b, .team-filter-label > b { height: 24px; padding: 4px 8px; border-radius: 8px; color: var(--team-orange); background: #fff; }
.team-widget-row { display: flex; gap: 8px; height: 96px; margin-top: 12px; }
.team-widget { display: flex; flex-direction: column; height: 96px; }
.team-widget header { display: flex; align-items: center; gap: 4px; height: 32px; padding: 8px 16px; border-radius: 12px 12px 0 0; background: #fff; box-shadow: var(--team-shadow); font-size: 12px; font-weight: 600; letter-spacing: -.24px; white-space: nowrap; }
.team-widget header img { width: 16px; height: 16px; }
.team-widget > div { display: flex; align-items: center; flex: 1; min-height: 0; padding: 0 16px; border: 1px solid #fff; border-radius: 0 0 16px 16px; background: rgb(255 255 255 / 80%); box-shadow: var(--team-shadow); }
.team-widget > div > strong { font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: -.44px; white-space: nowrap; }
.team-widget > div > i { flex: none; width: 1px; height: 32px; margin: 0 16px; background: rgb(47 47 49 / 16%); }
.team-widget > div > span { display: flex; flex-direction: column; gap: 4px; }
.team-widget > div > span em, .team-widget--overheads small { display: flex; align-items: center; gap: 4px; font-size: 12px; font-style: normal; font-weight: 500; letter-spacing: -.24px; white-space: nowrap; }
.team-widget > div > span em img, .team-widget--overheads small img { width: 16px; height: 16px; }
.team-widget > div > span em b, .team-widget--overheads > div > span > b { font-weight: 600; }
.team-widget--headcount { width: 180px; }
.team-widget--expense { width: 163px; }
.team-widget--overheads { width: 213px; }
.team-widget--utilisation { width: 252px; }
.team-widget--overheads > div > span { gap: 4px; }
.team-widget--overheads small { color: var(--team-ink); }
.team-widget--utilisation > div { gap: 12px; }
.team-utilisation-data { width: 167px; gap: 4px !important; }
.team-utilisation-data > span { display: flex; align-items: center; justify-content: space-between; width: 167px; }
.team-utilisation-data > span em:first-child, .team-utilisation-data > span em:first-child b { color: var(--team-green); }
.team-utilisation-data > span em:last-child, .team-utilisation-data > span em:last-child b { color: var(--team-muted); }
.team-utilisation-data > i { position: relative; display: block; width: 166px; height: 4px; overflow: hidden; border-radius: 2px; background: rgb(47 47 49 / 20%); }
.team-utilisation-data > i b { display: block; width: 67.32%; height: 4px; background: var(--team-green); }

.team-filters { position: absolute; left: 0; top: 264px; width: 653px; height: 101px; padding: 12px 16px 16px; border-radius: 18px; background: var(--team-panel); }
.team-filter-label { padding: 0; }
.team-filter-rule { width: 621px; height: 1px; margin-top: 12px; background: rgb(47 47 49 / 12%); }
.team-filter-pills { display: flex; gap: 24px; align-items: center; height: 25px; margin-top: 12px; }
.team-filter-pills button { height: 25px; padding: 4px 8px; border-radius: 8px; color: #fff; background: var(--team-ink); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: -.24px; white-space: nowrap; }
.team-filter-pills button:nth-child(3) { margin-left: 0; }

.team-table-panel { position: absolute; left: 0; top: 377px; width: 1061px; height: 546px; padding: 16px; border-radius: 18px; background: rgb(255 255 255 / 20%); }
.team-table-tools { display: grid; grid-template-columns: 193px 1fr; gap: 8px; height: 48px; }
.team-rounding { display: grid; grid-template-columns: 91px 40px 62px; align-items: center; height: 48px; overflow: hidden; border-radius: 12px; background: rgb(255 255 255 / 60%); }
.team-rounding span, .team-rounding b, .team-rounding em { display: grid; place-items: center; height: 32px; font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: -.28px; }
.team-rounding b { height: 32px; border-radius: 8px; color: var(--team-orange); background: #fff; font-weight: 600; }
.team-rounding em { color: var(--team-muted); }
.team-search { position: relative; display: block; height: 48px; }
.team-search input { width: 100%; height: 48px; padding: 0 52px 0 16px; border: 0; border-radius: 12px; outline: 0; color: var(--team-ink); background: rgb(255 255 255 / 60%); font-size: 14px; font-weight: 500; letter-spacing: -.28px; }
.team-search input::placeholder { color: rgb(145 145 146 / 42%); opacity: 1; }
.team-search i { position: absolute; right: 20px; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: #cfd0d1; }
.team-search i::after { content: ""; position: absolute; right: -3px; bottom: -1px; width: 7px; height: 2px; border-radius: 2px; background: #cfd0d1; transform: rotate(45deg); }
.team-table { width: 1029px; height: 450px; margin-top: 16px; overflow: hidden; border-radius: 12px; }
.team-table-grid { display: grid; grid-template-columns: 130px 116px 105px 100px 90px 170px 90px 90px 90px; padding-inline: 28px 16px; }
.team-table-head { align-items: center; height: 50px; background: rgb(47 47 49 / 10%); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.team-table-head span:nth-child(n+5) { color: var(--team-muted); }
.team-table-row { position: relative; align-items: center; height: 50px; background: transparent; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.team-table-row::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px; background: rgb(47 47 49 / 10%); }
.team-table-row > span:first-child { position: relative; display: flex; align-items: center; gap: 8px; }
.row-status { width: 12px; height: 12px; border: 2px solid var(--team-orange); border-radius: 50%; }
.row-status::after { content: ""; display: block; width: 4px; height: 2px; margin: 3px auto 0; border-radius: 2px; background: var(--team-orange); }
.row-status--muted { border-color: var(--team-muted); }
.row-status--muted::after { background: var(--team-muted); }
.team-chip { display: inline-flex; align-items: center; height: 25px; padding: 4px 8px; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 600; letter-spacing: -.14px; white-space: nowrap; }
.team-table-row strong { font-size: 18px; font-weight: 500; letter-spacing: -.54px; white-space: nowrap; }
.team-hours { display: flex; flex-direction: column; gap: 4px; width: 146px; }
.team-hours > i { display: block; width: 146px; height: 4px; overflow: hidden; border-radius: 4px; background: rgb(47 47 49 / 18%); }
.team-hours > i b { display: block; width: var(--utilisation, 0%); height: 4px; background: var(--team-green); }
.team-hours > em { display: flex; justify-content: space-between; width: 146px; font-size: 14px; font-style: normal; letter-spacing: -.14px; }
.team-hours > em b { color: var(--team-green); font-weight: 500; }
.team-hours > em small { color: var(--team-muted); font-size: 14px; }
.team-table-row--nonbillable .team-hours > em b { color: var(--team-muted); }