@charset "utf-8";

/* PAGE NOTIFICATION */
#pageNotification {
 margin: 20px 0 ;
 float: left;
  width:100%;
}
#accordion .ui-accordion-header {
    margin:0;
}
 /*******BOX ARCHIVES GAUCHE  *****/
.archiveTrajets
{

  float:left;
  width:calc(100% - 5px);
  /*! margin:20px 0; */
  border:1px solid #ccc;
  height:440px;
  overflow-y:auto;
  position:relative;
  border:1px solid #ddd !important;
  border-top:1px solid #ddd !important;
    border-bottom:1px solid #ddd !important;
border-radius:0 !important;
  border-left:1px solid #ccc !important;
}
#solidaireTabs{

  border-top:5px solid #ddd !important;
}
.archiveTrajets *{
  border-radius:0 !important;
}

.adresseArrivee{
  white-space: nowrap ;
  width:290px;Overflow:hidden;
  display:inline-block;
  position:relative;
  top:6px;
}
.archiveTrajets H2
{
  position:fixed;
  top:0;
  left:0;
  width:100% !important;
  margin:10px 0;
  text-align:center;

}

.archiveTrajets ul
{
  margin:0;
width:250px;
  float:left;
  overflow:hidden;
  overflow-y:scroll;
  height:100%;
  /*! padding:0 10px; */
}

.archiveTrajets ul li
{

  float:left;
  width:100%;
  margin:20px 0 0;
  border-bottom:1px solid #ccc;
}

.archiveTrajets ul a
{
  display:block;
}

.archiveTrajets .trajetAnnule:after
{
  content:"Trajet non effectué";
  position:absolute;
  right:0;
  font-size:14px;
  color:red;
  background:white;
  border:0;
  bottom:0;
  border-left:1px solid red;
  border-top:1px solid red;
  border-right:1px solid red;
  padding:2px 5px;
  border-radius:5px  0 0 0;
}

.archiveTrajets .trajetAttente:after
{
  content:"Trajet en attente";
  position:absolute;
  right:0;
  font-size:14px;
  color:orange;
  background:white;
  border:0;
  bottom:0;
  border-left:1px solid orange;
  border-top:1px solid orange;
  border-right:1px solid orange;
  padding:2px 5px;
  border-radius:5px  0 0 0;
}

.archiveTrajets .trajetNeutre:after
{
display:none;

}
.archiveTrajets  .trajetEffectue
{
 border-left:4px solid #3FB093;
}
.archiveTrajets  .trajetNeutre
{
 border-left:4px solid #4B6E8A;
}
.archiveTrajets  .trajetAttente
{
 border-left:4px solid #E3A52D;
}
.archiveTrajets  .trajetAnnule
{
 border-left:4px solid #E33D33;
}
.archiveTrajets  .trajetEffectue:after
{
  content:"Trajet effectué";
  position:absolute;
  right:0;
  font-size:14px;
  color:#3FB093;
  background:white;
  border:0;
  bottom:0;
  border-left:1px solid #3FB093;
  border-top:1px solid #3FB093;
  border-right:1px solid #3FB093;
  padding:2px 5px;
  border-radius:5px  0 0 0;
}


.dateDepart,
.heureDepart,
.communeDepart,
.communeArrivee{
  color:#144b56;
}

 /*******BOX NOTIFICATIONS DROITE   *****/


#boxNotifications{
  height:100%;
  overflow:hidden;
  padding:0 5px;
  width: auto;
  /* float:right; */
  /*
  background:url('../img/illus/illus-pasDeNotifs.jpg');
  background-repeat:no-repeat;
  */
}
#boxNotificationsInner{
/*! height:100000px; */
  /*! position:relative; */
}

.notifOuter{
  height:440px;
  float:left;
  width:700px;
}
.headerNotif {
 background-color: #14456b;
 color: #fff;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 15px;
 transition: 0.4s;
 margin: 20px auto 0;
 text-align: center;
 font-size: 24px;
 border: none;
 position: relative;
 right:0;
  float:right;
}

