@import url(https://fonts.googleapis.com/css?family=Oxygen:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Libre+Franklin:400,400i,600,600i);



body,
input,
textarea,
.mbr-company .list-group-text,
.mbr-section-text {
  font-family: 'Libre Franklin', serif;
}
.mbr-footer-content li,
.mbr-footer .mbr-contacts li {
  font-family: 'Libre Franklin', serif;
}
.alert,
h1,
h2,
h3,
h4,
h5,
h6,
.mbr-figure .mbr-figure-caption,
.mbr-gallery-title,
.mbr-map [data-state-details],
.mbr-price,
.mbr-section-title {
  font-family: 'Oxygen', sans-serif;
}
.btn {
  font-family: 'Libre Franklin', serif;
}
.mbr-footer-content h1,
.mbr-footer .mbr-contacts h1,
.mbr-footer-content h2,
.mbr-footer .mbr-contacts h2,
.mbr-footer-content h3,
.mbr-footer .mbr-contacts h3,
.mbr-footer-content h4,
.mbr-footer .mbr-contacts h4,
.mbr-footer-content p strong,
.mbr-footer .mbr-contacts p strong,
.mbr-footer-content strong,
.mbr-footer .mbr-contacts strong {
  font-family: 'Oxygen', sans-serif;
}
.btn:not(.btn-social) {
  border-radius: 30px;
   /*padding: 17px 50px;*/
  padding: 10px 40px;
  font-size: 14px;
}
.mbr-subscribe .btn {
  border-radius: 1.6em !important;
}
.btn-sm,
.mbr-section-hero .mbr-section-lead,
.mbr-cards .card-subtitle,
.mbr-testimonial .card-block,
.mbr-section-subtitle {
  font-family: 'Libre Franklin', serif;
  font-style: normal;
}
.mbr-author-name {
  font-family: 'Oxygen', sans-serif;
}
.mbr-author-desc {
  font-family: 'Libre Franklin', serif;
  font-style: normal;
}
.mbr-plan-title {
  font-family: 'Oxygen', sans-serif;
}
.mbr-plan-subtitle,
.mbr-plan-price-desc {
  font-family: 'Libre Franklin', serif;
  font-style: normal;
}
.bg-primary {
  background-color: #16a085 !important;
}
.bg-success {
  background-color: #1e7c3a !important;
}
.bg-info {
  background-color: #74a3c7 !important;
}
.bg-warning {
  background-color: #ffd785 !important;
}
.bg-danger {
  background-color: #ff9685 !important;
}
.btn-primary {
  background-color: #16a085;
  border-color: #16a085;
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active {
  color: #ffffff;
  background-color: #3e7b6c;
  border-color: #3e7b6c;
}
.btn-primary.disabled,
.btn-primary:disabled {
  color: #ffffff !important;
  background-color: #3e7b6c !important;
  border-color: #3e7b6c !important;
}
.btn-secondary {
  background-color: #a25dae;
  border-color: #a25dae;
  color: #ffffff;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:active,
.btn-secondary.active {
  color: #ffffff;
  background-color: #763f7f;
  border-color: #763f7f;
}
.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #ffffff !important;
  background-color: #763f7f !important;
  border-color: #763f7f !important;
}
.btn-info {
  background-color: #74a3c7;
  border-color: #74a3c7;
  color: #ffffff;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active {
  color: #ffffff;
  background-color: #447eaa;
  border-color: #447eaa;
}
.btn-info.disabled,
.btn-info:disabled {
  color: #ffffff !important;
  background-color: #447eaa !important;
  border-color: #447eaa !important;
}
.btn-success {
  background-color: #1e7c3a;
  border-color: #1e7c3a;
  color: #ffffff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active {
  color: #ffffff;
  background-color: #0f3e1d;
  border-color: #0f3e1d;
}
.btn-success.disabled,
.btn-success:disabled {
  color: #ffffff !important;
  background-color: #0f3e1d !important;
  border-color: #0f3e1d !important;
}
.btn-warning {
  background-color: #ffd785;
  border-color: #ffd785;
  color: #ffffff;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active {
  color: #ffffff;
  background-color: #ffbe38;
  border-color: #ffbe38;
}
.btn-warning.disabled,
.btn-warning:disabled {
  color: #ffffff !important;
  background-color: #ffbe38 !important;
  border-color: #ffbe38 !important;
}
.btn-danger {
  background-color: #ff9685;
  border-color: #ff9685;
  color: #ffffff;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active {
  color: #ffffff;
  background-color: #ff5438;
  border-color: #ff5438;
}
.btn-danger.disabled,
.btn-danger:disabled {
  color: #ffffff !important;
  background-color: #ff5438 !important;
  border-color: #ff5438 !important;
}
.btn-primary-outline {
  background: none;
  border-color: #366a5e;
  color: #366a5e;
}
.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-primary-outline.focus,
.btn-primary-outline:active,
.btn-primary-outline.active {
  color: #ffffff;
  background-color: #16a085;
  border-color: #16a085;
}
.btn-primary-outline.disabled,
.btn-primary-outline:disabled {
  color: #ffffff !important;
  background-color: #16a085 !important;
  border-color: #16a085 !important;
}
.btn-secondary-outline {
  background: none;
  border-color: #66376e;
  color: #66376e;
}
.btn-secondary-outline:hover,
.btn-secondary-outline:focus,
.btn-secondary-outline.focus,
.btn-secondary-outline:active,
.btn-secondary-outline.active {
  color: #ffffff;
  background-color: #a25dae;
  border-color: #a25dae;
}
.btn-secondary-outline.disabled,
.btn-secondary-outline:disabled {
  color: #ffffff !important;
  background-color: #a25dae !important;
  border-color: #a25dae !important;
}
.btn-info-outline {
  background: none;
  border-color: #3d7198;
  color: #3d7198;
}
.btn-info-outline:hover,
.btn-info-outline:focus,
.btn-info-outline.focus,
.btn-info-outline:active,
.btn-info-outline.active {
  color: #ffffff;
  background-color: #74a3c7;
  border-color: #74a3c7;
}
.btn-info-outline.disabled,
.btn-info-outline:disabled {
  color: #ffffff !important;
  background-color: #74a3c7 !important;
  border-color: #74a3c7 !important;
}
.btn-success-outline {
  background: none;
  border-color: #0a2a14;
  color: #0a2a14;
}
.btn-success-outline:hover,
.btn-success-outline:focus,
.btn-success-outline.focus,
.btn-success-outline:active,
.btn-success-outline.active {
  color: #ffffff;
  background-color: #1e7c3a;
  border-color: #1e7c3a;
}
.btn-success-outline.disabled,
.btn-success-outline:disabled {
  color: #ffffff !important;
  background-color: #1e7c3a !important;
  border-color: #1e7c3a !important;
}
.btn-warning-outline {
  background: none;
  border-color: #ffb61f;
  color: #ffb61f;
}
.btn-warning-outline:hover,
.btn-warning-outline:focus,
.btn-warning-outline.focus,
.btn-warning-outline:active,
.btn-warning-outline.active {
  color: #ffffff;
  background-color: #ffd785;
  border-color: #ffd785;
}
.btn-warning-outline.disabled,
.btn-warning-outline:disabled {
  color: #ffffff !important;
  background-color: #ffd785 !important;
  border-color: #ffd785 !important;
}
.btn-danger-outline {
  background: none;
  border-color: #ff3e1f;
  color: #ff3e1f;
}
.btn-danger-outline:hover,
.btn-danger-outline:focus,
.btn-danger-outline.focus,
.btn-danger-outline:active,
.btn-danger-outline.active {
  color: #ffffff;
  background-color: #ff9685;
  border-color: #ff9685;
}
.btn-danger-outline.disabled,
.btn-danger-outline:disabled {
  color: #ffffff !important;
  background-color: #ff9685 !important;
  border-color: #ff9685 !important;
}
.text-primary {
  color: #16a085 !important;
}
.text-success {
  color: #1e7c3a !important;
}
.text-info {
  color: #74a3c7 !important;
}
.text-warning {
  color: #ffd785 !important;
}
.text-danger {
  color: #ff9685 !important;
}
.alert-success {
  background-color: #1e7c3a;
}
.alert-info {
  background-color: #74a3c7;
}
.alert-warning {
  background-color: #ffd785;
}
.alert-danger {
  background-color: #ff9685;
}
.mbr-company .list-group-item.active .list-group-text {
  color: #16a085;
}
.mbr-footer p a,
.mbr-footer ul a {
  color: #16a085;
}
.mbr-footer-content li::before,
.mbr-footer .mbr-contacts li::before {
  background: #16a085;
}
.mbr-footer-content li a:hover,
.mbr-footer .mbr-contacts li a:hover {
  color: #16a085;
}
.lead a,
.lead a:hover {
  color: #16a085;
}
.lead blockquote {
  border-color: #16a085;
}
.mbr-plan-header.bg-primary .mbr-plan-subtitle,
.mbr-plan-header.bg-primary .mbr-plan-price-desc {
  color: #afd7cd;
}
.mbr-plan-header.bg-success .mbr-plan-subtitle,
.mbr-plan-header.bg-success .mbr-plan-price-desc {
  color: #47d271;
}
.mbr-plan-header.bg-info .mbr-plan-subtitle,
.mbr-plan-header.bg-info .mbr-plan-price-desc {
  color: #cfdfec;
}
.mbr-plan-header.bg-warning .mbr-plan-subtitle,
.mbr-plan-header.bg-warning .mbr-plan-price-desc {
  color: #ffffff;
}
.mbr-plan-header.bg-danger .mbr-plan-subtitle,
.mbr-plan-header.bg-danger .mbr-plan-price-desc {
  color: #ffffff;
}
.mbr-small-footer a,
.mbr-gallery-filter li:hover {
  color: #000;
}
.scrollToTop_wraper {
  display: none;
}
/* DirectM */
a {
  color: #74a3c7;
}
a:hover {
  color: #333;
}
/*header1*/
.header1 .mbr-arrow a i {
  color: #ffffff;
}
.header1 .mbr-arrow a:hover i {
  color: #16a085;
}
/*header2*/
.header1.header2 .mbr-arrow a i {
  color: #222222;
}
.header1.header2 .mbr-arrow a:hover i {
  color: #16a085;
}
/*features1*/
.features1 .carousel-indicators li.active {
  border: 5px solid #16a085;
}
/*features12*/
.features12 .card .mbr-iconfont,
.features14 .card .mbr-iconfont,
.features16 .card .mbr-iconfont {
  font-family: 'Oxygen', sans-serif;
}
/*msg-box1*/
.msg-box1 ul li:before {
  background-color: #16a085;
}
.msg-box1 .round-block {
  background: linear-gradient(45deg, #4c9784, #16a085, #7cbdad);
}
/*tabs1*/
.tabs1 ul li a.active {
  border-bottom-color: #16a085 !important;
}
.tabs1 .tab-list-wraper ul li:before {
  background-color: #16a085;
}
.tabs1 .colorBG {
  background-color: #16a085;
}
/*content*/
.content2 blockquote {
  border-left: 3px solid #16a085;
}
.content4 p {
  border-bottom: 3px solid #16a085;
  border-top: 3px solid #16a085;
}
/*follow1*/
.follow1 .btn-social {
  color: #16a085;
  border-color: #16a085;
}
.follow1 .btn-social:hover {
  color: #7cbdad;
  background: rgba(90, 172, 152, 0.1);
  border-color: #7cbdad;
}
/*share1*/
.share1 .btn-social {
  color: #16a085;
  border-color: #16a085;
}
.share1 .btn-social:hover {
  color: #7cbdad;
  background: rgba(90, 172, 152, 0.1);
  border-color: #7cbdad;
}
/* Slider */
.mbr-slider .carousel-indicators .active {
  background-color: #16a085;
}
/* Gallery */
.mbr-gallery-filter ul li {
  font-family: 'Libre Franklin', serif;
}
.mbr-gallery-filter li {
  color: #74a3c7;
}
.btn-empty:focus {
  color: #16a085;
}
/* captions */
.mbr-figure-caption {
  background-color: #616161;
  color: #fff;
}
/* tabs1 */
.tabs1 ul li a {
  color: #74a3c7;
}
/*tabs3*/
.tabs3 .nav-tabs .nav-link.active {
  border: 5px solid #16a085;
}
/* testimonials1*/
.testimonials1 .carousel-indicators li.active {
  border: 5px solid #16a085;
}
.hamburger-icon {
  background-color: #16a085 !important;
}
.hamburger-icon:before {
  background-color: #16a085;
}
.hamburger-icon:after {
  background-color: #16a085;
}
.modal-body-form{
	background-color: #eee;
    padding: 20px;
    border-radius: 10px
}
.imgBtn {
    color: #999;
    cursor: pointer;
}
.imgBtn:hover {
    color: #16a085;
}
img {
    object-fit: cover;
	filter: brightness(1.1);
}
.input-container {
    padding: 30px;
    border-radius: 10px;
    background-color: #FFF;
}

.input-container-modal-form {
    padding: 30px;
    border-radius: 10px;
    background-color: #eee;
	border:1px solid #aaa;
}

.promo-background{
	border-radius:10px;
	background-repeat: no-repeat, repeat;
	background-size: cover;
	//background-image: linear-gradient(to left, transparent 0%, black 125%), url("/assets/images/promo_bg.jpg");
	color: #fff;
}

/*----------debut global custom css----------*/


.btn-large-onmobile{
	width:auto;
}

@media only screen and (max-width: 768px) {
	.btn-large-onmobile{
		width:100%;
	}
}

/*----------fin global custom css----------*/


#menu1-7g {
  /*---------- Debut Depart en vu css ----------*/
  /*---------- Fin Depart en vu css ----------*/
  /*---------- Debut mise en forme Modal ---------*/
  /*---------- Fin mise en forme Modal ---------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Mise en forme voyage en vu ----------*/
  /*---------- Fin Mise en forme voyage en vu ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut CSS image ----------*/
  /*---------- Fin CSS  image ----------*/
}
#menu1-7g .menu1 .nav-btn {
  width: auto;
}
#menu1-7g .hide-buttons .nav-btn {
  display: none !important;
}
#menu1-7g .navbar-toggler {
  color: #74a3c7;
}
#menu1-7g .close-icon::before,
#menu1-7g .close-icon::after {
  background-color: #000;
}
#menu1-7g .link,
#menu1-7g .dropdown-item {
  color: #000000;
  font-family: 'Libre Franklin', serif;
}
#menu1-7g .link {
  font-size: 0.8125rem;
}
#menu1-7g .dropdown-item,
#menu1-7g .nav-dropdown-sm .link {
  font-size: 0.880rem;
}
#menu1-7g .link:hover,
#menu1-7g .link:focus {
  color: #16a085;
}
#menu1-7g .dropdown-item:hover::before,
#menu1-7g .dropdown-item:focus::before {
    /*background: #16a085;*/
}
#menu1-7g .dropdown-item:hover,
#menu1-7g .dropdown-item:focus {
  color: #fff;
  background-color:#16a085;
}
#menu1-7g .link[aria-expanded="true"],
#menu1-7g .dropdown-menu {
  background: #fff;
  border-radius:10px;
}
#menu1-7g .nav-dropdown-sm .link:focus,
#menu1-7g .nav-dropdown-sm .link:hover,
#menu1-7g .nav-dropdown-sm .dropdown-item:focus,
#menu1-7g .nav-dropdown-sm .dropdown-item:hover {
    color: #fff !important;
    background-color: #16a085 !important;
}
#menu1-7g .navbar,
#menu1-7g .nav-dropdown-sm,
#menu1-7g .nav-dropdown-sm .link[aria-expanded="true"],
#menu1-7g .nav-dropdown-sm .dropdown-menu {
  background: #fff;
}
#menu1-7g .bg-color.transparent .link {
  color: #16a085;
  transition: none;
}
#menu1-7g .bg-color.transparent.opened .link {
  transition: color 0.2s ease-in-out;
}
#menu1-7g .bg-color.transparent.opened .link:hover,
#menu1-7g .bg-color.transparent.opened .link:focus {
    color: #16a085;
}
#menu1-7g .link[aria-expanded="true"],
#menu1-7g .dropdown-item[aria-expanded="true"] {
  color: #16a085!important;
}
#menu1-7g .dynamic-badge {
  position: relative;
}
#menu1-7g .dynamic-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -15px;
  right: -3px;
  font-size: 11px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 23px;
  background: red;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}
#menu1-7g .modal.in .modal-dialog {
  position: fixed;
  bottom: 0px;
  right: 0px;
  margin: 0px;
}

#menu1-7g .top-depart-en-vu-mobile{
  display:none;
}

#menu1-7g .badge {
    box-sizing: border-box;
    display: none;
    background-color: #2c3e50;
    color: #ffffff; 
    border-radius: 3rem;  /*As longe as this is bigger than the fontsize*/
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    padding: .1rem .7rem .1rem .8rem;
    line-height: inherit;
}
#menu1-7g .badge--line {
    background-color: transparent;
    color: #95a5a6;
    box-shadow: 0 0 0 1px #95a5a6;
}
#menu1-7g .badge--info {
    background-color: #3498db;
}
#menu1-7g .badge--warning {
    background-color:#f1c40f;
}
    #menu1-7g .badge--danger {
        background-color: #16a085;
    }
#menu1-7g .badge--success {
    background-color: #2ecc71;
}
#menu1-7g .badge--small {
    font-size: 1.2rem;
    padding: .1rem .65rem .2rem;
}
#menu1-7g .badge--smaller {
    font-size: .7rem;
    /*padding: .05rem .4rem .15rem;*/
}

#menu1-7g #availableSearch{
  position:absolute;
  bottom:10px; 
  left:10px;
}

@media only screen and (max-width: 768px) {
    #menu1-7g .badge {
       position:absolute;
       top:10px;
    }
}

@media only screen and (max-width: 768px) {
  #menu1-7g .btn-nav {
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: .375rem 1.6rem;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 1.4rem;
    transition: all .2s ;
  }
  #menu1-7g .tab-driver {
    display: none;
  }
  #menu1-7g .label-price-to-left {
    float: left;
  }
#menu1-7g .modalMobileWidth{
  width:100%;
}
#menu1-7g .top-depart-en-vu-mobile{
  display:inline;
}
#menu1-7g .cieName{
  font-size:12px;
}
#menu1-7g .navbar-toggler{
  color:#000;
}

#menu1-7g #availableSearch{
  position: relative;
  top: -10px;
  left: -22px;
}

}


#menu1-7g .voyageEnVu {
  border-top:1px solid #DDD;
  border-bottom:1px solid #DDD;
}
#menu1-7g .voyageEnVu:hover {
  cursor: pointer;
  background-color: #FFF;
}
#menu1-7g [data-title] {
    position: relative;
}
#menu1-7g [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#menu1-7g [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
#menu1-7g .info,
#menu1-7g .success,
#menu1-7g .warning,
#menu1-7g .error,
#menu1-7g .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#menu1-7g .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#menu1-7g .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#menu1-7g .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#menu1-7g .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#menu1-7g .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#menu1-7g .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#menu1-7g .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#menu1-7g .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#menu1-7g .img-content:hover .deleteColorImg {
  display: inline-block;
}
#menu1-7g .img-content {
  display: inline-block;
  position: relative;
}
#menu1-7g .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#menu1-7g .deleteColorImg:hover {
  color: green;
}
#menu1-7g .deleteColorImg {
  color: #333;
  display: none;
}
#menu1-7g .image-empty {
  border: 2px red solid;
}

#menu1-7g .supprimerItem {
  color:#333; 
  cursor:pointer; 
  /*padding:20px 0;*/
}

    #menu1-7g .supprimerItem:hover {
        /*text-decoration: underline;*/
        color: red;
    }

