/* ---------------------------------| RESETS */
* {margin:0;padding:0}
img, a img { border: none}
ul {list-style-type:none}
a {outline: none; -moz-outline-style: none}

body {
  background: #2D2D2D;
  font-family: 'Arial', Helvetica, sans-serif;
  font-size: 16px;
  color: #BEBEBE;
  }

/* ---------------------------------| TYPE */
h1 {margin-bottom: 0.75em;}
h2 {}
h3 {}
p {margin-bottom: 2em;}

/* ---------------------------------| LAYOUT */
.container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  }
.content {
  padding: 0 2em 2em 1em;
  }
.pad1 {padding: 1em;}
.pad2 {padding: 2em;}
.dark {background: #f1f1f1;}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  }
.grid-3 div.wrapper {padding: 5px;}

#logo {
  display: inline-block;
  margin: 15px 0 0.25em 1em;
  }
#view-bomlinq #logo, #view-2060721 #logo {margin-top: 50px;}

 
nav{
	background: #000000;
    float: right;
    margin: 0;
    overflow:hidden;
    text-align: center;
    }

nav ul{
    margin: 0;
    padding: 0;
}

nav ul li{
    display: inline-block;
    list-style-type: none;
}

nav > ul > li > a{
	color: #AAAAAA;
    display: block;
    line-height: 2em;
    padding: 0.5em 1em;
    text-decoration: none;
}

nav-mobile{
	background: #000000;
    float: left;
    margin: 0;
    overflow:hidden;
    text-align: center;
    }

nav-mobile ul{
    margin: 0;
    padding: 0;
}

nav-mobile ul li{
    display: inline-block;
    list-style-type: none;
}

nav_mobile > ul > li > a{
	color: #AAAAAA;
    display: block;
    line-height: 2em;
    padding: 0.5em 1em;
    text-decoration: none;
}

ul > li > a{
	color: #AAAAAA;
    display: block;
    line-height: 2em;
    padding: 0.5em 1em;
    text-decoration: none;
}

.logo-img{
    float: left;
    position: relative;
    margin: 10px 15px 15px 10px;
}
.bg-div{
   background:#000000;
   overflow: hidden;
}