div.panelNotif {
  width:100%;
 padding: 0;
 background-color: white;
 overflow: hidden;
  position:relative;
 float:right;
 transition: max-height 0.2s ease-out;
}
.notifRemarque {
 border: 1px solid;
 border-top: none;
 display: block;
 cursor: pointer;
 width: 250px;
 text-align: center;
 background: #555;
 color: #fff;
 position: relative;
 left: -1px;
 border-radius: 0 0 5px 5px;
overflow:hidden;}


..headerNotif .boutSubmit {
 width: 80% !important;
 display: block !important;
 margin: 0 auto;
}
.panel .ligneTrajetHead {
/* background: #14456B;
 text-align: center;
 color: #fff;
 border-radius: 0 0;*/
}
.headerNotif .icoNotif {
 width: 40px;
 position: absolute;
 left: 20px;
 bottom: 0px;
}
.boutPlusAnim {
 position: absolute;
 left: 70px;
 bottom: 10px;
 font-size: 42px !important;
 font-weight: bold;
 font-family: Impact, Arial, sans-serif;
}
.ui-widget {
    background-color: white;
    border: none;
}

  .ui-tabs .ui-tabs-nav {

 border-right:1px solid #eee ;

}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    /*! top: 0; */
    margin: 0 0 1px 0;
    border-top-width: 0;
    padding: 0;
    white-space: nowrap;
}

.ui-tabs .ui-tabs-nav li a{
    min-height:60px;
  font-size:1.15em;
  width:100%;
}
.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 10px;
  width:calc(100% - 22px);
    background: none;
  float:left;
  border:1px solid #ccc ;
  border-top:none;
}

.ui-state-active {
  color:green !important;
  background:white !important;
}
.ui-state-active *{
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0px solid #d3d3d3;
        border-bottom-width: 0px;
    background:#14456b ;
    font-weight: normal;
    color: #fff;
  font-size:18px !important;
};

.ui-tabs .ui-tabs-nav {
    margin: 0;
  padding:0 !important;
}

.ui-datepicker-title, .ui-widget-header {
    color: #000;
    font-size: 16px !important;


}

  .ui-accordion-header, .ui-accordion-header-active
  {
    background:#14456b !important;
    color:#fff !important;
  }

  .ui-accordion-header, .ui-accordion-content
  {
border:2px solid #14456b;
    border-radius:0;
    height:auto !important;
    font-size:1.2em !important;
  }

.ui-accordion-content
  {
padding:0 !important;
  }
.ACC-ligne{
 padding:10px;
  float:left;
  width:calc(100% - 20px);

}





.ACC-ligne-2 img{
  width:18px;
  margin-right:5px;
  position:relative;
  top:2px;
}


.ACC-ligne-3 img{
  width:20px;
  position:relative;
  top:4px;
}


.ACC-ligne-3 span:first-child{
margin-right:150px;
}

.ACC-ligne-3 input{
  background:none;
  max-width:100px !important;
}

.ACC-ligne-4{

  display:flex;
  justify-content:space-between;
}

.ACC-ligne-5 textarea{

 width:900px;
  height:50px;
}

.ACC-ligne-6 {
display:flex;
  justify-content:space-around;


}

.ACC-ligne-7 {
display:flex;
  justify-content:space-around;


}
.ACC-ligne .boutDemande{
color:#fff;
padding:3px 20px;
  cursor:pointer;

}


.ACC-ligne .boutAccepteDemande{
background:#39B54A;
}

.ACC-ligne .boutRefuseDemande{
background:#DD0C1E;
}



.ACC-ligne .boutDemande:hover{

  background:#666;
}
/*******************************************/
/**** COLONNES BAS DE PAGE CONDUCTEURS *****/
#covoiturageTabs{

  height:auto;
}

.colConducteur{
  width:100%;
  float:left;
  margin:0 0 0;
  background:#fff;
  /*! clear: both; */
}

#covoiturageOuter{
  float:left;
  width:100%;
  margin:0;
  height:auto;
  overflow:hidden;
}

.colConducteur H1{
text-align:left;
}
.colConducteur .box-violet{
text-align:center;
  border:1px solid #4E51A3;
  padding:10px;
  margin:20px 0;
}


.conducteurBox{
  width:calc(100% - 21px);
  float:left;
  background:#fff;
  margin: 0px 0 ;
  /*! border:1px solid #ccc; */
  position:relative;
  text-align:center;
  padding:10px;
}



.colConducteurD{
 margin-left:30px;

}


