/*
	GENERAL
************************************************************************************************************************/
body, h2, h2, h3, h4, h5, h6 {
	font-family: 'Bw Nista Grot Rg', sans-serif;
}	

body {
	font-size: 24px;
}

.fullwidth {
	 width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

.right {
	text-align: right;
}

.columns, .rows, .bar {
  padding: 0 1vw;
}

.two-cols {
	column-count:2
}

/*
	LOGIN
************************************************************************************************************************/
body.login {
	background-color: #222;
}

body.login h2 {
	color:white;
	text-align: center;
	margin-top:20vh;
	font-weight: 900
}

body.login .panel {
	background: #BBB
}

body.login .panel .button {
	background: #333;
	float:right;
}

body.login .lost_password {
	font-size: 12px;
	color:#333;
}


/*
	NAVIGATION PRINCIPALE
************************************************************************************************************************/
#main-nav {
	background: black;
	color:white;
	height: 60px;
}

#main-nav h1 {
	color:white;
	font-size: 24px;
	font-weight: 100;
	width: 20vw;
	float:left;
	padding: .5em
}

#main-nav ul {
	float:left;
	width: 50vw;
}

#main-nav ul.tools {
	float:left;
	width: 25vw;
	text-align: right;
}

#main-nav ul.tools a {
  font-size: 90%;
}	 

#main-nav li {
	display: inline-block;
}

#main-nav li a {
	display: block;	
	padding: 3px 14px;
	color:rgba(255,255,255,.7);
	font-size: 1vw;
	margin: 12px 12px 0 0;
	border-radius: 100px;	
	transition: .5s background ease;
}

#main-nav li a:hover {
		background: rgba(255,255,255,.2);
}

#main-nav li.selected a {
	color:white;
	font-weight: 900;
	background: rgba(255,255,255,.3);

}
/*
	STRUCTURE
************************************************************************************************************************/
#nav {
	width: 20vw;
	height: calc(100vh - 60px);
	background: silver;
	position:absolute;
	top:60px;
	left:0;	
	overflow-x: none;
	overflow-y: scroll;
}

#content {
	width: 80vw;
	height: calc(100vh - 60px);
	position:absolute;
	top:60px;
	left:20vw;	
	padding: 0;
		overflow-x: none;
	overflow-y: scroll;
	transform:translate3d(0,0,0);
}

#nav ul {
	padding: 0;
	margin: 0;
}

#nav li {
	list-style: none;
	margin:  0;
}

#nav li.header {
  padding: 2em .5em .5em;
  color:rgba(0,0,0,.5);
	font-family: 'Bw Nista Grot Rg', sans-serif;
  font-size: .8em;
  border-bottom:1px dotted rgba(0,0,0,.5);
}	

#nav li a {
	display: block;
	font-size: .8vw;
	padding: 0.5em 1em;
	color:black;
	transition: .5s background ease;	
}

#nav li a:hover {
		background: rgba(255,255,255,.2);
}

#nav li.selected a {
	color:white;
	font-weight: 900;
	background: rgba(0,0,0,.7);

}

button.tiny, .button.tiny {
	font-size: 16px;
	font-weight: 900
}

/*
	TOOLBOX
************************************************************************************************************************/
#toolbox {
  background: #666;
}

#toolbox ul {
	padding: 0;
	margin: 0;
}

#toolbox ul li {
	list-style: none;
	margin: .5em 0;
	display: inline-block;
}

#toolbox li a {
	display: block;
	font-size: .8vw;
	color:rgba(255,255,255,.5);
	transition: .5s background ease;	
	border-radius: 100px;
	margin: 0 1px;
	padding: 2px 12px;
}

#toolbox li.selected a {
	color:white;
	font-weight: 900;
	background: rgba(0,0,0,.3);
}  


/*
	LISTES
************************************************************************************************************************/
.grid {
	width: 90%;
	margin: 40px auto;
}

.grid-toolbar {
	margin-bottom: 20px;
	float:left;
	background: #f0f0f0;
}

.grid-toolbar .button {
	width: auto;
}

.grid-toolbar input, .grid-toolbar select {
	width: 200px;
	float:left;
}

#filter-form {
  margin-top: 40px;
}

#filter-form select{
  width: 80%;;
}

