* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  color: #080408;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
}
html, body { font-size: xx-small; }
.notification {
  background-color: #f0ffff;
  display: flex;
  font-size: 4rem;
}
.notification .tableno {
  align-items: center;
  display: flex;
  font-size: 4rem;
  font-weight: bold;
  flex: 0.35;
  padding: 1rem;
  opacity: 1;
  justify-content: center;
  min-width: 8rem;
}

.notification .new {
  align-items: center;
  display: flex;
  padding: 1rem;
  justify-content: center;
  flex: 0.05;
  min-width: 2rem;
}

.notification .caption {
  align-items: center;
  background-color: #f0f0ff;
  display: flex;
  flex: 1;
  padding: 1rem;
}

.notification .caption .client {
  color: #d84444;
  padding-left: 1rem;
}

.notification .caption .worker {
  color: #1633c2;
  font-weight: bold;
}

.blink {
  animation: blinking 2s linear infinite;
}

@keyframes blinking {
  50% {
    opacity: 0;
  }
}

#dialog {
  align-items: center;
  background: linear-gradient(to bottom, #9bcfca 0%, #68cf48 100%);
  color: #f0f0f0;
  display: none;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#dialog h1 {
  font-size: 10rem;
  margin: 2rem 0;
}