.colConducteurG{
  clear:both;
}
.selectionJoursCovoituragePlanifie,
#selectionJoursCovoituragePlanifie{

  margin:0px 0 10px;
  float:left;
  width:100%;
  position:relative;

}

.joursCovoituragePlanifie,
#joursCovoituragePlanifie{
  height:20px !important;
  float:left;
}
.selectionJoursCovoituragePlanifie ul,
#selectionJoursCovoituragePlanifie ul{
 margin: auto;
 padding: 0;
 overflow: hidden;
 width: 100%;
}
.selectionJoursCovoituragePlanifie ul li,
#selectionJoursCovoituragePlanifie ul li {
 float: left;
 width: calc(12.5% - 2px);
 height: 40px;
 margin: 1px;
 padding: 0;
 text-align: center;
 background: #eee;
 line-height: 16px;
 position: relative;
  font-size:0.8em;
}
.selectionJoursCovoituragePlanifie ul li .resetInput,
#selectionJoursCovoituragePlanifie ul li .resetInput{
display:none
}

.selectionJoursCovoituragePlanifie ul li input,
#selectionJoursCovoituragePlanifie ul li input{
 font-size: 2em !important;
 background: #31BA9C;
 color: #fff;
 width: calc(100% - 2px);
 text-align: center;
 height: 100%;
}
.selectionJoursCovoituragePlanifie .ligneForm,
#selectionJoursCovoituragePlanifie .ligneForm{
 border: 1px solid #ccc;
 margin: 10px 0;
 background: #EEEEEE;
 border-radius: 5px;
 padding: 5px;
 width: calc(100% - 10px);
}

.selectionJoursCovoituragePlanifie .inputDate,
#selectionJoursCovoituragePlanifie .inputDate{
 margin: 0px 20px 0;
 border: 1px solid #ccc;
 padding: 5px 5px 5px 25px;
 border-radius: 5px;
 width: 100px;
}




.boxDateDepartEnregistre{
  margin:5px 0 0 0 !important;

}



.TrajetPause{
  float:left;
  width:100%;
  color:#2C4665;
  margin:30px 0 0  0;

}

.TrajetPause span{
text-decoration:underline;
  cursor:pointer;

}

/***** BOX CONDUCTEUR *******/

.CovoiturageBoxTopG .st0{
fill:#ccc;
}
.CovoiturageBoxTopD{
  width:100%;
  float:left;
  margin:0 0 0;
  text-align:left;
}

.CovoiturageBoxTopD img{
width:15px;
  margin-right:5px;
}

.conducteurNom
{
  text-transform:uppercase;
  font-size:1.2em;
  margin:0 0 10px;
}
.conducteurTypeTrajet{
  color:#fff;
  background:#4E51A3;
  display:inline-block;
  padding:5px 10px;
    margin:0 0 10px;

}
label[for="autocomplete"],
label[for="autocompleteDisable"]{
  background:url('../img/icos/ico-point-vert.svg');
  background-repeat:no-repeat;
  background-size:15px;
  background-position:0 5px;
  padding: 0 0 0 25px;
    margin:0 0 10px;
  text-align:left;
}
label[for="autocomplete2"],
label[for="autocompleteDisable2"]{
  background:url('../img/icos/ico-point-rouge.svg');
  background-repeat:no-repeat;
  background-size:15px;
  background-position:0 5px;
  padding: 0 0 0 25px;
    text-align:left;

}

#autocomplete, #autocomplete2{
  background:none;
  border-bottom:1px solid #999;
  margin:0 0 10px;
  width:500px;
}

#autocompleteDisable, #autocompleteDisable2{
  background:none;
  margin:0 0 10px;
  width:500px;
}

.boxDateDepart img,
.boxDateDepartEnregistre img,
.boxDateDepart img,
.boxDateRetour img{
  height:18px;
  position:relative;
  top:2.5px;
}
.CovoiturageBoxBottom{
position:relative;
  float:left;
  width:100%;
  background:#eee;
}
.boxPassagers{
 background:#eee;
  float:left;
  width:calc(100% - 10px);
  margin:10px auto;
  padding:5px;
}


.boxPassagers p{
background:#999;
  margin:0;
  padding:5px ;
  color:#fff;
}

