@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body { padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; }

nav {  display: block; position: fixed; width: calc(100vw - 20px); height: 40px; top: 0; left: 0; padding: 10px; background-color: #e83435; z-index: 50; }
nav img { display: block; position: absolute; top: 15px; left: 5px; width: 60px; }

.content { display: flex; height: 100vh; align-items: center; justify-content: center; flex-direction: column; display: flex; }

.content .bloco { width: calc(100% - 60px); text-align: center; padding: 0 30px; transition: all ease-in-out 0.3s;  max-height: calc(100vh - 40px); margin-top: 40px; overflow-y: scroll; }
.content .bloco h3 { font-size: 1.5em; margin-bottom: 50px;}
.content .bloco.oculto { opacity: 0; display: none; }

.cameraName { display: block; position: relative; width: 100%; height: 100%; font-size: 0.8em; font-weight: bold; text-align: center; color: #fff; padding-top: 11px; }
.btnDesconectar { display: block; position: absolute; top: 0; right: 10px; font-size: 3em; color: #fff; font-weight: 900; cursor: pointer; }
.btnDesconectar.oculto { display: none; }

.passagem { display: block; position: relative; width: 100%; max-width: 300px; height: 100px; margin: 20px auto; padding: 10px; background: #f7f7f7; clear: both; }
.passagem .dados { display: block; position: relative; width: 50%; height: 96%; top: 2%; background: #e0e0e0;}
.passagem .dados.esquerda { left: 2%; float: left; }
.passagem .dados.direita { right: 2%; float: right; }
.passagem .dados .placa { display: block; position: relative; width: 100%; padding-top: 5px; font-size: 1.5em; font-weight: bold; left: -10px; }
.passagem .dados .data, .passagem .dados .hora { display: block; position: relative; width: 100%; padding-top: 5px; font-size: 0.8em; font-weight: bold; }
.passagem .dados .led { display: block; position: absolute; top: -5px; right: -5px; width: 24px; height: 24px; background: #999; border-radius: 50%; }
.passagem .dados .led.verde { background: #4caf50; }
.passagem .dados .led.vermelho { background: #e83435; }

@media (min-width: 768px) {
  .button { min-width: 170px; }
}