#custom-html-52 {
  
  /*---------- Debut mise en forme step ----------*/
  /* Make circles that indicate the steps of the form: */
  /* Mark the steps that are finished and valid: */
  /*---------- Fin mise en forme step ----------*/
  /*---------- Debut mise en forme input ----------*/
  /* LABEL ======================================= */
  /* active state */
  /* BOTTOM BARS ================================= */
  /* active state */
  /* HIGHLIGHTER ================================== */
  /* active state */
  /* ANIMATIONS ================ */
  /*---------- Fin mise en forme input ----------*/
  /*----------Debut bouton Devenir conducteur ----------*/
  /*---------- Fin bouton devenir conducteur ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut centrage de tous les modalbox ----------*/
  /*---------- Fin centrage de tous les modalbox ----------*/
  /*---------- Debut CSS upload image ----------*/
  /*---------- Fin CSS image ----------*/
  /*---------- Debut mise en forme placeholder ----------*/
  /*---------- Fin mise en forme placeholder ----------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- debut Button desactive ----------*/
  /*---------- fin Button desactive ----------*/
  /*---------- Debut Css recap table ----------*/
  /*---------- Fin Css recap table ----------*/
}
#custom-html-52 .mbr-section-title,
#custom-html-52 .mbr-section-subtitle {
  margin-bottom: 1rem;
  color: #ffffff;
}
#custom-html-52 .heading-title {
  text-align: left;
  font-size: 60px;
}
#custom-html-52 .heading-text {
  text-align: left;
  font-family: 'Oxygen', sans-serif;
}

#custom-html-52 #devenirConducteurForm {
  display: none;
}
#custom-html-52 .tab {
  display: none;
}
#custom-html-52 .step {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #ccc;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
    #custom-html-52 .step.activestep {
        opacity: 1;
        background-color: green;
    }
#custom-html-52 .step.finish {
  background-color: green;
}
#custom-html-52 .group {
  position: relative;
}
    #custom-html-52 input {
        font-size: 12px;
        padding: 10px 8px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #999999;
		background-color: inherit;
    }
#custom-html-52 input:focus {
  outline: none;
}
#custom-html-52 label {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-52 input:focus ~ label,
#custom-html-52 input:valid ~ label {
  top: -10px;
  font-size: 12px;
  /*color: black;*/
}
#custom-html-52 .bar {
  position: relative;
  display: block;
  width: 100%;
}
#custom-html-52 .bar:before,
#custom-html-52 .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: green;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-52 .bar:before {
  left: 50%;
}
#custom-html-52 .bar:after {
  right: 50%;
}
#custom-html-52 input:focus ~ .bar:before,
#custom-html-52 input:focus ~ .bar:after {
  width: 50%;
}
#custom-html-52 .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
#custom-html-52 input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
@-webkit-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-moz-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
#custom-html-52 .input-group {
  display: table;
  width: 100%;
}
#custom-html-52 .input-group > * {
  display: table-cell;
  width: 50%;
}
 #custom-html-52 .arrow-nav-top-left {
    font-size:20px; 
    cursor: pointer;
    color: #16a085;
    position:absolute;
    top:50%;
    transform:translate(0%,-50%);
    -ms-transform:translate(-0%,-50%);
    left:2%; 
    border:none;
    display:inline-block;
    padding:16px 20px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    white-space:nowrap; 
    background-color:#EEE;
  }
 #custom-html-52 .arrow-nav-top-right {
    font-size:20px; 
    cursor: pointer;
    color: #16a085;
    position:absolute;
    top:50%;
    transform:translate(0%,-50%);
    -ms-transform:translate(0%,-50%); 
    right:2%; 
    border:none;
    display:inline-block;
    padding:16px 20px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    white-space:nowrap; 
    background-color:#EEE;
  }
@media only screen and (max-width: 768px) {
  #custom-html-52 .devenirConducteur {
    width: 100%;
  }

  #custom-html-52 .arrow-nav-top-left {
    font-size:20px; 
    cursor: pointer;
    color: #16a085;
    position:absolute;
    top:90%;
    transform:translate(0%,-50%);
    -ms-transform:translate(-0%,-50%);
    left:2%; 
    border:none;
    display:inline-block;
    padding:16px 20px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    white-space:nowrap; 
    background-color:#EEE;
  }
 #custom-html-52 .arrow-nav-top-right {
    font-size:20px; 
    cursor: pointer;
    color: #16a085;
    position:absolute;
    top:90%;
    transform:translate(0%,-50%);
    -ms-transform:translate(0%,-50%); 
    right:2%; 
    border:none;
    display:inline-block;
    padding:16px 20px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    white-space:nowrap; 
    background-color:#EEE;
  }
}
#custom-html-52 .info,
#custom-html-52 .success,
#custom-html-52 .warning,
#custom-html-52 .error,
#custom-html-52 .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-52 .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-52 .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-52 .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-52 .error {
  color: #D8000C;
  background-color: #FFBABA;
}
@media (min-width: 768px) {
  #custom-html-52 .modal {
    text-align: center;
  }
  #custom-html-52 .modal:before {
    content: '';
    height: 100%;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
  }
  #custom-html-52 .modal .modal-dialog {
    text-align: left;
    margin: 10px auto;
    display: inline-block;
    vertical-align: middle;
  }
}
#custom-html-52 .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-52 .image-input:hover {
  opacity: 0.3;
  cursor: pointer;
  filter: alpha(opacity=30);
}
#custom-html-52 .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-52 .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-52 .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-52 .img-content:hover .deleteColorImg {
  display: inline-block;
}
#custom-html-52 .img-content {
  display: inline-block;
  position: relative;
}
#custom-html-52 .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#custom-html-52 .deleteColorImg:hover {
  color: green;
}
#custom-html-52 .deleteColorImg {
  cursor: pointer;
  color: #333;
  display: none;
}
#custom-html-52 .imgBtn {
  color: #999;
  cursor: pointer;
}
#custom-html-52 .imgBtn:hover {
  color: #16a085;
}
#custom-html-52 .image-empty {
  border: 2px solid red;
}
#custom-html-52 .focusedOnImg {
  border: 3px solid green;
}
#custom-html-52 ::-webkit-input-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-52 input:focus::-webkit-input-placeholder {
  opacity: 1;
  color: red;
  font-size: 12px;
}
#custom-html-52 .headerSlides {
    display: none;
    height: 420px;
    background: no-repeat center center fixed;
    background-size: cover;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
}
#custom-html-52 .indicatorHeaderSlide {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#custom-html-52 .indicatorHeaderSlide:hover {
  color: #000!important;
  background-color: #16a085!important;
}
#custom-html-52 .active-indicatorHeaderSlide {
  background-color: #16a085;
}

#custom-html-52 .arrow-nav:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
#custom-html-52 .arrow-nav:active {
  color: #16a085;
  background-color: inherit;
}
#custom-html-52 .section-custom-html-52{
  padding-top: 50px; 
  padding-bottom: 0px; 
  background-attachment: fixed; 
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
}
#custom-html-52 .arrowIndicator{
  display:none;
}

#custom-html-52 .indicatorHeaderSlide-div {
    text-align: center;
    margin-top: -30px;
}

@media only screen and (max-width: 768px) {
    #custom-html-52 .headerSlides {
    height: 600px;
    display: table;
    padding-bottom: 0;
    padding-top: 0;
    table-layout: fixed;
    width: 100%; 
  }
}

@media only screen and (max-width: 768px) {
    #custom-html-52 .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
  
  #custom-html-52 .headerSlides {
    display: table;
    /*height: 100vh;*/
    padding-bottom: 0;
    padding-top: 0;
    table-layout: fixed;
    width: 100%; 
  }
  #custom-html-52 .headerSlides > .container > .form-group {
    width: 100%; 
  }
  #custom-html-52 .headerSlides  > #custom-html-52 .mbr-table-cell {
    width: 100%; 
  }
  #custom-html-52 .section-custom-html-52{
    padding-top: 0px; 
    padding-bottom: 0px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    height:430px;
  }
  #custom-html-52 .arrowIndicator{
    display:block;
    margin-bottom:50px;
  }
 #custom-html-52 .devenirConducteur1 {
   /* float:right; */
  }

#custom-html-52 .indicatorHeaderSlide-div {
    text-align: center;
    margin-top: -210px;
}

}
#custom-html-52 .btnDisabled {
  background-color: #999;
}
#custom-html-52 #recapDevenirConducteur td {
  font-size:12px;
  padding: 2px 10px;
}
#custom-html-54 {
  /*---------- Debut mise en forme input ----------*/
  /* LABEL ======================================= */
  /* active state */
  /* BOTTOM BARS ================================= */
  /* active state */
  /* HIGHLIGHTER ================================== */
  /* active state */
  /* ANIMATIONS ================ */
  /*---------- Fin mise en forme input ----------*/
  /*---------- Debut mise en forme placeholder ----------*/
  /*---------- Fin mise en forme placeholder ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut CSS autocomplte ---------*/
  /*---------- Fin CSS autocomplte ---------*/
}
#custom-html-54 .group {
  position: relative;
}
    #custom-html-54 input {
        font-size: 12px;
        padding: 10px 8px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #999999;
		background-color: inherit;
    }
#custom-html-54 input:focus {
  outline: none;
}
#custom-html-54 label {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-54 input:focus ~ label,
#custom-html-54 input:valid ~ label {
  top: -10px;
  font-size: 12px;
  /*color: black;*/
}
#custom-html-54 .bar {
  position: relative;
  display: block;
  width: 100%;
}
#custom-html-54 .bar:before,
#custom-html-54 .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: green;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-54 .bar:before {
  left: 50%;
}
#custom-html-54 .bar:after {
  right: 50%;
}
#custom-html-54 input:focus ~ .bar:before,
#custom-html-54 input:focus ~ .bar:after {
  width: 50%;
}
#custom-html-54 .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
#custom-html-54 input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
@-webkit-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-moz-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
#custom-html-54 .input-group {
  display: table;
  width: 100%;
}
#custom-html-54 .input-group > * {
  display: table-cell;
  width: 33%;
}
#custom-html-54 ::-webkit-input-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-54 input:focus::-webkit-input-placeholder {
  color: red;
  opacity: 1;
  font-size: 12px;
}
#custom-html-54 .info,
#custom-html-54 .success,
#custom-html-54 .warning,
#custom-html-54 .error,
#custom-html-54 .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-54 .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-54 .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-54 .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-54 .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#custom-html-54 .autoCompleteListeDepart {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-top: none;
  /*position the autocomplete items to be the same width as the container:*/
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 315px;
  overflow: hidden;
}
#custom-html-54 .autoCompleteListeArrivee {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-top: none;
  /*position the autocomplete items to be the same width as the container:*/
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 315px;
  overflow: hidden;
}
#custom-html-54 .autoComplete-item {
  cursor: pointer;
  background-color: #FAFAFA;
  padding: 10px 10px;
}
#custom-html-54 .autoComplete-item:hover {
  background-color: #e9e9e9;
}
#custom-html-54 .autocomplete-active {
  background-color: #e9e9e9;
}

#custom-html-54 .custom-html-54-search {
   max-width:1000px; 
   margin-bottom:-4%; 
   margin-top:-2%
  }

#custom-html-54 .custom-html-54-section {
  padding-top:0%;
  background-color: rgb(255, 255, 255); 
  }
#custom-html-54 .btn-search {
   border: none;
   padding: 13px 10px 12.5px 10px;
   background-color:inherit; 
   color:#000; 
   border-radius: 0;
  }

@media only screen and (max-width: 768px) {
  
  #custom-html-54 .input-group {
   width: 100%;
   display: block;
  }
   
  #custom-html-54 {
    display: table;
    /*height: 100vh;*/
    padding-bottom: 0;
    padding-top: 0;
    table-layout: fixed;
    width: 100%; 
  }
  #custom-html-54  > #custom-html-54 .mbr-table-cell {
    width: 100%; 
  }

 #custom-html-54 .custom-html-54-section {
    /*padding-top:25%;*/
  }
  #custom-html-54 .custom-html-54-search {
    margin:-10px;
  }
 #custom-html-54 .btn-search {
	width: 100%;
    margin-top:20px;
    color:#000;
    border: none;
    background-color:inherit;
  }
 #custom-html-54 .divTlsDepartBtn {
   display:block;
   width:100%;
   padding: 0 15px;
 }
    #custom-html-54 .input-group > * {
        display: inline-block;
        width: 100%;
    }
	
	#custom-html-54 .container {
		padding:0;   
		margin: 0 5px;
    }
}
#custom-html-56 {
  
}
#custom-html-56 .mbr-iconfont {
  color: #16a085;
  border-color: #16a085;
}
#custom-html-56 .heading-title {
  text-align: left;
}
#custom-html-56 .heading-text {
  text-align: right;
  font-family: 'Libre Franklin', serif;
}
#custom-html-56 .y-us-title-border {
    background: #16a085 none repeat scroll 0 0;
    border-radius: 2px;
    display: inline-block;
    height: 3px;
    position: relative;
    width: 30%;
}

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

   #custom-html-56 .container {
		padding:0;
		margin: 0 5px;
	}
}

#custom-html-57 {
  /*---------- Debut css pour Slide  ----------*/
  /*---------- Fin css pour Slide  ----------*/
}
#custom-html-57 .mbr-iconfont {
  color: #16a085;
  border-color: #16a085;
}
#custom-html-57 P {
  font-size: 48px;
}
#custom-html-57 .card-text {
  font-size: 15px;
}
#custom-html-57 .heading-title {
  font-size: 48px;
  text-align: center;
}
#custom-html-57 .arrow-nav:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
#custom-html-57 .arrow-nav:active {
  color: #16a085 ;
  background-color: inherit;
}
    #custom-html-57 .mySlides {
        display: none;
        background: no-repeat center center fixed;
        background-size: cover;
        /*-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;*/
    }
#custom-html-57 .indicator {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#custom-html-57 .indicator:hover {
  color: #000!important;
  background-color: #16a085!important;
}
#custom-html-57 .active-indicator {
  background-color: #16a085;
}
#custom-html-57 .y-us-title h2 {
    color: #000;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 32px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
#custom-html-57 .y-us-title > p {
    color: #777777;
    line-height: 22px;
}
#custom-html-57 .y-us-title-border {
    background: #16a085 none repeat scroll 0 0;
    border-radius: 2px;
    display: inline-block;
    height: 3px;
    position: relative;
    width: 30%;
}
#custom-html-57 .service-3 .service-box {
    margin-bottom: 18px;
}
#custom-html-57 .service-3 .service-box .iconset {
    float: left;
    text-align: center;
    width: 15%;
    border:1px solid black; 
    border-radius:100%;
    padding:5px;
    margin:10px;
}
#custom-html-57 .service-3 .service-box .iconset i {
    color: #000;
    font-size: 44px;
}
#custom-html-57 .service-3 .service-box .y-us-content {
    float: left;
    width: 75%;
}
#custom-html-57 .service-3 .service-box .y-us-content h4 {
    color: #3a3a3a;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 22px;
    margin: 14px 0 12px;
    text-transform: uppercase;
}
#custom-html-57 .service-3 .service-box .y-us-content p {
    color: #777777;
    font-size: 13px;
    font-weight: 300;
    line-height: 24px;
}

#custom-html-57 .icon {
    color : #f4b841;
    padding:0px;
    font-size:40px;
    border: 1px solid #fdb801;
    border-radius: 100px;
    color: #fdb801;
    font-size: 28px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    width: 70px;
}

#custom-html-57 .center-row{
    display: flex; 
    align-items: center; 
    justify-content: center;
}

@media only screen and (max-width: 768px) {
  #custom-html-57 .center-row{
    	display: block;
   }
   #custom-html-57 .container {
		padding:0;
		/*margin: 0 5px;*/
	}
}

#custom-html-59 {
  /*---------- Debut css pour Slide  ----------*/
  /*---------- Fin css pour Slide  ----------*/
}
#custom-html-59 .mbr-section-title {
  font-size: 48px;
}
#custom-html-59 .arrow-nav:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
#custom-html-59 .arrow-nav:active {
  color: #16a085;
  background-color: inherit;
}
#custom-html-59 .slides {
  display: none;
}
#custom-html-59 .indicatorSlide {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#custom-html-59 .indicatorSlide:hover {
  color: #000!important;
  background-color: #16a085!important;
}
#custom-html-59 .active-indicatorSlide {
  background-color: #16a085;
}
#custom-html-59 .y-us-title-border {
    background: #16a085 none repeat scroll 0 0;
    border-radius: 2px;
    display: inline-block;
    height: 3px;
    position: relative;
    width: 30%;
}
#custom-html-5a {
  /*---------- Debut mise en forme input ----------*/
  /* LABEL ======================================= */
  /* active state */
  /* BOTTOM BARS ================================= */
  /* active state */
  /* HIGHLIGHTER ================================== */
  /* active state */
  /* ANIMATIONS ================ */
  /*---------- Fin mise en forme input ----------*/
  /*---------- Debut mise en forme etape pour inscription ----------*/
  /* Make circles that indicate the steps of the form: */
  /* Mark the steps that are finished and valid: */
  /*---------- Fin mise en forme etape pour inscription ----------*/
  /*---------- Debut Apparence quand il y a reduction d'ecran ----------*/
  /*---------- fin Apparence quand il y a reduction d'ecran ----------*/
  /*---------- Debut mise en forme placeholder ----------*/
  /*---------- Fin mise en forme placeholder ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut centrage de tous les modalbox ----------*/
  /*---------- Fin centrage de tous les modalbox ----------*/
  /*---------- Debut css texte dans le footer pour modal de connexion ----------*/
  /*---------- Fin css texte dans le footer pour modal de connexion ----------*/
  /*---------- debut Button desactive ----------*/
  /*---------- fin Button desactive ----------*/
  /*---------- Debut Overlay juste apres l inscription ----------*/
  /*---------- Fin Overlay juste apres l inscription ----------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
}

#custom-html-5a .group {
  position: relative;
}
    #custom-html-5a input {
        font-size: 12px;
        padding: 10px 8px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #999999;
		background-color: inherit;
    }
#custom-html-5a input:focus {
  outline: none;
}
#custom-html-5a label {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-5a input:focus ~ label,
#custom-html-5a input:valid ~ label {
  top: -10px;
  font-size: 12px;
  /*color: black;*/
}
#custom-html-5a .bar {
  position: relative;
  display: block;
  width: 100%;
}
#custom-html-5a .bar:before,
#custom-html-5a .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: green;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-5a .bar:before {
  left: 50%;
}
#custom-html-5a .bar:after {
  right: 50%;
}
#custom-html-5a input:focus ~ .bar:before,
#custom-html-5a input:focus ~ .bar:after {
  width: 50%;
}
#custom-html-5a .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
#custom-html-5a input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
@-webkit-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-moz-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
#custom-html-5a .input-group {
  display: table;
  width: 100%;
}
#custom-html-5a .input-group > * {
  display: table-cell;
  width: 50%;
}
#custom-html-5a .table {
  display: none;
}
#custom-html-5a .etape {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #ccc;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
    #custom-html-5a .etape.active {
        opacity: 1;
        background-color: green;
    }
#custom-html-5a .etape.finish {
  background-color: green;
}
@media only screen and (max-width: 768px) {
  #custom-html-5a .allBtn {
    width: 100%;
  }
  #custom-html-5a .container {
    padding: 0px;
    margin: 0 5px;
  }
}
#custom-html-5a ::-webkit-input-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-5a input:focus::-webkit-input-placeholder {
  opacity: 1;
  color: red;
  font-size: 12px;
}
#custom-html-5a .info,
#custom-html-5a .success,
#custom-html-5a .warning,
#custom-html-5a .error,
#custom-html-5a .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-5a .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-5a .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-5a .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-5a .error {
  color: #D8000C;
  background-color: #FFBABA;
}
@media (min-width: 768px) {
  #custom-html-5a .modal {
    text-align: center;
  }
  #custom-html-5a .modal:before {
    content: '';
    height: 100%;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
  }
  #custom-html-5a .modal .modal-dialog {
    text-align: left;
    margin: 10px auto;
    display: inline-block;
    vertical-align: middle;
  }
}
#custom-html-5a .TextBtnBottom {
  font-size: 12px;
  color: #000;
  cursor: pointer;
}
#custom-html-5a .TextBtnBottom:hover {
  color: green;
  text-decoration: underline;
}
#custom-html-5a .btnDisabled {
  background-color: #999;
}
#custom-html-5a #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 10000;
    /*-moz-opacity: 0.5;
    -khtml-opacity: 0.5;*/
}
@media only screen and (max-width: 768px) {
    #custom-html-5a .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
}
#custom-html-5a [data-title] {
    position: relative;
}
#custom-html-5a [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#custom-html-5a [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}