.ligneBoxPassagers{
  text-align:right;
  padding:5px 0;
  border-bottom:1px solid #ccc;
  font-family:Arial, sans-serif;

}
.ligneBoxPassagers div{
  float:left;

}

.ligneBoxPassagers input[type="button"]{
border:1px solid #ccc;
}

.ligneBoxPassagers input[type="button"]:hover{
border:1px solid #ccc;
  background:#555;
  color:#fff;
}

.boutAccepter{
  background:#31BA9C;
  color:#fff;
}
.boutRefuser
{
  background:;
  color:#999;
}
.covoituragePrix{
  font-size:em;
  margin:0 0 0 ;
  background:#999;
  display:inline;
  padding:0px 5px;
  border:1px solid #ccc;
  border-radius:5px;
  color:#FFF;
}


.covoiturageInfos{
  color:#14456B;
  margin: 0 0 0 ;
  position:absolute;
  right:10px;
  top:25px;
  font-size:24px;
}
.covoiturageInfos img{
  width:30px;
  position:relative;
  top:3px;
}
.trajetValable
{
  position:absolute;
  right:10px;
}
.conducteurBox .boutSubmit{
    width: 40%;
    display: inline-block;
    margin: 20px auto;
    padding: 10px 0;
    color: #fff;
    background:#E33D33 !important;
}

.resetInput{
  display:none;
}
.covoiturageAR
{
  float:left;
  width:100%;
  margin:0 0 10px;
  text-align:center;
}


.covoiturageAller
{
  margin: 50px 0 0;
  width:100%;
  border:1px solid #ccc;
  background:#eee;
}

.covoiturageRetour
{
  background:#eee;
  margin: 10px 0;
  width:100%;
  border:1px solid #ccc;
}

.covoiturageAR div
{
  display:inline-block;
  background:#31BA9C;
  color:#fff;
  float:right;
  width: 600px;
  padding:5px 0;
  text-align:center;
}

/***** RECAPITULATIF TRAJET *****/
/********************************/
.tableauOuter{
  height:440px;
  width:100%;
 padding-top:80px !important;
}
.typeConducteur{
  position:absolute;
  top:10px;
  background:#eee url('../img/icos/ico-auto-vert-1.png');
  background-size:40px;
  background-position:10px  center;
  background-repeat:no-repeat;
  height:40px;
  padding:10px 10px 10px 60px;
  border:1px solid #ccc;
  line-height:40px;
  border-radius:5px !important;
text-transform:uppercase;
}

.typePassager{
  text-transform:uppercase;
  position:absolute;
  top:10px;
  background:#eee url('../img/icos/ico-people-vert.svg');
  background-size:40px;
  background-position:10px  center;
  background-repeat:no-repeat;
  height:40px;
  padding:10px 10px 10px 60px;
  border:1px solid #ccc;
  line-height:40px;
  border-radius:5px !important;
}
.tableauTrajet{
  width:calc(100% - 22px);
  float:left;
  display:flex;
  justify-content:space-between;
  border:1px solid #ccc;
  margin:40px 0;
  padding:10px;
}
.tableauCol{
  float:left;
  padding:0;
  margin:0 0 ;
  height:auto !important;
  overflow-y:hidden !important;

}
.tableauCol1{
  width:400px !important
}
.tableauCol2{
  width:270px !important;
  margin-left:30px !important;
}
.tableauCol li{
border-bottom:1px solid #ccc;
  padding:10px 0;
  height:40px;
  margin:0 !important;
}


.tableauCol li img{
width:30px;
height:auto;
}

.caracterIco{
  font-size:30px;
  font-weight:bold;
}
.icoOuter{
  width:40px;
  display:inline-block;
}

.conducteurNomOuter{
  width:100% !important;
  float:left;
  text-align:center;
  font-size:24px;
}
.conducteurNom{
color:#14456B;
  font-weight:bold;
}

.tableauMentions{

  float:left;
  width:100%;

}

.tableauMentions input[type="button"]
{
  width:44%;
  display:inline-block;
  margin:20px 2.5% 0 2.5% ;
  padding:10px 0;
  color:#fff;
}
.boutTrajetArchive{
  width:92% !important;
  cursor:default;
}
.boutValidTrajet{
  background:#3FB093;

}


