body {background-color: Gainsboro;}

#main {margin: 0px 0px 0px 10px;}
#main a {color: black;}
#main a:visited {color: silver;}
h1 {margin-top: 20px; margin-left: 10px}
p {margin-left: 10px}
h3 {padding-left: 10px;}
h4 {padding-left: 10px;}

#drop-area {
	border: 2px dashed #ccc;
	border-radius: 20px;
	width: 480px;
	font-family: sans-serif;
	margin: 100px auto;
	padding: 20px;
}

#drop-area.highlight {
	border-color: purple;
}

.my-form {
	margin-bottom: 10px;
}

#gallery {
	margin-top: 10px;
}

#gallery img {
	width: 150px;
	margin-bottom: 10px;
	margin-right: 10px;
	vertical-align: middle;
}

.button {
	display: inline-block;
	padding: 10px;
	background: #ccc;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #ccc;
}

.button:hover {
	background: #ddd;
}

#fileElem {
	display: none;
}

img {
  border:solid 2px;
  border-bottom-color:#ffe;
  border-left-color:#eed;
  border-right-color:#eed;
  border-top-color:#ccb;
  max-height:100%;
  max-width:100%;
}
/* original code from https://codepen.io/chris22smith/pen/PbBwjp */
.frame {
  background-color:#ddc;
  border:solid 5vmin #eee;
  border-bottom-color:#fff;
  border-left-color:#eee;
  border-radius:2px;
  border-right-color:#eee;
  border-top-color:#ddd;
  box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
  box-sizing:border-box;
  display:inline-block;
  margin:5vh 10vw;
  padding:8vmin;
  position:relative;
  text-align:center;
}
.frame::before {
    border-radius:2px;
    bottom:-2vmin;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
    content:"";
    left:-2vmin;
    position:absolute;
    right:-2vmin;
    top:-2vmin;
  }
.frame::after {
    border-radius:2px;
    bottom:-2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
    content:"";
    left:-2.5vmin;
    position:absolute;
    right:-2.5vmin;
    top:-2.5vmin;
  }
.dataTables_wrapper {width: 1200px;}
.admin-form {margin-left:10px; width: 1050px; background: lightgray; padding: 20px;}
.admin-form select {width: auto;}
.admin-form input[type=checkbox] {width: auto;}
/* changing the placeholder color in admin/newuser.php */
input[type=text]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: silver;
  opacity: 1; /* Firefox */
}

input[type=text]::-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: silver;
}

input[type=text]::-ms-input-placeholder { /* Microsoft Edge */
  color: silver;
}
.left {margin-left: 10px;}
input[type=submit] {margin-left: 10px;}
table.dataTable {margin-left: 10px;}
table.vs-width {width: 300px; margin-left: 10px; margin-right: 10px;}
table.vz-width {width: 500px; margin-left: 10px; margin-right: 10px;}
table.vg-width {width: 800px; margin-left: 10px; margin-right: 10px;}
table.ve-width {width: 1000px; margin-left: 10px; margin-right: 10px;}
table.ve-width {width: 1200px; margin-left: 10px; margin-right: 10px;}
table.vx-width {width: 100%; margin-left: 10px; margin-right: 10px;}
table.vxx-width {width: 1350px; margin-left: 10px; margin-right: 10px;}
table.vy-width {width: 1400px; margin-left: 10px; margin-right: 10px;}
table.vxxx-width {width: 1500px; margin-left: 10px; margin-right: 10px;}

.dataTables_info {margin-left: 10px; margin-bottom: 20px;}
.dataTables_filter {width: 500px;}
.dataTables_length {padding-left: 15px;}
.paginate_button {padding: 0;}
label {width: 300px;}
.menu {width: 100%; margin-bottom: 20px;}
.container {margin-left: 0px;}
.btn-primary {background-color: rgb(84,153,199); border-color: rgb(84,153,199);} /* Overwriting default colors from Bootstrap */
.flag-icon {height: 12px; width: 25px; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: transparent;}
/*.btn {background-color: DodgerBlue; font-size: 10px; padding: 1px; border-radius: 1px; transition-duration: 0.2s; color: white;}
//.btn:hover {background-color: DarkBlue; color: white;}*/

#od-form {margin-left: 10px;}
#map {
        height: 342px;
        width: 970px;
		margin-left: 10px;
       }

#msg {margin-left: 10px;}
#distance {margin-left: 10px;}
/* The popup bubble styling. */
.popup-bubble {
  /* Position the bubble centred-above its parent. */
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* Style the bubble. */
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  font-family: sans-serif;
  overflow-y: auto;
  max-height: 80px;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  /* Position the div a fixed distance above the tip. */
  position: absolute;
  width: 100%;
  bottom: 8px;
  left: 0;
}

/* This element draws the tip. */
.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Center the tip horizontally. */
  transform: translate(-50%, 0);
  /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
  width: 0;
  height: 0;
  /* The tip is 8px high, and 12px wide. */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid white;
}

/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
  cursor: auto;
  height: 0;
  position: absolute;
  /* The max width of the info window. */
  width: 200px;
}

.infoWindow {font-size: 10px;}
.flag-icon {margin-right: 0px:}
#vessel_name {font-weight: 700; font-size: 12px;}
.btn_blue {background-color: DodgerBlue; color: white; font-size: 10px; line-height: 1; margin: 5px 5px 0px 0px;}
.btn_green {background-color: ForestGreen; color: white; font-size: 10px; line-height: 1; margin: 5px 5px 0px 0px;}

#frm_upload {margin-left: 10px;}

div#drop_zone {
  height: 200px;
  width: 200px;
  border: 2px dotted black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: monospace;
  margin-left: 10px;
}

div#tt.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 100px;
  color: white;
  font-size: 12px;
  background-color: #192733;
  border-radius: 10px;
  padding: 10px 15px 10px 15px;
}

.hover-text:hover .tooltip-text {
  visibility: visible;
}

.tt_hl {background-color: red; color: red;}
.tt_no {background_color: transparent;}