/*google fonts support*/
/*@import url("https://fonts.googleapis.com/css?family=Open sans:400,700&display=swap");*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
/*=================================
------- TABLE OF CONTENT-----------

1. common css
2. header top css
3. navigation css
4. banner part css
5. fleet part css
6. marble car css
7. marble car bottom
8. footer css
9. copyright css
10.side menu css
11. second page css
==================================*/

/*=================================
			common css
===================================*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

a,
a:hover {
  display: inline-block;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clr {
  clear: both;
}

.list-group-item:last-child {
  border-radius: 0;
}

span {
  display: inline-block;
}

.form-control:focus {
  box-shadow: none !important;
}

/*=================================
		 header top css
===================================*/
.header_top {
  font-family: "Open sans", sans-serif;
  font-weight: 400;
  background: #1fbfee;
  color: #fff;
  padding: 8px;
}

.header_top h3,
.header_top li {
  font-size: 16px;
  padding: 8px 0;
}

.header_top ul li {
  display: inline-block;
}

.header_top ul li span {
  padding-right: 10px;
}

.header_top ul li:first-child {
  padding-right: 20px;
  border-right: 1px solid #4cccf1;
}

.header_top ul li:last-child {
  padding-left: 20px;
}

/*=================================
		 navigation css
===================================*/

.navigation_part {
  padding: 20px 0;
  font-family: "Open sans", sans-serif;
  font-weight: 400;
}

.navigation_part ul {
  display: flex;
  justify-content: flex-end;
}
.navigation_part ul li {
  display: inline-block;
}

.nav_logo {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-header
  .pignose-calendar-week {
  font-size: 16px;
}

.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-active
  a {
  color: #fff;
  background-color: #009fe3;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  background: transparent;
  box-shadow: 0 0 0 transparent;
  color: #27bcf9;
  transform: scale(1.5);
}

.perfect-datetimepicker table td.weekend {
  color: #000;
}

.later_part {
  padding-top: 15px;
}

#menu_btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: #27bcf9;
  border: 1px solid #dcdcdc;
  transition: 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#menu_btn:hover {
  background: #27bcf9;
  color: #fff;
  border-color: #27bcf9;
}

.signIn_btn {
  font-size: 18px;
  padding: 10px 30px;
  color: #0774ca;
  border-radius: 28px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  margin-right: 20px;
  transition: 0.2s;
  border: 0;
  background: #fff;
}

.signIn_btn:hover {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  background: #0774ca;
  color: #fff;
}

.nav_logo a {
  width: 55px;
  position: relative;
  left: 8px;
  margin: 0 auto;
  transform: translateY(14px);
  z-index: 99;
}