.boutAnnuleTrajet{
  background:#E33D33;
}
.tableauMentions .mentionTrajetEffectue{

  color:#3FB093;
  border:1px solid #3FB093;
  display:block;
  padding:2px 5px;
  position:absolute;
  right:0;
  bottom:0;
  border-radius:5px 0 0 0 !important;
  border-bottom:0px;
  border-right:0px;
  background:#eee;
  font-size:24px;
}

.tableauMentions .mentionTrajetAttente{

  color:#E3A52D;
  border:1px solid #E3A52D;
  display:block;
  padding:2px 5px;
  position:absolute;
  right:0;
  bottom:0;
  border-radius:5px 0 0 0 !important;
  border-bottom:0px;
  border-right:0px;
  background:#eee;
  font-size:24px;
}

.tableauMentions .mentionTrajetNonEffectue{

  color:#E33D33;
  border:1px solid #E33D33;
  display:block;
  padding:2px 5px;
  position:absolute;
  right:0;
  bottom:0;
  border-radius:5px 0 0 0 !important;
  border-bottom:0px;
  border-right:0px;
  background:#eee;
  font-size:24px;
}

/***** BOX CONDUCTEUR *******/
.conducteurPhoto{
  width:50%;
  height:50%;
  margin:20px auto;
  border-radius:10000px;
  overflow:hidden;
  border:2px solid #ccc;
}

.conducteurPhoto .st0{
fill:#ccc;
}

.tabsSelect li{
  display:block;
  width:calc(33.3% - 2px);
  text-align:center !important;
  background:white !important;
   border:1px solid #EEE !important;
border-bottom:1px solid #ccc !important;
  border-radius:10px 10px 0 0 ;
  height:40px;
}


.tabsSelect li a{
  display:block;
  width:100%;
  text-align:center !important;
  min-height:auto !important;
  line-height:1.2em;
}

.tabsSelect .ui-state-active{

  background:white !important;
 border:1px solid #DDD !important;
  border-bottom:none !important;
}

.tabsSelect .ui-state-active a{
font-size:1.2em;
  font-weight:bold;
}


.ui-state-focus * { outline:0px dotted  !important }

.imgPasDeNotif{

  width:50%;
  margin:auto;
  display:block;
}


.boxTrajet{
  background:#eee;
  float:left;
  padding:10px 5px;
  margin:0 20px 0 0;
}
.boxTrajet input[type="text"]{
  background:#eee;
  width:100px;
}

.boxTypeTrajet{
  background:#eee;
  float:left;
  padding:10px 5px;
  margin:20px 20px 0 0;
  width:calc(100% - 10px);
  text-align:left;
}
.boxTrajetUnique
{
  margin:20px 0;
  float:left;
  width:100%;
}
.boxJoursTrajet{
  background:#eee;
  float:left;
    margin:20px 0;

  padding:10px 5px;
  width:calc(100% - 10px);
}


.boxJoursTrajet div{
  float:left;
  margin:0 60px 0 0 ;
}
.boxJoursTrajet div div{
 margin:0 0 10px;
  float:none;
}

.ajouterRetour {
  padding:10px 0;
  text-decoration:underline;
cursor:pointer;
}


.ui-accordion .ui-accordion-icons {
    padding-left: 10px;
}

/*******************************************/

/*******************************************/

/*******************************************/

/********* RESPONSIVE FORMAT MOBILE ********/

/*******************************************/

/*-*****************************************/
@media screen and (max-width: 768px) {

  H1{
    text-align:center;
  }
/* PAGE NOTIFICATION */
#pageNotification {
 margin: 0 auto;
  float:none;
  width:95% !important;
}

 /*******BOX ARCHIVES GAUCHE  *****/
.archiveTrajets
{
  float:left;
  width:calc(100% - 2px);
  margin:20px 0;
  border:1px solid #ccc;
  height:auto;
  overflow-y:auto;
  position:relative;
  border:1px solid #ccc !important;
  border-top:5px solid #ddd !important;
    border-bottom:5px solid #ddd !important;
border-radius:0 !important;
}

.archiveTrajets *{
  border-radius:0 !important;
}

.archiveTrajets H2
{
display:none;

}