#custom-html-5a .y-us-title-border {
  background: #16a085 none repeat scroll 0 0;
  border-radius: 2px;
  display: inline-block;
  height: 3px;
  position: relative;
  width: 30%;
}

#custom-html-5a .imgBtn {
    color: #999;
    cursor: pointer;
}

#custom-html-5a .imgBtn:hover {
    color: #16a085;
}

#custom-html-5a .cdutxt {
    color: #16a085;
    cursor: pointer;
}

#custom-html-5a .cdutxt:hover {
	text-decoration: underline;
}


#counters1-9t .count {
  color: #74a3c7;
  margin-bottom: 0px;
}
#counters1-9t .mbr-section-title {
  font-size: 48px;
}
#custom-html-5c a {
  color: #DFDFDF;
}
#custom-html-5c .link-not-activated {
  color: #DFDFDF;
}
#custom-html-5c .link-not-activated:hover {
  cursor: auto;
  text-decoration: none;
}
#custom-html-5c ul {
  padding: 0;
  font-size: 38px;
  list-style: none;
}
#custom-html-5c .social-icon {
  color: #fff;
}
#custom-html-5c .social-icons li {
  display: inline;
}
#custom-html-5c .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
#custom-html-5c .social {
  cursor: pointer;
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
#menu1-8b {
  /*---------- Debut Depart en vu css ----------*/
  /*---------- Fin Depart en vu css ----------*/
  /*---------- Debut mise en forme Modal ---------*/
  /*---------- Fin mise en forme Modal ---------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Mise en forme voyage en vu ----------*/
  /*---------- Fin Mise en forme voyage en vu ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut CSS image ----------*/
  /*---------- Fin CSS  image ----------*/
}
#menu1-8b .menu1 .nav-btn {
  width: auto;
}
#menu1-8b .hide-buttons .nav-btn {
  display: none !important;
}
#menu1-8b .navbar-toggler {
  color: #74a3c7;
}
#menu1-8b .close-icon::before,
#menu1-8b .close-icon::after {
  background-color: #000;
}
#menu1-8b .link,
#menu1-8b .dropdown-item {
  color: #000000;
  font-family: 'Libre Franklin', serif;
}
#menu1-8b .link {
  font-size: 0.8125rem;
}
#menu1-8b .dropdown-item,
#menu1-8b .nav-dropdown-sm .link {
  font-size: 0.880rem;
}
#menu1-8b .link:hover,
#menu1-8b .link:focus {
    color: #16a085;
}
#menu1-8b .dropdown-item:hover::before,
#menu1-8b .dropdown-item:focus::before {
  /*background: #16a085;*/
}
#menu1-8b .dropdown-item:hover,
#menu1-8b .dropdown-item:focus {
    color: #fff;
    background-color: #16a085;
}
#menu1-8b .link[aria-expanded="true"],
#menu1-8b .dropdown-menu {
  background: #fff;
}
#menu1-8b .nav-dropdown-sm .link:focus,
#menu1-8b .nav-dropdown-sm .link:hover,
#menu1-8b .nav-dropdown-sm .dropdown-item:focus,
#menu1-8b .nav-dropdown-sm .dropdown-item:hover {
    color: #fff !important;
    background-color: #16a085 !important;
}
#menu1-8b .navbar,
#menu1-8b .nav-dropdown-sm,
#menu1-8b .nav-dropdown-sm .link[aria-expanded="true"],
#menu1-8b .nav-dropdown-sm .dropdown-menu {
  background: #fff;
}
#menu1-8b .bg-color.transparent .link {
  color: #16a085;
  transition: none;
}
#menu1-8b .bg-color.transparent.opened .link {
  transition: color 0.2s ease-in-out;
}
#menu1-8b .bg-color.transparent.opened .link:hover,
#menu1-8b .bg-color.transparent.opened .link:focus {
    color: #16a085;
}
#menu1-8b .link[aria-expanded="true"],
#menu1-8b .dropdown-item[aria-expanded="true"] {
  color: #16a085!important;
}
#menu1-8b .dynamic-badge {
  position: relative;
}
#menu1-8b .dynamic-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -15px;
  right: -3px;
  font-size: 11px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 23px;
  background: red;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}
#menu1-8b .badge {
    box-sizing: border-box;
    display: none;
    background-color: #2c3e50;
    color: #ffffff; 
    border-radius: 3rem;  /*As longe as this is bigger than the fontsize*/
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    padding: .1rem .7rem .1rem .8rem;
    line-height: inherit;
}
#menu1-8b .badge--line {
    background-color: transparent;
    color: #95a5a6;
    box-shadow: 0 0 0 1px #95a5a6;
}
#menu1-8b .badge--info {
    background-color: #3498db;
}
#menu1-8b .badge--warning {
    background-color:#f1c40f;
}
    #menu1-8b .badge--danger {
        background-color: #16a085;
    }
#menu1-8b .badge--success {
    background-color: #2ecc71;
}
#menu1-8b .badge--small {
    font-size: 1.2rem;
    padding: .1rem .65rem .2rem;
}
#menu1-8b .badge--smaller {
    font-size: .7rem;
    /*padding: .05rem .4rem .15rem;*/
}
@media only screen and (max-width: 768px) {
    #menu1-8b .badge {
       position:absolute;
       top:10px;
    }
    #menu1-8b .navbar-toggler{
      color:#000;
    }
}
#menu1-8b .modal.in .modal-dialog {
  position: fixed;
  bottom: 0px;
  right: 0px;
  margin: 0px;
}

#menu1-8b .top-depart-en-vu-mobile{
  display:none;
}
#menu1-8b #availableSearch{
  position:absolute;
  bottom:10px; 
  left:10px;
}

@media only screen and (max-width: 768px) {
    #menu1-8b .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
  #menu1-8b .tab-driver {
    display: none;
  }
  #menu1-8b .label-price-to-left {
    float: left;
  }
#menu1-8b .modalMobileWidth{
  width:100%;
}
#menu1-8b .top-depart-en-vu-mobile{
  display:inline;
}
#menu1-8b .cieName{
  font-size:12px;
}
#menu1-8b #availableSearch{
	position: relative;
    top: -10px;
    left: -22px;
}

}
#menu1-8b .voyageEnVu {
  border-top:1px solid #DDD;
  border-bottom:1px solid #DDD;
}
#menu1-8b .voyageEnVu:hover {
  cursor: pointer;
  background-color: #FFF;
}
#menu1-8b [data-title] {
    position: relative;
}
#menu1-8b [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#menu1-8b [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
#menu1-8b .info,
#menu1-8b .success,
#menu1-8b .warning,
#menu1-8b .error,
#menu1-8b .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#menu1-8b .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#menu1-8b .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#menu1-8b .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#menu1-8b .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#menu1-8b .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#menu1-8b .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#menu1-8b .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#menu1-8b .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#menu1-8b .img-content:hover .deleteColorImg {
  display: inline-block;
}
#menu1-8b .img-content {
  display: inline-block;
  position: relative;
}
#menu1-8b .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#menu1-8b .deleteColorImg:hover {
  color: green;
}
#menu1-8b .deleteColorImg {
  color: #333;
  display: none;
}
#menu1-8b .image-empty {
  border: 2px red solid;
}
#menu1-8b .supprimerItem {
  color:#333; 
  cursor:pointer; 
  /*padding:20px 0;*/
}

    #menu1-8b .supprimerItem:hover {
        /*text-decoration: underline;*/
        color: red;
    }
#custom-html-8d {
  /*---------- Debut mise en forme step ----------*/
  /* Make circles that indicate the steps of the form: */
  /* Mark the steps that are finished and valid: */
  /*---------- Fin mise en forme step ----------*/
  /*--------------Debut CSS Side Barre Filtre tri------------------------------*/
  /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
  /*--------------Debut CSS Side Barre Filtre tri--------------------------*/
  /*--------------CSS Pour L accodeon du filtre et du tri-------*/
  /*-----------Debut main principal---------*/
  /*------------Fin main princpal----------------*/
  /*--------------fin CSS accodeon filtre tri--------------*/
  /*------------ Debut Accordeon Pour Rechercher par ----------*/
  /*---------------Fin Accordeon Pour Tous les departs----------*/
  /*---------- Debut mise en forme input ----------*/
  /* LABEL ======================================= */
  /* active state */
  /* BOTTOM BARS ================================= */
  /* active state */
  /* HIGHLIGHTER ================================== */
  /* active state */
  /* ANIMATIONS ================ */
  /*---------- Fin mise en forme input ----------*/
  /*----------Debut bouton Devenir conducteur ----------*/
  /*---------- Fin bouton devenir conducteur ----------*/
  /*---------- Debut mise en forme placeholder ----------*/
  /*---------- Fin mise en forme placeholder ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut mise en forme block publication ----------*/
  /*---------- Fin mise en forme block publication ----------*/
  /*---------- Mise en forme devenir conducteur ----------*/
  /*---------- Fin Mise en forme devenir conducteur ----------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- debut Button desactive ----------*/
  /*---------- fin Button desactive ----------*/
  /*---------- Debut centrage de tous les modalbox ----------*/
  /*---------- Fin centrage de tous les modalbox ----------*/
  /*---------- Debut CSS upload image ----------*/
  /*---------- Fin CSS image ----------*/
  /*---------- Debut css arrow pour modal detail vehicule conducteur ----------*/
  /*---------- Fin css arrow pour modal detail vehicule conducteur ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut Css recap table ----------*/
  /*---------- Fin Css recap table ----------*/
  /*---------- Debut css pagination ----------*/
  /*---------- Fin css pagination ----------*/
  /*---------- Debut CSS autocomplte ---------*/
  /*---------- Fin CSS autocomplte ---------*/
  /*---------- Debut CSS Voyage complete ----------*/
  /*---------- Fin CSS Voyage complete ----------*/
}

#custom-html-8d .btn-search {
  border: none;
  padding: 13px 10px 12.5px 10px;
}
#custom-html-8d .tab {
  display: none;
}
#custom-html-8d .step {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #ccc;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
    #custom-html-8d .step.activestep {
        opacity: 1;
        background-color: green;
    }
#custom-html-8d .step.finish {
  background-color: green;
}
#custom-html-8d .wrapper {
  display: flex;
  align-items: stretch;
}
#custom-html-8d #sidebar {
  display:none;
  width: 25%;
  float: left;
  transition: all 0.2s;
}
#custom-html-8d #sidebar .sidebar-header {
  padding: 20px;
  background: #16a085;
  color: #fff;
}

#custom-html-8d .flux_resultat {
  overflow-x: auto;
  font-size: 12px;
  padding: 0px 0px 0px 10px;
  /*width:75%;*/
}
@media only screen and (max-width: 768px) {
  
  #custom-html-8d .flux_resultat {
      padding:0px;
    margin: 15px 0px 0px 0px;
    /*width:100%;*/
  }
  #custom-html-8d #sidebar {
    display:none;
    width:100%;
  }

}
#custom-html-8d .accordionDepart {
  background-color: inherit;
  color: #666;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #aaa;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: all 0.1s;
}
#custom-html-8d .active,
#custom-html-8d .accordionDepart:hover {
  background-color: #eee;
}
#custom-html-8d .accordionDepart:after {
  font-weight: bold;
  content: "\002B";
  color: #16a085;
  float: right;
  margin-left: 5px;
}
#custom-html-8d .active:after {
  font-weight: bold;
  content: "\2212";
}
#custom-html-8d .panelDepart {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  font-size: 12px;
  color: #000;
  transition: max-height 0.2s ease-out;
  position: relative;
  width: 100%;
  background-color:#FFF;
}
#custom-html-8d .group {
  position: relative;
}
#custom-html-8d input {
    font-size: 12px;
    padding: 10px 8px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #999999;
	background-color: inherit;
}
#custom-html-8d input:focus {
  outline: none;
}
#custom-html-8d label {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-8d input:focus ~ label,
#custom-html-8d input:valid ~ label {
  top: -10px;
  font-size: 12px;
  /*color: black;*/
}
#custom-html-8d .bar {
  position: relative;
  display: block;
  width: 100%;
}
#custom-html-8d .bar:before,
#custom-html-8d .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: green;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-8d .bar:before {
  left: 50%;
}
#custom-html-8d .bar:after {
  right: 50%;
}
#custom-html-8d input:focus ~ .bar:before,
#custom-html-8d input:focus ~ .bar:after {
  width: 50%;
}
#custom-html-8d .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
#custom-html-8d input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
@-webkit-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-moz-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}

#custom-html-8d .input-group {
  display: table;
  width: 100%;
}

#custom-html-8d .input-group > * {
  display: table-cell;
  width: 33%;
}

 #custom-html-8d .identifierInviter {
   float:right; 
   display:none;
  }


@media only screen and (max-width: 768px) {
  
  #custom-html-8d .search-input-value {
    margin: 80px 5px 0 5px;
  }

  #custom-html-8d .devenirConducteur {
    width: 100%;
  }
 
  #custom-html-8d .input-group {
   width: 100%;
   display: block;
  }

 #custom-html-8d .identifierInviter {
   display:block;
   margin:0px;
  }

  #custom-html-8d .statutInvite {
   display:none;
  }

    #custom-html-8d .input-group > * {
        display: inline-block;
        width: 100%;
    }

}
#custom-html-8d ::-webkit-input-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-8d input:focus::-webkit-input-placeholder {
  color: red;
  opacity: 1;
  font-size: 12px;
}
#custom-html-8d .info,
#custom-html-8d .success,
#custom-html-8d .warning,
#custom-html-8d .error,
#custom-html-8d .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-8d .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-8d .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-8d .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-8d .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#custom-html-8d .flux-publicaton ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#custom-html-8d .mainCity {
  font-size: 12px;
  font-weight: bold;
  color:green;
}
#custom-html-8d .flux-publicaton {
  border: 1px solid #ccc;
  background-color: #FFF;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 0px;
}
#custom-html-8d .flux-publicaton:hover {
  background-color: inherit;
  border: none;
}

#custom-html-8d .body-post {
    width: 33%;
    display: inline-block;
}

#custom-html-8d .body-post-border-left {
    border-left: 1px solid #ccc;
}

@media only screen and (max-width: 768px) {
    #custom-html-8d .body-post {
        text-align: center;
        width: 100%;
        display: inline-block;
    }
    #custom-html-8d .body-post-border-left {
        border-left: 0px;
    }

  #custom-html-8d #dateVoyagePost {
    margin-bottom: 2%;
  }

  #custom-html-8d .flux-publicaton {
    border-radius:0px;
    margin-bottom:0px;
  }

    #custom-html-8d .flux_resultat {
        padding: 0px;
        margin: 15px 0px 0px 0px;
        /*width: 100%;*/
    }

  #custom-html-8d .container {
    padding: 0px;
  }

  #custom-html-8d .body-post-btn{
    width:100%;
  }

   #custom-html-8d .body-post-table{
    width:90%;
  }

  #custom-html-8d .body-post-driver{
    width:20%;
  }

}
#custom-html-8d #devenirConducteurForm {
  display: none;
  /*padding: auto;*/
  min-width: 90%;
}
@media only screen and (max-width: 768px) {
    #custom-html-8d .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
}
#custom-html-8d .btnDisabled {
  background-color: #999;
}
@media (min-width: 768px) {
  #custom-html-8d .modal {
    text-align: center;
  }
  #custom-html-8d .modal:before {
    content: '';
    height: 100%;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
  }
  #custom-html-8d .modal .modal-dialog {
    text-align: left;
    margin: 10px auto;
    display: inline-block;
    vertical-align: middle;
  }
}
#custom-html-8d .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8d .image-input:hover {
  opacity: 0.3;
  cursor: pointer;
  filter: alpha(opacity=30);
}
#custom-html-8d .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8d .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8d .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8d .img-content:hover .deleteColorImg {
  display: inline-block;
}
#custom-html-8d .img-content {
  display: inline-block;
  position: relative;
}
#custom-html-8d .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#custom-html-8d .deleteColorImg:hover {
  color: green;
}
#custom-html-8d .deleteColorImg {
  cursor: pointer;
  color: #333;
  display: none;
}
#custom-html-8d .imgBtn {
  color: #999;
  cursor: pointer;
}
#custom-html-8d .imgBtn:hover {
  color: #16a085;
}
#custom-html-8d .image-empty {
  border: 2px solid red;
}
#custom-html-8d .focusedOnImg {
  border: 3px solid green;
}
#custom-html-8d .arrow-nav:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
#custom-html-8d .arrow-nav:active {
  color: #16a085 ;
  background-color:inherit;
}
#custom-html-8d .mySlides {
    display: none;
    background: no-repeat center center fixed;
    background-size: cover;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
}
#custom-html-8d .indicator {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#custom-html-8d .indicator:hover {
  color: #000!important;
  background-color: #16a085!important;
}
#custom-html-8d .active-indicator {
  background-color: #16a085;
}
#custom-html-8d [data-title] {
    position: relative;
}
#custom-html-8d [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#custom-html-8d [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
#custom-html-8d #tabRecapAnnoncerDepart td {
  padding: 2px 10px;
  font-size:12px;
}
#custom-html-8d #recapDevenirConducteur td {
  font-size:12px;
  padding: 2px 10px;
}
#custom-html-8d .pagination {
  display: inline-block;
}
#custom-html-8d .pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  margin: 0 2px;
  cursor:pointer;
}
#custom-html-8d .pagination a.activePagination {
  background-color: #16a085;
  color: white;
  border-radius: 5px;
}
#custom-html-8d .pagination a:hover:not(.activePagination) {
  background-color: #ddd;
  border-radius: 5px;
}
#custom-html-8d .autoCompleteListeDepart {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-top: none;
  /*position the autocomplete items to be the same width as the container:*/
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 315px;
  overflow: hidden;
}
#custom-html-8d .autoCompleteListeArrivee {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-top: none;
  /*position the autocomplete items to be the same width as the container:*/
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 315px;
  overflow: hidden;
}
#custom-html-8d .autoComplete-item {
  cursor: pointer;
  background-color: #FAFAFA;
  padding: 10px 10px;
}
#custom-html-8d .autoComplete-item:hover {
  background-color: #e9e9e9;
}
#custom-html-8d .autocomplete-active {
  background-color: #e9e9e9;
}
#custom-html-8d .voyageComplete {
  opacity: 0.3;
  pointer-events: none;
  filter: alpha(opacity=30);
}

#custom-html-8d .date-flux {
    color: #666;
    padding: 8px 8px;
    font-size: 12px;
    background-color: inherit;
}

#custom-html-8d .filtreElement {
    color: #666;
}

@media only screen and (max-width: 768px) {
    #custom-html-8d .date-flux {
        color: #FFF;
        background-color: #16a085;
		/*position: sticky;
		top: 200px;*/
    }
}

#custom-html-8d .btn-carre {
    margin:10px 0px 10px 10px; 
	border: 1px solid #16a085; 
	padding:15px 0px; 
	border-radius:5px 5px 5px 5px; 
	width:100%; 
	position:relative; 
	cursor:pointer;
	background-color:#16a085;
	color:#FFF;
}
#custom-html-8d .btn-carre:hover {
	color:#16a085;
	background-color:#EEE;
}

#custom-html-8d .btn-carre-outline {
    margin:10px 0px 10px 0px; 
	border: 1px solid #16a085; 
	padding:15px 0px; 
	border-radius:5px 5px 5px 5px; 
	width:100%; 
	position:relative; 
	cursor:pointer;
	background-color:#FFF;
	color:#666;
}

#custom-html-8d .btn-carre-outline:hover {
	color:#666;
	background-color:#EEE;
	text-decoration:underline;
}


#custom-html-8d .div-parent-btn-carre-double-btn {
	text-align:center; 
	display:flex;  
	margin: auto;
    width:70%; 
}

#custom-html-8d .no-result-found {
	text-align:center; 
	overflow:auto; 
	border-radius: 5px; 
	background-color: #FFF; 
	padding: 20px; 
	border:1px solid #999;
	margin-left:-10px;
}

