/* Custom towlos */
/* Grid */
.grid-2-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Svg sprite icons */
.svg-icon {
width: 24px;
height: 24px;
color: var(--blue);
}
.svg-icon-sm {
width: 16px;
height: 16px;
color: var(--blue);
}
.svg-icon-md {
width: 20px;
height: 20px;
color: var(--blue);
}
.svg-icon-18 {
width: 18px;
height: 18px;
}
.svg-icon-hover use:nth-child(2) {
display: none;
}
.svg-icon-hover:hover use:nth-child(2) {
display: initial;
}
.svg-icon-hover:hover use:first-child {
display: none;
}
@media (max-width: 767px) {
.svg-icon-mobile-sm {
width: 16px;
height: 16px;
}
.svg-icon-mobile-md {
width: 20px;
height: 20px;
}
}
/* Login signup */
.divide-line-through {
display: flex;
align-items: center;
text-align: center;
color: var(--blue-50);
}
.divide-line-through::before, .divide-line-through::after {
content: '';
flex: 1 1 auto; /* the first digint is 'flex-grow: 1', helps elemet to occupy all free space */
border-bottom: solid 1px var(--blue-50);
}
/* New nav */
#navbarNavDropdown{
position: absolute;
width: 275px;
right: 10px;
top: 50px;
z-index: 10;
}
/*
#navbarNavDropdown::after {
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 7px solid #fff;
content: "";
display: inline-block;
right: 25%;
position: absolute;
top: -7px;
margin-left: 0;
}
*/
#navbarNavDropdown.collapsing {
height: auto;
overflow: auto;
transition: none;
}
#navbarNavDropdown .navbar-nav {
background-color: #fff;
padding: 15px 20px;
border-radius: 0.25rem;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.175);
}
.navbar-nav-header .navbar-nav .nav-item {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01rem;
font-family: "Geist", sans-serif;
}
.navbar-nav-header .navbar-nav .nav-item .nav-link {
color: var(--blue);
}
.navbar-nav-header .navbar-nav .nav-item .nav-link:hover {
color: var(--red);
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn {
background-color: var(--red);
color: #fff;
border-radius: 8px;
padding: 8px 12px;
display: inline-flex;
margin: 0.4rem 0;
width: 100%;
text-decoration: none;
border: 1px solid var(--red);
align-items: center;
justify-content: space-between;
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn i {
font-size: 16px;
margin-top: 0;
vertical-align: middle;
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn i.float-start {
margin-right: 12px;
margin-top: 3px;
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn i.float-end {
margin-left: 12px;
margin-top: 2px;
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn-blue {
background-color: var(--blue);
border-color: var(--blue);
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn-teal {
background-color: var(--teal);
border-color: var(--teal);
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn-current {
background-color: transparent;
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn-teal.nav-btn-current {
color: var(--teal)
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn-blue.nav-btn-current {
color: var(--blue)
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn-current i {
display: none;
}
.navbar-nav-header .navbar-nav .nav-item .nav-btn-outline {
border: 2px solid var(--red);
background: #fff;
color: var(--blue);
}
.nav-btn-height-spacer {
height: 30px;
}
#navbarNavUserMode .nav-item .nav-btn {
height: 36px;
font-size: 13px;
font-weight: 700;
line-height: 36px;
padding: 0 10px;
display: inline-flex;
align-items: center;
margin: 0 0.6rem 0 0;
justify-content: space-between;
}
#navbarNavUserMode .nav-item .nav-btn-outline {
background: linear-gradient(to left, transparent 50%, #ef5455 50%) right;
background-size: 200%;
transition: 100ms ease-in;
}
#navbarNavUserMode .nav-item .nav-btn-outline:hover {
background-position: left;
}
#navbarNavUserMode .nav-item .nav-btn-outline-white {
background: transparent;
transition: none;
color: #fff;
border-color: #fff;
}
#navbarNavUserMode .nav-item .nav-btn-outline-blue {
background: transparent;
transition: none;
color: var(--blue);
border-color: var(--blue);
}
#pop-nav-rentals .nav-listing-group:last-child {
margin-bottom: 0 !important;
}
.pop-nav-rentals i {
width: 14px;
height: 14px;
}
.pop-nav-rentals i.icon-circle-pulsing {
width: 12px;
height: 12px;
}
i.nav-icon-checkmark {
background-image: url('../img-towlos/svg/checkmark-blue-sm.svg');
background-size: contain;
background-repeat: no-repeat;
width: 14px;
height: 14px;
display: inline-block;
}
.show-white i.nav-icon-checkmark {
background-image: url('../img-towlos/svg/checkmark-white.svg');
}
i.nav-icon-calendar {
background-image: url('../img-towlos/svg/calendar-blue.svg');
background-size: contain;
background-repeat: no-repeat;
width: 14px;
height: 14px;
display: inline-block;
}
.show-white i.nav-icon-calendar {
background-image: url('../img-towlos/svg/calendar-white.svg');
}
i.nav-icon-lightning {
background-image: url('../img-towlos/svg/lightning-blue-alt.svg');
background-size: contain;
background-repeat: no-repeat;
width: 14px;
height: 14px;
display: inline-block;
}
.show-white i.nav-icon-lightning {
background-image: url('../img-towlos/svg/lightning-white.svg');
}
i.nav-icon-plus {
background-image: url('../img-towlos/svg/plus-blue-md.svg');
background-size: contain;
background-repeat: no-repeat;
width: 14px;
height: 14px;
display: inline-block;
}
.show-white i.nav-icon-plus {
background-image: url('../img-towlos/svg/plus-white-md.svg');
}
i.nav-icon-right-arrow {
background-image: url('../img-towlos/svg/arrow-right-blue-corners.svg');
background-size: contain;
background-repeat: no-repeat;
width: 8px;
height: 14px;
display: inline-block;
}
.show-white i.nav-icon-right-arrow {
background-image: url('../img-towlos/svg/arrow-right-white-corners.svg');
}
#navbarNavUserMode .nav-item .nav-btn.pop-shown {
background: #fff;
color: var(--blue);
}
#navbarNavUserMode .nav-item .nav-btn-outline-white.pop-shown i.nav-icon-checkmark {
background-image: url('../img-towlos/svg/checkmark-blue-sm.svg');
}
#navbarNavUserMode .nav-item .nav-btn-outline-white.pop-shown i.nav-icon-calendar {
background-image: url('../img-towlos/svg/calendar-blue.svg');
}
#navbarNavUserMode .nav-item .nav-btn-outline-white.pop-shown i.nav-icon-right-arrow {
background-image: url('../img-towlos/svg/arrow-right-blue-md.svg');
}
#navbarNavUserMode .nav-item .nav-btn-outline-white.pop-shown i.nav-icon-lightning {
background-image: url('../img-towlos/svg/lightning-blue-alt.svg');
}
#navbarNavUserMode .nav-item .nav-btn-outline-white.pop-shown i.nav-icon-right-arrow {
background-image: url('../img-towlos/svg/arrow-right-blue-md.svg');
}
#navbarNavUserMode .nav-item .nav-btn-outline-white.pop-shown i.nav-icon-right-arrow {
background-image: url('../img-towlos/svg/arrow-right-blue-md.svg');
}
#navbarNavUserMode .nav-item .nav-btn-outline-white.pop-shown i.icon-circle-pulsing:after,
#navbarNavUserMode .nav-item .nav-btn-outline-white.pop-shown i.icon-circle-pulsing:before {
background-color: var(--blue);
}
@media (max-width: 575px) {
#pop-nav-rentals {
top: 48px !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: 100% !important;
margin: 0 11px !important;
transform: none !important;
}
}
.nav-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100vw;
height: 100vh;
background: rgba(43, 50, 82, 0.50);
}
.nav-backdrop.fade {
opacity: 0;
}
.nav-backdrop.show {
opacity: 1;
display: block;
z-index: 10;
}
body.nav-pop-open .nav-backdrop {
opacity: 1;
display: block;
z-index: 10;
}
body.datepicker-open:not(.page-account-booking) .nav-backdrop {
opacity: 1;
display: block;
z-index: 10;
}
body.datepicker-open .listing-booking-date {
z-index: 11;
}
body.datepicker-open .search-form {
z-index: 11;
}
body.location-open .nav-backdrop {
opacity: 1;
display: block;
}
body.location-open .listing-booking-date {
z-index: 11;
}
body.location-open .search-form {
z-index: 11;
}
/* @media (min-width: 576px) {
body.datepicker-open .nav-menuzord {
z-index: initial;
}
body.location-open .nav-menuzord {
z-index: initial;
}
} */
.navbar-close-icon {
width: 1.5em;
height: 1.5em;
background-image: url('data:image/svg+xml,');
background-size: 90%;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
background-clip: content-box;
padding: 3px;
}
.navbar-close-icon-white {
background-image: url('data:image/svg+xml,');
}
.navbar-brand img {
height: 30px;
width: auto;
}
.navbar-brand span {
display: inline;
}
.flex-grow-1 .navbar-brand {
display: inline-flex;
}
/* add another overlay for just the menu area */
.nav-pop-open .nav-menuzord:not(.nav-menuzord-transparent)::before {
background: rgba(43, 50, 82, 0.50);
content: ' ';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
}
@media (max-width: 991px) {
.nav-menuzord .container {
max-width: 900px;
}
.home-banner .container {
max-width: 900px;
}
}
@media (max-width: 768px) {
.navbar-nav-header {
top: 64px;
}
.menuzord .showhide {
display: none !important;
}
}
@media (max-width: 575px) {
#navbarNavDropdown {
left: 10px;
right: auto;
width: calc(100% - 20px);
}
#navbarNavDropdown::after {
left: 7%;
right: auto;
}
}
@media (max-width: 320px) {
.nav-menuzord .container {
gap: 0.3rem !important;
}
.navbar .navbar-toggler {
padding-left: 0 !important;
}
}
/* Nav */
.toast {
z-index: 10001;
}
.menuzord a.nav-btn {
min-width: 100px;
height: 40px;
line-height: 40px;
padding: 0 10px;
display: inline-flex;
align-items: center;
margin: 0.3rem 0 0.3rem 0;
border: solid 2px #ef5455;
border-radius: 5px;
gap: 10px;
/*
height: 30px;
border: solid 1px #ef5455;
border-radius: 5px;
line-height: 30px;
padding: 0 9px;
letter-spacing: 0.01rem;
gap: 6px;
font-size: 12px;
font-weight: 500;
*/
display: inline-flex;
background: linear-gradient(to left, transparent 50%, #ef5455 50%) right;
background-size: 200%;
transition: 100ms ease-in;
color: var(--blue);
align-items: center;
}
.menuzord a.nav-btn:hover {
background-position: left;
}
.menuzord a.nav-btn-blue {
background: var(--blue);
border: solid 1px var(--blue);
color: #fff;
}
.menuzord a.nav-btn-blue:hover {
background: var(--blue);
border: solid 1px var(--blue);
color: #fff;
}
.menuzord-menu > li > a.nav-text{
text-decoration: none;
position: relative;
}
.menuzord-menu > li > a.nav-text:after {
position: absolute;
content: '';
height: 3px;
bottom: 22%;
margin: 0 auto;
left: 0;
right: 0;
width: 50%;
background-color: none;
transition:.2s;
border-radius: 10px;
}
.menuzord-menu> li > a.nav-text:hover:after {
width: 80%;
background: #ef5455;
}
.menuzord-menu> li > a.nav-text:hover:after {
width: 80%;
background: #ef5455;
}
@media (max-width: 768px) {
.menuzord-menu > li > a.nav-text:after {
display: none;
}
.menuzord-menu {
display: none; /* start hidden on mobile*/
}
}
.show-white {
display: none;
}
.show-color {
display: block;
}
.nav-menuzord-transparent {
padding-bottom: 0;
}
.nav-menuzord-transparent .show-white {
display: block;
}
.nav-menuzord-transparent .show-color {
display: none;
}
.nav-menuzord-transparent.navbar-sticky .show-white {
display: none;
}
.nav-menuzord-transparent.navbar-sticky .show-color {
display: block;
}
.menuzord a.nav-icon {
display: inline-block;
}
.nav-icon img {
width: 30px;
height: 30px;
}
.profile-icon-upload {
border: 3px solid #999;
background: #fff;
}
.border-blue {
border-color: #2a3151 !important;
}
.btn-blue {
background-color: #2a3151;
border-color: #2a3151;
color: #fff;
}
.btn-blue:hover {
color: #fff;
}
.navbar-subnav {
padding: 0.75rem 0;
}
.subnav a:hover, .subnav a:active {
text-decoration: none;;
}
.subnav-item {
position: relative;
min-width: 130px;
text-align: center;
}
.subnav-item.active {
font-weight: 900;
font-size: 18px !important;
}
.subnav-item.active:after {
content: '';
display: block;
width: 100%;
height: 4px;
border-radius: 4px;
background: #fff;
position: absolute;
bottom: 0;
left: 0;
}
.navbar-ee-btn {
position: absolute;
left: 30px;
background: transparent;
border: 0;
padding: 0;
margin: 0;
z-index: 1;
}
.navbar-ee-btn:focus {
outline: 0;
}
.navbar-ee-btn img {
height: 14px;
width: auto;
}
@media (max-width: 768px) {
.page-search .nav-menuzord .container-fluid {
gap: 4px !important;
}
.subnav {
padding: 0 !important;
}
.subnav .subnav-item {
padding: 0.2rem !important;
}
.subnav .subnav-item {
font-weight: bold !important;
}
.subnav a.subnav-item:not(.active) {
display: none;
}
.subnav a.subnav-item.active:after {
display: none;
}
.navbar-ee-btn {
left: 20px;
}
.navbar-ee-btn img {
height: 10px;
width: auto;
}
.subnav-back {
left: auto;
right: 12px;
}
.subnav-back svg {
margin-right: 0 !important;
width: 19px !important;
height: 19px !important;
}
.subnav .subnav-item.active {
font-size: 16px !important;
}
.subnav .subnav-item.active:after {
display: none;
}
}
.subnav-back {
left: auto;
right: 12px;
}
@media (min-width: 769px) and (max-width: 1000px) {
.nav-menuzord > .container {
max-width: 100%;
}
.menuzord-menu > li > a {
font-size: 15px;
}
}
@media (max-width: 768px) {
.menuzord-responsive.menuzord {
padding: 0;
padding-top: 5px;
}
.menuzord-responsive .menuzord-menu > li {
border-bottom: solid 1px #f0f0f0;
}
.menuzord-responsive .menuzord-menu > li:first-child > a,
.menuzord-responsive .menuzord-menu > li.nav-btn > a {
margin-top: -2px;
background: #ef5455;
border-radius: 0;
color: #fff;
}
.menuzord-responsive .menuzord-menu > li > a {
border-bottom: 0;
}
.menuzord-responsive .menuzord-menu ul.dropdown li:first-of-type a {
border-top: solid 1px #f0f0f0;
}
}
.menuzord a {
-o-transition: none;
-moz-transition: none;
-webkit-transition: none;
transition: none;
}
/* Fonts */
.altfont {
font-family: 'Merriweather', serif;
}
.fa-xl {
font-size: 1.73333em;
line-height: .75em;
vertical-align: -0.0667em;
}
.fa-xxl {
font-size: 2.33333em;
line-height: .75em;
vertical-align: -0.0667em;
}
.tracking-tighter {
letter-spacing: -0.035em;
}
.tracking-tight {
letter-spacing: -0.01em;
}
.tracking-normal {
letter-spacing: 0em;
}
.tracking-wide {
letter-spacing: 0.01em;
}
.tracking-wider {
letter-spacing: 0.035em;
}
.tracking-widest {
letter-spacing: 0.75em;
}
/* Misc */
.video_iframe_6x4 {
width: 100%;
height: 0;
padding-bottom: 66.66666666666666%;
position: relative;
}
.video_iframe_16x9 {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.video_iframe_6x3 {
width: 100%;
height: 0;
padding-bottom: 50%;
position: relative;
}
.video_iframe_6x4 iframe, .video_iframe_16x9 iframe, .video_iframe_6x3 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.search-layout .form-group {
background: #fff;
border-radius: 5px;
}
.search-layout .input-group-text {
padding: 0.6rem 0 0 0;
background: none;
font-size: 13px;
border: 0;
box-shadow: none;
text-align: left;
}
.search-layout .form-control {
padding: 0.2rem 0 0.4rem 0;
border: 0;
box-shadow: none;
}
.search-layout .search-submit {
padding-right: 0.4rem !important;
padding-left: 0.4rem !important;
}
.search-layout .location-find {
padding-top: 0.2rem;
}
.search-layout .search-date {
cursor: pointer;
}
.account-alerts .alert:not(:first-child) {
margin-top: 6px;
}
@media (max-width: 767px) {
.account-alerts .alert .btn {
width: 100%;
}
}
.dt_group {
display: flex;
align-items: center;
height: 100%;
}
.dt_group i {
margin: 0 0.6em;
}
.dt_date {
font-size: 15px;
font-weight: 900;
padding-right: 0.4em;
}
.dt_time {
font-size: 12px;
font-weight: 700;
}
.dt_date_from {
display: flex;
align-items: center;
}
.dt_date_until {
display: flex;
align-items: center;
}
.dt_empty {
font-size: 15px;
color: var(--muted);
}
.dt_group_vertical {
display: block;
}
.dt_group_vertical .dt_date_from {
display: block;
}
.dt_group_vertical .dt_date_from span {
display: block;
}
.dt_group_vertical .dt_date_until {
display: block;
}
.dt_group_vertical .dt_date_until span {
display: block;
}
.search-form .dt_empty {
display: flex;
}
/* search date time inputs not visible */
.search-layout input.search-datetime,
.date-horizontal-layout input.search-datetime,
.search-form input.search-datetime {
width: 100%;
max-width: 100%;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
appearance: none;
/* min-width: 180px;
max-width: 180px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.4rem center;
background-size: 18px 14px; */
}
.location-find {
cursor: pointer;
}
.location-nearme {
position: absolute;
top: 2px;
left: 0px;
z-index: 1;
font-family: 'Geist', serif;
min-width: 110px;
text-align: left;
background: var(--blue);
border-radius: 5px !important;
}
.location-nearme i {
margin-left: 5px;
float: right;
}
.location-typed {
border-right: 0;
}
.search-layout .search-submit {
z-index: 1;
}
@media (max-width: 767px) {
.pop-filter .search-layout .form-group {
margin-bottom: 0;
}
.pop-filter .search-layout {
margin-right: calc(var(--bs-gutter-x)* -1);
margin-left: calc(var(--bs-gutter-x)* -1);
}
.pop-filter .search-layout .search-submit {
width: 100%;
}
.pop-filter .search-layout .search-input {
border: 1px solid var(--grey);
border-radius: 6px;
padding: 0rem 0.5rem;
margin-bottom: 0;
}
.pop-filter .search-layout .border-start {
border-left: 0 !important;
}
}
@media (max-width: 700px) {
.search-layout .dt_group .dt_date,
.search-layout .dt_group .dt_time {
letter-spacing: -0.03em;
}
}
@media (min-width: 576px) and (max-width: 700px) {
.search-layout .dt_group i {
margin: 0 0.2em;
}
}
@media (max-width: 575px) {
.search-layout .search-submit {
width: 100%;
}
.search-layout .search-input {
border: 1px solid var(--grey);
border-radius: 6px;
padding: 0rem 0.5rem;
}
.search-layout .search-submit {
margin-top: 0.6rem;
}
.search-layout .border-start {
border-left: 0 !important;
}
.daterangepicker {
padding-top: 14px;
}
.daterangepicker .drp-buttons {
position: absolute;
width: 100%;
left: 0;
top: 0;
border-top: 0;
padding-bottom: 0;
}
.daterangepicker .drp-buttons .cancelBtn {
float: left;
}
.daterangepicker .drp-buttons .applyBtn {
float: right;
}
.daterangepicker .drp-selected {
display: none;
}
}
.scroll-container-parent-shadow {
box-shadow:
inset 0px 8px 6px -8px rgba(0, 0, 0, 0.3),
inset 0px -8px 6px -8px rgba(0, 0, 0, 0.3);
}
.scroll-container {
height: 240px; /* Set a fixed height for the scrollable area */
overflow-y: auto;
/* Apply the mask image */
mask-image: linear-gradient(
to bottom,
transparent, /* Top fade */
black 6px, /* Solid part starts after 6px */
black calc(100% - 6px), /* Solid part ends 6px from bottom */
transparent /* Bottom fade */
);
/* Optional: Add padding to prevent content from being fully masked */
padding-bottom: 6px;
padding-top: 6px;
}
/* Adjust content styling as needed */
.scroll-content {
/* Ensure content takes up space */
min-height: 241px; /* Example: slightly more than container height to ensure scrolling */
}
button.badge {
outline: 0;
-webkit-appearance: none;
border: 0;
}
.img-30 img {
width: 30px;
height: 30px;
-o-object-fit: cover;
object-fit: cover;
}
.img-40 img {
width: 40px;
height: 40px;
-o-object-fit: cover;
object-fit: cover;
}
.img-50 img {
width: 50px;
height: 50px;
-o-object-fit: cover;
object-fit: cover;
}
.img-60 img {
width: 60px;
height: 60px;
-o-object-fit: cover;
object-fit: cover;
}
.img-60-40 img {
width: 60px;
height: 40px;
-o-object-fit: cover;
object-fit: cover;
}
.img-60-45 img {
width: 60px;
height: 45px;
-o-object-fit: cover;
object-fit: cover;
}
.img-260-180 img {
width: 280px;
height: 180px;
-o-object-fit: cover;
object-fit: cover;
}
.img-96-60 img {
width: 96px;
height: 60px;
-o-object-fit: cover;
object-fit: cover;
}
.img-80 img {
width: 80px;
height: 80px;
-o-object-fit: cover;
object-fit: cover;
}
.img-100 img {
width: 100px;
height: 100px;
-o-object-fit: cover;
object-fit: cover;
}
.img-110 img {
width: 110px;
height: 110px;
-o-object-fit: cover;
object-fit: cover;
}
.img-120 img {
width: 120px;
height: 120px;
-o-object-fit: cover;
object-fit: cover;
}
.img-130 img {
width: 130px;
height: 130px;
-o-object-fit: cover;
object-fit: cover;
}
.img-fullwidth img {
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.btn-xs {
padding: 1px 4px;
height: auto;
line-height: 1.3em;
}
.btn-alert-inline {
padding: 3px 8px;
height: auto;
line-height: 1.3em;
margin: 4px 0;
}
.toast .btn-close {
background-size: 1.4em;
flex-shrink: 0;
}
.toast.text-white .toast-body a {
color: #fff;
text-decoration: underline;
}
.alert .btn-close {
background-size: 1.4em;
}
.alert .btn-close {
opacity: 1;;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
margin: auto;
top: 0;
right: 0;
bottom: 0;
}
.alert .btn-close-alert {
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
img.arrow {
width: 21.2px;
height: 21.2px;
margin: 3px 0 4.8px 207px;
object-fit: contain;
}
.btn-sm img.arrow {
height: 16px;
width: 16px;
}
.tooltip-info .tooltip-inner {
background-color: var(--bs-info);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.tooltip-info .tooltip-arrow::before {
border-color: var(--bs-info) !important;
}
.tooltip-info.show {
opacity: 1;
}
.triangle-yellow {
position: absolute;
right: 6px;
bottom: 6px;
height: 28px;
}
.photo-corners-triangle {
border-radius: 20px;
border-bottom-right-radius: 0;
}
.bar-blue {
position: absolute;
left: -28px;
top: 20px;
height: 15px;
}
.bar-red {
position: absolute;
left: -28px;
top: 50px;
height: 15px;
}
.color-red {
color: #ef5455;
}
.color-blue {
color: #2a3151;
}
.color-yellow {
color: #f9d643;
}
.btn i.fa, .btn i.fas {
vertical-align: middle;
}
.heading-underline {
position: relative;
display: inline-block;
}
.heading-underline:after {
content:"";
background:#f9d643;
width:110%;
height:20px;
border-radius: 30px;
left: -5%;
position: absolute;
z-index: -1;
bottom: -4px;
}
.heading-thinline {
position: relative;
}
.heading-thinline span {
background: #fff;
display:inline-block;
}
.heading-thinline span.thinline-title {
padding-right: 10px;
}
.heading-thinline span.thinline-detail {
padding-left: 10px;
font-size: 14px;
color: #888;
line-height: 36px;
}
.heading-thinline:after {
content:"";
background:#bbb;
width:100%;
height:1px;
border-radius: 30px;
left: 0;
position: absolute;
z-index: -1;
top: 52%;
}
.inputs-group-sm .form-control {
padding: 0.45rem 0.7rem;
}
.inputs-group-sm .btn {
padding: 0.45rem 0.7rem;
}
.form-control-alt {
}
/* Mobile friendly inputs for all fields */
@media (max-width: 767px) {
.heading-thinline span.thinline-detail {
line-height: 24px;
}
}
@media (max-width: 575px) {
.form-control {
font-size: 16px;
padding: 8px 10px;
}
.form-control-sm {
padding: 5px 10px;
}
.select-default:not(.select-sm):not(.select-xs) .selectric .label {
font-size: 16px;
padding: 8px 10px;
}
.form-select {
font-size: 16px;
padding-top: 8px;
padding-left: 10px;
padding-bottom: 8px;
}
}
/* Cards */
.card-tab {
border: 2px solid #2a3151;
border-radius: 30px;
border-bottom-right-radius: 0;
}
.card-tab .card-body {
padding: 0.6rem;
}
.card-tab img.card-img-top {
border-radius: 24px;
border-bottom-right-radius: 0;
}
.card-tab a {
display: block;
}
.card-tab h4 {
font-size: 1.1rem;
margin: 0;
}
.card-tab h4 i {
line-height: 1.1rem;
}
.card-tab-overlay {
border-width: 0;
}
.card-tab-overlay-gradient {
background-image: linear-gradient(to bottom, #ef5454, #2a3151);
position: absolute;
opacity: 0.25;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 24px;
}
.card-tab-overlay h4 {
color: #fff;
font-size: 1.6rem;
position: absolute;
top: 45%;
width: 100%;
display: block;
text-align:center;
}
.card-tab-overlay h4 a {
color: #fff;
}
/* Search */
.rating-box {
position: relative;
vertical-align: middle;
display: inline-block;
margin-right: 0;
font-size: 0.625rem;
color: #f7c54e;
letter-spacing: 0.1rem;
}
.rating-box:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f005 \f005 \f005 \f005 \f005";
}
.rating-box .rating {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
}
.rating-box .rating:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005 \f005 \f005 \f005 \f005";
}
.badge .rating-box {
color: #2b3252;
}
.card .rating-number {
font-size: 0.7rem;
padding: 0 0.2rem 0 0;
display: inline-block;
vertical-align: text-bottom;
z-index: 3;
}
.card .card-img-overlay-link {
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
display: block;
z-index: 2;
text-decoration: none;
}
.card-listing {
box-shadow: 0px 1px 5px 0px rgba(150, 150, 150, 0.1);
margin-bottom: 20px;
}
.card-listing .card-img-overlay-bg-img {
height: 150px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.card .card-img-overlay-transparent {
padding: 12px 12px;
background-color: transparent !important;
}
.card .card-img-overlay .rounded-pill {
opacity: 0.8;
}
.card .card-img-overlay .btn-like {
position: absolute;
top: 8px;
right: 8px;
padding: 8px;
}
.card .card-img-overlay .btn-like i.far {
color: #e5e5e5;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);;
}
.card .card-img-overlay .btn-like i.fas {
color: #ef5455;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
.card .card-img-overlay .listing-host {
position: absolute;
bottom: 15px;
right: 15px;
z-index: 3;
}
.card .badge .listing-price {
display: inline-block;
}
.card-listing .listing-title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.rounded-20 {
border-radius: 20px;
}
.card .rating-box {
font-size: 0.565rem;
letter-spacing: 0;
}
/* Edit Listing */
.card-collapse .card-collapse-toggle {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding-right: 60px;
cursor: pointer;
box-shadow: none;
outline: none;
border: none;
background: transparent;
text-align: left;
}
.card-collapse .card-collapse-toggle::after {
background-image: url('../img-towlos/svg/caret-down.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
width: 16px;
height: 16px;
position: absolute;
right: 28px;
content: '';
transition: transform 0.2s ease-in-out;
flex-shrink: 0;
flex-grow: 0;
}
.card-collapse-toggle:not(.collapsed)::after {
transform: rotate(-180deg);
}
.listing-save {
position: sticky;
bottom: 0;
right: 0;
left: 0;
z-index: 3;
width: 100%;
}
.listingPhotos .group-listing-photo:first-of-type img {
border: 5px solid var(--blue-alt);
}
.listingPhotos .group-listing-photo:first-of-type::before {
content: "Featured Photo";
position: absolute;
top: -24px;
left: 0;
left: 50%;
transform: translate(-50%, 0);
text-align: center;
color: var(--blue-alt);
font-size: 12px;
font-weight: 500;
z-index: 1;
overflow:visible;
text-wrap: nowrap;
}
@media (min-width: 1200px) {
.listingPhotos .group-listing-photo:first-of-type::before {
font-size: 14px;
}
}
/* Listing page */
.listing-intro-parts {
font-size: 20px;
}
.listing-intro-part-one {
font-size: 20px;
font-weight: bold;
}
.listing-intro-part-two {
font-weight: bold;
}
@media (max-width: 767px) {
.listing-intro-part-one {
font-size: 20px;
}
.listing-intro-part-two {
font-size: 16px;
font-weight: normal
}
.listing-save {
font-size: 13px;
}
.listing-save button, .listing-save a {
font-size: 13px;
}
}
.dropdown-block {
position: absolute;
top: 48px;
background-color: #fff;
padding: 10px 15px;
border-radius: 0.25rem;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.175);
z-index: 3;
}
.dropdown-block::after {
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 7px solid #fff;
content: "";
display: inline-block;
left: 25%;
position: absolute;
top: -6px;
margin-left: 0;
z-index: 3;
}
.dropdown-block a:hover, .dropdown-block a:active, .dropdown-block a:focus {
background: none;
}
.dropdown-block .dropdown-item {
padding: 0.25rem 0.25rem;
}
@media (min-width: 768px) {
body.page-listing .pac-container {
width: 400px !important;
max-width: 100% !important;
right: 0 !important;
margin-left: -85px;
}
}
.listing-transport-buttons .btn:disabled{
cursor: not-allowed;
color: #aaa;
}
.input-group > :not(:first-child) .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > :first-child .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
table .media-table-sm .media-title {
white-space: normal;
}
/* expandable */
.listing-details li {
position: relative;
}
.listing-details li:nth-child(n+5) {
display: none;
}
.listing-details li:nth-child(4):after {
top: -5px;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
position: absolute;
content: "";
background: linear-gradient(rgba(255, 255, 255, 0), rgb(248, 248, 248));
}
.listing-details li:nth-child(n+5) {
display: none;
}
.listing-details.expanded li:after {
display: none;
}
.listing-details.expanded li {
display: list-item;
}
.listing-details-carousel.owl-carousel .owl-stage {
overflow: hidden;
}
.listing-details-carousel.owl-carousel .owl-item .single-item {
width: auto;
min-height: 300px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat
}
.listing-details-carousel.owl-carousel {
height: 300px;
display: block;
}
@media (max-width: 575px) {
.listing-details-carousel.owl-carousel .owl-item .single-item {
min-height: 220px;
height: 220px;
}
.listing-details-carousel.owl-carousel {
height: 220px;
}
}
.listing-review .media-img img {
width: 40px;
height: 40px;
-o-object-fit: cover;
object-fit: cover;
}
.listingReview {
display: block;
width: 100%;
line-height: 44px;
}
.listingReview li {
display: inline-block;
padding-right: 2px;
padding-left: 2px;
}
.listingReview li:first-of-type {
padding-left: 0;
}
.listingReview span {
margin-right: 20px;
}
.listingReview .rating {
margin: 0 10px 0 0;
font-size: 1.2rem;
}
.selectReview li {
cursor: pointer;
}
.listing-badge {
padding: 5px 10px;
font-size: 10px;
border-radius: 60px;
border: 1px solid rgba(43, 50, 82, 0.25);
color: var(--blue);
}
.listing-id {
padding: 5px 10px;
font-size: 10px;
color: var(--blue);
}
.listing-div {
border-left: 1px solid var(--grey);
margin-left: 10px;
padding-right: 10px;
}
.listing-features {
padding: 5px 10px;
border-radius: 10px;
border: 1px solid rgba(43, 50, 82, 0.25);
}
.listing-features > div {
flex-grow: 1;
flex-basis: 0;
}
.listing-feature {
text-align: center;
}
.listing-features .listing-div {
height: 80px;
flex-grow: 0;
}
.action-share-listing.active {
z-index: 3;
position: relative;
}
.rating-badge {
}
.listing-extras-list {
margin-top: 0;
margin-bottom: 0;
margin-left: 0.63rem !important;
margin-right: 0.63rem !important;
}
.listing-extras-list > p {
padding-top: 0.2rem;
padding-bottom: 0rem;
font-size: 13px;
line-height: 18px;
margin: 0;
font-weight: 600;
}
.listing-extras-list > p:first-of-type {
border-top: 1px solid var(--grey);
padding-top: 0.63rem !important;
}
.listing-extras-list > p:last-of-type {
padding-bottom: 0.63rem!important;
}
.listing-position-map {
position: relative;
height: 500px;
}
.listing-marker {
background: #fff;
border-radius: 50%;
border: 1px solid var(--blue);
border-radius: 10px;
padding: 4px 8px;
font-size: 18px;
font-family: 'Geist', serif;
font-style: normal;
font-weight: bold;
line-height: 100%;
text-align: center;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
}
.listing-marker.open, .listing-marker:hover, .listing-marker:focus, .listing-marker:active {
background: var(--red);
color: #fff;
border-color: var(--red);
}
.listing-marker.hover {
background: var(--red);
color: #fff;
border-color: var(--red);
}
.infoBox {
width: 320px !important;
border-radius: 0;
box-shadow: none;
height: 250px !important;
margin-top: 40px;
margin-left: -20px;
}
.listing-marker-open {
width: 320px;
height: 250px !important;
overflow: hidden;
}
.listing-marker-open .card-listing {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
}
.cluster {
font-family: "Geist", sans-serif !important;
font-style: normal !important;
font-weight: bold !important;
font-size: 18px !important;
}
.cluster div {
background: var(--blue);
}
@media (max-width: 768px) {
.extras-list .extra-image img {
width: 100% !important;
height: 130px;
object-fit: cover;
}
}
@media (max-width: 500px) {
.listing-features {
border: 0;
padding: 0 !important;
gap: 14px;
margin-top: 20px;
justify-content: start !important;
}
.listing-features .listing-div:nth-of-type(4n) {
display: none;
}
.listing-features .listing-feature {
width: 48%;
flex-grow: initial;
flex-basis: initial;
border: 1px solid var(--grey);
border-radius: 10px;
padding: 12px 12px;
display: flex;
align-items: center;
gap: 10px;
margin: 0 !important;
text-align: left;
}
.listing-features .listing-div {
border-left: 0;
display: none;
}
.listing-features .listing-feature-img {
margin: 0 !important;
}
.listing-features .listing-feature-label .badge {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 5px !important;
}
.listing-features .listing-feature-label span {
text-align: left;
}
.listing-position-map {
position: relative;
height: 300px;
}
}
@media (min-width: 501px) and (max-width: 991px) {
.listing-features .listing-div:nth-of-type(3n) {
display: none;
}
.listing-features > div.img-40 {
width: 28%;
flex-grow: initial;
flex-basis: initial;
}
.listing-features .listing-div {
flex-grow: initial;
flex-basis: initial;
}
.listing-position-map {
position: relative;
height: 350px;
}
}
/* @media (min-width:501px) and (max-width: 768px) {
.listing-features .listing-div:nth-child(4n) {
display: none;
}
} */
.rating-number {
padding: 0 0.4rem 0 0.2rem;
display: inline-block;
vertical-align: text-bottom;
z-index: 3;
}
.badge-bordered {
background: #fff;
border: 2px solid #eee;
}
.badge-circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding: 0;
text-align: center;
line-height: 25px;
}
.badge-circle-sm {
width: 22px;
height: 22px;
border-radius: 50%;
padding: 0;
text-align: center;
line-height: 23px;
}
.border-line-left-red {
position: relative;
padding-left: 30px;
}
.border-line-left-red::after {
background: var(--red);
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 100%;
content: "";
border-radius: 2px;
}
.border-line-left-blue {
position: relative;
padding-left: 30px;
}
.border-line-left-blue::after {
background: var(--blue);
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 100%;
content: "";
border-radius: 2px;
}
.border-line-bottom-red {
position: relative;
padding-bottom: 30px;
}
.border-line-bottom-red::after {
background: var(--red);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
content: "";
border-radius: 2px;
}
.border-line-bottom-red-sm {
padding-bottom: 10px;
}
.border-line-bottom-red-sm::after {
height: 6px;
}
.border-line-bottom-blue {
position: relative;
padding-bottom: 30px;
}
.border-line-bottom-blue::after {
background: var(--blue);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
content: "";
border-radius: 2px;
}
.border-line-bottom-red-md {
position: relative;
padding-bottom: 20px;
}
.border-line-bottom-red-md::after {
background: var(--red);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 8px;
content: "";
border-radius: 2px;
}
.border-line-bottom-blue-sm {
position: relative;
padding-bottom: 10px;
}
.border-line-bottom-blue-sm::after {
background: var(--blue);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
content: "";
border-radius: 2px;
}
.border-line-bottom-blue-alt-sm {
position: relative;
padding-bottom: 10px;
}
.border-line-bottom-blue-alt-sm::after {
background: var(--blue-alt);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
content: "";
border-radius: 2px;
}
@media (max-width: 767px) {
.border-line-left-red, .border-line-left-blue {
padding-left: 20px;
}
.border-line-left-red::after, .border-line-left-blue::after {
width: 7px;
}
.border-line-bottom-red, .border-line-bottom-blue {
padding-bottom: 20px;
}
.border-line-bottom-red::after, .border-line-bottom-blue::after {
height: 7px;
}
.border-line-bottom-red-md {
padding-bottom: 15px;
}
.border-line-bottom-red-md::after {
height: 6px;
}
}
.cursor-pointer {
cursor: pointer !important;
}
.cursor-default {
cursor: default !important;
}
/* Listing */
.dimensions-button {
background: var(--grey);
color: var(--blue);
}
.dimensions-button-active {
background: var(--blue);
color: #fff;
}
.dimensions-button:hover {
color: var(--blue);
}
.dimensions-button-active:hover {
color: #fff;
}
.dimensions-image {
display: flex;
align-items: center;
min-height: 160px;
}
@media (min-width: 576px) {
.dimensions-image {
min-height: 230px;
}
}
@media (min-width: 992px) {
.dimensions-btns {
width: 260px;
}
.dimensions-image {
min-height: 260px;
}
}
@media (min-width: 1200px) {
.dimensions-image {
min-height: 340px;
}
}
.listing-modal-dimensions .dimensions-btns {
width: 260px;
}
.modal-dialog-fill-screen {
/* min-height: calc(100% - 1rem);
min-width: calc(100% - 2rem); */
}
#towlos-listing-dimensions .modal-dialog-centered {
min-height: calc(100% - 1rem);
}
@media all and (max-width: 768px) {
#towlos-listing-dimensions .modal-dialog-centered {
max-width: 768px;
}
}
@media all and (orientation: portrait) and (max-width: 768px) {
#towlos-listing-dimensions {
padding-top: 1rem;
padding-bottom: 1rem;
position: fixed;
left: 0;
top: 0;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
#towlos-listing-dimensions .modal-dialog {
-webkit-transform: rotate(-90deg) translateX(-100%);
transform: rotate(-90deg) translateX(-100%);
transform-origin: 0 0;
min-width: calc(100vh - 2rem);
min-height: calc(100vw);
width: calc(100vh - 2rem);
height: calc(100vw);
max-width: calc(100vh - 2rem);
max-height: calc(100vw);
padding: 0;
}
#towlos-listing-dimensions .modal-content {
max-width: 660px;
margin: 0 auto;
}
}
.booking-side-media img {
max-width: 100%;
}
.booking-side-img {
height: 150px;
background-size: cover;
background-position: center center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.booking-side .input-group-text {
min-width: 70px;
}
.booking-pricing-per {
display: flex;
}
.booking-pricing-total {
display: flex;
}
.booking-pricing-total .badge {
margin-bottom: 2px;
}
.listing-booking-date .choose-date-empty{
color: #aaa !important;
font-weight: normal !important;
}
.listing-booking-date .choose-date {
flex-basis: 0;
flex-grow: 1;
}
.listing-booking-date .action-choose-date {
cursor: pointer;
}
.listing-booking-date .action-choose-date:hover span {
opacity: 0.85;
}
.listing-booking-date .action-choose-date:hover span {
opacity: 0.85;
}
.listing-booking-date input[type="hidden"]{
height: 0 !important;
width: 100% !important;
appearance: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
position: absolute !important;
}
.listing-booking-date .action-choose-date,
.listing-booking-date .dt-time-select {
color: var(--blue);
}
.listing-booking-date .action-choose-date {
padding-left: 0.4rem !important;
padding-right: 0.25rem !important;
}
@media (max-width: 767px) {
.listing-booking-date .dt-time-select,
.listing-booking-date .action-choose-date {
max-width: none;
}
}
.listing-booking-date .dt-time-select {
max-width: 115px;
padding-left: 0.4rem !important;
padding-right: 1.5rem !important;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%232B3252' d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 0.875rem;
padding-right: 1.75rem !important;
}
/* Listing Date Picker - Calendar */
.listing-calendar-popup {
position: absolute;
left: 0;
right: 0;
z-index: 12;
margin-top: 0;
background: #fff;
border: 1px solid var(--grey);
border-radius: 0.5rem;
}
.listing-calendar-popup .vc {
width: 100%;
min-width: 0;
}
.listing-time-hint {
position: absolute;
bottom: calc(100% + 2px);
right: -0.25rem;
z-index: 1;
background: var(--blue);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
padding: 0.3rem 0.75rem;
border-radius: 0.35rem;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.listing-time-hint::after {
content: '';
position: absolute;
bottom: -5px;
right: 1.5rem;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--blue);
}
.listing-calendar-tooltip {
position: absolute;
top: -2.2rem;
left: 50%;
transform: translateX(-50%);
z-index: 1060;
background: var(--blue);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
padding: 0.3rem 0.75rem;
border-radius: 0.35rem;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.listing-calendar-tooltip::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--blue);
}
.listing-calendar-popup .vc[data-vc="calendar"] {
outline: none;
padding-top: 0;
padding-bottom: 0.25rem;
}
.listing-calendar-popup .vc .vc-header {
padding-top: 0.5rem;
}
.listing-calendar-popup .vc-date[data-vc-date-today] .vc-date__btn {
background-color: transparent !important;
color: inherit !important;
font-weight: inherit !important;
}
/* Selected partial start - keep diagonal, selected color on open half (bottom-right) */
.listing-calendar-popup .vc-date.vc-partial-date-start[data-vc-date-selected] .vc-date__btn {
color: #888 !important;
background:
linear-gradient(
to top left,
transparent calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
),
linear-gradient(
to top left,
#f0f0f0 50%,
rgb(6 182 212) 50%
) !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat !important;
}
/* Selected partial end - keep diagonal, selected color on open half (top-left) */
.listing-calendar-popup .vc-date.vc-partial-date-end[data-vc-date-selected] .vc-date__btn {
color: #888 !important;
background:
linear-gradient(
to top left,
transparent calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
),
linear-gradient(
to top left,
rgb(6 182 212) 50%,
#f0f0f0 50%
) !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat !important;
}
/* Hovered partial start date - keep diagonal, swap open half to hover color (not when selected) */
.listing-calendar-popup .vc-date.vc-partial-date-start:not([data-vc-date-selected])[data-vc-date-hover] .vc-date__btn,
.listing-calendar-popup .vc-date.vc-partial-date-start:not([data-vc-date-selected]) .vc-date__btn:hover {
background:
linear-gradient(
to top left,
transparent calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
),
linear-gradient(
to top left,
#f0f0f0 50%,
rgb(241 245 249) 50%
) !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat !important;
}
/* Hovered partial end date - keep diagonal, swap open half to hover color (not when selected) */
.listing-calendar-popup .vc-date.vc-partial-date-end:not([data-vc-date-selected])[data-vc-date-hover] .vc-date__btn,
.listing-calendar-popup .vc-date.vc-partial-date-end:not([data-vc-date-selected]) .vc-date__btn:hover {
background:
linear-gradient(
to top left,
transparent calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
),
linear-gradient(
to top left,
rgb(241 245 249) 50%,
#f0f0f0 50%
) !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat !important;
}
.listing-calendar-popup .vc-date {
padding: 1px;
}
.listing-calendar-popup .vc-date__btn {
border-radius: 0.25rem;
}
/* Fully unavailable - full diagonal line with grey background */
.listing-calendar-popup .vc-date[data-vc-date-disabled] .vc-date__btn {
color: #aaa !important;
background:
linear-gradient(
to top left,
transparent calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
),
#f0f0f0 !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat !important;
}
/* Partial start date - booking starts here, bottom-right blocked, top-left open */
.listing-calendar-popup .vc-date.vc-partial-date-start .vc-date__btn {
color: #888 !important;
background:
linear-gradient(
to top left,
transparent calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
),
linear-gradient(
to top left,
#f0f0f0 50%,
transparent 50%
) !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat !important;
}
/* Partial end date - booking ends here, top-left blocked, bottom-right open */
.listing-calendar-popup .vc-date.vc-partial-date-end .vc-date__btn {
color: #888 !important;
background:
linear-gradient(
to top left,
transparent calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% - 0.5px),
rgba(200, 140, 140, 0.95) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
),
linear-gradient(
to top left,
transparent 50%,
#f0f0f0 50%
) !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat !important;
}
.listing-calendar-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0.5rem;
border-top: 1px solid var(--grey);
}
.listing-calendar-footer .listing-calendar-reset {
color: var(--red);
font-weight: 600;
font-size: 0.8rem;
text-decoration: none;
padding-left: 0.25rem;
}
.listing-calendar-footer .listing-calendar-save {
font-size: 0.8rem;
padding: 0.25rem 1rem;
}
.listing-accordion .accordion-button,
.listing-accordion .accordion-button:not(.collapsed),
.listing-accordion .accordion-button:focus {
display: flex;
color: var(--blue);
background-color: transparent;
box-shadow: none !important;
border: 0;
}
.listing-accordion .accordion-item {
background-color: transparent;
}
.listing-accordion .accordion-button:not(.collapsed)::after {
background-image: url('data:image/svg+xml,');
transform: rotate(0deg);
}
.listing-accordion .accordion-button::after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 1.25rem;
transition: transform 0.2s ease-in-out;
transform: rotate(-180deg);
}
.discount-option {
color: var(--blue);
background-color: transparent;
}
.discounts-active {
border-color: var(--bs-success) !important;
background-color:rgba(40, 167, 69, 0.1) !important;
}
.discount-active {
color: #fff;
background-color: var(--bs-success);
}
.booking-side .btn-primary:disabled, .booking-side .btn-primary.disabled {
color: #fff;
background-color: #a5a5a5;
border-color: #a5a5a5;
}
.input-promo-code {
background-color: #fff;
}
.input-promo-code[readonly] {
cursor: default;
background-color: #fdfdfd;
}
.listing-transport-buttons .btn,
.listing-transport-buttons button {
letter-spacing: normal;
}
.action-select-pickup.btn-blue {
background-image: url('../img-towlos/checkmark.svg');
background-position: left 10px center;
background-repeat: no-repeat;
}
.action-select-delivery.btn-blue {
background-image: url('../img-towlos/checkmark.svg');
background-position: right 10px center;
background-repeat: no-repeat;
}
.listing-booking-submit .btn {
padding-left: 15px;
padding-right: 15px;
}
.listing-booking-submit .btn i {
font-size: 22px;
margin-top: 0;
vertical-align: middle;
}
.listing-faq .accordion-item,
.listing-faq .accordion-item .accordion-collapse {
border-radius: 0 !important;
}
.map-sidebar img {
max-width: 100%;
}
#static-map {
min-height: 200px;
}
.map-pin-radius {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.section-chat {
border-radius: 8px;
}
.section-chat .btn i {
vertical-align: middle;
}
.section-chat h4 {
font-size: 1.4rem;
}
.btn-cart-chat {
}
.btn-cart-chat:hover, .btn-cart-chat:active {
background: transparent;
}
.listing-share-qr {
box-shadow: 0px 1px 5px 0px var(--grey);
}
.listing-share-qr .listing-scan-qr-code {
}
.listing-share-qr .btn i {
background-size: 70%;
background-position: center;
}
@media (max-width: 992px) {
.map-pin-radius {
width: 130px;
height: auto;
}
.section-chat h4 {
font-size: 1.1rem;
}
}
/* Sections */
.section-title1 h1,
.section-title1 h2 {
font-size: 2.6rem;
color: #2a3151;
font-weight: 700;
}
.section-title2 h1,
.section-title2 h2 {
font-size: 2.6rem;
color: #2a3151;
font-weight: 700;
}
.section-title3 h1,
.section-title3 h2 {
font-size: 1.6rem;
color: #2a3151;
font-weight: 700;
}
.how-steps .section-title3 h1,
.how-steps .section-title3 h2 {
font-weight: 600;
}
.steps {
padding: 11px 15px;
border-radius: 5px;
background-color: #fad744;
font-size: 25px;
font-weight: bold;
line-height: 1.16;
letter-spacing: normal;
color: #2b3252;
display: inline-block;
white-space: nowrap;
}
@media (max-width: 1099px) {
.steps {
padding: 7px 9px;
font-size: 20px;
}
}
@media (max-width: 768px) {
.section-title2 h2 {
font-size: 1.8rem;
}
.steps {
padding: 7px 9px;
font-size: 16px;
}
.how-steps .h4 {
font-size: 16px;
}
}
/* Selectric fix items pushing content */
.selectric-items {
display: none;
}
.selectric-open .selectric-items {
display: block !important;
}
/* Fix selectric dropdown being cut off in scrollable modals */
.modal-dialog-scrollable .modal-body:has(.selectric-open),
.modal-dialog-scrollable .modal-content:has(.selectric-open),
.modal-dialog-scrollable .modal-content.selectric-is-open,
.modal-dialog-scrollable .modal-content.selectric-is-open .modal-body {
overflow: visible;
}
.modal-dialog-scrollable .selectric-open .selectric-items {
z-index: 1060;
}
/* Selectric images */
.select-images .selectric-items .select-image {
display: flex;
align-items: center;
justify-content: flex-middle;
gap: 10px;
}
.select-images .selectric-items .select-image img {
width: 100px;
height: 72px;
-o-object-fit: contain;
object-fit: contain;
}
.select-images .selectric-items .selectric-scroll li:not(:first-child) {
padding-top: 0;
padding-bottom: 0;
}
/* Modify booking trailer switch selectric */
#modify-listing-select-wrapper .selectric-wrapper,
#modify-listing-select-wrapper .selectric {
width: 100% !important;
}
#modify-listing-select-wrapper .selectric {
background: #fff;
border: 1px solid var(--grey);
padding: 2px 0;
}
#modify-listing-select-wrapper .selectric .label {
font-weight: bold;
padding-left: 0.5rem;
}
/* Modals */
.section-reloading {
display: flex;
z-index: 10;
background: rgba(43, 50, 82, 0.30);
backdrop-filter: blur(5px);
}
.modal-reloading {
display: flex;
z-index: 1062;
background: rgba(255, 255, 255, 0.90);
}
.modal-reloading.hidden {
display: none;
}
.block-heading {
font-family: 'Merriweather', serif;
font-size: 1.8rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: normal;
color: #2b3252;
padding: 1rem 0;
}
.login-or {
text-align: center;
margin: 10px 0;
}
.block .btn-close {
position: absolute;
top: 15px;
right: 15px;
}
/* Account */
.loading {
position: relative;
opacity: 0.7;
}
.loading > img {
}
.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
width: 30px;
height: 30px;
border-radius: 50px;
border: 3px solid white;
border-top-color: black;
-webkit-animation: loading 800ms linear infinite;
animation: loading 800ms linear infinite;
}
@-webkit-keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.listing_status_border {
border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
.listing_status_border {
border-left: none;
}
}
/* Account listings */
@media (max-width: 768px) {
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child,
table.dataTable.dtr-inline.collapsed>thead>tr[role="row"]>th:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child .media {
max-width: 200px !important;
}
}
@media (max-width: 330px) {
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child,
table.dataTable.dtr-inline.collapsed>thead>tr[role="row"]>th:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child .media {
max-width: 170px !important;
}
}
@media (max-width: 300px) {
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child,
table.dataTable.dtr-inline.collapsed>thead>tr[role="row"]>th:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child .media {
max-width: 120px !important;
}
}
/* Booking Prerental */
.booking-prerental-container {
margin: 0 auto;
max-width: 600px;
}
.booking-steps {
background-color: white;
border: 1px solid var(--grey);
border-radius: 10px;
box-shadow: 0px 5px 10px 8px #fff;
z-index: 2;
}
.navbar-sticky-active .booking-steps {
top: 88px;
}
@media (max-width: 575px) {
.booking-steps {
/* position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020; */
background-color: var(--light-grey);
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0px 1px 5px 0px var(--grey);
width: calc(100% + 25px);
left: 0;
margin-left: -15px;
}
.navbar-sticky-active .booking-steps {
top: 58px;
}
}
.booking-step {
display: flex;
align-items: center;
justify-content: space-between;
}
.booking-step-number {
width: 17px;
height: 17px;
font-size: 12px;
display: inline-block;
line-height: normal;
vertical-align: middle;
padding: 0;
border-radius: 50%;
background-color: transparent;
border: 1px solid var(--grey);
color: var(--grey);
}
.booking-step-line {
display: block;
width: 100%;
border-bottom: 3px dotted var(--grey);
margin: 8px 0 7px;
height: 1px;
}
// Booking Step Current first through 5th
.step-current-1 .booking-step:nth-of-type(1) .booking-step-number {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-2 .booking-step:nth-of-type(1) .booking-step-number {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green-md.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-2 .booking-step:nth-of-type(2) .booking-step-number {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-2 .booking-step-line:nth-of-type(-n + 1) {
border-bottom: 2px solid var(--bs-green);
}
.step-current-3 .booking-step:nth-of-type(1) .booking-step-number,
.step-current-3 .booking-step:nth-of-type(2) .booking-step-number {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green-md.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-3 .booking-step:nth-of-type(3) .booking-step-number {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-3 .booking-step-line:nth-of-type(-n + 2) {
border-bottom: 2px solid var(--bs-green);
}
.step-current-4 .booking-step:nth-of-type(1) .booking-step-number,
.step-current-4 .booking-step:nth-of-type(2) .booking-step-number,
.step-current-4 .booking-step:nth-of-type(3) .booking-step-number {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green-md.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-4 .booking-step:nth-of-type(4) .booking-step-number {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-4 .booking-step-line:nth-of-type(-n + 3) {
border-bottom: 2px solid var(--bs-green);
}
.step-current-5 .booking-step:nth-of-type(1) .booking-step-number,
.step-current-5 .booking-step:nth-of-type(2) .booking-step-number,
.step-current-5 .booking-step:nth-of-type(3) .booking-step-number,
.step-current-5 .booking-step:nth-of-type(4) .booking-step-number {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green-md.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-5 .booking-step:nth-of-type(5) .booking-step-number {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-5 .booking-step-line:nth-of-type(-n +4) {
border-bottom: 2px solid var(--bs-green);
}
.step-current-6 .booking-step .booking-step-number {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green-md.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-6 .booking-step-line {
border-bottom: 2px solid var(--bs-green) !important;
}
.booking-truck {
margin-bottom: 10px;
}
.step-truck {
text-align: right;
}
.step-trailer-icon {
transform: scaleX(-1);
background-image: url('../img-towlos/svg/towlos-logo.svg');
background-size: contain;
background-repeat: no-repeat;
width: 33px;
height: 28px;
display: inline-block;
}
.step-truck-line {
margin-top: 2px;
position: relative;
width: 100%;
height: 4px;
background-color: var(--grey);
border-radius: 10px;
display: block;
}
.step-truck-line-left {
min-width: 50px;
border-radius: 10px;
background-color: var(--red);
display: inline-block;
height: 4px;
position: absolute;
left: 0;
top: 0;
}
.step-current-1 .step-truck-position,
.step-current-2 .step-truck-position {
width: 31%;
}
.step-current-3 .step-truck-position {
width: 55%;
}
.step-current-4 .step-truck-position {
width: 79%;
}
.step-current-5 .step-truck-position {
width: 100%;
}
.step-current-6 .step-truck-position {
width: 100%;
}
@media (max-width: 575px) {
.step-current-1 .step-truck-position,
.step-current-2 .step-truck-position {
width: 34%;
}
.step-current-3 .step-truck-position {
width: 57%;
}
.step-current-4 .step-truck-position {
width: 81%;
}
}
.booking-step-labels {
}
.booking-step-labels strong {
font-weight: 900;
margin-right: 4px;
}
.booking-step-label {
display: none;
}
.step-current-1 .booking-step-label:nth-of-type(1) {
display: block;
}
.step-current-2 .booking-step-label:nth-of-type(2) {
display: block;
}
.step-current-3 .booking-step-label:nth-of-type(3) {
display: block;
}
.step-current-4 .booking-step-label:nth-of-type(4) {
display: block;
}
.step-current-5 .booking-step-label:nth-of-type(5) {
display: block;
}
.step-current-6 .booking-step-label:nth-of-type(5) {
display: block;
}
.booking-step-tabs {
}
.booking-step-tabs .booking-step-tab :not(.collapsed) .step-arrow img {
transform: rotate(-180deg);
}
.booking-step-tabs .booking-step-tab .step-arrow img {
transition: transform 0.2s ease-in-out;
}
/* .booking-step-tab {
position:relative;
}
.booking-step-tab:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
border-left: 3px dotted var(--grey);
margin-left: 10px;
top: 0;
left: 0;
z-index: -1;
} */
.booking-step-tabs .step-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.booking-step-tabs .step-count {
display: inline-block;
width: 24px;
height: 24px;
line-height: 22px;
text-align: center;
font-weight: bold;
display: inline-block;
vertical-align: middle;
padding: 0;
border-radius: 50%;
background-color: transparent;
border: 1px solid var(--grey);
color: var(--grey);
flex-shrink: 0;
}
.booking-step-tabs .step-line {
border-left: 3px dotted var(--grey);
}
.booking-step-tabs .step-content-wrap {
padding: 10px 0 10px 27px;
margin-left: 11px;
}
@media (max-width: 575px) {
.booking-step-tabs .step-content-wrap {
padding: 10px 0 10px 20px;
}
}
// Booking Tabs. Step Current first through 5th
.step-current-1 .booking-step-tab:nth-of-type(1) .step-count {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-2 .booking-step-tab:nth-of-type(1) .step-count {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-2 .booking-step-tab:nth-of-type(2) .step-count {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-2 .booking-step-tab:nth-of-type(-n + 1) .step-line {
border-left: 2px solid var(--bs-green);
}
.step-current-3 .booking-step-tab:nth-of-type(1) .step-count,
.step-current-3 .booking-step-tab:nth-of-type(2) .step-count {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-3 .booking-step-tab:nth-of-type(3) .step-count {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-3 .booking-step-tab:nth-of-type(-n + 2) .step-line {
border-left: 2px solid var(--bs-green);
}
.step-current-4 .booking-step-tab:nth-of-type(1) .step-count,
.step-current-4 .booking-step-tab:nth-of-type(2) .step-count,
.step-current-4 .booking-step-tab:nth-of-type(3) .step-count {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-4 .booking-step-tab:nth-of-type(4) .step-count {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-4 .booking-step-tab:nth-of-type(-n + 3) .step-line {
border-left: 2px solid var(--bs-green);
}
.step-current-5 .booking-step-tab:nth-of-type(1) .step-count,
.step-current-5 .booking-step-tab:nth-of-type(2) .step-count,
.step-current-5 .booking-step-tab:nth-of-type(3) .step-count,
.step-current-5 .booking-step-tab:nth-of-type(4) .step-count {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-5 .booking-step-tab:nth-of-type(5) .step-count {
background-color: var(--blue);
color: #fff;
border-color: var(--blue);
}
.step-current-5 .booking-step-tab:nth-of-type(-n + 4) .step-line {
border-left: 2px solid var(--bs-green);
}
.step-current-6 .booking-step-tab .step-count {
background-color: var(--bs-green);
background-image: url('../img-towlos/svg/checkmark-green.svg');
background-size: contain;
background-repeat: no-repeat;
color: transparent;
border-color: var(--bs-green);
}
.step-current-6 .booking-step-tab .step-line {
border-left: 2px solid var(--bs-green) !important;
}
/* Account guest and hosting hq */
.account-block {
background-color: #fff;
color: var(--blue);
padding: 15px;
padding-right: 12px;
border-radius: 8px;
cursor: pointer;
border: 1px solid rgba(43, 50, 82, 0.15);
box-shadow: 0px 1px 5px 0px rgba(43, 50, 82, 0.15);
}
.account-block:hover, .account-block:active, .account-block:focus, .account-block:visited {
background-color: #fff;
color: var(--blue);
text-decoration: none;
}
.account-block-content {
overflow: hidden;
overflow-wrap: normal;
font-size: 15px;
font-weight: 500;
}
.account-block-expand :not(.collapsed) .account-block-arrow i {
transform: rotate(-180deg);
}
.account-block-content p {
font-size: 15px;
font-weight: 400;
margin: 10px 0 0 0;
padding: 0;
}
.account-block-title {
overflow: hidden;
line-height: 100%;
}
.account-block-title .block-title-icon {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.account-block-title .block-title-icon .block-title {
font-weight: 900;
white-space: nowrap;
}
.account-block-title .block-title-icon i,
.account-block-title .block-title-icon img {
height: 16px;
width: 16px;
}
.account-block-title .block-count {
font-size: 10px;
font-style: normal;
font-weight: bold;
border: 1px solid var(--blue);
border-radius: 20px;
color: var(--blue);
padding: 0 2px;
text-align: center;
min-width: 20px;
}
.account-block-title .badge {
padding: 3px 8px;
}
.account-block-title > p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 100%;
}
.account-block-title-desc {
margin-top: -1px;
margin-bottom: -4px;
line-height: 1.1em;
overflow: hidden;
}
.account-block-title-desc > p {
white-space: nowrap;
overflow: hidden;
}
.account-block-title-desc > span {
margin-bottom: 0;
display: block;
}
.account-block-expand:not(.collapsed) .account-block-title-desc {
margin-bottom: 0;
}
.account-block-expand .account-block-content {
/* margin-top: 6px; */
}
.account-block-icon {
position: relative;
width: 40px;
min-height: 33px;
}
.account-block-icon-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.account-block-arrow {
display: flex;
align-items: center;
}
.account-block-arrow i {
transition: transform 0.2s ease-in-out;
}
/* Account badge */
.account-badge {
width: 280px;
}
.account-badge-icon .badge-icon-img {
max-width: 50px;
width: 100%;
}
.account-badge .border-line-below {
padding-bottom: 10px;
padding-right: 10px;
}
.account-badge .border-line-below::after {
border-bottom: 7px solid var(--blue-alt);
}
.upload-account-file-wrapper .img-btn {
top: -10px;
left: -5px;
}
.listing_discounts_table.table tbody tr {
background: #fff;
}
.table_no_hover.table tbody tr {
background: #fff;
}
.host-demo .account-alerts {
padding-right: 0.5rem;
}
.host-demo-image-container {
position: absolute;
right: 0;
top: 0;
min-width: 240px;
width: 55%;
height: 100%;
}
.host-demo-image-container img {
object-fit: cover;
object-position: center;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
max-height: 400px;
right: 0;
max-width: 100%;
}
.guest-towing-approval {
}
.towing-approval-photo {
position: relative;
}
.towing-approval-photo .action-remove-account-photo {
position: absolute;
top: 12px;
right: 12px;
}
.towing-approval-photo .approval-photo-uploaded {
display: block;
}
.target-approval-editing {
display: none;
}
.target-approval-not-editing {
}
.towing-approval-photo-uploaded .target-approval-photo-uploaded {
display: block;
}
.towing-approval-photo-uploaded .target-approval-photo-upload {
display: none;
}
.towing-approval-photo-empty .target-approval-photo-uploaded,
.towing-approval-photo-empty .action-remove-prerental-file {
display: none;
}
.towing-approval-photo-empty .target-approval-photo-upload {
display: block;
}
.photo-empty-spacer {
display: flex;
justify-content: center;
align-items: center;
}
.towing-approval-photo img,
.towing-approval-photo .photo-empty-spacer {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
aspect-ratio: 2/1;
}
.listing-tow-vehicle {
position: relative;
}
.listing-tow-vehicle .action-delete-tow-vehicle {
position: absolute;
top: 6px;
right: 8px;
}
@media (max-width: 991px) {
.host-demo-image-container {
position: relative;
width: 100%;
max-width: 100%;
}
.host-demo-image-container img {
position: relative;
top: auto;
transform: none;
max-height: initial;
right: auto;
}
.host-demo .account-alerts {
padding-right: 0;
}
}
@media (max-width: 992px) {
.account-badge {
width: 100%;
}
}
@media (max-width: 768px) {
.account-badge {
width: 100%;
padding: 0;
}
.account-badge .badge-icon-img {
width: 80px;
}
.account-badge-title {
font-size: 20px;
}
.account-badge-title p {
font-size: 16px;
}
.account-badge-stats {
font-size: 13px;
}
}
/* Account messages */
.cometchat-messages {
min-width: 100%;
z-index: 1;
position: relative;
min-height: 200px;
}
.cometchat-messages:empty::before {
content: "Loading chat. Please wait...";
font-weight: 500;
display: block;
position: absolute;
font-size: 15px;
top: 20%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
text-align: center;
}
/* FAQ */
.faq-tabs a h4 {
display: inline-block;
}
.faq-tabs a {
text-decoration: none;
position: relative;
padding: 10px 20px 26px 20px;
}
.faq-tabs a:after {
position: absolute;
content: '';
height: 3px;
bottom: 22%;
margin: 0 auto;
left: 0;
right: 0;
width: 50%;
background-color: none;
transition:.2s;
border-radius: 10px;
}
.faq-tabs a:hover:after {
width: 80%;
background: #ef5455;
}
.faq .accordion-item {
background-color: #EAEAEC;
border: 0;
margin: 20px 0;
}
.faq .accordion-item .accordion-button {
background-color: #EAEAEC;
border: 0;
border-top-left-radius: 0;
box-shadow: none !important;
line-height: 21px;
}
.faq .accordion-item .accordion-button:focus {
outline: 0;
box-shadow: none;
}
.faq .accordion-item .accordion-button:not(.collapsed) {
color: #2a3151;
box-shadow: none;
}
.faq-round {
}
.faq-round .accordion-item:first-of-type .accordion-button {
background: transparent;
}
.faq-round .accordion-item .accordion-button {
background: transparent;
}
.faq-round .accordion-item .accordion-button:not(.collapsed) {
color: initial;
}
.faq-round .accordion-item {
background-color: inherit;
border-radius: 10px;
}
.faq-round .accordion-button::after {
background-image: url('../img-towlos/svg/caret-down-opaque.svg');
background-size: contain;
width: 16px;
height: 16px;
}
.faq .accordion-body {
line-height: 24px;
}
.faq .accordion-body p,
.faq .accordion-body ol,
.faq .accordion-body ul {
line-height: 24px;
}
.faq .accordion-body > :last-child {
margin-bottom: 0;
}
.faq .accordion-body > ol {
list-style-type: decimal;
}
.faq .accordion-body > ol > ol {
list-style-type: lower-alpha;
}
.faq .accordion-body > ol > ol > ol {
list-style-type: lower-roman;
}
/* FAQ Cards — reusable white-card accordion style */
.faq-cards .accordion-item {
border-radius: 10px !important;
box-shadow: 0px 1px 5px 0px rgba(43, 50, 82, 0.15);
background: #FFFFFF;
border: none;
margin-bottom: 20px;
}
.faq-cards .accordion-button {
background: #FFFFFF;
color: #2B3252;
box-shadow: none;
outline: none;
border: none;
border-radius: 10px !important;
font-weight: 700;
line-height: 140%;
padding-right: 50px;
font-size: 15px;
}
.faq-cards .accordion-button:focus {
box-shadow: none;
}
.faq-cards .accordion-button:not(.collapsed) {
color: #2B3252;
background: #FFFFFF;
box-shadow: none;
}
.faq-cards .accordion-button::after {
background-image: url('../img-towlos/svg/caret-down.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
width: 16px;
height: 16px;
position: absolute;
right: 20px;
}
.faq-cards .accordion-body {
padding: 0 20px 10px 20px;
}
.faq-cards .accordion-body p {
color: var(--text-color);
font-weight: 500;
}
@media (max-width: 767px) {
.faq-cards .accordion-button {
font-weight: 900;
gap: 10px;
}
}
/* FAQ Cards Bordered — bordered container variant */
.faq-cards-bordered {
border: 1px solid rgba(43, 50, 82, 0.25);
border-radius: 12px;
overflow: hidden;
}
.faq-cards-bordered .accordion-item {
border-radius: 0 !important;
box-shadow: none;
margin-bottom: 0;
border-bottom: 1px solid rgba(43, 50, 82, 0.15);
}
.faq-cards-bordered .accordion-item:last-child {
border-bottom: none;
}
.faq-cards-bordered .accordion-button {
border-radius: 0 !important;
background: transparent;
}
.faq-cards-bordered .accordion-button:not(.collapsed) {
background: transparent;
}
.faq-cards-bordered .accordion-item:has(.accordion-button:not(.collapsed)) {
background: rgba(43, 50, 82, 0.05);
}
.video-home iframe {
max-width: 100%;
}
@media (max-width: 768px) {
.video-home iframe {
height: 300px;
}
}
.home-featured .card-img {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
}
.blog-card img {
max-width: 100%;
height: auto;
}
/* Account bookings table */
.booking_tabs.table-data-default thead th:first-child {
border-top-left-radius: 0;
}
.booking_tabs.table-data-default thead th:last-child {
border-top-right-radius: 0;
}
.bookings_tabs_nav .nav-link {
color: var(--muted);
padding-left: 0.9em;
padding-right: 0.9em;
}
.bookings_tabs_nav .nav-link .badge {
background: #bbb;
color: #fff;
margin-left: 0.4em;
border-radius: 10px;
padding: 0.35em 0.45em;
vertical-align: text-bottom;
min-width: 21px;
}
.bookings_tabs_nav .active.nav-link {
color: var(--blue);
border-color: var(--red);
border-width: 2px;
}
.bookings_tabs_nav .active.nav-link .badge {
background: var(--blue);
color: #fff;
}
.bookings_tabs_nav .nav-link:not(.active),
.bookings_tabs_nav .nav-link:not(.active):hover,
.bookings_tabs_nav .nav-link:not(.active):focus {
border-bottom: 0 !important;
}
@media (max-width: 768px) {
.bookings_tabs_nav .nav-link {
padding-left: 0.5em;
padding-right: 0.5em;
}
}
/* Rental contract */
.rental_contract {
margin: 10px 5px;
border: 2px solid #eee;
padding: 20px;
height: 100%;
overflow: scroll;
font-size: 14px;
font-family: 'Times New Roman', Georgia, serif;
}
.rental_contract h1, .rental_contract h2 {
font-weight: normal;
font-size: 1.3rem;
}
.rental_contract p {
font-size: 14px;
margin: 0 0 0.4rem 0;
line-height: 1.2;
}
.rental_contract a.link {
color: #333;
}
/* Search nav */
.search-nav {
max-width: 900px;
}
.search-nav .form-control {
border-color: var(--grey);
transition: none !important;
}
.search-nav .input-group-text {
border-color: var(--grey);
background-color: #fff;
outline: 0;
}
.search-nav .search-date {
cursor: pointer;
}
.search-nav input.search-datetime {
width: 50%;
left: 50%;
}
.page-search .daterangepicker.opensleft:before {
right: 50%;
}
.page-search .daterangepicker.opensleft:after {
right: calc(50% + 1px);
}
.search-nav .input-group-text {
padding: 8px 8px 8px 12px;
}
.search-nav .search-mobile-inputs {
display: none;
}
.search-nav .search-location-mobile {
padding-left: 2px;
}
.search-nav .search-datetime-mobile {
color: var(--blue);
padding-left: 2px;
cursor: pointer;
font-size: 12px;
}
.search-nav .search-desktop-inputs .location-nearme {
top: 9px;
left: 62px;
}
.search-nav .search-mobile-inputs .location-nearme {
top: 0px;
left: 2px;
font-size: 13px !important;
font-weight: 600;
}
.search-nav .search-nav-btn {
width: 40px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.page-search .navbar-brand {
margin-left: 3px;
}
@media (min-width: 1200px) {
.page-search .navbar-brand {
margin-left: 18px;
}
}
@media (min-width: 768px) and (max-width: 820px) {
.search-nav input.location-typed {
padding-right: 0;
max-width: 22%;
}
}
@media (min-width: 821px) and (max-width: 860px) {
.search-nav input.location-typed {
padding-right: 0;
max-width: 25%;
}
}
@media (min-width: 861px) and (max-width: 991px) {
.search-nav input.location-typed {
padding-right: 0;
max-width: 30%;
}
}
@media (max-width: 767px) {
.page-search .navbar-brand {
display: none !important;
}
.search-nav .form-group {
border: 1px solid var(--grey);
border-radius: 6px;
padding: 6px;
overflow: hidden;
position: relative;
}
.search-nav .input-group {
position: static;
}
.search-nav .form-control {
background: transparent !important;
border: 0 !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.search-nav .input-group-text {
display: none;
}
.search-nav .location-find {
display: inline-block !important;
padding: 3px;
background: transparent;
border: 0;
}
.search-nav .search-date {
display: none;
}
.search-nav input.search-datetime {
min-width: 20px;
max-width: 100px;
width: 100%;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
appearance: none;
}
.search-nav input.form-control::placeholder {
font-size: 14px;
}
.search-nav .search-datetime-mobile {
font-size: 14px;
}
.search-nav .dt_date {
font-size: 14px;
}
.search-nav .dt_time {
font-size: 12px;
}
.search-nav .location-find {
padding: 2px 2px 0 0;
}
.search-nav input.location-typed {
width: 80%;
}
.search-nav .search-datetime-until {
display: none;
}
.search-nav .search-desktop-inputs {
display: none !important;
}
.search-nav .search-mobile-inputs {
display: block !important;
}
.page-search .daterangepicker.opensleft:before {
right: 50%;
}
.page-search .daterangepicker.opensleft:after {
right: calc(50% + 1px);
}
.search-nav .search-nav-btn {
display: none;
}
.search-nav .location-nearme {
position: absolute;
top: 8px;
left: 10px;
}
}
@media (max-width: 575px) {
.navbar .navbar-toggler {
gap: 0.6rem !important;
}
.search-nav input.form-control {
padding-top: 0 !important;
}
}
@media (max-width: 370px) {
.search-nav input.form-control::placeholder {
font-size: 13px;
}
.search-nav .search-datetime-mobile {
font-size: 13px;
letter-spacing: -0.02rem;
}
.search-nav .dt_group {
gap: 0.6rem;
}
.search-nav .dt_date {
font-size: 13px;
letter-spacing: -0.02rem;
font-weight: 600;
padding-right: 0.2rem;
}
.search-nav .dt_time {
font-size: 13px;
letter-spacing: -0.02rem;
font-weight: 400;
}
.search-nav .dt_empty {
font-size: 13px;
letter-spacing: -0.02rem;
}
.search-nav .dt_date_until .dt_empty {
min-width: 120px;
}
.search-nav .dt_group i {
margin: 0;
}
}
@media (max-width: 350px) {
.search-nav .location-nearme {
font-size: 12px !important;
font-weight: 600;
}
.search-nav .dt_group {
gap: 0;
justify-content: space-between;
}
.search-nav .dt_date_until .dt_empty {
min-width: 80px;
}
.search-nav .dt_date,
.search-nav .dt_time {
font-size: 12px;
}
}
@media (max-width: 320px) {
.search-nav .dt_date,
.search-nav .dt_time {
font-size: 11px;
}
}
/* Search filters */
.search-filters {
position: relative;
}
.search-filters .select-default {
width: calc(100% - 95px);
}
.col-search-map {
transition: 0.45s;
}
.col-search-results {
transition: 0.45s;
}
.search-results-inner {
opacity: 1;
}
.map-full .map-half {
width: 100% !important;
}
.map-full {
position: relative;
}
.map-full .col-search-map {
width: 100vw !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.map-full .col-search-results {
overflow: hidden;
width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.map-full .col-search-results .search-results-inner {
display: none;
opacity: 0;
}
.mobile-map-show {
display: none;
}
.mobile-search-results-bar {
display: none;
}
.gmap-btn {
background-color: rgb(255, 255, 255);
border: 2px solid rgb(255, 255, 255);
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px;
color: var(--blue);
cursor: pointer;
/* font-family: Roboto, Arial, sans-serif; */
font-size: 15px;
font-weight: 700;
line-height: 38px;
margin: 10px 0px 10px 10px;
padding: 0px 8px;
text-align: center;
}
.map-container .gmap-btn {
position: absolute;
top: 0;
left: 0;
}
.gmap-btn-centered {
margin: 10px 0px 10px 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px;
font-size: 15px;
font-weight: 700;
}
.map-container .gmap-btn-centered {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.btn-map-open {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNycgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE3IDE2JyBmaWxsPSdub25lJz48bWFzayBpZD0nbWFzazBfNTcwNl80MjQyJyBzdHlsZT0nbWFzay10eXBlOmFscGhhJyBtYXNrVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4PScwJyB5PSctMScgd2lkdGg9JzE3JyBoZWlnaHQ9JzE3Jz48cmVjdCB4PScwLjc1JyB5PSctMC4wMDM5MDYyNScgd2lkdGg9JzE2JyBoZWlnaHQ9JzE2JyBmaWxsPScjRDlEOUQ5Jy8+PC9tYXNrPjxnIG1hc2s9J3VybCgjbWFzazBfNTcwNl80MjQyKSc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00xMi45NzI1IDAuMjk4MzAzQzEyLjU3MTYgLTAuMTAzODM0IDExLjkyMDUgLTAuMTA0NzU3IDExLjUxODMgMC4yOTYyMzlMNC41MjY4MiA3LjI2Nzk2QzQuMzMzMzUgNy40NjA4OCA0LjIyNDYxIDcuNzIyODcgNC4yMjQ2MSA3Ljk5NjA5QzQuMjI0NjEgOC4yNjkzMiA0LjMzMzM1IDguNTMxMyA0LjUyNjgyIDguNzI0MjNMMTEuNTE4MyAxNS42OTU5QzExLjkyMDUgMTYuMDk2OSAxMi41NzE2IDE2LjA5NiAxMi45NzI1IDE1LjY5MzlDMTMuMzczNSAxNS4yOTE3IDEzLjM3MjYgMTQuNjQwNyAxMi45NzA1IDE0LjIzOTdMNi43MDkxNiA3Ljk5NjA5TDEyLjk3MDUgMS43NTI1MUMxMy4zNzI2IDEuMzUxNTEgMTMuMzczNSAwLjcwMDQzOSAxMi45NzI1IDAuMjk4MzAzWicgZmlsbD0nIzJCMzI1MicvPjwvZz48L3N2Zz4=");
background-position: 0.5rem center;
background-size: 20px 20px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.btn-map-open.active {
width: auto;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNycgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE3IDE2JyBmaWxsPSdub25lJz48bWFzayBpZD0nbWFzazBfNTcwNl82MDY1JyBzdHlsZT0nbWFzay10eXBlOmFscGhhJyBtYXNrVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4PScwJyB5PScwJyB3aWR0aD0nMTcnIGhlaWdodD0nMTYnPjxyZWN0IHg9JzAuNzUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nI0Q5RDlEOScvPjwvbWFzaz48ZyBtYXNrPSd1cmwoI21hc2swXzU3MDZfNjA2NSknPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNC41MjU1IDE1LjY5NzhDNC45MjY1IDE2LjA5OTkgNS41Nzc1NyAxNi4xMDA5IDUuOTc5NyAxNS42OTk5TDEyLjk3MTIgOC43MjgxM0MxMy4xNjQ3IDguNTM1MjEgMTMuMjczNCA4LjI3MzIyIDEzLjI3MzQgOEMxMy4yNzM0IDcuNzI2NzggMTMuMTY0NyA3LjQ2NDc5IDEyLjk3MTIgNy4yNzE4N0w1Ljk3OTcgMC4zMDAxNDVDNS41Nzc1NyAtMC4xMDA4NTMgNC45MjY1IC0wLjA5OTkyODggNC41MjU1IDAuMzAyMjA4QzQuMTI0NSAwLjcwNDM0NSA0LjEyNTQyIDEuMzU1NDEgNC41Mjc1NiAxLjc1NjQxTDEwLjc4ODkgOEw0LjUyNzU2IDE0LjI0MzZDNC4xMjU0MiAxNC42NDQ2IDQuMTI0NSAxNS4yOTU3IDQuNTI1NSAxNS42OTc4WicgZmlsbD0nIzJCMzI1MicvPjwvZz48L3N2Zz4=");
}
.btn-map-open span {
display: none;
padding-left: 1.5rem;
}
.btn-map-open.active span {
width: auto;
display: inline-block
}
.btn-map-redo-search .fa {
font-size: 1.2rem;
line-height: .05em;
vertical-align: -.075em;
}
@media (min-width: 1400px) {
.col-search-results {
max-width: 880px;
}
.col-search-map {
flex-grow: 1;
}
.map-full .col-search-map {
flex-grow: 0;
}
}
@media (max-width: 991px) {
.col-search-map {
height: 0;
width: 100vw !important;
padding: 0 !important;
}
.col-search-results {
order: 2;
transition: none;
}
.map-full .col-search-map {
height: calc(100vh - 130px);
width: 100vw !important;
padding: 0 !important;
}
.map-full .col-search-results {
overflow: hidden;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
position: fixed;
top: 90%;
order: 1;
height: 0;
}
.map-lg-fixed .map-container {
height: calc(100vh - 84px);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.map-lg-fixed .map-container .map-half {
height: 100% !important;
}
.mobile-map-show {
display: block;
z-index: 2;
}
.map-full .search-results-list {
display: none;
}
.map-full .search-result-bar {
display: none;
}
.map-full .mobile-search-results-bar {
display: block;
position: fixed;
z-index: 3;
bottom: 0;
left: 0;
right: 0;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
box-shadow: 0px 4px 8px 3px rgba(150, 150, 150, 0.5);
user-select: none;
cursor: grab;
}
.mobile-search-results-bar.dragging {
cursor: grabbing;
}
.map-full .mobile-map-show {
display: none;
}
.map-half {
margin-bottom: 0;
}
}
@media (max-width: 575px) {
.gmap-btn {
font-size: 14px;
font-weight: 500;
padding: 0px 5px;
line-height: 30px
}
.gmap-btn-centered {
font-size: 14px;
font-weight: 500;
padding: 0px 10px;
line-height: 30px
}
.btn-map-open {
background-size: 16px 16px;
height: 34px;
}
.btn-map-open span {
padding-left: 1.2rem;
}
.btn-map-redo-search {
height: 34px;
}
.btn-map-redo-search .fa {
font-size: 1;
line-height: .05em;
vertical-align: -.075em;
}
}
.filter-item.active {
z-index: 11;
}
.filter-item {
min-width: 130px;
max-width: 260px;
position: relative;
overflow: visible;
}
.filter-item button.filter-item-btn {
width: 100%;
outline: 0;
font-size: 14px;
font-weight: normal;
padding-right: 2rem;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
overflow: hidden;
color: var(--blue);
background-color: var(--light-grey);
position: relative;
}
.filter-item button.filter-item-btn:after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 100%;
width: 14px;
height: 14px;
transition: transform 0.2s ease-in-out;
position: absolute;
display: block;
right: 0.6rem;
top: calc(50% - 7px);
margin: auto 0;
}
.filter-item.active button.filter-item-btn:after {
transform: rotate(-180deg);
}
.filter-item button.filter-item-btn:focus,
.filter-item button.filter-item-btn:active {
outline: 0;
box-shadow: none;
}
.filter-item.filter-applied .filter-item-btn {
background-color: var(--teal) !important;
color: #fff !important;
font-weight: bold;
}
.filter-applied button.filter-item-btn:after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D9D9D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.filter-item-keyword button.filter-item-btn {
background-image: none;
}
.filter-applied.active button.filter-item-btn {
background-image: none;
}
.filter-item-keyword span {
color: #888;
}
.pop-filter {
min-width: 250px;
padding: 1rem 1rem;
font-family: 'Geist', sans-serif;
font-style: normal;
font-weight: 400;
line-height: 1.5;
background-color: #fff;
border: 0;
border-radius: 0.3rem;
z-index: 11;
}
.pop-filter.show {
display: block !important;
}
.pop-filter .form-check-input:focus {
outline: 0 !important;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
@media(max-width: 575px) {
.search-filters {
overflow-x: scroll;
margin-right: calc(var(--bs-gutter-x)* -.5);
}
.filter-item {
min-width: 100px;
}
.filter-item-keyword {
min-width: 140px;
padding-right: calc(var(--bs-gutter-x)* .5);
}
.filter-popover {
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: 100% !important;
transform: none !important;
margin: 0 11px !important;
}
.filter-item-keyword .filter-popover {
right: 0 !important;
left: 0 !important;
}
.pop-filter {
top: 58px !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: 100% !important;
margin: 0 11px !important;
transform: none !important;
}
}
@media(min-width: 768px) {
#pop-filter-date {
display: none !important;
}
}
@media(max-width: 767px) {
#pop-filter-date {
top: 24px !important;
}
}
@media(max-width: 575px) {
#pop-filter-date {
top: 13px !important;
}
}
/* Range slider */
.range-number-input {
width: 100%;
display: flex;
margin: 10px 0 15px;
}
.range-number-input .range-number-input-field {
display: flex;
width: 100%;
height: 30px;
align-items: center;
}
.range-number-input .range-number-input-field input {
width: 100%;
margin-left: 12px;
text-align: center;
-moz-appearance: textfield;
}
.range-number-input input[type="number"]::-webkit-outer-spin-button,
.range-number-input input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.range-number-input .range-number-input-separator {
width: 80px;
display: flex;
font-size: 19px;
align-items: center;
justify-content: center;
}
.range-slider {
height: 5px;
position: relative;
background: #ddd;
border-radius: 5px;
}
.range-slider .range-slider-progress {
height: 100%;
left: 0%;
right: 0%;
position: absolute;
border-radius: 5px;
background: var(--blue);
}
.range-input {
position: relative;
}
.range-input input {
position: absolute;
width: 100%;
height: 5px;
top: -5px;
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.range-input input[type="range"]::-webkit-slider-thumb {
height: 17px;
width: 17px;
border-radius: 50%;
background: var(--red);
pointer-events: auto;
-webkit-appearance: none;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
.range-input input[type="range"]::-moz-range-thumb {
height: 17px;
width: 17px;
border: none;
border-radius: 50%;
background: #17a2b8;
pointer-events: auto;
-moz-appearance: none;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
/* Hosting Dashboard */
.pop-btn-container {
}
button.pop-btn {
outline: 0;
font-size: 12px;
padding-right: 2rem;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
overflow: hidden;
color: var(--blue);
background-color: #fff;
border: 1px solid var(--blue);
position: relative;
}
button.pop-btn:after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 100%;
width: 14px;
height: 14px;
transition: transform 0.2s ease-in-out;
position: absolute;
display: block;
right: 0.6rem;
top: calc(50% - 7px);
margin: auto 0;
}
button.pop-btn.pop-shown:after {
transform: rotate(-180deg);
}
button.pop-btn:focus,
button.pop-btn:active {
outline: 0;
box-shadow: none;
color: var(--blue);
}
.pop-target {
min-width: 100px;
padding: 1rem 1rem;
font-family: 'Geist', sans-serif;
font-style: normal;
font-weight: 400;
line-height: 1.5;
background-color: #fff;
border: 1px solid var(--blue);
border-radius: 0.3rem;
z-index: 9;
}
.pop-target.pop-visible {
display: block !important;
}
/* Full calendar lib */
.fc-h-event .fc-event-title-container {
height: 4px;
border-radius: 6px;
}
.fc-h-event .fc-event-title {
display: none;
}
.fc-h-event .fc-event-time {
display: none;
}
.fc-event:hover {
opacity: 0.8;
}
.fc .fc-button-primary,
.fc .fc-button-primary:disabled {
background-color: #fff;
color: var(--blue);
border: 0;
padding-left: 5px;
padding-right: 5px;
}
.fc .fc-today-button {
padding-right: 0;
}
.fc .fc-button-primary:not(:disabled):hover {
background-color: #fff;
color: var(--blue);
opacity: 0.8;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
background-color: #fff;
color: var(--blue);
}
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
box-shadow: none;
}
.fc .fc-button .fc-icon {
color: var(--blue);
}
.fc .fc-daygrid-day.fc-day-today {
background-color: rgba(43, 50, 82, 0.2);
color: #fff;
}
.fc-day-other {
background-color: rgba(200, 200, 200, 0.1);
}
/* Hosting Dashboard */
.next-dates-scroll {
padding-right: 2px;
padding-bottom: 8px;
position: relative;
}
.next-dates-scroll-wrapper {
position: relative;
}
.next-listing {
box-shadow: 0px 1px 5px 0px var(--grey);
}
.next-listing-box {
min-width: 310px;
width: 310px;
}
@media (max-width: 767px) {
.next-dates-scroll-wrapper-multiple:after {
border-right: 5px solid #999;
content: "";
background: linear-gradient(90deg, rgba(140,140,140,0) 0%, rgba(140,140,140,0.4) 100%);
display: block;
clear: both;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 8px;
}
.next-dates-scroll-wrapper-multiple .next-dates-scroll {
padding-bottom: 12px;
}
.next-dates-scroll-wrapper-multiple .next-dates-scroll {
padding-right: 20px;
}
}
.metric-box-label {
font-size: 12px;
font-weight: 900;
}
.metric-box-value {
font-size: 16px;
}
.metric-boxes .pop-btn {
max-width: 100%;
border: 0;
background-color: var(--light-grey);
}
.metric-boxes .pop-btn-container {
overflow-x: hidden;
}
.hosting-calendar a {
color: var(--blue);
}
.rentals-button {
background: var(--grey);
color: var(--blue);
}
.rentals-button-active {
background: var(--blue);
color: #fff;
}
.rentals-button:hover {
color: var(--blue);
}
.rentals-button-active:hover {
color: #fff;
}
.calendar-legend {
background-color: #fff;
}
.calendar-legend-inner {
border: 1px solid var(--blue);
padding: 15px;
border-radius: 5px;
}
.calendar-legend-list .legend-label {
border-top: 0;
border-bottom: 0;
border-right: 0;
border-left: 3px solid #fff;
background-color: #fff;
border-radius: 6px;
box-shadow: 0px 1px 3px 0px var(--grey);
}
.calendar-legend-list .form-check-input {
outline: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.calendar-legend-list .form-check-input:not(:checked) {
position: relative;
overflow: hidden;
opacity: 0.7;
}
.calendar-legend-list .form-check-input:not(:checked):after {
content: "";
position: absolute;
border-radius: 3px;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
}
.calendar-legend-list .form-check-input:focus,
.calendar-legend-list .form-check-input:focus-within,
.calendar-legend-list .form-check-input:active {
outline: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.rental-group-count .rounded-circle {
height: 20px;
width: 20px;
font-size: 12px;
}
.rental-group-subtitle {
color: #888;
}
.rental-group :not(.collapsed) .rental-group-arrow img {
transform: rotate(-180deg);
}
.rental-group-arrow img {
transition: transform 0.2s ease-in-out;
}
.group-accordion-in_progress .rental-count-1 .rental-group-count .rounded-circle {
border-width: 2px !important;
border-color: var(--bs-info) !important;
color: var(--bs-info) !important;
font-weight: 700;
}
.metric-box-mobile-option {
display: none;
text-transform: uppercase;
}
.metric-box-change {
font-size: 12px;
}
.metric-green {
color: var(--bs-success);
}
.metric-yellow {
color: var(--bs-warning);
}
.metric-graph-img {
height: 20px;
width: 100%;
}
.metric-box-full .metric-box-option:first-child {
border-right: 1px solid var(--grey);
padding-right: 1rem;
}
.metric-box-full .metric-box-option:last-child {
padding-left: 1rem;
}
.metric-badge-total {
font-wize: 12px;
}
@media (max-width: 991px) {
.dashboard-metric-boxes {
gap: 0.5rem !important;
}
.metric-box-mobile-option {
font-size: 12px;
display: block;
text-align: center;
}
.metric-box-label {
display: block;
text-align: center;
}
.metric-box-option-label {
font-size: 12px;
}
.metric-box .pop-btn {
display: none;
}
.metric-box-filters {
display: none;
}
.metric-box .pop-btn-container {
display: none;
}
.insights-metric-boxes {
--bs-gutter-x: 0.5rem;
--bs-gutter-y: 0.5rem;
}
.legend-top-label {
font-size: 14px !important;
font-weight: 500 !important;
}
.next-dates-scroll {
overflow-x: scroll;
}
}
@media (min-width: 768px) {
.dashboard-metric-boxes {
gap: 1.2rem!important;
}
}
@media (min-width: 992px) {
.next-dates-scroll {
border-right: 0;
}
.next-listing-box {
min-width: 360px;
width: 380px;
}
.dashboard-metric-boxes{
gap: 1.5rem!important;
}
.metric-box-label {
font-size: 15px;
}
.dashboard-metric-boxes .metric-box-label {
font-weight: 500;
}
.metric-box-value {
font-size: 25px;
}
.metric-box-option-label {
font-size: 15px;
}
.metric-box-change {
font-size: 15px;
}
.metric-graph-img {
height: 30px;
}
.insights-metric-boxes {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
.metric-badge-total {
font-size: 18px;
}
.hosting-rentals-btns {
width: 320px;
}
.hosting-calendar-group {
border: 1px solid var(--grey);
}
.calendar-legend {
background: var(--light-grey);
border: 0;
height: 646px;
overflow: scroll;
}
.calendar-legend-inner {
border: 0;
padding: 0;
display: block !important;
}
}
/* Host profile page */
.host-badge {
max-width: 280px;
}
.host-badge-wrapper {
max-width: 280px;
}
.host-top-section {
margin-top: -25px;
z-index: 1;
position: relative;
}
.host-top-logo {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: var(--light-grey);
padding: 18px;
border: 6px solid #fff;
box-shadow: 0px 1px 2px 0px var(--grey);
}
.host-top-logo .badge-host {
position: absolute;
right: -20px;
bottom: -10px;
z-index: 1;
}
.host-badge-image {
max-width: 220px;
}
.host-profile-carousel {
width: auto;
margin: 0 30px;
}
@media (max-width: 575px) {
.host-profile-carousel {
margin: 0 15px;
}
.host-profile-carousel.owl-carousel .owl-item .single-item {
min-height: 220px;
height: 220px;
}
.host-profile-carousel.owl-carousel {
height: 220px;
}
.host-top-section {
margin-top: -45px;
}
}
.host-badge-info {
text-align: center;
}
.host-badge-chat a {
width: 100%;
display: block;
}
.host-badge-wrapper .icon i {
font-size: 20px;
}
.host-badge-social-edit {
font-size: 18px;
}
.btn-host-edit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-left: 8px;
padding-right: 8px;
}
.host-badge-wrapper .loading::after {
margin-top: -15px;
margin-left: -15px;
}
.host-video-item {
min-height: 280px;
background-size: cover;
}
.host-photo-item {
display: block;
width: 100%;
height: 100%;
min-height: 140px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.lookup-list {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10;
background-color: #fff;
box-shadow: 0px 1px 5px 1px rgba(43, 50, 82, 0.15);
}
.lookup-list .lookup-list-item {
padding: 0.5rem 0.6rem;
background-color: #fff;
border-bottom: 1px solid var(--grey);
font-size: 14px;
cursor: pointer;
}
.lookup-list > .lookup-list-item:hover {
background-color: var(--light-grey);
}
.lookup-place-name {
font-weight: bold;
display: inline-block;
margin-right: 4px;
}
.lookup-place-rating {
display: inline-flex;
align-items: center;
gap: 2px;
}
.selected-lookup-google-reviews .badge {
position: absolute;
top: 7px;
left: 40px;
z-index: 2;
white-space: nowrap;
overflow: hidden;
max-width: 90%;
}
.target-selected-google-place {
display: inline-flex;
align-items: center;
}
.target-selected-google-place .lookup-place-name {
max-width: 450px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.target-selected-google-place .lookup-place-rating {
font-size: 14px;
}
.target-selected-google-place .lookup-place-address {
display: none;
}
@media (max-width:1199px) {
.target-selected-google-place .lookup-place-name {
max-width: 320px;
}
}
@media (max-width: 991px) {
.target-selected-google-place .lookup-place-name {
max-width: 180px;
}
}
@media (max-width: 470px) {
.target-selected-google-place .lookup-place-name {
max-width: 120px;
}
}
.action-clear-google-review-place:hover i.remove-lookup {
color: var(--red) !important;
}
@media (max-width:767px) {
.selected-lookup-google-reviews .badge {
top: 8px;
}
}
.color-google-orange {
color: #FEA500
}
.color-radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 0 0 0;
}
.color-radio-item input[type='radio'] {
display: none;
}
.color-radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 0;
margin: 0 5px 0 0;
width: 30px;
height: 30px;
border-radius: 50%;
border: 0;
background-color: currentColor;
cursor: pointer;
}
.color-radio-item input[type=radio]:checked + label:after {
border-radius: 50%;
width: 41.5px;
height: 40.5px;
position: absolute;
top: -5px;
left: 0;
content: " ";
display: block;
border: 2px solid var(--blue);
background: transparent;
}
input.location-icon-marker {
background-image: url('../img-towlos/svg/location-marker.svg');
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 8px 50%;
padding-left: 40px;
}
input.input-google-icon {
background-image: url('../img-towlos/svg/google.svg');
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 8px 50%;
padding-left: 40px;
}
i.icon-qr-code {
background-image: url('../img-towlos/svg/qr-code-icon.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-share {
background-image: url('../img-towlos/svg/share-icon.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-location {
background-image: url('../img-towlos/svg/location-marker.svg');
background-size: contain;
background-repeat: no-repeat;
width: 18px;
height: 20px;
display: inline-block;
}
i.icon-location-sm {
background-image: url('../img-towlos/svg/location-marker.svg');
background-size: contain;
background-repeat: no-repeat;
width: 9px;
height: 11px;
display: inline-block;
}
i.icon-location-white {
background-image: url('../img-towlos/svg/location-marker-white.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-lightning-blue-alt {
background-image: url('../img-towlos/svg/lightning-blue-alt.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-host-profile-sm {
background-image: url('../img-towlos/svg/host-profile.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-copy {
background-image: url('../img-towlos/svg/copy-icon.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-checkmark-green {
background-image: url('../img-towlos/svg/checkmark-green.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-checkmark-green-md {
background-image: url('../img-towlos/svg/checkmark-green-md.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 17px;
display: inline-block;
}
i.icon-checkmark-yellow-md {
background-image: url('../img-towlos/svg/checkmark-yellow-md.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-checkmark-white-md {
background-image: url('../img-towlos/svg/checkmark-white-sm.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-checkmark-blue-sm {
background-image: url('../img-towlos/svg/checkmark-blue-sm.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-checkmark-white-sm {
background-image: url('../img-towlos/svg/checkmark-white.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-calendar-blue-md {
background-image: url('../img-towlos/svg/checkmark-blue-sm.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-arrow-right-red-sm {
background-image: url('../img-towlos/svg/arrow-right-red.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-arrow-right-blue-md {
background-image: url('../img-towlos/svg/arrow-right-blue-md.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-arrow-right-corners-blue-md {
background-image: url('../img-towlos/svg/arrow-right-blue-corners.svg');
background-size: contain;
background-repeat: no-repeat;
width: 9px;
height: 16px;
display: inline-block;
}
i.icon-arrow-right-corners-blue-sm {
background-image: url('../img-towlos/svg/arrow-right-blue-corners.svg');
background-size: contain;
background-repeat: no-repeat;
width: 8px;
height: 14px;
display: inline-block;
}
i.icon-arrow-right-corners-white-md {
background-image: url('../img-towlos/svg/arrow-right-white-corners.svg');
background-size: contain;
background-repeat: no-repeat;
width: 9px;
height: 16px;
display: inline-block;
}
i.icon-arrow-right-white-md {
background-image: url('../img-towlos/svg/arrow-right-white-corners.svg');
background-size: contain;
background-repeat: no-repeat;
width: 9px;
height: 16px;
display: inline-block;
}
i.icon-arrow-right-corners-white-sm {
background-image: url('../img-towlos/svg/arrow-right-white-corners.svg');
background-size: contain;
background-repeat: no-repeat;
width: 8px;
height: 14px;
display: inline-block;
}
i.icon-arrow-right-white-sm {
background-image: url('../img-towlos/svg/arrow-right-white-md.svg');
background-size: contain;
background-repeat: no-repeat;
width: 8px;
height: 14px;
display: inline-block;
}
i.icon-arrow-right-blue-sm {
background-image: url('../img-towlos/svg/arrow-right-blue.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-arrow-right-blue-alt-sm {
background-image: url('../img-towlos/svg/arrow-right-blue-alt.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-arrow-right-blue-alt-xs {
background-image: url('../img-towlos/svg/arrow-right-blue-alt.svg');
background-size: contain;
background-repeat: no-repeat;
width: 10px;
height: 10px;
display: inline-block;
}
i.icon-chart-blue-md {
background-image: url('../img-towlos/svg/chart-blue-md.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-pencil {
background-image: url('../img-towlos/svg/pencil.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-pencil-white {
background-image: url('../img-towlos/svg/pencil-white.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-pencil-sm {
background-image: url('../img-towlos/svg/pencil.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-download {
background-image: url('../img-towlos/svg/download-blue.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-download-grey {
background-image: url('../img-towlos/svg/download-grey.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-download-white {
background-image: url('../img-towlos/svg/download-white.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-google-logo {
background-image: url('../img-towlos/svg/google.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-google-logo-full {
background-image: url('../img-towlos/svg/google-logo-full.svg');
background-size: contain;
background-repeat: no-repeat;
width: 74px;
height: 16px;
display: inline-block;
}
i.icon-towlos-logo-full {
background-image: url('../img-towlos/svg/towlos-logo-full-blue.svg');
background-size: contain;
background-repeat: no-repeat;
width: 76px;
height: 16px;
display: inline-block;
}
i.icon-towlos-lg {
background-image: url('../img-towlos/svg/towlos-logo.svg');
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 25px;
display: inline-block;
}
i.icon-towlos {
background-image: url('../img-towlos/svg/towlos-logo.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 18px;
display: inline-block;
}
i.icon-towlos-white {
background-image: url('../img-towlos/svg/towlos-logo-white.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 18px;
display: inline-block;
}
i.icon-verified-blue-alt {
background-image: url('../img-towlos/svg/verified-blue-alt.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-doc-blue-md {
background-image: url('../img-towlos/svg/doc-blue-lg.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-exclamation-yellow-circle {
background-image: url('../img-towlos/svg/exclamation-yellow.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-exclamation-white-circle {
background-image: url('../img-towlos/svg/exclamation-circle-white.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
i.icon-exclamation-white-sm {
background-image: url('../img-towlos/svg/exclamation-mark.svg');
background-size: contain;
background-repeat: no-repeat;
width: 4px;
height: 12px;
display: inline-block;
}
i.icon-exclamation-white-xs {
background-image: url('../img-towlos/svg/exclamation-mark.svg');
background-size: contain;
background-repeat: no-repeat;
width: 2px;
height: 9px;
display: inline-block;
}
i.icon-plus-blue-md {
background-image: url('../img-towlos/svg/plus-blue-md.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-plus-blue-sm {
background-image: url('../img-towlos/svg/plus-blue-md.svg');
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
i.icon-heart-blue-md {
background-image: url('../img-towlos/svg/heart-blue.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-trash-white {
background-image: url('../img-towlos/svg/trash-bin-white.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}
i.icon-i-blue {
background-image: url('../img-towlos/svg/i-blue.svg');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
}
.border-shadow {
box-shadow: 0px 1px 5px 1px rgba(43, 50, 82, 0.15);
}
.qr-scan-wrapper {
}
.qr-scan-brand-image {
max-width: 75px;
margin: 0 auto;
height: auto;
}
.qr-scan-brand-image-listing {
max-width: 100px;
margin: 0 auto;
height: auto;
}
@media (max-width: 1199px) {
.host-photo-item {
min-height: 120px;
}
}
@media (max-width: 991px) {
.host-photo-item {
min-height: 90px;
}
}
@media (max-width: 767px) {
.host-badge {
max-width: 100%;
}
.host-badge-wrapper {
max-width: 100%;
}
.host-badge-image {
width: 130px;
max-width: 33%
}
.host-badge-info {
text-align: left;
}
.host-badge-page-save {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 3;
}
.host-photo-item {
min-height: 130px;
}
.host-photo-link {
margin-bottom: 12px;
}
}
@media (max-width: 575px) {
.host-photo-item {
min-height: 110px;
}
}
@media (max-width: 400px) {
.host-photo-item {
min-height: 90px;
}
}
.list-reviews > .listing-review:nth-child(n+4) {
display: none;
}
.list-reviews.open > .listing-review:nth-child(n+4) {
display: flex;
}
.list-listings > .listing-item:nth-child(n+5) {
display: none;
}
.list-listings.open > .listing-item:nth-child(n+5) {
display: block;
}
.btn-see-all {
position: relative;
padding-right: 40px;
}
.btn-see-all span:first-of-type {
display: inline-block;
}
.btn-see-all span:nth-of-type(2) {
display: none;
}
.btn-see-all.active span:first-of-type {
display: none;
}
.btn-see-all.active span:nth-of-type(2) {
display: inline-block;
}
.btn-see-all:after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 100%;
width: 16px;
height: 16px;
transition: transform 0.2s ease-in-out;
position: absolute;
display: block;
right: 0.6rem;
top: calc(50% - 7px);
margin: auto 0;
}
.btn-see-all.active:after {
transform: rotate(-180deg);
}
.btn-see-all:focus, .btn-see-all:active {
outline: 0;
box-shadow: none;
text-decoration: none;
}
/* Host Plans */
.host-bg-gradient {
background: linear-gradient(146deg, var(--blue) 27.67%, var(--blue-alt) 133.45%) !important;
}
.host-bg-blue-opaque {
background: rgba(255, 255, 255, 0.05) !important;
}
.host-bg-blue-opaque-dark {
background: rgba(43, 50, 82, 0.25) !important;
}
.host-bar-divider {
border-radius: 2px;
background-color: var(--blue);
display: flex;
width: 10px;
min-height: 60px;
flex-shrink: 0;
}
.host-plan-label-sm {
border: 2px solid var(--blue-alt);
border-radius: 30px;
padding: 2px 10px;
font-size: 12px;
font-weight: bold;
line-height: 120%;
text-transform: uppercase;
}
.host-plans-heading-container {
display: flex;
width: 100%;
align-items: center;
gap: 30px;
color: #fff;
line-height: 1;
justify-content: end;
flex-wrap: nowrap;
}
.host-plans-heading-image {
align-self: stretch;
display: flex;
width: 233px;
height: 124px;
flex: 1;
}
.host-plans-heading-plan {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: end;
flex: 1;
}
.host-plans-content {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
font-size: 12px;
margin-bottom: 15px;
}
.host-plans-content .btn span {
text-align: center;
}
.host-plans-price-wrapper {
display: flex;
margin-top: 10px;
align-items: center;
gap: 5px;
font-size: 15px;
}
.host-plans-price-amount {
font-weight: 900;
position: relative;
}
.host-plans-strike-sm {
position: absolute;
top: 0;
left: -5%;
width: 110%;
height: 100%;
}
.host-plans-price-period {
font-weight: 500;
}
.host-plans-price-description span {
font-weight: 700;
color: var(--yellow);
}
.host-plans-subtitle {
text-align: center;
font-weight: 500;
margin-top: 8px;
line-height: 130%;
}
.host-plans-subtitle span {
font-weight: 700;
color: var(--yellow);
}
.host-plans-price-badge {
position: relative;
}
.host-plans-button {
text-align: center;
}
.host-plans-button .btn {
margin: auto;
}
@media (max-width: 991px) {
.host-plans-heading-container {
max-width: 100%;
}
.host-plans-badge {
white-space: initial;
}
.host-plans-price-wrapper {
white-space: initial;
}
}
.host-plans-grid-row {
margin-top: 35px;
}
.host-plans-grid-row {
margin: 5px 0;
}
.host-plans-grid-row .col-3 {
flex-direction: column;
min-height: 48px;
padding: 10px 16px;
}
.host-plans-grid-row .col-3:not(.host-plans-feature-title) {
display: flex;
align-items: center;
gap: 5px;
text-align: center;
justify-content: center;
}
.host-plans-feature-heading-row {
position: relative;
margin-bottom: 15px;
}
.host-plans-feature-heading-row::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 12px;
}
.host-plans-feature-heading-row .col-3 .h-100 {
display: flex;
align-items: center;
}
.host-plans-features-content {
display: flex;
width: 100%;
gap: 30px;
justify-content: start;
flex-wrap: wrap;
}
.host-plans-feature-title {
color: #fff;
padding: 0 5px 0 15px;
line-height: 110%;
}
.host-plans-feature-subtitle {
display: flex;
margin-top: 0px;
width: 100%;
padding-left: 5px;
align-items: center;
gap: 5px;
font-size: 12px;
line-height: 14px;
}
.host-plans-feature-subtitle i {
flex-shrink: 0;
}
.host-plans-feature-heading {
font-weight: bold;
color: #fff;
}
.host-plans-feature-text {
flex: 1;
color: #fff;
font-size: 12px;
margin-top: 3px;
}
.host-promo-alert {
margin-top: -50px;
}
.host-promo-badge {
border-radius: 50px;
background-color: rgba(250, 215, 68, 1);
min-height: 20px;
gap: 5px;
font-size: 12px;
color: var(--blue);
text-align: center;
padding: 4px 8px;
line-height: 16px;
}
@media (max-width: 991px) {
.host-plans-features-container,
.host-plans-grid-row,
.host-plans-features-content {
max-width: 100%;
}
}
@media (max-width: 767px) {
.host-promo-alert {
margin-top: -10px;
}
.host-plans-features-list-row .col-3 {
padding-left: 5px
}
.host-plans-feature-subtitle {
padding-left: 0;
}
}
@media (max-width: 570px) {
.host-plans-heading-image {
width: 30px;
max-width: 30px;
}
.host-plans-heading-container {
gap: 6px;
}
.host-plans-grid-row {
font-size: 13px;
}
}
.border-line-below {
position: relative;
display: inline-block;
padding-bottom: 15px;
}
.border-line-below::after {
content: ' ';
border-bottom: 8px solid var(--blue);
border-radius: 2px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.border-line-below-red::after {
border-color: var(--red);
}
.border-line-below-md::after {
border-width: 10px;
}
/* Host plans compare */
.host-plans-compare {
}
.host-plans-intro-bar {
width: 10px;
height: 69px;
background-color: #ef5455;
border-radius: 2px;
}
.host-plans-intro-title {
font-size: 1.125rem;
font-weight: 900;
margin-bottom: 1rem;
}
.host-plans-intro-text {
font-size: 0.9375rem;
font-weight: 500;
}
.host-plans-card {
background-color: rgba(43, 50, 82, 0.25);
border-radius: 12px;
padding: 25px;
}
.host-plan-desc {
min-height: 58px;
}
.host-plans-card .btn span {
text-align: center;
width: 100%;
}
.host-plans-card-label {
font-size: 18px;
font-weight: 900;
text-align: center;
border-radius: 1000px;
padding: 0.4rem 1.25rem;
border: 3px solid #3772ff;
text-transform: uppercase;
}
.host-plans-amount {
font-size: 30px;
font-weight: 700;
position: relative;
display: inline-block;
}
.host-plans-strike {
position: absolute;
top: 0;
left: -5%;
width: 110%;
height: 100%;
}
.host-plans-period {
font-size: 22px;
margin-left: 4px;
font-weight: 900;
}
.host-plans-features-bar {
height: 5px;
background-color: #ef5455;
border-radius: 2px;
margin-top: 4px;
max-width: 90px;
}
@media (max-width: 991.98px) {
.host-plans-card {
padding: 20px;
}
.host-plan-desc {
min-height: 84px;
}
.host-plan-fleet {
font-size: 14px;
}
.host-plans-amount {
font-size: 24px;
}
.host-plans-period {
font-size: 18px;
}
}
@media (max-width: 767px) {
.host-plan-desc {
min-height: 0;
}
.host-plan-fleet {
font-size: 15px;
}
.host-plans-amount {
font-size: 22px;
}
.host-plans-period {
font-size: 16px;
}
}
/* Host plans faq */
.host-plans-section .accordion-body a {
color: #fff;
text-decoration: underline;
}
/* Host plans modal steps */
.host-modal-step-list .modal-content {
background: linear-gradient(146deg, var(--blue) 27.67%, var(--blue-alt) 133.45%);
}
.host-modal-steps .btn-close-modal {
position: absolute;
top: 15px;
right: 15px;
z-index: 2;
}
.host-modal-step-list .btn-close-modal {
-webkit-filter: invert(1) grayscale(100%) brightness(200%);
filter: invert(1) grayscale(100%) brightness(200%);
}
.hostPlanLoadingBlock {
min-height: 600px;
}
.host-signup-regular-amount {
text-decoration: line-through;
color: var(--muted);
padding-right: 5px;
}
.host-signup-price {
}
@media (min-width: 1200px) {
.host-plans-signup-row .col-submit {
padding-left: 100px;
}
}
@media (max-width: 991px) {
}
.guest-plan-label-sm {
border: 2px solid var(--teal);
border-radius: 30px;
padding: 2px 10px;
font-size: 12px;
font-weight: bold;
line-height: 120%;
text-transform: uppercase;
}
.host-plans-receipts table {
border-collapse: separate;
border-spacing: 0 10px;
}
.host-plans-receipts table td {
padding: 0 12px;
}
.host-plans-receipts table thead td {
font-weight: 600;
}
.host-plans-receipts table tbody td {
background-color: rgba(43, 50, 82, 0.05);
}
.host-plans-receipts table tbody td:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.host-plans-receipts table tbody td:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* Pulsing icon */
.icon-circle-pulsing {
width: 14px;
height: 14px;
position: relative;
}
.icon-circle-pulsing:before {
content: "";
position: relative;
display: block;
width: 250%;
height: 250%;
box-sizing: border-box;
margin-left: -75%;
margin-top: -75%;
border-radius: 45px;
background-color: var(--blue);
animation: pulse 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.icon-circle-pulsing:after {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: var(--blue);
border-radius: 50px;
animation: circle 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
.icon-circle-pulsing-md {
width: 22px;
height: 22px;
}
.icon-circle-pulsing-alt:before {
width: 200%;
height: 200%;
margin-left: -50%;
margin-top: -50%;
}
.icon-circle-pulsing-alt:after {
animation: none;
}
.icon-circle-pulsing-blue-alt:after,
.icon-circle-pulsing-blue-alt:before {
background-color: var(--blue-alt);
}
.show-white .icon-circle-pulsing:after,
.show-white .icon-circle-pulsing:before {
background-color: #fff;
}
@keyframes pulse {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
@keyframes circle {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
.terms-section .terms-content > ul, .terms-section .terms-content > ol {
padding-left: 1rem;
}
.terms-content > ol {
list-style-type: decimal;
}
.terms-content > ol > ol {
list-style-type: lower-alpha;
}
.terms-content > ol > ol > ol {
list-style-type: lower-roman;
}
.terms-content table {
color: var(--blue);
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
.terms-content table td, .terms-content table th,
.terms-content .table td, .terms-content .table th {
padding: 0.5rem;
border: 1px solid #dee2e6;
}
.terms-content table thead th {
border-bottom: 2px solid #dee2e6;
}
.terms-content table p {
margin: 0;
}
/* Home page location find icon */
@media (min-width: 576px) {
.location-find-home {
transform: translateX(-12px);
}
}
/* Modal utilities */
.modal-dialog-top {
display: flex;
align-items: flex-start;
margin-top: 5vh;
min-height: calc(100% - 5vh);
}
.modal-fixed-height {
min-height: 580px;
display: flex;
flex-direction: column;
}
.modal-fixed-height .modal-body {
flex: 1;
overflow-y: auto;
}
@media (max-width: 575px) {
.modal-dialog-top {
margin-top: 2vh;
min-height: calc(100% - 2vh);
}
.modal-fixed-height {
min-height: 70vh;
}
}
#listTrailerModal .list-trailer-step-wrapper {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
#listTrailerModal .list-trailer-step-wrapper > .modal-body {
flex-shrink: 0;
}
#listTrailerModal .list-trailer-step-wrapper > .list-trailer-footer {
flex-shrink: 0;
margin-top: auto;
}
#listTrailerModal .list-trailer-footer {
border-top: 0;
padding: 0.5rem 1.5rem 1.5rem;
}
#listTrailerModal .list-trailer-footer > * {
margin: 0;
}
#listTrailerModal .modal-header {
padding-top: 0.75rem;
padding-bottom: 0;
}
#listTrailerModal .list-trailer-progress {
padding-top: 0.5rem;
}
/* List Trailer Modal */
.list-trailer-progress {
display: flex;
justify-content: space-between;
gap: 8px;
}
.list-trailer-progress-step {
flex: 1;
height: 4px;
background: #e9ecef;
border-radius: 2px;
transition: background 0.3s ease;
}
.list-trailer-progress-step.active,
.list-trailer-progress-step.completed {
background: var(--blue-alt);
}
/* Login Modal Progress (for new trailer flow) */
.login-modal-progress {
display: flex;
justify-content: space-between;
gap: 8px;
}
.login-modal-progress-step {
flex: 1;
height: 4px;
background: #e9ecef;
border-radius: 2px;
}
.login-modal-progress-step.active,
.login-modal-progress-step.completed {
background: var(--blue-alt);
}
#loginModal.modal-trailer-flow .login-modal-progress {
display: flex !important;
}
#loginModal.modal-trailer-flow .login-modal-header-default {
display: none !important;
}
#loginModal.modal-trailer-flow .login-modal-header-trailer {
display: block !important;
}
#loginModal.modal-trailer-flow .login-modal-title-trailer {
display: block !important;
}
#loginModal.modal-trailer-flow .login-modal-close-trailer {
display: block !important;
}
#loginModal.modal-trailer-flow .btn-close-modal:not(.login-modal-close-trailer) {
display: none !important;
}
/* Host signup flow in login modal */
#loginModal.modal-host-signup .login-modal-progress {
display: flex !important;
}
#loginModal.modal-host-signup .login-modal-header-default {
display: none !important;
}
/* List trailer success step */
.list-trailer-success-photo {
height: 175px;
}
@media (max-width: 575px) {
.list-trailer-success-photo {
height: 150px;
}
}
#listTrailerModal .list-trailer-success .svg-icon {
width: 64px;
height: 64px;
}
#loginModal .modal-fixed-height {
min-height: 480px;
}
#loginModal .btn-close-modal {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 10;
}
.list-trailer-back-row {
margin-left: -8px;
}
.list-trailer-back-btn {
text-decoration: none;
}
.list-trailer-back-btn .svg-icon {
width: 20px;
height: 20px;
margin-left: -4px;
margin-right: -2px;
}
.list-trailer-photos-upload {
width: 100%;
}
.list-trailer-photos-wrapper {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-start;
min-height: 80px;
padding: 8px;
margin: -8px;
}
.list-trailer-photos-wrapper.loading {
min-height: 140px;
}
.list-trailer-photos-grid {
display: contents;
}
.list-trailer-photo-item {
position: relative;
width: calc(33.333% - 8px);
aspect-ratio: 1;
flex-shrink: 0;
}
.list-trailer-photo-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
background: var(--light-grey);
}
.list-trailer-photo-item .photo-remove {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #f25656;
color: #fff;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
line-height: 1;
padding: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity: 1;
}
.list-trailer-photo-item .photo-remove:hover {
background-color: #d94444;
}
.list-trailer-photo-add {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 140px;
border: 2px dashed var(--grey);
border-radius: 12px;
cursor: pointer;
background: var(--light-grey);
gap: 8px;
}
.list-trailer-photo-add .add-photo-text {
display: block;
}
.list-trailer-photo-add .add-photo-icon-plus {
display: none;
font-size: 28px;
}
.list-trailer-photo-add .add-photo-icon-camera {
display: block;
}
.list-trailer-photo-add.has-photos {
width: calc(33.333% - 8px);
aspect-ratio: 1;
height: auto;
border-radius: 8px;
gap: 0;
}
.list-trailer-photo-add.has-photos .add-photo-icon-camera {
display: block;
}
.list-trailer-photo-add.has-photos .add-photo-icon-plus {
display: none;
}
.list-trailer-photo-add.has-photos .add-photo-text {
display: block;
}
.list-trailer-photo-add:hover {
border-color: var(--blue);
}
.list-trailer-photo-add.hidden {
display: none !important;
}
.list-trailer-preview-card {
border: 1px solid var(--grey);
}
.list-trailer-preview-card .card-img-overlay-bg-img {
width: 100%;
height: 180px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#listTrailerModal .modal-content {
overflow: visible;
}
#listTrailerModal .modal-header {
padding: 1.25rem 1.5rem 0;
}
#listTrailerModal .modal-body {
padding: 1.5rem;
padding-bottom: 0;
overflow: visible;
}
#listTrailerModal .btn-close-modal {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 10;
}
#listTrailerModal .fs-7,
#listTrailerModal .fs-8 {
line-height: 1.4;
}
@media (max-width: 575px) {
.list-trailer-photo-label {
aspect-ratio: 4/3;
}
.list-trailer-preview-card .card-img-overlay-bg-img {
height: 160px;
}
}
/* Google Places autocomplete dropdown - ensure it appears above modals */
.pac-container {
z-index: 1060 !important;
}