* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.5rem;
  color: #444;
  background-color: #eee;
}

/**
 * Utilizado pelo Vue para não exibir nenhum elemento
 * até que a página esteja completamente carregada
 */
[v-cloak] > * {
  display: none;
}
[v-cloak]::before {
  content: 'Carregando o site do Sisap Mobile. Por favor, aguarde...';
}

article {
  max-width: 960px;
  margin: 0 auto;
}

img.icone {
  height: 1em;
  width: 1em;
}

ol,
ul {
  padding-left: 1.4em;
}

h2 {
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 1.5rem 0;
}

p {
  margin: 0 0 1.5rem 0;
}

.app {
  background-color: #fff;
  overflow: hidden;
}

.app-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.app-header .app-logo {
  height: 3em;
  width: 3em;
  object-fit: cover;
  float: left;
  margin-right: 1rem;
}

.app-header .app-nome {
  line-height: 3rem;
  font-size: 1.7rem;
  margin: 0;
  flex: 1;
}

.app-header .app-download {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 10px;
}

.app-header .app-download .app-download-button {
  display: block;
  text-decoration: none;
  background-color: #5c98f9;
  color: #fafafa;
  padding: 6px 12px;
  font-weight: bold;
  white-space: nowrap;
}

.app-header .app-download .app-download-button.app-download-button-unstable {
  font-size: x-small;
  color: yellow;
}

.app-header .app-download .app-download-button:first-child {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.app-header .app-download .app-download-button:last-child {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.app-header .app-download .app-download-button:not(:first-child) {
  margin-left: 1px;
}

.app .app-screenshots {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.app .scroller {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.app .app-screenshots img {
  width: 218px;
  height: 387.733px;
  margin: 5px;
  border-radius: 3px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.passo-a-passo {
  display: flex;
  flex-direction: row;
}

.passo-a-passo .instrucoes {
  margin-right: 1.5rem;
}

.passo-a-passo .video {
  border-radius: 5px;
  overflow: hidden;
  min-width: 358px;
  border: 1px solid #ddd;
}

.passo-a-passo .video video {
  width: 358px;
  height: 762px;
  display: block;
}

.buttonLabel {
  font-size: 1.5rem;
}

.toggleButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.customButton {
  width: 100%;
  height: 50px;
  background-color: transparent;
  border: 0px none transparent;
  outline: none;
  color: #444;
  font-weight: bold;
}

.activeButton {
  background-color: #444;
  color: white;
}

ul {
  margin-bottom: 10px;
}

.articleBackgroundCSSHomologacao {
  background-color: #7f8c8d !important;
  color: #ecf0f1 !important;
}

/** MOBILE */
@media screen and (max-width: 768px) {
  body {
    margin: 0;
  }

  .app {
    padding: 1.5em;
  }

  .app-header {
    flex-direction: column;
    align-items: center;
  }

  .passo-a-passo {
    flex-direction: column;
    align-items: center;
  }

  .passo-a-passo .instrucoes {
    margin-bottom: 1.5rem;
  }

  .dt {
    display: none;
  }
}

/** DESKTOP */
@media screen and (min-width: 769px) {
  .app {
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 3em;
  }

  .mb {
    display: none;
  }
}