html, body{
  font-size: 16px;
	font-family: 'Roboto', sans-serif;
  background-color: #f3f3f3;
  color: #000;
}

html, body, #view, .navbar-50 , form {
  height:100%;  
}

/***************************************/
/* Formatage de l'affichage des textes */
.display2 {
  font-size: 45px;
  font-weight: 400;
}

.display1 {
  /*font-size: 34px;
  */
  font-size: 24px;
  font-weight: 400;
}

.headline {
  font-size: 24px;
  font-weight: 400;
}

.title {
  font-size: 20px;
  font-weight: 300;
}

.subhead {
  font-size: 16px;
  font-weight: 400;
}

.body2 {
  font-size: 14px;
  font-weight: 300;
}

.body1 {
  font-size: 14px;
  font-weight: 400;
}

.caption {
  font-weight: 400;
  padding-top:6px;
  padding-bottom:6px;
  font-size: 12px;
  color:#999;
}

.button {
  font-size: 14px;
  text-transform : uppercase;
}

.note {
  font-size: 16px;
  color:#999;
  padding-bottom:3px;
}

.normal {
  font-size: 16px;
}

/***************************************/
/* Barre de navigation */
.navbar {
margin-bottom:0px;
font-weight: 700;
color: #FFF;
z-index: 800;
}

.navbar-50 {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}

.navbar-nav {
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom: 0px;	
}

.container-header>.navbar-header {
margin-left:0px;
margin-right:0px;
}

.container-header{
padding-top:0px;
padding-left:0px;
padding-right:0px;
margin-left:0px;
margin-right:0px;
}

.right-nav {
position: relative;
float: right;
padding-right: 16px;
height: 50px;
}

/***************************************/
/* conteneurs principaux */
.container {
padding-top:60px;
padding-left:0px;
padding-right:0px;
margin-left:auto;
margin-right:auto;
height: 100%;
}

@media (max-width: 1199px) { /*hack pour empecher le chnagement de taille de la navbar */
.navbar .navbar-brand {
  height: 60px;
  line-height: 30px;
  position: relative;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}
}

@media (min-width: 800px) { /*blocage de la largeur à 2 colonnes de 375px en mode desktop */
.container {
  width: 800px;
}
}

.row {
margin-left:0px;
margin-right:0px;
padding-left:15px;
padding-right:15px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 10px;
  padding-left: 10px;
}

.bottom {
position : fixed;
bottom: 16px;
right: 16px;
z-index: 100;  
}

#progress {
width: 100%;
position: fixed;
top: 0;
margin:0;
padding:0;
z-index: 9999;
}

/***************************************/
/* ProgressBar */
.mprogress-custom-parent {
overflow:visible; 
}

/***************************************/
/* Snackbar */

.snackbar-container {
position: fixed;
left: 16px;
bottom: 0;
width: 75%;
z-index: 9999;
  max-width: 768px;
}

.snackbar{
border-radius: 4px;
}

.snackbar.snackbar-opened {
height: 54px;
margin-bottom: 16px;
}

.snackbar-action {
float:right;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
border-radius: 0px;
}

.waiting {
z-index: 99;
background-color: #FFF;
opacity: 0.5;
width: 100%;
height: 100%;
position:fixed;
transition: opacity .2s ;
}

.advice {
  
}
/***************************************/
/* Icones */
i {
font-size: 1.3em;
}

/***************************************/
/* Boutons */
.btn {
font-weight:400;
z-index:100;
}

.btn-middle {
position: relative; 
bottom:30px;
float : right;
right:16px;

}

/***************************************/
/* Card */
.card {
  margin-top:8px;
  margin-bottom:8px;
}

.unic-card {
  margin-top:0px;
  margin-bottom:8px;
}

.opacity-transition {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in;
  -ms-transition: opacity 0.5s ease-in;
  -o-transition: opacity 0.5s ease-in;
  transition: opacity 0.5s ease-in;
}

.something  {
  opacity: 1;
}

.card-body-info {
  color:#999;
}

.card-body-actions {
  padding-left:8px;
  padding-right:8px;
  padding-top:8px;
  padding-bottom: 8px
}

.vote-button {
  border-top-color: transparent;
  border-top-style: outset;
  border-top-width: 2px;
  border-right-color: transparent;
  border-right-style: outset;
  border-right-width: 2px;
  border-bottom-color: transparent;
  border-bottom-style: outset;
  border-bottom-width: 2px;
  border-left-color: transparent;
  border-left-style: outset;
  border-left-width: 0px;

  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-color: transparent;
  box-sizing: border-box;

  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  color: #999;
}

.icon-action {
  padding-right:2px;
}

.vote-button:hover , .voted {
  color: #ffac33;
}

.instant-vote {
  -webkit-animation-name: goandback;
  -webkit-animation-duration:0.4s;
  -webkit-animation-timing-function:cubic-bezier(0,.56,.65,1);

  animation-name: goandback;
  animation-duration:0.4s;
  animation-timing-function:cubic-bezier(0,.56,.65,1);
}

@-webkit-keyframes goandback{
    0% {
        -webkit-transform:scale(1);
    }
    50% {
        -webkit-transform:scale(1.2);
    }
    100% {
        -webkit-transform:scale(1);
    }
}

@keyframes goandback{
    0% {
        transform:scale(1);
    }
    50% {
        transform:scale(1.2);
    }
    100% {
        transform:scale(1);
    }
}

