
/**
  _____  ___   __ __  ____  ___    ____   ____  ___
 / ___/ /   \ |  |  ||    ||   \  |    \ |    ||   \
(   \_ |     ||  |  | |  | |    \ |  D  ) |  | |    \
 \__  ||  Q  ||  |  | |  | |  D  ||    /  |  | |  D  |
 /  \ ||     ||  :  | |  | |     ||    \  |  | |     |
 \    ||     ||     | |  | |     ||  .  \ |  | |     |
  \___| \__,_| \__,_||____||_____||__|\_||____||_____|

 *
 * This file is part of SquidRID (https://github.com/flyandi/squidrid)
 *
 * Copyright (c) 2023 FLY&I (flyandi.net)
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 **/
*,
html,
body {
  padding: 0;
  margin: 0;
  outline: 0;

}

body {
  font-family: 'font';
  font-size: 16px;
  background: #000;
  color: #35f935;
  text-shadow: -1px -1px 0 black, -1px -1px 0 black, -1px 0px 0 black, -1px 1px 0 black, -1px 1px 0 black, -1px -1px 0 black, -1px -1px 0 black, -1px 0px 0 black, -1px 1px 0 black, -1px 1px 0 black, 0px -1px 0 black, 0px -1px 0 black, 0px 0px 0 black, 0px 1px 0 black, 0px 1px 0 black, 1px -1px 0 black, 1px -1px 0 black, 1px 0px 0 black, 1px 1px 0 black, 1px 2px 0 black, 1px -1px 0 black, 1px -1px 0 black, 2px 0px 0 black, 2px 1px 0 black, 2px 2px 0 black;
  text-transform: uppercase;
}

#root {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  position: absolute;
}


a {
  color: #FFAACC
}

img {
  -webkit-filter: drop-shadow(3px 3px 0px #000);
  filter: drop-shadow(3px 3px 0px #000);
}

h1,
h2 {
  font-weight: normal;
  margin-bottom: 1rem;
}

h3 {
  transform: skew(5deg);
  color: #fff;
  margin-bottom:1rem;
  font-size:1rem;
}

input,
form {
  display: inline-block;
}

p,
select,
input[type=submit],
input[type=button],
input[type=input],
input[type=input]:focus,
button {
  font-family: 'font';
  padding: .5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  font-weight: normal;
  font-size: 18px;
  font-weight: bold;
  background-color: #000;
  color: #EEFFEE;
  text-shadow: -1px -1px 0 black, -1px -1px 0 black, -1px 0px 0 black, -1px 1px 0 black, -1px 1px 0 black, -1px -1px 0 black, -1px -1px 0 black, -1px 0px 0 black, -1px 1px 0 black, -1px 1px 0 black, 0px -1px 0 black, 0px -1px 0 black, 0px 0px 0 black, 0px 1px 0 black, 0px 1px 0 black, 1px -1px 0 black, 1px -1px 0 black, 1px 0px 0 black, 1px 1px 0 black, 1px 2px 0 black, 1px -1px 0 black, 1px -1px 0 black, 2px 0px 0 black, 2px 1px 0 black, 2px 2px 0 black;
  box-shadow: 2px 2px black;
  transform: skew(-5deg);
  cursor: pointer;
}

p {
  padding: 0;
  font-size: 0.75rem;
  border: 0;
  color: #35f935;
  background: #aaa;
  padding: 0.2rem;
  transform: skew(5deg);
}

button {
  background-color: #fff;
}

button.secondary {
  background-color: #35f935;
}

select {
  margin-right: 10px;
}

input[type=submit]:active,
input[type=button]:active,
input[type=input]:active,
input[type=input],
button:active {
  background-color: #AAA;
}

input[type=submit].selected,
input[type=button].selected input[type=input].selected,
button.selected {
  background-color: #000;
}



input[type=submit].selected {
  background-color: #ffee44;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 0px;
  box-shadow: 2px 2px black
}

.form {
  margin-bottom: 1rem;
}


.slot {
  margin-bottom: 15px;
}

.slot.dropform {
  margin-bottom: 40px;
}

.slot>span {
  display: inline-block;
}

.secondary {
  color: #EEFFEE;
}

.mode {
  width: 150px;
}

.title {
  width: 250px;
}

.actions {
  width: 280px;
}

.drop {
  transform: skew(5deg);
}

.drop select,
.drop input[type=submit] {
  font-size: 15px !important;
}


.telemetry {
  margin-bottom: 1rem;
  pointer-events: none;
}

.telemetry div {
  background-color: #fff;
  display: block;
  color: #35f935;
  font-size: 1rem;
  padding: .25rem;
  margin-bottom: 0.1rem;
  transform: skew(2deg);
  pointer-events: none;
  border: 1px solid #000;
}

.telemetry div span {
  display: block;
  font-size: .65rem;
  color: #ffffff;
}

.sl {
  transform: skew(5deg);
}

.setting {
  margin-bottom: 30px;
}

.setting label {
  display: inline-block;
  width: 150px;
}

.controls {
  margin-bottom: 1rem;
}

.controls button {
  margin-right: .5rem;
}

#map {}

#map .leaflet-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  min-height: 100%;
}

#map .leaflet-bar a,
#map .leaflet-control-layers {
  border: 0 !important;
}

