* {
 margin: 0px;
 border: 0px;
 padding: 0px;
}

body {
 background-color: #000000;
 color: #c0c0c0;
 overflow-x: hidden;
 font-family: arial, sans-serif;
 font-size: 10pt;
}

img {
 vertical-align: bottom;
 max-width: 100%;
 max-height: 100%;
}

a {
 color: #0080ff;
 text-decoration: none;
}

a:hover {
 color: #c0c0c0;
 cursor: pointer;
}

form {
 text-align: center;
}

select,
input,
textarea {
 margin: 2px;
 background-color: #000040;
 color: #c0c0c0;
 font-family: arial, sans-serif;
 font-size: 9pt;
}

#spam {
 display: none;
 visibility: hidden;
}

#page {
 text-align: center;
 padding-bottom: 15px;
}

#page h1,
#page h2,
#page h3,
#page h4,
#page h5,
#page h6 {
 margin: 15px 10px 15px 10px;
 text-align: center;
 font-size: 12pt;
}

#page p {
 margin: 15px 10px 15px 10px;
 text-align: justify;
}

table {
 text-align: left;
 margin: auto;
 border-spacing: 0px;
 border-collapse: collapse;
 font-family: arial, sans-serif;
}

table th,
table td {
 padding: 5px;
}

table th {
 text-align: center;
}

.nowrap {
 white-space: nowrap;
}

#whorobots {
 background-color: #000040;
 overflow-x: scroll;
 white-space: nowrap;
 margin: 10px;
 scrollbar-color: #004080 #002040;
 font-weight: bold;
 -moz-user-select: none;
 user-select: none;
}

#whorobots div.robots {
 display: inline-block;
 padding-top: 5px;
 padding-bottom: 5px;
}

#whorobots div.robot {
 display: inline-block;
 min-width: 100px;
}

#whorobots div.robot img {
 margin-top: 5px;
 margin-bottom: 5px;
}

#whorobots div.robot span.ping {
 color: #808080;
 font-weight: normal;
}

canvas {
 display: block;
}

#fullscreen {
 background-color: #000000;
 -moz-user-select: none;
 user-select: none;
}

#fullscreen #videoosd,
#fullscreen #boutonsgrille {
 display: inline-block;
 vertical-align: middle;
 white-space: nowrap;
}

#fullscreen #boutonsgrille #boutons img {
 margin: 2px;
}

#fullscreen #boutonsgrille #boutons img:hover {
 background-color: #0000ff;
}

#fullscreen #videoosd #video {
 position: absolute;
}

#fullscreen #videoosd #osd {
 position: relative;
 z-index: 1;
}

div.statistiques {
 margin: 10px;
 display: inline-block;
}

#flux table td,
#whousers table td,
#telemetrie table td {
 padding-top: 0px;
 padding-bottom: 0px;
 font-weight: bold;
}

#telemetrie table td {
 min-width: 60px;
}

#chattts {
 margin: 10px;
 height: 480px;
 overflow-y: scroll;
 text-align: left;
 word-break: break-all;
 scrollbar-color: #004080 #002040;
}

#chattts div.message {
 padding: 5px;
}

#chattts span.timestamp,
#chattts span.pseudo,
#chattts span.robot {
 display: inline-block;
 min-width: 100px;
 font-weight: bold;
 color: #00c000;
}

#chattts::-webkit-scrollbar-thumb,
#whorobots::-webkit-scrollbar-thumb {
 background: #004080;
}

#chattts::-webkit-scrollbar,
#whorobots::-webkit-scrollbar {
 background: #002040;
}

#chattts div.capture {
 display: inline-block;
 text-align: center;
 font-weight: bold;
}

div.popup {
 padding: 10px;
 background-color: #000000;
 max-height: 600px;
 overflow: hidden;
 text-align: center;
 white-space: nowrap;
}

div.popup h1,
div.popup h2,
div.popup h3,
div.popup h4,
div.popup h5,
div.popup h6 {
 font-size: 12pt;
}

div.popup .gauche {
 display: block;
 float: left;
 width: 50%;
 text-align: left;
 font-weight: bold;
}

div.popup .droite {
 width: 50%;
}

div.popup .lecteur {
 background-color: #000040;
 margin: auto;
 padding: 5px;
 width: 400px;
 height: 400px;
 white-space: normal;
 text-align: justify;
 overflow-y: scroll;
 resize: both;
}

div.log {
 margin: 10px;
 font-family: monospace;
 font-size: 8pt;
 overflow-x: scroll;
 white-space: pre;
 text-align: left;
}

div.log div.Serveur {
 color: #00c000;
}

div.log div.Client {
 color: #ff0000;
}

div.log div.ModemTX {
 color: #00a000;
}

div.log div.ModemRX {
 color: #ff0000;
}

.alternance0 {
 background-color: #000040;
}

.alternance1 {
 background-color: #000020;
}

#couleurs {
 position: fixed;
 top: 0px;
 right: 0px;
}

#copyright {
 text-align: center;
 font-size: 8pt;
}

@media (max-width: 430px) {
 #flux table tr th:nth-child(5),
 #flux table tr td:nth-child(5) {
  display: none;
  visibility: hidden;
 }

 #whousers table tr th:nth-child(1),
 #whousers table tr td:nth-child(1) {
  display: none;
  visibility: hidden;
 }
}

@media (max-width: 400px) {
 #whousers table tr th:nth-child(2),
 #whousers table tr td:nth-child(2) {
  display: none;
  visibility: hidden;
 }
}