.grid {
	border:0;
	border-collapse: collapse;
}

.grid th {
	font-family: 'Bw Nista Grot Bd', sans-serif;
	  color:#666;
}



.grid th, .button-column.header {
	background: white;
	border-top: 1px grey dotted;
	border-bottom: 1px grey dotted;	
}

.grid tr {
	transition: .5s ease background;
}

.grid em {
  padding-left: 1.6em;
  font-size: 80%
}

.grid td {
	 font-size: 16px;
	 padding:.2em 0;;
	 
}

table.flat tr.even, table.flat tr.alt, table.flat tr:nth-of-type(even) {
  background:white;
}

table.flat h4 {
  padding-top: 1em;
  color:#666;
	font-family: 'Bw Nista Grot Bk', sans-serif;
  border-bottom:1px dotted silver
}

table.flat td:first-child {
  font-weight: 900;
}

.button-column {
  width: 1em;
}

.foreign-item {

	font-size: 16px;	
  font-weight: normal;
}

.foreign-item em {
  font-size: 80%; 
  padding-left: 1em;
  font-weight: 100;
}

.order-handler {
  color:silver;
  padding: 0 .5em 0 0
}

.has-tip, .has-tip:hover {
  border:none;
  color:black;
}

.checkbox {
	background: none;
	color:maroon;
	padding: 0;
	margin: 0;
}

.checkbox .yes {
  color:#066b3c
}	


/*
	FORMULAIRE
************************************************************************************************************************/
.form-edit {
	width: 90%;
	margin: 40px auto;
}

.form-edit textarea {
  height: 8em;
}

.form-edit label {
  color:#666;
	font-family: 'Bw Nista Grot Bk', sans-serif;
  font-size: 16px;  	
  margin: 20px 0 10px;
  padding:  0 0 10px 0;
  font-weight: bold;
}	

.form-edit label .help_text {
	color:#AAA;
	font-size: 14px;
	font-weight: normal;
	font-style: italic;
}

.help_text {
	color:#AAA;
	font-size: 14px;
	}

.form-edit input {
	font-family: 'Bw Nista Grot Rg', sans-serif;
	font-size: 16px;	  
}	  

.form-edit .button.save {
	float:right;
}

.row.acces {
	border-top:1px dotted silver;

}


.cropit-preview {
  width: 250px;
  height: 250px;
  border: 1px solid silver;
}

.cropit-preview img {
  max-width: none; 
  }


/*
	APERCU
************************************************************************************************************************/
.dont-print {
	display: none;
}

.apercu {
  padding: 2vw;
  background: #333;
  min-height: 100vh;
}

.apercu .page {
  background: white;
  width: 90%;
  border-radius: 10px;
  padding: 20px;
  margin: 10px auto;
  box-shadow: 0px 1px 15px black
}

.apercu .page p {
	margin-bottom: 4px;
}	

.apercu h3 {
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1em;
} 

.apercu h4{
  font-weight: 500;
  text-transform: uppercase;
  margin: 2em 0 .5em;

} 


.apercu h5 {
	font-family: 'Bw Nista Grot Rg', sans-serif;
  margin: 3em 0 1em 0;
  font-weight: 900;
  border-bottom: 1px solid silver;  
}

.apercu p.info {
	font-size: 16px;
	font-style: italic;
	padding-left: 3em;
	margin: 0;
}

span.objectif {
	display: block;
/* 	float:right; */
	margin-left: 2em;
	margin-top: -1.5em;
	width: calc(100% - 4em);

}

.objectifs p {
	padding-bottom: 12px;
}


.obj {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	border-radius: 1em;
	background: black;
	font-size: .8em;
	color:white;
	font-weight: 900;
	line-height: 1.2em;
	text-align: center;
	font-family: 'Bw Nista Grot Rg', sans-serif;
  margin-right: 8px;
}


.obj.small {
  margin-right: 2px;
}

