/* ===== Extracted @imports (must be first) ===== */
@import url("https://use.typekit.net/nch7qnc.css");
@import url("https://fonts.googleapis.com/css2?family=Sriracha&display=swap");

/* ===== From address.html ===== */
/* Inlined from address2.css */
/*** Global elements
Keep these files in the order defined
as they import components sequentially
*/
/* Device widths */
/* Show / Hide on different devices */


@font-face {
    font-family: "GT Walsheim";
    src: url('/fonts/GT-Walsheim-Regular.woff2') format('woff2'),
         url('/fonts/GT-Walsheim-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GT Walsheim";
    src: url('/fonts/GT-Walsheim-Bold.woff2') format('woff2'),
         url('/fonts/GT-Walsheim-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "GT Walsheim";
    src: url('/fonts/GT-Walsheim-Medium.woff2') format('woff2'),
         url('/fonts/GT-Walsheim-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "GT Walsheim";
    src: url('/fonts/GT-Walsheim-Black.woff2') format('woff2'),
         url('/fonts/GT-Walsheim-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "GT Walsheim";
    src: url('/fonts/GT-Walsheim-Ultra-Bold.woff2') format('woff2'),
         url('/fonts/GT-Walsheim-Ultra-Bold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}


body {
    margin: 0;
    background: #ffffff;
    font-family: "GT Walsheim", "Noto Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .15px;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    word-spacing: -0.4px;
}

body p {
    margin: 0;
    font-family: "GT Walsheim", "Noto Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .15px;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    word-spacing: -0.4px;
}

/* ============================================
   STYLES EXTRACTED FROM HTML
   ============================================ */

:root{
  --primary-color:#FF5A00;
  --primary-hover:#E04E00;
  --border-color:#e9ecef;
  --text-color:#333;
  --bg-color:#f8f9fa;
  --border-radius:8px;
  --box-shadow:0 2px 8px rgba(0,0,0,0.08);
  --transition:.3s cubic-bezier(.4,0,.2,1)
}

.map-section{
  position:sticky;
  top:20px
}

.map-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.1)
}

.map-container{
  height:350px;
  background:#f0f0f0;
  position:relative
}

.trip-info{
  padding:24px;
  background:linear-gradient(135deg,var(--bg-color) 0%,#ffffff 100%)
}

.trip-info-title{
  font-size:16px;
  font-weight:700;
  color:#1a1a1a;
  margin-bottom:16px
}

.trip-stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:#fff;
  border-radius:10px;
  margin-bottom:12px
}

.trip-stat-value{
  font-size:18px;
  font-weight:700;
  color:#1a1a1a
}

.pac-container{
  z-index:10050 !important;
  pointer-events:auto !important;
}

.pac-item{
  cursor:pointer;
}

#trip-form-locations, .location-chooser{
  overflow:visible !important;
}

@media (max-width:1024px){ 
  .map-section{
    position:static
  } 
}

#stops-container ul{
  list-style:none;
}

#stops-container ul li{
  padding:20px 10px;
  border-bottom:1px solid #ccc;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
}

.text-center{
  text-align:center
}

.btn-info-rounded{
  border-radius:20px;
}

.location-chooser{
  position:relative;
}

.location-clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:20px;
}

#add-via-button.disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}

.select2-selection__choice__remove{
  position:absolute;
  transform:translateY(-50%);
  border:0 !important;
  transition:color .2s ease;
  top:50% !important;
  right:3%;
  left:unset !important;
  height:20px;
  width:20px;
  cursor:pointer;
  line-height:1.3;
  color:#7367f0 !important;
}

.select2-selection__choice__display{
  margin-right:20px !important;
  color:#7367f0 !important;
}

.select2-selection__choice{
  padding:4px !important;
  border:none !important;
  background:rgba(115,103,240,.16) !important;
}

.select2-search--inline{
  display:none !important;
}

.order-via-button{
  display:none !important;
}

.select-car-wrap{
  display:block;
  position:relative;
  text-align:center;
}

.vehicle-type-error{
  display:none;
  position:absolute;
  font-size:14px;
  top:-35px;
  left:50%;
  background:#0099ff;
  padding:5px 10px;
  color:#fff;
  border-radius:5px;
  z-index:100;
}

.vehicle-type-error:after{
  top:100%;
  left:20px;
  border:solid transparent;
  content:" ";
  height:0;
  width:0;
  position:absolute;
  pointer-events:none;
  border-color:rgba(51,51,51,0);
  border-top-color:#0099ff;
  border-width:7px;
  margin-left:-7px;
}

.button-select-vehicle{
  width:160px;
  height:40px;
  border-radius:24px;
  border:1px solid #FF4F02;
  background-color:#fff;
  color:#FF4F02;
  cursor:pointer;
}

.button-select-vehicle.selected{
  background-color:#FF4F02;
  color:#fff;
}

/* Badges de lettres (A, B, C...) */
.stop-letter{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  background:#e53935;
  border:1px solid #c62828;
  color:#ffffff;
  font-weight:700;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
}

/* Ajuster le padding des inputs pour faire de la place au badge */
.location-chooser .location-input-vanity{
  padding-left:50px !important;
  padding-right:50px !important;
  background:#fff5f5 !important;
  background-image:none !important;
}

/* Bouton supprimer */
.remove-stop{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  border:1px solid #ffd3d3;
  color:#e53935;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
  transition:var(--transition);
  z-index:2;
}

.remove-stop:hover{
  background:#fff5f5;
  border-color:#ffb0b0;
  transform:translateY(-50%) scale(1.1);
}

.remove-stop i{ 
  font-size:14px; 
}

/* Modal styles */
.modal-location { 
  display:none; 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.5); 
  z-index:10000; 
  overflow-y:auto; 
}

.modal-location.active { 
  display:block; 
}

.modal-box { 
  background:#fff; 
  max-width:600px; 
  margin:50px auto; 
  border-radius:12px; 
  box-shadow:0 10px 40px rgba(0,0,0,0.2); 
  position:relative; 
}

.modal-location-close { 
  position:absolute; 
  top:15px; 
  right:20px; 
  font-size:32px; 
  cursor:pointer; 
  color:#999; 
  z-index:10; 
  line-height:1; 
}

.modal-location-close:hover { 
  color:#333; 
}

.modal-location-heading { 
  margin-bottom:20px; 
  font-size:24px; 
}

.modal-location-input { 
  width:100%; 
  padding:15px; 
  border:2px solid #ddd; 
  border-radius:8px; 
  font-size:16px; 
  margin-bottom:15px; 
  box-sizing:border-box; 
}

.modal-location-input:focus { 
  outline:none; 
  border-color:#FF5A00; 
}

.modal-location-loader { 
  text-align:center; 
  padding:20px; 
}

.modal-location-results { 
  max-height:400px; 
  overflow-y:auto; 
}

.modal-location-no-results, .modal-location-need-more-input { 
  text-align:center; 
  padding:30px; 
  color:#666; 
}

.modal-location-error { 
  padding:20px; 
  background:#fff3cd; 
  border-radius:8px; 
  margin:15px 0; 
}

.modal-location-error-title { 
  font-weight:600; 
  margin-bottom:5px; 
}

.loader { 
  border:3px solid #f3f3f3; 
  border-top:3px solid #FF5A00; 
  border-radius:50%; 
  width:40px; 
  height:40px; 
  animation:spin 1s linear infinite; 
  margin:0 auto; 
}

@keyframes spin { 
  0% { transform:rotate(0deg); } 
  100% { transform:rotate(360deg); } 
}

/* ============================================
   MODAL SIDE-MENU - STYLES
   ============================================ */
.modal { 
  display:none; 
  position:fixed; 
  height:100%; 
  width:100%; 
  top:0; 
  left:0; 
  z-index:1000; 
}

.modal-full-screen { 
  overflow:scroll; 
}

.modal .modal-box { 
  z-index:1000; 
  position:relative; 
  max-width:800px; 
  margin:40px auto; 
  padding:20px; 
  border:1px solid #dfdbdb; 
  background:#fff; 
  box-sizing:border-box; 
}

.modal-full-screen .modal-box { 
  border:none; 
  box-shadow:none; 
  background:none; 
}

#modal-menu .modal-box { 
  width:100%; 
  height:100%; 
  max-width:none; 
  overflow-y:scroll; 
}

#modal-menu .modal-menu-container { 
  max-width:600px; 
  margin:0 auto; 
  padding:20px; 
  box-sizing:border-box; 
}

.modal .modal-background { 
  background:#fff; 
  width:100%; 
  height:100%; 
  position:fixed; 
  top:0; 
  left:0; 
  z-index:0; 
  opacity:0.9; 
  cursor:pointer; 
}

.modal-full-screen .modal-background { 
  opacity:1; 
}

.modal .modal-close { 
  height:32px; 
  width:auto; 
  font-size:22px; 
  color:#333333; 
  opacity:0.9; 
  float:right; 
  cursor:pointer; 
  position:relative; 
  z-index:1000; 
}

.modal-full-screen .modal-close { 
  font-size:16px; 
  margin:13px 17px 0 0; 
  font-weight:600; 
}

#modal-menu .modal-close { 
  margin:0; 
}

a.link-block, button.link-block { 
  border:none; 
  border-top:1px solid #dfdbdb; 
  background:url(../static/pop/webui/common/images/icons/icon-triangle-right-black.14ae5b23146b.png) no-repeat right center; 
  background-size:10px auto; 
  padding:18px 18px 18px 0; 
  color:#000; 
  width:100%; 
  display:block; 
  cursor:pointer; 
  font-size:16px; 
  opacity:0.8; 
  box-sizing:border-box; 
  text-align:left; 
}

.link-group { 
  padding:10px 0; 
}

.link-group a:first-child, .link-group button:first-child { 
  border-top:none; 
}

.s-spacer { 
  height:20px; 
  clear:both; 
}

@media (max-width: 767px){
  #modal-menu .modal-menu-container{ 
    max-width:100%; 
  }
  
  .modal{ 
    height:auto; 
    width:auto; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    margin:0; 
  }
  
  .modal .modal-box{ 
    margin-top:0; 
    padding:10px; 
    overflow-y:auto; 
    height:100% !important; 
  }
  
  .modal-full-screen .modal-box{ 
    max-width:none; 
    width:100%; 
  }
  
  .modal-full-screen .modal-close{ 
    margin:10px 3px 0 0; 
  }
  
  .show-on-mobile{ 
    display:block; 
  }
}

/* Visibility helpers for static HTML */
.auth-only{ 
  display:block; 
}

.guest-only{ 
  display:block; 
}

.client-only{ 
  display:none; 
}

.loggedout .auth-only{ 
  display:none; 
}

.loggedin .guest-only{ 
  display:none; 
}

.tenant-client .client-only{ 
  display:block; 
}

/* ============================================
   REST OF ORIGINAL CSS
   ============================================ */

@media (max-width: 320px) {
  .hide-on-iphone {
    display: none;
  }
}

@media (max-width: 320px) {
  .show-on-iphone {
    display: block;
  }
}
@media (max-width: 767px) {
  .show-on-iphone {
    display: none;
  }
}
@media (min-width: 769px) {
  .show-on-iphone {
    display: none;
  }
}

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none;
  }
}

@media (max-width: 767px) {
  .show-on-mobile {
    display: block;
  }
}
@media (min-width: 769px) {
  .show-on-mobile {
    display: none;
  }
}

@media (min-width: 0px) and (max-width: 1023px) {
  .hide-on-tablet-and-mobile {
    display: none;
  }
}

@media (min-width: 0px) and (max-width: 1023px) {
  .show-on-tablet-and-mobile {
    display: block;
  }
}
@media (min-width: 1024px) {
  .show-on-tablet-and-mobile {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-on-tablet {
    display: none;
  }
}

@media (max-width: 767px) {
  .show-on-tablet {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-on-tablet {
    display: block;
  }
}
@media (min-width: 1024px) {
  .show-on-tablet {
    display: none;
  }
}

@media (min-width: 769px) {
  .hide-on-desktop-and-tablet {
    display: none;
  }
}

@media (min-width: 769px) {
  .show-on-desktop-and-tablet {
    display: block;
  }
}
@media (max-width: 767px) {
  .show-on-desktop-and-tablet {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none;
  }
}

@media (min-width: 1024px) {
  .show-on-desktop {
    display: block !important;
  }
}
@media (min-width: 0px) and (max-width: 1023px) {
  .show-on-desktop {
    display: none;
  }
}

/* Toggle certain elements if the user is accessing a web view from an app */
.in-app .hide-in-app {
  display: none !important;
}

.show-in-app {
  display: none;
}

.in-app .show-in-app {
  display: block !important;
}

/* Colors */
/* Fonts */
.font-secondary, #instruction-choose-trip h1, .how-single .how-single-process .how-single-process-column .how-single-process-column-icon, #how .how-header .how-header-box .how-header-box-benefit, #sustainability-page #sustainability-banner .sustainability-bubbles .sustainability-bubble {
  font-family: "Sriracha", recursive;
}

/* Text sizes */
.text-xsmall {
  font-size: 14px;
  line-height: 16px;
}

.text-small, .verification-item, textarea, body, html {
  font-size: 15px;
  line-height: 20px;
}

.text-medium, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details .trip-date, #payments .payment-box .payment-amount, #payments .payment-box .payment-text, #book .booking-form .trip-form-policies .text-slarge, #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details h2, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies h2, #book .booking-form .trip-form-policies .trip-form-section-header, #book .booking-form .trip-form-policies .policy-title {
  font-size: 16px !important;
  line-height: 24px;
}

.text-slarge, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details h2, #book .booking-form .trip-form-policies .trip-form-section-header {
  font-size: 18px;
  line-height: 26px;
}

.text-large, .testimonials .testimonial-links a {
  font-size: 20px !important;
  line-height: 24px !important;
}

.text-xlarge {
  font-size: 22px !important;
  line-height: 28px !important;
}

.text-xxlarge {
  font-size: 42px !important;
  line-height: 52px !important;
}

.indented {
  padding-left: 20px;
  border-left: 2px solid #777777;
}

/* Font weights */
body, html {
  font-family: "proxima-soft", sans-serif;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  color: #4C4C4C;
  font-weight: 400;
}

.primary-color {
  color: #ff4f02;
}

.secondary-color {
  color: #0099ff;
}

.text-white {
  color: #fff;
}

h1.heading {
  font-size: 32px;
  font-weight: 700;
  color: #000000;
}

a img {
  border: none;
}

.error {
  color: #ff0000;
}

.p-small {
  font-size: 14px;
}

.p-medium {
  font-size: 18px;
}

.p-large {
  font-size: 24px;
}

.line-height-s {
  line-height: 20px;
}

.image-responsive {
  width: 100%;
}

@media (max-width: 767px) {
  .image-responsive-mobile {
    width: 100%;
  }
}

.image-rounded {
  border-radius: 5px;
}

.image-border {
  border: 1px solid #dfdbdb;
}

.underline {
  text-decoration: underline;
}

.no-border {
  border: none !important;
}

.inline-block {
  display: inline-block;
}

.google-maps-labels {
  color: #ff4f02;
}

a {
  text-decoration: none;
}

a:hover {
  color: #ff7430;
}

a:active {
  color: #dd4900;
}

a.secondary-color:hover {
  color: #0077c6;
}

.a-div {
  display: block;
}

.orange {
  color: #ff5400;
}

.blue {
  color: #0099ff;
}

a.blue:hover {
  color: #44b4ff;
}

.pink, a.pink {
  color: #F3046E;
}

a.pink:hover {
  color: #dd006a;
}

a.grey {
  color: #777777;
}

a.grey:hover {
  color: #333333;
}

.p-grey {
  color: #999;
}

.font-weight-400 {
  font-weight: 400 !important;
}

.font-weight-600 {
  font-weight: 600 !important;
}

.font-weight-700 {
  font-weight: 700 !important;
}

.font-weight-800 {
  font-weight: 800 !important;
}

.gradient-orange, #home #home-find .home-find-box-offset, #passengers .how-single-process-offset, #how .how-header #how-header-container-orange-highlight {
  background: rgb(255, 174, 136);
  background: linear-gradient(340deg, rgb(255, 174, 136) 12%, rgb(255, 195, 140) 100%);
}

.gradient-blue, #canada-map .canada-map-cta, #home #home-post #home-post-box, #drivers .how-single-process-offset, #how .how-header #how-header-container-blue-highlight, #business .business-top {
  background: rgb(146, 211, 255);
  background: linear-gradient(340deg, rgb(146, 211, 255) 12%, rgb(205, 240, 255) 100%);
}

.gradient-yellow, #home #home-safety #home-safety-box, #how_safety-page .how-single-process .how-single-process-offset, #how .how-benefit.safety {
  background: rgb(255, 217, 151);
  background: linear-gradient(340deg, rgb(255, 217, 151) 12%, rgb(255, 246, 212) 100%);
}

.gradient-green, #sustainability #sustainability-box, #sustainability-page #sustainability-banner {
  background: rgb(188, 244, 174);
  background: linear-gradient(340deg, rgb(188, 244, 174) 12%, rgb(223, 255, 218) 100%);
}

.gradient-purple, #event_list-page #event-list-banner, #event_history_list-page #event-list-banner {
  background: rgb(255, 180, 255);
  background: linear-gradient(340deg, rgb(255, 180, 255) 12%, rgb(244, 220, 255) 100%);
}

.header-anchor {
  display: inline-block;
  margin-left: 7px;
  height: 20px;
  width: 20px;
  outline: 0;
}

.header-anchor:hover {
  display: inline-block;
  margin-left: 7px;
  background: #ccc;
  height: 20px;
  width: 20px;
  background: url("../static/pop/webui/common/images/icons/icon-anchor.dfe31862021e.png") no-repeat center center #ececec;
  background-size: 15px 15px;
  border-radius: 2px;
  outline: 0;
}

.header-anchor:focus {
  outline: 0;
}

.red:not(.deer) {
  color: #ff0000 !important;
}

.lightred {
  color: #ff6060 !important;
}

.black {
  color: #000000 !important;
}

.darkgrey {
  color: #333333;
}

.lightgrey {
  color: #dfdbdb;
}

.green {
  color: #05AC09;
}

.greyed {
  color: #dfdbdb !important;
}

.greyed {
  color: #777777 !important;
}

.lightergrey {
  color: #f8f8f8;
}

.grey {
  color: #666;
}

.box {
  border: 1px solid #dfdbdb;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
}
.box .box-header {
  padding: 10px;
}
.box .box-header.blue {
  background: #0099ff;
  color: #fff;
}
.box .box-header.grey {
  background: #dfdbdb;
}
.box .box-container {
  padding: 10px;
}

.box.orange {
  background: #ff4f02;
  color: #fff;
  border: none;
}