.logo_shape {
  width: 150px;
  height: 35px;
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.logo_shape img {
  width: 100%;
}

/*=================================
		 banner part css
===================================*/

.banner_part {
  padding: 180px 0;
  background: url(../images/banner_bg.webp) no-repeat center;
  background-size: cover;
  position: relative;
}

.banner_part .container {
  padding: 18px;
  background: rgba(239, 239, 239, 0.7);
  border-radius: 5px;
}

.banner_content {
  background: #fff;
  border-radius: 5px;
  position: relative;
  z-index: 99;
}

.banner_input_content {
  padding: 20px 30px;
}

.banner_continue_btn {
  text-align: center;
  padding: 15px 0;
  display: block;
  background: #0994e8;
  color: #fff;
  font-size: 18px;
  font-family: "Open sans", sans-serif;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 100%;
  border: 0;
}
.perfect-datetimepicker {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ddd;
}

.banner_continue_btn:hover {
  display: block;
  color: #fff;
  padding: 15px 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.banner_continue_btn:focus {
  outline: 0;
}

.banner_continue_btn span {
  transition: all linear 0.2s;
}

.banner_continue_btn span:first-child {
  transform: translateX(30px);
}

.banner_continue_btn span:last-child {
  transform: translateY(2px);
  margin-left: 10px;
  opacity: 0;
}

.banner_continue_btn:hover span:first-child {
  transform: translateX(0);
}
.banner_continue_btn:hover span:last-child {
  opacity: 1;
  margin-left: 0px;
}

.ui-input,
.input_fields,
.input_fields:hover,
.input_fields:focus {
  width: 100%;
  border: 1px solid #ddd;
  padding: 12px 10px 12px 63px;
  font-family: "Open sans", sans-serif;
  font-size: 16px !important;
  border-radius: 4px;
}
.input_holder {
  position: relative;
}
.input_holder.d-flex {
  display: flex;
  justify-content: space-between;
}
.input_holder.d-flex .item {
  width: 48%;
}
.location_icon {
  position: absolute;
  top: 0;
  left: -5px;
  border-right: 1px solid #ddd;
  height: 100%;
  line-height: 48px;
  font-size: 22px;
  color: #53d4f7;
  width: 58px;
}

.datePicker {
  position: absolute;
  width: 365px;
  right: 0;
  top: 0;
  border-radius: 5px;
  background: #fff;
  z-index: 99;
  border: 1px solid #ddd;
  overflow: hidden;
  box-shadow: 5px 0px 60px rgba(0, 0, 0, 0.1);
  display: none;
}

.datePickers {
  position: absolute;
  width: 365px;
  right: 0;
  top: 0;
  border-radius: 5px;
  background: #fff;
  z-index: 99;
  border: 1px solid #ddd;
  overflow: hidden;
  box-shadow: 5px 0px 60px rgba(0, 0, 0, 0.1);
  display: none;
}

.datePickers .calender_time h3 {
  padding: 3px 0;
}

.pageTwo .calender_time h3 {
  padding: 3px 0;
}

.returnBook {
  display: none;
}

.choose {
  padding: 20px 5px;
  text-align: left;
}

.choose button {
  border: 0;
  background: #ddd;
  font-family: "open sans", sans-serif;
  font-size: 18px;
  padding: 12px 40px;
  margin: 0 15px;
  color: #222;
  border-radius: 5px;
}

#later_btn {
  background: #009fe3;
  color: #fff;
}

.timing_part {
  background: #fafafa;
  border-top: 1px solid #ddd;
}

.calender_time {
  padding: 4px 5px;
  box-sizing: border-box;
  transform: translateY(-15px);
  width: 100px;
  float: right;
}

.calender_time ul li {
  text-align: center;
  padding-bottom: 4px;
}

#hour_box,
#minBox {
  width: 100%;
  border: 1px solid #ddd;
  margin-right: 5px;
  padding: 5px;
  font-size: 20px;
  border-radius: 5px;
  background: #eee;
}

#date-text2,
#date-text3 {
  height: 1px;
  background: green;
  position: absolute;
  opacity: 0;
  z-index: -99;
  bottom: 0;
}

#demo2 {
  transform: translateY(-39px);
  width: 260px;
  float: left;
  z-index: 999;
  margin-top: 24px;
}

#demo3 {
  transform: translateY(-39px);
  width: 260px;
  float: left;
  z-index: 999;
  margin-top: 24px;
}

.returnDate {
  display: none;
}

.perfect-datetimepicker * {
  line-height: 26px;
}
.perfect-datetimepicker table td {
  border: 1px solid #ddd;
}

.calender_time h3 {
  color: #009fe3;
  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  padding: 10px 0;
  font-weight: bold;
  text-align: center;
}

.calender_time .d-flex button {
  width: 100%;
  padding: 5px 0;
  background: transparent;
  border: 1px solid #ddd;
  background: #009fe3;
  color: #fff;
}

.calender_time .d-flex {
  flex-direction: column;
}

#cancel_btn {
  background: #707070;
  border: 0;
  padding: 6px 12px;
  color: #fff;
  border-radius: 5px;
  font-size: 18px;
}
#cancel_btn:hover {
  background: #fa4832;
}

#cancel_btns {
  background: #707070;
  border: 0;
  padding: 6px 12px;
  color: #fff;
  border-radius: 5px;
  font-size: 18px;
}
#cancel_btns:hover {
  background: #fa4832;
}

