@font-face { 
	font-family:Roboto-Thin; 
	src: url('../res/fonts/Roboto-Thin.ttf') format('truetype');
}
@font-face{
	font-family:Roboto-Light;
	src: url('../res/fonts/Roboto-Light.ttf') format('truetype');
}
@font-face{
	font-family:RobotoCondensed-Bold;
	src: url('../res/fonts/RobotoCondensed-Bold.ttf') format('truetype');
}
@font-face{
	font-family:Roboto-Medium;
	src: url('../res/fonts/Roboto-Medium.ttf') format('truetype');
}
@font-face{
	font-family:RobotoCondensed-Regular;
	src: url('../res/fonts/RobotoCondensed-Regular.ttf') format('truetype');
}
@font-face{
	font-family:Roboto-Regular;
	src: url('../res/fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face{
	font-family:Roboto-Bold;
	src: url('../res/fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face{
	font-family:Roboto-Italic;
	src: url('../res/fonts/Roboto-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url('../res/fonts/material-font/MaterialIcons-Regular.eot'); /* For IE6-8 */
	src: local('Material Icons'),
	local('MaterialIcons-Regular'),
	url('../res/fonts/material-font/MaterialIcons-Regular.woff2') format('woff2'),
	url('../res/fonts/material-font/MaterialIcons-Regular.woff') format('woff'),
	url('../res/fonts/material-font/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
body,html {
	margin:0px;
	background-color:#f3f5f7;
}
body a {
	text-decoration:none;
}
div#titre::before {
    height: 100%;
    width: 10px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}
#titre {
	position: relative;
}
table {
	width:100%;
	margin:20px auto 40px;
	border-spacing:0;
	border-collapse:collapse;
	border-width:0 0 1px 1px;
	border-color:#DBDBDB;
	border-style:solid;
}
tr:hover td {
	background-color:#e8e8e8!important;
}
tr:hover #actions > *:not(img) {
	background-color: #fff;
}

tr:nth-child(2n+1) td {
	background-color:#fafafb;
} 
tbody #ttitle > th, thead {
	font-family:Roboto-Light;
	font-size:0.9em;
	text-align:left;
	padding-left:8px;
}
#actions {
	display: flex;
	justify-content: center;
}
table th, table td {
	border-style:solid;
	border-width:1px 1px 0 0;
	padding:6px 8px;
	border-color:#DBDBDB;
	background-color:#fff;
	margin:0;
}
td {
	height:32px;
	box-sizing:border-box;
}
th:last-child{
	width: 61px;
}
.ui-datepicker th:last-child{
	width: initial;
}
input[type=radio]{
	cursor:pointer;
	border:1px solid #aaa;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance:none;
	-moz-appearance:none;
	margin:0;
}
.code {
	text-align:center;
}
table input {
	border: 1px solid #DBDBDB;
	height:27px;
}
table td, table a:not(.cerfa)  {
	font-family:Roboto-Regular;
	color:#aaa9a9;
	/*background-color:#fff;*/
	font-size:12px;
	padding: 0px 8px;
}
table tbody > tr:first-child > th:first-child {
	width:30px;
}
table input{
	width:100%;
}
.shortcut {
	border-radius: 10px;
    padding: 10px;
    margin:30px 2px;
}
.shortcut h4 {
	margin: 0 0 10px;
	background-repeat: no-repeat;
	padding: 9px 0 0 35px;
	font-family: Roboto-Thin!important;
	background-position: 0 50%;
	height: 19px;
}
#socs h4{
	background-image:url('../res/img/Mon-entreprise-blanc.png');
}
#etas h4{
	background-image:url('../res/img/Etablissement.png');
}
#victime h4{
	background-image:url('../res/img/perso.png');
}
#annee h4{
	background-image:url('../res/img/parametres.png');
}
#statut h4{
	background-image:url('../res/img/parametres.png');
}
#titre {
	font-family:RobotoCondensed-Regular;
	color:#bfbfbf;
	display:flex;
	padding:20px 40px;
	height:74px;
	box-sizing:border-box;
	align-items:center;
}
#titre #welcome{
	font-family:Roboto-Light;
	color:#272727;
	font-size:24px;
	flex:1;
}
#titre > #icons{
	align-self: flex-end;
}
#icons > span {
	display:inline-block;
}
#annee select {
	color:#aaa9a9;
}
#content_wrapper{
	width:100%;
}
#create {
	margin:auto 40px auto auto!important;
}
#bandeau{
	width:100%;
	height:136px;
	color:#ffffff;
	display:flex;
	flex-flow: row wrap;
}
#bandeau h4 {
	font-family:RobotoCondensed-Bold;
	color:#ffffff;
	margin-bottom: 8px;
	font-size:13px;
}
table select{
	background-color: white;
}
#bandeau span {
	/*padding-left:20px;*/
}
#bandeau span > p{
	padding-left:60px;
}
#last_content{
	background-color:#4d4e4e;
	height:100%;
	align-items: center;
	flex:2;
	display: flex;
	padding-left: 20px;
}
#last_maj{
	margin-left:40px;
	display:flex;
	font-size:12px;
	font-family:RobotoCondensed-Regular;
}
#dat_res{
	display:flex;
	font-family:RobotoCondensed-Regular;
	margin-left:40px;
	line-height: initial;
}
#dat_res .num {
	font-size:36px;
}
#dat_res > div {
	height:84px;
	flex:1;
}
#dat_sum{
	background-image: url('../res/img/barre-rouge.png');
    background-repeat: no-repeat;
    background-size:contain;
	background-position: -11px 0;
	padding-left: 18px;
}
#dat_over{
	background-image: url('../res/img/barre-blanche.png');
    background-repeat: no-repeat;
	background-size: contain;    
	color:#D6D6D6;
	background-position: -11px 0;
	padding-left: 18px;
}
#dat_open{
	color:#f6c142;
}
.dat_maj{
    background-image: url('../res/img/barre-blanche.png');
    background-repeat: no-repeat;
    font-family:Roboto-Regular;
	/*background-size: contain;*/
	text-transform: capitalize;
	width: 113px;
	padding-left: 20px;
}
.dat_maj span:last-child{
	text-transform: none;
}
span.dat{
	text-transform:uppercase;
	color:#d06a75;
}
span.mp{
	text-transform:uppercase;
	color:#8c63d4;
}
span.entre, span.etab, span.soci{
	text-transform:uppercase;
	color:#0288d1;
}
span.familyname{
	text-transform:uppercase;
}
#bandeau select{
	width:200px;
	height:33px;
	padding-left:5px;
	font-size:13px;
}
#last_content #title {
	font-family:Roboto-Light;
	margin:auto 0;
}
#last_content #title:first-letter {
	text-transform:uppercase;
}
#bandeau #DAT_states{
	background-color:#2e2e2e;
	background-image:url('../res/img/Espace-DAT-rose1.png');
	background-repeat:no-repeat;
	background-position: 30px 50%;
	height:100%;
	flex:1;
	padding-left: 30px;
}
nav{
	width:243px;
	float:left;
	display:block;
	height:100%;
	position: fixed;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav p {
	font-family:Roboto-Medium;
	color:#272727;
}
nav a {
	font-family:Roboto-Regular;
	color:#777777;
	font-size: 12px;
}
nav ul {
	list-style-type:none;
}
#nentreprise p {
	background-image:url('../res/img/Mon-entreprise-gris.png');
}
#nespacedat p {
	background-image:url('../res/img/Espace-DAT-gris.png');
}
#nespacemp p {
	background-image:url('../res/img/espace-mp.png');
}
#nstats p {
	background-image:url('../res/img/statistiques.png');
}
.category > p{
	background-repeat:no-repeat;
	height:27px;
	padding-left:40px;
	margin: 0 auto;
	margin-left:30px;
	font-size: 14px;
	display: flex;
    align-items: center;
}
.category {
	display:flex;
	flex-direction:column;
	padding: 15px 0 19px;
}
nav ul{
	display:flex;
	justify-content:space-between;
	flex-direction:column;
	padding-left:70px;
	margin-bottom:0;
}
nav li {
	align-self:flex-start;
	margin: 0 0 17px 0;
	font-size:14px;
}
nav li:last-child{
	margin:0;
}
.color{
	width:0px;
	height:100%;
	float:left;
	flex:3;
}
#navhead{
	height:178px;
	background-color:#0288d1;
	width:100%;
	text-align:center;
	color:#fff;
	font-size:11px;
	flex-direction: column;
    display: flex;
}
#navhead p, #navhead a {
	color:#fff;
	font-family:Roboto-Regular;
}
#navhead > div > a {
	color:#fff;
}
#centreprise{
	background-color:#0288d1;
}
#main_wrapper{
	display:flex;
	flex-direction:column;
	width: calc(100% - 243px);
	position: absolute;
	right: 0;
}
#nav_wrapper{
	border-style:solid;
	border-width:1px;
	border-color:#D6D6D6;
	border-top-style:none;
	border-right-style:none;
	border-left-style:none;
}
#nav_whole{
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
	height:100%;
	background-color:white;
}
.category#nparam p{
	margin:20px 0 0 30px;
	font-family:Roboto-Regular;
	background-image: url('../res/img/parametres.png');
}
.category#naide p{
	margin:20px 0 0 30px;
	font-family:Roboto-Regular;
	background-image: url('../res/img/aide.png');
}
.category#ncgu p{
	margin:20px 0 0 30px;
	font-family:Roboto-Regular;
	background-image: url('../res/img/UCG.png');
}
#bandeau button, .button{
    border: none;
    color: white;
    padding:0 20px;
    text-align: center;
    text-decoration: none;
    font-family:Roboto-Regular;
    text-transform:uppercase;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    height:36px;
}