#footer-content {
  position: absolute;
  bottom: 0;
  left: 0;
}
PCC-btn-large-green {
  display: block;
  margin: 0.5em 0 2.25em 0;
  padding: 0.5em;
  line-height:24px;
  width: 100%;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  text-transform: uppercase;
  background: #666;
  color: #fff;
  padding-top: 1.75em;
  padding-bottom: 1.75em;
  }
  
  PCC-btn-large-red {
  display: block;
  margin: 0.5em 0 2.25em 0;
  padding: 0.5em;
  line-height:24px;
  width: 100%;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  text-transform: uppercase;
  background: green;
  color: #fff;
  padding-top: 1.75em;
  padding-bottom: 1.75em;
  }
  PCC-btn-large-green:hover{background: #000;}
  PCC-btn-large-red {
  display: block;
  margin: 0.5em 0 2.25em 0;
  padding: 0.5em;
  line-height:24px;
  width: 100%;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  text-transform: uppercase;
  background: red;
  color: #fff;
  padding-top: 1.75em;
  padding-bottom: 1.75em;
  }
 PCC-btn-large-red:hover{background: #000;}
 
.sidebar {
  margin: 0 0.5em;
  border-radius: 10px;
  }
  
#menu-btn {display: none;}  
.sidebar button {
  display: block;
  margin: 0.5em 0 2.25em 0;
  padding: 0.5em;
  line-height:24px;
  width: 100%;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  text-transform: uppercase;
  background: #666;
  color: #fff;
  }
.sidebar button:last-child {margin-bottom: 0;}
.sidebar button:hover {background: #999; color: #fff}
.sidebar button.menu-btn {
  display: none;
  }
.sidebar button.btn-large {
  padding-top: 1.75em;
  padding-bottom: 1.75em;
  }
.sidebar button.green {background: green;}
.sidebar button.red {background: red;}
.sidebar button.red:hover, 
.sidebar button.green:hover {background: #000;}
.questionaire_button {
  display: block;
  margin: 0.5em 0 2.25em 0;
  padding: 0.5em;
  line-height:24px;
  border: none;
  border-radius: 5px;
  font-family: 'Arial', Helvetica, sans-serif;
  font-size: 16px; 
  font-weight: bolder;
  text-transform: uppercase;
  background: #666;
  color: #fff;
  }
 .sensor_management {
	display: table;
	width: 99%;
	justify-content: center;
	text-align: center;
 }
 .sensor_management button {
    display: table-cell;
    width: 30%;
  }
 .sensor_button {
  display: inline-block;
  margin: 0px;
  border: none;
  border-radius: 5px;
  font-family: 'Arial', Helvetica, sans-serif;
  font-size: 16px; 
  font-weight: bolder;
  text-transform: uppercase;
  background: #666;
  color: #fff;
  }
/* ---------------------------------| BUTTONS */
button, .btn {cursor: pointer;}
.button_default {
  background-color: #111111; 
  border-radius: 8px;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button_default:hover {
  background-color: #888888;
  color: white;
}

.button_login{
    background:#c90606;
    cursor:pointer;
    border:none;
    width:120px;
    height:60px;
}

.button_map{
    background:url('./img/map-icon.png') no-repeat;
    cursor:pointer;
    border:none;
    width:100px;
    height:100px;
}
.button_settings{
    background:url('./img/Settings-icon.png') no-repeat;
    cursor:pointer;
    border:none;
    width:100px;
    height:100px;
}


input[type=button], input[type=submit], input[type=reset] {
  background-color: #111111; 
  border-radius: 8px;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}


label {
  display: inline-block;
  padding: 4px 11px;
  font-family: 'Arial', Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bolder;
  cursor: pointer;
}


input[type="radio"] {
  background-color: #111111; 
  border-radius: 8px;
  border: none;
  color: red;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Arial', Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bolder;
  margin: 4px 2px;
  cursor: pointer;
}

textarea{
  background-color: #111111; 
  border: solid 1px white;
  color: white;
  padding: 10px ;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

input[type=text], input[type=password] {
  background-color: #111111; 
  border: none;
  color: white;
  padding: 10px ;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

input[type=file] {
  background-color: #111111; 
  border-radius: 8px;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}


.btn.small {
  font-size: 12px;
  border: none;
  padding: 0.5em 1em;
  border-radius: 5px;
  }
.btn {
  font-size: 16px;
  border: none;
  padding: 0.5em 1em;
  border-radius: 5px;
  }
.btn.light {
  background: #eee;
  border: solid 1px #cecece;
  color: #000;
  }
.btn.white {
  background: #fff;
  border: solid 1px #cecece;
  color: #000;
  }
.btn.text {
  background: transparent;
  border: solid 1px transparent;
  color: #000;
  }
.btn.light:hover, .btn.white:hover, .btn.text:hover {border-color: #222; background: #222; color: #fff}
.btn.dark {
  background: #222;
  color: #fff;
  }
.btn.dark:hover {background: #999; color: #fff}


.GUITools{
    display: flex;
	
}
.toolarea{
    width: 200px;
	#margin: 0 0.5em;
	#border-radius: 10px;
}

.displayarea{
    flex-grow: 1;
}



#marquee {
  position: absolute;
  z-index: 10;
  width: 100%;
  background: #f1f1f1;
  box-shadow: 0 1px 3px #ccc;
  }
#marquee.active {
  position: absolute;
  width: 100%;
  background: #fff;
  box-shadow: 0 1px 5px #999;
  }
#marquee p {
  margin: 0 ;
  padding: 0.5em 1em;
  font-size: 14px;  
  }
#marquee.active p {
  padding: 1em 10px;
  font-size: 30px;
  transition: all 0.4s ease;
  }
#marquee-icon {
  float: left;
  padding: 3px 5px 0 0;
  color: #666;
  }
#marquee-close {
  display:none;
  position: absolute;
  }
#marquee.active #marquee-close {
  display: block;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: #ccc;
  cursor: pointer;
  }
#marquee.message, #marquee.message #marquee-icon {color: green;}
#marquee.warning, #marquee.warning #marquee-icon {color: orange;}
#marquee.error, #marquee.error #marquee-icon {color: red;}


/* ---------------------------------| COMPONENTS */
.ipaddress {
  position: absolute;
  top: 80px;
  right: 1.5em;
  font-size: 13px;
  color: #999;
  }

/* LED's ----- */
.led {
  display: block;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background: #f1f1f1;
  border: none;
  border-radius: 24px;
  box-shadow: inset 0 1px 2px #999;
  }
  
  .jumboled {
  display: block;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  background: #f1f1f1;
  border: none;
  border-radius: 24px;
  box-shadow: inset 0 1px 2px #999;
  }
  
  .miniled {
  display: block;
  margin: 0 auto;
  width: 15px;
  height: 15px;
  background: #f1f1f1;
  border: none;
  border-radius: 24px;
  box-shadow: inset 0 1px 2px #999;
  }


/* modals ----- */
.modal {
  display: none;
  position: absolute;
  z-index: 20;
  width: 100%;   
  border: solid 5px #fff;
  border-radius: 5px;
  box-shadow: 0 4px 10px #999;
  }
.modal-content {
  padding: 10px;
  background: #f1f1f1;
  }
.modal-content input[type=text] {width: 90%;}
.modal-content .close {
  float: right;
  color: #999;
  cursor: pointer;
  }
.modal-content button.close {
  float: none;
  color: inherit;
  cursor: pointer;
  }
.modal-warning, .modal-danger {
  display: none;
  max-width: 80%;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);  
  border-width: 20px;
  }
.modal-warning {
  border-color: yellow;
  }
  
.modal-map{
   display: none;
   height:90%;
  width: 95%;
   top: 5%;
   margin-left: auto;  
   margin-right: auto;  
   max-width: 100%;   
   border-color: red;
    border-width: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 10px #999;
  }
 .modal-default-close {
            margin: 0;
          
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 23px;
            background-color: red;
            color: #ffffff;
            font-size: 40px;
            opacity: 1;
            z-index: 10;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);

        }