@media only screen and (max-width: 768px) {
    #custom-html-8d .div-parent-btn-carre-double-btn {
        width:95%; 
    }
	
	#custom-html-8d .no-result-found {
		margin:5px;
	}
}


#footer1-8h a {
  color: #DFDFDF;
}
#footer1-8h .link-not-activated {
  color: #DFDFDF;
}
#footer1-8h .link-not-activated:hover {
  cursor: auto;
  text-decoration: none;
}
#footer1-8h ul {
  padding: 0;
  font-size: 38px;
  list-style: none;
}
#footer1-8h .social-icon {
  color: #fff;
}
#footer1-8h .social-icons li {
  display: inline;
}
#footer1-8h .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
#footer1-8h .social {
  cursor: pointer;
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
#menu1-8l .hide-buttons .nav-btn {
  display: none !important;
}
#menu1-8l .navbar-toggler {
  color: #000000;
}
#menu1-8l .close-icon::before,
#menu1-8l .close-icon::after {
  background-color: #000000;
}
#menu1-8l .link,
#menu1-8l .dropdown-item {
  color: #000000;
  font-family: 'Libre Franklin', serif;
}
#menu1-8l .link {
  font-size: 0.8125rem;
}
#menu1-8l .dropdown-item,
#menu1-8l .nav-dropdown-sm .link {
  font-size: 0.880rem;
}
#menu1-8l .link:hover,
#menu1-8l .link:focus {
    color: #16a085;
}
#menu1-8l .dropdown-item:hover::before,
#menu1-8l .dropdown-item:focus::before {
  /*background: #16a085;*/
}
#menu1-8l .dropdown-item:hover,
#menu1-8l .dropdown-item:focus {
    color: #fff;
    background-color: #16a085;
}
#menu1-8l .link[aria-expanded="true"],
#menu1-8l .dropdown-menu {
  background: #ffffff;
}
#menu1-8l .nav-dropdown-sm .link:focus,
#menu1-8l .nav-dropdown-sm .link:hover,
#menu1-8l .nav-dropdown-sm .dropdown-item:focus,
#menu1-8l .nav-dropdown-sm .dropdown-item:hover {
    color: #fff !important;
    background-color: #16a085 !important;
}
#menu1-8l .navbar,
#menu1-8l .nav-dropdown-sm,
#menu1-8l .nav-dropdown-sm .link[aria-expanded="true"],
#menu1-8l .nav-dropdown-sm .dropdown-menu {
  background: #fff;
}
#menu1-8l .bg-color.transparent .link {
  color: #000000;
  transition: none;
}
#menu1-8l .bg-color.transparent.opened .link {
  transition: color 0.2s ease-in-out;
}
#menu1-8l .bg-color.transparent.opened .link:hover,
#menu1-8l .bg-color.transparent.opened .link:focus {
    color: #16a085;
}
#menu1-8l .link[aria-expanded="true"],
#menu1-8l .dropdown-item[aria-expanded="true"] {
  color: #16a085!important;
}
#menu1-8l .top-depart-en-vu-mobile{
  display:none;
}
@media only screen and (max-width: 768px) {
#menu1-8l .top-depart-en-vu-mobile{
  display:inline;
}
}

#custom-html-8m {
  /*---------- Debut Depart en vu css ----------*/
  /*---------- Fin Depart en vu css ----------*/
  /*---------- Debut mise en forme Modal ---------*/
  /*---------- Fin mise en forme Modal ---------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Mise en forme voyage en vu ----------*/
  /*---------- Fin Mise en forme voyage en vu ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut CSS image ----------*/
  /*---------- Fin CSS  image ----------*/
}
#custom-html-8m .menu1 .nav-btn {
  width: auto;
}
#custom-html-8m .hide-buttons .nav-btn {
  display: none !important;
}
#custom-html-8m .navbar-toggler {
  color: #74a3c7;
}
#custom-html-8m .close-icon::before,
#custom-html-8m .close-icon::after {
  background-color: #000;
}
#custom-html-8m .link,
#custom-html-8m .dropdown-item {
  color: black;
  font-family: 'Libre Franklin', serif;
}
#custom-html-8m .link {
  font-size: 0.8125rem;
}
#custom-html-8m .dropdown-item,
#custom-html-8m .nav-dropdown-sm .link {
  font-size: 0.880rem;
}
#custom-html-8m .link:hover,
#custom-html-8m .link:focus {
    color: #16a085;
}
#custom-html-8m .dropdown-item:hover::before,
#custom-html-8m .dropdown-item:focus::before {
  /*background: #16a085;*/
}
#custom-html-8m .dropdown-item:hover,
#custom-html-8m .dropdown-item:focus {
    color: #fff;
    background-color: #16a085;
}
#custom-html-8m .link[aria-expanded="true"],
#custom-html-8m .dropdown-menu {
  background: #ffffff;
}
#custom-html-8m .nav-dropdown-sm .link:focus,
#custom-html-8m .nav-dropdown-sm .link:hover,
#custom-html-8m .nav-dropdown-sm .dropdown-item:focus,
#custom-html-8m .nav-dropdown-sm .dropdown-item:hover {
    color: #fff !important;
    background-color: #16a085 !important;
}
#custom-html-8m .navbar,
#custom-html-8m .nav-dropdown-sm,
#custom-html-8m .nav-dropdown-sm .link[aria-expanded="true"],
#custom-html-8m .nav-dropdown-sm .dropdown-menu {
  background: #fff;
}
#custom-html-8m .bg-color.transparent .link {
  color: #16a085;
  transition: none;
}
#custom-html-8m .bg-color.transparent.opened .link {
  transition: color 0.2s ease-in-out;
}
#custom-html-8m .bg-color.transparent.opened .link:hover,
#custom-html-8m .bg-color.transparent.opened .link:focus {
    color: #16a085;
}
#custom-html-8m .link[aria-expanded="true"],
#custom-html-8m .dropdown-item[aria-expanded="true"] {
  color: #16a085!important;
}
#custom-html-8m .dynamic-badge {
  position: relative;
}
#custom-html-8m .dynamic-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -15px;
  right: -3px;
  font-size: 11px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 23px;
  background: red;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}
#custom-html-8m .badge {
    box-sizing: border-box;
    display: none;
    background-color: #2c3e50;
    color: #ffffff; 
    border-radius: 3rem;  /*As longe as this is bigger than the fontsize*/
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    padding: .1rem .8rem .1rem;
    line-height: inherit;
}
#custom-html-8m .badge--line {
    background-color: transparent;
    color: #95a5a6;
    box-shadow: 0 0 0 1px #95a5a6;
}
#custom-html-8m .badge--info {
    background-color: #3498db;
}
#custom-html-8m .badge--warning {
    background-color:#f1c40f;
}
    #custom-html-8m .badge--danger {
        background-color: #16a085;
    }
#custom-html-8m .badge--success {
    background-color: #2ecc71;
}
#custom-html-8m .badge--small {
    font-size: 1.2rem;
    padding: .1rem .65rem .2rem;
}
#custom-html-8m .badge--smaller {
    font-size: .7rem;
    /*padding: .05rem .4rem .15rem;*/
}
#custom-html-8m #availableSearch{
  position:absolute;
  bottom:10px; 
  left:10px;
}
@media only screen and (max-width: 768px) {
    #custom-html-8m .badge {
       position:absolute;
       top:10px;
    }
    #custom-html-8m .navbar-toggler{
      color:#000;
    }
}
#custom-html-8m .modal.in .modal-dialog {
  position: fixed;
  bottom: 0px;
  right: 0px;
  margin: 0px;
}

#custom-html-8m .profileImgHeader {
  border-radius:50%;
  /*border: 1px solid #999;*/ 
  /*padding:3px; */
  /*position:absolute;*/
  /*bottom:10px; */
  height:40px;
  width:40px;
}
#custom-html-8m .top-depart-en-vu-mobile{
  display:none;
}
@media only screen and (max-width: 768px) {
    #custom-html-8m .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
  #custom-html-8m .tab-driver {
    display: none;
  }
  #custom-html-8m .label-price-to-left {
    float: left;
  }
  #custom-html-8m .profileImgHeader {
    border-radius:50%;
    /*border: 1px solid #999;*/ 
    /*padding:3px; */
    /*position:absolute; */
    /*bottom:5px; */
    height:40px;
    width:40px;
  }
#custom-html-8m .modalMobileWidth{
  width:100%;
}
#custom-html-8m .top-depart-en-vu-mobile{
  display:inline;
}
#custom-html-8m .cieName{
  font-size:12px;
}
#custom-html-8m #availableSearch{
  position: relative;
  top: -10px;
  left: -22px;
}

}
#custom-html-8m .voyageEnVu {
  border-top:1px solid #DDD;
  border-bottom:1px solid #DDD;
}
#custom-html-8m .voyageEnVu:hover {
  cursor: pointer;
  background-color: #FFF;
}
#custom-html-8m [data-title] {
    position: relative;
}
#custom-html-8m [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#custom-html-8m [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
#custom-html-8m .info,
#custom-html-8m .success,
#custom-html-8m .warning,
#custom-html-8m .error,
#custom-html-8m .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-8m .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-8m .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-8m .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-8m .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#custom-html-8m .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8m .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8m .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8m .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8m .img-content:hover .deleteColorImg {
  display: inline-block;
}
#custom-html-8m .img-content {
  display: inline-block;
  position: relative;
}
#custom-html-8m .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#custom-html-8m .deleteColorImg:hover {
  color: green;
}
#custom-html-8m .deleteColorImg {
  color: #333;
  display: none;
}
#custom-html-8m .image-empty {
  border: 2px red solid;
}
#custom-html-8m .supprimerItem {
  color:#333; 
  cursor:pointer; 
  /*padding:20px 0;*/
}
    #custom-html-8m .supprimerItem:hover {
        /*text-decoration: underline;*/
        color: red;
    }

#custom-html-8n {
  /*---------- Debut mise en forme input ----------*/
  /* LABEL ======================================= */
  /* active state */
  /* BOTTOM BARS ================================= */
  /* active state */
  /* HIGHLIGHTER ================================== */
  /* active state */
  /* ANIMATIONS ================ */
  /*---------- Fin mise en forme input ----------*/
  /*---------- Debut mise en forme placeholder ----------*/
  /*---------- Fin mise en forme placeholder ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut mise en forme menu vertical dans tab horizontal ----------*/
  /* Style the tab */
  /* Style the buttons inside the tab */
  /* Change background color of buttons on hover */
  /* Create an active/current "tab button" class */
  /* Style the tab content */
  /*---------- Fin mise en forme menu vertical dans tab horizontal ----------*/
  /*----------- Debut edit mise en forme menu horizontal et vertical ----------*/
  /*----------- Fin edit mise en forme menu horizontal et vertical ----------*/
  /*---------- Debut CSS upload image ----------*/
  /*---------- Fin CSS image ----------*/
  /*---------- Debut menu vertical lorsque mobile ----------*/
  /*---------- Fin menu vertical lorsque mobile ----------*/
  /*---------- Debut centrage de tous les modalbox ----------*/
  /*---------- Fin centrage de tous les modalbox ----------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Debut Css ligne de soulignement pour table solde ----------*/
  /* Dashed red border */
  /*---------- Debut Css ligne de soulignement pour table solde ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut mise en forme block publication ----------*/
  /*---------- Fin mise en forme block publication ----------*/
  /*---------- Debut css pagination ----------*/
  /*---------- Fin css pagination ----------*/
  /*---------- Debut css button pour post dans historique ----------*/
  /*---------- Fin css button pour post dans historique ----------*/
  /*---------- Debut css arrow pour modal detail vehicule conducteur ----------*/
  /*---------- Fin css arrow pour modal detail vehicule conducteur ----------*/
  /*---------- Debut css nombre de passagers ----------*/
  /*---------- Fin css nombre de passager ----------*/
  /*---------- Debut css nombre de passagers pour post expire ----------*/
  /*---------- Fin css nombre de passagers pour post expire ----------*/
}

#custom-html-8n .group {
  position: relative;
}
    #custom-html-8n input {
        font-size: 12px;
        padding: 10px 8px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #999999;
		background-color: inherit;
    }
#custom-html-8n input:focus {
  outline: none;
}
#custom-html-8n label {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-8n input:focus ~ label,
#custom-html-8n input:valid ~ label {
  top: -10px;
  font-size: 12px;
}
#custom-html-8n .bar {
  position: relative;
  display: block;
  width: 100%;
}
#custom-html-8n .bar:before,
#custom-html-8n .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: green;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-8n .bar:before {
  left: 50%;
}
#custom-html-8n .bar:after {
  right: 50%;
}
#custom-html-8n input:focus ~ .bar:before,
#custom-html-8n input:focus ~ .bar:after {
  width: 50%;
}
#custom-html-8n .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
#custom-html-8n input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
@-webkit-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-moz-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
#custom-html-8n .input-group {
  display: table;
  width: 100%;
}
#custom-html-8n .input-group > * {
  display: table-cell;
  width: 50%;
}
#custom-html-8n ::-webkit-input-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-8n input:focus::-webkit-input-placeholder {
  opacity: 1;
  color: red;
  font-size: 12px;
}
#custom-html-8n .info,
#custom-html-8n .success,
#custom-html-8n .warning,
#custom-html-8n .error,
#custom-html-8n .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-8n .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-8n .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-8n .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-8n .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#custom-html-8n * {
  box-sizing: border-box;
}

#custom-html-8n .menu {
    float: left;
	border: 1px solid #ccc;
	background-color: #ffffff;
    width: 25%;
    height: auto;
    border-radius: 0px;
    margin-right: 0px;
}
#custom-html-8n .menu button {
  display: block;
  background-color: inherit;
  color: #666;
  padding: 10px 10px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 14px;
}
#custom-html-8n .menu button:hover {
   background-color: #ddd;
   color: green;
}
#custom-html-8n .menu button.sousMenuTab:hover {
   background-color: #16a085;
   color: #FFF;
}
#custom-html-8n .menu button.active {
  background-color: #16a085;
  color: #FFF;
}

#custom-html-8n .menu button.activesousMenuTab {
   background-color: #16a085;
   color: #FFF;
}
#custom-html-8n .menu-horizontal {
    float: left;
	/*
	border: 1px solid #ccc;
	*/
	background-color: #ffffff;
    width: 25%;
    height: auto;
    border-radius: 0px;
    margin-right: 0px;
	margin-bottom:20px;
	display: -webkit-inline-box;
}
#custom-html-8n .menu-horizontal button {
  display: block;
  background-color: inherit;
  color: #666;
  padding: 10px 10px;
  width: 100%;
  border: 1px solid #ccc;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 14px;
}
#custom-html-8n .menu-horizontal button:hover {
   background-color: #ddd;
   color: green;
}
#custom-html-8n .menu-horizontal button.sousMenuTab:hover {
   background-color: #16a085;
   color: #FFF;
}
#custom-html-8n .menu-horizontal button.active {
  background-color: #16a085;
  color: #FFF;
}

#custom-html-8n .menu-horizontal button.activesousMenuTab {
   background-color: #16a085;
   color: #FFF;
}

#custom-html-8n .tabcontent {
  float: right;
  padding: 0px 12px;
  border: 1px solid #ccc;
  border-radius: 0px;
  width: 73%;
  height: auto;
  background-color: #ffffff;
}

#custom-html-8n .active {
  background-color: #EEE ;
}
#custom-html-8n .nav-link {
  color: #666;
}
#custom-html-8n .nav-link:hover {
  color: black;
  border: 1px solid #CECECE;
  border-bottom: 1px solid #EEE;
}
#custom-html-8n .nav-link.active {
  color: #333;
  /*border: 1px solid #CECECE;
  border-bottom: 1px solid #F8F9F9;*/
}
#custom-html-8n .nav {
  padding-left: 30px;
}
#custom-html-8n .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8n .image-input:hover {
  opacity: 0.3;
  cursor: pointer;
  filter: alpha(opacity=30);
}
#custom-html-8n .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8n .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8n .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8n .image-input-nolink {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8n .img-content:hover .deleteColorImg {
  display: inline-block;
}
#custom-html-8n .img-content {
  display: inline-block;
  position: relative;
}
#custom-html-8n .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#custom-html-8n .deleteColorImg:hover {
  color: red;
}
#custom-html-8n .deleteColorImg {
  cursor: pointer;
  color: #333;
  display: none;
}
#custom-html-8n .imgBtn {
  color: #999;
  cursor: pointer;
}
#custom-html-8n .imgBtn:hover {
  color: #16a085;
}
#custom-html-8n .imgBtn-delete {
    color: #999;
    cursor: pointer;
}

#custom-html-8n .imgBtn-delete:hover {
    color: red;
}
#custom-html-8n .image-empty {
  border: 2px solid red;
}
#custom-html-8n .focusedOnImg {
  border: 3px solid green;
}

/*Tri dans legend tableau*/
#custom-html-8n table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE";
    color:#666;
}

#custom-html-8n .rechercheDiv {
    width: 35%;
}
#custom-html-8n .tabContent-from {
	padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

@media only screen and (max-width: 768px) {
  #custom-html-8n .deleteColorImg {
    color: #333;
    display: block;
  }
  
  #custom-html-8n .menu {
    width:100%;
  }

  #custom-html-8n .tabcontent {
    width:100%;
    padding:12px;
  }

  #custom-html-8n .main-container {
    margin-top:70px;
    padding: 0px;
  }

  #custom-html-8n .tab-header-tlsd {
    margin:20px 0px;
  }
#custom-html-8n .tabContent-from {
    padding: 10px;
  }
#custom-html-8n .actionCol {
    /*display:none;*/
    position:relative;
  }

#custom-html-8n .rechercheDiv{
    width:100%;
  }

#custom-html-8n table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: "";
    color: #666;
}

#custom-html-8n .menu-horizontal button {
 width: auto;
}


}

@media (min-width: 768px) {
  #custom-html-8n .modal {
    text-align: center;
  }
  #custom-html-8n .modal:before {
    content: '';
    height: 100%;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
  }
  #custom-html-8n .modal .modal-dialog {
    text-align: left;
    margin: 10px auto;
    display: inline-block;
    vertical-align: middle;
  }
}
@media only screen and (max-width: 768px) {
    #custom-html-8n .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
}
#custom-html-8n hr.new2 {
  border-top: 1px dashed #999;
}
#custom-html-8n [data-title] {
  position: relative;
}
#custom-html-8n [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#custom-html-8n [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
#custom-html-8n .flux-publicaton ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#custom-html-8n .mainCity {
  font-size: 12px;
  font-weight: bold;
  color:green;
}
#custom-html-8n .flux-publicaton {
  border: 1px solid #ccc;
  background-color: #FFF;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 0px;
}
#custom-html-8n .flux-publicaton:hover {
  background-color: inherit;
  border: none;
}

#custom-html-8n .body-post {
    width: 33%;
    display: inline-block;
}

#custom-html-8n .body-post-border-left {
    border-left: 1px solid #ccc;
}

#custom-html-8n .text-post {
  color: black;
}

#custom-html-8n #card_Paiment_DivImg{
   width:150px;
  }

#custom-html-8n #mtnMoneyDivImg{
   width:170px;
  }

#custom-html-8n #myDriveAccountDivIMg {
    width: 150px;
}

#custom-html-8n #card_Paiment{
   width:100px; 
   height:80px; 
  }

#custom-html-8n #mtnMoneyImg{
   width:100px; 
   height:80px;  
  }

#custom-html-8n #myAccount {
    width: 80px;
    height: 80px;
}

@media only screen and (max-width: 768px) {
    #custom-html-8n .body-post {
        text-align: center;
        width: 100%;
        display: inline-block;
    }

    #custom-html-8n .body-post-border-left {
        border-left: 0px;
    }

  #custom-html-8n #dateVoyagePost {
    margin-bottom: 2%;
  }

  #custom-html-8n .flux-publicaton {
  border-radius:0px;
  }

    #custom-html-8n .flux_resultat {
        padding: 0px;
        margin: 15px 0px 0px 0px;
        /*width: 100%;*/
    }

  #custom-html-8n .container {
  padding: 0px;
  }
	
  #custom-html-8n .body-post-btn{
    width:100%;
  }

   #custom-html-8n .body-post-table{
    width:90%;
  }

  #custom-html-8n .body-post-driver{
    width:20%;
  }

  #custom-html-8n #card_Paiment_DivImg{
   width:85px;
  }