#socs {
	background: #00b3d1;
    background: -webkit-linear-gradient(#00C0E0, #00C0E0 60%, #00b3d1 60%, #00b3d1);
    background: -moz-linear-gradient(#00C0E0, #00C0E0 60%, #00b3d1 60%, #00b3d1);
    background: -o-linear-gradient(#00C0E0, #00C0E0 60%, #00b3d1 60%, #00b3d1);
}
#etas {
	background: #0288d1 !important;
	/*background: -webkit-linear-gradient(#0096E8, #0096E8 60%, #0288d1 60%, #0288d1) !important;*/
    /*background: -moz-linear-gradient(#0096E8, #0096E8 60%, #0288d1 60%, #0288d1)!important;*/
    /*background: -o-linear-gradient(#0096E8, #0096E8 60%, #0288d1 60%, #0288d1)!important;*/
}
#annee {
	background: #0288d1;
	background: -webkit-linear-gradient(#B8B8B8, #B8B8B8 60%, #ABABAB 60%, #ABABAB);
    background: -moz-linear-gradient(#B8B8B8, #B8B8B8 60%, #ABABAB 60%, #ABABAB);
    background: -o-linear-gradient(#B8B8B8, #B8B8B8 60%, #ABABAB 60%, #ABABAB);
}
#statut {
	background: #0288d1;
	background: -webkit-linear-gradient(#FFCE59, #FFCE59 60%, #f6c142 60%, #f6c142);
    background: -moz-linear-gradient(#FFCE59, #FFCE59 60%, #f6c142 60%, #f6c142);
    background: -o-linear-gradient(#FFCE59, #FFCE59 60%, #f6c142 60%, #f6c142);
}
#victime {
	background: #5BCD16;
	background: -webkit-linear-gradient(#6DD131, #6DD131 60%, #5BCD16 60%, #5BCD16);
    background: -moz-linear-gradient(#6DD131, #6DD131 60%, #5BCD16 60%, #5BCD16);
    background: -o-linear-gradient(#6DD131, #6DD131 60%, #5BCD16 60%, #5BCD16);
}
#socs select {
	color:#00b3d1;
}
#etas select {
	color:#0288d1;
	width:250px;
}
#statut select {
	color:#f6c142;
	width:100px;
}
#annee select {
	color:#B8B8B8;
	width:100px;
}
#victime select {
	color:#5BCD16;
	width:250px;
}
#cancel button, #cancel .button {
	background-color:#ABABAB;
	display: block;
}
#save button {
	background-color: #0288d1;
}
.buttons{
	display:flex;
	align-self:flex-end;
	margin:auto 35px auto auto;
}
#title p {
	color:#0288d1;
	font-size:1.5em;
	margin-left:20px;
}
.inputs{
	display:flex;
	background-color: #ffffff;
	border:1px solid #DBDBDB;
	border-radius: 2px;
	font-family:Roboto-Regular;
	padding:20px 40px 30px 40px ;
	position: relative;
}
.infobulle {
	position: absolute;
	background: url('../res/img/aide.png');
	width:32px;
	height:32px;
	right:10px;
	top:10px;
	cursor: pointer;
}
label {
	font-size:0.8em;
	color:#777777;
	margin:auto 30px auto 0;
	width:120px;
}
.pj:hover {
	text-decoration: underline;
}
#postal {
	flex:0;
}
.col1 {
	display:flex;
	flex-direction:column;
	min-width:170px;
	margin-right:40px;
	flex:1;
}
.col2 {
	display:flex;
	flex-direction:column;

	align-self:flex-end;
	flex:1;
	min-width: 374px;
}
.col1 b, .col2 b {
	align-self:flex-start;
}
.inputs input, textarea, select {
	height:32px;
	border:1px solid #D8d8d8;
	border-radius: 2px;
	flex:1;
	resize:none;
	background-color: #f3f5f7;
}

