@charset "utf-8";

/*########################*/
/*########################*/
/* ATCHOUM C.S.S. V1.0.4  */
/*##### STYLE WIDGET #####*/
/*########################*/
/*########################*/


/* ELEMENTS STANDARDS  --------------------------
--------------
---------
*/

html {
background-color:#14456b;
}

body {
 font-family: Abel, Helvetica, Arial, sans-serif;
 font-size: 18px;
 position: relative;
 color: #000;

}

body.bodyBleuClair {
 background-color: #EBF1F3;
}

a {
 text-decoration: none;
 color: #999;
 -webkit-user-select: none !important;
}

a:hover {
 text-decoration: none;
 color: #69919d;
}

h1,
h2,
h3,
h4 {
 color: #14456B;
 font-weight: normal;
}

H1 {
 font-weight: normal;
 text-transform: normal;
 margin: 20px 0 0 ;
 font-size: 40px;
 !important margin: 10px 0 !important;
 padding: 0 !important;
}

h3 {
 font-weight: normal;
 font-size: 28px;
}

h4 {
 font-weight: normal;
 font-size: 24px;
}

fieldset {
 border: none;
 margin: 0;
 padding: 0;
}

label {
 cursor: pointer;
}

hr {
 clear: both;
 width: 100%;
 border: none;
 border-top: 1px solid #ccc;
}


/* ELEMENTS COMMUNS  --------------------------
--------------
---------
*/

.ico-infos {
 display: none;
}

.connexion {
 cursor: pointer;
}

.txt-noir {
 color: #000 !important;
}

.txt-blanc {
 color: #fff;
}

.txt-gris-clair {
 color: #999;
}

.txt-vert {
 color: #37b397;
}

.txt-orange {
 color: #E3A52D;
}

.txt-orange2
{
color:#F9A26F;
 
}
.txt-violet {
 color: #4E51A3;
}

.txt-rouge {
 color: #dd0c1e;
}

.txt-bleu {
 color: #14456B;
}

.txt-bleu-clair {
 color: #469AB4;
}

.txt-gras {
 font-weight: bold;
}

.txt-capital {
 text-transform: uppercase;
}

.font-abel {
 font-family: Abel;
}

.font-wasted {
 font-family: Wasted;
}

.fond-violet {
 background: #4E51A3;
}

.fond-vert {
 background: #37b397;
}

.fond-orange {
 background: #E3A52D;
}

.fond-rouge {
 background: #dd0c1e !important;
}

.fond-bleu {
 background: #14456B;
}

.fond-bleu-clair {
 background: #469AB4;
}

.fond-gris {
 background: #AEB0B4;
}

.fond-gris-clair {
 background: #E8E8E9;
 background-position: 50% 75%;
}

.marginAuto {
 display: block;
 margin: auto;
}

.clear {
 clear: both;
}

.float-left {
 float: left;
}

.float-right {
 float: right;
}

.txt-centre {
 text-align: center;
}

.txt-gauche {
 text-align: left;
}

.txt-droite {
 text-align: right;
}

.txt-XXS {
 font-size: 0.4em;
}

.txt-XS {
 font-size: 0.6em;
}

.txt-S {
 font-size: 0.8em;
}

.txt-L {
 font-size: 1.25em;
}

.txt-XL {
 font-size: 1.5em;
}

.txt-XXL {
 font-size: 2em;
}

.ico-point-rouge,
.ico-point-vert {
 width: 25px;
 height: auto;
}

.ico-distance,
.ico-prix,
.ico-duree {
 width: 35px;
 height: auto;
}

.ico-big {
 font-size: 8vw;
}

.hrCCC {
 margin: 20px 0 0;
}









/* DATEPICKER / TIMEPICKER / DIALOG */
div[aria-describedby*="dialogConnexion"] {
 position: absolute;
 left: calc(50% - 155px) !important;
  top: calc(10% - 100px) !important; 
}
.ui-widget {
 font-family: Abel, Arial, sans-serif !important;
 background-color: #e1eaf1;
}
.ui-dialog {

}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
 font-family: abel, Arial, sans-serif;
 font-size: 1em;
}
.ui_tpicker_second_slider,
.ui_tpicker_millisec_slider,
.ui_tpicker_microsec_slider,
.ui_tpicker_second_label,
.ui_tpicker_millisec_label,
.ui_tpicker_microsec_label,
.ui_tpicker_timezone,
.ui_tpicker_timezone_label {
 display: none;
}
.ui_tpicker_hour_slider,
.ui_tpicker_minute_slider {
 margin: 0.5vw 2vw;
}
.ui-datepicker-title,
.ui-widget-header {
 color: #000;
 border: none;
 background: #fff !important;
 font-size: 22px !important;
}
.ui-timepicker-div {}
.ui-timepicker-div {
 color: #888;
 text-align: center;
 background: #E1EAF1 !important;
 border: 0;
 font-size: .7em;
 z-index: 5000 !important;
}
.ui-datepicker {
 width: 1 !important;
 z-index: 5000 !important;
}
.ui-datepicker table {
 font-size: 14px !important;
}
.ui-timepicker-div {
 width: auto !important;
}
.ui-timepicker-div input {
 width: 100%;
 color: #000;
 font-family: abel;
 font-size: 22px;
 padding: 0;
 margin: 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
 border: 1px solid #d3d3d3;
 background: #AEB0B4;
 font-weight: normal;
 color: #fff;
}
.ui-datepicker-today {
 color: #333 !important;
}
.ui-state-highlight {
 border: 1px solid white !important;
 background: #fff !important;
 font-weight: bold !important;
 color: #333 !important;
}
ui-datepicker-today"
 .ui_tpicker_time,