.box.blue {
  background: #0099ff;
  color: #fff;
  border: none;
}

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

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.faded {
  opacity: 0.3;
}

.border-box, #manage .trip .right-section, #manage .trip, #manage .trip-types .trip-type, #trip-form #buttons .button-common, #trip-form #buttons #button-offer, #trip-form #buttons #button-find, #trip-form .dropdown-trigger, #trip-form .dropdown-list .dropdown-item, #trip-form .dropdown-list dropdown-item.info, #trip-form .dropdown-search .dropdown-item, #trip-form .dropdown-search dropdown-item.info, #trip-form .trip-types .trip-type, #user .user-left .profile-details, #payments .trip-types .trip-type, .modal .modal-box, .social-logins .social-login, .container-wide, .address, #business .business-container, #header-page #header-bottom, textarea, .input-line, input[type=text], input[type=password], input[type=date], input[type=time], input[type=email], input[type=number], .spacious, .common-msg-small, .grey-msg-small, .tip-msg-small, .common-msg, .upsell-msg, .white-msg, .tip-msg, .success-msg, .info-msg, #incident-corona-notice, .error-msg, #book .booking-form .booking-version .error, .warning-msg {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}

a {
  color: #ff4f02;
}

a.white {
  color: #fff;
}

a.underlined {
  text-decoration: underline;
}

.lower {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}

.link-white {
  color: #fff;
  text-decoration: underline;
}

.link-white:hover {
  color: #dfdbdb;
}

a.link-grey, #terms a, #privacy a {
  color: #333333;
}

a.link-grey:hover, #terms a:hover, #privacy a:hover {
  color: #666;
}

a.link-grey:active, #terms a:active, #privacy a:active {
  color: #000;
}

a.link-black {
  color: #000000;
}

a.link-black:hover {
  color: #333333;
}

a.link-black:active {
  color: #777777;
}

a.link-new-window {
  background: url("../static/pop/webui/common/images/icons/icon-new-window.1ff942fdce75.png") no-repeat right center;
  padding-right: 22px;
  background-size: 16px 16px;
}

.link-group {
  padding: 10px 0px;
}
.link-group a:first-child, .link-group button:first-child {
  border-top: none;
}
.link-group .link-group-heading {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  margin: 20px 0px;
}

a.link-block, button.link-block {
  border: none;
  border-top: 1px solid #dfdbdb;
  background: url("../static/pop/webui/common/images/icons/icon-triangle-right-black.14ae5b23146b.png") no-repeat right center;
  background-size: 10px auto;
  padding: 18px 18px 18px 0px;
  color: #000;
  width: 100%;
  display: block;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.8;
  box-sizing: border-box;
  text-align: left;
}

a.link-block.link-block-small {
  padding: 12px 0px;
  font-size: 14px;
}

a.link-block:hover, button.link-block:hover {
  opacity: 0.9;
  outline: none;
}

a.link-block:active, button.link-block:active {
  opacity: 1;
  color: #000;
  outline: none;
}

a.link-block.no-arrow {
  background: none;
  padding: 18px 0px;
}

a.link-block.large {
  padding: 30px 0px;
}

a.link-block.red, button.link-block.red {
  color: #ff6060;
  background: url("../static/pop/webui/common/images/icons/icon-triangle-right-red.b06a5edd1783.png") no-repeat right center;
  background-size: 10px auto;
}

.zoom-animate, #find-page #popular-routes .popular-routes-box .popular-route {
  transition: transform 0.2s;
}

.zoom-animate:hover, #find-page #popular-routes .popular-routes-box .popular-route:hover {
  transform: scale(1.03, 1.03);
}

.clear {
  clear: both;
}

.inline {
  display: inline;
}

.row {
  clear: both;
  width: 90%;
  padding: 20px;
}

.no-padding {
  padding: 0px;
}

.no-padding-vertical {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

@media (max-width: 767px) {
  .no-padding-mobile {
    padding: 0px !important;
  }
}

.no-margin {
  margin: 0px !important;
}

.no-margin-top {
  margin-top: 0px !important;
}

.hidden {
  display: none;
}

.container-global {
  background: #fff;
  margin: 25px 20px 20px 20px;
  border: 1px solid #e0dfdf;
}

.tertiary-container-global {
  padding: 80px 20px 10px 20px;
}

.new-feature {
  vertical-align: super;
  font-size: 10px;
  line-height: 0px;
}

.new-box {
  padding: 0px 7px;
  background: #ff4f02;
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  margin-left: 5px;
}

.with-border {
  border: 1px solid #dfdbdb;
}

.picture-round, .picture-round-large, .picture-round-medium, #dashboard #trip-notifications .trip-notification-item .trip-request .profile-pic, .picture-round-small, #trip #trip-bookings #trip-bookings-tabs .booking-tab-trigger .profile-pic {
  border-radius: 500px;
  border: 1px solid #dfdbdb;
  background: #f1f1f1;
  background-size: contain;
  background-position: center center;
}

.picture-round-small, #trip #trip-bookings #trip-bookings-tabs .booking-tab-trigger .profile-pic {
  width: 40px;
  height: 40px;
}

.picture-round-medium, #dashboard #trip-notifications .trip-notification-item .trip-request .profile-pic {
  width: 60px;
  height: 60px;
}

.picture-round-large {
  width: 100px;
  height: 100px;
}

.profile-pic {
  cursor: pointer;
}

.position-relative {
  position: relative;
}

.float-left {
  float: left;
}

@media (max-width: 767px) {
  .break-on-mobile {
    float: none !important;
  }
}

.float-right {
  float: right;
}

a.float-right {
  font-size: 15px;
}

.link-right {
  float: right;
  text-align: right;
}

.link-right.heading {
  margin-top: -23px;
}

.no-border {
  border: none;
}

.active {
  display: block;
}

.inactive {
  display: none !important;
}

.strong, #book .booking-form .trip-form-policies .trip-form-section-header {
  font-weight: 700 !important;
  font-size: auto;
}

.semi-strong {
  font-weight: 600 !important;
}

.padding-small {
  padding: 10px;
}

.padding-medium {
  padding: 20px;
}

.padding-large {
  padding: 40px;
}

.orange-gradient, .button.orange, #welcome .welcome-common #no_pending_email_form .orange[type=submit], .vehicle-form .orange[type=submit] {
  /* fallback/image non-cover color */
  background-color: #ff8534;
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(#ff8534, #ff5400);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8534), to(#ff5400));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(#ff8534, #ff5400);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(#ff8534, #ff5400);
}

.blue-gradient, .button.blue, #welcome .welcome-common #no_pending_email_form .blue[type=submit], .vehicle-form .blue[type=submit] {
  /* fallback/image non-cover color */
  background-color: #7ccdff;
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(#7ccdff, #5cc0ff);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7ccdff), to(#5cc0ff));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(#7ccdff, #5cc0ff);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(#7ccdff, #5cc0ff);
}

.primary {
  background: #ff4f02;
}

.primary:hover {
  background: #ff7430;
}

.primary:active {
  background: #dd4900;
}

.button-full {
  width: 100%;
}

.button.secondary, #welcome .welcome-common #no_pending_email_form .secondary[type=submit], .vehicle-form .secondary[type=submit] {
  background: #0099ff;
}

.button.secondary:hover, #welcome .welcome-common #no_pending_email_form .secondary[type=submit]:hover, .vehicle-form .secondary[type=submit]:hover {
  background: #44b4ff;
}

.button.secondary:secondarycoloraactive, #welcome .welcome-common #no_pending_email_form .secondary[type=submit]:secondarycoloraactive, .vehicle-form .secondary[type=submit]:secondarycoloraactive {
  background: #0077c6;
}

.button.secondary.with-plus, #welcome .welcome-common #no_pending_email_form .secondary.with-plus[type=submit], .vehicle-form .secondary.with-plus[type=submit] {
  background: url("../static/pop/webui/common/images/icons/icon-plus-circle-blue-h.64e5f8ece0b7.png") #0099ff no-repeat;
  background-size: 30px 30px;
  background-position: 7px 8px;
}

.button.secondary.with-plus:hover, #welcome .welcome-common #no_pending_email_form .secondary.with-plus[type=submit]:hover, .vehicle-form .secondary.with-plus[type=submit]:hover {
  background: url("../static/pop/webui/common/images/icons/icon-plus-circle-blue-h.64e5f8ece0b7.png") #44b4ff no-repeat;
  background-size: 30px 30px;
  background-position: 7px 8px;
}

.button.secondary.with-plus:active, #welcome .welcome-common #no_pending_email_form .secondary.with-plus[type=submit]:active, .vehicle-form .secondary.with-plus[type=submit]:active {
  background: url("../static/pop/webui/common/images/icons/icon-plus-circle-blue-h.64e5f8ece0b7.png") #0077c6 no-repeat;
  background-size: 30px 30px;
  background-position: 7px 8px;
}

a.button-back {
  background: url("../static/pop/webui/common/images/icons/arrow_left_grey.f94ce5a911c3.svg") no-repeat center left;
  background-size: 20px 20px;
  color: #777777;
  padding: 15px 0px 15px 25px;
  display: inline-block;
}

a.button-back:hover {
  opacity: 0.9;
}

a.button-back:active {
  opacity: 1;
}

.margin-right-xs {
  margin-right: 5px;
}

.margin-right-s {
  margin-right: 15px;
}




/* Tooltip */
.tooltip {
  cursor: pointer !important;
}

.ui-helper-hidden-accessible {
  display: none;
}

.ui-tooltip {
  position: absolute;
  background: #333333;
  color: #fff;
  padding: 7px;
  font-size: 13px;
  border-radius: 3px;
  top: -5px;
  z-index: 1000;
}


/* Dividers & spacers*/
.xxs-spacer {
  height: 5px;
  clear: both;
}

.xs-spacer {
  height: 10px;
  clear: both;
}

.s-spacer {
  height: 20px;
  clear: both;
}

.m-spacer {
  height: 40px;
  clear: both;
}

.sl-spacer {
  height: 50px;
  clear: both;
}

.l-spacer {
  height: 60px;
  clear: both;
}

.xl-spacer {
  height: 200px;
  clear: both;
}

/* Alignment */
.align-right {
  text-align: right;
}

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

.align-center {
  text-align: center !important;
}

.align-block-center {
  margin-left: auto;
  margin-right: auto;
}

.info-circle {
  text-align: center;
  border-radius: 20px;
  height: 18px;
  width: 18px;
  cursor: default;
  margin-top: 1px;
  font-weight: 500;
  background: #333333;
  color: #fff;
  line-height: 20px;
  font-size: 15px;
}

.info-circle.red {
  background: #ff0000;
  border: none;
  color: #fff !important;
  font-weight: 400;
  border-radius: 22px;
  height: 22px;
  width: 22px;
  line-height: 22px;
}

.info-circle.blue {
  background: #0099ff;
  border: none;
  color: #fff !important;
  font-weight: 400;
  border-radius: 22px;
  height: 22px;
  width: 22px;
  line-height: 22px;
}

.info-circle.space-left {
  margin-left: 10px;
}


/* Common attributes for all forms */
INPUT[type=text]:focus,
INPUT[type=number]:focus,
INPUT[type=email]:focus,
INPUT[type=search]:focus,
INPUT[type=password]:focus,
INPUT[type=range]:focus,
INPUT[type=textarea]:focus {
  outline: none;
  -webkit-appearance: none;
}



input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, input[type=time]:hover, input[type=email]:hover, input[type=number]:hover,
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=time]:focus, input[type=email]:focus, input[type=number]:focus {
  border: 1px solid #ccc;
}



/* Main attributes for the shell */
/* DISABLED: .page-left {  */
/* DISABLED:   width: 45%;  */
/* DISABLED:   float: left;  */
/* DISABLED: }  */

/* DISABLED: .page-right {  */
/* DISABLED:   width: 45%;  */
/* DISABLED:   float: right;  */
/* DISABLED: }  */

.address, #business .business-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}


/* Location trigger */
.location-chooser {
  position: relative;
}
.location-chooser .location-input-vanity {
  border-radius: 10px;
  font-family: "proxima-soft", sans-serif;
  cursor: pointer;
  box-sizing: border-box;
  padding: 20px 15px 20px 35px;
  border: none;
  background: url("../static/pop/webui/common/images/icons/location.a9dbd27e31d6.svg") no-repeat #ececec center left 10px;
  background-size: 15px;
  width: 100%;
  font-size: 16px;
  color: #565a5c;
}
.location-chooser .location-label {
  height: 25px;
  overflow: hidden;
}

/* Location modal */
.modal-location {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #fff;
}
.modal-location .modal-box {
  z-index: 2000;
  border: none;
  box-shadow: none;
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .modal-location .modal-box {
    margin-top: 0px;
    padding: 0px;
    overflow-y: auto;
    height: 100% !important;
  }
}
.modal-location .modal-location-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  color: #333333;
  opacity: 0.9;
  cursor: pointer;
  z-index: 1000;
}
@media (max-width: 767px) {
  .modal-location .modal-location-close {
    top: 10px;
    right: 10px;
  }
}
.modal-location .modal-location-close:hover {
  opacity: 1;
}
.modal-location .modal-location-input, .modal-location .modal-location-input:hover {
  border-bottom: 1px solid #777777;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  padding: 20px 0px 20px 25px;
  font-size: 20px;
  margin: 0px;
  border-radius: 0px !important;
}
.modal-location #id_origin-modal-location-input.modal-location-input, .modal-location #id_origin-modal-location-input.modal-location-input:hover {
  background: url("../static/pop/webui/common/images/icons/location.a9dbd27e31d6.svg") no-repeat #fff center left -3px;
  background-size: 20px;
}
.modal-location #id_destination-modal-location-input.modal-location-input, .modal-location #id_destination-modal-location-input.modal-location-input:hover,
.modal-location #id_vias-0-location-modal-location-input, .modal-location #id_vias-0-location-modal-location-input:hover,
.modal-location #id_vias-1-location-modal-location-input, .modal-location #id_vias-1-location-modal-location-input:hover,
.modal-location #id_vias-2-location-modal-location-input, .modal-location #id_vias-2-location-modal-location-input:hover,
.modal-location #id_vias-3-location-modal-location-input, .modal-location #id_vias-3-location-modal-location-input:hover,
.modal-location #id_vias-4-location-modal-location-input, .modal-location #id_vias-4-location-modal-location-input:hover {
  background: url("../static/pop/webui/common/images/icons/location.a9dbd27e31d6.svg") no-repeat #fff center left -3px;
  background-size: 20px;
}
.modal-location .modal-location-loader {
  position: relative !important;
  height: 30px;
}
.modal-location .modal-location-loader .loader.loader-grey {
  left: 12px;
  top: 10px;
}
.modal-location .modal-location-result-item {
  border-bottom: 1px dotted #dfdbdb;
  padding: 10px 0px 10px 25px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
.modal-location .modal-location-result-item:hover {
  background: #efefef;
}
.modal-location .modal-location-result-item.active, .modal-location .modal-location-result-item.active:hover, .modal-location .modal-location-result-item:focus, .modal-location .modal-location-result-item:active {
  background: #333333 !important;
  color: #fff;
}
.modal-location .modal-location-error {
  padding: 10px;
  background: #ffcccc;
  box-sizing: border-box;
}
.modal-location .modal-location-error .modal-location-error-title {
  color: #333333;
  font-weight: 700;
  font-size: 16px;
}
.modal-location .modal-location-error .modal-location-error-subtitle {
  color: #333333;
  font-weight: 400;
  font-size: 16px;
}
.modal-location .modal-location-need-more-input, .modal-location .modal-location-no-results {
  padding: 20px 0px;
  box-sizing: border-box;
}
.modal-location .modal-close {
  font-size: 42px;
}


/* Add a trip */
#offer-pre {
  border-bottom: none !important;
  background: none;
}
@media (min-width: 769px) {
  #offer-pre {
    margin: 20px 0px 0px 0px;
  }
}
#offer-pre h1 {
  color: #000;
  font-weight: 800;
}
@media (min-width: 769px) {
  #offer-pre h1 {
    font-size: 48px;
    margin-bottom: 1px;
  }
}
@media (max-width: 767px) {
  #offer-pre h1 {
    font-size: 32px;
    margin-bottom: 20px;
  }
}
#offer-pre .trip-actions a:hover {
  color: #f7f7fa;
}
@media (max-width: 767px) {
  #offer-pre .address, #offer-pre #business .business-container, #business #offer-pre .business-container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

#offer .tip-msg {
  line-height: 24px;
}
#offer #trip-list {
  display: none;
}
#offer #trip-list .trip {
  margin: 5px 0px 5px;
  float: left;
  border: 1px solid #dfdbdb;
  position: relative;
}
@media (min-width: 769px) {
  #offer #trip-list .trip {
    width: 48%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 767px) {
  #offer #trip-list .trip {
    width: 100%;
    float: none;
    padding: 10px;
    margin: 7px 0px 7px;
  }
}
@media (max-width: 320px) {
  #offer #trip-list .trip {
    padding: 5px;
  }
}
@media (max-width: 320px) {
  #offer #trip-list .trip .trip-owner .profile-pic {
    margin-top: 0px;
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 320px) {
  #offer #trip-list .trip .trip-cta .green {
    margin-top: 0px;
  }
}
@media (min-width: 769px) {
  #offer #trip-list .trip:nth-child(odd) {
    margin-right: 4%;
  }
}
#offer #trip-list .trip:hover .copy-details, #offer #trip-list .trip:active .copy-details {
  display: block;
}
#offer #trip-list.active {
  display: block;
}

#offer.page {
  padding-top: 0px;
}

