styles.css

/* create color variables */
:root {
  --color-gray: #8b8792;
  --color-orange: #d66d58;
  --color-orange-hover: #f9f4f3;
  --color-button-hover: #f48b76;
  --color-header-bg: #f9f9f9;
  --color-title: #2b2337;
  --color-bg: #ffffff;
  --color-header-border: #f0f0f0;
  --color-delete-bg: #f5f5f5;
  --color-select-hover: #eee9e8;
}

/* colors for the dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-gray: #8b8792;
    --color-orange: #d66d58;
    --color-orange-hover: #332c3f;
    --color-header-bg: #312a3d;
    --color-title: #ffffff;
    --color-bg: #2b2437;
    --color-header-border: #433c4d;
    --color-delete-bg: #fff;
    --color-select-hover: #50495c;
  }

  .picker-container img {
    /* change color select arrow */
    filter: invert(100%);
  }

  a {
    color: var(--color-orange);
  }
}

.link {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

html {
  overflow: hidden;
}

body {
  overflow: hidden;
  margin: 0;
  background-color: var(--color-bg);
}

/* Parts of the following code comes (mostly) directly from Google's own calculated (not source) styles, for hopeful consistency, with some removed bloat and the exclusion of copyrighted resources like Google Sans. I then adjusted the styles to use new flex-box positioning to solve some issues with resizing. */
button {
  border: none;
  outline: none;
  cursor: pointer;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  outline: none;
}

header {
  background-color: var(--color-header-bg);
  border-bottom: 1px solid var(--color-header-border);
  height: 48px;
  padding-left: 17px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-title);
}

header img {
  margin-right: 8px;
}

.content {
  background-color: var(--color-bg);
}

.cell-body {
  font: 13px/27px Roboto, RobotoDraft, Arial, sans-serif;
  line-height: normal;
  font-family: "Segoe UI", "Roboto", arial, sans-serif;
  outline-offset: -2px;
  white-space: nowrap;
  color: inherit;
  border: none;
  cursor: pointer;
  height: 35px;
  outline: 0;
  padding: 12px 20px;
  border-top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.cell-image {
  border-radius: 50%;
  overflow: hidden;
  border: none;
  vertical-align: top;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
}

.top {
  margin: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;

  min-width: 0;
}

.cell-title {
  font: bold 14px/18px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  color: var(--color-title);
}

.serviceName {
  color: #3c4043;
  font: 500 14px/18px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  letter-spacing: 0.25px;
  text-align: inherit;
}

.cell-description {
  color: #88848f;
  font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}

.cell-corner {
  color: var(--color-title);
  position: absolute;
  right: 20px;
}

/* .cell-body:active, */
/* .cell-body:focus, */
.cell-body:hover {
  background-color: var(--color-orange-hover);
}
/* Style the tab */
.tab {
  overflow: hidden;
  width: 100%;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  text-transform: uppercase;
  padding: 14px 16px;
  transition: all 0.2s linear;
  width: 50%;
  color: var(--color-gray);
  font: 900 11px/18px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  height: 54px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--color-orange-hover);
}

/* Create an active/current tablink class */
.tab button.active {
  color: var(--color-orange);
  position: relative;
}

.tab button.active::before {
  position: absolute;
  content: "";
  height: 4px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--color-orange);
  animation: fadeEffect 0.5s; /* Fading effect takes 1 second */
}

/* Style the tab content */
.tabcontent {
  display: none;
  min-width: 328px;
  padding-bottom: 14px;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.tabcontent h3 {
  color: var(--color-title);
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  margin: 24px 20px;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.picker-container {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-title);
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
}

.picker-container select {
  background: var(--color-orange-hover);
  color: var(--color-title);
  border-radius: 100px;
  text-indent: 20px;
  height: 42px;
  border: none;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-title);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s linear;
}

.picker-container select:hover {
  background-color: var(--color-select-hover);
}

.picker-container label {
  margin-bottom: 10px;
}

.picker-container img {
  position: absolute;
  right: 40px;
  top: 65%;
}

.action-button button {
  background: #d66d58;
  border-radius: 100px;
  width: 278px;
  height: 46px;
  margin: 4px 20px 12px 20px;
  font-weight: 900;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #ffffff;
  transition: all 0.2s linear;
}

.action-button button:hover {
  background-color: var(--color-button-hover);
}

.hr {
  background: var(--color-header-border);
  margin: 20px;
  height: 1px;
}

.cell-delete {
  background-color: transparent;
  height: 24px;
  width: 24px;
}

.cell-delete circle {
  fill: var(--color-delete-bg);
}

.cell-delete:hover circle {
  fill: #fc676a;
}

.cell-delete:hover rect {
  fill: #fff;
}

.cell-delete:hover path {
  stroke: #fff;
}

.footer {
  color: var(--color-title);
  padding: 0 14px 14px 14px;
}