.ui_tpicker_hour,
.ui_tpicker_minute {
 margin: 0;
}
.ui_tpicker_time_label,
.ui-datepicker-current {
 display: none !important;
}
.ui-datepicker .ui-datepicker-buttonpane button {
 float: none;
 margin: .5em auto .4em;
 cursor: pointer;
 padding: .2em .6em .3em .6em;
 width: auto;
 display: block;
 overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button {
 font-family: Abel, Arial, sans-serif;
 font-size: 18px
}
.ui-datepicker .ui-datepicker-title select {
 font-size: 0.8em;
 margin: 1px 0;
 width: 50%;
}

/* AJOUTER CODES POSTAUX  */
.complete {
 background: #ccc;
}
.complete:after {
 content: " X"
}
.listeCP li {
 width: auto;
 float: left;
 border: 1px solid #ccc;
 border-radius: 5px;
 padding: 0 5px;
}

/* VALIDATION FORMULAIRE APPARENCE */
.ligne-form {
 position: relative;
}
input.error {
 border: 1px solid red !important;
 color: red !important;
}
label.error {
 display: none !important;
 width: 100px;
 padding: 0 5px;
 background: #eee;
 font-size: .8em;
 position: relative;
 border-radius: 5px;
 box-shadow: 0 1px 3px #ccc;
 z-index: 5000;
 margin: auto;
}
#a_pf-btn-mask-Pass {
 left: auto !important;
 right: 40px;
}
#a_pf-warn-Pass {
 background: #eee;
 width: 93%;
 margin: auto !important;
 display: block !important;
}
.error::before {
 display: none;
}
.error::before:hover {
 border: none !important;
}


 
  
  
 
 #header-form form {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0;
  text-align: center;
 }
 



#header-form-titre {
 font-family: Wasted;
 font-size: 8vw;
 color: #FFF;
 max-width: 100%;
 text-transform: normal;
 margin: 0 auto 2vw auto;
 padding: 0 0 0 ;
  width:100%;
  text-align:center;
}

.logo{width:60%;
margin:auto;
display:block;
transform:rotate(-6deg);}

.logo img
{
  width:100%;
}
 .inputHeaderOuter {
  position: relative;
  display: block;
  z-index: 1;
  margin: 0 auto 5vw;
  height: 10vw;
  width: calc(100% - 10vw);
 }
 
 
 #header-form .header-form-inputs {
  width: calc(100% - 9vw)!important;
  font-size: 6vw;
  border-radius: 1vmin;
  padding: 0 0 0 9vw;
  border: none;
  font-family: abel;
  display: inline-block;
  margin: 0 auto 5vw;
  float: none;
  height: 10vw;
 }
 
 #header-form .header-form-demi-input {
  width: calc(100% - 19vw) !important;
  padding: 0 0 0 9vw;
  height: 10vw;
 }
 
 #demi-input-container {
  background: #fff;
  border-radius: 8px;
 }
 
 #header-form-depart,
 #autocompleteDepart,
 #autocomplete {
  background: #fff url('../img/icos/ico-point-vert.svg');
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: 5px center;
 }
 
 #header-form-arrive,
 #autocompleteArrivee,
 #autocomplete2 {
  background: #fff url('../img/icos/ico-point-rouge.svg');
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: 5px center;
 }
 
 #header-form-date {
  background: #fff url('../img/icos/ico-date.svg');
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 5px center;
 }
 
 #header-form-heure {
  background: #fff url('../img/icos/ico-heure.svg');
  background-size: 15%;
  background-repeat: no-repeat;
  background-position: 5% 50%;
 }
 
 #header-form #header-form-submit {
  width: calc(100% - 10vw) !important;
  padding: 1vw 1vw 1vw 9vw;
  border: none;
  font-family: Wasted;
  margin: auto;
  font-size: 6vw;
  border-radius: 1vmin;
  padding: 1vw 1vw 1vw 9vw;
 }
 
 .spinnerHeader {
  display: none;
  position: absolute;
  width: 8vw;
  right: 8%;
  bottom: 0;
 }
 
 /* JQUERY UI */
 
 div[aria-describedby*="dialogConnexion"] {
  position: relative;
  left: 0 !important;
  top: 2vw !important;
 }
 
 .ui-widget {
  font-family: Abel, Arial, sans-serif !important;
  background-color: #fff;
  width: 100vw !important;
  margin: auto !important;
 }
 
 .ui-dialog,
 .ui-datepicker,
 .ui-timepicker-div {
  position: fixed !important;
  height: auto;
  width: 95% !important;
  top: 2vw !important;
  left: 0% !important;
  margin: 1vh !important;
 }
 
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
  border: 1px solid #d3d3d3;
  background: #0B2E49;
  font-weight: normal;
  color: #fff;
 }
 
 .ui-state-highlight {
  border: 1px solid white !important;
  background: #E3A52D !important;
  font-weight: bold !important;
  color: #333 !important;
 }
 
 .ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 1vw;
  top: 1vw;
  width: 4vh !important;
  margin: 0 0 0 0;
  padding: 1px;
  height: 4vh;
 }