.slcwd-score-display {
  outline: none;
}

.slcwd-button {
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  color: #111;
  background: #fff;
}

.slcwd-button a {
  color: unset;
  text-decoration: unset;
}

.slcwd-button .la,
.slcwd-button .las,
.slcwd-button .lar,
.slcwd-button .lab {
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
}

.slcwd-button .label {
  display: inline-block;
  vertical-align: middle;
}

.slcwd-button:disabled {
  color: #ccc;
}

.slcwd-button:hover:not([disabled]) {
  background: #eee;
}

.slcwd-button:active:not([disabled]) {
  background: #ddd;
}

.slcwd-button[selected]:not(disabled) {
  background: #111;
  color: #f9f9f9;
  border-color: transparent;
}

.slcwd-button[selected]:hover:not([disabled]) {
  background: #333;
}

.slcwd-button[selected]:active:not([disabled]) {
  background: #555;
}

.slcwd-button-group>.slcwd-button:not(:first-child) {
  border-left-width: 0;
}

.slcwd-button-group>.slcwd-button:not(:last-child) {
  border-right-width: 0;
}

.slcwd-pages-display {
  height: min(75vh, 130vw);
  position: relative;
  display: flex;
  justify-content: center;
}

.slcwd-pages-display-i {
  height: 100%;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

.slcwd-pages-display-error {
  border: 1px solid #ccc;
  background: white;
  padding: 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}

.slcwd-page {
  flex-grow: 0;
  flex-shrink: 0;
  height: calc(100% - 2px);
  border: 1px solid #ccc;
  background: white;
  box-sizing: content-box;
  overflow: hidden;
}

.slcwd-page:not(:last-child) {
  margin-right: 12px;
}

.slcwd-page-placeholder {
  display: table;
  width: 100%;
  height: 100%;
}

.slcwd-page-placeholder-i {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 0.5em;
  color: #ccc;
  user-select: none;
}

.slcwd-page-graphic {
  width: 100%;
  height: 100%;
}

.slcwd-pages-controls {
  margin-top: 12px;
  z-index: 1;
  position: relative;
}

.slcwd-pages-controls>button {
  padding: 0 8px;
  height: 40px;
  border: 1px solid #ccc;
}

.slcwd-playback-controls {
  margin-top: -.5px;
  border: 1px solid #ccc;
  background: white;
  height: 40px;
  display: flex;
}

.slcwd-playback-button {
  flex-basis: 40px;
}

.slcwd-playback-progress {
  flex: 1;
  width: 0;
  padding: 12px;
}

.slcwd-playback-progressbar {
  position: relative;
  background: #eee;
  height: 100%;
}

.slcwd-playback-progressbar-l {
  position: absolute;
  background: #ddd;
  height: 100%;
  width: 100%;
}

.slcwd-playback-progressbar-i {
  position: absolute;
  background-color: #111;
  height: 100%;
  width: 0%;
}

.slcwd-playback-tooltip {
  background-color: white;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  border: 1px solid #ccc;
  border-radius: 12px;

  padding: 12px;
  position: absolute;
  transform: translateX(78px) translateY(-100%);

  white-space: preserve-breaks;
  z-index: 2;
  display: none;
}

.slcwd-playback-tooltip:hover {
  display: unset;
}

.slcwd-button:hover+.slcwd-playback-tooltip {
  display: unset;
}