#custom-html-8n #mtnMoneyDivImg{
   width:95px;
  }

    #custom-html-8n #myDriveAccountDivIMg {
        width: 85px;
    }

#custom-html-8n #card_Paiment{
   width:60px; 
   height:50px;
  }

#custom-html-8n #mtnMoneyImg{
   width:60px; 
   height:50px;
  }

    #custom-html-8n #myAccount {
        width: 50px;
        height: 50px;
    }
#custom-html-8n .telEmailUser{
   display:none;
  }
#custom-html-8n .telEmailUserLink{
   float:left;
  }

}


#custom-html-8n .pagination {
  font-size: 12px;
  display: inline-block;
}
#custom-html-8n .pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  margin: 0 2px;
  cursor:pointer;
}
#custom-html-8n .pagination a.activePagination {
  background-color: #16a085;
  color: white;
  border-radius: 5px;
}
#custom-html-8n .pagination a:hover:not(.activePagination) {
  background-color: #ddd;
  border-radius: 5px;
}
#custom-html-8n .btnPostHistory {
  cursor: pointer;
  color: #999;
}
#custom-html-8n .btnPostHistory:hover {
  color: #000;
}
#custom-html-8n .arrow-nav:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
#custom-html-8n .arrow-nav:active {
  color: #16a085;
  background-color: inherit;
}
#custom-html-8n .mySlides {
    display: none;
    background: no-repeat center center fixed;
    background-size: cover;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
}
#custom-html-8n .indicator {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#custom-html-8n .indicator:hover {
  color: #000!important;
  background-color: #16a085!important;
}
#custom-html-8n .active-indicator {
  background-color: #16a085;
}
#custom-html-8n .nbre-passager-badge {
  position: relative;
}
#custom-html-8n .nbre-passager-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -20px;
  right: -6px;
  font-size: 9px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 19px;
  background: red;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}
#custom-html-8n .nbre-passager-badge-post-exp {
  position: relative;
}
#custom-html-8n .nbre-passager-badge-post-exp[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -15px;
  right: -3px;
  font-size: 11px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 23px;
  background: #999;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}

#custom-html-8n .input-group-modal {
    display: table;
    width: 100%;
}

#custom-html-8n .input-group-modal > * {
    display: table-cell;
    width: 50%;
}

#custom-html-8n .input-group-modal-date {
    width: 50%;
}

#custom-html-8n .input-group-modal-heure {
    width: 24%;
}

#custom-html-8n .input-group-modal-min {
    width: 24%;
}

#custom-html-8n .sous_menu_1 ul {
    margin: 0; 
    padding: 0;
    list-style-type: none;
	background-color:#CCC;
	font-size:12px;
}

#custom-html-8n .sous_menu_1 ul li{
    text-decoration: none;
    padding: 10px 10px;
    display:block;
	position: relative;
	cursor:pointer;
	border-top: 1px solid #aaa;
}
#custom-html-8n .sous_menu_1 ul li div{
    margin: -10px -10px;
	padding: 10px;
    display:block;
}
 
#custom-html-8n .sous_menu_1 ul li:hover, #custom-html-8n .sous_menu_1 ul li .current_menu_1 {
    /*color: #fff;*/
	text-decoration:underline;
	/*background-color:#eee;*/
}

#custom-html-8n .sous_menu_1 li .current_menu_1:hover:after, #custom-html-8n .sous_menu_1 li .current_menu_1:after{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #EEE;
  content: '';
  position: absolute;
  right: -2px;
  top: 0;
}

#custom-html-8n .sous_menu_2 ul {
    margin: 0; 
    padding: 0;
    list-style-type: none;
	font-size:10px;
	background-color:#CCC;
}

#custom-html-8n .sous_menu_2 ul li{
    text-decoration: none;
    color: black; 
    margin: 10px 10px;
    display:block;
	position: relative;
}
 
#custom-html-8n .sous_menu_2 ul li:hover, .sous_menu_2 ul li .current_menu_2 {
    color: #000;
	text-decoration:underline;
}

#custom-html-8n #listeMenuConducteur {
    display: none;
}

#custom-html-8n #listeMenuPassager {
    display: none;
}



@media only screen and (max-width: 768px) {
    #custom-html-8n .input-group-modal {
        display: table;
        width: 100%;
    }

    #custom-html-8n .input-group-modal > * {
        display: block;
    }

    #custom-html-8n .input-group-modal-date {
        width: 100%;
    }

    #custom-html-8n .input-group-modal-heure {
        width: 100%;
    }

    #custom-html-8n .input-group-modal-min {
        width: 100%;
    }
}

#custom-html-8n .stepTable {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #ccc;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
#custom-html-8n .stepTable.activeStepTable {
	opacity: 1;
	background-color: green;
}
#custom-html-8n .stepTable.finishTable {
  background-color: green;
}
#custom-html-8n .tableDc {
  display: none;
}
#custom-html-8n #devenirConducteurForm {
    display: none;
    /*padding: auto;*/
    min-width: 90%;
}

#custom-html-8p a {
  color: #DFDFDF;
}
#custom-html-8p .link-not-activated {
  color: #DFDFDF;
}
#custom-html-8p .link-not-activated:hover {
  cursor: auto;
  text-decoration: none;
}
#custom-html-8p ul {
  padding: 0;
  font-size: 38px;
  list-style: none;
}
#custom-html-8p .social-icon {
  color: #fff;
}
#custom-html-8p .social-icons li {
  display: inline;
}
#custom-html-8p .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
#custom-html-8p .social {
  cursor: pointer;
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
#custom-html-8v {
  /*---------- Debut Depart en vu css ----------*/
  /*---------- Fin Depart en vu css ----------*/
  /*---------- Debut mise en forme Modal ---------*/
  /*---------- Fin mise en forme Modal ---------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Mise en forme voyage en vu ----------*/
  /*---------- Fin Mise en forme voyage en vu ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut CSS image ----------*/
  /*---------- Fin CSS  image ----------*/
}
#custom-html-8v .menu1 .nav-btn {
  width: auto;
}
#custom-html-8v .hide-buttons .nav-btn {
  display: none !important;
}
#custom-html-8v .navbar-toggler {
  color: #74a3c7;
}
#custom-html-8v .close-icon::before,
#custom-html-8v .close-icon::after {
  background-color: #000;
}
#custom-html-8v .link,
#custom-html-8v .dropdown-item {
  color: black;
  font-family: 'Libre Franklin', serif;
}
#custom-html-8v .link {
  font-size: 0.8125rem;
}
#custom-html-8v .dropdown-item,
#custom-html-8v .nav-dropdown-sm .link {
  font-size: 0.880rem;
}
#custom-html-8v .link:hover,
#custom-html-8v .link:focus {
    color: #16a085;
}
#custom-html-8v .dropdown-item:hover::before,
#custom-html-8v .dropdown-item:focus::before {
  /*background: #16a085;*/
}
#custom-html-8v .dropdown-item:hover,
#custom-html-8v .dropdown-item:focus {
    color: #fff;
    background-color: #16a085;
}
#custom-html-8v .link[aria-expanded="true"],
#custom-html-8v .dropdown-menu {
  background: #fff;
}
#custom-html-8v .nav-dropdown-sm .link:focus,
#custom-html-8v .nav-dropdown-sm .link:hover,
#custom-html-8v .nav-dropdown-sm .dropdown-item:focus,
#custom-html-8v .nav-dropdown-sm .dropdown-item:hover {
    color: #fff !important;
    background-color: #16a085 !important;
}
#custom-html-8v .navbar,
#custom-html-8v .nav-dropdown-sm,
#custom-html-8v .nav-dropdown-sm .link[aria-expanded="true"],
#custom-html-8v .nav-dropdown-sm .dropdown-menu {
  background: #fff;
}
#custom-html-8v .bg-color.transparent .link {
  color: #16a085;
  transition: none;
}
#custom-html-8v .bg-color.transparent.opened .link {
  transition: color 0.2s ease-in-out;
}
#custom-html-8v .bg-color.transparent.opened .link:hover,
#custom-html-8v .bg-color.transparent.opened .link:focus {
    color: #16a085;
}
#custom-html-8v .link[aria-expanded="true"],
#custom-html-8v .dropdown-item[aria-expanded="true"] {
  color: #16a085!important;
}
#custom-html-8v .dynamic-badge {
  position: relative;
}
#custom-html-8v .dynamic-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -15px;
  right: -3px;
  font-size: 11px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 23px;
  background: red;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}
#custom-html-8v .badge {
    box-sizing: border-box;
    display: none;
    background-color: #2c3e50;
    color: #ffffff; 
    border-radius: 3rem;  /*As longe as this is bigger than the fontsize*/
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    padding: .1rem .7rem .1rem .8rem;
    line-height: inherit;
}
#custom-html-8v .badge--line {
    background-color: transparent;
    color: #95a5a6;
    box-shadow: 0 0 0 1px #95a5a6;
}
#custom-html-8v .badge--info {
    background-color: #3498db;
}
#custom-html-8v .badge--warning {
    background-color:#f1c40f;
}
    #custom-html-8v .badge--danger {
        background-color: #16a085;
    }
#custom-html-8v .badge--success {
    background-color: #2ecc71;
}
#custom-html-8v .badge--small {
    font-size: 1.2rem;
    padding: .1rem .65rem .2rem;
}
#custom-html-8v .badge--smaller {
    font-size: .7rem;
    /*padding: .05rem .4rem .15rem;*/
}
@media only screen and (max-width: 768px) {
    #custom-html-8v .badge {
       position:absolute;
       top:10px;
    }
    #custom-html-8v .navbar-toggler{
      color:#000;
    }
}

#custom-html-8v .modal.in .modal-dialog {
  position: fixed;
  bottom: 0px;
  right: 0px;
  margin: 0px;
}

#custom-html-8v .profileImgHeader {
  border-radius:50%;
  /*border: 1px solid #999;*/ 
  /*padding:3px; */
  /*position:absolute; */
  /*bottom:10px; */
  height:40px;
  width:40px;
}
#custom-html-8v .top-depart-en-vu-mobile{
  display:none;
}

#custom-html-8v #availableSearch{
  position:absolute;
  bottom:10px; 
  left:10px;
}

@media only screen and (max-width: 768px) {
    #custom-html-8v .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
  #custom-html-8v .tab-driver {
    display: none;
  }
  #custom-html-8v .label-price-to-left {
    float: left;
  }
  #custom-html-8v .profileImgHeader {
    border-radius:50%;
    /*border: 1px solid #999;*/ 
    /*padding:3px; */
    /*position:absolute; */
    /*bottom:5px; */
    height:40px;
    width:40px;
 }
#custom-html-8v .modalMobileWidth{
  width:100%;
}
#custom-html-8v .top-depart-en-vu-mobile{
  display:inline;
}
#custom-html-8v .cieName{
  font-size:12px;
}

#custom-html-8v #availableSearch{
	position: relative;
    top: -10px;
    left: -22px;
}

}
#custom-html-8v .voyageEnVu {
  border-top:1px solid #DDD;
  border-bottom:1px solid #DDD;
}
#custom-html-8v .voyageEnVu:hover {
  cursor: pointer;
  background-color: #FFF;
}
/*#custom-html-8v .badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: red;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}*/
#custom-html-8v [data-title] {
    position: relative;
}
#custom-html-8v [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#custom-html-8v [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
#custom-html-8v .info,
#custom-html-8v .success,
#custom-html-8v .warning,
#custom-html-8v .error,
#custom-html-8v .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-8v .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-8v .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-8v .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-8v .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#custom-html-8v .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8v .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8v .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8v .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8v .img-content:hover .deleteColorImg {
  display: inline-block;
}
#custom-html-8v .img-content {
  display: inline-block;
  position: relative;
}
#custom-html-8v .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#custom-html-8v .deleteColorImg:hover {
  color: green;
}
#custom-html-8v .deleteColorImg {
  color: #333;
  display: none;
}
#custom-html-8v .image-empty {
  border: 2px red solid;
}
#custom-html-8v .supprimerItem {
  color:#333; 
  cursor:pointer; 
  /*padding:20px 0;*/
}

    #custom-html-8v .supprimerItem:hover {
        /*text-decoration: underline;*/
        color: red;
    }

#custom-html-8u {
  /*---------- Debut mise en forme step ----------*/
  /* Make circles that indicate the steps of the form: */
  /* Mark the steps that are finished and valid: */
  /*---------- Fin mise en forme step ----------*/
  /*--------------Debut CSS Side Barre Filtre tri------------------------------*/
  /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
  /*--------------Debut CSS Side Barre Filtre tri--------------------------*/
  /*--------------CSS Pour L accodeon du filtre et du tri-------*/
  /*-----------Debut main principal---------*/
  /*------------Fin main princpal----------------*/
  /*--------------fin CSS accodeon filtre tri--------------*/
  /*------------ Debut Accordeon Pour Rechercher par ----------*/
  /*---------------Fin Accordeon Pour Tous les departs----------*/
  /*---------- Debut mise en forme input ----------*/
  /* LABEL ======================================= */
  /* active state */
  /* BOTTOM BARS ================================= */
  /* active state */
  /* HIGHLIGHTER ================================== */
  /* active state */
  /* ANIMATIONS ================ */
  /*---------- Fin mise en forme input ----------*/
  /*----------Debut bouton Devenir conducteur ----------*/
  /*---------- Fin bouton devenir conducteur ----------*/
  /*---------- Debut mise en forme placeholder ----------*/
  /*---------- Fin mise en forme placeholder ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut mise en forme block publication ----------*/
  /*---------- Fin mise en forme block publication ----------*/
  /*---------- Mise en forme devenir conducteur ----------*/
  /*---------- Fin Mise en forme devenir conducteur ----------*/
  /*---------- Debut centrage de tous les modalbox ----------*/
  /*---------- Fin centrage de tous les modalbox ----------*/
  /*---------- Debut mise en forme step-d-c ----------*/
  /* Make circles that indicate the steps of the form: */
  /* Mark the steps that are finished and valid: */
  /*---------- Fin mise en forme step ----------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Debut CSS upload image ----------*/
  /*---------- Fin CSS image ----------*/
  /*---------- Debut css arrow pour modal detail vehicule conducteur ----------*/
  /*---------- Fin css arrow pour modal detail vehicule conducteur ----------*/
  /*---------- Debut Css recap table ----------*/
  /*---------- Fin Css recap table ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut css pagination ----------*/
  /*---------- Fin css pagination ----------*/
  /*---------- Debut flex conteneur pour carte cadeau ----------*/
  /*---------- Debut flex conteneur pour carte cadeau ----------*/
  /*---------- Debut CSS autocomplte ---------*/
  /*---------- Fin CSS autocomplte ---------*/
  /*---------- Debut CSS Voyage complete ----------*/
  /*---------- Fin CSS Voyage complete ----------*/
}

#custom-html-8u hr.new2 {
  border-top: 1px dashed #999;
}

#custom-html-8u .btn-search {
  border: none;
  padding: 13px 10px 12.5px 10px;
}
#custom-html-8u .tab {
  display: none;
}
#custom-html-8u .tableDc {
  display: none;
}
#custom-html-8u .step {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #ccc;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
#custom-html-8u .step.activestep {
  opacity: 1;
  background-color:green;
}
#custom-html-8u .step.finish {
  background-color: green;
}
#custom-html-8u .wrapper {
  display: flex;
  align-items: stretch;
}
#custom-html-8u #sidebar {
  display:none;
  width: 250px;
  float: left;
  transition: all 0.2s;
}
#custom-html-8u #sidebar .sidebar-header {
  padding: 20px;
  background: #16a085;
  color: #fff;
}
#custom-html-8u .slidePhotoVehicule {
    width: 80%;
}
#custom-html-8u .detailsVehicule {
    width: 20%;
}
@media only screen and (max-width: 768px) {
  #custom-html-8u #sidebar {
    display:none;
    width:100%;
  }
    #custom-html-8u .slidePhotoVehicule {
        width: 100%;
    }

    #custom-html-8u .detailsVehicule {
        width: 100%;
    }
}

#custom-html-8u .flux_resultat {
    overflow-x: auto;
    font-size: 12px;
    padding: 0px 0px 0px 10px;
    /*width:75%;*/
}
@media only screen and (max-width: 768px) {
    #custom-html-8u .flux_resultat {
        padding:0px;
        margin: 15px 0px 0px 0px;
        /*width: 100%;*/
    }
}
#custom-html-8u .accordionDepart {
  background-color: inherit;
  color: #666;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #aaa;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: all 0.1s;
}
#custom-html-8u .active,
#custom-html-8u .accordionDepart:hover {
  background-color: #eee;
}
#custom-html-8u .accordionDepart:after {
  font-weight: bold;
  content: "\002B";
  color: #16a085;
  float: right;
  margin-left: 5px;
}
#custom-html-8u .active:after {
  font-weight: bold;
  content: "\2212";
}
#custom-html-8u .panelDepart {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  font-size: 12px;
  color: #000;
  transition: max-height 0.2s ease-out;
  position: relative;
  width: 100%;
  background-color:#FFF;
}
#custom-html-8u .group {
  position: relative;
}

#custom-html-8u input{
  font-size: 12px;
  padding: 10px 8px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #999999;
}
#custom-html-8u input:focus {
  outline: none;
}
#custom-html-8u textarea {
  font-size: 12px;
  padding: 8px 8px 8px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #999999;
}
#custom-html-8u textarea:focus {
  outline: none;
}
#custom-html-8u label {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-8u input:focus ~ label,
#custom-html-8u input:valid ~ label {
  top: -10px;
  font-size: 12px;
  /*color: black;*/
}
#custom-html-8u textarea:focus ~ label,
#custom-html-8u textarea:valid ~ label {
  top: -20px;
  font-size: 12px;
  color: green;
}
#custom-html-8u .bar {
  position: relative;
  display: block;
  width: 100%;
}
#custom-html-8u .bar:before,
#custom-html-8u .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: green;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-8u .bar:before {
  left: 50%;
}
#custom-html-8u .bar:after {
  right: 50%;
}
#custom-html-8u input:focus ~ .bar:before,
#custom-html-8u input:focus ~ .bar:after {
  width: 50%;
}
#custom-html-8u textarea:focus ~ .bar:before,
#custom-html-8u textarea:focus ~ .bar:after {
  width: 50%;
}
#custom-html-8u .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
#custom-html-8u input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
#custom-html-8u textarea:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
@-webkit-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-moz-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
#custom-html-8u .input-group {
  display: table;
  width: 100%;
}
#custom-html-8u .input-group > * {
  display: table-cell;
  width: 33%;
}

#custom-html-8u .input-group-modal {
  display: table;
  width: 100%;
}
#custom-html-8u .input-group-modal > * {
  display: table-cell;
  width: 50%;
}

#custom-html-8u .input-group-modal-date {
  width:50%;
}

#custom-html-8u .input-group-modal-heure{
  width:24%;
}

#custom-html-8u .input-group-modal-min{
  width:24%;
}
#custom-html-8u .input-group-h-regular-voyage {
  display: table;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  #custom-html-8u .devenirConducteur {
    width: 100%;
  }
  
   #custom-html-8u .search-input-value {
   margin: 80px 5px 0 5px;
  }

  #custom-html-8u .input-group {
   width: 100%;
   display: block;
  }
	
  #custom-html-8u .input-group-modal {
   display: table;
   width: 100%;
  }

  #custom-html-8u .input-group-modal > * {
   display: block;
  }

  #custom-html-8u .input-group-modal-date {
   width:100%;
  }

  #custom-html-8u .input-group-modal-heure{
   width:100%;
  }

  #custom-html-8u .input-group-modal-min{
   width:100%;
  }
  
  #custom-html-8u .input-group-h-regular-voyage {
   width: 100%;
  }

    #custom-html-8u .input-group > * {
        display: inline-block;
        width: 100%;
    }

}
#custom-html-8u ::-webkit-input-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-8u input:focus::-webkit-input-placeholder {
  color: red;
  opacity: 1;
  font-size: 12px;
}
#custom-html-8u ::-webkit-textarea-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-8u textarea:focus::-webkit-textarea-placeholder {
  color: red;
  opacity: 1;
  font-size: 12px;
}
#custom-html-8u .info,
#custom-html-8u .success,
#custom-html-8u .warning,
#custom-html-8u .error,
#custom-html-8u .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-8u .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-8u .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-8u .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-8u .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#custom-html-8u .flux-publicaton ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#custom-html-8u .mainCity {
  font-size: 12px;
  font-weight: bold;
  color:green;
}
#custom-html-8u .flux-publicaton {
  border: 1px solid #ccc;
  background-color: #FFF;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 0px;
}
#custom-html-8u .flux-publicaton:hover {
  background-color: inherit;
  border: none;
}