.modal-message {
  background: white;
  display: none;
  max-width: 80%;
  top: 10%;
   left: 50%;
  transform: translate(-50%, -50%);  
  border-width: 20px;
  font-family: 'Arial', Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  color: black;
  border-color: red;
  border-radius: 20px;
  box-shadow: 0 4px 20px #999;
  }
.modal-instructions {
  height: 80%; /* or any value */
  overflow-y: auto;
  border-color: black;
  background: white;
   display: none;
  width: 79%;
   top: 10%;
  left: 10%;  
  position: absolute;
  z-index: 20; 
    border-width: 5px;
  border-radius: 5px;
  box-shadow: 0 4px 10px #999;
  }
.modal-tools {
  border-color: black;
  background: white;
   display: none;
  width: 80%;
   top: 10%;
  left: 10%;  
  position: absolute;
  z-index: 20; 
    border-width: 5px;
  border-radius: 5px;
  box-shadow: 0 4px 10px #999;
  }
  .modal-login {
  border-color: black;
  background: white;
   display: block;
  width: 100%;
   top: 10%;
  margin-left: auto;  
   margin-right: auto;  
  position: absolute;
  z-index: 20; 
    border-width: 5px;
  border-radius: 5px;
  box-shadow: 0 4px 10px #999;
  }
 .modal-camera {
  border-color: white;
  background-color: black; 
  color:white;
  display: none;
  width: 95%;
   top: 10%;
   margin-left: auto;  
   margin-right: auto;  
  position: absolute;
  z-index: 20; 
    border-width: 5px;
  border-radius: 5px;
  box-shadow: 0 4px 10px #999;
  }
  .modal-login {
  border-color: white;
  background-color: #F3F3F3; 
  color:black;
  display: none;
  width: 95%;
   top: 10%;
   margin-left: auto;  
   margin-right: auto;  
  position: absolute;
  z-index: 20; 
    border-width: 5px;
  border-radius: 5px;
  box-shadow: 0 4px 10px #999;
  }
.modal-options {
  border-color: black;
  }
.modal-danger {
  border-color: red;
  }
.modal-danger {
  border-color: red;
  }
.modal-warning .modal-content, .modal-danger .modal-content {
   text-align: center;
  }


/* ---------------------------------| TABLES */
.table.wide {width: 100%;}
.table.wide tr th {
  border-bottom: solid 4px #cecece;
  }
.table.wide tr td {
  padding: 0.5em 0;
  text-align: center;
  }
.table.striped tbody tr:nth-child(even) {
  background-color: #f6f6f6;  
  }

/* ---------------------------------| FORM ELEMENTS */
fieldset {
  padding: 8px;
  border: solid 1px #666;
  border-radius: 8px;
  background: #333333;
  color: #BEBEBE;
  }
