/* layout of the pce-ui.css demo pages on touch devices (pcejs-page.js adds
   the pcejs-touch class) */

html.pcejs-touch body {
  margin: 0 8px;
  padding: 0;
  background: none;
  box-shadow: none;
}

html.pcejs-touch canvas {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.pcejs-touch #titlebar small,
html.pcejs-touch .title {
  display: none;
}

html.pcejs-touch #titlebar {
  height: initial;
}

html.pcejs-touch #titlebar h1 {
  padding-bottom: 8px;
}

html.pcejs-touch #titlebar .description {
  position: static;
  width: initial;
}

html.pcejs-touch .container {
  background: none;
  width: auto;
  height: auto;
  padding: 0;
}

.pcejs-keyboard {
  display: block;
  width: 180px;
  margin: 8px auto;
}

.pcejs-keyboard::placeholder {
  color: black;
}