#custom-html-8u .body-post {
    width: 33%;
    display: inline-block;
}

#custom-html-8u .body-post-border-left {
    border-left: 1px solid #ccc;
}

#custom-html-8u .text-post {
  color: black;
}
@media only screen and (max-width: 768px) {
    #custom-html-8u .body-post {
        text-align: center;
        width: 100%;
        display: inline-block;
    }

    #custom-html-8u .body-post-border-left {
        border-left: 0px;
    }


  #custom-html-8u #dateVoyagePost {
    margin-bottom: 2%;
  }

  #custom-html-8u .flux-publicaton {
  border-radius:0px;
  margin-bottom:0px;
  }

    #custom-html-8u .flux_resultat {
        padding: 0px;
        margin: 15px 0px 0px 0px;
        /*width: 100%;*/
    }

  #custom-html-8u .container {
  padding: 0px;
  }
	
  #custom-html-8u .body-post-btn{
    width:100%;
  }

   #custom-html-8u .body-post-table{
    width:90%;
  }

  #custom-html-8u .body-post-driver{
    width:20%;
  }

}

#custom-html-8u #devenirConducteurForm {
    display: none;
    /*padding: auto;*/
    min-width: 90%;
}
@media (min-width: 768px) {
  #custom-html-8u .modal {
    text-align: center;
  }
  #custom-html-8u .modal:before {
    content: '';
    height: 100%;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
  }
  #custom-html-8u .modal .modal-dialog {
    text-align: left;
    margin: 10px auto;
    display: inline-block;
    vertical-align: middle;
  }
}
#custom-html-8u .stepTable {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #ccc;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
    #custom-html-8u .stepTable.activeStepTable {
        opacity: 1;
        background-color: green;
    }
#custom-html-8u .stepTable.finishTable {
  background-color: green;
}
@media only screen and (max-width: 768px) {
    #custom-html-8u .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
}
#custom-html-8u .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8u .image-input:hover {
  opacity: 0.3;
  cursor: pointer;
  filter: alpha(opacity=30);
}
#custom-html-8u .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8u .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8u .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8u .img-content:hover .deleteColorImg {
  display: inline-block;
}
#custom-html-8u .img-content {
  display: inline-block;
  position: relative;
}
#custom-html-8u .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#custom-html-8u .deleteColorImg:hover {
  color: green;
}
#custom-html-8u .deleteColorImg {
  cursor: pointer;
  color: #333;
  display: none;
}
#custom-html-8u .imgBtn {
  color: #999;
  cursor: pointer;
}
#custom-html-8u .imgBtn:hover {
  color: #16a085;
}
#custom-html-8u .image-empty {
  border: 2px solid red;
}
#custom-html-8u .focusedOnImg {
  border: 3px solid green;
}
#custom-html-8u .arrow-nav:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
#custom-html-8u .arrow-nav:active {
  color: #16a085;
  background-color: inherit;
}
#custom-html-8u .mySlides {
    display: none;
    background: no-repeat center center fixed;
    background-size: cover;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
}
#custom-html-8u .indicator {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#custom-html-8u .indicator:hover {
  color: #000!important;
  background-color: #16a085!important;
}
#custom-html-8u .active-indicator {
  background-color: #16a085;
}
#custom-html-8u #tabRecapAnnoncerDepart td {
  padding: 2px 10px;
  font-size:12px;
}
#custom-html-8u #recapDevenirConducteur td {
  font-size:12px;
  padding: 2px 10px;
}
#custom-html-8u [data-title] {
    position: relative;
}
#custom-html-8u [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#custom-html-8u [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
#custom-html-8u .pagination {
  display: inline-block;
}
#custom-html-8u .pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  margin: 0 2px;
  cursor:pointer;
}
#custom-html-8u .pagination a.activePagination {
  background-color: #16a085;
  color: white;
  border-radius: 5px;
}
#custom-html-8u .pagination a:hover:not(.activePagination) {
  background-color: #ddd;
  border-radius: 5px;
}
#custom-html-8u .flex-container {
  display: flex;
  flex-wrap: wrap;
}
#custom-html-8u .flex-container > div {
  width: 50%;
  height: auto;
}
#custom-html-8u .autoCompleteListeDepart {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-top: none;
  /*position the autocomplete items to be the same width as the container:*/
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 315px;
  overflow: hidden;
}
#custom-html-8u .autoCompleteListeArrivee {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-top: none;
  /*position the autocomplete items to be the same width as the container:*/
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 315px;
  overflow: hidden;
}
#custom-html-8u .autoComplete-item {
  cursor: pointer;
  background-color: #FAFAFA;
  padding: 10px 10px;
}
#custom-html-8u .autoComplete-item:hover {
  background-color: #e9e9e9;
}
#custom-html-8u .autocomplete-active {
  background-color: #e9e9e9;
}
#custom-html-8u .voyageComplete {
  opacity: 0.3;
  pointer-events: none;
  filter: alpha(opacity=30);
}
#custom-html-8u .switch-filtre {
  float:right;
}

#custom-html-8u .filtre-resultat {
  font-size:12px;
  color:#999;
  margin: 5px;
  color:black;
  float:right;
}


#custom-html-8u #card_Paiment_DivImg{
   width:150px;
  }

#custom-html-8u #mtnMoneyDivImg{
   width:170px;
  }

#custom-html-8u #myDriveAccountDivIMg {
    width: 150px;
}

#custom-html-8u #card_Paiment{
   width:100px; 
   height:80px; 
  }

#custom-html-8u #mtnMoneyImg{
   width:100px; 
   height:80px;  
  }

#custom-html-8u #myAccount {
    width: 80px;
    height: 80px;
}
#custom-html-8u #divValeurPrixVoyage{
   width:78%;
  }

#custom-html-8u #divValeurDevisePrixVoyage{
    width:20%;
  }

#custom-html-8u .btn-search {
   background-color:inherit; 
   color:#000; 
   border-radius: 0;
  }

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

#custom-html-8u .container-filtre-resultat {
  padding:5px;
}

#custom-html-8u .switch-filtre {
  display:inline-block;
}

#custom-html-8u .str-resultat {
  text-align:center;
}

#custom-html-8u .filtre-resultat {
  float:none;
}

#custom-html-8u #card_Paiment_DivImg{
   width:85px;
  }

#custom-html-8u #mtnMoneyDivImg{
   width:95px;
  }

    #custom-html-8u #myDriveAccountDivIMg {
        width: 85px;
    }

#custom-html-8u #card_Paiment{
   width:60px; 
   height:50px;
  }

#custom-html-8u #mtnMoneyImg{
   width:60px; 
   height:50px;
  }

    #custom-html-8u #myAccount {
        width: 50px;
        height: 50px;
    }

#custom-html-8u #heureMin2Points{
   display:none;
  }

#custom-html-8u #divValeurPrixVoyage{
    width:75%; 
   display:inline-block;
  }

#custom-html-8u #divValeurDevisePrixVoyage{
   width:20%; 
   display:inline-block;
  }

#custom-html-8u .btn-search {
	width: 100%;
    margin-top:20px;
    color:#000;
    border: none;
    background-color:#fff;
  }
  
#custom-html-8u .filterResltDiv {
  /*display: flex;*/
  flex-wrap: wrap;
  }
}

#custom-html-8u .b {
  display: block;
}

#custom-html-8u .toggle {
  position: relative;
  width: 60px;
  height: 25px;
  border-radius: 100px;
  background-color: #ddd;
  overflow: hidden;
  margin-bottom:0px;
  box-shadow: inset 0 0 2px 1px rgba(0,0,0,.05);
}

#custom-html-8u .check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}

#custom-html-8u .check:checked ~ .track {
    box-shadow: inset 0 0 0 20px #16a085;
  }

#custom-html-8u .check:checked ~ .switch {
    right: 2px;
    left: 22px;
    transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
    transition-property: left, right;
    transition-delay: .05s, 0s;
  }

#custom-html-8u .switch {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 22px;
  background-color: #fff;
  border-radius: 36px;
  z-index: 1;
  transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
  transition-property: left, right;
  transition-delay: 0s, .05s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#custom-html-8u .track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
  border-radius: 40px;
}
#custom-html-8u .weekDays-selector input {
  display: none!important;
}
#custom-html-8u .weekDays-selector input[type="checkbox"] + label {
  display: inline-block;
  border-radius: 6px;
  background: #dddddd;
  height: 40px;
  width: 30px;
  margin-right: 3px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
#custom-html-8u .weekDays-selector input[type="checkbox"]:checked + label {
  background-color: #16a085;
  color: #ffffff;
}

#custom-html-8u .date-flux {
    color: #666;
    padding: 8px 8px;
    font-size: 12px;
    background-color: inherit;
}

#custom-html-8u .filtreElement {
    color: #666;
}

@media only screen and (max-width: 768px) {
    #custom-html-8u .date-flux {
        color: #FFF;
        background-color: #16a085;
    }
}

#custom-html-8u .btn-carre {
    margin:10px 0px 10px 10px; 
	border: 1px solid #16a085; 
	padding:15px 0px; 
	border-radius:5px 5px 5px 5px; 
	width:100%; 
	position:relative; 
	cursor:pointer;
	background-color:#16a085;
	color:#FFF;
}
#custom-html-8u .btn-carre:hover {
	color:#16a085;
	background-color:#EEE;
}

#custom-html-8u .btn-carre-outline {
    margin:10px 0px 10px 0px; 
	border: 1px solid #16a085; 
	padding:15px 0px; 
	border-radius:5px 5px 5px 5px; 
	width:100%; 
	position:relative; 
	cursor:pointer;
	background-color:#FFF;
	color:#666;
}

#custom-html-8u .btn-carre-outline:hover {
	color:#666;
	background-color:#EEE;
	text-decoration:underline;
}


#custom-html-8u .div-parent-btn-carre-double-btn {
	text-align:center; 
	display:flex;  
	margin: auto;
    width:70%; 
}

#custom-html-8u .optradioLabel {
	color:#333;
}

#custom-html-8u .optradioLabel:hover {
	color:#16a085;
}

@media only screen and (max-width: 768px) {
    #custom-html-8u .div-parent-btn-carre-double-btn {
        width:95%; 
    }
}


#custom-html-8u .arrow-right {
	cursor: pointer;
	color: #16a085;
	position:absolute;
	top:50%;
	transform:translate(0%,-50%);
	-ms-transform:translate(0%,-50%);
	right:0%; 
	border:none;
	display:inline-block;
	padding:12px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	white-space:nowrap; 
	background-color:#EEE;  
	font-size:14px;
}

#custom-html-8u .arrow-left {
	cursor: pointer;
	color: #16a085;
	position:absolute;
	top:50%;
	transform:translate(0%,-50%);
	-ms-transform:translate(-0%,-50%);
	left:0%; 
	border:none;
	display:inline-block;
	padding:12px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	white-space:nowrap; 
	background-color:#EEE;  
	font-size:14px;
}

#custom-html-8u .annoncer_depart_form {
    width:48%; 
	position:relative;  
	margin:35px 15px 15px 15px;
	min-height: 250px;
}
#custom-html-8u .annoncer_depart_map{
    width:52%; 
	overflow: hidden; 
	position:relative;
}

#custom-html-8u .annoncer_depart_estimer_temps{
    right:0px; 
	margin:10px; 
	position:absolute; 
	font-size:12px
}

#custom-html-8u .no-result-found {
	text-align:center; 
	overflow:auto; 
	border-radius: 5px; 
	background-color: #FFF; 
	padding: 20px; 
	border:1px solid #999;
	margin-left:-10px;
}

@media only screen and (max-width: 768px) {
    #custom-html-8u .arrow-right  {
       top:90%; 
    }
	#custom-html-8u .arrow-left {
        top:90%; 
    }
	
	#custom-html-8u .annoncer_depart_form {
		width:100%; 
	}
	#custom-html-8u .annoncer_depart_map{
		display:none;
	}
	#custom-html-8u .annoncer_depart_estimer_temps{
		display:none;
	}
	
	#custom-html-8u .no-result-found {
		margin:5px;
	}

}

#msg-box2-95 H1 {
  color: #ffffff;
}
#msg-box2-95 P {
  color: #ffffff;
}
#custom-html-8x a {
  color: #DFDFDF;
}
#custom-html-8x .link-not-activated {
  color: #DFDFDF;
}
#custom-html-8x .link-not-activated:hover {
  cursor: auto;
  text-decoration: none;
}
#custom-html-8x ul {
  padding: 0;
  font-size: 38px;
  list-style: none;
}
#custom-html-8x .social-icon {
  color: #fff;
}
#custom-html-8x .social-icons li {
  display: inline;
}
#custom-html-8x .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
#custom-html-8x .social {
  cursor: pointer;
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
#menu1-98 {
  /*---------- Debut Depart en vu css ----------*/
  /*---------- Fin Depart en vu css ----------*/
  /*---------- Debut mise en forme Modal ---------*/
  /*---------- Fin mise en forme Modal ---------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Mise en forme voyage en vu ----------*/
  /*---------- Fin Mise en forme voyage en vu ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut CSS image ----------*/
  /*---------- Fin CSS  image ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
}
#menu1-98 .menu1 .nav-btn {
  width: auto;
}
#menu1-98 .hide-buttons .nav-btn {
  display: none !important;
}
#menu1-98 .navbar-toggler {
  color: #74a3c7;
}
#menu1-98 .close-icon::before,
#menu1-98 .close-icon::after {
  background-color: #000;
}
#menu1-98 .link,
#menu1-98 .dropdown-item {
  color: #000000;
  font-family: 'Libre Franklin', serif;
}
#menu1-98 .link {
  font-size: 0.8125rem;
}
#menu1-98 .dropdown-item,
#menu1-98 .nav-dropdown-sm .link {
  font-size: 0.880rem;
}
#menu1-98 .link:hover,
#menu1-98 .link:focus {
    color: #16a085;
}
#menu1-98 .dropdown-item:hover::before,
#menu1-98 .dropdown-item:focus::before {
  /*background: #16a085;*/
}
#menu1-98 .dropdown-item:hover,
#menu1-98 .dropdown-item:focus {
    color: #fff;
    background-color: #16a085;
}
#menu1-98 .link[aria-expanded="true"],
#menu1-98 .dropdown-menu {
  background: #ffffff;
}
#menu1-98 .nav-dropdown-sm .link:focus,
#menu1-98 .nav-dropdown-sm .link:hover,
#menu1-98 .nav-dropdown-sm .dropdown-item:focus,
#menu1-98 .nav-dropdown-sm .dropdown-item:hover {
    color: #fff !important;
    background-color: #16a085 !important;
}
#menu1-98 .navbar,
#menu1-98 .nav-dropdown-sm,
#menu1-98 .nav-dropdown-sm .link[aria-expanded="true"],
#menu1-98 .nav-dropdown-sm .dropdown-menu {
  background: #fff;
}
#menu1-98 .bg-color.transparent .link {
  color: #16a085;
  transition: none;
}
#menu1-98 .bg-color.transparent.opened .link {
  transition: color 0.2s ease-in-out;
}
#menu1-98 .bg-color.transparent.opened .link:hover,
#menu1-98 .bg-color.transparent.opened .link:focus {
    color: #16a085;
}
#menu1-98 .link[aria-expanded="true"],
#menu1-98 .dropdown-item[aria-expanded="true"] {
  color: #16a085!important;
}
#menu1-98 .dynamic-badge {
  position: relative;
}
#menu1-98 .dynamic-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -15px;
  right: -3px;
  font-size: 11px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 23px;
  background: red;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}



#menu1-98 .badge {
    box-sizing: border-box;
    display: none;
    background-color: #2c3e50;
    color: #ffffff; 
    border-radius: 3rem;  /*As longe as this is bigger than the fontsize*/
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    padding: .1rem .7rem .1rem .8rem;
    line-height: inherit;
}
#menu1-98 .badge--line {
    background-color: transparent;
    color: #95a5a6;
    box-shadow: 0 0 0 1px #95a5a6;
}
#menu1-98 .badge--info {
    background-color: #3498db;
}
#menu1-98 .badge--warning {
    background-color:#f1c40f;
}
    #menu1-98 .badge--danger {
        background-color: #16a085;
    }
#menu1-98 .badge--success {
    background-color: #2ecc71;
}
#menu1-98 .badge--small {
    font-size: 1.2rem;
    padding: .1rem .65rem .2rem;
}
#menu1-98 .badge--smaller {
    font-size: .7rem;
    /*padding: .05rem .4rem .15rem;*/
}
#menu1-98 #availableSearch{
  position:absolute;
  bottom:10px; 
  left:10px;
}
@media only screen and (max-width: 768px) {
    #menu1-98 .badge {
       position:absolute;
       top:10px;
    }
    #menu1-98 .navbar-toggler{
      color:#000;
    }
}

#menu1-98 .modal.in .modal-dialog {
  position: fixed;
  bottom: 0px;
  right: 0px;
  margin: 0px;
}

#menu1-98 .profileImgHeader {
  border-radius:50%;
  /*border: 1px solid #999;*/ 
  /*padding:3px; */
  /*position:absolute; */
  /*bottom:10px; */
  height:40px;
  width:40px;
}
#menu1-98 .top-depart-en-vu-mobile{
  display:none;
}

@media only screen and (max-width: 768px) {
    #menu1-98 .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
  #menu1-98 .tab-driver {
    display: none;
  }
  #menu1-98 .label-price-to-left {
    float: left;
  }
  #menu1-98 .profileImgHeader {
    border-radius:50%;
    /*border: 1px solid #999;*/ 
    /*padding:3px; */
    /*position:absolute; */
    /*bottom:5px; */
    height:40px;
    width:40px;
 }
#menu1-98 .modalMobileWidth{
  width:100%;
}
#menu1-98 .top-depart-en-vu-mobile{
  display:inline;
}
#menu1-98 .cieName{
  font-size:12px;
}

#menu1-98 #availableSearch{
  position: relative;
  top: -10px;
  left: -22px;
}

}
#menu1-98 .voyageEnVu {
  border-top:1px solid #DDD;
  border-bottom:1px solid #DDD;
}
#menu1-98 .voyageEnVu:hover {
  cursor: pointer;
  background-color: #FFF;
}
#menu1-98 [data-title] {
    position: relative;
}
#menu1-98 [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#menu1-98 [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
#menu1-98 .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#menu1-98 .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#menu1-98 .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#menu1-98 .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#menu1-98 .img-content:hover .deleteColorImg {
  display: inline-block;
}
#menu1-98 .img-content {
  display: inline-block;
  position: relative;
}
#menu1-98 .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#menu1-98 .deleteColorImg:hover {
  color: green;
}
#menu1-98 .deleteColorImg {
  color: #333;
  display: none;
}
#menu1-98 .image-empty {
  border: 2px red solid;
}
#menu1-98 .info,
#menu1-98 .success,
#menu1-98 .warning,
#menu1-98 .error,
#menu1-98 .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#menu1-98 .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#menu1-98 .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#menu1-98 .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#menu1-98 .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#menu1-98 .supprimerItem {
  color:#333; 
  cursor:pointer; 
  /*padding: 0 0;*/
}
    #menu1-98 .supprimerItem:hover {
        /*text-decoration: underline;*/
        color: red;
    }