#ok_btn {
  background: #043f9a;
  border: 0;
  padding: 6px 33px;
  color: #fff;
  border-radius: 5px;
  font-size: 18px;
}

#ok_btns {
  background: #043f9a;
  border: 0;
  padding: 6px 33px;
  color: #fff;
  border-radius: 5px;
  font-size: 18px;
}
.ok {
  opacity: 0;
  visibility: hidden;
}

.okCancel {
  text-align: center;

  transform: translateY(-21px);
}

.mt {
  display: none !important;
}

.title {
  pointer-events: none;
}

#asap_btn:hover {
  background: #009fe3;
  color: #fff;
}

.clear {
  display: none;
}

/*=================================
		 fleet part css
===================================*/
.fleet_part {
  font-family: "Open sans", sans-serif;
  padding-bottom: 100px;
}

.fleet_sidebar {
  z-index: 0;
  padding-bottom: 30px;
  background: #f5f5f5;
}

.fleet_part .list-group-item {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  padding: 15px 23px;
  color: #222;
  font-style: italic;
  text-align: left;
}

.fleet_part .list-group-item:nth-child(odd) {
  background: #eee;
}

.fleet_part .list-group-item:first-child {
  border-radius: 0;
}

.fleet_part .list-group-item-action.active {
  background: #1cc3f0 !important;
  color: #fff;
  z-index: 11;
}

.flet_title {
  padding: 100px 0 30px 0;
}

.flet_title h2 {
  text-align: right;
  font-family: "Open sans", sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: 38px;
  color: #1cc3f0;
  transform: translateX(113px);
  position: relative;
}
.flet_title h2::after {
  height: 8px;
  width: 228px;
  position: absolute;
  top: 12px;
  background: #f0f0f0;
  transform: skewX(-20deg);
  content: "";
  right: 179px;
}

.flet_title h2::before {
  height: 8px;
  width: 228px;
  position: absolute;
  top: 22px;
  background: #f0f0f0;
  transform: skewX(-20deg);
  content: "";
  right: 183px;
}

.fleet_part .tab-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.fleet_car .car_image {
  width: 637px;
  padding: 10px;
  transform: translate(-120px, 80px);
}

.fleet_car .car_image img {
  width: 100%;
}
.fleet_car {
  position: relative;
}
.eightSeater::after {
  position: absolute;
  content: "";
  width: 270px;
  height: 90px;
  background: url(../images/8seaterTitle.png) no-repeat center;
  background-size: cover;
  left: 120px;
  top: -52px;
  z-index: -1;
}

.sloonTitle::after {
  position: absolute;
  content: "";
  width: 270px;
  height: 90px;
  background: url(../images/saloonTitle.png) no-repeat center;
  background-size: cover;
  left: 120px;
  top: -52px;
  z-index: -1;
}

.mpvTitle::after {
  position: absolute;
  content: "";
  width: 270px;
  height: 90px;
  background: url(../images/mpvTitle.png) no-repeat center;
  background-size: cover;
  left: 120px;
  top: -52px;
  z-index: -1;
}

.estateTitle::after {
  position: absolute;
  content: "";
  width: 270px;
  height: 90px;
  background: url(../images/estateTitle.png) no-repeat center;
  background-size: cover;
  left: 120px;
  top: -52px;
  z-index: -1;
}

.eClassTitle::after {
  position: absolute;
  content: "";
  width: 270px;
  height: 90px;
  background: url(../images/eClassTitle.png) no-repeat center;
  background-size: cover;
  left: 120px;
  top: -52px;
  z-index: -1;
}

.sClassTitle::after {
  position: absolute;
  content: "";
  width: 270px;
  height: 90px;
  background: url(../images/sClassTitle.png) no-repeat center;
  background-size: cover;
  left: 120px;
  top: -52px;
  z-index: -1;
}

