:root {
	--colorgreen:#62be7a;
	--colorred:#f8686b;
}
.sortarrow {
	cursor:pointer;
}
.updateGestionnaire {
	display:none;
}
div.titlepopup {cursor:pointer;}
div.titlepopup .pop {
	position:absolute;
	background-color:white;
	padding:5px;
	border:1px solid grey;
	border-radius:5px;
	margin:25px 0px 0px 0px;
	font-size:12px;
}
.corps {
	margin-top:88px;
}
.listappli {
	padding:0px 0px 20px 0px;
	margin:20px 0px 20px 0px;
	border-bottom:1px solid #333333;
}
tr.regroupement td {
	background-color:#f1f1f1 !important;
}
.unselectable {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-ms-user-select: none;
}
.dataflow-b.droite .data:nth-child(0) {animation-delay: 0s;}
.dataflow-b.droite .data:nth-child(1) {animation-delay: 0.3s;}
.dataflow-b.droite .data:nth-child(2) {animation-delay: 0.6s;}
.dataflow-b.droite .data:nth-child(3) {animation-delay: 0.9s;}
.dataflow-b.droite .data:nth-child(4) {animation-delay: 1.2s;}
.dataflow-b.droite .data:nth-child(5) {animation-delay: 1.5s;}
.dataflow-b.droite .data:nth-child(6) {animation-delay: 1.8s;}
.dataflow-b.droite .data:nth-child(7) {animation-delay: 2.1s;}
.dataflow-b.droite .data:nth-child(8) {animation-delay: 2.4s;}
.dataflow-b.droite .data:nth-child(9) {animation-delay: 2.7s;}
.dataflow-b.droite .data:nth-child(10) {animation-delay: 3s;}
.dataflow-b.droite .data:nth-child(11) {animation-delay: 3.3s;}
.dataflow-b.droite .data:nth-child(12) {animation-delay: 3.6s;}

.dataflow-b.gauche .data:nth-child(0) {animation-delay: 0s;}
.dataflow-b.gauche .data:nth-child(1) {animation-delay: 0.3s;}
.dataflow-b.gauche .data:nth-child(2) {animation-delay: 0.6s;}
.dataflow-b.gauche .data:nth-child(3) {animation-delay: 0.9s;}
.dataflow-b.gauche .data:nth-child(4) {animation-delay: 1.2s;}
.dataflow-b.gauche .data:nth-child(5) {animation-delay: 1.5s;}
.dataflow-b.gauche .data:nth-child(6) {animation-delay: 1.8s;}
.dataflow-b.gauche .data:nth-child(7) {animation-delay: 2.1s;}
.dataflow-b.gauche .data:nth-child(8) {animation-delay: 2.4s;}
.dataflow-b.gauche .data:nth-child(9) {animation-delay: 2.7s;}
.dataflow-b.gauche .data:nth-child(10) {animation-delay: 3s;}
.dataflow-b.gauche .data:nth-child(11) {animation-delay: 3.3s;}
.dataflow-b.gauche .data:nth-child(12) {animation-delay: 3.6s;}

.dataflow-a .data:nth-child(0) {animation-delay: 0s;}
.dataflow-a .data:nth-child(1) {animation-delay: 0.3s;}
.dataflow-a .data:nth-child(2) {animation-delay: 0.6s;}
.dataflow-a .data:nth-child(3) {animation-delay: 0.9s;}

