.wall-clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at top, #1e3a8a, #0b1f4b);
  position: relative;
  box-shadow: 0 15px 35px rgba(0,0,0,0.35);
}

.wall-clock .rim {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 6px solid #e5e7eb;
}

/* Numbers */
.num {
  position: absolute;
  color: #ffffff;
  font-size: 26px;
  font-weight: 500;
  transform: translate(-50%, -50%);
}

.n12 { top: 18px; left: 50%; }
.n1  { top: 38px; left: 68%; }
.n2  { top: 68px; left: 86%; }
.n3  { top: 50%; left: 94%; }
.n4  { top: 70%; left: 86%; }
.n5  { top: 86%; left: 68%; }
.n6  { top: 94%; left: 50%; }
.n7  { top: 86%; left: 32%; }
.n8  { top: 70%; left: 14%; }
.n9  { top: 50%; left: 6%; }
.n10 { top: 30%; left: 14%; }
.n11 { top: 14%; left: 32%; }

/* Hands */
.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 6px;
}

.hour {
  width: 7px;
  height: 65px;
  background: #ffffff;
}

.minute {
  width: 5px;
  height: 95px;
  background: #ffffff;
}

.second {
  width: 2px;
  height: 110px;
  background: #f8fafc;
}

.center {
  width: 12px;
  height: 12px;
  background: #facc15;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* ###########################Arrangement */

.inner-card {
  position: relative; /* anchor for absolute children */
  padding: 40px 30px;
  /* border: 2px solid #cfd8e3; */
  /* border-radius: 6px; */
}

/* Header pinned to edges */
.card-header-row {
  position: absolute;
  top: 0px!important;
  left: 20px;
  right: 20px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Logo */
.checkin-logo {
      width: 50%;
}

/* Clock stays small */
.clock-wrapper.small {
  transform: scale(0.95);
  /* transform-origin: top right; */
}

/* .clock-wrapper {
  position: absolute;
  top: 20px;
  right: 20px;
} */