@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#overview-icon {
  background-color: var(--primary);
}

#overview-client-box,
#overview-workspace-bg,
#overview-frame {
  border-radius: 12px;
  transition: all 0.1s ease;
}

#overview.show {
  animation: fadeIn 0.25s ease;
}

#overview-client-box {
  background-color: var(--shadow);
  border: 3px solid var(--surface);
}

#overview-client-box:hover {
  background-color: var(--surface);
}

#overview-client-box:focus {
  background-color: var(--surface);
  border: 3px solid var(--primary);
}

#overview-client-box:active {
  background-color: var(--surface-bright);
  border: 3px solid var(--surface-bright);
}

#overview-workspace-bg {
  border-radius: 20px;
}

#overview-workspace-box {
  padding: 4px;
  border: 2px solid var(--surface);
}

#overview-add-label {
  font-size: 24px;
  color: var(--surface-bright);
}

#overview-workspace-label {
  font-weight: bold;
  background-color: var(--surface);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 4px;
}