* {
  box-sizing:border-box;
}

body {
  background-color:#8d9297;
	height:calc(100vh - 15px);
	margin: 0px;
}

.bg {
  margin: 15px;
  height: calc(100% - 15px);
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
  border: 1px solid #575757;
  background-color:#7b7a7b;
}

.main {
  height: calc(100% - 65px);
  flex: 1 1 auto;
  display: flex;
  margin: 8px 8px 0px 8px;
}

.screen {
  flex: 1 1 auto;
  margin: 0px;
  border: 4px solid #000000;
  border-radius: 3px;
  background-color:#7b7a7b;
}

.right {
  flex: 0 1 auto;
  display: flex;
  margin: 0px;
  box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
  border: 1px solid #575757;
  border-radius: 3px;
  background-color:#7b7a7b;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
}

.halftop {
}

.halfbottom {
}

.boutons {
 margin: 8px 4px 0px 4px;
}

.notbouton {
	box-shadow:inset 1px 1px 2px 0px #575757, -1px -1px 2px 0px #575757;
	background-color:#7b7a7b;
	border-radius:1px;
	display:inline-block;
	color:rgba(242, 242, 241, 0.5);
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:2px 12px;
	text-decoration:none;
	text-shadow:1px 1px 1.5px #575757;
}

.tridiv {
	display:inline-block;
	margin-bottom: -5px;
   margin-left: -4px;
   margin-right: -4px;
}

.minidiv {
	box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
	background-color:#7b7a7b;
	border-radius:1px;
	border:1px solid #575757;
	height:6.3px;
	width: 14px;
}

.boutonville {
	box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
	background-color:#7b7a7b;
	border-radius:1px;
	border:1px solid #575757;
	display:inline-block;
	cursor:pointer;
	color:#575757;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:1px 12px;
	text-decoration:none;
	text-shadow:1px 1px 1.5px #ffffff;
}
.boutonville:hover {
	background-color:#a3a3a3;
}
.boutonville:active {
	position:relative;
	top:1px;
}

.contenerminicams {
  box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
  border: 1px solid #575757;
  border-radius: 3px;
  background-color: #5c6770;
  margin: 0px 4px 4px 4px;
  padding: 4px 4px 2px 4px;
}

.cam {
  box-shadow: 2px 2px 0px 1px #000000;
  margin: 0px 2px 5px 0px;
}

.contenerinfos {
  box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
  border: 1px solid #575757;
  border-radius: 3px;
  background-color: #7b7a7b;
  margin: 4px 4px 4px 4px;
  padding: 4px 4px 4px 4px;
}

.infos{
  padding: 2px 4px 2px 4px;
  background-color:#FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	font-weight: 900;
	text-decoration: none;
	font-style: italic;
	font-variant: normal;
}

img{
        max-width: 100%;
        max-height: 100%;
        display: block;
}

.bottom {
flex: 1 1 auto;
display: flex;
margin: 0px 8px 8px 8px;
}

.bottomleft {
  flex: 1 1 auto;
  display: flex;
  height: 50px;
  margin: 0px;
  padding: 5px 10px;
  box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
  border: 1px solid #575757;
  border-radius: 3px;
  background-color:#7b7a7b;
}

.doublebottomleft {
  flex: 1 1 auto;
  display: flex;
  box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
  border: 1px solid #575757;
  border-radius: 3px;
  background-color:#7b7a7b;
}

.id1{
	flex: 0 1 auto;
	margin: 8px 0px 8px 5px;
	padding:1px 0px 1px 1px;
	background-color: #FFFFFF;
}

.triangle1 {
    flex: 0 1 auto;
    width: 0;
    height: 0;
    margin-top:8px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 8px solid #FFFFFF;
}

.triangle2 {
    flex: 0 1 auto;
    width: 0;
    height: 0;
    margin-top:5px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 18px solid #FFFFFF;
}

.id2{
	flex: 1 1 auto;	
	background-color:#FFFFFF;
	padding:5px 6px 5px 6px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	font-weight: 900;
	text-decoration: none;
	font-style: italic;
	text-align: center;
	font-variant: normal;
}

.sys{
  margin: 0px;
  padding: 4px;
  box-shadow:inset 1px 1px 2px 0px #cccccc, inset -1px -1px 2px 0px #575757, 1px 1px 2px 0px #cccccc, -1px -1px 2px 0px #575757;
  border: 1px solid #575757;
  border-radius: 3px;
  background-color:#7b7a7b;
}

.sys2{
  flex: 0 1 auto;
  display: flex;
  height: 40px;
  padding: 1px 0px 1px 1px;
  background-color:#FFFFFF;
}

.name{
	padding: 1px 9px 1px 9px;
	background-color:#000000;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: 900;
	text-decoration: none;
	font-style: italic;
	font-variant: normal;
}

.icon{
	flex: 0 1 auto;
}

.icon:hover{
	filter: invert(1);
}