html {
  font-size: 10px;
}

html,body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  color: white;
}

[role=main] {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  color: black;
  z-index: 1;
}

/**
 * 1. COMPLEX: Scoped style-sheets within <gaia-header>
 * trump all other rules. !important is required
 * for an app to over-ride the default appearance
 * of content within the custom-element. This may
 * change when we get `:host` and `:content` selectors
 * in shadow-dom.
 */

#accept.hidden {
  display: none !important; /* 1 */
}

#si-sl-screen {
  height: -moz-calc(100% - 5rem - 5rem);
  overflow: auto;
}

#si-sl-screen .message {
  font-size: 2rem;
  padding: 1rem;
  white-space: pre-line;
  word-wrap: break-word;
}

#cp-pin-screen .message {
  color: #000;
  padding: 2rem 1.5rem;
}

#cp-pin-screen .message p {
  margin: 0 0 2rem;
  font-size: 1.5rem;
  line-height: 1.8rem;
}

#cp-auth-failure {
  color: #f00;
}

#cp-details-screen {
  overflow: auto;
}

[data-icon]:before {
  line-height: 6rem;
  text-align: center;
  width: 3rem;
  color: #657073;
}

.view {
  position: absolute;
  top: 0;
  transform: translateX(0 );
  transition: transform var(--transition-duration);
}

.view.right {
  transform: translateX(100%);
}

.view.left {
  transform: translateX(-100%);
}