/* General */

body {
  font-family: Verdana, Helvetica, sans-serif;
}

form.pure-form label {
  display: block;
  float: left;
  min-width: 10em;
}

.pure-table {
  font-size: 0.9em;
}

/* img { max-width: 80%; } */

@media screen and (max-width: 980px) {
  div#main { margin: 0.5em; }
  img { max-width: 100%; }
}

a:link, a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  color: darkgray;
}

.button-warning { background: rgb(223, 117, 20); color: white; }
.button-error { background: rgb(202, 60, 60); color: white; margin-left: 3em; }

div.center-vertically {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

a.back { margin-right: 10px; }

fieldset.inline-checkbox { max-width: 60%; }
fieldset.inline-checkbox label {
  margin-right: 1em;
  display: inline-block;
  float: none;
  min-width: 0;
}

td.center { text-align: center; }

span.nobreak {
  white-space:nowrap;
}

/* layout */

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
}

#landing .center {
  min-width: 800px;
  min-height: 800px;
}

div.down {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

div.right {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
}

div#center {
  min-width: 800px;
  max-width: 1000px;
}

div#main {
  position: relative;
  min-height: 800px;
}

#side {
  min-width: 200px;
}

#rside {
}

#header {
}

#footer {
  margin: 1em;
}

/* header */

/* footer */

/* side */

#side ul, #side li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#side  ul { margin-top: 10px; }
#side > ul { margin-left: 20px; }
#side > ul > li > ul {
  margin-left: 30px;
}
#side > ul > li > ul > li > ul {
  margin-left: 10px;
}
#side ul.invisible {
  visibility: hidden;
  position: absolute;
}
#side ul.menu > li > a {
  margin-left: 30px;
  font-size: 16px;
  text-decoration: none;
}
#side ul.menu a:link, #side ul.menu a:visited { color: #222; }
#side ul.menu > li {
  padding: 5px;
  margin-bottom: 15px;
  background-repeat: no-repeat;
  background-position: 0px 4px;
  background-size: 25px;
}
#side {
  font-size: 14px;
  font-weight: normal;
}
#side a.site {
  font-size: 12px;
  font-weight: bold;
}

li#nav-home { background-image: url(/images/bootstrap/house.svg); }
li#nav-customers { background-image: url(/images/bootstrap/building.svg); }
li#nav-sites { background-image: url(/images/bootstrap/diagram-2.svg); }
li#nav-floors { background-image: url(/images/bootstrap/list.svg); }
li#nav-anchors { background-image: url(/images/bootstrap/broadcast-pin.svg); }
li#nav-tags { background-image: url(/images/bootstrap/tag.svg); }
li#nav-gateways { background-image: url(/images/bootstrap/broadcast-pin.svg); }
li#nav-users { background-image: url(/images/bootstrap/people.svg); }
li#nav-account { background-image: url(/images/bootstrap/person.svg); }

/* diagram */

#diagram {
  display: block;
  width: 800px;
  height: auto;
}

#grid .labels { font-size: 3px; }
#positions svg .marker { opacity: 0.5; }
#positions svg .label { opacity: 0.7; }
#site text.label, #fullscreen text.label { font-size: 3px; }
#positions text.label { font-size: 30px; }

.toast {
  visibility: hidden;
  position: absolute;
  top: 20px;
  right: 50px;
  padding-top: 12px;
  padding-left: 15px;
  padding-right: 80px;
  border-radius: 8px;
  box-shadow: 1px 2px 4px 2px rgb(227, 222, 222);
  background-color: whitesmoke;
}
.toast * { display: inline-block; }
.toast p {
  bottom: 10px;
  left: 10px;
}
.toast img.icon {
  position: absolute;
  width: 35px;
  height: auto;
}
.toast .close {
  position: absolute;
  width: 30px;
  height: auto;
  top: 15px;
  right: 15px;
}
.toast#connected {
  background: #FBFBFA;
  border-left: 4px solid lightskyblue;
}
.toast#disconnected {
  background: #FFED93;
  border-left: 4px solid orange;
}
.toast.active { visibility: visible; }

#site { position: relative; }

#pan {
  position: absolute;
  top: 20px;
  right: 30px;
}

#pan button {
  width: 30px;
  height: 30px;
}

.actions { margin-top: 2em; }
.actions a:link, .actions a:visited {
  color: black;
}

.row { margin-top: 1em; }

div.inline-edit a, div.inline-add a, div.inline-sub a { 
  padding: 12px;
  padding-left: 42px;
  background-repeat: no-repeat;
  background-position: 10px 13px;
  background-size: 20px;
  background-color: #E5E4E2;
  border-radius: 7px;
  margin-right: 1em;
}

div.inline-add button, div.inline-sub button { 
  /* clear button */
  border: none;
  width: auto;
  overflow: visible;
  background-color: #E5E4E2;
  border-radius: 7px;
  /* icon */
  padding: 12px;
  padding-left: 42px;
  background-repeat: no-repeat;
  background-position: 10px 13px;
  background-size: 20px;
  margin-right: 1em;
}

div.actions div { display: inline-block; }

/* TODO: Make icons gray */
.inline-edit a, .inline-edit button { background-image: url(/images/bootstrap/pencil-square.svg); }
.inline-add a,  .inline-add button { background-image: url(/images/bootstrap/plus-square.svg); }
.inline-sub a,  .inline-sub button { background-image: url(/images/bootstrap/dash-square.svg); }

/* edit anchor */

#edit-anchor input, #edit-anchor select {
  min-width: 8em;
}

/* edit site */

.coord-trans input { width: 7em; }
.coord-trans label { min-width: 11em; }
.coord-trans span { margin-left: 0.5em; margin-right: 0.5em; }

/* show site / show customer */

div.data-overview {
  width: 30em;
  margin-right: 2em;
}


div.floor-preview, div.site-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}

div.floor-preview img, div.site-preview img {
  width: 180px;
  height: auto;
}

div.floor-preview {
  padding: 8px;
  background-color: #fbfbfb;
  border: solid;
  border-width: 1px;
  border-radius: 8px;
  border-color: #f1f1f1;
}

div.site-preview {}

div.data-preview {
  max-width: 35em;
}

/* full */

#fullscreen svg {
  display: block;
  width: 100%;
  height: calc(100% - 1px);
}

/* upload */

#drop_zone {
  border-style: solid;
  border-width: 2px;
  border-radius: 20px;
  border-color: lightgrey;
  min-width: 300px;
  min-height: 6em;
  padding-left: 10px;
  margin-bottom: 20px;
}

img#layer-preview {
  width: 80%;
  height: auto;
}

div.image { margin-top: 30px; }

div.image-preview img {
  width: 200px;
  height: auto;
  /* border-radius: 8px; */
}