#map .leaflet-bar a,
#map .leaflet-control-layers-overlays {
  color: #fff !important;
}

#map .leaflet-popup-content-wrapper {
  background-color: #aaa;
  transform: skew(2deg);
}

#map .leaflet-popup-tip {
  background-color: #aaa;
}

#map .leaflet-popup-content {
  color: #35f935;
  padding: 1em;
  background-color: #aaa;

}

#map .leaflet-popup-content sub {
  font-size: 0.6rem;
  color: #fff;
  margin-bottom: 0.2rem;
}

#map .leaflet-popup-content span {
  display: inline-block;
  background-color: #fff;
  padding: 0.2em;
  transform: skew(-10deg);
  margin-right: 0.5rem;
}

.map-control {
  margin-bottom: .25rem;
}

.map-control.right {
  text-align: right;
}

.map-control button {
  display: block;
  margin-bottom: .1rem;
  font-size: 0.75rem;
  padding: 0.5rem;

}

.map-control.right button {
  margin: 0 0 0 auto;
  margin-bottom: .1rem;
}

.map-control.inline button {
  display: inline-block;
}


.remote-control {
  margin-bottom: .25rem;
  color: #fff;
}

.remote-control .text {
  background-color: #aaa;
}

.remote-control button {
  font-size: 0.75rem;
  display: inline-block;
}

#modal {
  background: #000;
  z-index: 1001;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  overflow-y: scroll;
}

#modal .inner {
  position: relative;
  padding: 1rem;
  padding-top: 6rem;

}

#modal .controls {
  background-color: #555;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  z-index: 1000;
}

#screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 1rem;
  border: 1px solid #35f935;
  padding: .5rem;
  text-align:center;
  padding-top:2rem;
}



#screen div {
  margin-bottom: 1rem;
}

#screen div.action {
  margin-top:2rem;
  margin-bottom:2rem;
}

#screen div span {
  display: inline-block;
  margin-right: 1rem;
}

#screen div button {
  background-color: #35f935;
}

@keyframes blink {
  0% {
    border-color: transparent;
  }

  50% {
    border-color: #35f935;
  }

  100% {
    border-color: transparent;
  }
}

#screen div.blink {
  display: inline-block;
  padding: 1rem;
  border: 1px solid transparent;
  animation: blink 1s linear infinite;
}

#error {
  margin-top:3rem;
  color: #ff2e2e;
}

.pathitem {
  margin-bottom:1rem;
}

.pathitem div:first-child  {
  width: 2rem;
} 
.pathitem div {
  display:inline-block;
  margin-right:1rem;
  width:8.5rem;
}

.pathitem div span {
  display:inline-block;
  width: 2.5rem;
}