.obj.priority-1 {	background: #800404 }
.obj.priority-2 {	background: #805f03 }
.obj.priority-3 {	background: #628002 }
.obj.priority-4 {	background: #028057 }
.obj.priority-5 {	background: #025080 }
.obj.priority-6 {	background: #270280 }
.obj.priority-7 {	background: #680280 }
.obj.priority-8 {	background: #800247 }

.obj.priority-9 {	background: #5f83cd}
.obj.priority-10 {	background: #98e805
}
.obj.priority-11 {	background: #af4208
}
.obj.priority-12 {	background: #ff0058
}
.obj.priority-13 {	background: #2f8e2d
}
.obj.priority-14 {	background: #bf5892
}

.obj.priority-15 {	background: #363987
}
.obj.priority-16 {	background: #3b1374
}
.obj.priority-17 {	background: #66273b
}
.obj.priority-18 {	background: #60056c
}
.obj.priority-19 {	background: #586138
}

.obj.priority-20 {	background: #61000b
}


#apercu-config {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: grey;
  color:silver;
  position: absolute;
  top:60px;
  right:20px;
  text-align: center;
  line-height: 1.3em;

}

#apercu-print {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: grey;
  color:silver;
  position: absolute;
  top:60px;
  right:60px;
  text-align: center;
  line-height: 1.3em;
}

#apercu-filter {
  position: absolute;
  top:92px;
  right: 20px;
  background: grey;
  color:white;
  border-radius: 4px;
  padding: 10px;  
  display: none;
      z-index: 4000

}

#apercu-filter ul {
  list-style: none;
  padding: 0;
  margin: 0; 
}

#apercu-filter li.caption {
	font-size: 90%;
	padding: 1em 0 .5em;
	color:rgba(255,255,255,.5)
}

p.done {
	color:grey;
	text-decoration: line-through;
}

.swot {
  border:0;
  width: 100%;
  border-collapse: collapse;
}

.swot td {
  vertical-align: top;
}


table.swot tr.table-header:nth-of-type(even) {
  border: 1px dotted red;
  background: white;
}

.table-tasks {
	width: 100%;
	border:0;
	border-collapse: collapse;
}

.echeancier .table-tasks {
	margin: 0;
}

.echeancier .table-tasks tr {
 margin-bottom: 2px;
	border-bottom:1px dotted silver;
}
.echeancier .table-tasks td  {
	padding: 0 0 2px 0;

}

p.indent {
  padding-left: 1.5em;
}

.pageCounter {
  position: absolute;
  top:0;
  right:0;
  text-align: center;
  display: none;
}
  

/*
	TABLEAU STRAT
************************************************************************************************************************/
/*
#tableau-strat th span {
  transform-origin: bottom left;
  transform: rotate(-45deg);
  border: 1px dotted red;
  display: block;
}
*/
#tableau-strat {
  border:0;
  width: 90%;
  	border-collapse: collapse;
}

#tableau-strat h5 {
  padding: 0;
  margin: 0;
  font-weight: 100;
  font-size: 100%;
  border:0;
}

#tableau-strat th.rotate {
  height: 120px;
  white-space: nowrap;
}


#tableau-strat th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 40px;
}
#tableau-strat th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 0px 0px 20px;
  margin-left: -30px;
}

#tableau-strat td {
  text-align: center;
  border-collapse: collapse;
  border-right:1px dotted black;

}

#tableau-strat td.busy {
  background: #dddddd;
}

#tableau-strat td.no-borders {
	border-left:0;
	border-right:0;	
}

table tr.table-header:nth-of-type(even) {
  background: white;
}


table tr.table-header td, table tr.table-header th{
	border-bottom:1px solid black;
	border-collapse: collapse
}

/*
	UI
************************************************************************************************************************/
.counter {
	float:right;
	font-size: .9vw;
	width: 1.5vw;
	height: 1.5vw;
	border-radius:100px;
	background: black;
	color:white;
	line-height: 1.6em;

	text-align: center;
	font-family: 'Bw Nista Grot Rg', sans-serif;
}



/*
	PERSONNES
************************************************************************************************************************/
.avatar {
  display: inline-block;
/*   float:right; */
  width: 2em;
  height: 2em;
/*   padding: .4em; */
  border-radius: 1.5em;
  background: black;
  color:white;
  text-align: center;
  line-height: 1.9em;
	font-family: 'Bw Nista Grot Rg', sans-serif;
  font-weight: 900;
  margin-left: 4px;
}

form .row {
	padding: 0;

	}

form .columns {
	padding-left : 0;
	}