@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot');
  src: url('../fonts/fontello.eot#iefix') format('embedded-opentype'),
  url('../fonts/fontello.woff2') format('woff2'),
  url('../fonts/fontello.woff') format('woff'),
  url('../fonts/fontello.ttf') format('truetype'),
  url('../fonts/fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?75018979#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-warning:before { content: '\e800'; } /* '' */
.icon-play:before { content: '\e801'; } /* '' */
.icon-error:before { content: '\e802'; } /* '' */
.icon-floppy:before { content: '\e803'; } /* '' */
.icon-cog:before { content: '\e804'; } /* '' */
.icon-ok:before { content: '\e805'; } /* '' */
.icon-doc:before { content: '\e806'; } /* '' */
.icon-info-circled:before { content: '\e807'; } /* '' */
.icon-list:before { content: '\e808'; } /* '' */
.icon-ccw:before { content: '\e809'; } /* '' */
.icon-toggle-off:before { content: '\f204'; } /* '' */
.icon-toggle-on:before { content: '\f205'; } /* '' */

.icon-NEW:before {
  content: '\e806';
}
.icon-SAVED:before {
  content: '\e803';
}
.icon-ERROR:before {
  content: '\e802';
}
.icon-BUILT:before {
  content: '\e804';
}
.icon-RUNNING:before {
  content: '\e801';
}
.icon-FINISHED:before {
  content: '\e805';
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font: 400 100%/1.5 Roboto, sans-serif;
  color: rgba(0, 0, 0, .87);
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
}
body {
  color: white;
  --primary-color: #00aabc; /* original */
  --success-color: #30c154; /* tetrad */
  --warning-color: #f7e100; /* tetrad */
  --error-color: #b91300; /* tetrad */
  --light-gray-color: #b3e9ee; /* monochrome_with_complements_and_gray */
  --dark-color: #002b2f; /* monochrome_4 */
  --dark-red-color: #70001d; /* contrasting_hues */
  --yellow-color: #d6e900; /* contrasting_hues */
  --light-blue-color: #b3e9ee; /* monochrome_4 */
  --message-border-color: var(--primary-color);
  --link-color: #ffffff;

  background-color: var(--primary-color);
}

.message {
  display: block;
  border-top: 4px solid;
  border-bottom: 4px solid;
  border-color: var(--message-border-color);
  margin: 2rem 0;
  padding: 1rem;
  font-weight: 700;
  font-size: 1.5rem;
}

.-primary {
  color: var(--primary-color);
  --message-border-color: var(--primary-color);
  --link-color: var(--primary-color);
}
.-success {
  color: var(--success-color);
  --message-border-color: var(--success-color);
  --link-color: var(--success-color);
}
.-warning {
  color: var(--warning-color);
  --message-border-color: var(--warning-color);
  --link-color: var(--warning-color);
}
.-error {
  color: var(--error-color);
  --message-border-color: var(--error-color);
  --link-color: var(--error-color);
}
.-hide {
  display: none !important;
}
table {
  border-collapse: collapse;
}
td {
  padding: 0.5rem;
  border: 1px solid var(--light-gray-color)
}
.-ship {
  color: var(--primary-color);
  font-weight: 700;
}
.-dark {
  background-color: var(--dark-color);
}
.-ship-hit {
  background-color: var(--dark-red-color);
}
.-cell-hit {
  background-color: var(--yellow-color);
}
.-free-cell {
  background-color: var(--light-blue-color);
}
.-paddings {
  padding: 1px 3px;
}
.-counter {
  font-size: 5rem;
  text-align: center;
}
a {
  color: var(--link-color);
  text-underline-offset: 0.3rem;
  text-decoration-style: dotted;
}
a:hover {
  text-decoration: underline;
}
img {
  max-width: 100%;
}
pre {
  padding: 0.5rem;
  background-color: var(--dark-color);
}
strong.-dark {
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}
.page {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1140px;
}
h1, h2, h3 {
  margin: 1rem 0;
  font-weight: 700;
}
h2 {
  border-bottom: 1px solid white;
}
header {
  padding: 15px 0;
  display: flex;
}
header > h1 {
  flex: auto;
  line-height: 39px;
  margin: 0;
}
header > h1::before {
  content: '';
  width: 127px;
  height: 39px;
  display: block;
  float: left;
  margin-right: 15px;
  vertical-align: middle;
  background-size: contain;
  background: url(../img/bss-logo-solid.svg) no-repeat 0 50%;
}
header > h1 a {
  color: white;
  text-decoration: none;
}
header nav ul {
  list-style: none;
}
header nav ul li {
  display: inline-block;
}
header nav ul li a {
  color: white;
  text-decoration: none;
  padding: 1rem;
  font-weight: 700;
}
main {
  padding: 15px 0;
}
form {
  margin: 0 auto;
}

form.login, form.answer {
  max-width: 300px;
}
label {
  display: block;
  margin: 15px 0;
  font-weight: 700;
}

input, button, textarea {
  display: block;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
  line-height: 1.5;
  background-color: var(--primary-color);
  color: white;
  font-weight: 700;
}

input[type=text], input[type=password], input[type=number], textarea {
  background-color: #fff;
  color: rgba(0, 0, 0, .87);
  border: 2px solid rgba(0, 0, 0, .87);
}
label input[type=checkbox] {
  margin: 15px;
  display: inline-block;
  width: auto;
}

textarea {
  height: 300px;
}
input[type=file] {
  padding: 0;
  line-height: 2.4rem;
}
.grouped {
  display: flex;
}

.grouped.game-controls {
  line-height: 72px;
  width: 100%;
  margin: 0 15px;
}

.grouped > * {
  flex: auto;
  margin: 15px;
}

.grouped > :first-child {
  margin-left: 0;
}

.grouped > :last-child {
  margin-right: 0;
}
.result {
  display: flex;
  flex-wrap: wrap;
}

.result > * {
  flex: 1 1 25%;
  padding: 8px;
  max-width: 25%
}

ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

ul.team li.animate {
  display: block;
  padding: 5px 15px;
  background-color: #00AABC;
  color: #FFFFFF;
  animation-name: animateIn;
  animation-duration: 350ms;
  animation-delay: calc(var(--animation-order) * 100ms);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

ul.team li {
  margin-top: 16px;
}

@keyframes animateIn {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(-8px);
  }

  100% {
    opacity: 1;
  }
}
svg text.q-coord, svg text.r-coord, svg text.s-coord {
  fill: var(--primary-color);
  font-size: 40px;
  text-anchor: middle;
}

@keyframes activate-cell {
  from {
    stroke: black;
  }

  50% {
    stroke: var(--dark-red-color);
  }

  to {
    stroke: black;
  }
}

ul.uploads {
  list-style: none;
}

ul.uploads li {
  display: flex;
}

ul.uploads li span {
  flex-grow: 1;
}

ul.uploads li span.shrink {
  flex-grow: 0;
}

ul.uploads li span.fixed-width {
  width: 333px;
}

.matchView {
  clear: both;
}

select {
  display: block;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
  line-height: 1.5;
  background-color: var(--primary-color);
  color: white;
  font-weight: 700;
  border: 2px solid black;
}

.game-board .board {
  width: 100%;
  display: flex;
  flex-flow: column;
}

.game-board .board .members {
  flex-grow: 1;
}

label.group {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 1rem;
}

label.group input {
  border: 1px solid;
}

label.float-right {
  float: right;
  margin: 0;
}

input.toggle-logs {
  display: none;
}
input.toggle-logs + .toggable {
  display: none;
}
input.toggle-logs:checked + .toggable {
  display: block;
}

rect.cell {
  fill: #00aabc;
}
rect.wall {
  fill: #002b2f;
}
rect.start {
  fill: #30c154;
}
rect.finish {
  fill: #d6e900;
}
rect.visited {
  fill: #b3e9ee;
}
rect.error {
  fill: #f71900;
}
rect.trap {
  fill: url(#trap);
}
rect.trap.visited {
  fill: url(#trap-visited);
}
rect.ladderUp {
  fill: url(#ladderUp);
}
rect.ladderUp.visited {
  fill: url(#ladderUp-visited);
}
rect.ladderDown {
  fill: url(#ladderDown);
}
rect.ladderDown.visited {
  fill: url(#ladderDown-visited);
}
.content svg {
  max-height: 90vh;
}

.overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020 ! important;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.25);
}

.modal {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 1030 ! important;
  position: fixed;
  overflow: hidden;
  text-align: center;
}

.modal .dialog {
  box-sizing: border-box;
  background-color: #00aabc;
  border: 10px solid #00aabc;
  margin: 30px auto;
  position: relative;
  max-width: 400px;
  text-align: center;
  display: inline-block;
}

.modal .dialog.popup {
  max-width: 90vw;
  text-align: inherit;
  max-height: 95vh;
}

.modal .dialog > .close:first-child {
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
  top: 0;
  cursor: pointer;
  padding: 0;
  display: block;
  position: absolute;
  background-color: #00aabc;
  right: 0;
  width: 15px;
  height: 15px;
  text-align: center;
  vertical-align: baseline;
  text-decoration: none !important;
  z-index: 10000;
}

.modal .dialog .content {
  text-align: left;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  height: 90vh;
}

.bullet, .tank {
  transform-box: fill-box;
  transform-origin: center;
}
.bullet.rotation-NORTH, .tank.rotation-NORTH {
  transform: rotate(180deg);
}
.bullet.rotation-EAST, .tank.rotation-EAST {
  transform: rotate(270deg);
}
.bullet.rotation-SOUTH, .tank.rotation-SOUTH {
  transform: rotate(0deg);
}
.bullet.rotation-WEST, .tank.rotation-WEST {
  transform: rotate(90deg);
}
.tankNumber {
  font-size: 1.6px;
  fill: white;
}

.sidebar {
  width: 20%;
}