.trip-copy-container {
  box-sizing: border-box;
  border: 1px solid #dfdbdb;
  border-radius: 15px;
  font-size: 15px;
}
.trip-copy-container #trip-list {
  margin-top: 0px;
}
.trip-copy-container .trip-copy-container-cta {
  opacity: 0.8;
  font-weight: 500;
  color: #000;
  padding: 16px 10px 15px 10px;
}
.trip-copy-container .trip-copy-container-cta .trip-copy-container-cta-left {
  float: left;
  background: url("../static/pop/webui/common/images/icons/icon_copy.1f1d3d042e68.png") no-repeat center left;
  background-size: 20px 20px;
  padding-left: 30px;
}
.trip-copy-container .trip-copy-container-cta .trip-copy-container-cta-right {
  float: right;
  font-size: 18px;
}
.trip-copy-container .trip-copy-container-cta:hover {
  opacity: 1;
}
.trip-copy-container .trip-copy-container-cta:active {
  opacity: 1;
  background: none !important;
  -webkit-tap-highlight-color: transparent;
}
.trip-copy-container .trip-item-to-copy {
  display: block;
  color: #333333;
  padding: 15px;
  box-sizing: border-box;
  border-top: 1px solid #dfdbdb;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left {
  float: left;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-right {
  float: right;
  margin-top: 10px;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left-location {
  color: #0099ff;
  font-weight: 700;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left-details {
  font-weight: 600;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left-details .trip-item-to-copy-seat {
  color: #000;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left-details .trip-item-to-copy-price {
  color: #009a4b;
}
.trip-copy-container .trip-item-to-copy:hover {
  opacity: 0.8;
}
.trip-copy-container .trip-item-to-copy:active {
  opacity: 1;
  background: #efefef;
}

.trip-copy-container:active {
  background: none !important;
  -webkit-tap-highlight-color: transparent;
}

#trip-form {
  /* Styling placeholder */
}
#trip-form .trip-form-section-header {
  font-size: 24px;
  margin-bottom: 15px;
  color: #000000;
  font-weight: 700;
}
#trip-form .trip-form-section-subheader {
  font-size: 15px;
  color: #777777;
}
#trip-form .trip-form-section-label {
  font-size: 15px;
  color: #333333;
  font-weight: 600;
}
#trip-form #non-field-error {
  margin: 0px 0px 40px;
}
@media (max-width: 767px) {
  #trip-form #non-field-error {
    margin: 20px 0px 10px;
  }
}
#trip-form #non-field-error .errorlist {
  color: #333;
}
#trip-form #id_departure_date, #trip-form #id_return_date {
  background: url("../static/pop/webui/common/images/icons/calendar.98d099ccbf4b.svg") no-repeat 12px 24px #ececec !important;
  background-size: 14px 14px !important;
  font-size: 15px;
}
#trip-form #trip-form-locations .route-errors .error-msg, #trip-form #trip-form-locations .route-errors #book .booking-form .booking-version .error, #book .booking-form .booking-version #trip-form #trip-form-locations .route-errors .error {
  margin-bottom: 25px;
}
#trip-form #trip-form-locations .precise-location-helper {
  position: absolute;
  font-size: 12px;
  top: -32px;
  background: #333;
  padding: 5px 10px 5px 10px;
  color: #fff;
  border-radius: 5px;
  z-index: 100;
}
#trip-form #trip-form-locations .precise-location-helper:after {
  top: 100%;
  left: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(51, 51, 51, 0);
  border-top-color: #333;
  border-width: 7px;
  margin-left: -7px;
}
#trip-form #trip-form-locations #undo-vias-optimized-button {
  color: #666;
}
#trip-form #trip-form-locations .location-container .location-label {
  width: 30%;
  float: left;
  font-size: 15px;
  color: #333333;
  margin-top: 19px;
}
#trip-form #trip-form-locations .location-container .location-input {
  width: 70%;
  float: left;
  position: relative;
}
#trip-form #trip-form-locations .location-container .location-input .order-via-button {
  background: url("../static/pop/webui/common/images/icons/icon-drag.287173f6ed74.png") repeat;
  background-size: 3px 3px;
  opacity: 1;
  height: 53px;
  width: 5px;
  position: absolute;
  top: 4px;
  left: 2px;
  cursor: move;
}
#trip-form #trip-form-locations .location-container .location-input .order-via-button:hover, #trip-form #trip-form-locations .location-container .location-input .order-via-button:active {
  opacity: 1;
}
#trip-form #trip-form-locations .location-container .location-input input {
  font-size: 15px;
}
#trip-form #trip-form-locations .vias-container-box {
  width: 70%;
  float: left;
}
#trip-form #trip-form-locations .vias-container-box .location-input {
  width: 100%;
}
#trip-form #trip-form-locations .vias-container-box .via {
  margin-bottom: 15px;
}
#trip-form #trip-form-locations .vias-container-box .via .geo-location {
  padding-left: 20px;
}
#trip-form #trip-form-locations .vias-container-box .via input {
  font-size: 14px;
}
#trip-form .input-edit {
  color: #777777;
  margin: 5px 0px 5px 0px;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0.6;
}
#trip-form #trip-form-locations {
  width: 47.5%;
  margin-right: 2.5%;
}
#trip-form #trip-map {
  width: 47.5%;
  margin-left: 2.5%;
  margin-top: 5px;
}
#trip-form #geo-map {
  width: 100%;
  height: 400px !important;
  border: 1px solid #dfdbdb;
  border-radius: 15px;
}
#trip-form #geo-distance {
  padding-top: 15px;
  clear: both;
}
#trip-form #add-via-button {
  font-size: 15px;
  color: #818181;
  background: url("../static/pop/webui/common/images/icons/icon-add-circle.3426ca638829.png") left center no-repeat;
  background-size: 22px 22px;
  background-position: 10px;
  padding: 18px 15px 18px 40px;
  margin-top: 0px;
  border: 1px dashed #ccc;
  border-radius: 15px;
}
#trip-form #add-via-button:hover {
  color: #666;
}
#trip-form #trip-form-datetime .date-only, #trip-form #trip-form-datetime .time-only {
  position: relative;
}
#trip-form #trip-form-datetime .date-only input, #trip-form #trip-form-datetime .time-only input {
  padding: 20px 15px 20px;
}
#trip-form #trip-form-datetime .time-only input {
  width: 90px;
  font-size: 15px;
}
#trip-form #trip-form-datetime .date-edit {
  padding: 20px 15px 20px;
  font-size: 14px;
  color: #777777;
}
#trip-form #trip-form-datetime #id_return_date_clear {
  display: none;
}
#trip-form #trip-form-datetime #id_return_date_clear.active {
  display: block;
}
#trip-form #trip-form-datetime .datetime-label {
  width: 14.25%;
  float: left;
  font-size: 15px;
  color: #333333;
  margin-top: 19px;
}
#trip-form #trip-form-datetime .datetime-input {
  width: 50%;
  float: left;
  position: relative;
}
#trip-form #trip-form-datetime .errorlist {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-datetime .form-row.date-only {
    width: 52%;
  }
}
#trip-form .return-portion-trigger, #trip-form .return-portion-trigger:active {
  clear: both;
  width: 120px;
  padding-top: 20px;
  margin-left: 14.25%;
  text-decoration: underline;
}
#trip-form .return-portion-trigger:hover {
  color: #000;
}
#trip-form .return-portion {
  display: none;
}
#trip-form .return-portion .datetime-input {
  position: relative;
}
#trip-form .return-portion .errorlist {
  max-width: 220px;
}
#trip-form .return-portion.active {
  display: block;
}
#trip-form .multiple-dates .datepicker {
  display: block !important;
}
#trip-form .multiple-dates .datepicker .active {
  display: table-cell;
}
#trip-form .form-row {
  position: relative;
}
#trip-form .datetime-type-single {
  display: none;
}
#trip-form .datetime-type-single .errorlist {
  max-width: 220px;
}
#trip-form .datetime-type-single.active {
  display: block;
}
#trip-form .datetime-type-multiple {
  display: none;
  min-height: 300px;
  position: relative;
}
@media (max-width: 767px) {
  #trip-form .datetime-type-multiple {
    min-height: 500px;
  }
}
#trip-form .datetime-type-multiple .container-left {
  float: left;
  width: 260px;
}
@media (max-width: 767px) {
  #trip-form .datetime-type-multiple .container-left {
    float: none;
    width: 100%;
  }
}
#trip-form .datetime-type-multiple .container-left .errorlist {
  top: -21px;
}
#trip-form .datetime-type-multiple .container-right {
  float: left;
  width: 150px;
}
@media (max-width: 767px) {
  #trip-form .datetime-type-multiple .container-right {
    float: none;
    clear: both;
    margin-top: 300px;
    width: 100%;
  }
}
#trip-form .datetime-type-multiple .grey {
  color: #999 !important;
}
#trip-form .datetime-type-multiple .errorlist {
  max-width: 220px;
}
#trip-form .datetime-type-multiple.active {
  display: block;
}
#trip-form .datetime-type-selectors {
  border: 1px solid #bbbbbb;
  border-radius: 15px;
  overflow: hidden;
  margin: 17px 0px 20px 0px;
}
@media (min-width: 769px) {
  #trip-form .datetime-type-selectors {
    width: 376px;
  }
}
@media (max-width: 767px) {
  #trip-form .datetime-type-selectors {
    width: 285px;
  }
}
#trip-form .datetime-type-selectors .datetime-type-dropdown {
  z-index: 20000;
  width: 100%;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector {
  text-align: center;
  width: 50%;
  float: left;
  padding: 5px;
  box-sizing: border-box;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector-single {
  border-right: 1px solid #bbbbbb;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector.active {
  background: #333333;
  color: #fff;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector:hover {
  color: #000;
  background: #efefef;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector.active:hover {
  color: #fff;
  background: #333333;
}
#trip-form .return-remove {
  display: none;
}
#trip-form .return-remove.active {
  display: block;
}
#trip-form #trip-form-space .space-label {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 22px;
}
#trip-form #trip-form-space .space-seats {
  width: 85%;
  float: left;
}
#trip-form #trip-form-space .space-seats #seats {
  position: relative;
}
#trip-form #trip-form-space .space-seats #seats .seat {
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  padding-top: 15px;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 50px;
  float: left;
  margin: 10px 15px 10px 0px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-space .space-seats #seats .seat {
    margin: 5px 5px 5px 0px;
    width: 45px;
    height: 45px;
    padding-top: 12px;
  }
}
#trip-form #trip-form-space .space-seats #seats .seat:hover {
  color: #000000;
}
#trip-form #trip-form-space .space-seats #seats .seat.active {
  background: #333333;
  color: #fff;
}
#trip-form #trip-form-space .space-available-container {
  width: 85%;
  float: left;
}
#trip-form #trip-form-space .space-available-container .space-luggage {
  float: left;
  width: 100px;
  margin-top: 25px;
}
#trip-form #trip-form-space .space-available-container .space-equipment {
  float: left;
  width: 150px;
  margin-left: 20px;
  margin-top: 25px;
}
#trip-form #trip-form-space .space-available-container .text {
  font-size: 14px;
  color: #666;
}
#trip-form #trip-form-vehicle .vehicle-label-left {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 22px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-vehicle .vehicle-label-left {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-vehicle .vehicle-contents {
  width: 85%;
  float: left;
}
@media (max-width: 767px) {
  #trip-form #trip-form-vehicle .vehicle-contents {
    width: 100%;
    float: none;
  }
}
#trip-form #modal-compensation-input-error {
  top: -20px;
  left: 20px;
}
#trip-form #trip-form-booking-type .booking-type-label {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-booking-type .booking-type-label {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-booking-type .booking-type-contents {
  width: 85%;
  float: left;
}
@media (max-width: 767px) {
  #trip-form #trip-form-booking-type .booking-type-contents {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-more-info {
  position: absolute;
  top: -30px;
  right: 0px;
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common {
  float: left;
  position: relative;
  width: 47.5%;
  box-sizing: border-box;
  padding: 60px 20px 30px 40px;
  border: 2px solid #dfdbdb;
  border-radius: 15px;
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common .booking-type-title {
  font-size: 16px;
  font-weight: 700;
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common .booking-type-description {
  font-size: 15px;
  margin-top: 15px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-booking-type .booking-type-contents .booking-type-common {
    width: 100%;
    float: none;
    margin: 20px 0px 20px;
  }
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type.booking-type-common.active {
  border: 2px solid #333;
  box-shadow: none;
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type.booking-type-common.request-to-book {
  margin-right: 5%;
  background: url("../static/pop/webui/common/images/icons/icon_request_to_book.6d57c6621e14.png") no-repeat center left #fff;
  background-size: 35px 35px;
  background-position: 37px 20px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-booking-type .booking-type-contents .booking-type.booking-type-common.request-to-book {
    margin-top: 10px;
  }
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type.booking-type-common.instant-book {
  background: url("../static/pop/webui/common/images/icons/icon_instant_book.12f0689c84f8.svg") no-repeat;
  background-size: 35px 25px;
  background-position: 30px 20px;
}

/* For Task instant book */
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common.instant-book.available {
  background: url("../static/pop/webui/common/images/icons/icon_instant_book.12f0689c84f8.svg") no-repeat #fff  !important;
  background-size: auto 35px !important;
  background-position: 32px 20px !important;
  border: 2px solid #000;
}
 .booking-type-common {
  cursor:pointer !important;
}


#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common.instant-book.unavailable {
  background: url("../static/pop/webui/common/images/icons/icon_instant_book_greyed.988ce14db2cd.png") no-repeat #fff;
  background-size: auto 35px;
  background-position: 40px 20px;

}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common.instant-book.unavailable .booking-type-title {
  opacity: 0.5;
}
#trip-form #trip-form-network-choice .network-choice-label {
  width: 14.25%;
  float: left;
  font-size: 15px;
  color: #777777;
  margin-top: 5px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-label {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents {
  width: 85%;
  float: left;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice-more-info {
  position: absolute;
  top: -30px;
  right: 0px;
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice {
  float: left;
  position: relative;
  width: 47.5%;
  box-sizing: border-box;
  padding: 60px 20px 30px 40px;
  border: 2px solid #dfdbdb;
  border-radius: 15px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents .network-choice {
    padding: 60px 20px 30px 20px;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice .network-choice-title {
  font-size: 16px;
  font-weight: 700;
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice .network-choice-description {
  font-size: 15px;
  margin-top: 15px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents .network-choice {
    width: 100%;
    float: none;
    margin: 20px 0px 20px;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice.active {
  border: 2px solid #333;
  box-shadow: none;
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice.public {
  margin-right: 5%;
  background: url("../static/pop/webui/common/images/brand/poparide-icon.ced4553b41cd.png") no-repeat center left #fff;
  background-size: 25px 25px;
  background-position: 41px 23px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents .network-choice.public {
    margin-top: 0px;
    background-position: 21px 23px;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice.private {
  /* actual background image is set in the DOM */
  background-repeat: no-repeat;
  background-position: 41px 23px;
  background-size: 25px 25px;
  background-color: #fff;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents .network-choice.private {
    background-position: 21px 23px;
  }
}
#trip-form #trip-form-description .description-label {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}
#trip-form #trip-form-description .description-contents {
  width: 85%;
  float: left;
}
#trip-form #trip-form-description .description-contents .form-row {
  position: relative;
}
#trip-form #trip-form-description #id_description_original {
  max-height: 200px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-description #id_description_original {
    max-height: 100px;
  }
}
#trip-form #trip-form-description .description-tip {
  color: #666;
}
#trip-form #trip-form-description textarea {
  font-size: 15px;
}
#trip-form #id_description-error {
  top: -43px;
}
#trip-form #quick-actions {
  border: 1px solid #dfdbdb;
  margin-bottom: 20px;
}
#trip-form #quick-actions .text {
  float: left;
  font-weight: 600;
  padding: 15px;
}
#trip-form #quick-actions .view-requests, #trip-form #quick-actions .cancel-trip, #trip-form #quick-actions .mark-as-full {
  float: right;
  padding: 15px;
  border-left: 1px solid #dfdbdb;
}
#trip-form #quick-actions .reveal-contents-cancel-trip, #trip-form #quick-actions .reveal-contents-trip-full {
  text-align: right;
  padding: 10px;
}
#trip-form #quick-actions .reveal-contents-cancel-trip .loading, #trip-form #quick-actions .reveal-contents-trip-full .loading {
  float: right;
}
#trip-form #quick-actions .reveal-trigger-cancel-trip, #trip-form #quick-actions .reveal-trigger-trip-full {
  cursor: pointer;
}
#trip-form .trip-types {
  border-bottom: 1px solid #777777;
}
#trip-form .trip-types .trip-type {
  padding: 15px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
}
#trip-form .trip-types .trip-type.offer.active {
  border-bottom: 3px solid #5cc0ff;
  color: #5cc0ff;
  font-weight: 500;
}
#trip-form .trip-types .trip-type.ask.active {
  border-bottom: 3px solid #ff5400;
  color: #ff5400;
}
#trip-form #from, #trip-form #to, #trip-form #date {
  position: relative;
  color: #666;
  font-size: 14px;
  padding: 0px;
  margin: 0px;
  /* Stroke */
  /* Fill */
}
#trip-form #from .text, #trip-form #from .value, #trip-form #to .text, #trip-form #to .value, #trip-form #date .text, #trip-form #date .value {
  color: #666;
  font-size: 14px;
}
#trip-form #from .input-arrow, #trip-form #to .input-arrow, #trip-form #date .input-arrow {
  position: absolute;
  top: 14px;
  right: 10px;
}
#trip-form #from .input-arrow:before, #trip-form #from .input-arrow:after, #trip-form #to .input-arrow:before, #trip-form #to .input-arrow:after, #trip-form #date .input-arrow:before, #trip-form #date .input-arrow:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-bottom: 0;
}
#trip-form #from .input-arrow:before, #trip-form #to .input-arrow:before, #trip-form #date .input-arrow:before {
  bottom: -16px;
  right: 1px;
  /* If 1px darken stroke slightly */
  border-top-color: #333;
  border-width: 9px;
}
#trip-form #from .input-arrow:after, #trip-form #to .input-arrow:after, #trip-form #date .input-arrow:after {
  bottom: -15px;
  right: 2px;
  border-top-color: #fff;
  border-width: 8px;
}
#trip-form .placeholder-common, #trip-form :-ms-input-placeholder, #trip-form ::-moz-placeholder, #trip-form :-moz-placeholder, #trip-form ::-webkit-input-placeholder {
  line-height: 18px;
  font-size: 14px;
  color: #444;
}
#trip-form ::-webkit-input-placeholder {
  font-family: "proxima-soft", sans-serif;
}
#trip-form :-moz-placeholder { /* Firefox 18- */
  font-family: "proxima-soft", sans-serif;
}
#trip-form ::-moz-placeholder { /* Firefox 19+ */
  font-family: "proxima-soft", sans-serif;
}
#trip-form :-ms-input-placeholder {
  font-family: "proxima-soft", sans-serif;
}
#trip-form .input-value {
  padding: 0px;
  border: 0px;
}
#trip-form #from:hover, #trip-form #from:active, #trip-form #to:hover, #trip-form #to:active, #trip-form #date:hover, #trip-form #date:active {
  color: #000;
  opacity: 1;
}
#trip-form .dropdown-list, #trip-form .dropdown-search {
  width: 100%;
  overflow-y: auto;
  background: #fff;
  color: #666;
  display: none;
  position: absolute;
  top: 45px;
  left: -1px;
  z-index: 1000;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