.vClassTitle::after {
  position: absolute;
  content: "";
  width: 270px;
  height: 90px;
  background: url(../images/vClass_title.png) no-repeat center;
  background-size: cover;
  left: 120px;
  top: -52px;
  z-index: -1;
}

.fleet_car .car_info {
  padding-bottom: 15px;
  width: 300px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.car_info ul li {
  width: 280px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0 0 0 auto;
  transform: skewX(-12deg);
  overflow: hidden;
}
.car_info ul li span {
  vertical-align: middle;
}

.car_info ul li span:first-child {
  background: #1cbde8;
  padding-right: 18px;
  color: #fff;
  font-size: 28px;
  width: 74px;
  transform: skewX(12deg) translateX(-11px);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
  text-align: center;
  height: 50px;
  line-height: 50px`;
}

.car_info ul li span:last-child {
  font-size: 18px;
  color: #999;
  font-family: "Open sans", sans-serif;
}

.car_info ul li:last-child {
  margin-top: 15px;
  margin-right: 16px;
}

/*=================================
		 marble car css
===================================*/
.marble_car_part {
  background: #f7f7f7;
  margin-top: 50px;
}
.video_part {
  position: absolute;
  right: 0;
  top: -42px;
  width: 700px;
}

.video_part img {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}
.marble_text_part {
  padding: 40px 0 62px 0;
  font-family: "Open sans", sans-serif;
}

.marble_text_part h2 {
  color: #1cc3f0;
  font-size: 38px;
  font-style: italic;
  font-weight: bold;
  padding-bottom: 10px;
  position: relative;
  display: inline-block;
}

.marble_car_part h2::after {
  position: absolute;
  left: -76px;
  top: 9px;
  height: 10px;
  border: 1px solid #ddd;
  background: #fff;
  width: 70px;
  transform: skewX(-12deg);
  content: "";
}

.marble_car_part h2::before {
  position: absolute;
  left: -80px;
  top: 23px;
  height: 10px;
  border: 1px solid #ddd;
  background: #fff;
  width: 70px;
  transform: skewX(-12deg);
  content: "";
}

.video_part .play_btn {
  position: absolute;
  top: 49%;
  left: 50%;
  width: 100px;
  height: 100px;
  color: #1cc3f0;
  border-radius: 50%;
  border: 1px solid #1cc3f0;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: all linear 0.2s;
}
.video_part .play_btn:hover {
  font-size: 30px;
  background: #1cc3f0;
  color: #fff;
}
.marble_text_part p {
  font-size: 15px;
  color: #444;
  transform: skewX(-12deg) translateX(-29px);
  text-align: justify;
}

/*=================================
		 marble car bottom
===================================*/
.marble_car_bottom {
  padding-top: 40px;
  padding-bottom: 80px;
}

.marble_car_bottom ul li.col-lg-4 {
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  padding: 0;
  flex: 0 0 29.333333%;
  margin: 0 15px;
}

.marble_car_bottom ul li {
  transform: skewX(-12deg);
  overflow: hidden;
}

.marble_car_bottom ul li span {
  vertical-align: middle;
  transform: skewX(12deg);
}

.marble_car_bottom ul li span img {
  width: 50px;
}

.marble_car_bottom ul li span:first-child {
  vertical-align: middle;
  transform: skewX(12deg);
  background: #1cc2ef;
  width: 100px;
  text-align: center;
  margin-left: -8px;
  height: 80px;
  line-height: 80px;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

.marble_car_bottom ul li span:last-child {
  font-size: 20px;
  color: #999;
  font-family: "Open sans", sans-serif;
}

/*=================================
		     footer css
===================================*/

.footer_part {
  padding: 50px 0;
  font-family: "Open sans", sans-serif;
  background: #f5f5f5;
}
.footer_part ul li {
  line-height: 30px;
}

.footer_part ul {
  position: relative;
}

.footer_part ul::after {
  right: 30px;
  top: 50%;
  height: 70%;
  width: 1px;
  background: #e9e9e9;
  position: absolute;
  content: "";
  transform: translateY(-50%);
}

.footer_part .col-lg-3:last-child ul:after {
  display: none;
}

.footer_part .col-md-3:last-child ul:after {
  display: none;
}
.footer_part ul li a {
  color: #222;
  font-size: 16px;
  font-style: italic;
}

.bbb {
  border-bottom: 40px solid #fafafa;
}

.footer_part ul li a:hover {
  color: #2bc5f0;
}

/* .footer_part ul li.active a {
  color: #2bc5f0;
} */

/*=================================
		     copyright css
===================================*/
.copyright {
  padding: 20px 0;
  background: #1cc3f0;
  font-family: "Open sans", sans-serif;
}

.copyright ul {
  text-align: center;
}

.copyright ul li {
  display: inline-block;
  margin: 0 10px;
  line-height: 30px;
}

.copyright ul li a {
  color: #fff;
  font-size: 16px;
}

/*=================================
		    side menu css
===================================*/

.sideMenu {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 9999;
  display: none;
}

.menu_bar,
.menu_user_bar {
  width: 300px;
  position: absolute;
  height: 100vh;
  top: 0;
  right: -300px;
  background: linear-gradient(to right bottom, #10a4eb, #0041b1);
  z-index: 999999;
}

.close_menu {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #10a4eb;
  color: #fff;
  border-radius: 50%;
  border: 0;
  transform: translate(10px, 10px);
  cursor: pointer;
}

.close_menu:hover {
  background: #fff;
  color: #0994e8;
}

.close_menu:focus {
  box-shadow: 0;
  outline: 0;
}

.sideMenu ul {
  padding: 40px 0px;
  margin-top: 50px;
}
.sideMenu ul li {
  text-align: right;
}
.sideMenu ul li a {
  padding: 0 70px 0 20px;
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  font-family: "Open sans", sans-serif;
  color: #fff;
  cursor: pointer;
  transition: all linear 0.2s;
}

.sideMenu ul li.white a,
.sideMenu ul li a:hover {
  background: #fff;
  display: block;
  color: #10a4eb;
  font-size: 22px;
}

/*=================================
		    second page css
===================================*/
.secondPage_left {
  background: #fafafa;
  padding: 60px 0 80px 0;
  font-family: "Open sans", sans-serif;
}

.secondPage_left .container {
  position: relative;
  padding: 0 !important;
  margin-top: 0 !important;
  background-color: transparent !important;
}

.left_location_title li {
  display: inline-block;
  width: 48%;
}

.left_location_title li:last-child {
  text-align: right;
}

.left_location_title li h2 {
  font-size: 26px;
  color: #444;
}

.left_location_title li span {
  font-size: 16px;
  color: #444;
  margin-right: -16px;
}

.left_location_input li {
  margin-top: 15px;
}

.left_location_input .bselect-active {
  border-color: #ddd;
}

.left_location_input .bselect-default-text {
  padding-left: 63px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #999;
  font-size: 16px;
}

.left_location_input .location_icon {
  color: #74daf6;
  border-right: 1px solid #ddd;
  height: 48px;
  position: absolute;
  z-index: 1;
  top: 1px;
  line-height: 47px;
  padding-right: 8px;
  font-size: 27px;
}

#add_btn {
  cursor: pointer;
  user-select: none;
}

.left_location_input .location_icon i {
  display: inline-block;
  transform: translateX(-4px);
}

.left_location_input .bselect-active:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 18px;
  width: 12px;
  height: 12px;
  border: 1px solid transparent;
  border-color: transparent transparent transparent;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  border-left: 0;
  transform: rotate(45deg);
}

.bselect-content {
  z-index: 13;
}

.left_location_input .form-control {
  padding-left: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
  height: 49px;
  cursor: pointer;
  outline: 0;
  border-color: #ddd;
  color: #999;
}

.form-control::placeholder {
  color: #999;
  opacity: 1;
}

.jquery-datepicker.theme-light {
  z-index: 999 !important;
}

.perfect-datetimepicker tbody td.today {
  font-weight: bold;
}

#book_return {
  padding: 15px 25px;
  border-radius: 5px;
  color: #fff;
  font-family: "Open sans", sans-serif;
  font-size: 18px;
  background: #1fbfee;
  margin-top: 15px;
  cursor: pointer;
}

#book_return:hover {
  background: #0890e6;
}

.vehicle_part {
  padding-top: 60px;
}

.vehicle_part ul {
  position: relative;
}

.vehicle_part ul::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #ddd;
  content: "";
  left: 40%;
}

.vehicle_part ul::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #ddd;
  content: "";
  left: 80%;
}

.vehicle_part ul {
  border: 1px solid #ddd;
  border-radius: 5px;
}

.vehicle_part ul li {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
}
.vehicle_part .info {
  border: 0;
  position: static;
}
.vehicle_part .info li {
  display: block;
  width: 96% !important;
  margin: 7px 0;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  font-family: "Open sans", sans-serif;
  font-size: 18px;
  color: #999;
}
.vehicle_part [class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  margin-left: 0;
}

.second-icon {
  background: #1cbee9;
  width: 45px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  margin-right: 10px;
}

.bselect-list li.elipsis {
  font-size: 16px;
}

.vehicle_part ul li:nth-child(1) {
  width: 40%;
}

.vehicle_part ul li:nth-child(2) {
  width: 40%;
}

.vehicle_part ul li:nth-child(3) {
  width: 18%;
}

.content-4 {
  padding: 17px 10px;
}

.content-4 h3 {
  font-size: 20px;
}

.vehicle_part .money {
  font-size: 25px;
  color: #222;
  text-align: center;
  display: block;
}

.main:hover,
.main.active {
  background: #1fbfee;
}

.main:hover ul:before,
.main.active ul:before {
  background: #44caf0 !important;
}

.main:hover:after,
.main.active:after {
  background: #44caf0;
}

.main:hover .money,
.main.active .money {
  color: #fff;
}

.main:hover h3,
.main.active h3 {
  color: #fff;
}

.main:hover,
.main.active {
  box-shadow: 0 10px 20px rgba(68, 202, 240, 0.2);
  border-color: #44caf0;
}

.vehicleTitle {
  color: #444;
  font-size: 26px;
  padding-bottom: 0;
}
.pos_rel {
  position: relative;
}
.customBar {
  width: 90px;
  height: calc(100% + 60px);
  position: sticky;
  top: 70px;
  left: 0;
  text-align: center;
}

.bar {
  width: 10px;
  height: 100%;
  border: 1px solid #ddd;
  background: transparent;
  transform: translate(39px, -117px);
  border-radius: 18px;
  z-index: -1;
  position: relative;
  overflow: hidden;
}

.bar_line {
  width: 101%;
  height: 100px;
  background: #1fbfee;
  z-index: 2;
  position: absolute;
  overflow: hidden;
}

.start_point [class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  margin-left: 0;
}

.end_point [class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  margin-left: 0;
}
.start_point {
  background: #1fbfee;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-size: 27px;
  color: #fff;
  transform: translateY(5px);
  position: relative;
}

.start_point::after {
  width: 120%;
  height: 120%;
  position: absolute;
  content: "";
  background: transparent;
  border: 1px dotted #1fbfee;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.end_point::after {
  width: 120%;
  height: 120%;
  position: absolute;
  content: "";
  background: transparent;
  border: 1px dotted #1fbfee;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.end_point {
  background: #1fbfee;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-size: 27px;
  color: #fff;
  transform: translateY(-20px);
  position: absolute;
  top: 580px;
  left: 14px;
}

/* second page map part */

.sideMap_part {
  border-radius: 5px;
  padding: 20px !important;
  position: unset !important;
  background: #fff !important;
  box-shadow: 0 0 30px rgba(171, 171, 171, 0.05);
}

.mini_map {
  position: relative;
}

.mini_map .venobox {
  width: 100%;
  border-radius: 5px;
  margin: 0 !important;
  height: 312px !important;
  border: 2px solid #ddd;
}

.list_direction {
  position: relative;
}

.list_direction::after {
  position: absolute;
  content: "";
  left: 12px;
  top: 8px;
  width: 1px;
  background: #1fbfee;
  height: 85%;
  z-index: 0;
}

.list_direction li {
  padding-bottom: 30px;
}
.list_direction li h4 {
  font-family: "Open sans", sans-serif;
  color: #1fbfee;
  font-size: 20px;
  position: relative;
  z-index: 11;
}

.list_direction li h4 span {
  background: #1fbfee;
  color: #fff;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 26px;
  font-size: 13px;
  border-radius: 50%;
  margin-right: 15px;
}
.list_direction p {
  font-size: 16px;
  color: #444;
  font-family: "Open sans", sans-serif;
  margin-left: 41px;
}
.list_direction .fa-check {
  height: 100%;
  display: flex;
  color: transparent;
  align-items: center;
  justify-content: center;
}
.list_direction .fa-check.active {
  color: #fff;
}

.sm_info {
  color: #1fbfee;
  font-size: 18px;
  margin-right: 22px;
  float: right;
}
.sm_info i {
  font-size: 16px;
}

.map_footer h4 {
  font-size: 18px;
  font-family: "Open sans", sans-serif;
  color: #444;
  text-align: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 16px 0;
  margin-top: 15px;
}

.map_footer ul li {
  display: inline-block;
  width: 48%;
  color: #222;
  font-family: "Open sans", sans-serif;
}

.map_footer ul li:last-child {
  text-align: right;
  margin-top: 15px;
}

.ms {
  font-size: 18px;
}
.mo {
  font-size: 34px;
}

.tr {
  font-size: 16px;
  color: #999;
}

.t {
  color: #222;
  font-size: 18px;
  font-family: "Open sans", sans-serif;
}

/* fixed vehicle info */
.fixedinfo {
  height: 88px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background: #222;
  display: none;
}

.fixedinfo ul.f_logo {
  display: flex;
  justify-content: space-between;
  padding: 5px 40px;
  max-width: 320px;
  margin: 0 auto;
}

.fixedinfo ul.f_logo li {
  color: #fff;
  font-size: 14px;
}
.fixedinfo ul.f_text {
  display: flex;
  justify-content: center;
  padding-bottom: 5px;
}

.fixedinfo ul.f_text li {
  color: #fff;
  padding: 0 15px;
  vertical-align: middle;
}

.fixedinfo ul.f_text li:first-child span {
  padding: 0 15px;
  text-align: center;
}
.fixedinfo ul.f_text li:first-child span:first-child {
  font-size: 26px;
  margin-right: 20px;
}
.time {
  font-size: 26px;
  font-family: "Open sans";
}

/*=============================
   Sign Up part
=============================*/

.sign_up_part {
  height: 100vh;
  display: flex;
  width: 100%;
  align-items: center;
}

.sign_up_part .container {
  background: #fff;
  padding: 80px 40px;
  opacity: 0;
  position: relative;
  border-radius: 5px;
}

.close_sup {
  position: absolute;
  right: 40px;
  top: 40px;
  cursor: pointer;
}

.list-group-item {
  text-align: center;
}

.list-group-item:first-child {
  border-radius: 0;
}

.sign_btn:hover {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.sign_up_part .form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.sign_up_part .tab-content > .active {
  padding: 40px 0;
}

.sign_up_part .form-control {
  padding: 0.375rem 0.75rem;
}

.sign_up_part .container {
  max-width: 600px;
}

.pos_rel {
  padding: 0;
}

.autocompleteWapper .ui-icon {
  height: 50px;
}
.datetimeWapper .span-datetime-input {
  width: 100%;
}
.datetimeWapper .ui-input,
.autocompleteWapper .ui-input {
  padding-left: 63px !important;
}
.autocompleteWapper .ui-icon-substract {
  margin-top: -22px;
}
.input_holder .timeline {
  margin: 0;
}
.input_holder .timeline .timeline-inverted {
  margin: 0;
}