.card hr {
  margin-top:0px;
  margin-bottom:0px;
  color: 000;
}

.card .mini-card-body {
  height: auto;
  box-sizing: border-box;
  display: flex;
}

.mini-card:hover{
  background-color: #f6f6f6;
}

.card .card-text {
  padding-top: 16px;
  padding-bottom: 16px;
}

.card .text-item {
  padding-top: 8px;
  padding-bottom: 8px;
}

.text-item span {
  width:28px;
}

.card .btn-primary {
  padding: 8px 10px;
}

.card a {
  font-weight: bold;
}


/***************************************/
/* Formulaire */
.field {
  line-height: 12px;
  position: relative;
  padding-top: 16px;
  padding-bottom: 8px;
  padding-right: 0px;
  padding-left: 0px;
}

.field-label {
  margin: 0;
  position: relative;
  line-height: 16px;
  color: #DDD;
  font-weight: 400;
  display: block;
  font-size: 16px;
  transform: translateY(24px);
  transition: transform 0.3s ;
  transition: font-size:0.3s;
}

.field-input {
  position: relative;
  background: transparent;
  line-height: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 0px;
  padding-left: 0px;
  border: none;
  border: 0; 
  -webkit-appearance:none;
  -moz-appearance:none;
  display: block;
  width: 100%;
  font-size: 16px;
  outline: none;
}

.field-textarea {
  height: 64px;
}

option {
  height: 32px;
  line-height: 16px;
}

.field::after , .field::before{
content:'';
height: 2px;
background-color: #DDD;
width: 100%;
position: absolute;
bottom: 6px;  
left: 0;
}

.field::after {
background-color: #AFB42B;
transform: scaleX(0);
transition: transform 0.3s;
}

.is-focused .field-label {
  color:#AFB42B;
}

.has-label .field-label {
  transform: translateY(0);
}


.field.is-focused::after{
transform: scaleX(1);
}

.form-control , .form-control:focus{
border-radius: 0px;
box-shadow: inset 0 0px 0px;
border-top:0px;
border-left:0px;
border-right:0px;
line-height: 40px;
background-color: #FFF;
color: #000;
outline-color:white;
}

.formcontrol  {
font-size: 16px;
}

input.form-control, input.form-control:focus {
min-height: 50px;
}

input.form-control, input.form-control:focus, select.form-control, select.form-control:focus , textarea.form-control, textarea.form-control:focus{
margin-bottom:8px;
}

select.line-bottom, select.line-bottom:focus, .line-bottom , .line-bottom:focus{
border-bottom:1px solid #EEE;
}

/***************************************/
/* Formulaire d'ajout report */

.picto {  /* TODO : a revoir , positionnement aleatoire et nomage approximatif */
position: relative;
bottom: -0.45em;
float: left;
left: 50%;
margin-left: -0.5em;
font-size: 15em;
color:#FFF;
}

.test {
  z-index: 90;
}

.right {
position: relative;
float: right;
}

/***************************************/
/* Picture picker */
.drop-zone {
border : 2px dashed #CCC;
min-height: 300px;
width:100%;
background-color: #E7E7E7;
}

.drop-img {
width:100%;
height:100%;
}

.photo-form {
background-color: #FFF;
margin-top:16px;
}

.file_upload {
position: relative;
overflow: hidden;
}

/***************************************/
/* Résultats  */
.list-item {
position: relative;
}

.item {
overflow: hidden;
}

.item-full {
max-height:100%;
min-height: 30%;
overflow: hidden;
}

.edit {
height: 100%;
}

.ratio-169 {
  width:100%;
  padding-bottom: 56.25%;
  position: relative;
}

.img-item{
width: 100%;
overflow: hidden;
}

.img-item img{
width:100%;
}

.text {
position: absolute;
bottom: 0.25em;
left: 0.5em;
z-index: 2;
color : #FFF;
width: 100%;
padding-right: 0.5em;
}

.more {
width: 100%
}

/***************************************/
/* Material Design add-on */
.material-lime  {
  background-color: #cddc39;
}
.material-lime-50 {
  background-color: #f9fbe7;
}
.material-lime-100 {
  background-color: #f0f4c3;
}
.material-lime-200 {
  background-color: #e6ee9c;
}
.material-lime-300 {
  background-color: #dce775;
}
.material-lime-400 {
  background-color: #d4e157;
}
.material-lime-500 {
  background-color: #cddc39;
}
.material-lime-600 {
  background-color: #c0ca33;
}
.material-lime-700 {
  background-color: #afb42b;
}
.material-lime-800 {
  background-color: #9e9d24;
}
.material-lime-900  {
  background-color: #827717;
}
.material-lime-A100{
  background-color: #f4ff81;
}
.material-lime-A200 {
  background-color: #eeff41;
}
.material-lime-A400 {
  background-color: #c6ff00;
}
.material-lime-A700 {
  background-color: #aeea00;
}
.btn-material-lime:not(.btn-link):not(.btn-flat){
	color:white;
}
.navbar-material-lime.navbar {
color:white;
}


.mini-img {
overflow: hidden;
}

.mini-img img{
  width: 100%;
}

.mini-card-left {
  width:70%;
    display: inline-block;
}

.mini-card-left  {
  font-weight: bold;
  color: #333;
  font-weight: 400;
  }

 .mini-card-left  :hover, a, a:hover, a:focus {
    text-decoration: none;
 }

.mini-card-right {
  width:30%;
      position: relative;

}