#trip-form .dropdown-list .dropdown-item, #trip-form .dropdown-list dropdown-item.info, #trip-form .dropdown-search .dropdown-item, #trip-form .dropdown-search dropdown-item.info {
  padding: 10px;
  border-top: 1px solid #ccc;
  cursor: pointer;
}
#trip-form .dropdown-list .dropdown-item:hover, #trip-form .dropdown-list dropdown-item:active, #trip-form .dropdown-search .dropdown-item:hover, #trip-form .dropdown-search dropdown-item:active {
  background: #ececec;
}
#trip-form .dropdown-list .dropdown-item.info, #trip-form .dropdown-search .dropdown-item.info {
  margin: 0px;
  clear: both;
}
#trip-form .dropdown {
  max-height: 350px;
}
#trip-form .dropdown-trigger {
  border: 1px solid #777777 !important;
  width: 100%;
  height: 48px;
  margin: 0px 0px 15px;
  padding: 12px;
  cursor: pointer;
  opacity: 1;
  background: #fff;
}
#trip-form .dropdown-search {
  display: none;
}
#trip-form #buttons {
  margin-top: 10px;
  width: 100%;
  border: 1px solid #fff;
}
#trip-form #buttons .button-common, #trip-form #buttons #button-offer, #trip-form #buttons #button-find {
  padding: 14px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
#trip-form #buttons #button-find {
  width: 50%;
  float: left;
}
#trip-form #buttons #button-offer {
  border-left: 1px solid #fff;
  width: 50%;
  float: right;
}
#trip-form #buttons #button-find:hover, #trip-form #buttons #button-find:active, #trip-form #buttons #button-offer:hover, #trip-form #buttons #button-offer:active {
  background: #fff;
  color: #333;
}
#trip-form .calendar-div {
  position: relative;
}
#trip-form .calendar-div .calendar-input {
  position: relative;
}
#trip-form .calendar-div .calendar-input #date {
  padding: 15px;
}
#trip-form #id_is_driving {
  display: none;
}
#trip-form #id_tos {
  display: none;
}
#trip-form #id_compensation-error {
  top: -35px;
  left: 0px;
  width: 200px;
}
#trip-form .datetime-type-multiple .departure-date-error {
  top: -28px;
  z-index: 5;
}
#trip-form .departure-time-error {
  position: absolute;
  width: 70px;
}
#trip-form .trigger-multiple-return-time {
  width: 92px;
}
#trip-form #clear-return-time {
  position: absolute;
  top: 23px;
  right: -25px;
}
#trip-form #id_payment_method {
  position: absolute;
  left: 0px;
  background: #F2F2F2;
  color: #fff;
  z-index: -1;
  height: 1px;
  width: 1px;
  border: none;
  -moz-appearance: textfield;
}
#trip-form .form-row.seats {
  margin-top: 20px;
  margin-bottom: 20px;
}
#trip-form .form-row.seats .text {
  margin-bottom: 5px;
}
#trip-form .form-row.seats .seatno {
  cursor: pointer;
  float: left;
  width: 10px;
  height: 10px;
  padding: 15px;
  border: 1px solid #dfdbdb;
  text-align: center;
  margin-right: 7px;
  margin-bottom: 7px;
  line-height: 10px;
}
#trip-form .form-row.seats .seatno.active {
  background: #333333;
  color: #fff;
}
#trip-form .form-row.seats .label {
  float: left;
  margin-top: 10px;
  margin-right: 10px;
}
#trip-form .form-row.seats .compensation {
  float: left;
}
#trip-form .form-row.seats .currency-sign {
  float: left;
  line-height: 45px;
  margin-right: 10px;
}
#trip-form .form-row.seats .errorlist {
  padding: 12px 0px 0px 7px;
  float: left;
}
#trip-form .form-row.vehicle {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #dfdbdb;
}
#trip-form .form-row.description {
  margin-top: 20px;
}
#trip-form .form-row.description #id_description {
  width: 93%;
  height: 150px;
}
#trip-form .form-row.luggage {
  margin-top: 20px;
}
#trip-form .form-row.luggage, #trip-form .form-row.equipment {
  height: 30px;
  border-top: 1px solid #dfdbdb;
  padding: 13px 0px 13px;
}
#trip-form .button.large, #trip-form #welcome .welcome-common #no_pending_email_form .large[type=submit], #welcome .welcome-common #no_pending_email_form #trip-form .large[type=submit], #trip-form .vehicle-form .large[type=submit], .vehicle-form #trip-form .large[type=submit] {
  width: 100%;
  margin-bottom: 0px;
}
#trip-form #id_cashless {
  display: none;
}
#trip-form .payment-methods {
  width: 80%;
  border: 1px solid #ccc;
}
#trip-form .payment-methods .payment-method {
  float: left;
  width: 50%;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
}
#trip-form .payment-methods .payment-method.cashless {
  border-right: 1px solid #ccc;
}
#trip-form .payment-methods .payment-method.active {
  background: #333333;
  color: #fff;
}
#trip-form .payment-methods.editable .payment-method {
  cursor: pointer;
}

.trip-form-policies .policies-label {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
@media (max-width: 767px) {
  .trip-form-policies .policies-label {
    width: 100%;
    float: none;
  }
}
@media (min-width: 769px) {
  .trip-form-policies .policy-columns {
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 769px) {
  .trip-form-policies .policy-column {
    max-width: 300px;
  }
}
.trip-form-policies .policy-column .policy-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 15px;
  padding-top: 70px;
  height: 24px;
}
@media (max-width: 767px) {
  .trip-form-policies .policy-column .policy-title {
    margin-bottom: 0px;
    padding-top: 60px;
  }
}
.trip-form-policies .policy-column .policy-title.cash {
  background: url("../static/pop/webui/common/images/icons/no_cash.66fb313ae607.svg") no-repeat top left -5px;
  background-size: 60px 60px;
}
@media (max-width: 767px) {
  .trip-form-policies .policy-column .policy-title.cash {
    padding-top: 70px;
  }
}
.trip-form-policies .policy-column .policy-title.reliable {
  background: url("../static/pop/webui/common/images/icons/on_time.db6baae9329b.svg") no-repeat;
  background-size: 60px 60px;
}
@media (max-width: 767px) {
  .trip-form-policies .policy-column .policy-title.reliable {
    padding-top: 70px;
  }
}
.trip-form-policies .policy-column .policy-title.safety {
  background: url("../static/pop/webui/common/images/how/warning.2368f53ddcf8.svg") no-repeat top left -5px;
  background-size: 60px 60px;
}
@media (max-width: 767px) {
  .trip-form-policies .policy-column .policy-title.safety {
    padding-top: 70px;
  }
}
.trip-form-policies .policy-column .policy-item {
  margin: 10px 0px;
}
.trip-form-policies .policy-items-container {
  display: none;
}
.trip-form-policies .policy-items-container.active {
  display: block;
}

@media only screen and (max-width: 666px) {
  #trip-form #trip-form-locations {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-locations .location-container .location-label {
    width: 100%;
    float: none;
    margin-bottom: 5px;
  }
  #trip-form #trip-form-locations .location-container .location-input {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-locations #vias-container {
    margin-left: 0px;
    float: none;
  }
  #trip-form #trip-form-locations .vias-container-box {
    width: 100%;
  }
  #trip-form #trip-map {
    margin-top: 30px;
    width: 100%;
    height: 250px;
    margin-left: 0%;
  }
  #trip-form #geo-map {
    height: 250px;
  }
  #trip-form #add-via-button {
    float: none;
    margin-left: 0px;
  }
  #trip-form #trip-form-datetime .datetime-label {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-datetime .datetime-input {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-space .space-label {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-space .space-seats {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-space .space-seats #seats .seat.last {
    margin-right: 0px;
  }
  #trip-form #trip-form-space .space-available-container {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-space .space-available-container .space-luggage {
    float: left;
    width: 50%;
  }
  #trip-form #trip-form-space .space-available-container .space-equipment {
    float: left;
    width: 50%;
    margin-left: 0px;
  }
  #trip-form #trip-form-description .description-label {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-description .description-contents {
    width: 100%;
    float: none;
  }
  #trip-form .button, #trip-form #welcome .welcome-common #no_pending_email_form [type=submit], #welcome .welcome-common #no_pending_email_form #trip-form [type=submit], #trip-form .vehicle-form [type=submit], .vehicle-form #trip-form [type=submit] {
    margin-left: 0px;
  }
  #trip-form .return-portion-trigger, #trip-form .return-portion-trigger:hover, #trip-form .return-portion-trigger:active {
    margin-left: 0px;
    width: 100%;
  }
}
#trip-form-instructions .box-trip-copied .success-icon {
  height: 20px;
  width: 20px;
  background: url("../static/pop/webui/common/images/icons/icon-tick-green.d63056c4f7a9.png") left center no-repeat;
  background-size: 15px 15px;
  border-radius: 16px;
  float: left;
  margin-right: 2px;
  margin-top: 0px;
}
#trip-form-instructions .box-trip-invite .trip-invitee {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid #dfdbdb;
  margin-right: 20px;
  position: relative;
}
#trip-form-instructions .box-trip-invite .invite-icon {
  height: 20px;
  width: 20px;
  top: -5px;
  left: -5px;
  background: url("../static/pop/webui/common/images/icons/icon-invite-white.0e604b2b32ab.png") center center #ff4f02 no-repeat;
  background-size: 12px 12px;
  border-radius: 20px;
  background-position: 5px;
  position: absolute;
}
@media (max-width: 767px) {
  #trip-form-instructions .box-trip-invite .text-medium, #trip-form-instructions .box-trip-invite #book .booking-form .trip-form-policies .text-slarge, #book .booking-form .trip-form-policies #trip-form-instructions .box-trip-invite .text-slarge, #trip-form-instructions .box-trip-invite #book .booking-form .trip-form-policies .trip-form-section-header, #book .booking-form .trip-form-policies #trip-form-instructions .box-trip-invite .trip-form-section-header, #trip-form-instructions .box-trip-invite #book .booking-form .trip-form-policies .policy-title, #book .booking-form .trip-form-policies #trip-form-instructions .box-trip-invite .policy-title, #trip-form-instructions .box-trip-invite #payments .payment-box .payment-text, #payments .payment-box #trip-form-instructions .box-trip-invite .payment-text, #trip-form-instructions .box-trip-invite #payments .payment-box .payment-amount, #payments .payment-box #trip-form-instructions .box-trip-invite .payment-amount, #trip-form-instructions .box-trip-invite #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details h2, #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #trip-form-instructions .box-trip-invite h2, #trip-form-instructions .box-trip-invite #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies h2, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies #trip-form-instructions .box-trip-invite h2, #trip-form-instructions .box-trip-invite #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details .trip-date, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #trip-form-instructions .box-trip-invite .trip-date {
    margin-top: 8px;
    font-size: 14px;
    line-height: 18px;
  }
}
#trip-form-instructions .box-editing-trip {
  margin-top: 0px;
}
@media (max-width: 767px) {
  #trip-form-instructions .box-editing-trip .text-medium, #trip-form-instructions .box-editing-trip #book .booking-form .trip-form-policies .text-slarge, #book .booking-form .trip-form-policies #trip-form-instructions .box-editing-trip .text-slarge, #trip-form-instructions .box-editing-trip #book .booking-form .trip-form-policies .trip-form-section-header, #book .booking-form .trip-form-policies #trip-form-instructions .box-editing-trip .trip-form-section-header, #trip-form-instructions .box-editing-trip #book .booking-form .trip-form-policies .policy-title, #book .booking-form .trip-form-policies #trip-form-instructions .box-editing-trip .policy-title, #trip-form-instructions .box-editing-trip #payments .payment-box .payment-text, #payments .payment-box #trip-form-instructions .box-editing-trip .payment-text, #trip-form-instructions .box-editing-trip #payments .payment-box .payment-amount, #payments .payment-box #trip-form-instructions .box-editing-trip .payment-amount, #trip-form-instructions .box-editing-trip #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details h2, #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #trip-form-instructions .box-editing-trip h2, #trip-form-instructions .box-editing-trip #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies h2, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies #trip-form-instructions .box-editing-trip h2, #trip-form-instructions .box-editing-trip #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details .trip-date, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #trip-form-instructions .box-editing-trip .trip-date {
    margin-top: 8px;
    font-size: 14px;
    line-height: 18px;
  }
}

#trip_offer-page.in-app .page {
  padding-top: 0px;
}

.gradient-orange, #home #home-find .home-find-box-offset, #passengers .how-single-process-offset, #how .how-header #how-header-container-orange-highlight {
  background: rgb(255, 174, 136);
  background: linear-gradient(340deg, rgb(255, 174, 136) 12%, rgb(255, 195, 140) 100%);
}

.gradient-blue, #canada-map .canada-map-cta, #home #home-post #home-post-box, #drivers .how-single-process-offset, #how .how-header #how-header-container-blue-highlight, #business .business-top {
  background: rgb(146, 211, 255);
  background: linear-gradient(340deg, rgb(146, 211, 255) 12%, rgb(205, 240, 255) 100%);
}

.gradient-yellow, #home #home-safety #home-safety-box, #how_safety-page .how-single-process .how-single-process-offset, #how .how-benefit.safety {
  background: rgb(255, 217, 151);
  background: linear-gradient(340deg, rgb(255, 217, 151) 12%, rgb(255, 246, 212) 100%);
}

.gradient-green, #sustainability #sustainability-box, #sustainability-page #sustainability-banner {
  background: rgb(188, 244, 174);
  background: linear-gradient(340deg, rgb(188, 244, 174) 12%, rgb(223, 255, 218) 100%);
}

.gradient-purple, #event_list-page #event-list-banner, #event_history_list-page #event-list-banner {
  background: rgb(255, 180, 255);
  background: linear-gradient(340deg, rgb(255, 180, 255) 12%, rgb(244, 220, 255) 100%);
}

.header-anchor {
  display: inline-block;
  margin-left: 7px;
  height: 20px;
  width: 20px;
  outline: 0;
}

.header-anchor:hover {
  display: inline-block;
  margin-left: 7px;
  background: #ccc;
  height: 20px;
  width: 20px;
  background: url("/static/pop/webui/common/images/icons/icon-anchor.dfe31862021e.png") no-repeat center center #ececec;
  background-size: 15px 15px;
  border-radius: 2px;
  outline: 0;
}

.header-anchor:focus {
  outline: 0;
}

.red:not(.deer) {
  color: #ff0000 !important;
}

.lightred {
  color: #ff6060 !important;
}

.black {
  color: #000000 !important;
}

.darkgrey {
  color: #333333;
}

.lightgrey {
  color: #dfdbdb;
}

.green {
  color: #05AC09;
}

.greyed {
  color: #dfdbdb !important;
}

.greyed {
  color: #777777 !important;
}

.lightergrey {
  color: #f8f8f8;
}

.grey {
  color: #666;
}

.box {
  border: 1px solid #dfdbdb;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
}
.box .box-header {
  padding: 10px;
}
.box .box-header.blue {
  background: #0099ff;
  color: #fff;
}
.box .box-header.grey {
  background: #dfdbdb;
}
.box .box-container {
  padding: 10px;
}

.box.orange {
  background: #ff4f02;
  color: #fff;
  border: none;
}

.box.blue {
  background: #0099ff;
  color: #fff;
  border: none;
}

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

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.faded {
  opacity: 0.3;
}

.border-box, #manage .trip .right-section, #manage .trip, #manage .trip-types .trip-type, #trip-form #buttons .button-common, #trip-form #buttons #button-offer, #trip-form #buttons #button-find, #trip-form .dropdown-trigger, #trip-form .dropdown-list .dropdown-item, #trip-form .dropdown-list dropdown-item.info, #trip-form .dropdown-search .dropdown-item, #trip-form .dropdown-search dropdown-item.info, #trip-form .trip-types .trip-type, #user .user-left .profile-details, #payments .trip-types .trip-type, .modal .modal-box, .social-logins .social-login, .container-wide, .address, #business .business-container, #header-page #header-bottom, textarea, .input-line, input[type=text], input[type=password], input[type=date], input[type=time], input[type=email], input[type=number], .spacious, .common-msg-small, .grey-msg-small, .tip-msg-small, .common-msg, .upsell-msg, .white-msg, .tip-msg, .success-msg, .info-msg, #incident-corona-notice, .error-msg, #book .booking-form .booking-version .error, .warning-msg {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}

a {
  color: #ff4f02;
}

a.white {
  color: #fff;
}

a.underlined {
  text-decoration: underline;
}

.lower {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}

.link-white {
  color: #fff;
  text-decoration: underline;
}

.link-white:hover {
  color: #dfdbdb;
}

a.link-grey, #terms a, #privacy a {
  color: #333333;
}

a.link-grey:hover, #terms a:hover, #privacy a:hover {
  color: #666;
}

a.link-grey:active, #terms a:active, #privacy a:active {
  color: #000;
}

a.link-black {
  color: #000000;
}

a.link-black:hover {
  color: #333333;
}

a.link-black:active {
  color: #777777;
}

a.link-new-window {
  background: url("/static/pop/webui/common/images/icons/icon-new-window.1ff942fdce75.png") no-repeat right center;
  padding-right: 22px;
  background-size: 16px 16px;
}

.link-group {
  padding: 10px 0px;
}
.link-group a:first-child, .link-group button:first-child {
  border-top: none;
}
.link-group .link-group-heading {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  margin: 20px 0px;
}

a.link-block, button.link-block {
  border: none;
  border-top: 1px solid #dfdbdb;
  background: url("/static/pop/webui/common/images/icons/icon-triangle-right-black.14ae5b23146b.png") no-repeat right center;
  background-size: 10px auto;
  padding: 18px 18px 18px 0px;
  color: #000;
  width: 100%;
  display: block;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.8;
  box-sizing: border-box;
  text-align: left;
}

a.link-block.link-block-small {
  padding: 12px 0px;
  font-size: 14px;
}

a.link-block:hover, button.link-block:hover {
  opacity: 0.9;
  outline: none;
}

a.link-block:active, button.link-block:active {
  opacity: 1;
  color: #000;
  outline: none;
}

a.link-block.no-arrow {
  background: none;
  padding: 18px 0px;
}

a.link-block.large {
  padding: 30px 0px;
}

a.link-block.red, button.link-block.red {
  color: #ff6060;
  background: url("/static/pop/webui/common/images/icons/icon-triangle-right-red.b06a5edd1783.png") no-repeat right center;
  background-size: 10px auto;
}

.zoom-animate, #find-page #popular-routes .popular-routes-box .popular-route {
  transition: transform 0.2s;
}

.zoom-animate:hover, #find-page #popular-routes .popular-routes-box .popular-route:hover {
  transform: scale(1.03, 1.03);
}

.clear {
  clear: both;
}

.inline {
  display: inline;
}

.row {
  clear: both;
  width: 90%;
  padding: 20px;
}

.no-padding {
  padding: 0px;
}