legend {
  font-size: 2em;
  font-weight: bold;
  padding: 0 0.5em;
  color: #BEBEBE;
  }
input.borderless {
  border: none;
  }
input.border {
  border: solid 1px #cecece;
  padding: 4px;
  font-size: 16px;
  } 
select.primary {
  margin: 0 auto;
  width: 80%;
  padding: 0.5em;
  font-size: 16px;
  text-align: center;
  }

/* <select> replacement ----- */
.select-custom {
  display: inline-block;
  position: relative;
  }
.select-custom * {cursor: pointer;}
.select-custom .display {
  border: solid 1px #000;
  padding: 0.5em;
  font-size: 16px;
  width: 200px;
  }
.select-custom:after {
  position: absolute;
  display: block;
  content: "\21E3";
  font-family: 'Aria', sans-serif;
  color: #999;
  font-size: 22px;
  z-index: 10;
  top: 5px;
  right: 14px;
  }
.select-custom ul {
  display:none;
  position: absolute;
  z-index: 2;
  list-style-type: none;
  margin: 5px 0 0 0;
  padding: 0;
  width: 200px;
  background: #fff;
  padding: 15px 10px 10px 10px;
  border-radius:5px;
  cursor: default;
  box-shadow: 0 1px 8px #999;
  }
.select-custom ul li {
  display: block;
  background: #f1f1f1;  
  margin-bottom: 20px;
  padding: 0 20px;
  border: solid 1px #cecece;
  line-height: 40px;
  cursor: pointer;
  }
.select-custom ul li:last-child {
  margin-bottom: 0;
  padding: 0;
  border: none;
  background: transparent;        
  text-align: center;
  color: #999;
  }


/* RANGE SLIDER ----- */
.range {
  display:inline-block;
  height: 30px;
  vertical-align: middle;
  }
.range-container {
  display:none; 
  position: absolute;
  z-index: 20;
  top: -30px;
  background: #f1f1f1;
  padding: 10px;
  border: solid 5px #fff;
  border-radius: 5px;
  box-shadow: 0 4px 10px #999;
  }
.range-container-open-btn {
  margin-left: 20px;
  color: #999;
  cursor: pointer;
  }
.range-container hr {
  margin: 10px 0 15px 0;
  border: none;
  border-top: solid 1px #cecece;
  border-bottom: solid 1px #fff;
  }
.range-container button:first-of-type {
  margin-right: 20px;
  }
.range-display {
  display:inline-block;
  width: 40px;
  height: 30px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 12px;
  color:#999;
  font-family: 'Lucida Console';
  }
  


/* ---------------------------------| Page-specific styles */
/* -----| Command */
#view-command input[type=text] {
  display: block;
  width: 95%;
  padding: 0.5em;
  border: solid 1px #000;
  font-size: 20px;
  }
#view-command textarea {
  display: block;
  overflow-y: scroll;
  width: 95%;
  padding: 0.5em;  
  border: none;
  background-color: #111111; 
  font-size: 16px;
  font-family: 'Lucida Console', sans-serif;
  }


/* ---------------------------------| Misc Utility Classes */
.left {float: left;}
.right: {float: right;}
.center: {margin: 0 auto;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.relative {position: relative;}
.clearfix {clear: both;}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  }


/* ---------------------------------| MEDIA QUERIES */
@media only screen and (max-width: 1000px) {

  .container {
    display: initial;
    grid-template-columns: initial;
    } 
  .content {padding: 0;}
  .content table.table select.primary {font-size: 12px;}
  .content section {
    display: block;
    padding: 1em;
    }

  .grid-3 {
    display: initial;
    grid-template-columns: initial;
    }    

  #marquee.active p {
    padding: 1em 0.25em 1em 40px;
    font-size: 18px;
    }
  #marquee.active #marquee-close {  
    top: 10px;
    right: 10px;    
    }    

  .range-container {
    right: 10px;
    min-width: 250px;
    }

  .sidebar {
    margin: 0;
    border-radius: 10px;
    }
  .sidebar.pad1 {padding: 0.25em;}
  #menu-btn {display: block;}
  .sidebar span {display: none;}
  .sidebar button {max-width: 200px; margin-left: auto; margin-right: auto;}
  
  
  
}