/* HTML/BODY ------------------------------------------------------------------- */ html { background-color: #fff; } body { font-family: 'Comfortaa'; color: #000; background-color: #f3f3f3; position: relative; } /* HEADER ---------------------------------------------------------------------- */ header .action-col .btn { height: 35px; background-color: #fff0; } .header-2 { min-height: 18px !important; height: auto !important; } #header-default { background-color: #FFF; } #btn-search-reservation { min-width: 160px; } #btn-account { background-color: #fff0 !important; } /* PROCESS RESERVATION - RECAP RECHERCHE ACTIVE */ .header-navbar-search-container { width: 800px; min-height: 100px; height: auto !important; border-radius: 50px; background-color: #fff; padding: 15px 40px; } .search-depart-retour-separator { font-size: 40px; line-height: 1.6em; color: var(--main-color); } .header-navbar-search-container .depart-libelle { font-weight: var(--font-light-bold); } .header-navbar-search-container .date { color: var(--main-color); } .header-navbar-search-container .heure { color: var(--grey); } #search-edit-button { width: 45px; height: 45px; padding: 0px; } #search-edit-button img { width: 35px; height: 35px; display: block; margin-left: auto; margin-right: auto; } /* HELPERS ICON */ #helpers-container { position: fixed; z-index: 100; /* right: 10px; top: 600px;*/ right: 15px; bottom: 80px; } #helpers-inner { position: relative; width: 100%; height: 100%; } #helpers-container button { width: 60px; height: 60px; padding: 15px; border: 1px solid var(--main-color); box-shadow: 0px 0px 10px 0px #00000026; border-radius: 50% !important; } #helpers-container button.active { background-color: var(--main-color); } #helpers-container button.active img{ /*-webkit-filter: invert(100%);*/ /*filter: invert(100%);*/ filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } .btn-header-contact { background-color: #fff; border-radius: 40px !important; } .btn-header-contact img { height: 100%; width: auto; display: block; margin-left: auto; margin-right: auto; } /* CARBURANT WIDGET */ #carburant-widget { position: absolute; width: 240px; min-height: 180px; border-radius: 15px; border: 1px solid var(--main-color); background-color: #fff; right: 80px; box-shadow: 2px 2px 4px 0px #00000040; z-index: 200; transition: all ease-in-out .3s; } #carburant-widget-content-container { position: relative; width: 100%; height: 100%; padding: 20px; } #carburant-widget-btn-close { width: 35px !important; height: 35px !important; max-width: 35px !important; max-height: 35px !important; min-width: 30px; min-height: 30px; padding: 0px !important; transform: rotate(45deg); position: absolute; top: -15px; right: -15px; } #carburant-widget-btn-close i{ font-size: 28px; line-height: 1.3em; color: var(--main-color); } #carburant-widget-title { font-size: 15px; font-weight: var(--btn-font-weight-normal); text-align: center; } .carburant-label { font-size: 18px; font-weight: var(--btn-font-weight-bold); width: 60px; line-height: 2.4em; } .carburant-tarif { font-family: calculator !important; background-color: var(--light-grey); padding: 5px; text-align: center; width: 70px; border-radius: 6px; font-size: 28px; line-height: 1em; font-weight: var(--font-bold); margin-right: 5px; border: 1px solid var(--main-color); } .carburant-legend { font-size: 14px; color: var(--dark-grey); } /* ETAPES LOCATION ------------------------------------------------------------- */ #etapes-location-container { padding-top: 30px; padding-bottom: 30px; background-color: #fff; } .etape-location-item { width: 120px; } .etape-location-number.active { box-shadow: none !important; color: #fff; } .etape-location-number { text-align: center; width: 50px; height: 50px; padding: 10px; font-size: 18px; font-weight: var(--btn-font-weight-bold); color: var(--grey); margin-left: auto; margin-right: auto; margin-bottom: 5px; } .etape-location-label.active { font-size: 14px; color: var(--main-color); } .etape-location-label { font-size: 14px; color: var(--grey); text-align: center; } .etape-location-separator { width: 50px; height: 1px; background-color: var(--grey); margin-bottom: 20px; } .etape-location-img { width: 30px; height: 30px; display: block; margin-left: auto; margin-right: auto; } /* BOUTONS --------------------------------------------------------------------- */ .btn { /*border: 1px solid #fff0 !important;*/ } button, a.btn { height: 42px; min-width: 40px; padding: 0px 30px; border-radius: 8px; font-size: var(--btn-font-size) !important; line-height: 2.8em; } button:focus, a.btn:focus { box-shadow: none !important; } /*button:hover, a.btn:hover { border: 1px solid var(--main-color); box-shadow: none; }*/ .btn-rounded { border-radius: 25px !important; } .btn-semi-rounded { min-height: 48px; min-width: 200px; font-size: 16px !important; font-weight: var(--font-extrabold) !important; border-radius: 15px; background-color: #fff; border: 1px solid var(--grey); transition: 0.3s ease-in-out; } .btn-semi-rounded:hover { font-size: 18px !important; font-weight: var(--font-extrabold) !important; background: var(--main-color) !important; color: #FFF; border: 2px solid var(--main-color); } .btn-ripple, .btn-black-ripple, .btn-black-light-ripple { display: inline-block; position: relative; overflow: hidden; transition: all ease-in-out .3s; } .btn-admin-color, .btn-main-color { /*background-color: var(--main-color);*/ color: #fff; background: var(--linear-main-color-gradient); background-color: var(--main-color); } .btn-white { background-color: #FFF; color: #000; } .btn-main-color span { color: #fff !important; } .btn-admin-color:hover, .btn-main-color:hover { color: #e7e7e7; } .btn-ripple::after { content: ""; display: block; position: absolute; top: 0; left: 25%; height: 100%; width: 50%; background-color: #fff; border-radius: 50%; opacity: 0; pointer-events: none; transition: all ease-in-out 0.3s; transform: scale(5, 5); } .btn-black-ripple::after { content: ""; display: block; position: absolute; top: 0; left: 25%; height: 100%; width: 50%; background-color: #00000059; border-radius: 50%; opacity: 0; pointer-events: none; transition: all ease-in-out 0.3s; transform: scale(5, 5); } .btn-black-light-ripple::after { content: ""; display: block; position: absolute; top: 0; left: 25%; height: 100%; width: 50%; background-color: #00000042; border-radius: 50%; opacity: 0; pointer-events: none; transition: all ease-in-out 0.3s; transform: scale(5, 5); } .btn-ripple:active::after, .btn-black-ripple:active::after, .btn-black-light-ripple:active::after { padding: 0; margin: 0; opacity: .2; transition: 0s; transform: scale(0, 0); } .btn-main-light { background-color: #fff !important; color: var(--main-color) !important; border: 1px solid var(--main-color) !important; } .btn-dark-light { background-color: #fff; color: var(--font-color); border: 1px solid var(--font-color); -webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; transition: all ease 0.4s; } .btn-dark-light:hover { background-color: var(--main-color) !important; color: #FFF; border: 1px solid var(--main-color); } .btn-rounded-mini { height: 35px; min-width: 35px; width: 35px; border-radius: 20px; padding: 0px 0px; border: 0px; line-height: 2em; color: var(--font-color); } .btn-rounded-mini i { font-size: 34px; color: var(--font-color); } .btn-light-grey { background-color: var(--light-grey); color: #000; } .btn-black { background-color: #000; color: #FFF; transition: all ease 0.4s; border: 2px solid #000; } .btn-black:hover { background-color: #FFF; color: #000; border: 2px solid #000; } /* DROPDOWN BOUTON/MENU */ .dropdown-toggle-light { border: 0px !important; font-size: 32px; font-weight: var(--font-normal); background-color: #fff0; } .dropdown-toggle-light::after { /*content: none !important;*/ } .dropdown-toggle-light span { vertical-align: text-bottom; } .dropdown-menu { transition: all 0.3s ease; padding: 0px; } .dropdown-toggle.btn::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 10px; border: 0px; } .dropdown-toggle-rounded { /*border-radius: 20px;*/ } /* Bouton navigation VL/UTIL */ #btn-nav-utilitaires, #btn-nav-voitures { box-shadow: inset -140px 0 0 0 var(--light-grey); -webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; transition: all ease 0.4s; background: var(--light-grey); display: inline-block; border: 1px var(--light-grey); } #btn-nav-utilitaires:hover, #btn-nav-voitures:hover { box-shadow: inset 0px 0px 0px 0 var(--light-grey); color: #fff; background: var(--main-color); } .btn-check:not(:checked) + #btn-nav-utilitaires:hover .radio-img, .btn-check:not(:checked) + #btn-nav-voitures:hover .radio-img { /*-webkit-filter: invert(100%);*/ /*filter: invert(100%);*/ filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } .radio-img { width: 30px; height: auto; color: var(--main-color); } #radio-utilitaires + label .radio-img { width: 24px !important; } .btn-check + label { color: var(--font-color); font-size: var(--btn-font-size); } .btn-check:checked + label { background-color: var(--main-color) !important; background: var(--main-color) !important; color: #fff; box-shadow: none !important; } .btn-check:checked + label:focus { box-shadow: none !important; } .btn-search-radio { width: 140px; height: 30px; padding-top: 4px; padding-bottom: 4px; background-color: var(--light-grey); } .btn-search-radio a { color: inherit; text-decoration: none; } /* CONTENT --------------------------------------------------------------------- */ .content-title { margin-top: 20px; margin-bottom: 40px; text-transform: uppercase; font-weight: var(--font-extrabold); } .content-subtitle { text-align: center; margin-bottom: 40px; font-size: 24px; padding: 15px 30px; border: 2px solid var(--main-color); border-radius: 40px; width: fit-content; margin-left: auto; margin-right: auto; } .content-title:has(+ .content-subtitle) { margin-bottom: 60px; } .num-resa-txt { font-size: 24px; font-weight: var(--font-bold); } #main-content-container { } /* FORMULAIRE ------------------------------------------------------------------ */ .form-control { font-size: 14px; height: 38px; border: 1px solid var(--light-black); } .placeholder { color: var(--grey); width: 95%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-thin); line-height: 1.6em; } .select-dropdown { min-width: 100%; border-radius: 10px; padding: 5px; box-shadow: 2px 2px 4px 0px #00000040 !important; max-height: 300px; overflow: hidden; overflow-y: scroll; } .select-dropdown .dropdown-item { border-radius: 10px; height: 40px; line-height: 1.8em; font-size: 16px; cursor: pointer; } .select-dropdown .dropdown-item:active { background-color: var(--grey) !important; color: #000 !important; } .dropdown-menu-horaire, .dropdown-menu { -ms-overflow-style: none; scrollbar-width: none; } .form-error-icon { display: none; } .form-error-message { font-size: 10px; padding-left: 0px; } /* SEARCH FORM */ #top-search-container { background-color: #fff0; border: 0px; } #search-form { /*position: relative;*/ position: fixed; z-index: 50; height: 200px; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 20px 20px; border-radius: 25px; border: 1px solid var(--main-color); background-color: #fff; box-shadow: var(--main-box-shadow); } .search-form-navbar { padding: 0px; margin-bottom: 10px; } #btn-services { padding: 0px 0px; border-radius: 25px; width: 30px !important; height: 30px !important; min-width: 30px; } #btn-services i { font-size: 28px; display: block; height: 30px; line-height: 1.2em; -webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; transition: all ease 0.4s; } #btn-services:hover i { color: var(--main-color); } #search-form label { margin-bottom: 8px; } #search-form .form-control { border-radius: 10px; } #btn-search-agence-depart, #btn-search-agence-retour { padding-top: 8px; padding-left: 35px; } #search-form .date-button { background-color: var(--light-grey); min-width: 110px; width: 110px; padding: 0px 8px; } #search-form .horaire-button { background-color: var(--light-grey); min-width: 100px; width: 100px; padding: 0px 8px; } .dropdown-toggle.btn-select-agence::before { content: "\F52A"; font-family: "bootstrap-icons"; position: absolute; left: 10px; border: 0px; font-weight: var(--font-bold); } .dropdown-toggle.horaire-button::after { content: ""; } #btn-recherche-vehicule-container { margin-top: 35px; } #btn-search-form-submit { position: absolute; width: 250px; height: 50px; font-size: 22px !important; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s; } #btn-search-form-submit:hover { background: #FFF !important; border: 1px solid var(--main-color); color: var(--main-color); } /* DEFAULT FORM */ .default-form .form-control { border: 0px; background-color: #fff !important; border-radius: 25px !important; min-height: 42px; border: 1px solid #00000012; } .default-form .form-control::placeholder { font-size: 14px; font-weight: var(--font-thin); color: var(--grey); } .default-form .dropdown-toggle::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 10px; top: 10px; border: 0px; } .default-form select option { font-family: 'Arial'; font-size: 14px; } .default-form label { font-size: 12px; color: var(--font-color); padding-left: 8px; font-weight: var(--font-thin); } input[type="checkbox"] { width: 1.3em; height: 1.3em; background-color: white; border-radius: 50% !important; border: 1px solid #ddd; appearance: none !important; -webkit-appearance: none !important; outline: none; cursor: pointer; font-size: 18px; margin-top: 1px; } input[type="checkbox"]:checked { background-color: var(--main-color) !important; border: 0px solid !important; } /* SELECT INDICATIF PAYS */ #indicatif-tel { font-size: 1em !important; } #indicatif-tel::placeholder { color: #d5d5d5; font-weight: 400; } .iti__flag.iti__globe { display: none !important; } .iti input.iti__tel-input { /*margin-top: 3px !important;*/ } .iti__selected-country { padding-top: 4px !important; } .iti__selected-country:hover { border: 0px; } .iti__selected-country-primary:hover { background-color: #fff0 !important; } .iti__search-input::placeholder { font-size: 12px !important; } .iti__country { font-size: 12px !important; } .iti .iti__selected-dial-code { margin-top: -3px; } .form-check-input { cursor: pointer; } .search-form .form-control, .search-form select { border: 1px solid var(--light-black); border-radius: 10px !important; height: 38px; } .iti__selected-country-primary { padding-bottom: 5px !important; padding-left: 15px !important; } /* DROPDOWN HORAIRE */ /* HORAIRES SELECT ------------------------------------------------------------- */ .dropdown-menu-horaire { width: 220px; padding: 10px; max-height: 400px; overflow: hidden; overflow-y: scroll; } .dropdown-menu-horaire::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar { display: none; } .dropdown-menu-horaire, .dropdown-menu { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .dropdown-menu li .dropdown-item { line-height: 2.4em; font-size: 14px; } .dropdown-menu li .dropdown-item.active { background-color: var(--main-color) !important; } .placeholder.active { color: #000; font-weight: var(--btn-font-weight-normal); } .dropdown-horaire-section-title { margin-bottom: 6px; } .dropdown-menu-horaire button { background-color: #F3F3F3; min-width: 130px; height: 35px; /*color: var(--main-color);*/ margin-right: 10px; margin-bottom: 10px; box-shadow: inset -200px 0 0 0 var(--light-grey); -webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; transition: all ease 0.4s; background: var(--light-grey); border: 0px; } .dropdown-horaire-matinale-item { /*margin-bottom: 10px;*/ } .horaire-matinale-supp-horaire { border-radius: 6px; border: 1px solid var(--main-color); text-align: center; padding: 4px; width: 60px; height: 35px; line-height: 0.8em; color: var(--main-color); margin-bottom: 10px; } .btn-horaire-item.selected { background-color: var(--main-color); color: #fff; box-shadow: none !important; } .tarif-supp { font-size: 12px; } .forfait-txt { font-size: 9px; } .btn-horaire-item:hover { box-shadow: inset 0px 0px 0px 0 var(--light-grey); color: #fff; background: var(--main-color); border: 0px; } /* WIDGET ---------------------------------------------------------------------- */ .widget { background-color: var(--light-grey); /*min-height: 350px;*/ z-index: 100; position: relative; padding: 15px; border-radius: 15px; } .inner-widget { background-color: #FFF; position: relative; padding: 25px; border-radius: 15px; border: 1px solid var(--main-color); } .inner-widget p { font-size: 14px; color: var(--font-color); } .gradient-widget { background: var(--light-grey-gradient); min-height: 350px; z-index: 100; position: relative; padding: 25px; border-radius: 15px; } .widget-fixed { position: sticky; top: 40px; z-index: 2; border-radius: 16px; height: fit-content; } .widget-white { background-color: #FFF; } .widget-white-title { text-transform: uppercase; font-size: 30px; font-weight: var(--font-extrabold); } .widget-shadow { box-shadow: 0px 0px 20px #0003; } .widget-footer-text { font-size: 14px; color: var(--grey); text-decoration: none !important; transition: all 0.2s ease-in; } .widget-footer-text:hover { color: var(--font-color); font-weight: var(--font-bold); } /* DATERANGEPICKER ------------------------------------------------------------- */ .daterangepicker { font-family: 'Comfortaa' !important; border-radius: 15px !important; width: 260px !important; box-shadow: 2px 2px 4px 0px #00000040 !important; } .daterangepicker .drp-calendar { width: 100%; } .daterangepicker table { width: 100%; } .daterangepicker .calendar-table th { font-weight: var(--font-thin) !important; color: #000 !important; } .off.ends { color: var(--grey) !important; } .available { /*color: var(--main-color) !important;*/ } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--main-color) !important; color: #fff !important; } .daterangepicker td { width: 30px !important; height: 30px !important; } .table-condensed thead tr th { padding-top: 10px !important; } .table-condensed thead tr:first-child th { border-bottom: 1px solid var(--light-grey) !important; padding-bottom: 5px; padding-top: 0px !important; vertical-align: inherit; font-size: 16px; } .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { display: block; border: 1px solid var(--grey) !important; transform: rotate(0deg) !important; -webkit-transform: rotate(0deg) !important; height: 26px; width: 26px; border-radius: 6px !important; background-color: #fff; } .daterangepicker .calendar-table .next span:before { content: "\f054"; color: var(--grey); font-family: FontAwesome; font-weight: 100; font-size: 10px !important; position: absolute; top: 1px; right: 8px; line-height: 2.1em; } .daterangepicker .calendar-table .prev span:before { content: "\f053"; color: var(--grey); font-family: FontAwesome; font-weight: 100; font-size: 10px !important; position: absolute; top: 1px; right: 8px; line-height: 2.1em; } .next.available:hover, .prev.available:hover { background-color: transparent !important; } .off.ends.available, .off.ends.available:hover { /* color: #fff !important; background-color: #fff !important;*/ /*cursor: not-allowed;*/ /*display: none;*/ content:'' !important; } .daterangepicker select.monthselect, .daterangepicker select.yearselect { font-size: 12px !important; padding: 1px !important; height: auto !important; margin: 0 !important; cursor: default !important; font-family: arial !important; padding: 5px !important; border-radius: 5px; } .monthselect, .yearselect { border: 1px solid #8080803b; padding: 5px 5px !important; border-radius: 2px; background-color: #fff; font-weight: 600; } /* DATATABLES ------------------------------------------------------------------ */ div.dataTables_wrapper div.dataTables_info { padding-top:.85em } /* ALERT ----------------------------------------------------------------------- */ .alert { font-size: 14px; padding: 8px; } /* FLASHMESSAGE ---------------------------------------------------------------- */ #alert-flashmessage-container { position: fixed; top: 0px; min-height: 40px; max-height: 80px; width: 100%; padding: 8px; z-index: 1000; font-size: 14px; font-weight: 300; } .alert-flashmessage-success { background-color: #157347; color: #ececec; } .alert-flashmessage-warning { background-color: #ffca2c; color: #353535; } .alert-flashmessage-danger { background-color: #bb2d3b; color: #ececec; } .alert-flashmessage-info { background-color: #72aee6; } /* ----------------------------------------------------------------------------- */ /* LOADER ---------------------------------------------------------------------- */ #modal-loader-societe-container, #modal-loader-paiement { width: 100%; margin-left: auto; margin-right: auto; min-height: 300px; text-align: center; } #modal-loader-societe-container .loader-img-container, #modal-loader-paiement .loader-img-container{ position: relative; /*width: 100%;*/ width: 320px; margin-left: auto; margin-right: auto; } #modal-loader-societe .modal-dialog, #modal-loader-paiement .modal-dialog { margin-top: 14% !important; width: 350px; background-color: #fff0; } #modal-loader-societe .modal-content, #modal-loader-paiement .modal-content { background-color: #fff0; border: 0px !important; } #modal-loader-societe-container .loader-element, #modal-loader-paiement .lodaer-element, .loader-element img { width: 280px; height: 280px; margin: auto; display: block; position: relative; } #logo-text-container-loader { width: 320px; background-color: #DC4E28; color: white; font-size: 2.4em; position: absolute; border-radius: 4px; top: 110px; height: 60px; /*left: 15px;*/ padding: 2px; } #loader-text-1 { color: #eee; font-size: 1.2em; } #modal-loader-paiement #loader-text-1 { line-height: 1em; } #loader-text-2 { color: #eee; font-size: 1em; } /* MODAL ERREUR SAISIE --------------------------------------------------------- */ #modal-erreur-saisie .modal-dialog { margin-top: 16%; width: 400px; } #modal-erreur-saisie .modal-content { min-height: 60px; border-radius: 2px; width: 400px; padding: 20px; font-size: 1em; } #modal-erreur-saisie .modal-content p i { font-size: 1.2em; color: #ffa700; } /* FOOTER ---------------------------------------------------------------------- */ footer { /*min-height: 360px;*/ /* background-image: url('./../../../img/v2/footer/courbe_orange.png'); background-position-y: top; background-repeat: no-repeat; background-size: contain;*/ } #footer-inner-top { /*height: 220px;*/ background-image: url('./../../../img/v2/footer/courbe_orange.png'); background-position-y: top; background-repeat: no-repeat; background-size: contain !important; position: relative; } #footer-inner-top .container { padding-top: 105px; z-index: 10; position: relative; max-width: 1200px; } #footer-inner-bottom { position: relative; background-color: var(--main-color); min-height: 180px; margin-top: -40px; } #footer-inner-bottom .container-fluid { position: absolute; bottom: 0px; padding-left: 80px; padding-right: 80px; } .footer-ext-container { width: 200px; color: #fff; line-height: 4em; text-align: center; } .btn-footer-icon-card { display: block; width: 100px; height: 100px; border-radius: 50px; background-color: #F9F9F9; border: 0px; padding: 20px; margin-left: auto; margin-right: auto; margin-bottom: 15px; } .btn-footer-icon-card img { width: 60px; height: 60px; display: block; margin-left: auto; margin-right: auto; } .btn-footer-icon-card:hover { box-shadow: 0px 0px 10px 0px #0000002e; } .btn-footer-icon-text-container { position:absolute; bottom: -40px; width: 100%; height: 40px; } .btn-footer-icon-card + label, .btn-footer-icon-text-container label { display: none; margin-left: auto; margin-right: auto; height: 40px; padding: 8px; background-color: #FFF; border-radius: 30px; text-align: center; font-size: 18px; width: 200px; box-shadow: 0px 0px 10px 0px #0000002e; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s; } .btn-footer-icon-card:hover + label, .btn-footer-icon-card:hover + .btn-footer-icon-text-container label { display: block; /*position: absolute;*/ } .social-logo { width: 40px; height: 40px; } .footer-mentions { color: #fff; text-align: center; line-height: 4em; width: 440px; } .footer-line { border-bottom: 1px solid #fff; height: 40px; min-width: 240px; max-width: 400px; } footer a { text-decoration: none !important; color: #FFF; } footer a:hover { color: var(--font-color); } /* TOOLTIPS -------------------------------------------------------------------- */ .tooltip { margin-top: 10px !important; min-width: 180px !important; max-width: 350px !important; width: auto; background-color: #FFF !important; padding: 5px !important; border-radius: 15px !important; opacity: 1 !important; box-shadow: 0px 0px 10px 0px #0000002b !important; } .tooltip-arrow { display: none !important; border: 0px !important; } .tooltip-inner { color: #000 !important; width: 100% !important; background-color: #FFF !important; opacity: 10 !important; max-width: 100%; text-align: left !important; font-size: 15px !important; font-weight: 400; font-family: "Barlow" !important; } /* COOKIES CONSENT ------------------------------------------------------------ */ #cookies-consent-container { height: 210px; width: 260px; position: fixed; bottom: 20px; left: 20px; background-color: #000000d1; color: white; padding: 15px; font-size: 12px !important; border-radius: 4px; box-shadow: 2px 2px 2px #0f0f0f; } #btn-valid-cookies-consent { background-color: #f9af0000; color: white; border: 1px solid #f9af00; } #btn-valid-cookies-consent:hover { background-color: #f9af00; color: white; border: 1px solid #f9af00; } #btn-valid-cookies-consent:active { background-color: #d59500; border: 1px solid #d59500; } /*.custom-tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltiptext { visibility: hidden; width: 130px; background-color: black; color: #ffffff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }*/ /* AUTRES */ fieldset { border: 2px solid var(--main-color); padding: 20px; padding-top: 0px; border-radius: 20px; } fieldset legend { font-size: 20px; font-weight: 600; padding-bottom: 6px; padding-left: 5px; padding-right: 5px; margin-left: 30px; float: none; width: auto; } fieldset p { font-size: 14px; } .hide { display: none; } /* RESPONSIVE ------------------------------------------------------------------ */ @media screen and (max-width: 7680px) { #footer-inner-top { background-size: cover !important; } } @media screen and (max-width: 1680px) { /* NAVBAR ------------------------------------------------------------------ */ #navbar { padding: 20px 0px; } .navbar-brand { margin-right: 0px; } .navbar-brand img { max-height: 150px; width: auto !important; height: auto !important; } #navbar-resp-action-col { display: flex !important; } .search-form-col { margin-top: 0px; padding: 0px; } #navbar-resp-action-col { display: none !important; } /* FOOTER ------------------------------------------------------------------ */ footer { /* min-height: 300px;*/ } #footer-inner-top { background-size: cover !important; height: auto; width: 100% !important; } #footer-inner-top .container { padding-top: 50px; max-width: 900px; } #footer-inner-bottom .container-fluid { padding-left: 40px; padding-right: 40px; } .footer-line { min-width: 240px; } } @media screen and (max-width: 1440px) { #footer-inner-top { background-size: contain !important; } } @media screen and (max-width: 1399px) { /* 1400px */ /* VEHICULE CARD */ .caract-badge { font-size: 10px !important; } .caract-badge-text { font-size: 9px !important; line-height: 2em; } .vehicule-marque { font-size: 24px !important; } /* NAVBAR ------------------------------------------------------------------ */ #navbar { padding: 20px 0px; } .navbar-brand { margin-right: 0px; } .navbar-brand img { width: 100% !important; height: auto !important; } #navbar-resp-action-col { display: flex !important; } .search-form-col { margin-top: 0px; padding: 0px; } #navbar-resp-action-col { display: none !important; } /* FOOTER ------------------------------------------------------------------ */ footer { /*min-height: 300px;*/ } #footer-inner-top { background-size: contain; height: auto; width: 100% !important; } #footer-inner-top .container { padding-top: 50px; max-width: 900px; } #footer-inner-bottom .container-fluid { padding-left: 40px; padding-right: 40px; } .footer-line { min-width: 140px; } } @media screen and (max-width: 1366px) { /* VEHICULE CARD */ .caract-badge { font-size: 10px !important; } .caract-badge-text { font-size: 9px !important; line-height: 2em; } /* NAVBAR ------------------------------------------------------------------ */ #navbar { padding: 20px 0px; } .navbar-brand { margin-right: 0px; } .navbar-brand img { width: 100% !important; height: auto !important; } #navbar-resp-action-col { display: flex !important; } .search-form-col { margin-top: 0px; padding: 0px; } #navbar-resp-action-col { display: none !important; } /* SEARCH FORM ------------------------------------------------------------- */ #search-form { max-width: 800px; } #btn-search-agence-depart, #btn-search-agence-retour { padding-top: 8px; padding-left: 25px; } .placeholder { font-size: 12px; } .dropdown-toggle.btn-select-agence::before { font-size: 12px; } .dropdown-toggle.btn-select-agence::after { font-size: 12px; } #search-form .date-button, #search-form .horaire-button { min-width: 80px; width: 80px; padding: 0px 0px; font-size: 12px !important; } #btn-search-reservation { min-width: 120px; font-size: 12px !important; } /* FOOTER ------------------------------------------------------------------ */ footer { /*min-height: 300px;*/ } #footer-inner-top { /* background-size: contain; min-height: 138px; height: 138px;*/ } #footer-inner-top .container { padding-top: 50px; max-width: 900px; } #footer-inner-bottom .container-fluid { padding-left: 40px; padding-right: 40px; } .footer-line { min-width: 140px; } } @media screen and (max-width: 1199px) { /* 1200px*/ /* VEHICULE CARD */ .caract-badge { margin-right: 4px; font-size: 12px; height: 20px; border-radius: 15px; border: 1px solid #000000a3; padding: 6px 8px; } .caract-badge-text { font-size: 12px; vertical-align: bottom; text-transform: capitalize; } .vehicule-marque { font-size: 32px; font-weight: var(--font-bold); text-overflow: ellipsis; overflow: hidden; width: 100%; white-space: nowrap; } /* HEADER ------------------------------------------------------------------ */ header { min-height: auto; padding-left: 10px; padding-right: 10px; } #img-header { margin-top: 180px; } /* NAVBAR ------------------------------------------------------------------ */ #navbar { padding: 10px 0px; } .navbar-brand { margin-right: 0px; } .navbar-brand img { width: 100% !important; height: auto !important; } #navbar-resp-action-col { display: flex !important; } .search-form-col { margin-top: 20px; padding: 0px; } #navbar-resp-action-col .d-flex.justify-content-evenly.w-100 { justify-content: end !important; } /* SEARCH FORM ------------------------------------------------------------- */ #search-form { position: relative !important; height: auto; } #search-form-navbar { justify-content: start !important; } .btn-search-radio { width: 180px; font-size: 18px !important; line-height: 1.4em; } .btn-search-radio .radio-img { width: 30px !important; } #btn-set-date-depart, #btn-set-date-retour, #horaire-depart, #horaire-retour { margin-top: 0px; } .retour-container { /*margin-top: 15px;*/ } #btn-recherche-vehicule-container { margin-top: 30px !important; } #btn-search-form-submit{ bottom: -25px; } .action-col { display: none; } /* FOOTER ------------------------------------------------------------------ */ footer { min-height: auto; } #footer-inner-top { background-size: 100%; margin-top: 100px; height: 40px; background-size: contain; min-height: 138px; height: 138px; } .btn-footer-icon-card { width: 80px; height: 80px; padding: 15px; } .btn-footer-icon-card img { width: 100%; height: 100%; } #footer-inner-top .container { padding-top: 40px; } .btn-footer-icon-card + label { font-size: 12px !important; width: auto; padding-left: 8px; padding-right: 8px; line-height: 2em; } #footer-inner-bottom { min-height: 210px; margin-top: -40px; } #footer-inner-bottom .container-fluid { padding-left: 10px; padding-right: 10px; top: 80px; } .footer-line { display: none; } .footer-ext-container { width: 100%; line-height: 2em; } .footer-mentions, .footer-ext-container { width: 100%; font-size: 16px; } .d-flex.justify-content-center.w-100 { flex-direction: column !important; } .social-logo { width: 25px; height: 25px; margin-left:10px; margin-right:10px; } .footer-ext-container .d-flex.justify-content-evenly { justify-content: center !important; } } @media screen and (max-width: 1024px) { /* */ /* VEHICULE CARD */ .vehicule-marque { font-size: 24px !important; } .vehicule-type { font-size: 12px !important; } .caract-badge { font-size: 10px !important; } .caract-badge-text { font-size: 9px !important; line-height: 2em; } /* HEADER ------------------------------------------------------------------ */ header { min-height: auto; padding-left: 10px; padding-right: 10px; } #img-header { margin-top: 180px; } /* NAVBAR ------------------------------------------------------------------ */ #navbar { padding: 10px 0px; } .navbar-brand { margin-right: 0px; } .navbar-brand img { width: 100% !important; height: auto !important; } #navbar-resp-action-col { display: flex !important; } .search-form-col { margin-top: 20px; padding: 0px; } #navbar-resp-action-col .d-flex.justify-content-evenly.w-100 { justify-content: end !important; } /* SEARCH FORM ------------------------------------------------------------- */ #search-form { position: relative !important; height: auto; } #search-form-navbar { justify-content: start !important; } .btn-search-radio { width: 180px; font-size: 18px !important; line-height: 1.4em; } .btn-search-radio .radio-img { width: 30px !important; } #btn-set-date-depart, #btn-set-date-retour, #horaire-depart, #horaire-retour { margin-top: 0px; } .retour-container { /*margin-top: 15px;*/ } #btn-recherche-vehicule-container { margin-top: 30px !important; } #btn-search-form-submit{ bottom: -25px; transition: all ease 0.0s !important; } .action-col { display: none; } /* FOOTER ------------------------------------------------------------------ */ footer { min-height: auto; } #footer-inner-top { background-size: 100%; margin-top: 100px; height: 40px; } .btn-footer-icon-card { width: 80px; height: 80px; padding: 15px; } .btn-footer-icon-card img { width: 100%; height: 100%; } #footer-inner-top .container { padding-top: 40px; } .btn-footer-icon-card + label { font-size: 12px !important; width: auto; padding-left: 8px; padding-right: 8px; line-height: 2em; } #footer-inner-bottom { min-height: 210px; margin-top: -40px; } #footer-inner-bottom .container-fluid { padding-left: 10px; padding-right: 10px; top: 80px; } .footer-line { display: none; } .footer-ext-container { width: 100%; line-height: 2em; } .footer-mentions, .footer-ext-container { width: 100%; font-size: 16px; } .d-flex.justify-content-center.w-100 { flex-direction: column !important; } .social-logo { width: 25px; height: 25px; margin-left:10px; margin-right:10px; } .footer-ext-container .d-flex.justify-content-evenly { justify-content: center !important; } } @media screen and (max-width: 991px) { /* VEHICULE CARD */ .caract-badge { font-size: 10px !important; } /* NAVBAR ------------------------------------------------------------------ */ #navbar { padding: 10px 0px; } .navbar-brand { margin-right: 0px; } .navbar-brand img { width: 100% !important; height: auto !important; } #navbar-resp-action-col { display: flex !important; } .search-form-col { margin-top: 20px; padding: 0px; } #navbar-resp-action-col .d-flex.justify-content-evenly.w-100 { justify-content: end !important; } /* SEARCH FORM ------------------------------------------------------------- */ #search-form { position: relative !important; height: auto; } #search-form-navbar { justify-content: start !important; } .btn-search-radio { width: 180px; font-size: 18px !important; line-height: 1.4em; } .btn-search-radio .radio-img { width: 30px !important; } #btn-set-date-depart, #btn-set-date-retour, #horaire-depart, #horaire-retour { margin-top: 0px; } .retour-container { margin-top: 15px; } #btn-recherche-vehicule-container { margin-top: 30px !important; } #btn-search-form-submit{ bottom: -25px; } .action-col { display: none; } /* FOOTER ------------------------------------------------------------------ */ footer { min-height: auto; } #footer-inner-top { background-size: 100%; margin-top: 100px; height: 40px; background-size: contain !important; } .btn-footer-icon-card { width: 80px; height: 80px; padding: 15px; } .btn-footer-icon-card img { width: 100%; height: 100%; } #footer-inner-top .container { padding-top: 0px; } .btn-footer-icon-card + label { font-size: 12px !important; width: auto; padding-left: 8px; padding-right: 8px; line-height: 2em; } #footer-inner-bottom { min-height: 210px; margin-top: -80px; } #footer-inner-bottom .container-fluid { padding-left: 10px; padding-right: 10px; top: 80px; } .footer-line { display: none; } .footer-ext-container { width: 100%; line-height: 2em; } .footer-mentions, .footer-ext-container { width: 100%; font-size: 16px; } .d-flex.justify-content-center.w-100 { flex-direction: column !important; } .social-logo { width: 25px; height: 25px; margin-left:10px; margin-right:10px; } .footer-ext-container .d-flex.justify-content-evenly { justify-content: center !important; } /* GENERAL */ button { font-size: 12px !important; } } @media screen and (max-width: 900px) { } @media screen and (max-width: 768px) { header { min-height: auto !important; padding: 0 10px !important; } /* NAVBAR ------------------------------------------------------------------ */ #navbar { padding: 10px 0px; } .navbar-brand { margin-right: 0px; } .navbar-brand img { width: 100% !important; height: auto !important; } #navbar-resp-action-col { display: flex !important; } .search-form-col { margin-top: 20px; padding: 0px; } /* SEARCH FORM ------------------------------------------------------------- */ #search-form { position: relative !important; height: auto; } .btn-search-radio { width: 180px; font-size: 18px !important; line-height: 1.4em; } .btn-search-radio .radio-img { width: 26px; } #btn-set-date-depart, #btn-set-date-retour, #horaire-depart, #horaire-retour { margin-bottom: 15px; } .retour-container { margin-top: 20px; } #btn-recherche-vehicule-container { margin-top: 30px !important; } #btn-search-form-submit{ bottom: -25px; } .action-col { display: none; } .btn-edit-search-col { position: absolute; top: 0px; top: -10px; right: -10px; text-align: right; } #search-edit-button img { width: 25px; height: 25px; } .search-depart-retour-separator { font-size: 20px; } #btn-search-form-submit { transition: all ease 0.0s !important; } /* ETAPE LOCATION */ .etape-location-label { font-size: 12px; } .etape-location-label.active { font-size: 12px; } .etape-location-img { width: 25px; height: 25px; } /* FILTRES */ #btn-filtres-rapides span, #btn-filtres span { padding-left: 30px; font-size: 14px !important; line-height: 2em; } #btn-filtres-rapides { width: 180px !important; } #btn-filtres { width: 130px !important; } /* VEHICULE EN AVANT */ #en-avant-container { padding-left: 0px !important; padding-right: 0px !important; } .veh-card { width: 330px !important; } .vehicule-marque { font-size: 24px !important; } .vehicule-type { font-size: 12px !important; } .caract-badge { font-size: 10px !important; } .caract-badge-text { font-size: 9px !important; line-height: 2.2em !important; } .caract-badge img { height: 10px !important; } /* FOOTER ------------------------------------------------------------------ */ footer { min-height: auto; } #footer-inner-top { background-size: 100%; margin-top: 100px; height: 40px; } .btn-footer-icon-card { width: 80px; height: 80px; padding: 15px; } .btn-footer-icon-card img { width: 100%; height: 100%; } #footer-inner-top .container { padding-top: 0px; } .btn-footer-icon-card + label { font-size: 12px !important; width: auto; padding-left: 8px; padding-right: 8px; line-height: 2em; } #footer-inner-bottom { min-height: 210px; } #footer-inner-bottom .container-fluid { padding-left: 10px; padding-right: 10px; top: 80px; } .footer-line { display: none; } .footer-ext-container { width: 100%; line-height: 2em; } .footer-mentions, .footer-ext-container { width: 100%; font-size: 16px; } .d-flex.justify-content-center.w-100 { flex-direction: column !important; } .social-logo { width: 25px; height: 25px; margin-left:10px; margin-right:10px; } .footer-ext-container .d-flex.justify-content-evenly { justify-content: center !important; } } @media screen and (max-width: 767px) { .main-widget { margin-top: 40px; } } @media screen and (max-width: 576px) { /* FOOTER ------------------------------------------------------------------ */ footer { min-height: auto; } #footer-inner-top { background-size: 100%; margin-top: 100px; height: 40px; } .btn-footer-icon-card { width: 60px; height: 60px; padding: 10px; } .btn-footer-icon-card img { width: 100%; height: 100%; } #footer-inner-top .container { padding-top: 0px; } .btn-footer-icon-card + label { font-size: 10px !important; width: auto; padding-left: 8px; padding-right: 8px; } #footer-inner-bottom { min-height: 240px; margin-top: -80px; } #footer-inner-bottom .container-fluid { padding-left: 10px; padding-right: 10px; top: 80px; } .footer-line { display: none; } .footer-ext-container { width: 100%; } .footer-mentions, .footer-ext-container { width: 100%; font-size: 14px; } .d-flex.justify-content-center.w-100 { flex-direction: column !important; } .social-logo { width: 25px; height: 25px; margin-left:10px; margin-right:10px; } .footer-ext-container .d-flex.justify-content-evenly { justify-content: center !important; } } @media screen and (max-width: 575px) { #btn-set-date-depart, #btn-set-date-retour, #horaire-depart, #horaire-retour { margin-top: 15px; } } @media screen and (max-width: 500px) { #footer-inner-bottom { margin-top: -100px; } } @media screen and (max-width: 480px) { /* SEARCH FORM ------------------------------------------------------------- */ #search-form { position: relative !important; height: auto; } .btn-search-radio { width: 160px; font-size: 16px !important; line-height: 1.6em; } .btn-search-radio .radio-img { width: 24px; } #btn-set-date-depart, #btn-set-date-retour, #horaire-depart, #horaire-retour { margin-top: 15px; } .retour-container { margin-top: 20px; } #btn-recherche-vehicule-container { margin-top: 30px !important; } #btn-search-form-submit{ bottom: -25px; } .action-col { display: none; } } @media screen and (max-width: 411px) { /* SEARCH FORM ------------------------------------------------------------- */ #search-form { position: relative !important; height: auto; } .btn-search-radio { width: 140px; font-size: 14px !important; line-height: 1.8em; } .btn-search-radio .radio-img { width: 22px; } #btn-set-date-depart, #btn-set-date-retour, #horaire-depart, #horaire-retour { margin-top: 15px; } .retour-container { margin-top: 20px; } #btn-recherche-vehicule-container { margin-top: 30px !important; } #btn-search-form-submit{ bottom: -25px; } .action-col { display: none; } /* FOOTER ------------------------------------------------------------------ */ .footer-mentions, .footer-ext-container { width: 100%; font-size: 12px; } } @media screen and (max-width: 375px) { /* SEARCH FORM ------------------------------------------------------------- */ .btn-search-radio { width: 120px; font-size: 12px !important; line-height: 2em; } .btn-search-radio .radio-img { width: 20px; } #btn-set-date-depart, #btn-set-date-retour, #horaire-depart, #horaire-retour { margin-top: 15px; } .retour-container { margin-top: 20px; } #btn-recherche-vehicule-container { margin-top: 30px !important; } #btn-search-form-submit{ bottom: -25px; } .action-col { display: none; } } @media screen and (max-width: 360px) { /* HEADER ------------------------------------------------------------------ */ }