.no-padding-vertical {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

@media (max-width: 767px) {
  .no-padding-mobile {
    padding: 0px !important;
  }
}

.no-margin {
  margin: 0px !important;
}

.no-margin-top {
  margin-top: 0px !important;
}

.hidden {
  display: none;
}

.container-global {
  background: #fff;
  margin: 25px 20px 20px 20px;
  border: 1px solid #e0dfdf;
}

.tertiary-container-global {
  padding: 80px 20px 10px 20px;
}

.new-feature {
  vertical-align: super;
  font-size: 10px;
  line-height: 0px;
}

.new-box {
  padding: 0px 7px;
  background: #ff4f02;
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  margin-left: 5px;
}

.with-border {
  border: 1px solid #dfdbdb;
}

.picture-round, .picture-round-large, .picture-round-medium, #dashboard #trip-notifications .trip-notification-item .trip-request .profile-pic, .picture-round-small, #trip #trip-bookings #trip-bookings-tabs .booking-tab-trigger .profile-pic {
  border-radius: 500px;
  border: 1px solid #dfdbdb;
  background: #f1f1f1;
  background-size: contain;
  background-position: center center;
}

.picture-round-small, #trip #trip-bookings #trip-bookings-tabs .booking-tab-trigger .profile-pic {
  width: 40px;
  height: 40px;
}

.picture-round-medium, #dashboard #trip-notifications .trip-notification-item .trip-request .profile-pic {
  width: 60px;
  height: 60px;
}

.picture-round-large {
  width: 100px;
  height: 100px;
}

.profile-pic {
  cursor: pointer;
}

.position-relative {
  position: relative;
}

.float-left {
  float: left;
}

@media (max-width: 767px) {
  .break-on-mobile {
    float: none !important;
  }
}

.float-right {
  float: right;
}

a.float-right {
  font-size: 15px;
}

.link-right {
  float: right;
  text-align: right;
}

.link-right.heading {
  margin-top: -23px;
}

.no-border {
  border: none;
}

.active {
  display: block;
}

.inactive {
  display: none !important;
}

.strong, #book .booking-form .trip-form-policies .trip-form-section-header {
  font-weight: 700 !important;
  font-size: auto;
}

.semi-strong {
  font-weight: 600 !important;
}

.padding-small {
  padding: 10px;
}

.padding-medium {
  padding: 20px;
}

.padding-large {
  padding: 40px;
}

.orange-gradient, .button.orange, #welcome .welcome-common #no_pending_email_form .orange[type=submit], .vehicle-form .orange[type=submit] {
  /* fallback/image non-cover color */
  background-color: #ff8534;
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(#ff8534, #ff5400);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8534), to(#ff5400));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(#ff8534, #ff5400);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(#ff8534, #ff5400);
}

.blue-gradient, .button.blue, #welcome .welcome-common #no_pending_email_form .blue[type=submit], .vehicle-form .blue[type=submit] {
  /* fallback/image non-cover color */
  background-color: #7ccdff;
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(#7ccdff, #5cc0ff);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7ccdff), to(#5cc0ff));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(#7ccdff, #5cc0ff);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(#7ccdff, #5cc0ff);
}

.primary {
  background: #ff4f02;
}

.primary:hover {
  background: #ff7430;
}

.primary:active {
  background: #dd4900;
}

.button-full {
  width: 100%;
}

.button.secondary, #welcome .welcome-common #no_pending_email_form .secondary[type=submit], .vehicle-form .secondary[type=submit] {
  background: #0099ff;
}

.button.secondary:hover, #welcome .welcome-common #no_pending_email_form .secondary[type=submit]:hover, .vehicle-form .secondary[type=submit]:hover {
  background: #44b4ff;
}

.button.secondary:secondarycoloraactive, #welcome .welcome-common #no_pending_email_form .secondary[type=submit]:secondarycoloraactive, .vehicle-form .secondary[type=submit]:secondarycoloraactive {
  background: #0077c6;
}

.button.secondary.with-plus, #welcome .welcome-common #no_pending_email_form .secondary.with-plus[type=submit], .vehicle-form .secondary.with-plus[type=submit] {
  background: url("/static/pop/webui/common/images/icons/icon-plus-circle-blue-h.64e5f8ece0b7.png") #0099ff no-repeat;
  background-size: 30px 30px;
  background-position: 7px 8px;
}

.button.secondary.with-plus:hover, #welcome .welcome-common #no_pending_email_form .secondary.with-plus[type=submit]:hover, .vehicle-form .secondary.with-plus[type=submit]:hover {
  background: url("/static/pop/webui/common/images/icons/icon-plus-circle-blue-h.64e5f8ece0b7.png") #44b4ff no-repeat;
  background-size: 30px 30px;
  background-position: 7px 8px;
}

.button.secondary.with-plus:active, #welcome .welcome-common #no_pending_email_form .secondary.with-plus[type=submit]:active, .vehicle-form .secondary.with-plus[type=submit]:active {
  background: url("/static/pop/webui/common/images/icons/icon-plus-circle-blue-h.64e5f8ece0b7.png") #0077c6 no-repeat;
  background-size: 30px 30px;
  background-position: 7px 8px;
}

a.button-back {
  background: url("https://convoyeur.pro/static/pop/webui/common/images/icons/arrow_left_grey.f94ce5a911c3.svg") no-repeat center left;
  background-size: 20px 20px;
  color: #777777;
  padding: 15px 0px 15px 25px;
  display: inline-block;
}

a.button-back:hover {
  opacity: 0.9;
}

a.button-back:active {
  opacity: 1;
}

.margin-right-xs {
  margin-right: 5px;
}

.margin-right-s {
  margin-right: 15px;
}




/* Tooltip */
.tooltip {
  cursor: pointer !important;
}

.ui-helper-hidden-accessible {
  display: none;
}

.ui-tooltip {
  position: absolute;
  background: #333333;
  color: #fff;
  padding: 7px;
  font-size: 13px;
  border-radius: 3px;
  top: -5px;
  z-index: 1000;
}


/* Dividers & spacers*/
.divider {
  height: 1px;
  width: 100%;
  background: #777777;
  margin: 10px 0px 10px;
}

.divider.grey {
  background: #ccc;
}

.divider.white {
  background: #fff;
}

.divider.light {
  background: #dfdbdb;
}

.divider.light.dashed {
  background: none;
  border-top: 1px dashed #dfdbdb;
}

.divider.narrow {
  background: #dfdbdb;
  max-width: 350px;
}

.divider.short {
  max-width: 60px;
}

.divider.center {
  margin: 0px auto;
}

.divider.thick {
  height: 3px;
  background: #333333;
}

.divider.thick.light {
  height: 3px;
  background: #dfdbdb;
  border-radius: 3px;
}

.xxs-spacer {
  height: 5px;
  clear: both;
}

.xs-spacer {
  height: 10px;
  clear: both;
}

.s-spacer {
  height: 20px;
  clear: both;
}

.m-spacer {
  height: 40px;
  clear: both;
}

.sl-spacer {
  height: 50px;
  clear: both;
}

.l-spacer {
  height: 60px;
  clear: both;
}

.xl-spacer {
  height: 200px;
  clear: both;
}

/* Alignment */
.align-right {
  text-align: right;
}

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

.align-center {
  text-align: center !important;
}

.align-block-center {
  margin-left: auto;
  margin-right: auto;
}

.info-circle {
  text-align: center;
  border-radius: 20px;
  height: 18px;
  width: 18px;
  cursor: default;
  margin-top: 1px;
  font-weight: 500;
  background: #333333;
  color: #fff;
  line-height: 20px;
  font-size: 15px;
}

.info-circle.red {
  background: #ff0000;
  border: none;
  color: #fff !important;
  font-weight: 400;
  border-radius: 22px;
  height: 22px;
  width: 22px;
  line-height: 22px;
}

.info-circle.blue {
  background: #0099ff;
  border: none;
  color: #fff !important;
  font-weight: 400;
  border-radius: 22px;
  height: 22px;
  width: 22px;
  line-height: 22px;
}

.info-circle.space-left {
  margin-left: 10px;
}


/* Common attributes for all forms */
INPUT[type=text]:focus,
INPUT[type=number]:focus,
INPUT[type=email]:focus,
INPUT[type=search]:focus,
INPUT[type=password]:focus,
INPUT[type=range]:focus,
INPUT[type=textarea]:focus {
  outline: none;
  -webkit-appearance: none;
}



input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, input[type=time]:hover, input[type=email]:hover, input[type=number]:hover,
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=time]:focus, input[type=email]:focus, input[type=number]:focus {
  border: 1px solid #ccc;
}



/* Main attributes for the shell */
/* DISABLED: .page-left {  */
/* DISABLED:   width: 45%;  */
/* DISABLED:   float: left;  */
/* DISABLED: }  */

/* DISABLED: .page-right {  */
/* DISABLED:   width: 45%;  */
/* DISABLED:   float: right;  */
/* DISABLED: }  */

.address, #business .business-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}


/* Location trigger */
.location-chooser {
  position: relative;
}
.location-chooser .location-input-vanity {
  border-radius: 10px;
  font-family: "proxima-soft", sans-serif;
  cursor: pointer;
  box-sizing: border-box;
  padding: 20px 15px 20px 35px;
  border: none;
  background: url("https://convoyeur.pro/static/pop/webui/common/images/icons/location.a9dbd27e31d6.svg") no-repeat #ececec center left 10px;
  background-size: 15px;
  width: 100%;
  font-size: 16px;
  color: #565a5c;
}
.location-chooser .location-label {
  height: 25px;
  overflow: hidden;
}

/* Location modal */
.modal-location {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #fff;
}
.modal-location .modal-box {
  z-index: 2000;
  border: none;
  box-shadow: none;
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .modal-location .modal-box {
    margin-top: 0px;
    padding: 0px;
    overflow-y: auto;
    height: 100% !important;
  }
}
.modal-location .modal-location-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  color: #333333;
  opacity: 0.9;
  cursor: pointer;
  z-index: 1000;
}
@media (max-width: 767px) {
  .modal-location .modal-location-close {
    top: 10px;
    right: 10px;
  }
}
.modal-location .modal-location-close:hover {
  opacity: 1;
}
.modal-location .modal-location-input, .modal-location .modal-location-input:hover {
  border-bottom: 1px solid #777777;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  padding: 20px 0px 20px 25px;
  font-size: 20px;
  margin: 0px;
  border-radius: 0px !important;
}
.modal-location #id_origin-modal-location-input.modal-location-input, .modal-location #id_origin-modal-location-input.modal-location-input:hover {
  background: url("https://convoyeur.pro/static/pop/webui/common/images/icons/location.a9dbd27e31d6.svg") no-repeat #fff center left -3px;
  background-size: 20px;
}
.modal-location #id_destination-modal-location-input.modal-location-input, .modal-location #id_destination-modal-location-input.modal-location-input:hover,
.modal-location #id_vias-0-location-modal-location-input, .modal-location #id_vias-0-location-modal-location-input:hover,
.modal-location #id_vias-1-location-modal-location-input, .modal-location #id_vias-1-location-modal-location-input:hover,
.modal-location #id_vias-2-location-modal-location-input, .modal-location #id_vias-2-location-modal-location-input:hover,
.modal-location #id_vias-3-location-modal-location-input, .modal-location #id_vias-3-location-modal-location-input:hover,
.modal-location #id_vias-4-location-modal-location-input, .modal-location #id_vias-4-location-modal-location-input:hover {
  background: url("https://convoyeur.pro/static/pop/webui/common/images/icons/location.a9dbd27e31d6.svg") no-repeat #fff center left -3px;
  background-size: 20px;
}
.modal-location .modal-location-loader {
  position: relative !important;
  height: 30px;
}
.modal-location .modal-location-loader .loader.loader-grey {
  left: 12px;
  top: 10px;
}
.modal-location .modal-location-result-item {
  border-bottom: 1px dotted #dfdbdb;
  padding: 10px 0px 10px 25px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
.modal-location .modal-location-result-item:hover {
  background: #efefef;
}
.modal-location .modal-location-result-item.active, .modal-location .modal-location-result-item.active:hover, .modal-location .modal-location-result-item:focus, .modal-location .modal-location-result-item:active {
  background: #333333 !important;
  color: #fff;
}
.modal-location .modal-location-error {
  padding: 10px;
  background: #ffcccc;
  box-sizing: border-box;
}
.modal-location .modal-location-error .modal-location-error-title {
  color: #333333;
  font-weight: 700;
  font-size: 16px;
}
.modal-location .modal-location-error .modal-location-error-subtitle {
  color: #333333;
  font-weight: 400;
  font-size: 16px;
}
.modal-location .modal-location-need-more-input, .modal-location .modal-location-no-results {
  padding: 20px 0px;
  box-sizing: border-box;
}
.modal-location .modal-close {
  font-size: 42px;
}


/* Add a trip */
#offer-pre {
  border-bottom: none !important;
  background: none;
}
@media (min-width: 769px) {
  #offer-pre {
    margin: 20px 0px 0px 0px;
  }
}
#offer-pre h1 {
  color: #000;
  font-weight: 800;
}
@media (min-width: 769px) {
  #offer-pre h1 {
    font-size: 48px;
    margin-bottom: 1px;
  }
}
@media (max-width: 767px) {
  #offer-pre h1 {
    font-size: 32px;
    margin-bottom: 20px;
  }
}
#offer-pre .trip-actions a:hover {
  color: #f7f7fa;
}
@media (max-width: 767px) {
  #offer-pre .address, #offer-pre #business .business-container, #business #offer-pre .business-container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

#offer .tip-msg {
  line-height: 24px;
}
#offer #trip-list {
  display: none;
}
#offer #trip-list .trip {
  margin: 5px 0px 5px;
  float: left;
  border: 1px solid #dfdbdb;
  position: relative;
}
@media (min-width: 769px) {
  #offer #trip-list .trip {
    width: 48%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 767px) {
  #offer #trip-list .trip {
    width: 100%;
    float: none;
    padding: 10px;
    margin: 7px 0px 7px;
  }
}
@media (max-width: 320px) {
  #offer #trip-list .trip {
    padding: 5px;
  }
}
@media (max-width: 320px) {
  #offer #trip-list .trip .trip-owner .profile-pic {
    margin-top: 0px;
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 320px) {
  #offer #trip-list .trip .trip-cta .green {
    margin-top: 0px;
  }
}
@media (min-width: 769px) {
  #offer #trip-list .trip:nth-child(odd) {
    margin-right: 4%;
  }
}
#offer #trip-list .trip:hover .copy-details, #offer #trip-list .trip:active .copy-details {
  display: block;
}
#offer #trip-list.active {
  display: block;
}

#offer.page {
  padding-top: 0px;
}