.inputs input:hover, textarea:hover {
	border-color:#B8B8B8;
}
.inputs p {
	display:flex;
	margin-top:5px;
	margin-bottom:5px;
	align-items: center;
	position: relative;
}
.inputs b {
	margin: 10px 0 10px;
}

button#edit, a#edit {
	background: url('../res/img/edit2.png') center;
}
button#view, a#view {
	background: url('../res/img/loupe.png') center;
}
button#delete, a#delete {
	background: url('../res/img/delete2.png') center;
}
button#download, a#download {
	background: url('../res/img/telechager.png') center;
}
button#maj, a#maj {
	background: url('../res/img/maj.png') center;
}

#actions > button, #actions > a:not(.cerfa) {
	display: inline-block;
	background-size:cover;
	background-repeat:no-repeat;
	background-origin: content-box;
	background-color: #ececed;
	width:36px;
	height:36px;
	margin:2px;
	border: none;
    cursor: pointer;
    padding:0;
}
#actions > button:hover, #actions > a:not(.cerfa):hover {
	background-color: #4d4e4e!important;
}

#content {
	display:flex;
	flex-direction:column;
	padding:30px 41px;
}
form {
	display:inherit;
	flex-direction:column;
}
.order{
	display:flex;
	margin:9px 0;
}
.inputs {
	margin:0;
	min-width:100px;
	width:100%;
}
.order > div:nth-child(2) {
	margin-left:20px;
}
.inputs input {
	padding-left:5px;
}
.code {
	padding-left:0!important;
	width:18px;
	flex:none!important;
	margin:0 1px;
}
.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.inputfile + label {
    font-weight: 700;
    color: white;
    background-color:#ABABAB;
    display: inline-block;
    cursor:pointer;
    width:100%;
	line-height: 35px;
}

