.pcg-tc-container {
  max-width: 320px;
  margin: 1em auto;
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.pcg-tc-container label {
  display: block;
  margin-bottom: .5em;
  font-weight: bold;
}

.pcg-tc-container select {
  width: 100%;
  padding: .5em;
  margin-bottom: 1em;
}

.pcg-tc-buttons {
  display: flex;
  justify-content: space-between;
}

.pcg-tc-btn {
  flex: 1;                     /* fill available width equally */
  display: flex;               /* flexbox centering */
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
  padding: .75em 1em;          /* top/bottom + left/right padding */
  border: none;
  border-radius: 8px;          /* rectangle with 8px rounded corners */
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  margin: 0 .25em;             /* gutter between buttons */
  max-width: none;             /* remove the old circle constraint */
  max-height: none;            /* remove the old circle constraint */
  text-align: center;          /* center single-line text fallback */
}

.pcg-tc-btn-in { /* Clock In Color */
  background: #005997;
}

.pcg-tc-btn-out { /* Clock Out Color */
  background: #917A62;
  opacity: .6;
}

.pcg-tc-btn:disabled {
  cursor: not-allowed;
}

/*.pcg-tc-dot {
  /*width: .75em;
  /*height: .75em;
  /*margin-right: .5em;
  /*background: #fff;
  /*border-radius: 50%;
}