.archiveTrajets ul
{
  margin:0;
width:100% !important;
  float:left;
  overflow:hidden;
  overflow-y:scroll;
  height:100%;
  background:#fff;
  /*! padding:0 10px; */
}

.archiveTrajets ul li
{

  float:left;
  width:100%;
  margin:20px 0 0;
  border-bottom:1px solid #ccc;
}

.archiveTrajets ul a
{
  display:block;
}







.dateDepart,
.heureDepart,
.communeDepart,
.communeArrivee{
  color:#144b56;
}

 /*******BOX NOTIFICATIONS DROITE   *****/


#boxNotifications{
  height:100%;
  overflow:hidden;
  width: 100%;
  float:right;

}
#boxNotificationsInner{
/*! height:100000px; */
  /*! position:relative; */
}

.notifOuter{
  height:auto;
  float:left;
  width:100%;
}
.headerNotif {
 background-color: #14456b;
 color: #fff;
 cursor: pointer;
 padding: 2vw;
 width: 100%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 4vw;
 transition: 0.4s;
 margin: 2vw auto 0;
 text-align: center;
 font-size: 5vw;
 border: none;
 position: relative;
 right:0;
  float:right;
}

div.panelNotif {
  width:100%;
 padding: 0;
 background-color: white;
 overflow: hidden;
  position:relative;
 float:right;
 transition: max-height 0.2s ease-out;
}
.notifRemarque {
 border: 1px solid;
 border-top: none;
 display: block;
 cursor: pointer;
 width: 100%;
 text-align: center;
 background: #555;
 color: #fff;
 position: relative;
 left: -1px;
 border-radius: 0 0 5px 5px;
overflow:hidden;}


..headerNotif .boutSubmit {
 width: 80% !important;
 display: block !important;
 margin: 0 auto;
}
.panel .ligneTrajetHead {
/* background: #14456B;
 text-align: center;
 color: #fff;
 border-radius: 0 0;*/
}
.headerNotif .icoNotif {
 width: 40px;
 position: absolute;
 left: 20px;
 bottom: 0px;
}
.boutPlusAnim {
 position: absolute;
 left: 70px;
 bottom: 10px;
 font-size: 42px !important;
 font-weight: bold;
 font-family: Impact, Arial, sans-serif;
}


   .ui-tabs .ui-tabs-nav {
    width:90% !important;
    margin:0 0 6vw;
    height:200px;
     overflow-y:scroll;
    padding: 0;
    border: 0 !important;
     	border-right:1px solid #eee;

}

  .ui-tabs .ui-tabs-nav {
	margin: 0;
	/*! padding: .2em .2em 0; */

}
   .archiveTrajets:after {
   content:"←    →";
     transform:rotate(90deg);
     color:white;
     position:absolute;
     right:-10vw;
     top:8vw;
     font-size:12vw;
}
.ui-widget {
    background-color: transparent;
    border: none !important;
  font-size:6vw;
}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 0 0 1px 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 0;
    /*! float: left; */
}

.ui-state-active {
  color:green !important;
  background:white !important;
}
.ui-state-active *{
  color:#4B6E8A !important;

}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0px solid #d3d3d3;
        border-bottom-width: 0px;
    background: #ddd;
    font-weight: normal;
    color: #fff;
}


 .ui-widget-header {
    color: #000;
    font-size: 6vw !important;
}

  .covoiturage{
    margin:4vw  0;
    float:left;
    width:100%;
  }


.colConducteur H1{
text-align:left;
  background:none !important;
  text-align:center;
}
/***** RECAPITULATIF TRAJET *****/
/********************************/
.tableauOuter{
  height:auto;
  width:100%;
}

.tableauTrajet{
  width:calc(100% - 22px);
  float:left;
  display:flex;
  justify-content:space-between;
  border:1px solid #ccc;
  margin:4vw 0;
  padding:1vw;
}
.tableauCol{
  float:left;
  padding:0;
  margin:0 0 ;
  height:auto !important;
}

.tableauCol1{
  width:100% !important
}
.tableauCol2{
  width:100% !important;
  margin-left:0 !important;
}
.tableauCol li{
border-bottom:1px solid #ccc;
  padding:2vw ;
  height:auto;
  margin:0 !important;
}


.tableauCol li img{
width:6vw;
height:auto;
}

