header {
	background-color: orange;
}
.navbar-brand{
	color:white;
	font-weight:bold;
	text-shadow: 2px 2px #E65100;
}
.nav-item a{
	color:rgb(177,107,1);
}
nav  .active  a{
	color:white!important;
}
nav a:hover {
	color:white;
	text-shadow: 2px 2px  4px #000000; 
}

.btn-warning {
	 background-color: transparent;
	 border:solid white;
	 color:white;
}
.btn-warning:hover {
	
	 color:white;
	 background-color: transparent;
	 border:solid white;
	 text-shadow: 2px 2px  4px rgb(80,80,80); 
	 box-shadow: 2px 2px 10px rgb(177,107,1);;
}

.img-logo{
			margin-left: auto;
			margin-right: auto; 
			display:block; 
		}
		
/* Style the list */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

#cameraBackground {
	background-image: url(<?= IMAIMAGE ?>.'/camera-bg.png');
	background-size: cover;
	background-position: center;
	position: relative;
	height: 360px;
	 color: grey;
	 text-align=center;
}
#myCanvas {
  background-color: grey; 
  width: 100%;
  height: auto;
}


#panel-result {
	border:solid orange;
	 
}
#panel-result-in {
	border:solid white;
	background-color: orange;
	min-height:120px;
}
#list-header {
  background-image: linear-gradient(#FFB74D, #FFF3E0);
  font-size:20px;
}

.list-group .list-group-item:hover {
	background-color: #FFF3E0;
}
 
.card-horizontal {
	display: flex;
	flex: 1 1 auto;
}

#smbell:hover {
	color: white;
}
/*Security Image*/
.imgcircle {
	width:90%;
	border: 10px solid transparent;
	padding : 5px;
}

.box-selected > img{ 
	border-color:orange;
}
 
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

.modal-row {
  margin-left: -20px;
  margin-top: -20px;
  margin-bottom: -20px;
}
	
/* Modal Content/Box */
#myModal .modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  width: 80%; /* Could be more or less, depending on screen size */
  color: black;
  font-size:20px;
  border-radius: 3em;  
} 

#modal-h {
	font-size:24px;
	color:red; 
}

#img-block {
		display:none;
}

#myModal2 .modal-content {
  background-color: #fefefe;
  margin: 25% auto; /* 15% from the top and centered */
  padding: 20px;
  width: 50%; /* Could be more or less, depending on screen size */
  color: black;
  font-size:20px;
  border-radius: 1em;  
} 

#modal-h2 {
	font-size:24px;
	color : orange;
}

#img-block2 {
	display:block;
	width:10%;
	float:right;
}

#testModal .modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  width: 80%; /* Could be more or less, depending on screen size */
  color: black;
  
  border-radius: 1em;  
} 

.custom-control-input {
	box-sizing: border-box;  
	padding: 2;
	position: absolute; 
	z-index: -1; 
	opacity: 0;
}

.custom-control-label{
	position: relative; 
	margin-bottom: 0; 
	vertical-align: top;
}
 
@media screen and (max-width:600px){
	.modal-content { 
	  border-radius: 1em; 
	} 
	.modal-content {
		font-size:1em; 
	} 
	#modal-col3{
		 display: none; 
	} 
	#modal-h {
		font-size : 1em;
		color : orange;
	}
	#img-block {
		display:block;
		width:30%;
		float:right;
	}
	#icon-block{
		display:none;
	} 
	
	#myModal2 .modal-content {
 
  width: 80%; 
  
} 
}