@font-face {
	font-family: Arboria;
	src: url(/fonts/Arboria-Bold.ttf);
}

@font-face {
	font-family: BeVietnamPro;
	src: url(/fonts/BeVietnamPro-Regular.ttf);
}

@font-face {
	font-family: BeVietnamPro;
	src: url(/fonts/BeVietnamPro-Bold.ttf);
	font-weight: bold;
}

* {
	-webkit-box-sizing: border-box; /* Safari 3.1+ */
	-moz-box-sizing: border-box; /* Firefox 2+ */
	box-sizing: border-box; /* Standard syntax */
	background: transparent;
	margin: 0;
	padding: 0;
}

html {
	font-family: BeVietnamPro, sans-serif;
	font-size: 100%;
}

body {
	background: #ffffff;
	font-family: BeVietnamPro, sans-serif;
	font-size: 1em;
}

img {
	border: none;
}

div {
	position: relative;
	font-family: BeVietnamPro, sans-serif;
}

button:active, button:focus {
	outline: none;
}

input[type=button]:focus, input[type=button]:active {
	outline: none;
}

/* ------------------------------------------- Bannière ------------------------------------------- */


div#bancontener {
	z-index: 2;
	width: 100%;
	background: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
	text-align: center;
}

div#ban {
	width: 100%;
	height: 4em;
}

img#logo {
	height: 2.5em;
	margin: .725em .725em 0 .725em;
	cursor: pointer;
}

div#menu_left {
	position: absolute;
	display: none;
	left: 0;
	z-index: 5;
	padding: .725em 1em 0 1em;
	text-align: left;
}

div#menu_left p {
	cursor: pointer
}

div#sitemenu {
	position: absolute;
	z-index: 10;
	display: none;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
	border-radius: 0.25em;
	left: 1em;
	margin: .5em 0 0 0;
	padding: .5em 0;
}

div#sitemenu p {
	text-align: left;
}

div#sitemenu a {
	display: block;
	text-align: left;
	padding: .4125em 1em;
	color: #222;
	text-decoration: none;
}

div#sitemenu p:hover {
	background: #e6e6e6;
}

div#ban_right {
	position: absolute;
	right: 0;
	z-index: 5;
	padding: .725em 1em;
	text-align: right;
}

div#user {
	float: right;
	border-radius: 50%;
	background: #946aab;
	padding: 0.4125em;
	color: #fff;
	text-align: center;
	font-size: 1.25em;
	cursor: pointer;
	user-select: none;
}

div#usermenu {
	position: absolute;
	z-index: 10;
	display: none;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
	border-radius: 0.25em;
	right: 1em;
	margin: .5em 0 0 0;
	padding: .5em 0;
}

div#usermenu p {
	text-align: left;
}

div#usermenu a {
	display: block;
	text-align: left;
	padding: .4125em 1em;
	color: #222;
	text-decoration: none;
}

div#usermenu p:hover {
	background: #e6e6e6;
}

div#bigmenu {
	float: left;
	margin-left: 2em;
	z-index: 5;
	display: none;
}

div#bigmenu .menu {
	display: flex;
}

div#bigmenu .menu-item {
	text-align: center;
	flex: 1;
	margin: 0 2em 0 0;
	padding: 1em 1em 0.5em 1em;
	font-family: Arboria, sans-serif;
	font-size: 1.25em;
	background: transparent;
	text-decoration: none;
	color: #3c3c3c;
	position: relative;
}

div#bigmenu .menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: #6e398e;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: .3s ease-in-out;
}

div#bigmenu .menu-item:hover::after {
  transform: scaleX(1);
}


/* ------------------------------------------- Band ------------------------------------------- */


div#bandeau {
	z-index: 1;
	width: 100%;
	height: 10em;
	background: #ffffff url("/imgs/design/Koesio_Fond_Blanc.jpg") repeat-x left top;
	background-size: 400px;
}

div.content {
	width: 100%;
	z-index: 10;
	text-align: left;
	padding: 1em;
}

p.location {
	font-family: Arboria, sans-serif;
	font-size: .875em;
	color: #6e398e;
}

p.location a {
	font-family: Arboria, sans-serif;
	color: #6e398e;
}