.caracterIco{
  font-size:6vw;
  font-weight:bold;
}
.icoOuter{
  width:8vw;
  display:inline-block;
}
.icoOuter{
  width:8vw;
  display:inline-block;
}
.conducteurNomOuter{
  width:100% !important;
  float:left;
  text-align:center;
  font-size:24px;
}
.conducteurNom{
color:#14456B;
  font-weight:bold;
}

.tableauMentions{

  float:left;
  width:100%;
}

.tableauMentions input[type="button"]
{
  width:40%;
  display:none;
  margin:20px 2.5% 0 2.5% ;
  padding:10px 0;
  color:#fff;
}

.boutValidTrajet{
  background:#3FB093;

}


.boutAnnuleTrajet{
  background:#E33D33;
}
.tableauMentions .mentionTrajetEffectue{

  color:green;
 display:block;
  padding:2px 5px;
  position:relative;
  right:0;
  bottom:0;
  border-radius: 0 0 0 !important;

  background:#eee;
  font-size:6vw;
  width:calc(100% - 12px);
  text-align:center;
  border:1px solid #3fb093;

}

.tableauMentions .mentionTrajetAttente{

  color:orange;
  border:1px solid orange;
  display:block;
  padding:2px 5px;
  position:relative;
  right:0;
  bottom:0;
  border-radius: 0 0 0 !important;

  background:#eee;
  font-size:6vw;
  width:calc(100% - 12px);
  text-align:center;
}


.tableauMentions .mentionTrajetNonEffectue{

  color:#E33D33;
  border:1px solid #E33D33;
   display:block;
  padding:2px 5px;
  position:relative;
  right:0;
  bottom:0;
  border-radius: 0 0 0 !important;

  background:#eee;
  font-size:6vw;
  width:calc(100% - 12px);
  text-align:center;
}

/*******************************************/
/**** COLONNES BAS DE PAGE CONDUCTEURS *****/
#covoiturageTabs{

  height:auto;
}

.colConducteur{
  width:100%;
  float:left;
  margin:0 0 0;
  background:none;
  /*! clear: both; */
}

#covoiturageOuter{
  float:left;
  width:100%;
  margin:0;
  height:auto;
  overflow:hidden;
      background:#fff;


}

.colConducteur H1{
text-align:center;
}
.colConducteur .box-violet{
display:none;
}


.conducteurBox{
  width:calc(100% - 4vw);
  float:left;
  padding:2vw !important;
  background:#fff;
  margin: 0 ;
  border:0px solid #ccc;
  position:relative;
  text-align:center;
}
.conducteurBox:hover{
  background:#E4E4E4;
}



.colConducteurD{
 margin-left:0;

}


.colConducteurG{
  clear:both;
}
.selectionJoursCovoituragePlanifie{

  margin:2vw 0 2vw;
  float:left;
  width:100%;
  position:relative;

}

.joursCovoituragePlanifie {
  height:20px !important;
  float:left;
}
.selectionJoursCovoituragePlanifie ul {
 margin: auto;
 padding: 0;
 overflow: hidden;
 width: 100%;
}
.selectionJoursCovoituragePlanifie ul li {
 float: left;
 width: calc(12.5% - 2px);
 height: 40px;
 margin: 1px;
 padding: 0;
 text-align: center;
 background: #eee;
 line-height: 16px;
 position: relative;
  font-size:0.8em;
}
.selectionJoursCovoituragePlanifie ul li .resetInput {
display:none
}

.selectionJoursCovoituragePlanifie ul li input {
 font-size: 1em;
 background: #31BA9C;
 color: #555 !important;
 width: calc(100% - 2px);
 text-align: center;
 height: 100%;
}
.selectionJoursCovoituragePlanifie .ligneForm {
 border: 1px solid #ccc;
 margin: 10px 0;
 background: #EEEEEE;
 border-radius: 5px;
 padding: 5px;
 width: calc(100% - 10px);
}

.selectionJoursCovoituragePlanifie .inputDate {
 margin: 0px 20px 0;
 border: 1px solid #ccc;
 padding: 5px 5px 5px 25px;
 border-radius: 5px;
 width: 100px;
}
/***** BOX CONDUCTEUR *******/
.conducteurPhoto{
display:none;
}

.conducteurPhoto .st0{
fill:#ccc;
}