.trip-copy-container {
  box-sizing: border-box;
  border: 1px solid #dfdbdb;
  border-radius: 15px;
  font-size: 15px;
}
.trip-copy-container #trip-list {
  margin-top: 0px;
}
.trip-copy-container .trip-copy-container-cta {
  opacity: 0.8;
  font-weight: 500;
  color: #000;
  padding: 16px 10px 15px 10px;
}
.trip-copy-container .trip-copy-container-cta .trip-copy-container-cta-left {
  float: left;
  background: url("/static/pop/webui/common/images/icons/icon_copy.1f1d3d042e68.png") no-repeat center left;
  background-size: 20px 20px;
  padding-left: 30px;
}
.trip-copy-container .trip-copy-container-cta .trip-copy-container-cta-right {
  float: right;
  font-size: 18px;
}
.trip-copy-container .trip-copy-container-cta:hover {
  opacity: 1;
}
.trip-copy-container .trip-copy-container-cta:active {
  opacity: 1;
  background: none !important;
  -webkit-tap-highlight-color: transparent;
}
.trip-copy-container .trip-item-to-copy {
  display: block;
  color: #333333;
  padding: 15px;
  box-sizing: border-box;
  border-top: 1px solid #dfdbdb;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left {
  float: left;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-right {
  float: right;
  margin-top: 10px;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left-location {
  color: #0099ff;
  font-weight: 700;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left-details {
  font-weight: 600;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left-details .trip-item-to-copy-seat {
  color: #000;
}
.trip-copy-container .trip-item-to-copy .trip-item-to-copy-left-details .trip-item-to-copy-price {
  color: #009a4b;
}
.trip-copy-container .trip-item-to-copy:hover {
  opacity: 0.8;
}
.trip-copy-container .trip-item-to-copy:active {
  opacity: 1;
  background: #efefef;
}

.trip-copy-container:active {
  background: none !important;
  -webkit-tap-highlight-color: transparent;
}

#trip-form {
  /* Styling placeholder */
}
#trip-form .trip-form-section-header {
  font-size: 24px;
  margin-bottom: 15px;
  color: #000000;
  font-weight: 700;
}
#trip-form .trip-form-section-subheader {
  font-size: 15px;
  color: #777777;
}
#trip-form .trip-form-section-label {
  font-size: 15px;
  color: #333333;
  font-weight: 600;
}
#trip-form #non-field-error {
  margin: 0px 0px 40px;
}
@media (max-width: 767px) {
  #trip-form #non-field-error {
    margin: 20px 0px 10px;
  }
}
#trip-form #non-field-error .errorlist {
  color: #333;
}
#trip-form #id_departure_date, #trip-form #id_return_date {
  background: url("https://convoyeur.pro/static/pop/webui/common/images/icons/calendar.98d099ccbf4b.svg") no-repeat 12px 24px #ececec !important;
  background-size: 14px 14px !important;
  font-size: 15px;
}
#trip-form #trip-form-locations .route-errors .error-msg, #trip-form #trip-form-locations .route-errors #book .booking-form .booking-version .error, #book .booking-form .booking-version #trip-form #trip-form-locations .route-errors .error {
  margin-bottom: 25px;
}
#trip-form #trip-form-locations .precise-location-helper {
  position: absolute;
  font-size: 12px;
  top: -32px;
  background: #333;
  padding: 5px 10px 5px 10px;
  color: #fff;
  border-radius: 5px;
  z-index: 100;
}
#trip-form #trip-form-locations .precise-location-helper:after {
  top: 100%;
  left: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(51, 51, 51, 0);
  border-top-color: #333;
  border-width: 7px;
  margin-left: -7px;
}
#trip-form #trip-form-locations #undo-vias-optimized-button {
  color: #666;
}
#trip-form #trip-form-locations .location-container .location-label {
  width: 30%;
  float: left;
  font-size: 15px;
  color: #333333;
  margin-top: 19px;
}
#trip-form #trip-form-locations .location-container .location-input {
  width: 70%;
  float: left;
  position: relative;
}
#trip-form #trip-form-locations .location-container .location-input .order-via-button {
  background: url("/static/pop/webui/common/images/icons/icon-drag.287173f6ed74.png") repeat;
  background-size: 3px 3px;
  opacity: 1;
  height: 53px;
  width: 5px;
  position: absolute;
  top: 4px;
  left: 2px;
  cursor: move;
}
#trip-form #trip-form-locations .location-container .location-input .order-via-button:hover, #trip-form #trip-form-locations .location-container .location-input .order-via-button:active {
  opacity: 1;
}
#trip-form #trip-form-locations .location-container .location-input input {
  font-size: 15px;
}
#trip-form #trip-form-locations .vias-container-box {
  width: 70%;
  float: left;
}
#trip-form #trip-form-locations .vias-container-box .location-input {
  width: 100%;
}
#trip-form #trip-form-locations .vias-container-box .via {
  margin-bottom: 15px;
}
#trip-form #trip-form-locations .vias-container-box .via .geo-location {
  padding-left: 20px;
}
#trip-form #trip-form-locations .vias-container-box .via input {
  font-size: 14px;
}
#trip-form .input-edit {
  color: #777777;
  margin: 5px 0px 5px 0px;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0.6;
}
#trip-form #trip-form-locations {
  width: 47.5%;
  margin-right: 2.5%;
}
#trip-form #trip-map {
  width: 47.5%;
  margin-left: 2.5%;
  margin-top: 5px;
}
#trip-form #geo-map {
  width: 100%;
  height: 400px !important;
  border: 1px solid #dfdbdb;
  border-radius: 15px;
}
#trip-form #geo-distance {
  padding-top: 15px;
  clear: both;
}
#trip-form #add-via-button {
  font-size: 15px;
  color: #818181;
  background: url("/static/pop/webui/common/images/icons/icon-add-circle.3426ca638829.png") left center no-repeat;
  background-size: 22px 22px;
  background-position: 10px;
  padding: 18px 15px 18px 40px;
  margin-top: 0px;
  border: 1px dashed #ccc;
  border-radius: 15px;
}
#trip-form #add-via-button:hover {
  color: #666;
}
#trip-form #trip-form-datetime .date-only, #trip-form #trip-form-datetime .time-only {
  position: relative;
}
#trip-form #trip-form-datetime .date-only input, #trip-form #trip-form-datetime .time-only input {
  padding: 20px 15px 20px;
}
#trip-form #trip-form-datetime .time-only input {
  width: 90px;
  font-size: 15px;
}
#trip-form #trip-form-datetime .date-edit {
  padding: 20px 15px 20px;
  font-size: 14px;
  color: #777777;
}
#trip-form #trip-form-datetime #id_return_date_clear {
  display: none;
}
#trip-form #trip-form-datetime #id_return_date_clear.active {
  display: block;
}
#trip-form #trip-form-datetime .datetime-label {
  width: 14.25%;
  float: left;
  font-size: 15px;
  color: #333333;
  margin-top: 19px;
}
#trip-form #trip-form-datetime .datetime-input {
  width: 50%;
  float: left;
  position: relative;
}
#trip-form #trip-form-datetime .errorlist {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-datetime .form-row.date-only {
    width: 52%;
  }
}
#trip-form .return-portion-trigger, #trip-form .return-portion-trigger:active {
  clear: both;
  width: 120px;
  padding-top: 20px;
  margin-left: 14.25%;
  text-decoration: underline;
}
#trip-form .return-portion-trigger:hover {
  color: #000;
}
#trip-form .return-portion {
  display: none;
}
#trip-form .return-portion .datetime-input {
  position: relative;
}
#trip-form .return-portion .errorlist {
  max-width: 220px;
}
#trip-form .return-portion.active {
  display: block;
}
#trip-form .multiple-dates .datepicker {
  display: block !important;
}
#trip-form .multiple-dates .datepicker .active {
  display: table-cell;
}
#trip-form .form-row {
  position: relative;
}
#trip-form .datetime-type-single {
  display: none;
}
#trip-form .datetime-type-single .errorlist {
  max-width: 220px;
}
#trip-form .datetime-type-single.active {
  display: block;
}
#trip-form .datetime-type-multiple {
  display: none;
  min-height: 300px;
  position: relative;
}
@media (max-width: 767px) {
  #trip-form .datetime-type-multiple {
    min-height: 500px;
  }
}
#trip-form .datetime-type-multiple .container-left {
  float: left;
  width: 260px;
}
@media (max-width: 767px) {
  #trip-form .datetime-type-multiple .container-left {
    float: none;
    width: 100%;
  }
}
#trip-form .datetime-type-multiple .container-left .errorlist {
  top: -21px;
}
#trip-form .datetime-type-multiple .container-right {
  float: left;
  width: 150px;
}
@media (max-width: 767px) {
  #trip-form .datetime-type-multiple .container-right {
    float: none;
    clear: both;
    margin-top: 300px;
    width: 100%;
  }
}
#trip-form .datetime-type-multiple .grey {
  color: #999 !important;
}
#trip-form .datetime-type-multiple .errorlist {
  max-width: 220px;
}
#trip-form .datetime-type-multiple.active {
  display: block;
}
#trip-form .datetime-type-selectors {
  border: 1px solid #bbbbbb;
  border-radius: 15px;
  overflow: hidden;
  margin: 17px 0px 20px 0px;
}
@media (min-width: 769px) {
  #trip-form .datetime-type-selectors {
    width: 376px;
  }
}
@media (max-width: 767px) {
  #trip-form .datetime-type-selectors {
    width: 285px;
  }
}
#trip-form .datetime-type-selectors .datetime-type-dropdown {
  z-index: 20000;
  width: 100%;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector {
  text-align: center;
  width: 50%;
  float: left;
  padding: 5px;
  box-sizing: border-box;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector-single {
  border-right: 1px solid #bbbbbb;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector.active {
  background: #333333;
  color: #fff;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector:hover {
  color: #000;
  background: #efefef;
}
#trip-form .datetime-type-selectors .datetime-type-dropdown .datetime-type-selector.active:hover {
  color: #fff;
  background: #333333;
}
#trip-form .return-remove {
  display: none;
}
#trip-form .return-remove.active {
  display: block;
}
#trip-form #trip-form-space .space-label {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 22px;
}
#trip-form #trip-form-space .space-seats {
  width: 85%;
  float: left;
}
#trip-form #trip-form-space .space-seats #seats {
  position: relative;
}
#trip-form #trip-form-space .space-seats #seats .seat {
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  padding-top: 15px;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 50px;
  float: left;
  margin: 10px 15px 10px 0px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-space .space-seats #seats .seat {
    margin: 5px 5px 5px 0px;
    width: 45px;
    height: 45px;
    padding-top: 12px;
  }
}
#trip-form #trip-form-space .space-seats #seats .seat:hover {
  color: #000000;
}
#trip-form #trip-form-space .space-seats #seats .seat.active {
  background: #333333;
  color: #fff;
}
#trip-form #trip-form-space .space-available-container {
  width: 85%;
  float: left;
}
#trip-form #trip-form-space .space-available-container .space-luggage {
  float: left;
  width: 100px;
  margin-top: 25px;
}
#trip-form #trip-form-space .space-available-container .space-equipment {
  float: left;
  width: 150px;
  margin-left: 20px;
  margin-top: 25px;
}
#trip-form #trip-form-space .space-available-container .text {
  font-size: 14px;
  color: #666;
}
#trip-form #trip-form-vehicle .vehicle-label-left {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 22px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-vehicle .vehicle-label-left {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-vehicle .vehicle-contents {
  width: 85%;
  float: left;
}
@media (max-width: 767px) {
  #trip-form #trip-form-vehicle .vehicle-contents {
    width: 100%;
    float: none;
  }
}
#trip-form #modal-compensation-input-error {
  top: -20px;
  left: 20px;
}
#trip-form #trip-form-booking-type .booking-type-label {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-booking-type .booking-type-label {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-booking-type .booking-type-contents {
  width: 85%;
  float: left;
}
@media (max-width: 767px) {
  #trip-form #trip-form-booking-type .booking-type-contents {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-more-info {
  position: absolute;
  top: -30px;
  right: 0px;
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common {
  float: left;
  position: relative;
  width: 47.5%;
  box-sizing: border-box;
  padding: 60px 20px 30px 40px;
  border: 2px solid #dfdbdb;
  border-radius: 15px;
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common .booking-type-title {
  font-size: 16px;
  font-weight: 700;
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common .booking-type-description {
  font-size: 15px;
  margin-top: 15px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-booking-type .booking-type-contents .booking-type-common {
    width: 100%;
    float: none;
    margin: 20px 0px 20px;
  }
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type.booking-type-common.active {
  border: 2px solid #333;
  box-shadow: none;
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type.booking-type-common.request-to-book {
  margin-right: 5%;
  background: url("/static/pop/webui/common/images/icons/icon_request_to_book.6d57c6621e14.png") no-repeat center left #fff;
  background-size: 35px 35px;
  background-position: 37px 20px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-booking-type .booking-type-contents .booking-type.booking-type-common.request-to-book {
    margin-top: 10px;
  }
}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type.booking-type-common.instant-book {
  background: url("https://convoyeur.pro/static/pop/webui/common/images/icons/icon_instant_book.12f0689c84f8.svg") no-repeat;
  background-size: 35px 25px;
  background-position: 30px 20px;
}

/* For Task instant book */
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common.instant-book.available {
  background: url("/static/pop/webui/common/images/icons/icon_instant_book.12f0689c84f8.svg") no-repeat #fff  !important;
  background-size: auto 35px !important;
  background-position: 32px 20px !important;
  border: 2px solid #000;
}
 .booking-type-common {
  cursor:pointer !important;
}


#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common.instant-book.unavailable {
  background: url("/static/pop/webui/common/images/icons/icon_instant_book_greyed.988ce14db2cd.png") no-repeat #fff;
  background-size: auto 35px;
  background-position: 40px 20px;

}
#trip-form #trip-form-booking-type .booking-type-contents .booking-type-common.instant-book.unavailable .booking-type-title {
  opacity: 0.5;
}
#trip-form #trip-form-network-choice .network-choice-label {
  width: 14.25%;
  float: left;
  font-size: 15px;
  color: #777777;
  margin-top: 5px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-label {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents {
  width: 85%;
  float: left;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents {
    width: 100%;
    float: none;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice-more-info {
  position: absolute;
  top: -30px;
  right: 0px;
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice {
  float: left;
  position: relative;
  width: 47.5%;
  box-sizing: border-box;
  padding: 60px 20px 30px 40px;
  border: 2px solid #dfdbdb;
  border-radius: 15px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents .network-choice {
    padding: 60px 20px 30px 20px;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice .network-choice-title {
  font-size: 16px;
  font-weight: 700;
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice .network-choice-description {
  font-size: 15px;
  margin-top: 15px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents .network-choice {
    width: 100%;
    float: none;
    margin: 20px 0px 20px;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice.active {
  border: 2px solid #333;
  box-shadow: none;
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice.public {
  margin-right: 5%;
  background: url("/static/pop/webui/common/images/brand/poparide-icon.ced4553b41cd.png") no-repeat center left #fff;
  background-size: 25px 25px;
  background-position: 41px 23px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents .network-choice.public {
    margin-top: 0px;
    background-position: 21px 23px;
  }
}
#trip-form #trip-form-network-choice .network-choice-contents .network-choice.private {
  /* actual background image is set in the DOM */
  background-repeat: no-repeat;
  background-position: 41px 23px;
  background-size: 25px 25px;
  background-color: #fff;
}
@media (max-width: 767px) {
  #trip-form #trip-form-network-choice .network-choice-contents .network-choice.private {
    background-position: 21px 23px;
  }
}
#trip-form #trip-form-description .description-label {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}
#trip-form #trip-form-description .description-contents {
  width: 85%;
  float: left;
}
#trip-form #trip-form-description .description-contents .form-row {
  position: relative;
}
#trip-form #trip-form-description #id_description_original {
  max-height: 200px;
}
@media (max-width: 767px) {
  #trip-form #trip-form-description #id_description_original {
    max-height: 100px;
  }
}
#trip-form #trip-form-description .description-tip {
  color: #666;
}
#trip-form #trip-form-description textarea {
  font-size: 15px;
}
#trip-form #id_description-error {
  top: -43px;
}
#trip-form #quick-actions {
  border: 1px solid #dfdbdb;
  margin-bottom: 20px;
}
#trip-form #quick-actions .text {
  float: left;
  font-weight: 600;
  padding: 15px;
}
#trip-form #quick-actions .view-requests, #trip-form #quick-actions .cancel-trip, #trip-form #quick-actions .mark-as-full {
  float: right;
  padding: 15px;
  border-left: 1px solid #dfdbdb;
}
#trip-form #quick-actions .reveal-contents-cancel-trip, #trip-form #quick-actions .reveal-contents-trip-full {
  text-align: right;
  padding: 10px;
}
#trip-form #quick-actions .reveal-contents-cancel-trip .loading, #trip-form #quick-actions .reveal-contents-trip-full .loading {
  float: right;
}
#trip-form #quick-actions .reveal-trigger-cancel-trip, #trip-form #quick-actions .reveal-trigger-trip-full {
  cursor: pointer;
}
#trip-form .trip-types {
  border-bottom: 1px solid #777777;
}
#trip-form .trip-types .trip-type {
  padding: 15px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
}
#trip-form .trip-types .trip-type.offer.active {
  border-bottom: 3px solid #5cc0ff;
  color: #5cc0ff;
  font-weight: 500;
}
#trip-form .trip-types .trip-type.ask.active {
  border-bottom: 3px solid #ff5400;
  color: #ff5400;
}
#trip-form #from, #trip-form #to, #trip-form #date {
  position: relative;
  color: #666;
  font-size: 14px;
  padding: 0px;
  margin: 0px;
  /* Stroke */
  /* Fill */
}
#trip-form #from .text, #trip-form #from .value, #trip-form #to .text, #trip-form #to .value, #trip-form #date .text, #trip-form #date .value {
  color: #666;
  font-size: 14px;
}
#trip-form #from .input-arrow, #trip-form #to .input-arrow, #trip-form #date .input-arrow {
  position: absolute;
  top: 14px;
  right: 10px;
}
#trip-form #from .input-arrow:before, #trip-form #from .input-arrow:after, #trip-form #to .input-arrow:before, #trip-form #to .input-arrow:after, #trip-form #date .input-arrow:before, #trip-form #date .input-arrow:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-bottom: 0;
}
#trip-form #from .input-arrow:before, #trip-form #to .input-arrow:before, #trip-form #date .input-arrow:before {
  bottom: -16px;
  right: 1px;
  /* If 1px darken stroke slightly */
  border-top-color: #333;
  border-width: 9px;
}
#trip-form #from .input-arrow:after, #trip-form #to .input-arrow:after, #trip-form #date .input-arrow:after {
  bottom: -15px;
  right: 2px;
  border-top-color: #fff;
  border-width: 8px;
}
#trip-form .placeholder-common, #trip-form :-ms-input-placeholder, #trip-form ::-moz-placeholder, #trip-form :-moz-placeholder, #trip-form ::-webkit-input-placeholder {
  line-height: 18px;
  font-size: 14px;
  color: #444;
}
#trip-form ::-webkit-input-placeholder {
  font-family: "proxima-soft", sans-serif;
}
#trip-form :-moz-placeholder { /* Firefox 18- */
  font-family: "proxima-soft", sans-serif;
}
#trip-form ::-moz-placeholder { /* Firefox 19+ */
  font-family: "proxima-soft", sans-serif;
}
#trip-form :-ms-input-placeholder {
  font-family: "proxima-soft", sans-serif;
}
#trip-form .input-value {
  padding: 0px;
  border: 0px;
}
#trip-form #from:hover, #trip-form #from:active, #trip-form #to:hover, #trip-form #to:active, #trip-form #date:hover, #trip-form #date:active {
  color: #000;
  opacity: 1;
}
#trip-form .dropdown-list, #trip-form .dropdown-search {
  width: 100%;
  overflow-y: auto;
  background: #fff;
  color: #666;
  display: none;
  position: absolute;
  top: 45px;
  left: -1px;
  z-index: 1000;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
#trip-form .dropdown-list .dropdown-item, #trip-form .dropdown-list dropdown-item.info, #trip-form .dropdown-search .dropdown-item, #trip-form .dropdown-search dropdown-item.info {
  padding: 10px;
  border-top: 1px solid #ccc;
  cursor: pointer;
}
#trip-form .dropdown-list .dropdown-item:hover, #trip-form .dropdown-list dropdown-item:active, #trip-form .dropdown-search .dropdown-item:hover, #trip-form .dropdown-search dropdown-item:active {
  background: #ececec;
}
#trip-form .dropdown-list .dropdown-item.info, #trip-form .dropdown-search .dropdown-item.info {
  margin: 0px;
  clear: both;
}
#trip-form .dropdown {
  max-height: 350px;
}
#trip-form .dropdown-trigger {
  border: 1px solid #777777 !important;
  width: 100%;
  height: 48px;
  margin: 0px 0px 15px;
  padding: 12px;
  cursor: pointer;
  opacity: 1;
  background: #fff;
}
#trip-form .dropdown-search {
  display: none;
}
#trip-form #buttons {
  margin-top: 10px;
  width: 100%;
  border: 1px solid #fff;
}
#trip-form #buttons .button-common, #trip-form #buttons #button-offer, #trip-form #buttons #button-find {
  padding: 14px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