div.title {
	width: 100%;
	border-bottom: .25em solid #6e398e;
	border-right: 1px solid #fff;
	margin: 1em 0 0 0;
}

div.title span {
	background: #6e398e;
	padding: 0.25em 1em 0.25em 1em;
	border-left: 1px solid #fff;
	border-radius: 0.5em 0.5em 0 0;
	color: #fff;
	font-family: Arboria, sans-serif;
	font-weight: bold;
}

div.graphcontainer {
	width: 100%;
}

.graph {
	float: left;
	max-width: 49%;
	max-height: 350px;
	padding: .5em;
	margin: 1em 0 0 2%;
	border: 1px solid rgba(110, 57, 142, 0.5);
	border-radius: 1em;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
}

.graph:first-child {
	margin: 1em 0 0 0;
}

/* ------------------------------------------- Contenus Pages ------------------------------------------- */

div#userinfo {
	max-width: 500px;
	margin: 0 auto;
	background: #fff;
	border-radius: 1em;
	padding: 1.5em 2em 1.25em 1em;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
	color: #6e398e;
	text-align: center;
}

div#userinfo p.logouser {
	padding: 0 0 1em 0;
	border-bottom: 2px solid #6e398e;
}

div#userinfo p.infouser {
	padding: .5em 0 0 0;
	text-align: left;
}

div.pingbox {
	float: left;
	text-align: center;
	width: 150px;
	margin: 1em 1em 1em 0;
	overflow: hidden;
	border-radius: 1em;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
}

div.pingbox a {
	text-decoration: none;
	color: #000;
}

div.pingboxgreen {
	padding: .5em .25em;
	overflow: hidden;
	background: #95c11f;
}

div.pingboxorange {
	padding: .5em .25em;
	overflow: hidden;
	background: #f7a823;
}

div.pingboxred {
	padding: .5em .25em;
	overflow: hidden;
	background: #e94b57;
}

div.pingboxblue {
	padding: .5em .25em;
	overflow: hidden;
	background: #71cbf4;
}

div.pingboxyellow {
	padding: .5em .25em;
	overflow: hidden;
	background: #fff265;
}

div.pingboxpink {
	padding: .5em .25em;
	overflow: hidden;
	background: #f7bfd9;
}

div.pingbox span.pingboxtitle {
	font-size: 0.75em;
}

div.pingbox span.pingboxtime {
	font-size: 1.5em;
}


/* ------------------------------------------- Page Dashboard ------------------------------------------- */

#cyberwatch {
	font-family: BeVietnamPro;
	font-size: .75em;
}

.withsecure {
	font-family: BeVietnamPro;
	font-size: .75em;
}


/* ------------------------------------------- Page Erreur ------------------------------------------- */

div#error_panel {
	border: 1px solid #6e398e;
	border-radius: 1em;
	padding: 1em;
	margin: 1em;
}

div#error_panel p.erreur {
	font-family: Arboria, sans-serif;
	color: #000;
	text-align: left;
}

div#error_panel p.comment {
	margin: .5em 0 0 0;
	font-family: Arboria, sans-serif;
	font-size: .875em;
	color: #000;
}

/* ------------------------------------------- EDR ------------------------------------------- */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
}


/* ------------------------------------------- GLPI Stats ------------------------------------------- */

div#glpi_stats {
}

table.table {
	width: 100%;
	margin: 0.5em 0 0 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.75em;
}

th.table {
	background: #946aab;
	color: #fff;
	text-align: left;
	border-bottom: 1px solid #3c3c3c;
	padding: 0.5em 1em;
}

td.table {
	background: #e6e6e6;
	color: #000;
	text-align: left;
	border-bottom: 1px solid #3c3c3c;
}

td.table p {
	padding: 0.5em 1em;
}

table.subdetail {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.875em;
	cursor: pointer;
}

table.nosubdetail {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.875em;
}

th.subdetail {
	background: #e94b57;
	color: #fff;
	text-align: left;
	border-bottom: 1px solid #3c3c3c;
	padding: 0.5em 1em;
}

table.subtable {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.875em;
	cursor: pointer;
}