.flux {
	height:112px;
	position:relative;
}
.dataflow-b {
	position:relative;
	width: 310px;
	max-width: 310px;
	overflow:hidden;
	height:12px;
	position:absolute;
	top:50px;
}
.dataflow-a {
	height:50px;
	width:12px;
	position:absolute;
	overflow:hidden;
	
}
.hidden {
	display:none;
}
.hiddenimportant {
	display:none !important;
}
.serveurclient .dataflow-a {margin:237px 0px 0px 54px;}
.serveurbackup .dataflow-a {margin:-75px 0px 0px 54px;}
.flux .dataflow-a:nth-child(0) {left:60px;}
.flux .dataflow-a:nth-child(1) {left:160px;}
.flux .dataflow-a:nth-child(2) {left:260px;}
.flux .dataflow-a:nth-child(3) {left:360px;}
.flux .dataflow-a:nth-child(4) {left:460px;}
.flux .dataflow-a:nth-child(5) {left:560px;}
.flux .dataflow-a:nth-child(6) {left:660px;}
.dataflow-b.droite {
	left:60px;
}
.dataflow-b.gauche {
	right:60px;
}
/*.data {
	width:12px;
	height:12px;
	background:#4A90E2;
	position: absolute;
}*/
.data {
	position: absolute;
	width: 0px;
	height: 0px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 9px solid #4A90E2;
}
.dataflow-a .data {
	top:-12px;
	animation: flow-bas 0.9s linear infinite;
}
.dataflow-b.droite .data {
	left:-12px;
	animation: flow-droite 3.6s linear infinite;
	border-left: 9px solid #4A90E2;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
}
.dataflow-b.gauche .data {
	right:-12px;
	animation: flow-gauche 3.6s linear infinite;
	border-right: 9px solid #4A90E2;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
}
@keyframes flow-bas {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(74px);
  }
}
@keyframes flow-droite {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(334px);
  }
}
@keyframes flow-gauche {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-334px);
  }
}
.serveurscloud,.serveursorganica {
	border:1px solid black;
	padding:20px;
	margin:20px 10px 0px 10px;
	background-color:white;
}
.backuphidden {
	display:none;
	background-color:white;
	border:5px solid black;
	position:absolute;
	top:50px;
	left:50px;
	width:calc(100% - 100px);
	height:calc(100% - 100px);
	z-index:100;
	overflow:auto;
}
.backuphidden img {
	position:fixed;
	right:50px;
	top:20px;
	height:25px;
	width:25px;
	cursor:pointer;
}
.backuphidden .nomserv {
}
.backuphidden table {
	width:100%;
}
.backuphidden table tr td,.backuphidden table tr th {
	text-align:left;
	padding:5px;
	border:1px solid grey;
	font-size:12px;
}
.backuphidden table tr td:nth-child(5),.backuphidden table tr td:nth-child(6),.backuphidden table tr td:nth-child(7),
.backuphidden table tr td:nth-child(11),.backuphidden table tr td:nth-child(12),.backuphidden table tr td:nth-child(13) {
	background-color:#f1f1f1;
}
.backuphidden table tr th {
	position: sticky;
	top: 31px;
	background-color:grey;
	border:1px solid black;
	color:white;
	text-align:center;
}
.backuphidden table tr:first-child th {
	top:2px;
}
.backuphidden .green {color:green;}
.backuphidden .orange {color:orange;}
.backuphidden .red {color:red;}
.backuphidden a {
	font-weight:bold;
	color:inherit;
}
table.application tr.entete td {background-color:#f1f1f1;cursor:pointer;}
table.application tr.orange td {background-color:#ffe1a8;}
table.application tr.red td {background-color:#ffc2c2;}
table.application tr.weekend td {background-color:#cecece;}
table.application tr.weekend.orange td {background-color:#eecc8e;}
table.application tr.weekend.red td {background-color:#ffd78e;}
.serveurscloud .title,.serveursorganica .title {
	position:absolute;
	padding:3px 10px 3px 10px;
	margin:-47px 0px 0px -10px;
	font-weight:bold;
	background-color:white;
	border:1px solid black;
}
.serveursclients,.serveursbackup,.all,.serveurs,.nas {
	display:flex;
	flex-direction:row;
	justify-content:center;
	gap:10px;
}
.all {
	flex-wrap:wrap;
}
.application a {
	cursor:pointer;
}
.nas,.serveursbackup {
	margin-top:10px;
}
.serveurclient,.serveurbackup,.serveur,.nas2 {
	width:145px;
	position:relative;
}
.rightserver {
	position:absolute;
	font-size:12px;
	right:8px;
	top:8px;
	display:flex;
	flex-direction:column;
	gap:5px;
	color:#202020;
}
.serveurclient {
	width:140px;
}
.serveurbackup {
	width:180px;
}
input.date {
	padding:5px 5px;
	width:80px;
	text-align:center;
}
.serveurclient,.serveur {
	text-align:center;
	padding:5px;
	border:1px solid black;
}
.serveurclient {background-color:#d4ebf2;}
.serveur {background-color:#fbd7dd;}

.serveurbackup {
	display:block;
	padding:5px;
	border:1px solid black;
	background-color:#b3f0b3;
	text-align:center;
}

.nas2 {
	padding:5px;
	border:1px solid black;
	background-color:#f9f981;
	text-align:center;
}
.ent {
	font-weight:bold;
	font-size:14px;
}
.app {
	font-size:14px;
	margin-top:10px;
}

.ip,.localisation {
	font-size:10px;
	margin-top:5px;
}
.libre {
	font-size:9px;
	width:100%;
	text-align:center;
}
.ram {
	margin-top:10px;
}
.serveurs .serveur:last-child,.serveursbackup .serveurbackup:last-child,.nas .nas2:last-child,.serveursclients .serveurclient:last-child {
	margin-right:0px;
}
.carre2 {
	box-shadow: 5px 5px 5px #888888;
	opacity:0.8;
	-webkit-transition: 0.1s;
    transition: 0.1s;
	color:black;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	gap:10px;
	min-height:150px;
}
.carre2:hover {
	box-shadow: 5px 5px 5px #666666;
	opacity:1;
	color:black;
}
.console {
	border:1px inset black;
	padding:5px;
	background-color:white;
}
html {
	overflow-y: scroll;
	margin:0px;
}
div.menu {
	position:fixed;
	display:flex;
	gap:5px;
	flex-wrap:wrap;
	margin-top:0px;
	top:0px;
	padding-top:20px;
    left:20px;
    right:20px;
	background-color:#f9f9fb;
	z-index:10;
}
div.options #chercher {
	padding:6px 10px 7px 10px;
}
.loadbartext {
	font-size:12px;
	color:white;
	position:absolute;
	left:8px;
	top:3px;
	z-index:2;
}
.loadbar {
	max-width:400px;
	border:1px solid grey;
	opacity:1;
	margin:0px 0px 3px 0px;
	position:relative;
	background-color:lightgrey;
}
.loadbardetail {
	max-width:400px;
	font-size:11px;
	margin-bottom:5px;
	padding:0px 10px;
}
.loadbarcontent {
	position:relative;
}
.loadbarcontent2 {
	height:22px;
	display:flex;
	align-items:center;
	background-color:#219121;
}
.loadbarcontent.red {background-color:#f94f4f;}
.loadbarcontent.orange {background-color:orange;}
div.options table,div.options #chercher {
	background-color:#e4e4e4;
	font-size:13px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}
div.options table tr td {
	height:24px;
	padding:2px 8px 2px 4px;
}
div.options table tr td:first-child {
	padding:2px 4px 2px 8px;
}
a:focus {
	outline:0;
}

div.menu a {
	display:block;
	padding:8px 12px;
	font-size:14px;
	text-transform:uppercase;
	font-weight:bold;
	text-decoration:none;
	background-color:#001491;
	color:#FFFFFF;
	letter-spacing:1px;
	font-family:Verdana;
	-webkit-transition: background 0.3s;
    transition: background 0.3s;
}
div.menu a:hover {
	background-color:#0018d6;
}
body {
	font-family:Verdana;
	background-color:#f9f9fb;
	margin:0px;
	padding:20px;
}
.libellechamp {
	display:block;
	font-size:10px;
	font-family: Verdana;
}
.vignette {
	border-collapse:collapse;
	float:left;
	margin:0px 20px 20px 0px;
	border:1px solid black;
	box-shadow: 5px 5px 5px #888888;
	-webkit-transition: 0.1s;
    transition: 0.1s;
	opacity:0.8;
}
.vignette:hover {
	box-shadow: 5px 5px 5px #666666;
	opacity:1;
}
.vignette td {
	text-align:center;
	padding:5px;
	border:1px solid black;
	background-color:white;
}
.vignette td:last-child {
	padding:0px;
}
form input[type=text],form input[type=password] {
	border:1px solid grey;
	padding:5px;
	display:block;
	font-size:15px;
	font-family: Verdana;
	width:300px;
}
form table input[type=text] {
	width:120px;
}
form textarea {
	border:1px solid grey;
	padding:5px;
	display:block;
	font-size:15px;
	margin-bottom:15px;
	font-family: Verdana;
	width:300px;
	height:200px;
}

.imgstatut img {
	display:block;
	width:20px;
	margin:auto;
}
.formhidden input[type=text],.formhidden select {
	display:none;
}
.flex {
	display:flex;
	gap:10px;
}
input[type=submit],input[type=button] {
	display: block;
	padding: 10px 20px 10px 20px;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	background-color: #001491;
	color: #FFFFFF;
	letter-spacing: 1px;
	border:0px;
	cursor:pointer;
	font-family: Verdana;
	-webkit-transition: background 0.3s;
    transition: background 0.3s;
}
input[type=submit]:hover,input[type=button]:hover {
	background-color:#0018d6;
}
label {
	cursor:pointer;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-ms-user-select: none;
}
input[type=checkbox] {
	cursor:pointer;
}
a {
	color:#001491;
	text-decoration:none;
	-webkit-transition: color 0.3s;
    transition: color 0.3s;
}
a:hover {
	color:#0018d6;
}
table.application {
	border-collapse:collapse;
}
.pageaccueil {
	font-size:14px;
}
table.application td,table.application th {
	padding:5px;
	border:1px solid black;
	text-align:left;
	font-size:13px;
	background-color:white;
}
table.application.pluspetit td,table.application.pluspetit th {
	font-size:12px;
	padding:4px;
}
table.application td.green,span.green {background-color:#aef7ae;}
table.application td.orange,span.orange {background-color:#ffdd9e;}
table.application td.red,span.red {background-color:#ffdbdb;}
table.application td.gris {background-color:#ececec;}
.carre {
	display:block;
	float:left;
	width:150px;
	height:100px;
	margin:0px 10px 10px 0px;
	color:white;
	padding:5px;
	position:relative;
	box-shadow: 5px 5px 5px #888888;
	border:1px solid black;
	-webkit-transition: 0.1s;
    transition: 0.1s;
	opacity:0.8;
}
.nbco {
	color:orange;
}
.nbco2 {
	color:red;
}
.carre:hover {
	box-shadow: 5px 5px 5px #666666;
	opacity:1;
}
.compacte {
	width:120px;
	height:50px;
	display:flex;
}
.ultracompacte {
	width:160px;
	height:14px;
	display:flex;
	justify-content:space-between;
}
.carre a{
	color:white;
}
td.statut div {
	width:10px;
	height:10px;
	border-radius:10px;
	margin:auto;
}
td.inactive div,div.inactive {background-color:#ff2b2b;}
td.active div,div.active {background-color:#219121;}
td.alerte div,div.alerte {background-color:orange;}
td.alertecache div,div.alertecache {background-color:#3882a9;}
td.perime div,div.perime {background-color:#9c7bf3;}
td.perime {color:#9c7bf3;}
.titre {
	margin-top:13px;
	font-weight:bold;
	text-align:center;
	font-size:13px;
	position:absolute;
	width:140px;
}
.version {
	position:absolute;
	top:4px;
	right:4px;
	text-align:right;
	font-size:9px;
}
.formflex {
	display:flex;
	gap:15px;
	flex-direction:column;
}
.compacte .titre,.ultracompacte .titre {
	margin-top:0px;
	height:auto;
	margin: auto;
	position:relative;
	width:auto;
}
.ultracompacte .titre {margin:0px;font-size:12px;}
.users,.lastping {
	font-size:9px;
	text-align:center;
	position:absolute;
	bottom:0;
	width:calc(100% - 10px);
	padding-bottom:5px;
}
.formdelete {
	float:left;
	margin-right:5px;
	margin-top:-6px;
}
.formdelete input[type=image] {
	width:10px;
	height:10px;
}
.separateur {
	height:1px;
	background-color:#333333;
	margin:20px 0px 20px 0px;
}
h2 {
	margin:0px 0px 0px 0px;
	font-size:27px;
}

.crystal {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	width:100%;
	gap:2px;
}
.disk {
	width:32px;
	height:23px;
	border:1px solid black;
	background-color:green;
	color:white;
	font-size:11px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:3px;
	display:none;
}
.disk.attention {background-color: #ff7800;}
.disk.red {background-color:red;}
.disk.grey {background-color:grey;}
.diskpetit {color:green;}
.diskpetit.red {color:red;}
.diskpetit.attention {color:#ff7800;}
.diskpetit.grey {color:#979696;}

.togglemenu {
	display:none;
	cursor:pointer;
	float:right;
	margin-top:5px;
}
.togglemenu span {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background:black;
	border-radius: 3px;
	z-index: 1;
	
	-moz-transition: 0.4s ease;
	-webkit-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;
}
.togglemenu.change span:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(4px, 9px);
  transform: rotate(45deg) translate(4px, 9px);
}
.togglemenu.change span:nth-child(2) {
	opacity: 0;
}
.togglemenu.change span:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(3px, -9px);
  transform: rotate(-45deg) translate(3px, -9px);
}
.togglemenu span:last-child {margin-bottom:0px;}
#menusmartphone {
	background-image:url('menusmartphone.png?t=1');
	width:38px;
	height:34px;
	background-size:100% 100%;
	float:right;
	z-index:100;
	display:none;
}
.tablecontainer {
	max-width:100%;
	overflow:auto;
}
h2.monitor {
	display:flex;
	gap:15px;
	align-items:center;
}
h2.monitor > div {
	display:flex;
	flex-direction:column-reverse;
	align-items:center;
	gap:5px;
}
h2.monitor > div div:nth-child(2) {
	font-size:10px;
}
.tablecontainer {
	max-width:100%;
	overflow:auto;
}
@media screen and (max-width: 1400px), screen and (max-device-width: 1400px) {
	.serveurscloud, .serveursorganica {
		width:100%;
		margin-left:0px;
		margin-right:0px;
	}
}

@media screen and (max-width: 800px), screen and (max-device-width: 800px) {
	.serveursclients, .serveursbackup, .all, .serveurs, .nas {
		flex-direction:column;
	}
	.onlypc {
		display:none;
	}
	
	.serveurclient,.serveurbackup,.serveur,.nas2 {
		margin-bottom:20px;
		width:auto;
	}
	.serveurscloud, .serveursorganica {
		width:auto;
	}
	.serveurclient,.serveurbackup,.serveur,.nas2 {
		margin-right:0px;
	}
}
@media screen and (max-width: 700px), screen and (max-device-width: 700px) {
	.togglemenu {
		display:block;
	}
	h2.monitor {
		flex-direction:column;
		align-items:flex-start;
	}
	h2.monitor > div {
		flex-direction:row;
		gap:15px;
	}
	table.application {
		width:100%;
	}
	.loadbar {
		max-width:100%;
	}
	div.options {
		display:none;
	}
	div.menu {
		display:none;
		width:calc(100% - 40px);
		padding:20px 20px 10px 20px;
		left:0px;
		top:77px;
		position:fixed;
		height:calc(100% - 75px);
	}
	.menu .separateur {
		display:none;
	}
	div.corps {
		margin-top:0px !important;
	}
	div.menu a {
		float:none;
		margin-right:0px;
		padding:12px 15px;
		margin-bottom:2px;
		text-align:center;
	}
	form input[type="text"], form input[type="password"] {
		width:calc(100% - 12px);
	}
}