#custom-html-9a {
  /*---------- Debut mise en forme input ----------*/
  /* LABEL ======================================= */
  /* active state */
  /* BOTTOM BARS ================================= */
  /* active state */
  /* HIGHLIGHTER ================================== */
  /* active state */
  /* ANIMATIONS ================ */
  /*---------- Fin mise en forme input ----------*/
  /*---------- Debut Personnalisation message d'erreur ----------*/
  /*---------- Fin Personnalisation message d'erreur ----------*/
  /*---------- Debut css Tooltip ----------*/
  /*---------- Fin css Tooltip ----------*/
  /*---------- Debut css pour Slide vehicule  ----------*/
  /*---------- Fin css pour Slide vehicule ----------*/
  /*---------- Debut centrage de tous les modalbox ----------*/
  /*---------- Fin centrage de tous les modalbox ----------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Debut css mise en forme returnLinkbtn ----------*/
  /*---------- Fin css mise en forme returnLinkbtn ----------*/
  /*---------- Debut CSS image ----------*/
  /*---------- Fin CSS  image ----------*/
  /*---------- Debut mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Fin mise en forme button de navigation quand ecran mobile ----------*/
  /*---------- Debut Css ligne de soulignement pour table solde ----------*/
  /* Dashed red border */
  /*---------- Debut Css ligne de soulignement pour table solde ----------*/
}

#custom-html-9a .group {
  position: relative;
}
    #custom-html-9a input {
        font-size: 12px;
        padding: 10px 8px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #999999;
		background-color: inherit;
    }
#custom-html-9a input:focus {
  outline: none;
}
#custom-html-9a label {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-9a input:focus ~ label,
#custom-html-9a input:valid ~ label {
  top: -10px;
  font-size: 12px;
  /*color: black;*/
}
#custom-html-9a .bar {
  position: relative;
  display: block;
  width: 100%;
}
#custom-html-9a .bar:before,
#custom-html-9a .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: green;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
}
#custom-html-9a .bar:before {
  left: 50%;
}
#custom-html-9a .bar:after {
  right: 50%;
}
#custom-html-9a input:focus ~ .bar:before,
#custom-html-9a input:focus ~ .bar:after {
  width: 50%;
}
#custom-html-9a .highlight {
  position: absolute;
  height: 60%;
  width: 10px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
#custom-html-9a input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}



@-webkit-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-moz-keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: green;
  }
  to {
    width: 0;
    background: transparent;
  }
}
#custom-html-9a .input-group {
  display: table;
  width: 100%;
}
#custom-html-9a .input-group > * {
  display: table-cell;
  width: 50%;
}
#custom-html-9a ::-webkit-input-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-9a input:focus::-webkit-input-placeholder {
  color: red;
  opacity: 1;
  font-size: 12px;
}
#custom-html-9a ::-webkit-textarea-placeholder {
  opacity: 0;
  font-size: 12px;
  transition: 0.2s;
}
#custom-html-9a textarea:focus::-webkit-textarea-placeholder {
  color: red;
  opacity: 1;
  font-size: 12px;
}
#custom-html-9a .info,
#custom-html-9a .success,
#custom-html-9a .warning,
#custom-html-9a .error,
#custom-html-9a .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-9a .info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-9a .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-9a .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-9a .error {
  color: #D8000C;
  background-color: #FFBABA;
}
#custom-html-9a [data-title] {
    position: relative;
}
#custom-html-9a [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -41px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10000;
}
#custom-html-9a [data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}

#custom-html-9a .arrow-nav:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
#custom-html-9a .arrow-nav:active {
  color: #16a085 ;
  background-color: inherit;
}
#custom-html-9a .mySlides {
    display: none;
    background: no-repeat center center fixed;
    background-size: cover;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
}
#custom-html-9a .indicator {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#custom-html-9a .indicator:hover {
  color: #000!important;
  background-color: #16a085!important;
}
#custom-html-9a .active-indicator {
  background-color: #16a085;
}

#custom-html-9a .indicator-modal {
    height: 12px;
    width: 12px;
    margin: 0 2px;
    cursor: pointer;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

#custom-html-9a .indicator-modal:hover {
    color: #000 !important;
    background-color: #16a085 !important;
}

#custom-html-9a .active-indicator-modal {
    background-color: #16a085;
}

@media (min-width: 768px) {
  #custom-html-9a .modal {
    text-align: center;
  }
  #custom-html-9a .modal:before {
    content: '';
    height: 100%;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
  }
  #custom-html-9a .modal .modal-dialog {
    text-align: left;
    margin: 10px auto;
    display: inline-block;
    vertical-align: middle;
  }
}
@media only screen and (max-width: 768px) {
    #custom-html-9a .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
}
#custom-html-9a #retourLink {
  display: none;
  float: left;
  width: 100%;
  color: #000;
  padding-bottom: 15px;
  cursor: pointer;
  padding-left:5px;
}
#custom-html-9a #retourLink:hover {
  color: #16a085;
  /*text-decoration: underline;*/
}
#custom-html-9a .image-input {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-9a .image-input:hover {
  opacity: 0.3;
  cursor: pointer;
  filter: alpha(opacity=30);
}
#custom-html-9a .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-9a .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-9a .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-9a .img-content:hover .deleteColorImg {
  display: inline-block;
}
#custom-html-9a .img-content {
  display: inline-block;
  position: relative;
}
#custom-html-9a .img-content a {
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#custom-html-9a .deleteColorImg:hover {
  color: green;
}
#custom-html-9a .deleteColorImg {
  color: #333;
  display: none;
}
#custom-html-9a .image-empty {
  border: 2px red solid;
}
@media only screen and (max-width: 768px) {
    #custom-html-9a .btn-nav {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: .375rem 1.6rem;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 1.4rem;
        transition: all .2s;
    }
  #custom-html-9a .tab-driver {
    display: none;
  }
  #custom-html-9a .label-price-to-left {
    float: left;
  }
}
#custom-html-9a hr.new2 {
  border-top: 1px dashed #999;
}

#custom-html-9a #detailDepart {
    width:74%;
    min-height:630px;
  }

#custom-html-9a #detailsConducteur {
    width:25%;
  }

#custom-html-9a #klkInfosPaiement {
    width:25%;
  }

#custom-html-9a #blockInfosVehicule {
    width:25%;
  }

#custom-html-9a #aBord {
    width:74%;
  }
#custom-html-9a #passagerABord {
    width:74%;
  }

#custom-html-9a #commentaireDuConducteur, #custom-html-9a #avisPassager {
    width: 74%;
}

#custom-html-9a #detailsAbord {
    width:74%;
  }

#custom-html-9a .slidePhotoVehicule{
   width:80%;
  }

#custom-html-9a .detailsVehicule{
   width:20%;
  }

#custom-html-9a #card_Paiment_DivImg{
   width:150px;
  }

#custom-html-9a #mtnMoneyDivImg{
   width:170px;
  }

#custom-html-9a #myDriveAccountDivIMg {
    width: 150px;
}

#custom-html-9a #card_Paiment{
   width:100px; 
   height:80px; 
  }

#custom-html-9a #mtnMoneyImg{
   width:100px; 
   height:80px;  
  }

#custom-html-9a #myAccount {
    width: 80px;
    height: 80px;
}

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

#custom-html-9a .container {
    padding:0 10px;
  }

#custom-html-9a #detailDepart {
    width:100%;
  }

#custom-html-9a #detailsConducteur {
    width:100%;
    /*margin-top:10px;*/
  }

    #custom-html-9a #klkInfosPaiement {
        width: 100%;
        margin-top: 10px;
    }

#custom-html-9a #blockInfosVehicule {
    width:100%;
  }

#custom-html-9a #aBord {
    width:100%;
  }
#custom-html-9a #passagerABord {
    width:100%;
  }

#custom-html-9a #commentaireDuConducteur, #custom-html-9a #avisPassager {
    width: 100%;
}

#custom-html-9a #detailsAbord {
    width:100%;
  }

#custom-html-9a .tab-retourBtn-link{
    margin-top:70px;
  }

#custom-html-9a .slidePhotoVehicule{
   width:100%;
  }

#custom-html-9a .detailsVehicule{
   width:100%;
  }


#custom-html-9a #card_Paiment_DivImg{
   width:85px;
  }

#custom-html-9a #mtnMoneyDivImg{
   width:95px;
  }

    #custom-html-9a #myDriveAccountDivIMg {
        width: 85px;
    }

#custom-html-9a #card_Paiment{
   width:60px; 
   height:50px;
  }

#custom-html-9a #mtnMoneyImg{
   width:60px; 
   height:50px;
  }

    #custom-html-9a #myAccount {
        width: 50px;
        height: 50px;
    }
#custom-html-9a .telEmailUser{
   display:none;
  }
#custom-html-9a .telEmailUserLink{
   float:left;
  }
}
#custom-html-9a .voyageEnVuCourant {
  border-top:1px solid #DDD;
  border-bottom:1px solid #DDD;
}
#custom-html-9a .voyageEnVuCourant:hover {

}
#custom-html-9a .weekDays-selector input {
  display: none!important;
}
#custom-html-9a .weekDays-selector input[type="checkbox"] + label {
  display: inline-block;
  border-radius: 6px;
  background: #dddddd;
  height: 20px;
  width: 60px;
  margin-right: 3px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
 
}
#custom-html-9a .weekDays-selector input[type="checkbox"]:checked + label {
  background-color: #16a085;
  color: #ffffff;
}

#custom-html-9a .btn-dtv-sm {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    width: 100%;
}

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

    #custom-html-9a .btn-dtv-sm {
       width:100%;
    }
	
	#custom-html-9a .btn-dtv-fixed {
		position: fixed;
		bottom: 0;
		left: 5%;
		right: 5%;
		z-index: 10;
		width: 90%;
		border:1px solid #fff;
    }
}

#custom-html-9a .input-group-modal {
    display: table;
    width: 100%;
}
#custom-html-9a .input-group-modal > * {
    display: table-cell;
    width: 50%;
}
#custom-html-9a .input-group-modal-date {
    width: 50%;
}
#custom-html-9a .input-group-modal-heure {
    width: 24%;
}
#custom-html-9a .input-group-modal-min {
    width: 15%;
    height:25px;
    float:right;
}

#custom-html-9a .visa-master-card {
    width: 24%;
}

#custom-html-9a .imgBtn {
    color: #FFF;
    cursor: pointer;
}

#custom-html-9a .imgBtn:hover {
    color: #CCC;
}

#custom-html-9a .comment {
    /*border: 1px solid #ccc;*/
	/*border-left: 5px solid #16a085;*/
    padding: 0 1% 1% 3%;
    margin-bottom: 1%;
    padding: 10px;
    border-radius: 0 5px 5px 0;
    font-size: 12px;
    /*background-color: #FFF;*/
}

#custom-html-9a .comment-header {
    /*margin-bottom: 1%;*/
}

#custom-html-9a .comment-text {
    color:#666;
    margin-top:-15px;
    margin-bottom:5px;
}



@media only screen and (max-width: 768px) {
    #custom-html-9a .input-group-modal {
        display: table;
        width: 100%;
    }

    #custom-html-9a .input-group-modal > * {
        display: block;
    }

    #custom-html-9a .input-group-modal-date {
        width: 100%;
    }

    #custom-html-9a .input-group-modal-heure {
        width: 100%;
    }

    #custom-html-9a .input-group-modal-min {
        width: 100%;
    }
    #custom-html-9a .visa-master-card {
        width: 20%;
    }
	#custom-html-9a #detailsAbord > div {
        padding: 0 10px;
    }
	#custom-html-9a #avisPassager > div:first-of-type {
        padding: 0 10px;
    }
	#custom-html-9a #passagerABord > div {
        padding: 0 10px;
    }
}

#custom-html-9a textarea {
    font-size: 12px;
    padding: 8px 8px 8px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #999999;
	background-color: inherit;
}

#custom-html-9a textarea:focus {
    outline: none;
}

#custom-html-9a textarea:focus ~ label,
#custom-html-9a textarea:valid ~ label {
    top: -20px;
    font-size: 12px;
    color: green;
}

#custom-html-9a textarea:focus ~ .bar:before,
#custom-html-9a textarea:focus ~ .bar:after {
    width: 50%;
}

#custom-html-9a textarea:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

#custom-html-9a ::-webkit-textarea-placeholder {
opacity: 0;
font-size: 12px;
transition: 0.2s;
}

#custom-html-9a textarea:focus::-webkit-textarea-placeholder {
color: red;
opacity: 1;
font-size: 12px;
}

#custom-html-9a .badge {
    box-sizing: border-box;
    display: none;
    background-color: #2c3e50;
    color: #ffffff; 
    border-radius: 3rem;  /*As longe as this is bigger than the fontsize*/
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    padding: .1rem .7rem .1rem .8rem;
    line-height: inherit;
}
#custom-html-9a .badge--line {
    background-color: transparent;
    color: #95a5a6;
    box-shadow: 0 0 0 1px #95a5a6;
}
#custom-html-9a .badge--info {
    background-color: #3498db;
}
#custom-html-9a .badge--warning {
    background-color:#f1c40f;
}
    #custom-html-9a .badge--danger {
        background-color: #16a085;
    }
#custom-html-9a .badge--success {
    background-color: #2ecc71;
}
#custom-html-9a .badge--small {
    font-size: 1.2rem;
    padding: .1rem .65rem .2rem;
}
#custom-html-9a .badge--smaller {
    font-size: 10px;
    /*padding: .05rem .4rem .15rem;*/
}
#custom-html-9a .customTextLink {
	color:#000;
	cursor:pointer;
	font-size:12px;
}
#custom-html-9a .customTextLink:hover {
	text-decoration:underline;
}
@media only screen and (max-width: 768px) {
    #custom-html-9a .badge {
       /*position:absolute;*/
       top:10px;
    }
    #custom-html-9a .navbar-toggler{
      color:#000;
    }
}

#custom-html-9a #avisPassager div.stars {
    display: inline-block;
}

#custom-html-9a #avisPassager input.star {
    display: none;
}

#custom-html-9a #avisPassager label {
    pointer-events: auto;
}

#custom-html-9a #avisPassager label.star {
    float: right;
    padding: 10px;
    font-size: 20px;
    color: #666;
    position: relative;
    transition: all .2s;
}

#custom-html-9a #avisPassager input.star:checked ~ label.star:before {
    content: '\f005';
    color: orange;
    transition: all .25s;
}

#custom-html-9a #avisPassager input.star-5:checked ~ label.star:before {
    color: orange;
    text-shadow: 0 0 20px #952;
}

#custom-html-9a #avisPassager .userComment input.star-5:checked ~ label.star:before {
    color: orange;
    text-shadow: 0 0 0;
}

#custom-html-9a #avisPassager .userComment label {
    pointer-events: none;
}

    #custom-html-9a #avisPassager .userComment label.star {
        font-size: 14px;
        padding: 5px;
    }

#custom-html-9a #avisPassager input.star-1:checked ~ label.star:before {
    color: #F62;
}

#custom-html-9a #avisPassager label.star:hover {
    transform: rotate(-15deg) scale(1.3);
}

#custom-html-9a #avisPassager label.star:before {
    content: '\f006';
    font-family: FontAwesome;
}


#custom-html-9a .arrow-right {
	cursor: pointer;
	color: #16a085;
	position:absolute;
	top:50%;
	transform:translate(0%,-50%);
	-ms-transform:translate(0%,-50%);
	right:0%; 
	border:none;
	display:inline-block;
	padding:12px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	white-space:nowrap; 
	background-color:#EEE;  
	font-size:14px;
}

#custom-html-9a .arrow-left {
	cursor: pointer;
	color: #16a085;
	position:absolute;
	top:50%;
	transform:translate(0%,-50%);
	-ms-transform:translate(-0%,-50%);
	left:0%; 
	border:none;
	display:inline-block;
	padding:12px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	white-space:nowrap; 
	background-color:#EEE;  
	font-size:14px;
}

@media only screen and (max-width: 768px) {
    #custom-html-9a .arrow-right  {
       top:90%; 
    }
	#custom-html-9a .arrow-left {
        top:90%; 
    }
}


#connectedFooter a {
    color: #DFDFDF;
}

#connectedFooter .link-not-activated {
    color: #DFDFDF;
}

#connectedFooter .link-not-activated:hover {
    cursor: auto;
    text-decoration: none;
}

#connectedFooter ul {
    padding: 0;
    font-size: 38px;
    list-style: none;
}

#connectedFooter .social-icon {
    color: #fff;
}

#connectedFooter .social-icons li {
    display: inline;
}

#connectedFooter .social:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}

#connectedFooter .social {
    cursor: pointer;
    -webkit-transform: scale(0.8);
    /* Browser Variations: */
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}


#notConnectedFooter a {
    color: #DFDFDF;
}

#notConnectedFooter .link-not-activated {
    color: #DFDFDF;
}

    #notConnectedFooter .link-not-activated:hover {
        cursor: auto;
        text-decoration: none;
    }

#notConnectedFooter ul {
    padding: 0;
    font-size: 38px;
    list-style: none;
}

#notConnectedFooter .social-icon {
    color: #fff;
}

#notConnectedFooter .social-icons li {
    display: inline;
}

#notConnectedFooter .social:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}

#notConnectedFooter .social {
    cursor: pointer;
    -webkit-transform: scale(0.8);
    /* Browser Variations: */
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

    #custom-html-100 .arrow-nav:hover {
        opacity: 0.3;
        filter: alpha(opacity=30);
    }

    #custom-html-100 .y-us-title-border {
        background: #16a085 none repeat scroll 0 0;
        border-radius: 2px;
        display: inline-block;
        height: 3px;
        position: relative;
        width: 30%;
    }

    #custom-html-8d .switch-filtre {
        float: right;
    }

    #custom-html-8d .filtre-resultat {
        font-size: 12px;
        color: #999;
        margin: 5px;
        color: black;
        float: right;
    }

    #custom-html-8d .btn-search {
        background-color: inherit;
        color: #000;
        border-radius: 0;
    }

#custom-html-8d .slidePhotoVehicule {
    width: 80%;
}

#custom-html-8d .detailsVehicule {
    width: 20%;
}


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

        #custom-html-8d .container-filtre-resultat {
            padding: 5px;
        }

        #custom-html-8d .switch-filtre {
            display: inline-block;
        }

        #custom-html-8d .str-resultat {
            text-align: center;
        }

        #custom-html-8d .filtre-resultat {
            float: none;
        }

        #custom-html-8d .btn-search {
			width: 100%;
			margin-top:20px;
			color:#000;
			border: none;
			background-color:#fff;
        }

        #custom-html-8d .filterResltDiv {
            /*display: flex;*/
            flex-wrap: wrap;
        }

        #custom-html-8d .slidePhotoVehicule {
            width: 100%;
        }
        #custom-html-8d .detailsVehicule {
            width: 100%;
        }
    }

    #custom-html-8d .b {
        display: block;
    }

    #custom-html-8d .toggle {
        position: relative;
        width: 60px;
        height: 25px;
        border-radius: 100px;
        background-color: #ddd;
        overflow: hidden;
        margin-bottom: 0px;
        box-shadow: inset 0 0 2px 1px rgba(0,0,0,.05);
    }

    #custom-html-8d .check {
        position: absolute;
        display: block;
        cursor: pointer;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 6;
    }

        #custom-html-8d .check:checked ~ .track {
            box-shadow: inset 0 0 0 20px #16a085;
        }

        #custom-html-8d .check:checked ~ .switch {
            right: 2px;
            left: 22px;
            transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
            transition-property: left, right;
            transition-delay: .05s, 0s;
        }

    #custom-html-8d .switch {
        position: absolute;
        left: 2px;
        top: 2px;
        bottom: 2px;
        right: 22px;
        background-color: #fff;
        border-radius: 36px;
        z-index: 1;
        transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
        transition-property: left, right;
        transition-delay: 0s, .05s;
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }

    #custom-html-8d .track {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
        box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
        border-radius: 40px;
    }

    #custom-html-8d .custom-button {
        background-color: inherit;
        padding: 10px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 50px;
        border: 1px solid #999;
        color: #999
    }

    #custom-html-8d .custom-badge {
        font-size: 11px;
        background-color: red;
        color: #FFF;
        display: inline-block;
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        border-radius: 8px;
        line-height: 23px;
    }
	