#trip-form #buttons #button-find {
  width: 50%;
  float: left;
}
#trip-form #buttons #button-offer {
  border-left: 1px solid #fff;
  width: 50%;
  float: right;
}
#trip-form #buttons #button-find:hover, #trip-form #buttons #button-find:active, #trip-form #buttons #button-offer:hover, #trip-form #buttons #button-offer:active {
  background: #fff;
  color: #333;
}
#trip-form .calendar-div {
  position: relative;
}
#trip-form .calendar-div .calendar-input {
  position: relative;
}
#trip-form .calendar-div .calendar-input #date {
  padding: 15px;
}
#trip-form #id_is_driving {
  display: none;
}
#trip-form #id_tos {
  display: none;
}
#trip-form #id_compensation-error {
  top: -35px;
  left: 0px;
  width: 200px;
}
#trip-form .datetime-type-multiple .departure-date-error {
  top: -28px;
  z-index: 5;
}
#trip-form .departure-time-error {
  position: absolute;
  width: 70px;
}
#trip-form .trigger-multiple-return-time {
  width: 92px;
}
#trip-form #clear-return-time {
  position: absolute;
  top: 23px;
  right: -25px;
}
#trip-form #id_payment_method {
  position: absolute;
  left: 0px;
  background: #F2F2F2;
  color: #fff;
  z-index: -1;
  height: 1px;
  width: 1px;
  border: none;
  -moz-appearance: textfield;
}
#trip-form .form-row.seats {
  margin-top: 20px;
  margin-bottom: 20px;
}
#trip-form .form-row.seats .text {
  margin-bottom: 5px;
}
#trip-form .form-row.seats .seatno {
  cursor: pointer;
  float: left;
  width: 10px;
  height: 10px;
  padding: 15px;
  border: 1px solid #dfdbdb;
  text-align: center;
  margin-right: 7px;
  margin-bottom: 7px;
  line-height: 10px;
}
#trip-form .form-row.seats .seatno.active {
  background: #333333;
  color: #fff;
}
#trip-form .form-row.seats .label {
  float: left;
  margin-top: 10px;
  margin-right: 10px;
}
#trip-form .form-row.seats .compensation {
  float: left;
}
#trip-form .form-row.seats .currency-sign {
  float: left;
  line-height: 45px;
  margin-right: 10px;
}
#trip-form .form-row.seats .errorlist {
  padding: 12px 0px 0px 7px;
  float: left;
}
#trip-form .form-row.vehicle {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #dfdbdb;
}
#trip-form .form-row.description {
  margin-top: 20px;
}
#trip-form .form-row.description #id_description {
  width: 93%;
  height: 150px;
}
#trip-form .form-row.luggage {
  margin-top: 20px;
}
#trip-form .form-row.luggage, #trip-form .form-row.equipment {
  height: 30px;
  border-top: 1px solid #dfdbdb;
  padding: 13px 0px 13px;
}
#trip-form .button.large, #trip-form #welcome .welcome-common #no_pending_email_form .large[type=submit], #welcome .welcome-common #no_pending_email_form #trip-form .large[type=submit], #trip-form .vehicle-form .large[type=submit], .vehicle-form #trip-form .large[type=submit] {
  width: 100%;
  margin-bottom: 0px;
}
#trip-form #id_cashless {
  display: none;
}
#trip-form .payment-methods {
  width: 80%;
  border: 1px solid #ccc;
}
#trip-form .payment-methods .payment-method {
  float: left;
  width: 50%;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
}
#trip-form .payment-methods .payment-method.cashless {
  border-right: 1px solid #ccc;
}
#trip-form .payment-methods .payment-method.active {
  background: #333333;
  color: #fff;
}
#trip-form .payment-methods.editable .payment-method {
  cursor: pointer;
}

.trip-form-policies .policies-label {
  width: 14.25%;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
@media (max-width: 767px) {
  .trip-form-policies .policies-label {
    width: 100%;
    float: none;
  }
}
@media (min-width: 769px) {
  .trip-form-policies .policy-columns {
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 769px) {
  .trip-form-policies .policy-column {
    max-width: 300px;
  }
}
.trip-form-policies .policy-column .policy-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 15px;
  padding-top: 70px;
  height: 24px;
}
@media (max-width: 767px) {
  .trip-form-policies .policy-column .policy-title {
    margin-bottom: 0px;
    padding-top: 60px;
  }
}
.trip-form-policies .policy-column .policy-title.cash {
  background: url("https://convoyeur.pro/static/pop/webui/common/images/icons/no_cash.66fb313ae607.svg") no-repeat top left -5px;
  background-size: 60px 60px;
}
@media (max-width: 767px) {
  .trip-form-policies .policy-column .policy-title.cash {
    padding-top: 70px;
  }
}
.trip-form-policies .policy-column .policy-title.reliable {
  background: url("https://convoyeur.pro/static/pop/webui/common/images/icons/on_time.db6baae9329b.svg") no-repeat;
  background-size: 60px 60px;
}
@media (max-width: 767px) {
  .trip-form-policies .policy-column .policy-title.reliable {
    padding-top: 70px;
  }
}
.trip-form-policies .policy-column .policy-title.safety {
  background: url("https://convoyeur.pro/static/pop/webui/common/images/how/warning.2368f53ddcf8.svg") no-repeat top left -5px;
  background-size: 60px 60px;
}
@media (max-width: 767px) {
  .trip-form-policies .policy-column .policy-title.safety {
    padding-top: 70px;
  }
}
.trip-form-policies .policy-column .policy-item {
  margin: 10px 0px;
}
.trip-form-policies .policy-items-container {
  display: none;
}
.trip-form-policies .policy-items-container.active {
  display: block;
}

@media only screen and (max-width: 666px) {
  #trip-form #trip-form-locations {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-locations .location-container .location-label {
    width: 100%;
    float: none;
    margin-bottom: 5px;
  }
  #trip-form #trip-form-locations .location-container .location-input {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-locations #vias-container {
    margin-left: 0px;
    float: none;
  }
  #trip-form #trip-form-locations .vias-container-box {
    width: 100%;
  }
  #trip-form #trip-map {
    margin-top: 30px;
    width: 100%;
    height: 250px;
    margin-left: 0%;
  }
  #trip-form #geo-map {
    height: 250px;
  }
  #trip-form #add-via-button {
    float: none;
    margin-left: 0px;
  }
  #trip-form #trip-form-datetime .datetime-label {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-datetime .datetime-input {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-space .space-label {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-space .space-seats {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-space .space-seats #seats .seat.last {
    margin-right: 0px;
  }
  #trip-form #trip-form-space .space-available-container {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-space .space-available-container .space-luggage {
    float: left;
    width: 50%;
  }
  #trip-form #trip-form-space .space-available-container .space-equipment {
    float: left;
    width: 50%;
    margin-left: 0px;
  }
  #trip-form #trip-form-description .description-label {
    width: 100%;
    float: none;
  }
  #trip-form #trip-form-description .description-contents {
    width: 100%;
    float: none;
  }
  #trip-form .button, #trip-form #welcome .welcome-common #no_pending_email_form [type=submit], #welcome .welcome-common #no_pending_email_form #trip-form [type=submit], #trip-form .vehicle-form [type=submit], .vehicle-form #trip-form [type=submit] {
    margin-left: 0px;
  }
  #trip-form .return-portion-trigger, #trip-form .return-portion-trigger:hover, #trip-form .return-portion-trigger:active {
    margin-left: 0px;
    width: 100%;
  }
}
#trip-form-instructions .box-trip-copied .success-icon {
  height: 20px;
  width: 20px;
  background: url("/static/pop/webui/common/images/icons/icon-tick-green.d63056c4f7a9.png") left center no-repeat;
  background-size: 15px 15px;
  border-radius: 16px;
  float: left;
  margin-right: 2px;
  margin-top: 0px;
}
#trip-form-instructions .box-trip-invite .trip-invitee {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid #dfdbdb;
  margin-right: 20px;
  position: relative;
}
#trip-form-instructions .box-trip-invite .invite-icon {
  height: 20px;
  width: 20px;
  top: -5px;
  left: -5px;
  background: url("/static/pop/webui/common/images/icons/icon-invite-white.0e604b2b32ab.png") center center #ff4f02 no-repeat;
  background-size: 12px 12px;
  border-radius: 20px;
  background-position: 5px;
  position: absolute;
}
@media (max-width: 767px) {
  #trip-form-instructions .box-trip-invite .text-medium, #trip-form-instructions .box-trip-invite #book .booking-form .trip-form-policies .text-slarge, #book .booking-form .trip-form-policies #trip-form-instructions .box-trip-invite .text-slarge, #trip-form-instructions .box-trip-invite #book .booking-form .trip-form-policies .trip-form-section-header, #book .booking-form .trip-form-policies #trip-form-instructions .box-trip-invite .trip-form-section-header, #trip-form-instructions .box-trip-invite #book .booking-form .trip-form-policies .policy-title, #book .booking-form .trip-form-policies #trip-form-instructions .box-trip-invite .policy-title, #trip-form-instructions .box-trip-invite #payments .payment-box .payment-text, #payments .payment-box #trip-form-instructions .box-trip-invite .payment-text, #trip-form-instructions .box-trip-invite #payments .payment-box .payment-amount, #payments .payment-box #trip-form-instructions .box-trip-invite .payment-amount, #trip-form-instructions .box-trip-invite #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details h2, #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #trip-form-instructions .box-trip-invite h2, #trip-form-instructions .box-trip-invite #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies h2, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies #trip-form-instructions .box-trip-invite h2, #trip-form-instructions .box-trip-invite #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details .trip-date, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #trip-form-instructions .box-trip-invite .trip-date {
    margin-top: 8px;
    font-size: 14px;
    line-height: 18px;
  }
}
#trip-form-instructions .box-editing-trip {
  margin-top: 0px;
}
@media (max-width: 767px) {
  #trip-form-instructions .box-editing-trip .text-medium, #trip-form-instructions .box-editing-trip #book .booking-form .trip-form-policies .text-slarge, #book .booking-form .trip-form-policies #trip-form-instructions .box-editing-trip .text-slarge, #trip-form-instructions .box-editing-trip #book .booking-form .trip-form-policies .trip-form-section-header, #book .booking-form .trip-form-policies #trip-form-instructions .box-editing-trip .trip-form-section-header, #trip-form-instructions .box-editing-trip #book .booking-form .trip-form-policies .policy-title, #book .booking-form .trip-form-policies #trip-form-instructions .box-editing-trip .policy-title, #trip-form-instructions .box-editing-trip #payments .payment-box .payment-text, #payments .payment-box #trip-form-instructions .box-editing-trip .payment-text, #trip-form-instructions .box-editing-trip #payments .payment-box .payment-amount, #payments .payment-box #trip-form-instructions .box-editing-trip .payment-amount, #trip-form-instructions .box-editing-trip #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details h2, #book .booking-form .trip-form-policies #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #trip-form-instructions .box-editing-trip h2, #trip-form-instructions .box-editing-trip #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies h2, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #book .booking-form .trip-form-policies #trip-form-instructions .box-editing-trip h2, #trip-form-instructions .box-editing-trip #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details .trip-date, #user .user-right .tabs-container .tab-container-item .trip-item-profile .trip-details #trip-form-instructions .box-editing-trip .trip-date {
    margin-top: 8px;
    font-size: 14px;
    line-height: 18px;
  }
}

#trip_offer-page.in-app .page {
  padding-top: 0px;
}
/* ============================================
   CUSTOM OVERRIDES: FULL WIDTH LAYOUT WITHOUT MAP
   ============================================ */

/* Make trip form take full width after removing map */
#trip-form-locations {
  width: 100% !important;
  margin-right: 0 !important;
  float: none !important;
}


/* Ensure vias container maintains proper width */
#trip-form .vias-container-box {
  width: 100%;
}

/* Override any page-left styles */
.page-left {
  width: 100% !important;
  float: none !important;
}



/* Adjust location containers for full width */
@media (min-width: 667px) {
  #trip-form #trip-form-locations .location-container {
    max-width: 800px;
  }
}

