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

body {
  background-image: url('../img/topo-bg-2.jpg');
  background-size: contain;
  font-family: 'Nunito', sans-serif;
}

.bg-cover {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(250,250,250,0.9);
}

.navbar-h8 {
  background-color: rgb(220, 68, 5);
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 20px;
}

.navbar-h8 img {
  width: 60px;
}

.navbar-h8.navbar-light .navbar-nav .nav-link {
  color: rgb(255,255,255);
}

.mission-planner {
  position: fixed;
  top: 86px;
  left: 0px;
  width: 100vw;
  height: calc(100vh - 86px);
  background-color: white;
}

.mission-planner .sidebar {
  position: fixed;
  top: 86px;
  left: 0px;
  width: 500px;
  height: calc(100vh - 86px);
  background-color: rgb(245,245,245);
  border-right: 1px rgb(200,200,200) solid;
  overflow: auto;
}

.mission-planner .request-progress {
  position: fixed;
  top: 86px;
  right: 0px;
  width: calc(100vw - 500px);
  height: 50px;
}

.mission-planner .map {
  position: fixed;
  top: 136px;
  right: 0px;
  width: calc(100vw - 500px);
  height: calc(100vh - 136px);
}

.marker {
  background-size: cover;
  width: 20px;
  height: 20px;
  border-radius: 10%;
  opacity: 1.0;
  border: 0px solid #fff;
  cursor: pointer;
}

.marker.marker-drone {
  background-image: url('/icons/drone.png');
  width: 28px;
  height: 30px;
}

.marker.marker-numbered {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.7rem;
  opacity: 1.0;
  border: 1px solid #fff;
  background-color: #fff;
  font-size: 0.7rem;
  color: #000;
  padding-left: 0.45rem;
  cursor: pointer;
}

.admin-layout {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
}

.admin-layout-sidebar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 225px;
  height: 100vh;
  background-color: rgb(100,100,100);
}

.admin-layout-sidebar .menu-item {
  width: 100%;
  color: rgb(220,220,220);
  padding: 10px;
  border-top: 1px rgb(220,220,220) solid;
  display: block;
}

.admin-layout-sidebar .menu-item:hover {
  background-color: rgb(80,80,80);
  color: rgb(250,250,250);
  text-decoration: none;
}

.admin-layout-sidebar .menu-item:last-child {
  border-bottom: 1px rgb(220,220,220) solid;
}

.admin-layout-content {
  position: fixed;
  top: 0px;
  right: 0px;
  width: calc(100vw - 225px);
  height: 100vh;
  padding: 20px;
}

.card.card-alert {
  border-radius: 0px;
}

.card.card-client {
  border-radius: 0px;
  border: 1px rgb(220,68,5) solid;
}

.card.card-client .card-header {
  border-radius: 0px;
  background-color: rgb(255,255,255);
  border-bottom: 2px rgb(220,68,5) solid;
  margin-left: 5px;
  margin-right: 5px;
  padding: 8px 12px;
  color: rgb(220, 68, 5);
}

.card.card-admin {
  border-radius: 0px;
  border: 1px rgb(100,100,100) solid;
  border-bottom: 4px rgb(100,100,100) solid;
}

.card.card-admin .card-header {
  border-radius: 0px;
  background-color: rgb(100,100,100);
  color: rgb(250,250,250);
  margin-left: -1px;
}

.card.card-alert {
  border: 1px rgb(220,68,5) solid;
}

.alert {
  border-radius: 0px;
  border: 0px;
  color: rgb(255,255,255);
}

.alert.alert-info {
  background-color: rgb(143,174,255);
}

.alert.alert-success {
  background-color: rgb(101,192,185);
}

.alert.alert-warning {
  background-color: rgb(255,161,87);
}

.alert.alert-danger {
  background-color: rgb(248,98,99);
}

.btn {
  border-radius: 0px;
}

.form-control {
  border-radius: 0px;
}

.list-group {
  border-radius: 0px;
}

.list-group-item {
  background-color: rgba(220,68,5,0.05);
  border: 1px rgb(220,68,5) solid;
  color: rgba(220,68,5,0.9);
}

.list-group-item:hover {
  background-color: rgba(220,68,5,0.15);
  text-decoration: none;
  color: rgba(220,68,5,1);
}