#arianne{
	display:flex;
	justify-content:center;
	height:70px;
	border-bottom:solid 1px #C9C9C9;
	margin:0 40px;
	font-family:RobotoCondensed-Regular;
	text-transform:uppercase;
}
.nodebtn {
	height:38px;
	width:116px;
	background: url(../res/img/bouton-off.png) center no-repeat;
	background-position:50% 100%;
	z-index:100;
	position:absolute;
	right:0;
	top:51px;
}
.nodes {
	margin:0 1.2%;
	min-width:116px;
	text-align:center;
	position:relative;
	color:#C9C9C9;
}
input[type=radio] {
	flex:initial;
}
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-inner-spin-button
{
	display: none;
    -webkit-appearance: none;
}
input:-webkit-autofill { 
	color: #fff;
}
#menu-bold {
	font-weight:bold;
	color:#010101;
}
.menu-arrow {
	width:100%;
	background-image:url('../res/img/fleche-selection.png');
	background-repeat:no-repeat;
	background-position:152px 50%;
}
.next{
	margin-left:auto;
}
.previous {
	margin-right:auto;
}
.navbutton {
	display:flex;
	width:100%;
}
.navbutton button {
	background-color:#777777;
}
.locked {
	background-color:#f3f5f7!important;
	color:#f3f5f7;
	cursor:initial;
}
input[type=checkbox],input[type=radio]{
	    height: 1.4em;
}
textarea{
	height:60px;
}
.advice {
	font-size:0.8em;
	color:#777777;
	line-height: 18px;
	background-color: #f3efef;
	padding:0 10px;
	display: inline-block;
}
textarea + .advice {
	width: 160px;
    margin: 5px 0 0 20px;
}
.advice::before {
	content:"";
	color:red;
}
#respatt{
	width:100%;
	margin:0;
}
.actions {
	width:100px;
}
.inputs .postal {
	width: 150px;
    flex: 0;
}
input[type=number].code{
	width:20px;
}
input[type=number]:read-only {
	color:rgba(0, 0, 0, 0.41);
}
input[type=radio] + label {
	cursor:pointer;
}
.err {
	color:red;
}
.select {
	width: initial!important;
	padding: 2px 5px;
}
.switchauth {
	cursor:pointer;
}
#msg{
	display: none;
	text-align: center;
	/* margin: 10; */
	font-family: Roboto-Regular;
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 30px;
	left: 0;
	/* right: 50%; */
	background: rgb(0, 189, 108);
	/* border-radius: 3px; */
	top: 136px;
	line-height: 30px;
}
.acltable{
	overflow:auto;
}
#rememberme{
	font-family:Roboto-Light;
	color:#454545;
	font-size:0.9em;
}
#mdplost, #newclient{
	font-family:Roboto-Regular;
	font-size:0.9em;
	color:#A8A8A8;
}
#newclient > a, #mdplost > a  {
	font-family:Roboto-Regular;
	text-decoration: underline;
	color:#A8A8A8;
}
#nentreprise::before{
	background-color:#0288d1;
}
#nespacedat::before{
	background-color:#d06a75;
}
#nespacemp::before{
	background-color:#8c63d4;
}
#nstats::before{
	background-color:#ff6f00;
}
.category{
	position:relative;
}
.category::before{
	content:"";
	width:4px;
	display:block;
	position:absolute;
	top:1px;
	bottom:1px;
	left:0;
	z-index:2;
}
.catsel {
	background-color:#f7f7f7;
}
.catsel::before{
	width:10px;
}
th > input {
	padding:3px 5px;
	height:35px;
	background-repeat:no-repeat;
	background-position:99%;
}
th > input {
	background-image:url('../res/img/loupe.png');
}

