@import url('/fonts/roboto.css');
@font-face {
  font-family: 'ForkAwesome';
  src: url('/fonts/forkawesome-webfont.eot?v=1.1.7');
  src: url('/fonts/forkawesome-webfont.eot?#iefix&v=1.1.7') format('embedded-opentype'), url('/fonts/forkawesome-webfont.woff2?v=1.1.7') format('woff2'), url('/fonts/forkawesome-webfont.woff?v=1.1.7') format('woff'), url('/fonts/forkawesome-webfont.ttf?v=1.1.7') format('truetype'), url('/fonts/forkawesome-webfont.svg?v=1.1.7#forkawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Roboto';
  padding: 0;
  margin: 0;
  background: url("/space.jpg");
  color: #ffffff;
}

header {
  width: 100%;
  height: 84px;
  background: #000080;
  padding: 8;
  left: 0;
  top: 0;
  display:block;
  color: #ffffff;
}

content {
/*  height: calc(100% - 84px); */
  width: 100%;
  padding: 8;
  background: #ffaa0011;/**/
  display:block;
  color: #ffffff;
}

footer {
  padding: 1 10 1 10;
  font-size: 12px;
  position: fixed;
  right: 0;
  bottom: 0;
  transform-origin: right top;
  transform: rotate(90deg);
}

a {
  text-decoration: none;
  color: inherit;
}
div {
  margin: 4px;
}

button {
  border-radius: 4px;
  padding: 8px;
  color: #001144;
  background: #ffffff;
  border-color: #ffffff;
}

button:hover {
  background: #ffaa00;
  border-color: #ffaa00;
}

video {
  /*height: 216px;
  /*width: 384px;/**/
  /*min-height: 180px;
  max-height: 270px;
  min-width: 320px;
  max-width: 480px;/**/
  background: #000000;
}


#map {
/*  height: 300px;/**/
  width: 300px;
}

.fa {
  font-family: 'ForkAwesome';
  width: 42px;
}
.inv {
  display: none;
}

.tab {
  display: grid;
}
.input, .w300 {
  width: 300px;
}
.w320 {
  width: 320px;
}
.gps, .w140 {
  width: 140px;
}

@media (min-width: 480px) {
  video {
    height: 216px;
    width: 384px;
  }
  .tab.upload {
    grid-template-columns: 150px auto;
  }
  .tab {
    grid-template-columns: auto auto;
  }
  .image {
    max-height: 216px;
    max-width: 384px;
  }
  .grid2 {
    grid-column: span 2;
    max-width: 480px;
  }
}

.ftab {
  display: flex;
  flex-flow: row wrap;
}

.flm {
  border: solid 2px #ffaa00;
  border-radius: 4px;
  background: #ffaa0044;
  padding: 8px;
}
@media (max-width: 479px) {
  video {
    width: 100%;
  }
  .image {
    width: 100%;
  }
  .flm {
    max-width: 90%;
  }
}

.flm:hover {
  background: #ffaa00;
  color: #000000;
}
.v-link {
  color: #000080;
  background: #ffaa00;
}
.v-link:hover {
  color: #ff0000;
}

.error {
  color: #ff0000;
}

:disabled {
  background: #ff0000;
  border-color: #ff0000;
}

:disabled:hover {
  background: #ff0000;
  border-color: #ff0000;
}

.ok:hover {
  border-color: #008800;
  background: #008800;
  color: #000000;
}

.ok {
  border-color: #008800;
  background: #00880088;
  color: #ffffff;
}