/* ===== From last_code.html ===== */
:root{
      --primary-color:#ff4f02;--primary-hover:#FF6723;--border-color:#e9ecef;--text-color:#333;--bg-color:#f8f9fa;
      --border-radius:8px;--box-shadow:0 2px 8px rgba(0,0,0,0.08);--transition:.3s cubic-bezier(.4,0,.2,1)
    }
    *{margin:0;padding:0;box-sizing:border-box}
      
    body{
        margin: 0;
        background: #ffffff;
        font-family: "GT Walsheim", "Noto Sans", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        letter-spacing: .15px;
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
        word-spacing: -0.4px;
    }

    /* Progress */
    .progress-container{background:#f5f7fa;padding:32px 20px;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;gap:16px}
    .progress-steps{display:flex;width:100%;max-width:500px;align-items:center;justify-content:space-between;position:relative}
    .step-circle{display:flex;align-items:center;justify-content:center;height:50px;width:50px;color:#999;font-size:18px;font-weight:600;border-radius:50%;background:#fff;border:4px solid #e0e0e0;transition:var(--transition);z-index:2}
    .step-circle.active{border-color:var(--primary-color);color:var(--primary-color)}
    .progress-bar{position:absolute;height:4px;width:100%;background:#e0e0e0;z-index:1;top:50%;transform:translateY(-50%)}
    .progress-indicator{position:absolute;height:100%;width:0%;background:var(--primary-color);transition:var(--transition)}
    .step-labels{display:flex;width:100%;max-width:500px;justify-content:space-between;align-items:center}
    .step-label{font-size:13px;color:#6c757d;font-weight:500;text-align:center;min-width:50px;transition:var(--transition)}
    .step-label.active{color:var(--primary-color);font-weight:600}

    /* Content */
    .content{
      padding:32px 20px calc(100px + env(safe-area-inset-bottom));
    }
    .content.layout-2col{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start}

    /* Intro */
    .intro-banner{background:linear-gradient(135deg,#fff3e0,#ffe0b3);border-radius:12px;padding:20px;margin-bottom:24px;display:flex;align-items:center;gap:16px;border:1px solid #ffcc80}
    .intro-icon{width:56px;height:56px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center}
    .intro-character{font-size:24px}
    .intro-text h3{font-size:18px;font-weight:700;color:#333;margin-bottom:4px}
    .intro-text p{font-size:14px;color:#6c757d;line-height:1.4}

    .section-title{font-size:24px;font-weight:700;color:#212529;margin-bottom:24px}

    /* Formule */
    .formula-selection{margin-bottom:24px;transition:margin .3s ease}
    .formula-title{font-size:22px;font-weight:800;color:#212529;margin:8px 0 16px}
    .formula-options{display:grid;gap:12px;animation:fadeInUp .6s ease-out}
    .formula-option{position:relative}
    .formula-radio{position:absolute;opacity:0;pointer-events:none}
    .formula-card{background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:16px 20px;min-height:80px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}
    .formula-card:hover{background:#fafafa;transform:translateY(-2px) scale(1.01);box-shadow:0 6px 20px rgba(0,0,0,.12)}
    .formula-icon{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px}
    .formula-icon img{width:54px;height:54px;object-fit:contain}
    .formula-content{flex:1}
    .formula-title-text{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:4px}
    .formula-subtitle{font-size:14px;color:#6b7280;line-height:1.3}
    
    /* Style checkbox moderne pour la coche */
    .formula-check {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: var(--primary-color);
      display: none;
      align-items: center;
      justify-content: center;
      position: relative;
      animation: checkboxBounce 0.3s ease-out;
    }
    .formula-check::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 12px;
      border: solid white;
      border-width: 0 3px 3px 0;
      transform: rotate(45deg);
      left: 8px;
      top: 3px;
    }
    @keyframes checkboxBounce {
      0% { transform: scale(0.7); opacity: 0; }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); opacity: 1; }
    }
    .formula-radio:checked + .formula-card{border-color:var(--primary-color);box-shadow:0 4px 16px rgba(255,90,0,.2);background:#fff5f2;transform:scale(1.01)}
    .formula-radio:checked + .formula-card .formula-check{display:flex}
    .formula-radio:focus-visible + .formula-card{outline:2px solid #0ea5e9;outline-offset:2px}

    @media (min-width:768px){
      .formula-options{grid-template-columns:1fr}
    }

    @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

    /* ===== COLIS STYLES ===== */
    #colis-container { display:none; margin-top:20px; }
    #colis-container.visible { display:block; }

    .colis-title {
      font-size: 20px;
      font-weight: 700;
      margin: 0 0 14px;
      text-align: center;
      color: #0F172A;
    }

    .colis-list { display: grid; gap: 10px; }

    /* Carte style Cocolis */
    .colis-card {
      display: grid;
      grid-template-columns: 68px 1fr 84px;
      align-items: center;
      background: #ffffff;
      border: 3px solid #E5E7EB;
      border-radius: 14px;
      min-height: 88px;
      transition: .15s;
      overflow: hidden;
    }
    .colis-card:hover { border-color: var(--primary-color); }
    .colis-card.active { border-color: var(--primary-color); background: #FFF5F0; }

    .colis-icon { display:flex; align-items:center; justify-content:center; }
    .colis-badge { width:56px; height:56px; border-radius:12px; display:grid; place-items:center; background:#FAFAFA; }
    .colis-badge svg { width:52px; height:52px; display:block; }

    .colis-card.active .colis-badge { background:#FFF2EA; }

    .colis-texts { padding:12px 4px 12px 0; display:flex; flex-direction:column; gap:4px; }
    .colis-title-text { font-weight:700; font-size:14px; margin:0; display:flex; align-items:center; gap:8px; }
    .colis-subtitle { color:#6B7280; font-size:12px; line-height:1.35; margin:0; }
    .colis-subtitle small { opacity:.9; font-size:11px; }

    .colis-weight-badge {
      background:#F1F5F9; border:1px solid #E2E8F0; border-radius:12px; padding:2px 8px;
      font-size:10px; font-weight:600; color:#475569; white-space:nowrap;
    }
    .colis-card.active .colis-weight-badge { background:#FFEDE5; border-color:#FFD9C8; color:#C2410C; }

    .colis-counter { background:#F8FAFC; height:100%; display:grid; grid-template-rows:1fr 36px 1fr; }
    .colis-btn {
      appearance:none; -webkit-appearance:none;
      border:0;
      background:#F1F5F9;
      cursor:pointer;
      font-weight:800;
      font-size:18px;
      line-height:1;
      transition:.08s;
      color:#000 !important;
      -webkit-text-fill-color:#000;
    }
    .colis-btn:active {
      transform:scale(.98);
      color:#000 !important;
      -webkit-text-fill-color:#000;
    }
    .colis-count { display:grid; place-items:center; background:#ffffff; font-weight:800; font-size:14px; }
    .colis-card.active .colis-counter { background:#FFF2EA; }
    .colis-card.active .colis-btn { background:#FFE0CC; }
    .colis-card.active .colis-count { background:#fff; }

    .colis-summary-sep { border:0; height:1px; margin:10px 2px 6px; background:linear-gradient(90deg, rgba(255,90,0,.35), rgba(255,90,0,.15), rgba(0,0,0,0)); }
    .colis-inline-summary { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:4px 2px 2px; color:#1f2937; }
    .colis-inline-chip { display:inline-flex; align-items:center; gap:6px; background:#FFEDE5; border:1px solid #FFD9C8; color:#111; border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px; }
    .colis-inline-chip .qty { background:#fff; border:1px solid #E5E7EB; min-width:20px; height:20px; display:grid; place-items:center; border-radius:999px; font-size:11px; }
    .colis-inline-total { margin-left:auto; display:flex; gap:6px; align-items:center; }
    .colis-inline-total .pill { background:#ff5a00; border-radius:999px; padding:6px 10px; font-weight:800; font-size:12px; color:#ffffff; }

    /* ===== PLIS SPINNER STYLES ===== */
    #plis-container { display:none; margin-top:20px; }
    #plis-container.visible { display:block; }
    .plis-panel { padding:20px 16px; margin-bottom:20px; display:flex; flex-direction:column; align-items:center; gap:16px; }
    .plis-title { font-size:20px; font-weight:700; margin:0; text-align:center; color:#0F172A; }

    .spinner { display:inline-flex; align-items:center; gap:8.4px; padding:9.6px; border:1.8px solid var(--border-color); border-radius:15px; background:#fff; }
    .spinner button {
      width:48px; height:48px; border-radius:12px; border:1.8px solid var(--primary-color);
      background:transparent; color:var(--primary-color);
      font-size:26.4px; font-weight:800; line-height:1; cursor:pointer;
      display:grid; place-items:center;
      transition:transform .05s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
      box-shadow:0 1px 0 rgba(0,0,0,.04);
      user-select:none;
    }
    .spinner button:active { transform:translateY(1px); background:var(--primary-color); color:#fff; }

    .spinner input {
      width:120px; height:48px; text-align:center; font-size:21.6px; font-weight:800; border:1.8px solid var(--border-color);
      border-radius:12px; padding:0 10px; outline:none;
    }

    .unit { font-size:14.4px; font-weight:800; color:#6b7280; margin-left:4px; margin-right:6px; user-select:none; min-width:3ch; text-align:left; }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    input[type="number"] { -moz-appearance:textfield; }

    /* Vehicle carousel */
    #trip-form-space, .trip-form-space{
      width:100%;
      max-width:700px;
      margin:12px auto 8px;
      padding:0;
      display:none;
    }
    #trip-form-space.visible, .trip-form-space.visible{display:block;}

    .vehicle-content-wrapper{height:auto;}
    .slide-container{position:relative;padding:0 40px;margin-top:4px;height:auto;}
    .slider-content{padding:8px 0}
    .swiper{width:100%;height:auto}
    .swiper-slide{display:flex;justify-content:center;align-items:center;height:auto;background:transparent;user-select:none}
    .vehicle-type{cursor:pointer;transition:var(--transition);padding:4px;border-radius:var(--border-radius);border:2px solid transparent;display:flex;align-items:center;justify-content:center}
    .vehicle-type:hover{background:#fafafa;transform:scale(1.05)}
    .vehicle-type.selected{border:3px solid #ff4f02;background:#fff5f2;transform:scale(1.05)}
    .vehicle-type img{max-width:100%;height:auto;max-height:80px;object-fit:contain;display:block}
    .swiper-button-prev,.swiper-button-next{color:var(--primary-color)!important;width:32px!important;height:32px!important;background:#fff;border-radius:50%;box-shadow:var(--box-shadow);transition:transform .15s ease,box-shadow .15s ease;top:50%!important;margin-top:-16px!important}
    .swiper-button-prev:hover,.swiper-button-next:hover{transform:scale(1.1);box-shadow:0 4px 14px rgba(0,0,0,.12)}
    .swiper-button-prev:after,.swiper-button-next:after{font-size:14px!important;font-weight:700}
    .swiper-pagination{position:relative!important;margin-top:4px;bottom:0!important}
    .swiper-pagination-bullet{width:6px;height:6px;background:#ccc;opacity:1}
    .swiper-pagination-bullet-active{width:20px;border-radius:3px;background:#444}

      
    .form-input,
    .form-textarea,
    select {
        font-family: "proxima-soft", sans-serif;
        cursor: pointer;
        width: 100%;
        padding: 20px 15px 20px 35px;
        border: none;
        border-radius: 15px;
        font-size: 16px;
        background-size: 15px;
        color: #565a5c;
        appearance: none;
        box-sizing: border-box;
        background: #ececec center left 10px;
        transition: border 0.2s ease, background-color 0.2s ease;
    }
    
    .form-textarea {
        min-height: 100px;
        resize: vertical;
    }
    
    .form-input::placeholder,
    .form-textarea::placeholder {
        color: #adb5bd;
        font-style: italic;
    }
    
    .form-input:focus,
    .form-textarea:focus,
    select:focus {
        outline: none;
        border: 2px solid #ff4f02;
        background-color: #fff5f5;
        box-shadow: 0 0 0 3px rgba(255, 79, 2, 0.1);
    }

    /* Groups */
    .form-row{margin-bottom:20px}
    .form-label{display:block;font-size:15px;font-weight:600;color:#333;margin-bottom:8px}
    .form-group{background:var(--bg-color);border-radius:16px;padding:24px;margin-bottom:24px}
    .form-group-title{font-size:16px;font-weight:700;color:#1a1a1a;margin-bottom:20px;display:flex;align-items:center;gap:10px}
    .form-group-title i{color:var(--primary-color);font-size:20px}
    .form-group.vehicle-group{background:transparent;margin-top:8px;}

    /* Toggles (switch) */
    .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
    .toggle-label{font-size:16px;color:#333;font-weight:600}
    .toggle-switch{position:relative;width:48px;height:28px;background:#adb5bd;border-radius:14px;cursor:pointer;transition:var(--transition)}
    .toggle-switch .toggle-knob{position:absolute;top:2px;left:2px;width:24px;height:24px;background:#fff;border-radius:50%;transition:var(--transition);box-shadow:0 2px 4px rgba(0,0,0,.2)}
    .toggle-switch.active{background:var(--primary-color)}
    .toggle-switch.active .toggle-knob{transform:translateX(20px)}

    /* Steps & map */
    .step{display:none}.step.active{display:block;animation:fadeIn .4s ease-out}
    @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    .hidden{display:none!important}

    .map-section{position:sticky;top:20px}
    .map-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.1)}
    .map-container{height:350px;background:#f0f0f0;position:relative}
    .trip-info{padding:24px;background:linear-gradient(135deg,var(--bg-color) 0%,#ffffff 100%)}
    .trip-info-title{font-size:16px;font-weight:700;color:#1a1a1a;margin-bottom:16px}
    .trip-stat{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-radius:10px;margin-bottom:12px}
    .trip-stat-value{font-size:18px;font-weight:700;color:#1a1a1a}

    /* Boutons navigation */
    .navigation-buttons{
      position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
      width:calc(100% - 40px);max-width:560px;display:flex;gap:12px;z-index:1000
    }
    .prev-button{
      width:56px;height:56px;min-height:56px;background:#6c757d;color:#fff;border:none;border-radius:50%;
      font-size:20px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;
      transition:var(--transition);box-shadow:0 8px 25px rgba(108,117,125,.3);flex:0 0 56px
    }
    .next-button{
      flex:1;background:var(--primary-color);color:#fff;padding:16px 32px;border:none;border-radius:50px;
      font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
      transition:var(--transition);box-shadow:0 8px 25px rgba(255,79,2,.3);min-height:56px
    }
    .prev-button:hover{background:#5a6268;transform:translateY(-2px);box-shadow:0 12px 35px rgba(108,117,125,.4)}
    .next-button:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 12px 35px rgba(255,79,2,.4)}
    .prev-button:active,.next-button:active{transform:translateY(0)}
    .prev-button:disabled,.next-button:disabled{opacity:.5;cursor:not-allowed}

    @media (max-width:1024px){.content.layout-2col{grid-template-columns:1fr}.map-section{position:static}#trip-form-space, .trip-form-space{max-width:100%}}
    @media (max-width:768px){
      .container{max-width:100%}.content{padding:24px 16px calc(100px + env(safe-area-inset-bottom))}
      #trip-form-space, .trip-form-space{max-width:360px}
      .vehicle-content-wrapper{height:auto}
      .trip-form-section-header{font-size:20px;margin-bottom:12px}.slide-container{padding:0 32px}
      .vehicle-type img{max-height:72px}.swiper-button-prev,.swiper-button-next{width:28px!important;height:28px!important;margin-top:-14px!important}
      .swiper-button-prev:after,.swiper-button-next:after{font-size:12px!important}
      .colis-card{grid-template-columns:64px 1fr 80px}
      .colis-counter{grid-template-rows:1fr 34px 1fr}
      .colis-badge{width:50px;height:50px}
      .colis-badge svg{width:46px;height:46px}
      .colis-title-text{flex-wrap:wrap;gap:6px}
    }

    .sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

    /* Overrides existants */
    .form-group.route-group{background:transparent!important}
    .form-group.route-group .form-group-title{display:none}

    /* Suggestions (autocomplete) */
    .suggest-menu{position:relative}
    .suggest-list{position:absolute;z-index:10;left:0;right:0;top:100%;margin-top:6px;background:#fff;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);max-height:240px;overflow:auto}
    .suggest-item{padding:10px 14px;cursor:pointer}
    .suggest-item:hover,.suggest-item.active{background:#fff5f2}
    .map-error{display:flex;align-items:center;justify-content:center;height:100%;color:#6c757d;background:#f8f9fa}
    
    .photos-section{margin-top:20px;margin-bottom:20px}
    .photos-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
    .photos-title{font-size:16px;font-weight:600}
    .photo-guide-link{color:var(--primary-color);font-size:14px;text-decoration:none}
    .photo-upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;border:2px dashed #dee2e6;border-radius:12px;background:#f8f9fa;cursor:pointer;transition:all .3s}
    .photo-upload-area:hover{border-color:var(--primary-color);background:#fff5f5}
    .photo-icon{font-size:40px;margin-bottom:8px}
    .photo-text{font-size:14px;color:#6c757d}
    .photo-info{font-size:12px;color:#6c757d;margin-top:8px}

    .selection-feedback {
      margin-top: 12px;
      padding: 12px 16px;
      background: #e5f7ff;
      border: 1px solid #0076a3;
      border-radius: var(--border-radius);
      font-size: 14px;
      color: #495057;
      transition: opacity 0.2s ease;
    }
    
    .selection-feedback strong {
      color: var(--primary-color);
      font-weight: 600;
    }

    /* Utilitaire si Bootstrap non chargé */
    .mb-3{margin-bottom:1rem;}

    /* DATEPICKER STYLES - STEP 3 */
    [ng\:cloak],
    [ng-cloak],
    .ng-cloak {
      display: none;
    }

    .date-title {
      font-size: 20px;
      font-weight: 700;
      margin: 0 0 14px;
      text-align: left;
      color: #0F172A;
    }

    .section-content {
      padding: 20px 0;
    }

    .datepicker {
      position: relative;
      width: 100%;
      display: block;
      user-select: none;
      overflow: hidden;
      background: white;
    }

    .datepicker-subheader {
      width: 100%;
      min-height: 60px;
      font-size: 14px;
      padding: 15px 20px;
      text-align: center;
      background: #fff5f3;
      border-radius: var(--border-radius);
      margin-bottom: 20px;
    }

    .selected-dates-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      align-items: center;
    }

    .selected-date-badge {
      background: white;
      color: var(--primary-color);
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
      border: 1px solid var(--primary-color);
    }

    .selected-date-badge .remove-date {
      cursor: pointer;
      font-weight: bold;
      padding: 0 3px;
      transition: var(--transition);
    }

    .selected-date-badge .remove-date:hover {
      color: #d63a1a;
    }

    .date-count {
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--text-color);
    }

    .datepicker-calendar {
      width: 100%;
      padding: 0 15px 30px;
      max-width: 700px;
      display: block;
      margin: 0 auto;
    }

    .calendar-header {
      color: var(--text-color);
      font-weight: 600;
      text-align: center;
      font-size: 18px;
      padding: 10px 0;
      position: relative;
    }

    .current-month-container {
      display: inline-block;
      height: 30px;
      position: relative;
    }

    .goback,
    .goforward {
      height: 30px;
      width: 30px;
      border-radius: 50%;
      display: inline-block;
      cursor: pointer;
      position: relative;
      top: -4px;
      transition: var(--transition);
    }

    .goback:hover,
    .goforward:hover {
      background: var(--bg-color);
    }

    .goback {
      float: left;
      margin-left: 3.8%;
    }

    .goforward {
      float: right;
      margin-right: 3.8%;
    }

    .calendar-day-header {
      width: 100%;
      position: relative;
    }

    .day-label {
      color: #8A8A8A;
      padding: 8px 0;
      width: 14.2857142%;
      display: inline-block;
      text-align: center;
      text-transform: capitalize;
      font-weight: 600;
      font-size: 13px;
    }

    .datecontainer {
      width: 14.2857142%;
      display: inline-block;
      text-align: center;
      padding: 4px 0;
    }

    .datenumber {
      max-width: 38px;
      max-height: 38px;
      line-height: 38px;
      margin: 0 auto;
      color: var(--text-color);
      position: relative;
      text-align: center;
      cursor: pointer;
      z-index: 1;
      font-weight: 500;
      transition: var(--transition);
    }

    .no-hover .datenumber,
    .no-hover .datenumber:hover,
    .no-hover .datenumber:before,
    .no-hover .datenumber:hover::before {
      cursor: default;
      color: #ccc;
      background: transparent;
      opacity: 0.5;
    }

    .no-hover .datenumber.day-selected {
      color: white;
      opacity: 1;
    }

    .datenumber:hover {
      color: white;
    }

    .datenumber:before {
      content: "";
      display: block;
      position: absolute;
      height: 38px;
      width: 38px;
      border-radius: 50%;
      z-index: -1;
      background: transparent;
      transform: scale(0.85);
      transition: var(--transition);
    }

    .datenumber:hover::before {
      background: var(--primary-hover);
      transform: scale(1);
    }

    .day-selected {
      color: white;
    }

    .datenumber.day-selected:before {
      background: var(--primary-color);
      transform: scale(1);
    }

    .datepicker.compact .datepicker-subheader {
      width: 100%;
      text-align: center;
      min-height: 30px;
      padding: 8px 10px;
    }

    .datepicker.compact .datepicker-calendar {
      width: 100%;
      margin: 0 auto;
    }

    .p-10 {
      padding: 10px 0;
    }

    .calendar-grid {
      display: block;
    }

    /* BUSINESS HOURS STYLES - STEP 3 */
    .business-content {
      padding: 30px 0;
    }

    .day-row {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 10px 0;
      position: relative;
    }

    .day-row:not(:first-child) {
      border-top: 1px dashed #e0e0e0;
      padding-top: 15px;
    }

    .day-group {
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    .day-group:last-child {
      border-bottom: none;
    }

    .day-header {
      margin-bottom: 10px;
      padding-bottom: 10px;
    }

    .day-name-with-dates {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 200px;
    }

    .day-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-color);
      white-space: nowrap;
    }

    .add-creneau-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      margin: 10px 0 0 0;
      background: transparent;
      border: none;
      color: var(--primary-color);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition);
      font-family: inherit;
    }

    .add-creneau-button:hover {
      color: var(--primary-hover);
      background: #fff5f3;
      border-radius: var(--border-radius);
    }

    .add-creneau-icon {
      width: 24px;
      height: 24px;
      border: 2px solid currentColor;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
    }

    .remove-creneau {
      margin-left: 10px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #fee;
      color: #e11d48;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
    }

    .remove-creneau:hover {
      background: #fca5a5;
      color: #991b1b;
    }

    .time-inputs {
      display: flex;
      align-items: center;
      gap: 15px;
      flex: 1;
    }

    .time-input-group {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }

    .time-label {
      font-size: 13px;
      color: #8A8A8A;
      min-width: 30px;
    }

    .time-input {
      flex: 1;
      padding: 10px 12px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      font-size: 14px;
      color: var(--text-color);
      text-align: center;
      transition: var(--transition);
      font-family: inherit;
    }

    .time-input:focus {
      outline: none;
      border-color: var(--primary-color);
    }

    /* Style d'erreur pour les horaires invalides */
    .time-input-error {
      border-color: #e11d48 !important;
      background-color: #fef2f2 !important;
    }

    .time-error {
      color: #e11d48;
      font-size: 12px;
      margin-top: 8px;
      padding: 6px 10px;
      background: #fef2f2;
      border-radius: 6px;
      border-left: 3px solid #e11d48;
    }

    .empty-state {
      padding: 40px 20px;
      text-align: center;
      color: #8A8A8A;
      font-size: 15px;
      font-style: italic;
    }

    /* CONTACT STYLES SIMPLIFIÉS - STEP 3 */
    .contact-group {
      margin-bottom: 24px;
    }

    .contact-fields {
      display: grid;
      gap: 15px;
    }

    @media (min-width: 992px) {
      .contact-fields {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 991px) {
      .contact-fields {
        grid-template-columns: 1fr;
      }
    }

    .contact-fields .form-input {
      width: 100%;
      padding: 12px 15px;
      background: #ececec;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      font-size: 15px;
      transition: var(--transition);
    }

    .contact-fields .form-input:focus {
      outline: none;
      border-color: var(--primary-color);
      background: #fff5f5;
    }

    /* OPTIONS SECTION - STEP 4 */
    .options-section {
      margin-bottom: 24px;
    }

    .options-title {
      font-size: 20px;
      font-weight: 700;
      color: #212529;
      margin-bottom: 16px;
    }

    .options-group {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 12px;
      padding: 16px;
      border-radius: var(--border-radius);
    }

    .option-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: #fff;
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
      border: 1px solid #e5e7eb;
    }

    .option-item:hover {
      background: #fff5f2;
      border-color: var(--primary-color);
    }

    .option-checkbox {
      width: 20px;
      height: 20px;
      cursor: pointer;
      accent-color: var(--primary-color);
    }

    .option-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-color);
      cursor: pointer;
    }

    /* Options badges dans la carte */
    .options-badges-container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-height: 24px;
    }

    .option-badge {
      display: inline-flex;
      align-items: center;
      background: white;
      color: var(--primary-color);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      border: 1px solid var(--primary-color);
    }

    .trip-stat-value .options-badges-container:empty::after {
      content: 'Aucune option';
      color: #6c757d;
      font-size: 14px;
      font-weight: 400;
    }

    @media (max-width: 768px) {
      .options-group {
        grid-template-columns: 1fr;
      }
    }
    
    input.is-valid { border-color:#198754; }
    input.is-invalid { border-color:#dc3545; }
    .muted { color:#6c757d; font-size:.9rem; }



/* ============================================
   ANIMATION DES SUPPLÉMENTS DE PRIX
   ============================================ */

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#price_supplements_container {
  animation: slideInUp 0.3s ease-out;
}

#price_supplements_list > div {
  animation: slideInUp 0.4s ease-out;
  animation-fill-mode: both;
}

#price_supplements_list > div:nth-child(1) {
  animation-delay: 0.05s;
}

#price_supplements_list > div:nth-child(2) {
  animation-delay: 0.1s;
}

#price_supplements_list > div:nth-child(3) {
  animation-delay: 0.15s;
}

/* Style du prix total amélioré */
#total_price {
  transition: all 0.3s ease;
}

#total_price:not(:empty) {
  animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Effet hover sur les suppléments */
#price_supplements_list > div {
  transition: all 0.2s ease;
}

#price_supplements_list > div:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateX(4px);
}