/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 :root {
  --shadowconf: 2px 2px darkgrey;
}

* {
  font-family: Helvetica, sans-serif;
}

body {
  margin: auto;
}

.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 10px);
  padding: 5px;
}

.container > div {
  margin: 2px;
}

.top_bar {
  display: flex;
  flex-grow: 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  border: 1pt black solid;
  background-color: aliceblue;
  box-shadow: var(--shadowconf);
}

.title {
  font-size: xx-large;
  font-weight: bold;
}

.nav {
  margin: 10px;
  right: 0;
}

.nav a {
  color: green;
  background: rgb(200, 255, 200);
  border: 1px green solid;
  padding: 5px 10px;
  text-decoration: none;
  font-size: medium;
}

.messages {
  flex-grow: 0;
}

.info_msg {
  color: blue;
  background: lightblue;
  border: 1px blue solid;
  box-shadow: var(--shadowconf);
  padding: 5px;
}

.error_msg {
  color: red;
  background: rgb(255, 196, 196);
  border: 1px red solid;
  box-shadow: var(--shadowconf);
  padding: 5px;
}

.content {
  flex-grow: 1;
}

.map_ui {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 100%;
}

#map {
  /* height: calc(100% - 2px); */
  flex-grow: 1;
  margin-right: 5px;
  border: 1px black solid;
  box-shadow: var(--shadowconf);
}

.maptools {
  display: flex;
  flex-direction: column;
  font-size: small;
  padding: 5px;
  border: 1pt black solid;
  background-color: aliceblue;
  box-shadow: var(--shadowconf);
}

.mapform {
  overflow-y: scroll;
  height: 0px;
}

.mapform_inner {
  display: flex;
  flex-direction: column;
}

.mapform_inner_horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.center_area {
  display: flex;
  justify-content: center;
}

.form_area {
  width: 25%;
}

.listing_area {
  width: 50%;
}

.form_field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form_buttons {
  display: flex;
  justify-content: space-between;
}

.delete_buttons {
  margin-top: 5em;
  justify-content: center;
}

.slidecontainer {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  gap: 0;
}

button {
  text-decoration: none;
  color: black;
  background: rgb(235, 235, 235);;
  border: 1px black solid;
  padding: 5px 10px;
  margin: 5px;
}

button:hover {
  background: rgb(245, 245, 245);
}

.button_alert {
  color: red;
  background: rgb(255, 200, 200);
  border: 1px red solid;
}

.button_alert:hover {
  background: rgb(255, 235, 235);
}

.button_default {
  color: blue;
  background: rgb(200, 225, 255);
  border: 1px blue solid;
}

.button_default:hover {
  background: rgb(225, 235, 255);
}

label {
  margin-left: 5px;
}

input {
  padding: 5px 10px;
  margin: 5px;
}

table {
  border: 1px solid;
  border-collapse: collapse;
  font-size: small;
}

tr, th, td {
  border: 1px solid;
}

th, td {
  padding: 5px;
}

thead {
  background-color: rgb(200, 255, 200);
}

.results_list {
  font-size: small;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1pt black solid;
  background-color: aliceblue;
  box-shadow: var(--shadowconf);
  justify-content: space-between;
}

.results_table {
  overflow-y: scroll;
  height: calc(70vh);
}

.results_table table,
.results_table tr,
.results_table th,
.results_table td {
  border: none;
}

.status_queue {
  color: black;
}

.status_processing {
  color: blue;
}

.status_expired {
  color: orange;
}

.status_done {
  color: green;
}

.status_failed {
  color: red;
}

.fa-icon a {
  color: darkslategray;
}

.invalid-feedback {
  color: red;
  font-size: small;
}