th.subtable {
	background: #e94b57;
	color: #fff;
	text-align: left;
	border-bottom: 1px solid #3c3c3c;
	padding: 0.5em 1em;
}

td.subtable {
	background: #e6e6e6;
	color: #000;
	text-align: left;
	border-bottom: 1px solid #3c3c3c;
}

td.subtable  p {
	padding: 0.5em 1em;
}

.progressbarcontainer{
	color: #000;
	background-color: #f1f1f1;
	border-radius: 1em;
}

.progressbar{
	padding: 0.00625em 1em;
	color: #fff;
	/* background-color: #2196F3; */
	background-image: linear-gradient(to right, #f29fc5, #6e398e);
	background-size: 300px 100%;
	border-radius: 1em;
	font-size: 0.875em;
}
.progressbar:after,.progressbar:before{
	content:"";
	display:table;
	clear:both;
}

/* ------------------------------------------- Ecran Connexion ------------------------------------------- */


div#loginpannel {
	width: 90%;
	margin: 150px auto 0 auto;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0.25em;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
	text-align: center;
	padding: 1em 0;
}

div#loginpannel p {
	margin: 0 0 1em 0;
	font-family: Arboria;
	font-size: 1.25em;
	color: #6e398e;
}

.loginbt {
	width: 100%;
	border: 0;
	background: #000;
	background-image: linear-gradient(90deg, #000 1%, #000 2%, #6e398e 4%, #6e398e 6%, #000 8%, #000 99%);
	background-size: 200% 100%;
	background-position: 0 0;
	transition: background-position .5s;
	color: #fff;
	padding: .75em 0;
	cursor: pointer;
    outline: none;
}

.loginbt:active,
.loginbt:focus {
	outline: none;
}

.loginbt:hover {
	background-position: -80% 0;
}


.btnimg {
  height: 20px;
  vertical-align: -4px;
}


/* ---------------------------------------- Content Scale for devices ---------------------------------------- */


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	
	div#ban {
		width: 100%;
	}
	
	div#bigmenu {
		display: none;
	}

	div#menu_left {
		display: block;
	}

	div.content {
		width: 100%;
	}

	div#loginpannel {
		width: 90%;
	}

	.graph {
		max-width: 100%;
		max-height: 450px;
		margin: 1em 0 0 0;
	}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	
	div#ban {
		width: 100%;
	}
	
	div#bigmenu {
		display: none;
	}

	div#menu_left {
		display: block;
	}

	div.content {
		width: 100%;
	}
	
	div#loginpannel {
		width: 90%;
	}

	.graph {
		max-width: 100%;
		max-height: 450px;
		margin: 1em 0 0 0;
	}

}

/* Medium devices (landscape tablets, 820px and up) */
@media only screen and (min-width: 820px) {
	
	div#ban {
		width: 100%;
	}
	
	div#bigmenu {
		display: none;
	}

	div#menu_left {
		display: block;
	}

	div.content {
		width: 100%;
	}
	
	div#loginpannel {
		width: 500px;
	}

	.graph {
		max-width: 100%;
		max-height: 450px;
		margin: 1em 0 0 0;
	}

}

/* Large devices (laptops/desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
	div#ban {
		width: 100%;
	}
	
	img#logo {
		float: left;
	}

	div#menu_left {
		display: none;
	}

	div#bigmenu {
		display: block;
	}

	div.content {
		width: 100%;
	}
	
	div#loginpannel {
		width: 500px;
	}

	.graph {
		max-width: 49%;
		max-height: 350px;
		margin: 1em 0 0 2%;
	}

}

/* Very Large devices (laptops/desktops, 1600px and up) */
@media only screen and (min-width: 1600px) {
	
	div#ban {
		width: 1600px;
		margin: 0 auto;
	}
	
	img#logo {
		float: left;
	}

	div#menu_left {
		display: none;
	}

	div#bigmenu {
		display: block;
	}

	div.content {
		width: 1600px;
		margin: 0 auto;
	}
	
	div#loginpannel {
		width: 500px;
	}

	.graph {
		max-width: 49%;
		max-height: 350px;
		margin: 1em 0 0 2%;
	}

}