.covoiturageInfos {
    margin: 0 0 2vw;
    position: relative;
    right: auto;
    top: auto;
  font-size:6vw;
}

  .covoiturageInfos img{

  width:6vw;
}
  .trajetValable {
    position: relative;
    right: auto;
    margin:4vw 0;
  float:left;
    width:100%;

}
input[disabled], textarea[disabled],
select[disabled='disabled']{
   -webkit-text-fill-color: rgba(255, 255, 255, 1);
   -webkit-opacity: 1;
   color: rgba(255, 255, 255, 1);
   background: white;
    font-size:4vw !important;
}


.boxPassagers{
 background:#eee;
  float:left;
  width:100%;
  margin:2vw auto;
  padding:0;
}


.boxPassagers p{
background:#999;
  margin:0;
  padding:1vw ;
  color:#fff;
}

.ligneBoxPassagers{
  text-align:right;
  padding:1vw 0;
  border-bottom:1px solid #ccc;
}
.ligneBoxPassagers div{
  float:left;

}

.ligneBoxPassagers input[type="button"]{
border:1px solid #ccc;
}

.ligneBoxPassagers input[type="button"]:hover{
border:1px solid #ccc;
  background:#555;
  color:#fff;
}

.boutAccepter{
  background:#31BA9C;
  color:#fff;
  float:right;
    font-size:6vw;
  padding:0px 2vw;
  margin:4vw 0 0 0;

}
.BoutRefuser
{
  float:left;
  color:#FFF;
  float:right;
  margin:4vw 2vw 0 0;
    font-size:6vw;
  padding:0px 2vw;

}

.covoituragePrix{
  font-size:7vw;
  margin:0 0 0 ;
  background:#999;
  display:inline;
  padding:0px 2vw;
  border:0px solid #ccc;
  border-radius:1vw;
  color:#FFF;
  float:left;
    margin:4vw 0 0 0;


}

  .typeConducteur{
  position:absolute;
  top:220px;
  background:#eee url('../img/icos/ico-auto-vert-1.png');
  background-size:40px;
  background-position:10px  center;
  background-repeat:no-repeat;
  height:40px;
  padding:10px 10px 10px 60px;
  border:1px solid #ccc;
  line-height:40px;
  border-radius:5px !important;
text-transform:uppercase;
    width:calc(100% - 70px) !important;
    float:left;
}

  .typePassager{
   position:absolute;
  top:220px;
  background:#eee url('../img/icos/ico-people-vert.svg');
  background-size:40px;
  background-position:10px  center;
  background-repeat:no-repeat;
  height:40px;
  padding:10px 10px 10px 60px;
  border:1px solid #ccc;
  line-height:40px;
  border-radius:5px !important;
text-transform:uppercase;
    width:calc(100% - 70px) !important;
    float:left;
}

  .covoiturageAR
{
  float:left;
  width:100%;
  margin:0 0 10px;
  text-align:center;
}


.covoiturageAller
{

  margin: 4vw 0 0;
  width:100%;
border:1px solid #ccc;

  background:#eee;
}
.covoiturageRetour
{

  margin: 4vw 0;
  width:100%;
border:1px solid #ccc;
}

.covoiturageAR div
{
display:inline-block;
  background:#31BA9C;
  color:#fff;
  float:right;
  width:100%;
  padding:5px 0;
  text-align:center;
}

.covoiturage .ui-tabs .tabsSelect {
    width: 100% !important;
    margin: 0 0 6vw;
    height: auto;
    overflow-y: scroll;
    padding: 0;
}

.tabsSelect li{
  display:block;
  width:100%;
  text-align:center !important;
  background:white !important;
   border:0px solid #EEE !important;
  border-radius: 0 0 ;
  height:auto;
}


.tabsSelect li a{
  display:block;
  width:100%;
  text-align:center !important;
  min-height:auto !important;
  line-height:auto;
  padding:2vw 0 !important;
}

.tabsSelect .ui-state-active{

  background:white !important;
 border:0 solid #DDD !important;
  border-bottom:none !important;

}

.tabsSelect .ui-state-active a{
font-size:1.2em;
  font-weight:bold;
}

  #solidaireTabs {
    border-top: 0px solid #ddd !important;
}

}