#custom-html-8d .arrow-right {
	cursor: pointer;
	color: #16a085;
	position:absolute;
	top:50%;
	transform:translate(0%,-50%);
	-ms-transform:translate(0%,-50%);
	right:0%; 
	border:none;
	display:inline-block;
	padding:12px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	white-space:nowrap; 
	background-color:#EEE;  
	font-size:14px;
}

#custom-html-8d .arrow-left {
	cursor: pointer;
	color: #16a085;
	position:absolute;
	top:50%;
	transform:translate(0%,-50%);
	-ms-transform:translate(-0%,-50%);
	left:0%; 
	border:none;
	display:inline-block;
	padding:12px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	white-space:nowrap; 
	background-color:#EEE;  
	font-size:14px;
}


@media only screen and (max-width: 768px) {
    #custom-html-8d .arrow-right  {
       top:90%; 
    }
	#custom-html-8d .arrow-left {
        top:90%; 
    }
}

	
    #menu1-15b * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #menu1-15b #notfound {
        position: relative;
        height: 100vh;
    }

        #menu1-15b #notfound .notfound {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

    #menu1-15b .notfound {
        max-width: 767px;
        width: 100%;
        line-height: 1.4;
        text-align: center;
        padding: 15px;
    }

        #menu1-15b .notfound .notfound-404 {
            position: relative;
            height: 220px;
        }

            #menu1-15b .notfound .notfound-404 h1 {
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                font-size: 100px;
                font-weight: 200;
                margin: 0px;
                background: linear-gradient(130deg, #16a085, #16a085);
                color: transparent;
                -webkit-background-clip: text;
                background-clip: text;
                text-transform: uppercase;
            }

        #menu1-15b .notfound h2 {
            font-family: 'Kanit', sans-serif;
            font-size: 25px;
            font-weight: 200;
            text-transform: uppercase;
            margin-top: 0px;
            margin-bottom: 25px;
            letter-spacing: 3px;
        }

        #menu1-15b .notfound p {
            font-family: 'Kanit', sans-serif;
            font-size: 16px;
            font-weight: 200;
            margin-top: 0px;
            margin-bottom: 25px;
        }

    @media only screen and (max-width: 768px) {
        #menu1-15b .notfound .notfound-404 {
            position: relative;
            height: 168px;
        }

            #menu1-15b .notfound .notfound-404 h1 {
                font-size: 80px;
            }

        #menu1-15b .notfound h2 {
            font-size: 16px;
        }
    }

    #custom-html-8y .btn-search {
        border: none;
        background-color: inherit;
        color: #000;
        border-radius: 0;
        padding: 13px 10px 12.5px 10px;
    }

    #custom-html-8y .group {
        position: relative;
    }

    #custom-html-8y input {
        font-size: 12px;
        padding: 10px 8px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #999999;
		background-color: inherit;
    }
	
	#custom-html-8y input[type="radio"] {
		cursor:pointer;
        display: inline-block;
        width: 5%;
    }
	
	#custom-html-8y input[type="checkbox"] {
		cursor:pointer;
        display: inline-block;
        width: 5%;
    }

	#custom-html-8y input:focus {
		outline: none;
	}
	
	#custom-html-8y #divRfusPermis {
		display: none;
	}
	
	#custom-html-8y #divRfusIdCard {
		display: none;
	}
	
	#custom-html-8y #divTxtCmtRefusIdCard {
		display: none;
	}
	
	#custom-html-8y #divTxtCmtRefusPermis {
		display: none;
	}
	
	#custom-html-8y #divTxtCmtRefusVehicule {
		display: none;
	}
	
	#custom-html-8y #divRfusVehicule {
		display: none;
	}
	
	#custom-html-8y #approbationPermis {
		font-size: 12px;
	}
	
	#custom-html-8y #approbationIdCard {
		font-size: 12px;
	}
	
	#custom-html-8y #approbationVehicule {
		font-size: 12px;
	}
	
	

#custom-html-8y textarea {
	/*
    font-size: 12px;
    padding: 10px 8px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #999999;
	background-color: inherit;
	*/
	background-color:#EEE; 
	font-size:12px;
	border-radius:5px;
}

	#custom-html-8y textarea:focus {
		outline: none;
	}

    #custom-html-8y label {
        color: #666;
        font-size: 16px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: 0.3s ease all;
        -moz-transition: 0.3s ease all;
        -webkit-transition: 0.3s ease all;
    }

    #custom-html-8y input:focus ~ label,
    #custom-html-8y input:valid ~ label {
        top: -10px;
        font-size: 12px;
        /*color: black;*/
    }

    #custom-html-8y textarea:focus ~ label,
    #custom-html-8y textarea:valid ~ label {
        top: -20px;
        font-size: 12px;
        color: green;
    }

    #custom-html-8y .bar {
        position: relative;
        display: block;
        width: 100%;
    }

        #custom-html-8y .bar:before,
        #custom-html-8y .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 0px;
            position: absolute;
            background: green;
            transition: 0.3s ease all;
            -moz-transition: 0.3s ease all;
            -webkit-transition: 0.3s ease all;
        }

        #custom-html-8y .bar:before {
            left: 50%;
        }

        #custom-html-8y .bar:after {
            right: 50%;
        }

    #custom-html-8y input:focus ~ .bar:before,
    #custom-html-8y input:focus ~ .bar:after {
        width: 50%;
    }

    #custom-html-8y textarea:focus ~ .bar:before,
    #custom-html-8y textarea:focus ~ .bar:after {
        width: 50%;
    }

    #custom-html-8y .highlight {
        position: absolute;
        height: 60%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }

    #custom-html-8y input:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    #custom-html-8y textarea:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    @-webkit-keyframes inputHighlighter {
        from {
            background: green;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    @-moz-keyframes inputHighlighter {
        from {
            background: green;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    @keyframes inputHighlighter {
        from {
            background: green;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    #custom-html-8y .input-group {
        display: table;
        width: 100%;
    }

        #custom-html-8y .input-group > * {
            display: table-cell;
            width: 50%;
        }

    #custom-html-8y .input-group-modal {
        display: table;
        width: 100%;
    }

        #custom-html-8y .input-group-modal > * {
            display: table-cell;
            width: 50%;
        }

    #custom-html-8y .commandeDiv {
        width: 32%;
        margin: 2px;
    }

    #custom-html-8y .visiteurDiv {
        width: 32%;
        margin: 2px;
    }

    #custom-html-8y ::-webkit-input-placeholder {
        opacity: 0;
        font-size: 12px;
        transition: 0.2s;
    }

    #custom-html-8y input:focus::-webkit-input-placeholder {
        color: red;
        opacity: 1;
        font-size: 12px;
    }

    #custom-html-8y ::-webkit-textarea-placeholder {
        opacity: 0;
        font-size: 12px;
        transition: 0.2s;
    }

    #custom-html-8y textarea:focus::-webkit-textarea-placeholder {
        color: red;
        opacity: 1;
        font-size: 12px;
    }

    @media only screen and (max-width: 768px) {
        #custom-html-8y .commandeDiv {
            width: 100%;
            margin: 1px 0;
        }

        #custom-html-8y .visiteurDiv {
            width: 100%;
            margin: 1px 0;
        }

        #custom-html-8y .container {
            padding: 0px;
            margin: 0 5px;
        }

        #custom-html-8y .search-input-value {
            margin: 80px 5px 0 5px;
        }

		#custom-html-8y .input-group > * {
			display: inline-block;
			width: 100%;
		}
		#custom-html-8y .input-group {
		   width: 100%;
		   display: block;
		}

		 #custom-html-8y .btn-search {
			width: 100%;
			margin-top:20px;
			color:#000;
			border: none;
			background-color:#fff;
		}
    }

#custom-html-8y .sidebar {
  padding: 0;
  width: 250px;
  background-color: #FFF;
  position: fixed;
  height: 100%;
  overflow: auto;
}

#custom-html-8y .sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}
 
#custom-html-8y .sidebar a.active {
  background-color: #16a085;
  color: white;
}

#custom-html-8y .sidebar a:hover:not(.active) {
  background-color: #16a085;
  color: white;
}

#custom-html-8y div.content {
  background-color:#EEE;
  margin-left: 250px;
  padding: 30px 30px;
  min-height: 1000px;
}

#custom-html-8y .image-input{
	border-radius:5%; 
	width:150px; 
	height:150px; 
	cursor:pointer;
	border: 1px #999 solid;
    padding: 3px;
}
#custom-html-8y .image-input:hover {
  opacity: 0.3;
  cursor: pointer;
  filter: alpha(opacity=30);
}
#custom-html-8y .image-input-paiement {
  border: 1px #999 solid;
  padding: 3px;
}
#custom-html-8y .image-input-paiement:hover {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8y .image-input-paiement-active {
  cursor: pointer;
  border: 3px #16a085 solid;
  /*filter: alpha(opacity=30);*/
  /*opacity: 0.3;*/
}
#custom-html-8y .tablinks{
	cursor:pointer;
	border-bottom: 1px solid #FFF;
	font-size:14px;
}

#custom-html-8y .accordion {
   background-color: #fff;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
   transition: 0.4s;
   border-bottom: 1px solid #fff;
   border-radius: 10px;
   font-weight: bold;
}

#custom-html-8y .active-accordeon, .accordion:hover {
   background-color: #CCC;
   border-radius: 10px 10px 0 0;
}

#custom-html-8y .accordion:hover {
   background-color: #CCC;
}

#custom-html-8y .accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

#custom-html-8y .active-accordeon:after {
  content: "\2212";
}

#custom-html-8y .panel {
   padding: 0 18px;
   background-color: white;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
   margin-bottom: 10px;
   border-radius: 0 0 10px 10px;
}

#custom-html-8y .rechercheDiv {
    width: 35%;
}

#custom-html-8y table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE";
    color:#666;
}

@media screen and (max-width: 768px) {
  #custom-html-8y .sidebar {
	/*margin-top: 35px;*/
    width: 100%;
    height: auto;
    position: relative;
	display: inline-grid;
  }
  #custom-html-8y .sidebar a {float: left;}
  #custom-html-8y div.content {
	  margin-left: 0;
	  padding:10px;
  }
  #custom-html-8y .image-input{ 
	width:100px; 
	height:100px; 
  }
  
  #custom-html-8y .rechercheDiv{
    width:100%;
  }
  
  #custom-html-8y table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: "";
    color: #666;
  }
  
  #custom-html-8y .modalMobileWidth{
	width:100%;
  }
   
  #custom-html-8y .btn-nav {
    font-weight: 400;
    text-align: center;
	vertical-align: middle;
    cursor: pointer;
    padding: .375rem 1.6rem;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 1.4rem;
    transition: all .2s;
  }

}

#custom-html-8y .info,
#custom-html-8y .success,
#custom-html-8y .warning,
#custom-html-8y .error,
#custom-html-8y .validation {
  display: none;
  border: 1px solid;
  margin: 10px 0px;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}
#custom-html-8y.info {
  color: #00529B;
  background-color: #BDE5F8;
}
#custom-html-8y .success {
  color: #4F8A10;
  background-color: #DFF2BF;
}
#custom-html-8y .warning {
  color: #9F6000;
  background-color: #FEEFB3;
}
#custom-html-8y .error {
  color: #D8000C;
  background-color: #FFBABA;
}

#custom-html-8y .sous_menu_1 ul {
    margin: 0; 
    padding: 0;
    list-style-type: none;
	background-color:#CCC;
	font-size:12px;
}

#custom-html-8y .sous_menu_1 ul li{
    text-decoration: none;
    color: black; 
    padding: 10px 10px;
    display:block;
	position: relative;
	cursor:pointer;
}
#custom-html-8y .sous_menu_1 ul li div{
    margin: -10px -10px;
	padding: 10px;
    display:block;
}
 
#custom-html-8y .sous_menu_1 ul li:hover, #custom-html-8y .sous_menu_1 ul li .current_menu_1 {
    color: #fff;
}

#custom-html-8y .sous_menu_1 li .current_menu_1:hover:after, #custom-html-8y .sous_menu_1 li .current_menu_1:after{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  content: '';
  position: absolute;
  right: -2px;
  top: 0;
}

#custom-html-8y .sous_menu_2 ul {
    margin: 0; 
    padding: 0;
    list-style-type: none;
	font-size:10px;
	background-color:#CCC;
}

#custom-html-8y .sous_menu_2 ul li{
    text-decoration: none;
    color: black; 
    margin: 10px 10px;
    display:block;
	position: relative;
}
 
#custom-html-8y .sous_menu_2 ul li:hover, .sous_menu_2 ul li .current_menu_2 {
    color: #000;
	text-decoration:underline;
}

#custom-html-8y .pagination {
  font-size: 12px;
  display: inline-block;
}
#custom-html-8y .pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  margin: 0 2px;
  cursor:pointer;
}
#custom-html-8y .pagination a.activePagination {
  background-color: #16a085;
  color: white;
  border-radius: 5px;
}
#custom-html-8y .pagination a:hover:not(.activePagination) {
  background-color: #ddd;
  border-radius: 5px;
}
#custom-html-8y .btnPostHistory {
  cursor: pointer;
  color: #999;
}
#custom-html-8y .btnPostHistory:hover {
  color: #000;
}
#custom-html-8y .actionCol {
	/*display:none;*/
	position:relative;
}
#custom-html-8y .active-indicator {
  background-color: #16a085;
}
#custom-html-8y .nbre-passager-badge {
  position: relative;
}
#custom-html-8y .nbre-passager-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -20px;
  right: -6px;
  font-size: 9px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 19px;
  background: red;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}

#custom-html-8y .card{
	padding:10px;
}

#custom-html-8y .card-title{
	font-weight:bold;
}

#custom-html-8y .card-text{
	font-size:12px;
}

@media (min-width: 768px) {
  #custom-html-8y .modal {
    text-align: center;
  }
  #custom-html-8y .modal:before {
    content: '';
    height: 100%;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
  }
  #custom-html-8y .modal .modal-dialog {
    text-align: left;
    margin: 10px auto;
    display: inline-block;
    vertical-align: middle;
  }
}



#custom-html-8y .dynamic-badge {
  position: relative;
}
#custom-html-8y .dynamic-badge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -15px;
  right: -3px;
  font-size: 11px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-align: center;
  line-height: 23px;
  background: red;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 30%;
  /* box-shadow:1px 2px 5px #888; */
}

#custom-html-8y .supprimerItem {
  color:#333; 
  cursor:pointer; 
  /*padding: 0 0;*/
}
#custom-html-8y .supprimerItem:hover {
	/*text-decoration: underline;*/
	color: red;
}
#custom-html-8y .voyageEnVu {
  border-top:1px solid #DDD;
  border-bottom:1px solid #DDD;
}
#custom-html-8y .voyageEnVu:hover {
  cursor: pointer;
  background-color: #FFF;
}



#custom-html-8y #card_Paiment_DivImg{
   width:150px;
  }

#custom-html-8y #mtnMoneyDivImg{
   width:170px;
  }

#custom-html-8y #myDriveAccountDivIMg {
    width: 150px;
}

#custom-html-8y #card_Paiment{
   width:100px; 
   height:80px; 
  }

#custom-html-8y #mtnMoneyImg{
   width:100px; 
   height:80px;  
  }

#custom-html-8y #myAccount {
    width: 80px;
    height: 80px;
}
#custom-html-8y #divValeurPrixVoyage{
   width:78%;
  }

#custom-html-8y #divValeurDevisePrixVoyage{
    width:20%;
 }

#custom-html-8y .legal-infos{
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    margin: 10px 30%;
    color: #333;
}

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

#custom-html-8y #card_Paiment_DivImg{
   width:85px;
  }

#custom-html-8y #mtnMoneyDivImg{
   width:95px;
  }

    #custom-html-8y #myDriveAccountDivIMg {
        width: 85px;
    }

#custom-html-8y #card_Paiment{
   width:60px; 
   height:50px;
  }

#custom-html-8y #mtnMoneyImg{
   width:60px; 
   height:50px;
  }

    #custom-html-8y #myAccount {
        width: 50px;
        height: 50px;
    }

#custom-html-8y #divValeurPrixVoyage{
    width:75%; 
   display:inline-block;
  }

#custom-html-8y #divValeurDevisePrixVoyage{
   width:20%; 
   display:inline-block;
  }
  
#custom-html-8y .legal-infos{
    margin: 10px;
}

}


















    #center-text {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    #chat-circle {
        display: none;
        position: fixed;
        bottom: 60px;
        right: 20px;
        background: #16a085;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: white;
        padding: 20px;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.6), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }

    .btn#my-btn {
        background: white;
        padding-top: 13px;
        padding-bottom: 12px;
        border-radius: 45px;
        padding-right: 40px;
        padding-left: 40px;
        color: #16a085;
    }

    #chat-overlay {
        background: rgba(255,255,255,0.1);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: none;
    }


    .chat-box {
        display: none;
        background: #efefef;
        position: fixed;
        right: 30px;
        bottom: 70px;
        width: 350px;
        max-width: 85vw;
        max-height: 100vh;
        border-radius: 5px;
        z-index: 1000;
        /*   box-shadow: 0px 5px 35px 9px #464a92; */
        box-shadow: 0px 5px 35px 9px #ccc;
    }

    .chat-box-toggle {
        float: right;
        margin-right: 15px;
        cursor: pointer;
    }

    .chat-box-header {
        background: #16a085;
        height: 50px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: white;
        text-align: center;
        font-size: 16px;
        padding-top: 17px;
    }

    .chat-box-body {
        position: relative;
        height: 370px;
        height: auto;
        border: 1px solid #ccc;
        overflow: hidden;
    }

        .chat-box-body:after {
            content: "";
            opacity: 0.1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            position: absolute;
            z-index: -1;
        }

    #chat-input {
        background: #f4f7f9;
        width: 100%;
        position: relative;
        height: 47px;
        padding-top: 10px;
        padding-right: 50px;
        padding-bottom: 10px;
        padding-left: 15px;
        border: none;
        resize: none;
        outline: none;
        border: 1px solid #ccc;
        color: #888;
        border-top: none;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        overflow: hidden;
    }

    .chat-input > form {
        margin-bottom: 0;
    }

    #chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: #ccc;
    }

    #chat-input::-moz-placeholder { /* Firefox 19+ */
        color: #ccc;
    }

    #chat-input:-ms-input-placeholder { /* IE 10+ */
        color: #ccc;
    }

    #chat-input:-moz-placeholder { /* Firefox 18- */
        color: #ccc;
    }

    .chat-submit {
        position: absolute;
        bottom: 3px;
        right: 10px;
        background: transparent;
        box-shadow: none;
        border: none;
        border-radius: 50%;
        color: #5A5EB9;
        width: 35px;
        height: 35px;
    }

    .chat-logs {
        padding: 15px;
        height: 370px;
        overflow-y: scroll;
    }

        .chat-logs::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            background-color: #F5F5F5;
        }

        .chat-logs::-webkit-scrollbar {
            width: 5px;
            background-color: #F5F5F5;
        }

        .chat-logs::-webkit-scrollbar-thumb {
            background-color: #5A5EB9;
        }



    @media only screen and (max-width: 500px) {
        .chat-logs {
            height: 40vh;
        }
    }

    .chat-msg.user > .msg-avatar img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        float: left;
        width: 15%;
    }

    .chat-msg.self > .msg-avatar img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        float: right;
        width: 15%;
    }

    .cm-msg-text {
        background: white;
        padding: 10px 15px 10px 15px;
        color: #666;
        max-width: 75%;
        float: left;
        margin-left: 10px;
        position: relative;
        margin-bottom: 20px;
        border-radius: 30px;
    }

    .chat-msg {
        clear: both;
    }

        .chat-msg.self > .cm-msg-text {
            float: right;
            margin-right: 10px;
            background: #5A5EB9;
            color: white;
        }

    .cm-msg-button > ul > li {
        list-style: none;
        float: left;
        width: 50%;
    }

    .cm-msg-button {
        clear: both;
        margin-bottom: 70px;
    }

















    .wrapper24 {
        text-align: center;
        color: #ffffff;
    }

        .wrapper24:first-child {
            margin-right: 2em;
        }

        .wrapper24 label {
            margin-bottom: 1em;
            display: inline-block;
        }

    .container24 {
        padding: 1em;
        text-align: center;
        border: 1px solid #fff;
        border-radius: 6px;
    }