th > input.datepicker {
	background-image: url('../res/img/calendrier-grise.png');
}
input[type="checkbox"]{
	height:2em;
	flex:none;
}
#usrinfo {
	display:flex;
	font-family:Roboto-Regular
}
#usrinfo > div:first-child {
	flex:2;
}
#usrinfo > div:nth-child(2){
	display: flex;
    flex-direction: column;
    align-items: flex-start;
	flex:4;
}
#deconnection {
	display:flex;
	align-items:center;
}
.coltitle {
	font-family: Roboto-Regular;
}
table input[type="button"]{
	cursor: pointer;
}
/* Cachons la case à cocher */
#aclaut [type="checkbox"]:not(:checked),
#aclaut [type="checkbox"]:checked {
	position: absolute;
	left: -9999px;
}

/* on prépare le label */
#aclaut [type="checkbox"]:not(:checked) + label,
#aclaut [type="checkbox"]:checked + label {
	position: relative; /* permet de positionner les pseudo-éléments */
	padding-left: 60px; /* fait un peu d'espace pour notre case à venir */
	cursor: pointer;    /* affiche un curseur adapté */
	/*text-decoration: underline;*/
	transition: color 0.2s;
}
#aclaut [type="checkbox"]:not(:checked) + label {
	color: rgb(173, 0, 0);
}

#aclaut [type="checkbox"]:checked + label {
	color: rgb(0, 138, 79);
}
/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
#aclaut [type="checkbox"]:not(:checked) + label:before,
#aclaut [type="checkbox"]:checked + label:before {
	content: '';
	position: absolute;
	/*border: 1px solid #aaa;*/
	left: 0;
	top: 0;
	width: 42px;
	height: 16px;
	background: #DDDDDD;
	background: rgba(204, 0, 0, 0.31);
	border-radius: 15px;
	-webkit-transition: background-color .2s;
	-moz-transition: background-color .2s;
	transition: background-color .2s;
}

/* Aspect général de la coche */
#aclaut [type="checkbox"]:not(:checked) + label:after,
#aclaut [type="checkbox"]:checked + label:after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgb(228, 86, 86);
	top: -3px;
	left: -3px;
	font-size: 14px;
	transition: all .2s;
	/*border: 1px #a2a1a1 solid;*/
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
}
/* Aspect si "pas cochée" */
#aclaut [type="checkbox"]:not(:checked) + label:after {
	/*opacity: 0;*/ /* coche invisible */
	/*transform: scale(0);*/ /* mise à l'échelle à 0 */
}
/* Aspect si "cochée" */
#aclaut [type="checkbox"]:checked + label:after {
	transform: translateX(28px);
	background: rgb(0, 189, 108);
}
/* aspect désactivée */
#aclaut [type="checkbox"]:disabled:not(:checked) + label:before,
#aclaut [type="checkbox"]:disabled:checked + label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #ddd;
}
/* styles de la coche (si cochée/désactivée) */
#aclaut [type="checkbox"]:disabled:checked + label:after {
	color: #999;
}
/* on style aussi le label quand désactivé */
#aclaut [type="checkbox"]:disabled + label {
	color: #aaa;
}

/* aspect au focus de l'élément */
#aclaut [type="checkbox"]:checked + label:before {
	/*border: 1px dotted blue;*/
	background: rgba(0, 189, 108, 0.65);
}
.counter {
	position: absolute;
	left: 100px;
	bottom: 0px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.5);
}
.counter.xl {
	right: 305px;
	bottom: 16px;
}
#import > button {
	background-color: #b3b3b3;
	/*cursor: not-allowed;*/
}
#fileslist {
	margin-top: 16px;
}
#fileslist .files {
	margin: 8px 0;
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.76);
}