body,
html {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif !important;
}
body {
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto", sans-serif !important;
margin-bottom: 0;
}
span,
b,
p,
strong,
em,
label,
input,
textarea,
button,
select,
ul li,
ol li,
ul li a,
sub,
sup,
samp,
.form-control,
input,
select,
table tr th,
table tr td,
button,
a {
font-family: "Roboto", sans-serif !important;
}
a {
transition: all 500ms ease;
}
a:hover,
.page-title:hover {
color: #dad7d7;
}
.hero-section {
/* Background Images */
/* background: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1755762424_mgxdnoqf_banner-img.jpg")
no-repeat;
background-position: top;
background-size: cover; */
position: relative;
height: calc(100vh - 45px);
color: white;
overflow: hidden;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
display: none;
}
.hero-bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* .hero-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
text-align: center;
backdrop-filter: brightness(0.9);
} */
.rentmy-innerpage-overlay {
z-index: 99;
padding: 90px 0;
}
.hero-content {
z-index: 1;
}
.hero-section__subtitle {
color: #fff;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
margin-bottom: 40px;
}
.hero-section__title {
color: #fff;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -1.4px;
text-transform: uppercase;
margin-bottom: 10px;
}
.hero-section__description {
color: #fff;
text-align: center;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 50px;
}
.hero-section__link {
border-radius: 6px;
background: #4585a5;
color: #fff;
text-align: center;
font-size: 20px;
font-weight: 600;
padding: 18px 40px;
width: fit-content;
text-transform: uppercase;
}
.hero-section__link:hover {
background-color: #213f60;
}
.form-box {
background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
padding: 15px 20px;
margin-top: 30px;
max-width: 1000px;
margin: 0 auto;
}
.form-box:has([wrapper-no-bg]) {
background: rgba(255, 255, 255, 0);
border: transparent !important;
}
/* Custom Dropdown */
.form-box .hero-section__select {
background-color: white;
border: 1px solid #e0e0e0;
padding: 0.375rem 20px;
height: 55px;
border-radius: 5px;
text-align: left;
}
.form-box .hero-section__select select {
width: 100%;
height: 100%;
background-color: transparent;
border: none;
outline: none;
font-size: 16px;
color: #424242 !important;
padding: 0;
}
.dropdown-menu-custom {
width: 100%;
padding: 10px 14px;
border-radius: 10px 0 10px 10px;
border: 1px solid #cecece;
background: #fff;
box-shadow: 0 7px 7px -5px rgba(0, 0, 0, 0.25);
}
.dropdown-item-custom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
}
.dropdown-rental__label {
display: flex;
align-items: center;
gap: 10px;
color: #213f60;
font-size: 18px;
font-weight: 600;
}
.qty-controls {
display: flex;
align-items: center;
gap: 15px;
padding: 0 8px;
border-radius: 5px;
border: 1px solid #c8c8c8;
height: 25px;
}
.qty-controls button {
width: 16px;
height: 16px;
padding: 0;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.qty-controls span {
width: 20px;
text-align: center;
color: #7e7c7c;
font-size: 12px;
font-weight: 700;
}
.hero-section__date {
height: 55px;
border: 1px solid #e0e0e0;
border-radius: 5px;
overflow: hidden;
}
.hero-section__date input {
width: 100%;
height: 100%;
background-color: #ffffff !important;
border: none !important;
color: #424242 !important;
padding: 0 20px;
}
#dynamic_page_contents {
margin-top: 0px;
}
.hero-section__logo {
position: absolute;
top: 22px;
left: 40px;
z-index: 99;
display: flex;
align-items: center;
gap: 40px;
}
.contact-header {
background-color: #f8f8f8;
padding: 5px 0;
border: 1px solid #ccc;
}
.contact-info {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 14px;
color: #181616;
}
.contact-icon {
color: #000;
}
@media (max-width: 768px) {
.contact-row {
flex-direction: column;
align-items: start;
gap: 5px;
}
}
@media (max-width: 568px) {
.contact-info {
display: none !important;
}
.contact-container {
justify-content: flex-end !important;
}
}
.RentMyMiniCart i {
font-size: 18px !important;
}
.contact-header .container-fluid {
padding-left: 2%;
padding-right: 2%;
}
/* .hero-section__btn {
border-radius: 10px !important;
border: 1px solid #213f60 !important;
background: #213f60 !important;
height: 55px;
padding: 0 19px !important;
width: 100%;
font-size: 18px !important;
line-height: 1 !important;
color: #fff !important;
font-weight: 600 !important;
} */
.hero-section__btn {
border-radius: 10px !important;
border: none !important;
background: #213f60 !important;
height: 60px;
padding: 0 54px !important;
width: fit-content;
font-size: 22px !important;
color: #fff !important;
font-weight: 600 !important;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #4585a5 50%, #213f60 0) !important;
background-position: 100% 100% !important;
background-size: 200% 100% !important;
}
.hero-section__btn:hover {
background-position: 0 100% !important;
}
@media (max-width: 1199px) {
.hero-section__btn {
font-size: 16px !important;
line-height: 9px !important;
}
}
.hero-section__date .form-control:disabled,
.form-control[readonly] {
background-color: #d7d7d7;
}
.contact-info-phone a {
font-size: 14px;
color: #181616;
text-decoration: none;
}
.dropdown-toggle::after {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.experience-section {
background-color: #f7f7f7;
padding: 60px 0;
}
.experience-title {
color: #333131;
font-size: 36px;
font-weight: 700;
}
.experience-divider {
width: 3px;
height: 140px;
background: #a7a7a7;
}
.experience-text {
color: #474646;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
@media (max-width: 768px) {
.experience-divider {
display: none;
}
.contact-info-phone span {
font-size: 14px;
}
}
.badge-best-seller {
border-radius: 3px;
background: transparent;
color: #960000;
font-size: 30.8px;
font-weight: 600;
padding: 0px 12px;
height: 40px;
margin-bottom: 20px;
border: none;
line-height: 1.5;
font-family: "Alex Brush", cursive !important;
}
.package-section-heading {
color: #333131;
font-size: 36px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.package-section-description {
color: #5c5d62;
font-size: 14px;
font-weight: 300;
margin-bottom: 15px;
}
.package-section-btn {
border-radius: 10px;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 600;
display: none;
align-items: center;
gap: 10px;
padding: 19px 40px;
background: linear-gradient(90deg, #4585a5 50%, #213f60 0) !important;
background-position: 100% 100% !important;
background-size: 200% 100% !important;
text-transform: uppercase;
}
.package-section-btn:hover {
color: #fff !important;
background-position: 0 100% !important;
}
.package-card {
/* border-radius: 30px; */
/* background: #4585a5; */
padding-top: 18px;
padding-bottom: 12px;
height: 100%;
position: relative;
transition: all 500ms ease;
}
.package-card .package-link {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-decoration: none;
opacity: 0;
}
.package-image {
background-color: white;
border-radius: 0px;
padding: 10px;
margin: 0 15px;
margin-bottom: 5px;
text-align: center;
min-height: 210px;
position: relative;
overflow: hidden;
border: 1px solid #ddd;
}
.package-image img {
height: 290px;
object-fit: cover;
transition: all 500ms ease;
}
.packagecard-info {
border-radius: 16px;
background-color: white;
padding: 19px 12px;
margin: 0 10px;
margin-bottom: 14px;
flex-direction: column;
}
.packagecard-info h3 {
color: #1b1b1b;
font-size: 20px;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 6px;
}
.package-price {
color: #444446;
font-size: 14px;
font-weight: 400;
display: flex;
flex-direction: column;
text-wrap: nowrap;
}
.package-price b {
/* color: #4585a5;
font-size: 20px;
font-weight: 600; */
color: #444446;
font-size: 20px;
font-weight: 500;
display: flex;
flex-direction: column;
text-wrap: nowrap;
}
.card-description {
color: #5c5d62;
font-size: 11px;
font-weight: 300;
margin-bottom: 15px;
}
.btn-view-details {
border-radius: 25px;
background: linear-gradient(90deg, #213f60 50%, #4585a5 0) !important;
color: #fff;
font-size: 15px;
font-weight: 600;
height: 50px;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background-position: 100% 100% !important;
background-size: 200% 100% !important;
}
.package-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
flex-shrink: 0;
}
.package-icon svg path {
stroke: #213f60;
}
.btn-view-details svg {
width: 10px;
height: 10px;
transform: rotate(35deg);
transition: all 400ms ease;
}
.btn-view-details:hover {
background-position: 0 100% !important;
color: #fff;
}
.btn-view-details:hover svg {
transform: rotate(0deg);
}
/* .package-card:hover {
transform: translateY(-6px);
background-color: #213f60;
}
*/
.package-card:hover .package-image img {
transform: scale(1.1);
}
.card-icons {
display: flex;
gap: 10px;
}
.icon-button {
border-radius: 20px;
background: #d4f3ff;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
}
.card-bottom {
border-radius: 20px;
background: #fff;
margin: 0 10px;
padding: 11px 16px;
display: none;
}
@media (max-width: 768px) {
.packagecard-info {
padding: 16px 10px;
margin: 0px 7px;
margin-bottom: 14px;
}
.package-image {
margin: 0 14px;
margin-bottom: 5px;
}
.packagecard-info h3 {
font-size: 14px;
}
.package-price {
text-align: right;
}
.hero-section__link {
font-size: 14px;
padding: 18px 35px;
}
.badge-best-seller {
font-size: 26px;
height: 35px;
}
.package-section-btn {
padding: 14px 24px;
}
.map-box iframe {
height: 250px !important;
}
}
.how-it-works-section {
background-color: #f9f9f9;
}
.how-it-works-badge,
.review-section-badge {
display: inline-block;
border-radius: 3px;
background: #960000;
padding: 5px 10px;
color: #fff;
font-size: 22px;
font-weight: 600;
padding: 0px 12px;
height: 34px;
margin-bottom: 20px;
}
.how-it-works-title {
color: #333131;
font-size: 36px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
margin-bottom: 65px;
}
.how-it-works-card {
border-radius: 20px;
padding: 32px 22px !important;
padding-bottom: 82px !important;
background: #213f60;
}
.how-it-works-icon {
width: 66px;
height: 66px;
border-radius: 50%;
background-color: #2ba8db;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: white;
border: 4px solid #337e9ca8;
}
.how-it-works-icon img {
width: 100%;
border-radius: 50%;
}
.how-it-works-number {
color: #213f60;
text-align: center;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
font-size: 60px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.how-it-works-cart-title {
color: #fff;
font-size: 22px;
font-weight: 600;
line-height: normal;
margin-bottom: 15px;
text-transform: uppercase;
}
.how-it-works-cart-text {
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: normal;
margin-bottom: 0;
}
.why-choose-section {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1760939857_x4va6pni_snowflakes.png");
background-position: center;
background-size: contain;
background-repeat: repeat;
padding: 75px 0;
position: relative;
}
.why-choose-section::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
}
.why-choose-section .container {
position: relative;
z-index: 9;
}
.we-deliver-box {
border-radius: 20px;
background: #960100;
}
.we-deliver-box-title {
color: #fff;
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
}
.we-deliver-box-text {
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.why-choose-right {
margin-top: 0;
}
.why-choose-right-title {
color: #333131;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 20px;
}
.why-choose-right-text {
color: #565658;
font-size: 22px;
font-weight: 600;
margin-bottom: 40px;
}
.read-more-btn {
color: rgb(255, 255, 255);
text-align: center;
font-size: 14px;
font-weight: 600;
display: inline-flex !important;
align-items: center;
border-radius: 10px;
background: #213f60;
gap: 10px;
padding: 19px 40px;
display: inline-block;
}
.read-more-btn:hover {
background-color: #051127;
}
.why-list {
max-width: 720px;
margin: 0 auto;
list-style: disc;
}
.why-list li {
font-size: 16px;
color: #565658;
margin-bottom: 0.75rem;
line-height: 1.5;
}
.why-list i {
color: #0d6efd;
/* Bootstrap primary color */
font-size: 1.25rem;
flex-shrink: 0;
}
@media (max-width: 575.98px) {
.why-list li {
font-size: 0.95rem;
}
}
.w-48 {
width: 48%;
}
.review-section {
background-color: #f7f7f7;
}
.review-section-title {
color: #333131;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 120px;
margin-top: 0;
}
.review-carousel {
padding: 0 62px;
}
.review-card {
transition: all 0.3s ease;
padding: 40px 50px 70px 50px;
border-radius: 32px;
background: #fff;
box-shadow: 0 57.867px 123.121px 0 rgba(21, 21, 21, 0.15);
text-align: left;
}
.review-card:hover {
transform: translateY(-5px);
}
.review-section .owl-nav {
position: absolute;
top: 35%;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.review-section .owl-nav button {
background: #fff;
border: 1px solid #ddd;
width: 40px;
height: 40px;
border-radius: 50%;
}
.review-card img {
width: 100px !important;
height: 100px !important;
border-radius: 50%;
position: absolute;
top: -50px;
left: 50px;
}
.review-card-text {
color: #666363;
font-size: 16px;
font-weight: 400;
line-height: 26px;
margin: 64px 0;
}
.review-card-name {
color: #000;
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
}
.review-card-desig {
color: #505050;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.review-card-reating {
margin-top: 45px;
}
.review-section .owl-dots .owl-dot.active span {
background: #212529 !important;
}
.review-section .owl-carousel .owl-stage-outer {
overflow: visible !important;
}
.review-section .owl-carousel.owl-drag .owl-item {
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
}
.review-section .owl-carousel.owl-drag .owl-item.active {
opacity: 1;
visibility: visible;
}
.review-section .owl-dots {
margin-top: 65px;
}
.review-section .owl-dots .owl-dot span {
background-color: #8d8d8d;
width: 20px;
height: 20px;
}
.review-section .owl-dots .owl-dot.active span {
background-color: #4585a5 !important;
}
.review-section .owl-nav button.owl-next,
.review-section .owl-nav button.owl-prev {
border: 1px solid #929292;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: absolute;
}
.review-section .owl-nav button.owl-next {
right: -50px;
}
.review-section .owl-nav button.owl-prev {
left: -50px;
}
.map-section {
padding-top: 90px;
padding-bottom: 118px;
}
.map-section-title {
color: #333131;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 60px;
text-align: center;
}
.map-box {
text-align: center;
}
.business-partners {
background-color: #f7f7f7;
padding: 65px 0;
}
.partner-box {
min-height: 120px;
border-color: #000 !important;
border-width: 2px !important;
}
.partner-logo {
object-fit: contain;
}
.business-partners-title {
color: #1d1d1d;
font-size: 50px;
font-weight: 700;
text-transform: capitalize;
}
.business-partners-text {
color: #474747;
font-size: 16px;
font-weight: 400;
line-height: 26px;
margin-bottom: 0;
}
.newsletter-section {
background: #960100;
padding: 60px 0px;
}
.newsletter-heading {
color: #fff;
font-size: 28px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 0;
}
.email-icon {
background-color: #ffffff;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
padding-left: 1rem;
padding-right: 1rem;
}
.subscribe-btn {
background-color: #213f60;
border: none;
color: #fff;
font-size: 12px;
font-weight: 400;
height: 40px;
padding: 0 34px;
text-transform: capitalize;
}
.subscribe-btn:hover {
background-color: #000000;
}
.newsletter-form-icon {
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
}
.newsletter-form-input {
background: #fff;
box-shadow: 0 2.053px 61.594px 0 rgba(142, 131, 113, 0.15);
padding-left: 65px;
color: #57656c;
font-size: 12px;
font-weight: 400;
height: 40px;
}
@media (max-width: 991px) {
.RentMyFrom {
gap: 10px 0;
}
}
@media (max-width: 768px) {
.partner-box {
border: none !important;
border-bottom: 2px solid #000000 !important;
}
.map-section {
padding-bottom: 70px;
}
.read-more-btn {
padding: 14px 24px;
}
.how-it-works-badge,
.review-section-badge {
display: inline-flex;
align-items: center;
padding-bottom: 0;
font-size: 14px;
}
}
/* footer */
.footer {
background: #213f60;
color: #ffffff;
padding: 50px 0 30px;
font-size: 0.95rem;
}
.footer a {
color: #ffffff;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
.footer-logo {
max-width: 100%;
margin-bottom: 15px;
}
.footer .kayak-img {
max-width: 175x;
margin-top: 15px;
}
.footer .logo-text p {
color: #fff;
font-size: 14px;
font-weight: 400;
}
.categories-title {
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 26px;
margin-bottom: 10px;
}
.categories-list li {
color: #fff;
font-size: 14px;
font-weight: 400;
}
.footer .social-icons a {
color: #ffffff;
font-size: 1.2rem;
margin-right: 15px;
display: inline-block;
}
.footer .social-icons a:hover {
color: #ccc;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 15px;
margin-top: 30px;
font-size: 0.85rem;
text-align: center;
}
.footer-contact-info {
padding-left: 50px;
}
.footer-categories {
padding-left: 0px;
justify-content: space-around;
}
.footer .footer-contact-info h6 {
color: #fff;
font-size: 14px;
font-weight: 400;
margin-bottom: 20px;
}
.footer .footer-contact-info p {
color: #fff;
font-size: 14px;
font-weight: 400;
}
.RentMyFilterTitle,
.RentMyFilterSubTitle {
font-weight: 600;
font-size: 22px;
text-transform: uppercase;
background-color: #4585a5 !important;
color: #fff;
height: 50px;
padding: 12px 197.873px 12px 15px;
}
.RentMyFilterSubTitle {
margin-bottom: 10px;
}
.sidebar .sub-heading {
color: #000;
font-size: 16px;
font-weight: 700;
padding: 10px 0px 10.5px 15px;
margin-bottom: 0;
}
.CategoryMenu li a span {
color: #555;
font-size: 16px;
font-weight: 400;
line-height: 26px;
text-decoration: none;
padding: 0 !important;
letter-spacing: 0px;
word-spacing: 0px;
}
.sidebar .type-form input {
height: 18px !important;
width: 18px !important;
border: 1px solid #cacaca;
}
.sidebar .type-form label {
color: #242424;
padding-left: 10px;
font-size: 16px;
font-weight: 400;
line-height: 26px;
cursor: pointer;
}
.sidebar .type-form .form-check {
margin-bottom: 8px;
}
.RmRentalOptionDaytime {
width: auto;
padding-right: 10px;
}
.product-listing-section {
padding-top: 90px;
padding-bottom: 120px;
}
.filter-search {
border-radius: 3px;
border: 1px solid #ddd;
background: #fff;
height: 48px;
color: #6c757d;
font-size: 14px;
font-weight: 400;
width: 324px !important;
padding: 0 10px;
}
.SortProduct {
justify-content: flex-end;
}
.SortProduct .RentMyInputField {
border-radius: 4px;
border: 1px solid #ddd;
background: #fff;
height: 48px;
color: #6c757d;
font-size: 14px;
font-weight: 400;
display: inline-block !important;
padding: 0 10px;
width: 226px;
outline: none;
}
.SortProduct label {
display: inline-block !important;
margin-right: 0px;
color: #212529;
font-size: 16px;
font-weight: 400;
line-height: 26px;
padding: 0 10px;
}
.RentMyProductItemInner {
width: 93%;
margin: 0 auto;
}
.product-card-badge {
height: 40px;
padding: 6px 11px 5px 11px;
background-color: #4585a5;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
top: 15px;
z-index: 11;
}
.product-card-heart {
background-color: transparent;
border: none;
outline: none;
top: 15px;
right: 10px;
z-index: 11;
}
.RentMyProductItem {
margin-bottom: 30px;
}
.RentMyProductImg {
border: 1px solid #dfdfdf;
background: #fff;
min-height: 320px;
display: flex;
align-items: center;
justify-content: center;
}
.ProductName {
color: #222;
text-align: center;
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}
.ProductName a {
color: inherit !important;
text-decoration: none !important;
}
.ProductName a:hover {
color: #213f60 !important;
}
.ProductPrice {
color: #4585a5 !important;
text-align: center;
font-size: 16px !important;
font-weight: 700 !important;
}
.ProductCartIcon {
width: 40px;
height: 40px;
display: flex;
border-radius: 100px;
background: #4585a5;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
.WishlistSingleItemOption a i,
.WishlistSingleItemOption button i {
color: #4585a5 !important;
}
.product-more-wrapper {
margin-top: 75px;
}
.product-more-btn {
display: block;
margin: 0 auto;
text-align: center;
height: 51px;
padding: 10px 20px;
border-radius: 5px;
background: #213f60;
color: #fff;
font-size: 22px;
font-weight: 600;
text-decoration: none;
width: 215px;
}
/* innerpage-banner */
.rentmy-innerpage-banner {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1755805896_dnlvoj4q_Use_for_All_other_Unassigned_Headers.jpg");
background-position: center;
background-size: cover;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: auto;
}
body.blog .rentmy-innerpage-banner {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1755803446_3rv90mgw_BlogHeader.jpg");
}
body.clothing_size_charts .rentmy-innerpage-banner {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1755804149_o890j6oq_ClothingSizeCharts_Header.jpeg");
}
body.contact .rentmy-innerpage-banner {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1755804709_tlgf7rfd_Contact_US_Header.jpg");
}
body.page.faqs .rentmy-innerpage-banner {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1755804974_ub3rx433_FAQ_Header.jpg");
}
body.page.how_it_works .rentmy-innerpage-banner {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1755805382_6jxl8h2s_How_It_Works_Header.jpg");
background-position: center -200px;
}
body.page.what_to_wear .rentmy-innerpage-banner {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3893/media/1755805645_84uk7cak_What_to_Wear_Header.jpg");
background-position: center -140px;
}
.rentmy-innerpage-banner h1 {
color: #fff;
font-size: 70px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
.innerpage-banner-logo {
position: absolute;
top: 22px;
left: 40px;
z-index: 99;
display: flex;
align-items: center;
gap: 40px;
}
.RentMyProductDetilsImg {
flex-direction: column;
}
.RentMyProductDetailsImgList {
order: 1;
margin-right: 0;
margin-top: 15px;
width: auto;
}
.RentMyProductDetailsImgList ul {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.RentMyProductDetailsImgList ul li img {
width: 90px;
height: 90px;
border-radius: 10px;
border: 1px solid #9d9d9d;
object-fit: contain;
}
.RentMyProductDetailsImgList ul li.ActiveImg {
border-left: none;
}
.RentMyProductDetailsImgList ul li.ActiveImg img {
border: 3px solid #6fc8cc;
}
.product-preview {
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 1rem;
text-align: center;
background: #fff;
}
.thumbnail-list img {
height: 60px;
width: 60px;
object-fit: contain;
border: 1px solid #ccc;
border-radius: 6px;
padding: 4px;
cursor: pointer;
}
.thumbnail-list img.active {
border: 2px solid #16a085;
}
.RentMyProductName {
color: #424242;
font-size: 28px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 24px;
}
.RentMyProductPrice {
color: #000;
font-size: 36px;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
}
.RentMyWrapper label {
color: #6b7280;
font-weight: 400;
font-size: 14px;
}
.RentMyPageHeader h3 {
font-size: 22px;
font-weight: 600;
color: #343e4c;
}
.RentmyCustomerDetails h5 {
font-weight: 600;
color: #343e4c;
margin-bottom: 1px;
font-size: 18px;
}
.RentMyProfileImge {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0;
}
.RentMyFileUpload {
text-align: left;
}
.RentMyFileUpload.active .FileSelect {
border-color: var(--brand);
}
.RentMyFileUpload.active .FileSelect .FileSelectButton {
background-color: var(--brand);
}
.QuantityBtn {
display: flex;
width: fit-content;
border-radius: 5px;
border: 1px solid #7e7777;
height: 30px;
overflow: hidden;
}
.QuantityBtn .RentMyBtn {
background-color: transparent !important;
color: #000000;
border: none;
border-radius: 0px;
padding: 0;
width: 30px;
height: 100%;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.QuantityBtn input {
background-color: transparent !important;
width: 40px;
border: none;
}
.RentMyWrapper .RentMyBtn:hover {
background-color: #4c50a1 !important;
color: #fff;
}
.RentMyCartBtnArea .RentMyBtn {
border-radius: 50px;
background: #4585a5 !important;
height: 55px;
font-size: 18px;
font-weight: 700;
text-transform: capitalize;
}
.rentmy-breadcrumbs {
justify-content: center !important;
}
.RentMyProductDetailsImgShow {
width: 100%;
border-radius: 10px;
border: 1px solid #d1d1d1;
min-height: 500px;
max-height: 500px;
overflow: hidden;
}
.RentMyProductDetailsImgShow img {
object-fit: contain;
height: 100%;
}
.RentMyTable {
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
border: none;
border-spacing: 0 10px;
border-collapse: separate;
}
.RentMySummeryTable {
box-shadow: none;
border-collapse: collapse;
border-radius: 0px;
}
.RentMySummeryTable tr td {
color: #000 !important;
font-size: 16px !important;
font-weight: 400 !important;
}
.RentMySummeryTable tr td small {
font-size: 16px !important;
}
.RentMySummeryTable tr:last-child td {
border-bottom: none !important;
}
.RentMySummeryTable tr td h5 {
color: #000;
font-size: 16px;
font-weight: 700;
}
.RentMyCartTotal {
color: #000;
font-size: 22px;
font-weight: 600;
line-height: normal;
background-color: transparent !important;
}
.RentMyCartSummery {
margin-top: 30px;
}
.RentMyCartSummery .RentMyHalfwidth:last-child {
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
max-width: 48%;
margin: 0 0 0 auto;
}
.RentMyCouponCode .RentMyInputField,
.CheckoutMakeContinueBtn button {
height: 42px;
}
.CheckoutMakeContinueBtn button,
.RentMyCouponCode button {
font-size: 16px !important;
font-style: normal;
font-weight: 700 !important;
text-transform: capitalize !important;
line-height: 1 !important;
background-color: #4585a5 !important;
}
.RentMyCouponCode .RentMyInputField {
border-radius: 10px;
border: 1px solid #dadada !important;
font-size: 12px;
color: #838383;
}
.CartRemoveProduct {
background-color: transparent;
}
.CartRemoveProduct:hover {
background-color: #e5e5e5;
}
.CartRemoveProduct i {
color: #ff0000 !important;
font-size: 16px !important;
}
.RentMyTable thead {
background-color: transparent;
}
.RentMyTable thead tr th {
color: #000;
font-size: 18px;
font-weight: 700;
background-color: transparent;
}
.RentMyCartTable thead tr th:first-child {
width: 50px;
}
.RentMyTable tr td {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: normal;
}
.RentMyCartTable .QuantityBtn {
display: flex;
width: fit-content;
border-radius: 5px;
border: none !important;
height: 24px;
overflow: hidden;
margin: 0 auto;
}
.RentMyCartTable .QuantityBtn input {
border: none;
height: 100%;
width: 45px;
}
.RentMyCartTable .QuantityBtn .RentMyBtn {
border: 1px solid #000;
width: 24px;
height: 24px;
border-radius: 6px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: transparent !important;
}
.RentMyCartTable .QuantityBtn .RentMyBtn:hover {
color: #051127 !important;
opacity: 0.9;
}
.RentMyTableStriped tbody tr:not(:last-child) td {
border-bottom: 1px dotted #d5d5d5;
}
.RentMyCartTable tr td:nth-child(3) h6 {
margin-bottom: 8px;
}
.RentMyCartTable tr td:nth-child(3) p {
font-size: 14px;
}
.RentMyCartTable .ImageAreaWrapper {
border-radius: 8px;
border: 1px solid #e5e5e5;
background: #fff;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.RentMyCartTable tbody td:nth-child(2) {
width: 100px;
}
.RentMyCartTable tbody .ImageAreaWrapper img {
width: 77px;
height: 77px;
object-fit: contain;
border: none;
display: block;
}
@media (max-width: 1399px) {
.hero-section__date,
.dropdown-toggle-custom {
width: 100% !important;
}
}
@media (max-width: 1199px) {
.w-48:last-child {
width: 100%;
margin-bottom: 20px !important;
}
.hero-section__btn {
font-size: 16px !important;
}
}
@media (max-width: 1024px) {
br {
display: none;
}
.hero-section__subtitle {
font-size: 20px;
margin-bottom: 15px;
}
.hero-section__title {
font-size: 48px;
line-height: 1.3;
}
.hero-section__description {
font-size: 20px;
}
.review-section-title,
.why-choose-right-title,
.how-it-works-title,
.map-section-title,
.business-partners-title {
font-size: 40px;
}
.experience-title,
.package-section-heading {
font-size: 28px;
line-height: 1.3;
}
.newsletter-form {
display: flex;
justify-content: center;
}
.newsletter-form .input-group {
gap: 10px 0;
}
.form-box {
margin: 0;
}
.w-48 {
width: 47%;
margin: 0 !important;
}
.why-choose-right-title {
margin-bottom: 20px;
}
.why-choose-right-text {
font-size: 18px;
margin-bottom: 20px;
}
.review-carousel {
padding: 20px !important;
}
.review-section .owl-nav button.owl-next {
right: -15px;
}
.review-section .owl-nav button.owl-prev {
left: -15px;
}
.map-box img {
width: 100%;
}
.footer-contact-info,
.footer-categories {
padding: 0;
}
.review-card-text {
margin: 30px 0;
}
.review-card {
padding: 20px 35px;
}
.RentMyCartSummery {
gap: 15px 0;
}
}
@media (max-width: 768px) {
.hero-section__title {
font-size: 34px;
line-height: 1.3;
}
.form-box {
padding: 10px 12px;
}
.form-box .hero-section__select,
.hero-section__date,
.hero-section__btn {
height: 48px;
}
.form-box .hero-section__select select {
font-size: 14px;
}
.hero-section__date .form-control {
font-size: 14px;
}
.RentMyFilterTitle,
.RentMyFilterSubTitle {
font-size: 18px;
}
.add-item-form-area-new {
width: 100% !important;
}
.RentMyProductDesTitle,
.RentMyRelatedProductTitle {
font-size: 22px !important;
}
.CheckoutMakeContinueBtn,
.CheckoutBackcartPlaceorder {
flex-wrap: wrap !important;
gap: 10px 0 !important;
}
.review-section-title,
.why-choose-right-title,
.how-it-works-title,
.map-section-title,
.business-partners-title {
font-size: 34px;
}
}
@media (max-width: 552px) {
.hero-section {
height: calc(100vh - 145px);
}
}
.BillingCheckoutTitle {
display: none;
}
.BillingDetailsLeftSideInner {
border-radius: 10px;
border: none;
background: #fff;
padding-top: 0;
}
.BillingDetailsLeftSideInner .RentMyInputGroup label {
color: #333;
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
}
.BillingDetailsLeftSideInner .RentMyInputField {
border-radius: 4px;
border: 1px solid #eeeff5;
background: #fff;
}
.OrderReviewWrapper {
border-radius: 10px;
border: 1px solid #cdcdcd;
background: #fff;
padding: 20px 20px 35px;
}
.OrderReviewTitle {
color: #213f60;
font-size: 28px;
font-style: normal;
font-weight: 700;
text-transform: capitalize;
}
.OrderItemImg {
border-radius: 8px;
border: 1px solid #e5e5e5;
background: #fff;
width: 80px;
min-width: 80px;
max-width: 80px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.OrderItemImg img {
width: 50px;
height: 50px;
border: none;
}
.OrderName {
color: #1e1e1e;
font-size: 18px;
font-weight: 700;
}
.CheckoutDatetimeShow {
margin-top: -8px;
}
.OrderSummaryTable {
box-shadow: none;
}
.OrderSummaryTable tr th {
color: #343a40;
font-size: 14px;
font-weight: 400;
}
.OrderSummaryTable tr td {
color: #6a6868;
font-size: 14px;
font-weight: 400;
line-height: normal;
text-align: right;
}
.order-total th {
color: #000 !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 26px !important;
}
.order-total td {
color: #000 !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 26px !important;
}
.RentMyPlaceOrder {
border-radius: 5px !important;
background: #4585a5 !important;
color: #fff;
text-align: center;
font-size: 16px !important;
font-weight: 700 !important;
padding: 8px 52px !important;
}
@media (max-width: 768px) {
.RentMyPlaceOrder {
padding: 8px 25px !important;
}
.RentMyMiniCart .RentMyTopArrow {
top: -20px;
right: 10px;
}
}
@media (max-width: 568px) {
.RentMyMiniCart .RentMyCartBody {
right: 0;
left: unset;
top: 45px;
}
}
.RentMyBackCartBtn {
font-size: 16px !important;
font-weight: 700 !important;
padding: 8px 22px !important;
}
.RentMyProductDesTitle,
.RentMyRelatedProductTitle {
color: #000;
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
background-color: transparent;
padding: 0;
margin-bottom: 15px;
}
.RentMyProductDesBody {
border-radius: 10px;
border: 1px dashed #b1abab;
padding: 30px 25px;
}
@media (min-width: 1399px) {
.RentMyRelatedProduct .RentMyProductItem {
flex: 0 0 20%;
max-width: 20%;
}
}
.RentMyRelatedProduct .RentMyProductImg {
border: none;
background: #fff;
min-height: auto;
}
.RentMyRelatedProduct .RentMyProductImg img {
height: 160px;
}
.RentMyRelatedProduct .ProductPrice {
margin-bottom: 0;
}
.RentMyRelatedProduct .ProductButton {
display: none;
}
.RentMyRelatedProduct .RentMyProductImg {
border: none;
background: #fff;
min-height: auto;
}
.RentMyRelatedProduct .RentMyProductItemInner {
border-radius: 10px;
border: 1px solid #151515;
background: #fff;
overflow: hidden;
}
.RentMyRelatedProductBody {
padding: 0;
}
.RentMyRelatedProduct {
margin-top: 30px;
padding-top: 60px;
border-top: 1px solid #c4c4c4;
}
.CheckoutOrderItem {
padding-top: 20px;
padding-bottom: 20px;
}
.wear-section {
background-color: #fff;
padding: 55px 0;
}
.wear-section .section-title {
color: #000;
text-align: center;
font-size: 50px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 50px;
}
.wear-tab-content .card-title {
color: #333131;
font-size: 50px;
font-weight: 700;
letter-spacing: -1.4px;
text-transform: uppercase;
margin-bottom: 20px;
}
.wear-item {
border-bottom: 1px solid #bebebe;
padding-bottom: 50px;
}
.wear-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.wear-item h5 {
color: #000;
font-size: 30px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 15px;
margin-top: 20px;
}
.wear-description {
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 26px;
margin-bottom: 30px;
}
.wear-tabs {
justify-content: space-between;
border-bottom: none;
margin-bottom: 40px;
gap: 15px;
}
.wear-tabs .nav-item {
flex: 1;
}
.wear-tabs .nav-link {
border: 2px solid #ebebeb;
background: #f5f5f5;
color: #213f60;
border: none;
font-weight: 700;
font-size: 22px;
padding: 1rem;
height: 100px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
}
.wear-tabs .nav-link.active {
background-color: #4585a5;
border: none;
color: white;
}
.tab-number {
background-color: #fff;
color: #213f60;
border-radius: 50px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
border: 3px solid #213f60;
flex-shrink: 0;
}
.wear-tabs .nav-link.active .tab-number {
border: 3px solid #4585a5;
}
.wear-card {
border-radius: 50px;
border: 1px solid #c5c5c5;
background: #fff;
padding: 35px 45px;
padding-bottom: 58px;
}
.wear-section .tab-pane {
position: relative;
}
.wear-section .tab-pane::after {
content: "";
box-shadow: -1px 1px 1px 0px #c5c5c5;
background: #fff;
width: 40px;
height: 40px;
position: absolute;
left: 130px;
top: -17px;
transform: rotate(135deg);
border-radius: 0 0 0 2px;
box-shadow: -1px 1px 1px 0px #c5c5c5;
}
.wear-section .tab-pane:nth-child(2):after {
left: 460px;
}
.wear-section .tab-pane:nth-child(3):after {
left: auto;
right: 450px;
}
.wear-section .tab-pane:nth-child(4):after {
left: auto;
right: 150px;
}
.wear-item p {
font-size: 0.95rem;
line-height: 1.6;
}
.wear-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.wear-buttons a {
border-radius: 5px;
border: 1px solid #5c5c5c;
background: #fff;
padding: 0 20px;
color: #000000;
font-size: 18px;
font-weight: 700;
line-height: 1;
transition: all 500ms ease;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.wear-buttons a:hover {
background: #960100;
border: 1px solid #960100;
color: #fff;
}
.wear-buttons a.active {
background: #960100;
border: 1px solid #960100;
color: #fff;
}
.wear-item-three h5 {
color: #000;
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 8px;
}
.wear-item-three p {
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 26px;
margin-bottom: 20px;
}
.wear-image {
height: 550px;
object-fit: cover;
}
@media (max-width: 1199px) {
.wear-tabs .nav-link {
font-size: 18px;
height: auto;
}
.tab-number {
width: 30px;
height: 30px;
font-size: 18px;
}
.wear-section .tab-pane::after {
left: 110px;
}
.wear-section .tab-pane:nth-child(2):after {
left: 450px;
}
.wear-tab-content .card-title {
font-size: 48px;
margin-bottom: 20px;
}
.wear-item h5 {
font-size: 28px;
margin-bottom: 20px;
}
.wear-description {
margin-bottom: 30px;
}
.wear-item-three h5 {
font-size: 28px;
}
.wear-item-three p {
font-size: 14px;
}
.wear-buttons button {
font-size: 14px;
height: 38px;
padding: 0 20px;
}
}
@media (max-width: 991px) {
.wear-tabs .nav-link {
font-size: 16px;
gap: 5px;
padding: 16px 12px;
}
.wear-section .section-title {
font-size: 38px;
}
.wear-section .tab-pane:nth-child(2):after {
left: 320px;
}
.wear-section .tab-pane:nth-child(3):after {
right: 90px;
}
}
@media (max-width: 768px) {
.wear-tabs .nav-link {
font-size: 0.875rem;
}
.wear-card {
padding: 30px;
border-radius: 40px;
}
.wear-image {
max-width: 100%;
margin-top: 1rem;
}
.wear-tabs {
gap: 10px;
}
.wear-section .tab-pane::after {
content: none;
}
.wear-section .tab-pane:nth-child(2):after {
content: none;
}
.wear-section .tab-pane:nth-child(3):after {
content: none;
}
.wear-section .tab-pane:nth-child(4):after {
content: none;
}
.wear-tab-content .card-title {
font-size: 32px;
}
.wear-item-three h5 {
font-size: 24px;
}
.wear-section .section-title {
font-size: 32px;
}
}
@media (max-width: 529px) {
.wear-card {
border-radius: 10px;
padding: 20px;
}
.wear-tabs .nav-link {
font-size: 12px;
gap: 5px;
padding: 10px 8px;
}
.wear-tab-content .card-title {
font-size: 32px;
margin-bottom: 0;
}
.wear-item {
padding-bottom: 30px;
}
.wear-item h5 {
font-size: 22px;
margin-top: 20px;
}
.tab-number {
width: 25px;
height: 25px;
font-size: 14px;
border-width: 1px !important;
}
}
@media (max-width: 439px) {
.wear-tabs .nav-item {
width: fit-content;
}
.wear-tabs .nav-link {
font-size: 10px;
gap: 5px;
padding: 10px 15px;
}
}
/* how it work */
.store-icon {
font-size: 24px;
margin-right: 10px;
color: #6c757d;
}
.location-icon {
font-size: 30px;
color: #6c757d;
}
.store-section {
padding: 60px 0;
}
.store-section-title {
color: #000;
text-align: center;
font-size: 70px;
font-weight: 700;
line-height: normal;
letter-spacing: -1.4px;
text-transform: uppercase;
}
.store-section-desc {
color: #7e7e7e;
text-align: center;
font-size: 32px;
font-weight: 400;
line-height: 26px;
}
.store-hours-title {
color: #213f60;
font-size: 28px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
/* .store-hours {
border-top: 1px solid #bebebe;
padding-top: 15px;
} */
.store-hours {
padding-top: 15px;
}
.store-hours li {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
color: #818181;
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: normal;
}
.store-hours li svg {
margin-right: 10px;
color: #6c757d;
}
.highlight-note {
font-weight: 600;
}
.store-address {
display: flex;
align-items: flex-start;
gap: 15px;
}
.store-address p {
color: #5c5c5c;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 26px;
}
.store-address a {
color: #03a8ec;
}
.store-address i {
font-size: 26px;
margin-top: 5px;
color: #6c757d;
}
.store-section-left-desc {
color: #000;
font-size: 22px;
font-weight: 600;
line-height: normal;
}
.store-section .highlight-note {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: normal;
}
.colorado-resorts-section {
padding-bottom: 80px;
}
.colorado-resorts-title {
color: #000;
text-align: center;
font-family: Lato;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.colorado-resorts-text {
color: #212121;
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.colorado-resorts-contact h2 {
color: #000;
font-size: 28px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 10px;
}
.colorado-resorts-contact p {
color: #3c3c3c;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px;
}
.colorado-resorts-contact p a {
color: #0a87e0;
}
.sheet-wrapper {
width: min(900px, 100%);
margin: 0 auto;
}
.sheet {
padding-top: 50px;
}
.sheet h1 {
font-size: 28px;
line-height: 1.25;
margin: 0 0 14px;
font-weight: 800;
letter-spacing: 0.2px;
}
.sheet p {
margin: 0 0 16px;
}
.sheet ol {
counter-reset: item;
margin: 14px 0 18px 1.25rem;
padding: 0;
}
.sheet ol > li {
margin: 10px 0;
}
.sheet ul {
margin: 8px 0 8px 1.25rem;
list-style: disc;
}
.sheet li {
padding-left: 0.25rem;
}
.sheet small.note {
color: #334155;
}
.sheet a {
color: #00a8ec;
text-decoration: none;
text-underline-offset: 2px;
}
@media (max-width: 1199px) {
.store-section-title {
font-size: 48px;
}
.store-section-left-desc {
font-size: 18px;
}
.store-hours-title {
font-size: 22px;
}
}
@media (max-width: 768px) {
.store-section-title {
font-size: 32px;
}
.store-section-desc {
font-size: 14px;
}
.store-section-left-desc {
font-size: 16px;
}
.store-address p,
.colorado-resorts-text,
.colorado-resorts-contact p {
font-size: 14px;
}
.colorado-resorts-contact h2 {
font-size: 22px;
}
}
/* reviews */
.testimonial-section {
padding: 60px 15px;
background-color: #fff;
}
.testimonial-title {
margin-bottom: 40px;
color: #000;
text-align: center;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
}
.testimonial-card {
border-radius: 20px;
border: 1px solid rgba(74, 84, 137, 0.3);
background: #fff;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
padding: 25px;
height: 100%;
position: relative;
}
.testimonial-header {
display: flex;
/* align-items: center; */
margin-bottom: 10px;
}
.testimonial-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}
.testimonial-name {
font-weight: 600;
margin-bottom: 0;
line-height: 1;
color: #000;
font-size: 18px;
margin-bottom: 10px;
}
.testimonial-date {
color: #8c8c8c;
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-bottom: 0;
}
.testimonial-stars {
color: #f4c150;
font-size: 0.9rem;
margin-left: auto;
}
.testimonial-quote {
color: #585858;
font-size: 14px;
font-weight: 400;
position: relative;
padding-left: 18px;
}
.testimonial-quote::before {
content: "“";
font-size: 3rem;
line-height: 10px;
color: #aaaaaa;
position: absolute;
left: -3px;
top: 10px;
}
.testimonial-quote::after {
content: "”";
font-size: 3rem;
line-height: 10px;
color: #aaaaaa;
position: absolute;
right: -10px;
bottom: -20px;
}
.highlighted-text {
font-weight: bold;
color: #222;
}
.testimonial-section-btn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.testimonial-section-btn button {
width: 215px;
height: 51px;
padding: 10px 20px;
text-align: center;
color: #fff;
font-size: 22px;
font-weight: 600;
line-height: normal;
border-radius: 5px;
background: #4585a5;
border: none;
outline: none;
}
@media (max-width: 991px) {
.testimonial-title {
font-size: 48px;
}
}
@media (max-width: 768px) {
.testimonial-title {
font-size: 32px;
}
}
/* contact us */
.contact-section {
padding: 60px 20px;
}
.contact-title {
font-size: 36px;
font-weight: bold;
text-align: center;
}
.contact-subtitle {
font-size: 16px;
color: #777;
text-align: center;
margin-bottom: 40px;
}
.contact-wrapper {
padding: 10px;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 60px 30px rgba(0, 0, 0, 0.03);
}
.contact-info-box {
background-color: #a9b4f042;
padding: 30px;
border-radius: 10px;
height: 100%;
}
.contact-info-title {
color: #000;
font-size: 36px;
font-weight: 700;
line-height: normal;
text-transform: capitalize;
margin-bottom: 10px;
}
.contact-info-desc {
color: #555;
font-size: 16px;
font-weight: 400;
line-height: 26px;
margin-bottom: 70px;
}
.contact-info-item {
display: flex;
align-items: center;
margin-bottom: 50px;
color: #000;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.contact-info-item a:hover {
color: #00a8ec;
}
.contact-info-icon {
font-size: 18px;
margin-right: 12px;
}
.contact-socials a {
margin-right: 12px;
color: #333;
font-size: 18px;
}
.contact-form {
padding: 60px 50px;
}
.contact-form label {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: normal;
margin-bottom: 0;
}
.contact-form .form-control {
border: none !important;
border-bottom: 1px solid #8d8d8d !important;
border-radius: 0;
padding-left: 0;
padding-right: 0;
color: #8d8d8d;
font-size: 11px;
font-weight: 400;
line-height: normal;
}
.contact-form .form-control:focus {
box-shadow: none;
border-color: #007bff;
}
.contact-form textarea {
resize: none;
}
.contact-form textarea.form-control {
height: 50px;
}
.contact-form-shape {
position: absolute;
left: 42%;
transform: translateX(-50%);
bottom: -50px;
}
.send-btn {
color: white;
padding: 15px 48px;
border: none;
transition: 0.3s ease;
border-radius: 5px;
background: #213f60;
box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.12);
}
.send-btn:hover {
background-color: #14387c;
}
@media (max-width: 767px) {
.contact-info-box {
margin-bottom: 30px;
}
.contact-info-desc {
margin-bottom: 30px;
}
.contact-info-title {
font-size: 30px;
}
.contact-info-item {
margin-bottom: 20px;
}
.contact-info-icon {
flex-shrink: 0;
}
}
@media (max-width: 399px) {
.contact-info-box {
padding: 20px;
}
.send-btn {
padding: 12px 25px;
}
}
/* mobile humberger */
.mobile-header {
background-color: #fff;
padding: 1rem;
border-bottom: 1px solid #eee;
}
.menu-toggle-btn {
font-size: 24px;
border: none;
background: none;
}
.offcanvas-menu {
width: 320px;
}
.menu-close-btn {
font-size: 18px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
background-color: transparent;
border: none;
color: #666;
}
.menu-list {
list-style: none;
padding-left: 0;
margin: 2rem 0;
margin-top: 0;
}
.contact-block {
margin-top: 2rem;
padding: 0 15px;
}
.contact-item {
display: flex;
margin-bottom: 1rem;
color: #454141;
font-size: 14px;
font-weight: 300;
}
.contact-item a:hover {
color: #213f60;
}
.contact-icon {
font-size: 18px;
margin-right: 12px;
}
.social-links-section {
margin-top: auto;
border-top: 1px solid #eee;
padding-top: 1rem;
}
.social-title {
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 0.5rem;
color: #555;
}
.social-icons a {
margin-right: 15px;
font-size: 22px;
}
.offcanvas.show {
visibility: visible;
opacity: 1;
}
.menu-brand-wrapper {
position: absolute;
top: 30px;
left: 40px;
z-index: 999;
display: flex;
align-items: center;
gap: 20px;
}
@media (max-width: 1199px) {
.contact-form-shape {
position: absolute;
left: 0;
transform: translateX(0%);
}
}
@media (max-width: 842px) {
.menu-brand-wrapper {
top: 112px;
}
}
@media (max-width: 747px) {
.menu-brand-wrapper {
top: 155px;
}
}
@media (max-width: 593px) {
.menu-brand-wrapper {
top: 20px;
left: 10px;
gap: 10px;
}
.menu-brand-wrapper a img {
width: 50%;
}
}
@media (max-width: 568px) {
.contact-form {
padding: 10px 18px;
}
.contact-form-shape {
display: none;
}
}
/* plan your trip */
.plan-section {
padding-top: 80px;
padding-bottom: 0;
margin-bottom: -70px;
}
.plan-title {
color: #000;
font-size: 50px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 20px;
}
.plan-title .highlight {
background-color: #4585a5;
padding: 0.3rem 1rem;
border-radius: 4px;
margin-left: 0.5rem;
display: inline-block;
position: relative;
color: #fff;
text-transform: uppercase;
}
.plan-title .highlight::after {
content: "";
background: #4585a5;
width: 48px;
height: 48px;
position: absolute;
right: -23px;
transform: rotate(135deg);
border-radius: 0 0 0 2px;
box-shadow: -1px 1px 1px 0px #c5c5c5;
z-index: -1;
top: 10px;
}
.plan-subtitle {
margin-top: 1rem;
color: #000;
font-size: 22px;
font-weight: 600;
line-height: normal;
}
.plan-description {
margin-top: 40px;
margin-bottom: 40px;
color: #565555;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.plan-features {
margin-top: 1.5rem;
padding-left: 42px;
}
.plan-features li {
margin-bottom: 10px;
color: #000;
font-size: 16px;
font-weight: 700;
line-height: normal;
padding-left: 10px;
}
.plan-button {
color: #fff;
padding: 0.75rem 4rem;
border: none;
font-weight: 700;
margin-top: 2rem;
font-size: 18px;
border-radius: 5px;
background: #213f60;
display: inline-block;
}
.plan-images {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.plan-image:last-child {
transform: translateY(-178px);
}
.plan-image img {
width: 100%;
height: auto;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 1399px) {
.plan-image:last-child {
transform: translateY(-144px);
}
}
@media (max-width: 1199px) {
.plan-section {
margin-bottom: 0;
padding-bottom: 50px;
}
.plan-image:last-child {
transform: translateY(-120px);
}
}
@media (max-width: 991px) {
.plan-title {
font-size: 2rem;
}
.plan-title .highlight::after {
width: 33px;
height: 33px;
right: -15px;
top: 8px;
}
.plan-description {
margin-top: 20px;
margin-bottom: 20px;
}
.plan-features {
padding-left: 25px;
}
.plan-images {
grid-template-columns: 1fr 1fr;
}
.plan-image:last-child {
transform: translateY(-192px);
}
.plan-section {
margin-bottom: -80px;
padding-bottom: 0px;
}
.rentmy-innerpage-banner h1 {
font-size: 32px !important;
line-height: 1.3;
}
}
@media (max-width: 767x) {
.plan-image:last-child {
transform: translateY(-140px);
}
}
@media (max-width: 499px) {
.plan-image:last-child {
transform: translateY(-100px);
}
.plan-section {
margin-bottom: 0px;
padding-bottom: 0px;
}
}
/* shoes size chart */
.size-chart-section {
padding: 80px 0px;
}
.brand-logos {
gap: 1rem;
border-bottom: 1px solid #cecece;
padding-bottom: 25px;
margin-bottom: 45px;
}
.brand-logo {
width: 170px;
height: 90px;
border: 1px solid #4585a54d;
padding: 10px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.brand-logo.active {
border: 2px solid #4585a5;
}
.tab-buttons .nav-link {
color: #213f60;
font-weight: 700;
border: none;
border-radius: 4px;
font-size: 18px;
height: 50px;
padding: 0 53px;
}
.nav-tabs.tab-buttons {
border-bottom: none;
}
.tab-buttons .nav-link.active {
background-color: #4c50a1;
color: white;
}
.size-table-wrapper {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-top: 35px;
border: 1px solid #e5e5e5;
position: relative;
}
.size-table-wrapper .tab-pane {
padding: 20px;
border-radius: 5px;
border: 1px solid rgba(74, 84, 137, 0.3);
}
.size-table-wrapper .tab-pane::after {
content: "";
box-shadow: -1px 1px 1px 0px #c5c5c5;
background: #fff;
width: 28px;
height: 28px;
position: absolute;
left: 50px;
top: -13px;
transform: rotate(135deg);
border-radius: 0 0 0 2px;
box-shadow: -1px 1px 1px 0px #c5c5c5;
}
.size-table-wrapper .tab-pane:nth-child(2):after {
left: 222px;
}
.size-table-wrapper .tab-pane:nth-child(3):after {
left: 402px;
}
@media (max-width: 768px) {
.brand-logo {
height: auto;
}
.size-table-wrapper {
padding: 10px;
}
.tab-buttons .nav-link {
font-size: 14px;
}
.nav-tabs.tab-buttons {
overflow-x: auto;
flex-wrap: nowrap;
}
}
/* closthing size */
.size-chart-section-title {
color: #000;
text-align: center;
font-size: 50px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 50px;
}
.size-section {
/* padding: 30px 20px; */
margin-bottom: 40px;
border-radius: 20px;
border: 1px solid #d5d5d5;
background: #fff;
overflow: hidden;
}
.size-chart-wrapper {
padding: 0px 20px;
}
.size-chart-wrapper h3 {
color: #000;
font-size: 18px;
font-weight: 700;
line-height: normal;
margin: 20px 0;
}
.size-section .section-title {
background-color: #4c50a1;
color: #fff;
padding: 10px 20px;
font-size: 18px;
font-weight: 600;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 0px;
}
.size-section .table th,
.size-section .table td {
text-align: center;
vertical-align: middle;
font-size: 14px;
padding: 10px;
}
.size-section .table td {
border-bottom: 1px solid #c2c2c2;
height: 50px;
}
.size-section .table tr:last-child td {
border-bottom: none !important;
}
.size-section .table td:first-child {
text-align: left !important;
}
.size-section .table thead th {
background-color: transparent;
color: #000;
font-size: 14px;
font-weight: 800;
line-height: normal;
border-bottom: 1px solid #4c4b4b;
height: 50px;
}
.size-section .table thead th:first-child {
text-align: left !important;
}
@media (max-width: 768px) {
.section-title {
font-size: 16px;
padding: 8px 16px;
}
.size-section {
border-radius: 10px;
}
.size-section .table th,
.size-section .table td {
font-size: 13px;
padding: 6px;
}
.size-chart-section-title {
font-size: 32px;
}
.size-chart-section {
padding: 40px 0;
}
.size-chart-wrapper h3 {
margin-bottom: 10px;
font-size: 16px;
}
}
@media (max-width: 991px) {
.rentmy-innerpage-banner {
min-height: 400px;
}
}
/* faq */
.faq-section {
padding-top: 70px;
padding-bottom: 100px;
}
.faq-section-title {
color: #213f60;
font-size: 50px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 50px;
text-align: center;
}
.faq-heading {
font-weight: 700;
font-size: 2.5rem;
color: #0d1b2a;
margin-bottom: 40px;
}
.accordion-item {
border-radius: 8px;
border: 1px solid #dee2e6;
margin-bottom: 15px;
overflow: hidden;
}
.faq-section .accordion-button {
font-weight: 600;
font-size: 1rem;
border: none;
background-color: transparent !important;
border: none !important;
outline: none;
box-shadow: none !important;
color: #000;
font-size: 22px;
font-weight: 600;
line-height: normal;
}
.faq-section .accordion-body {
color: #666565;
font-size: 16px;
font-weight: 400;
line-height: 26px;
padding-top: 0;
}
.faq-section .accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 20.5V0.5H11V20.5H9Z' fill='%233D3D3D'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-1.90735e-06 9.5L20 9.5L20 11.5L-1.99477e-06 11.5L-1.90735e-06 9.5Z' fill='%233D3D3D'/%3E%3C/svg%3E") !important;
transition: all 0.3s ease-in-out;
}
.faq-section .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='3' viewBox='0 0 20 3' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-1.90735e-06 0.499999L20 0.5L20 2.5L-1.99477e-06 2.5L-1.90735e-06 0.499999Z' fill='%233D3D3D'/%3E%3C/svg%3E") !important;
}
.faq-section .accordion-item {
border-radius: 10px !important;
border: 1px solid rgba(74, 84, 137, 0.3);
}
.faq-section .accordion-item:first-of-type {
border-radius: 10px !important;
}
.faq-section .card {
border-radius: 10px !important;
border: 1px solid rgba(74, 84, 137, 0.3) !important;
}
.faq-section .faq-icon {
margin-bottom: 40px;
}
.faq-section .card h5 {
color: #000;
font-size: 22px;
font-weight: 600;
line-height: normal;
margin-bottom: 20px;
}
.faq-section .card p {
color: #626262;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.faq-section .card a {
padding: 25px 20px;
display: inline-block;
border-radius: 10px;
background: #4585a5;
color: #fff;
text-align: center;
font-size: 22px;
font-weight: 600;
line-height: normal;
width: 88%;
margin: 0 auto;
margin-top: 70px;
text-transform: capitalize;
}
.contact-box {
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 30px;
text-align: center;
}
.contact-box .icon {
font-size: 50px;
color: #404980;
margin-bottom: 15px;
}
.contact-box h5 {
font-weight: 600;
margin-bottom: 10px;
}
.contact-box p {
font-size: 0.95rem;
color: #6c757d;
margin-bottom: 20px;
}
.contact-box .btn {
background-color: #404980;
color: white;
font-weight: 600;
border-radius: 6px;
padding: 10px 25px;
}
.contact-box .btn:hover {
background-color: #2f3561;
}
@media (max-width: 991px) {
.faq-section-title {
font-size: 48px;
}
}
@media (max-width: 768px) {
.faq-section-title {
font-size: 32px;
}
.faq-section .accordion-button {
font-size: 18px;
}
.faq-section .accordion-body {
font-size: 14px;
}
.faq-section .card a {
width: 60%;
font-size: 18px;
padding: 18px 10px;
margin-top: 30px;
}
.faq-section .card .card-body {
padding: 30px 10px;
}
}
.size-category-title {
margin-bottom: 1rem;
color: #4585a5;
font-size: 24px;
font-weight: 700;
}
.chart-card {
border-radius: 12px;
border: 1px solid rgba(74, 84, 137, 0.3);
padding: 12px;
background-color: #fff;
min-height: 578px;
}
.chart-table {
width: 100%;
margin-bottom: 1rem;
}
.chart-table th,
.chart-table td {
text-align: center;
font-size: 0.9rem;
padding: 0.5rem;
}
.chart-note {
font-size: 0.85rem;
margin-top: 1rem;
}
.full-size-button {
color: #fff;
padding: 9px 16px;
display: block;
width: 35%;
margin: 0 auto;
margin-top: 20px;
border-radius: 5.5px;
border: 1px solid #4585a5;
background: #213f60;
text-align: center;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.chart-card .img-fluid {
width: 100%;
}
.scott-chart-card {
min-height: 336px;
}
@media (max-width: 1199px) {
.full-size-button {
width: 45%;
}
}
.DeliveryCostList {
margin-top: 20px;
}
.DeliveryCostList ul {
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.DeliveryCostList ul li {
padding: 8px 12px;
background-color: #d2d2d2;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
}
.delivery-collaps-above.same-as-above {
top: 18px;
z-index: 9;
}
.category-reset {
background-color: #213f60;
font-weight: 400;
font-size: 14px;
}
.SizeCartBtn {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 10px;
border-radius: 5px;
border: 1px solid #4585a5;
color: #213f60;
font-size: 14px;
font-weight: 400;
line-height: normal;
background-color: transparent;
cursor: pointer;
margin-bottom: 20px;
}
.SizeCartBtn svg {
margin-right: 5px;
}
.size-chart-modal .modal-content {
border-radius: 12px;
padding: 20px;
}
.size-chart-modal .modal-header {
border-bottom: none;
justify-content: center;
color: #213f60;
text-align: center;
font-size: 35px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
padding-bottom: 0;
}
.size-chart-modal .modal-header img {
width: 100px;
}
.size-chart-modal .modal-body {
padding-top: 0;
}
.size-chart-modal .modal-title {
font-weight: 700;
font-size: 28px;
color: #0c2242;
}
.size-chart-modal .btn-close {
background: none;
opacity: 1;
position: absolute;
right: 20px;
top: 20px;
}
.size-chart-modal .btn-close::before {
content: "\00D7";
/* X symbol */
font-size: 28px;
color: red;
}
.size-chart-title {
/* color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 8px;
border-radius: 10px 10px 0 0;
background: #eaeaea;
padding: 8px 20px; */
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
text-transform: uppercase;
text-align: center;
}
.size-chart-table {
border-radius: 10px;
border: 1px solid #d5d5d5;
background: #fff;
overflow: hidden;
margin-bottom: 20px;
}
.size-chart-table-wrapper,
.shoes-chart-table-wrapper {
padding: 0 10px;
}
.size-chart-table-wrapper .table,
.shoes-chart-table-wrapper .table {
border: none;
border-radius: 8px;
margin-bottom: 20px;
}
.size-chart-table-wrapper .table th,
.shoes-chart-table-wrapper .table th {
background-color: #fff;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
color: #000;
text-wrap: nowrap;
}
.size-chart-table-wrapper .table th:first-child {
text-align: left;
}
.size-chart-table-wrapper .table th:nth-child(2) {
text-align: left;
}
.size-chart-table-wrapper .table td:first-child {
text-align: left;
}
.size-chart-table-wrapper .table td:nth-child(2) {
text-align: left;
}
.table .second-tr td:nth-child(2) {
text-align: center;
}
.size-chart-table-wrapper .table td,
.shoes-chart-table-wrapper .table td {
color: #434343;
font-size: 14px;
font-weight: 400;
line-height: normal;
border-color: #c2c2c2 !important;
text-wrap: nowrap;
}
@media (min-width: 992px) {
.size-chart-modal .modal-lg,
.modal-xl {
max-width: 1000px;
}
}
@media (max-width: 1199px) {
.size-chart-modal .modal-body {
padding: 0 !important;
}
}
.rentmy-nav-manu {
display: flex;
list-style: none;
gap: 20px;
margin: 0;
padding: 0;
}
.rentmy-nav-manu .nav-submenu {
position: absolute;
min-width: 220px !important;
height: auto;
padding: 20px 0px;
background-color: #fff;
transform: perspective(600px) rotateX(-90deg);
transform-origin: 0 0 0;
right: auto;
opacity: 0;
visibility: hidden;
transition: 0.5s;
z-index: 99;
top: 30px !important;
text-align: left;
border-top: 2px solid #4585a5;
left: -174px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
@media (max-width: 822px) {
.rentmy-nav-manu .nav-submenu {
left: -4px;
}
}
@media (max-width: 568px) {
.rentmy-nav-manu .nav-submenu {
left: unset;
z-index: 99999;
right: 0;
}
.RentMyCartTable tr td .CartItemTitle {
text-wrap: nowrap;
}
}
.rentmy-nav-manu li:hover .nav-submenu {
visibility: visible;
opacity: 1;
transform: perspective(600px) rotateX(0);
}
.RentMyTable thead th:first-child,
.RentMyTable thead th:nth-child(3) {
text-align: left;
}
.RentMyMiniCart .icon-area .count {
top: -4px;
}
.btn[type="button"][disabled],
.btn[disabled],
.btn[type="submit"][disabled],
.btn[type="reset"][disabled],
button[type="button"][disabled],
button[disabled],
button[type="submit"][disabled],
button[type="reset"][disabled] {
opacity: 0.5;
cursor: no-drop;
}
.cdn_global_loader {
z-index: 999999999;
}
.RentMyCartTable tr td .CartItemTitle {
font-size: 16px;
margin-bottom: 10px;
display: inline-block;
}
.clothing-tab-buttons {
border-bottom: 1px solid #4585a5;
margin-bottom: 40px;
}
.clothing-tab-buttons .nav-link {
padding: 15px;
border: none;
background-color: transparent;
color: #213f60;
font-size: 22px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.clothing-tab-buttons .nav-link.active {
background-color: transparent;
border-bottom: 2px solid #4585a5;
}
/* about page */
.about-section .section-title,
.why-us .section-title {
color: #000;
text-align: center;
font-size: 50px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 40px;
}
.about-text h2 {
color: #000;
font-size: 36px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 30px;
}
.about-text p {
color: #213f60;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px;
margin-bottom: 55px;
}
.btn-custom {
border-radius: 5px;
background: #4585a5;
padding: 19px 56px;
font-weight: 600;
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: normal;
}
.btn-custom:hover {
background-color: #3a3d73;
color: #fff;
}
.why-us {
padding-bottom: 85px !important;
}
.why-us .feature-card {
padding: 20px 25px;
height: 100%;
border-radius: 5px;
border: 0.7px solid rgba(74, 84, 137, 0.3);
box-shadow:
0 77.857px 57.143px 0 rgba(11, 102, 73, 0.03),
0 50.463px 33.466px 0 rgba(11, 102, 73, 0.02),
0 29.989px 18.201px 0 rgba(11, 102, 73, 0.02),
0 15.571px 9.286px 0 rgba(11, 102, 73, 0.01),
0 6.344px 4.656px 0 rgba(11, 102, 73, 0.01),
0 1.442px 2.249px 0 rgba(11, 102, 73, 0.01);
}
.feature-card h5 {
margin-bottom: 0.8rem;
color: #213f60;
font-size: 30px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.feature-card p {
color: #808080;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-bottom: 0;
}
@media (max-width: 991px) {
.why-us {
padding-top: 0 !important;
}
.btn-custom {
display: inline-block;
margin-bottom: 10px;
}
}
.blog-main-title {
color: #213f60;
font-size: 70px;
font-weight: 700;
line-height: normal;
letter-spacing: -1.4px;
text-transform: uppercase;
margin-bottom: 10px;
}
.content-top-text {
border-bottom: 1px solid #d3d3d3;
padding-bottom: 5px;
margin-bottom: 30px;
}
.content-top-text p {
color: #4d4d4d;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.blog-list-content h3 {
font-size: 30px;
font-weight: 500;
line-height: normal;
margin-bottom: 5px;
padding-bottom: 0px;
z-index: 99;
}
.blog-main-title::after {
content: none;
}
.blog-list-content p {
color: #fff;
font-size: 12px;
font-weight: 400;
line-height: 26px;
margin-bottom: 25px;
z-index: 99;
}
.blog-list-content .tabs .content img {
height: 350px;
}
[selector="blog_page_tags"] [selector="single_tag"] {
border-radius: 2px;
background: #f5f5f5;
height: 30px;
color: #213f60;
font-size: 14px;
font-weight: 400;
line-height: normal;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 20px;
border: 0.5px solid #ebebeb;
min-width: 80px;
margin-right: 10px;
text-transform: capitalize;
}
[selector="blog_page_tags"] [selector="single_tag"].selected {
background: #4585a5;
color: #fff;
font-weight: 600;
}
.innerpage-menu-header-CustomerOrderHistory {
background: #4585a5;
padding: 6px 10px;
border-radius: 4px 4px 0 0;
width: 100%;
min-height: 100px;
display: flex;
align-items: center;
gap: 26px;
}
.offcanvas-body {
padding: 0 !important;
}
.nav-submenu ul {
background-color: #f7f8fb;
margin: 0;
padding: 0;
list-style: none;
}
.nav-submenu li {
text-transform: uppercase;
border-bottom: 1px solid #eee;
}
.nav-submenu li:last-child {
border-bottom: none;
}
.nav-submenu li a {
display: block;
padding: 10px 30px;
text-decoration: none;
color: #555;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
}
.blog-details-section {
padding: 50px 0;
}
.blog-details-content h3 {
font-size: 30px;
font-weight: 700;
line-height: normal;
margin-bottom: 18px;
color: #213f60;
}
.blog-details-content p {
color: #4d4d4d;
font-size: 16px;
font-weight: 400;
line-height: 26px;
margin-bottom: 10px;
padding: 0;
}
.blog-details-content ul {
padding-left: 30px;
}
.blog-details-title {
color: #fff;
font-size: 50px;
font-weight: 700;
text-transform: capitalize;
}
.RentMyContentBodyInner__modify {
padding: 20px;
}
#RentMyCustomerProfileContainer
.RentmyCustomerAddessList
.FlexHeader
.addAddress {
height: 40px;
font-size: 14px;
}
.menu-item.has-submenu > a[rentmy-menu-anchor-sample]::after {
content: "";
float: right;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,")
no-repeat center;
transition: transform 0.2s ease;
transform: rotate(90deg);
}
.menu-item.has-submenu.open > a[rentmy-menu-anchor-sample]::after {
transform: rotate(-90deg);
/* right arrow becomes down */
}
.anp-badge-group {
position: relative;
}
.anp-badge-group::before {
content: "$";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
color: #575962;
font-weight: 400;
font-size: 16px;
pointer-events: none;
background: #f4f5f8;
width: 38px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
/* Give inputs space for the badge */
.anp-group input[type="number"],
.AnpVariationBasePrice,
.AnpVariationPrice {
padding-left: 3rem;
}
.productBasePrice {
padding-left: 3rem !important;
}
.has-submenu > [rentmy-sub-menu-area] {
height: 0;
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
}
.has-submenu.open > [rentmy-sub-menu-area] {
height: auto;
opacity: 1;
visibility: visible;
transition: all 500ms ease;
}
.OrderSummaryTitle {
text-align: left;
margin-bottom: 15px;
}
.RentMyCartSummeryInner {
border: 1px solid #d3d3d3;
border-radius: 6px;
}
.RentMyCartSummeryTable tbody td:nth-child(2) {
width: auto !important;
}
.RentMyCartSummeryTable thead th:nth-child(3) {
text-align: center;
}
/* Variant Dropdown Styling */
.anp-dropdown-wrapper {
position: relative;
width: 100%;
}
.anp-dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 14px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
color: #424242;
transition: all 0.2s ease;
user-select: none;
}
.anp-dropdown-toggle:hover {
border-color: #b3b3b3;
background-color: #f9f9f9;
}
.anp-dropdown-toggle.active {
border-color: #213f60;
box-shadow: 0 0 0 3px rgba(33, 63, 96, 0.1);
}
.anp-dropdown-icon {
color: #999;
transition: transform 0.2s ease;
flex-shrink: 0;
margin-left: 8px;
}
.anp-dropdown-toggle.active .anp-dropdown-icon {
transform: rotate(180deg);
color: #213f60;
}
.anp-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 6px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 100;
display: none;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
max-height: 300px;
overflow-y: auto;
}
.anp-dropdown-menu.show {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.anp-dropdown-search {
border: none;
border-bottom: 1px solid #e0e0e0;
border-radius: 0;
padding: 10px 12px;
font-size: 14px;
margin: 0;
box-shadow: none;
}
.anp-dropdown-search:focus {
border-color: #213f60;
box-shadow: none;
outline: none;
}
.anp-dropdown-list {
list-style: none;
padding: 0;
margin: 0;
}
.anp-dropdown-item {
padding: 10px 14px;
color: #424242;
font-size: 14px;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: center;
gap: 8px;
}
.anp-dropdown-item:hover {
background-color: #f5f5f5;
color: #213f60;
}
.anp-dropdown-item.active {
background-color: #e8f0f7;
color: #213f60;
font-weight: 600;
}
.anp-dropdown-item span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
}
.anp-dropdown-text {
color: #424242;
font-weight: 400;
flex-grow: 1;
text-align: left;
}
.anp-dd {
position: relative;
width: 100%;
}
/* Trigger */
.anp-dd-trigger {
width: 100%;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
padding: 10px 12px;
height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
gap: 10px;
cursor: pointer;
transition: 0.2s ease;
box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
}
.anp-dd-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.anp-dd-icon {
font-size: 1rem;
color: #334155;
flex: 0 0 auto;
}
.anp-dd-text {
font-size: 14px;
font-weight: 400;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.anp-dd-right {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.anp-dd-arrow {
font-size: 14px;
color: #64748b;
transition: 0.2s ease;
}
/* Panel */
.anp-dd-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 10px;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
display: none;
z-index: 999;
}
.anp-dd-panel.top {
top: unset;
bottom: 50px;
}
/* Open state */
.anp-open {
display: block;
}
.anp-open .anp-dd-arrow {
transform: rotate(180deg);
}
/* Search box inside */
.anp-dd-search {
position: relative;
margin-bottom: 10px;
}
.anp-dd-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 0.95rem;
pointer-events: none;
}
.anp-dd-input {
padding-left: 34px;
border-radius: 12px;
font-size: 0.92rem;
}
/* List */
.anp-dd-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 210px;
overflow: auto;
}
.anp-dd-item {
padding: 10px 10px;
border-radius: 12px;
font-weight: 400;
font-size: 14px;
color: #0f172a;
cursor: pointer;
transition: 0.15s ease;
}
.anp-dd-item.selected {
background-color: #f3f3f3;
}
.anp-dd-item:hover {
background: #f1f5f9;
}
.anp-dd-item.active {
background: #e0f2fe;
color: #075985;
}
.anp-col-photo-preview .photo-preview-box {
width: 60px;
height: 60px;
border-radius: 6px;
border: 1px solid #e0e0e0;
position: relative;
}
.anp-col-photo-preview .photo-preview-box img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.anp-col-photo-preview .photo-preview-box .photo-preview-remove {
position: absolute;
top: -8px;
right: -8px;
background: #ff4d4f;
color: #fff;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
border: 1px solid #e0e0e0;
}
@media (max-width: 768px) {
.blog-main-title {
font-size: 48px;
}
.blog-details-content p {
padding: 0;
}
.blog-details-section img {
padding: 0;
}
}
.RentMyWrapperInpageCartWidget .SidebarSummery .Button {
text-transform: capitalize !important;
}
.custom-dropdown {
position: relative;
width: 100%;
height: 55px;
}
/* Dropdown button */
.dropdown-toggle {
width: 100%;
height: 100%;
padding: 0 20px;
background-color: #fff;
color: #424242;
border-radius: 5px;
border: 1px solid #e0e0e0;
cursor: pointer;
text-align: left;
font-size: 16px;
font-weight: 400;
display: flex;
align-items: center;
overflow: hidden;
font-family: "Roboto", sans-serif !important;
}
/* Dropdown menu */
.dropdown-menu {
display: block;
position: absolute;
width: 100%;
top: 92%;
left: 0;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #cecece;
background: #fff;
box-shadow: 0 7px 7px -5px rgba(0, 0, 0, 0.25);
z-index: 1000;
transition: all 50ms ease;
max-height: 300px;
overflow-y: auto;
}
/* Each item */
.dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-bottom: 1px solid #eee;
cursor: pointer;
user-select: none;
}
.dropdown-item input.quantity-input {
border-radius: 0px !important;
outline: none !important;
padding: 0px 5px;
text-align: center;
width: 50px;
border-top: transparent;
border-bottom: transparent;
border-color: #787878;
}
.dropdown-item:last-child {
border-bottom: none;
}
/* Left label with checkbox */
.dropdown-item label {
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
/* Counter buttons */
.counter {
display: flex;
align-items: center;
gap: 8px;
border-radius: 5px;
border: 1px solid #7e7777;
padding: 0 0px;
user-select: none;
}
.counter button {
border: none;
background: transparent;
height: 20px;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
line-height: 1;
font-weight: bold;
user-select: none;
}
.counter button:first-child {
padding-left: 9px;
}
.counter button:last-child {
padding-right: 9px;
}
.counter span {
min-width: 18px;
text-align: center;
font-size: 16px;
font-weight: 500;
user-select: none;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: transparent;
}
.dropdown-item:focus,
.dropdown-item:hover {
background-color: transparent;
}
.dropdown-toggle {
display: flex;
justify-content: start;
gap: 2px;
flex-wrap: wrap;
}
.dropdown-toggle button {
border: 1px solid #e1e1e1;
background-color: white;
border-radius: 5px;
color: #333333;
}
.size-chart {
width: 100%;
border-collapse: collapse;
}
.size-chart th,
.size-chart td {
padding: 10px;
text-align: center;
}
.size-chart th {
border: 1px solid #000000 !important;
font-size: 18px;
}
.size-chart td {
border: 1px solid #000000;
border-bottom: none;
font-size: 16px;
}
.size-chart thead th:first-child {
text-align: left;
}
.size-chart thead th {
background-color: #f8f8f8;
font-weight: 800;
}
.size-chart tbody td:first-child {
text-align: left;
}
.size-chart tbody td:first-child strong {
font-weight: 800;
}
.size-chart tbody tr:last-child td {
border-bottom: 1px solid #000000;
}
.size-chart tbody tr:nth-child(2) td {
background: #f8f8f8;
}
.size-chart tbody tr:nth-child(4) td {
background: #f8f8f8;
}
.size-chart-table-wrapper .note {
font-size: 16px;
color: #000000;
font-style: italic;
text-align: center;
margin-top: 5px;
font-weight: 700;
}
#RentMyCustomerLoginContainer,
#RentMyCustomerRegistrationContainer,
#RentMyResetPasswordContainer {
margin-top: 0;
}
#RentMyCustomerLoginContainer,
#RentMyResetPasswordContainer {
padding: 100px 0;
}
#dynamic_page_contents {
min-height: auto;
}
#RentMyCustomerLoginContainer .LoginBtn {
background: linear-gradient(90deg, #4585a5 50%, #213f60 0) !important;
background-position: 100% 100% !important;
background-size: 200% 100% !important;
transition: all 500ms ease;
border: none !important;
}
#RentMyCustomerLoginContainer .LoginBtn:hover {
background-position: 0 100% !important;
}
.RentMyWrapper .RentMySubmitBtn,
#RentMyCustomerRegistrationContainer .RegistrationBtn {
background: linear-gradient(90deg, #4585a5 50%, #213f60 0) !important;
background-position: 100% 100% !important;
background-size: 200% 100% !important;
transition: all 500ms ease;
border: none !important;
}
.RentMyWrapper .RentMyBtn:hover,
#RentMyCustomerRegistrationContainer .RegistrationBtn:hover {
background-position: 0 100% !important;
}
#RentMyResetPasswordContainer .RentMyReturnBtn {
background: linear-gradient(90deg, #4585a5 50%, #960000 0) !important;
background-position: 100% 100% !important;
background-size: 200% 100% !important;
transition: all 500ms ease;
border: none !important;
}
#RentMyResetPasswordContainer .RentMyReturnBtn:hover {
background-position: 0 100% !important;
}
#RentMyResetPasswordContainer .Contents,
#RentMyCustomerRegistrationContainer .RegistrationElement,
#RentMyCustomerLoginContainer .LoginElement {
border: 1px solid #e0e0e0;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
#RentMyResetPasswordContainer .RentMyInputField,
#RentMyCustomerRegistrationContainer .RentMyInputField,
#RentMyCustomerLoginContainer .RentMyInputField,
#RentMyCustomerProfileContainer .RentMyInputField {
border: 1px solid #e0e0e0;
}
#RentMyCustomerProfileContainer .RentmyCustomerAddessList .FlexHeader {
align-items: center;
}
#RentMyCustomerRegistrationContainer .RegistrationElement {
width: 600px;
}
.container-inner-overlay-blog {
padding: 95px 0;
}
.blog-details-title {
font-size: 60px !important;
}
.rentmy-innerpage-banner ul {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.RentMyWrapper .RentMyBtn {
transition: all 500ms ease;
}
.RentMyWrapper .RentMyBtn:hover {
background-color: #4585a5 !important;
}
.RentMyMiniCart .MiniContinueShoppingBtn,
.RentMyMiniCart .MiniCartBtn {
background-color: #4585a5 !important;
transition: all 500ms ease;
border: none !important;
}
.FullfillmentTabList ul li a.TabActive .fullfilment-btn,
.RentMyGetShippingBtn,
main.box > div.start-date,
main.box > div.end-date,
.switch,
main.box > div:not(.offset-date).active,
.btn-apply {
background-color: #4585a5 !important;
}
.FullfillmentTabList ul li a.TabActive h5 {
color: #4585a5 !important;
}
.RentMyMiniCart .RentMyCartNamePrice span,
.RentMyCartTotalPrice span {
color: #000000;
}
.PackageSingleProduct .form-control {
border-radius: 4px !important;
cursor: pointer !important;
background-color: transparent;
appearance: auto;
margin: 0;
border: none;
padding: 0;
height: auto;
}
.RentMyWrapperInpageCartWidget #InpageCartWidgetLauncher #launcher-icon,
.RentMyWrapperInpageCartWidget .branded,
.RentMyWrapperInpageCartWidget .branded:before,
.RentMyWrapperInpageCartWidget .branded:after {
background-color: #4585a5 !important;
}
.RentMyProductPackageAreaInner {
border-radius: 6px;
overflow: hidden;
}
.RentMyMiniCart .RentMyCartItem img,
.RentMyMiniCart .RentMyCartBody,
.RentMyFilterAreaInner {
border-radius: 4px;
}
.RentMyFilterAreaInner {
overflow: hidden;
}
.product-payment-details {
padding-right: 8px;
}
.PakageProductVarientInner select {
margin-right: 0;
border: none;
}
.PakageProductVarientInner {
padding: 6px 5px 6px 8px;
border-radius: 4px !important;
cursor: pointer !important;
border: 1px solid var(--rentmy-border, var(--rentmy-border-default));
height: 46px;
}
.RentMyProductPackageArea h6 {
margin-bottom: 10px;
}
.RentMyProductPackageArea h6 {
background-color: #4585a5 !important;
color: #fff;
}
@media (max-width: 767px) {
.RentMyProductDetailsImgList ul li.ActiveImg {
border: none !important;
}
}
.RentMyOrderCompleteWrapper {
padding-top: 55px;
padding-bottom: 65px;
}
.RentMyOrderCompleteWrapper .MessageTitle h1 {
color: #4585a5 !important;
}
.RentMyCartTable tr td img {
object-fit: contain;
}
.call-text {
font-size: 14px;
color: #555;
display: flex;
align-items: center;
gap: 5px;
margin-left: 8px;
}
.RentMyCustomPortalRow__modify {
flex-direction: column;
}
.RentMyLeftSidebarmenu__modify {
width: 100%;
}
.RentMySideMenu__modify {
display: flex;
align-items: center;
overflow-x: auto;
}
.RentMySideMenu__modify ul {
display: flex;
align-items: center;
gap: 10px;
}
.RentMySideMenu__modify ul li a {
font-size: 14px;
font-weight: 400;
padding: 16px 24px;
border-bottom: none;
display: flex;
align-items: center;
gap: 8px;
}
.RentMySideMenu__modify ul li a.active {
background-color: transparent;
border-bottom: 1px solid #8200da;
color: #8200da;
}
.RentMyRightContent__modify {
background-color: transparent;
border: none;
}
.RentMyCustomerPortalWrapper__modify {
padding-top: 40px;
}
:root {
--brand: #8200da;
--text: #0a0a0a;
--muted: #6b7280;
--border: #e5e7eb;
--bg: #f6f7fb;
}
/* Page */
.si-page {
background: var(--bg);
min-height: 100vh;
}
.si-container {
padding: 28px 0px;
}
.si-shell {
margin: 0 auto;
}
/* Top search bar */
.si-topbar {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px;
display: flex;
gap: 12px;
align-items: center;
}
.si-search-wrap {
flex: 1;
position: relative;
}
.si-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 18px;
}
.si-search-input {
padding-left: 15px;
border-radius: 10px;
border: 1px solid var(--border);
height: 42px;
}
.si-top-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.si-btn {
border-radius: 10px;
height: 42px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border);
background: #fff;
color: var(--text);
padding: 0 16px;
font-weight: 400;
font-size: 14px;
}
.si-btn-primary {
background: var(--brand);
border-color: var(--brand);
color: #fff;
padding: 0 18px;
}
.si-btn-primary:hover {
filter: brightness(0.98);
}
/* Content panel */
.si-content {
margin-top: 18px;
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
}
/* Static status row (no tabs) */
.si-status-row {
display: flex;
align-items: center;
gap: 4px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
padding: 0 16px;
}
.si-status-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 400;
color: #374151;
position: relative;
padding: 18px 25px;
cursor: pointer;
}
.si-status-item.is-active {
color: var(--brand);
}
.si-status-item.is-active::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 2px;
width: 100%;
background: var(--brand);
}
.si-count-pill {
font-size: 12px;
font-weight: 400;
color: #374151;
background: #f3f4f6;
padding: 2px 8px;
border-radius: 4px;
}
/* Selection Action Bar */
.si-selection-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
background: #faf5ff;
}
.si-selection-bar-left {
display: flex;
align-items: center;
gap: 16px;
}
.si-selection-bar-right {
display: flex;
align-items: center;
}
.si-selection-count {
font-size: 14px;
font-weight: 400;
color: #59168b;
}
.si-selection-action-btn {
background: var(--brand);
color: #fff;
border: none;
border-radius: 10px;
padding: 8px 24px;
font-size: 14px;
font-weight: 400;
cursor: pointer;
transition: background 0.2s ease;
}
.si-selection-action-btn:hover {
background: #6d28d9;
}
.si-selection-cancel-btn {
background: none;
border: none;
color: var(--brand);
font-size: 14px;
font-weight: 400;
cursor: pointer;
padding: 8px 4px;
transition: color 0.2s ease;
}
.si-selection-cancel-btn:hover {
color: #6d28d9;
text-decoration: underline;
}
@media (max-width: 575.98px) {
.si-selection-bar {
flex-direction: column;
gap: 12px;
padding: 12px 16px;
align-items: flex-start;
}
.si-selection-bar-left {
flex-wrap: wrap;
gap: 10px;
}
.si-selection-action-btn {
font-size: 13px;
padding: 8px 18px;
}
}
/* Product card checkbox */
.si-card-checkbox {
position: absolute;
top: 12px;
left: 12px;
z-index: 12;
width: 22px;
height: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.si-card-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.si-card-checkbox-mark {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #d1d5dc;
background: rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.si-card-checkbox-mark::after {
content: "";
display: none;
width: 6px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -2px;
}
.si-card-checkbox:hover .si-card-checkbox-mark {
border-color: var(--brand);
background: rgba(124, 58, 237, 0.15);
}
.si-card-checkbox input[type="checkbox"]:checked ~ .si-card-checkbox-mark {
background-color: var(--brand);
border-color: var(--brand);
}
.si-card-checkbox
input[type="checkbox"]:checked
~ .si-card-checkbox-mark::after {
display: block;
}
/* ─── Return/Withdrawal Request Modal ─── */
.rrw-dialog {
max-width: 450px;
}
.rrw-content {
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}
.rrw-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 28px 20px;
border-bottom: 1px solid #f0f0f0;
}
.rrw-title {
font-size: 20px;
font-weight: 700;
color: #1f2937;
margin: 0;
line-height: 1.3;
}
.rrw-close-btn {
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.2s;
display: flex;
}
.rrw-close-btn:hover {
color: #6b7280;
}
.rrw-body {
padding: 28px;
}
.rrw-section {
margin-bottom: 0;
}
/* Alert */
.rrw-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
background: #faf5ff;
border-radius: 14px;
margin-bottom: 28px;
}
.rrw-alert svg {
color: var(--brand);
flex-shrink: 0;
margin-top: 1px;
}
.rrw-alert span {
font-size: 14px;
color: #59168b;
line-height: 1.55;
}
/* Section label */
.rrw-section-label {
font-size: 12px;
font-weight: 700;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 14px;
display: block;
}
/* Shipping options */
.rrw-shipping-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.rrw-shipping-option {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border: 2px solid #e5e7eb;
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: all 0.2s ease;
margin: 0;
}
.rrw-shipping-option:hover {
border-color: #c4b5fd;
background: #faf8ff;
}
.rrw-shipping-option.rrw-shipping-active {
border-color: var(--brand);
background: #faf5ff;
}
.rrw-shipping-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.rrw-shipping-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #9ca3af;
}
.rrw-shipping-active .rrw-shipping-icon {
color: var(--brand);
}
.rrw-shipping-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.rrw-shipping-name {
font-size: 15px;
font-weight: 700;
color: #1f2937;
}
.rrw-shipping-desc {
font-size: 13px;
color: #9ca3af;
}
.rrw-shipping-check {
flex-shrink: 0;
color: #d1d5db;
display: flex;
transition: color 0.2s;
}
.rrw-shipping-active .rrw-shipping-check {
color: var(--brand);
}
/* Footer */
.rrw-footer {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 28px 28px;
border-top: 1px solid #f0f0f0;
}
.rrw-btn-cancel {
flex: 1;
padding: 14px 20px;
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #fff;
color: #374151;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.rrw-btn-cancel:hover {
background: #f9fafb;
border-color: #d1d5db;
}
.rrw-btn-submit {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 20px;
border: none;
border-radius: 14px;
background: var(--brand);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
}
.rrw-btn-submit:hover {
opacity: 0.9;
}
/* Responsive */
@media (max-width: 575.98px) {
.rrw-dialog {
max-width: calc(100% - 24px);
margin: 12px;
}
.rrw-header {
padding: 20px 20px 16px;
}
.rrw-title {
font-size: 17px;
}
.rrw-body {
padding: 20px;
}
.rrw-shipping-option {
padding: 14px 16px;
gap: 12px;
}
.rrw-shipping-icon {
width: 36px;
height: 36px;
}
.rrw-footer {
padding: 16px 20px 20px;
}
}
/* Product grid */
.si-grid {
padding: 24px;
}
.si-card {
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
height: 100%;
display: flex;
flex-direction: column;
}
.si-card-media {
position: relative;
aspect-ratio: 3 / 4;
background: #f3f4f6;
overflow: hidden;
}
.si-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.si-badge {
position: absolute;
top: 12px;
right: 12px;
font-weight: 400;
font-size: 12px;
padding: 0px 8px;
height: 22px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(6px);
}
.si-badge.extra {
right: 38px;
}
.si-badge-active {
background: #dcfce7;
color: #008236;
}
.si-badge-grey {
background: #e4e4e4;
color: #333333;
padding: 0px 4px;
}
.si-badge-rented {
background: #dbeafe;
color: #1447e6;
}
.si-card-body {
padding: 14px 14px 8px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.si-title {
font-size: 14px;
font-weight: 400;
color: var(--text);
margin: 0;
}
.si-brand {
font-size: 12px;
color: var(--muted);
margin: 0;
font-weight: 400;
}
.si-card-footer {
padding: 0 14px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.si-price {
font-weight: 400;
color: var(--text);
font-size: 14px;
}
.si-sku {
font-weight: 400;
color: #9ca3af;
font-size: 12px;
letter-spacing: 0.6px;
}
/* Responsive */
@media (max-width: 575.98px) {
.RentMySideMenu__modify ul {
overflow-x: auto;
}
.RentMySideMenu__modify ul li a {
text-wrap: nowrap;
}
.si-topbar {
flex-direction: column;
align-items: stretch;
}
.si-top-actions {
width: 100%;
}
.si-btn,
.si-btn-primary {
width: 100%;
justify-content: center;
}
.si-status-row {
gap: 14px;
}
.si-status-item.is-active::after {
bottom: -13px;
}
}
/* Header */
.anp-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.anp-title-wrap {
display: flex;
flex-direction: column;
gap: 6px;
}
.anp-title {
font-size: 24px;
line-height: 1.1;
font-weight: 500;
margin: 0;
letter-spacing: -0.5px;
}
.anp-step {
font-size: 18px;
color: #4b5563;
font-weight: 500;
margin: 0;
}
.anp-close-btn {
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid transparent;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
line-height: 1;
color: #111827;
}
.anp-close-btn:hover {
background: #f3f4f6;
border-color: #e5e7eb;
}
.anp-divider {
margin: 22px 0 20px;
border-top: 1px solid var(--border);
}
/* Progress */
.anp-progress {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 26px;
}
.anp-progress-seg {
height: 6px;
border-radius: 999px;
background: var(--muted);
flex: 1;
overflow: hidden;
}
.anp-progress-seg.active {
background: var(--brand);
}
/* Section title */
.anp-section-title {
font-size: 22px;
font-weight: 500;
margin: 0 0 12px;
}
.anp-label {
font-weight: 600;
color: #374151;
margin-bottom: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.anp-required {
color: #ef4444;
font-weight: 800;
}
.anp-info-icon {
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid #cbd5e1;
color: #64748b;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
}
.anp-label-text {
margin-bottom: 6px;
display: block;
font-size: 16px;
}
.anp-input,
.anp-select {
height: 45px;
border-radius: 8px;
border: 1px solid #d1d5db;
padding: 0 18px;
font-size: 16px;
margin-top: 0;
background-color: transparent !important;
}
.anp-input::placeholder {
color: #9ca3af;
}
.anp-input:focus,
.anp-select:focus {
border-color: rgba(111, 44, 255, 0.55);
box-shadow: 0 0 0 0.2rem rgba(111, 44, 255, 0.15);
}
/* Description field with AI icon (top-right) */
.anp-group-description .anp-label-description {
display: block;
margin-bottom: 10px;
}
.anp-description-wrap {
position: relative;
width: 100%;
}
.anp-input-description {
min-height: 100px;
height: auto;
padding: 14px 44px 14px 18px;
resize: vertical;
display: block;
width: 100%;
}
.anp-input-description:focus {
border-color: rgba(111, 44, 255, 0.55);
box-shadow: 0 0 0 0.2rem rgba(111, 44, 255, 0.15);
}
.anp-description-ai-icon {
position: absolute;
top: 4px;
right: 32px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #8b5cf6;
border-radius: 8px;
background: rgba(139, 92, 246, 0.08);
border: 1px solid #d1d5db;
z-index: 9999;
}
.anp-description-ai-icon svg {
width: 20px;
height: 20px;
}
/* Suggested Rental Price: Hourly, Daily, Weekly, Monthly ($ left, label right) */
.anp-group-rental-prices .anp-label {
margin-bottom: 10px;
}
.anp-rental-price-row {
margin-top: 0;
}
.anp-price-field-wrap {
margin-bottom: 0;
margin-top: 0;
}
.anp-price-field {
display: flex;
align-items: stretch;
width: 100%;
border: 1px solid #d1d5db;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.anp-price-prefix {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
min-width: 38px;
background: #f4f5f8;
color: #575962;
font-size: 16px;
font-weight: 400;
border-right: 1px solid #e5e7eb;
}
.AnpVariationBasePrice,
.AnpVariationPrice {
padding-left: 48px !important;
}
.anp-price-field .anp-input-price {
flex: 1;
min-width: 0;
height: 45px;
border: none;
border-radius: 0;
padding: 0 12px;
padding-left: 10px !important;
padding-right: 10px;
text-align: left;
margin: 0;
border: none !important;
}
.anp-price-field .anp-input-price:focus {
box-shadow: none;
border: none;
outline: none;
}
.anp-group-rental-prices input.anp-input-price {
padding-left: 10px !important;
border: none !important;
}
.anp-price-suffix {
display: inline-flex;
align-items: center;
padding: 0 14px;
background: #f9fafb;
color: #6b7280;
font-size: 15px;
font-weight: 400;
border-left: 1px solid #e5e7eb;
white-space: nowrap;
}
/* Actions */
.anp-actions {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.anp-btn {
height: 42px;
border-radius: 10px;
padding: 0 26px;
font-size: 16px;
font-weight: 400;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d1d5db;
background: #fff;
color: var(--text);
min-width: 100px;
transition: all 500ms ease;
}
.anp-btn:hover {
border-color: #cbd5e1;
background: #f9fafb;
}
.anp-btn-primary {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.anp-btn-primary:hover {
background-color: #8200db;
border-color: #8200db;
}
.AddVariantOption {
background-color: var(--brand);
color: #fff;
}
.AddVariantOption:hover {
background-color: #8200db;
}
/* Photo upload */
.anp-photo-box {
height: 50px;
width: 50px;
border-radius: 8px;
border: 1px dashed #cbd5e1;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
color: #94a3b8;
cursor: pointer;
transition: 0.15s ease-in-out;
}
.anp-photo-box:hover {
border-color: rgba(111, 44, 255, 0.5);
color: rgba(111, 44, 255, 0.9);
background: rgba(111, 44, 255, 0.03);
}
.anp-upload-icon {
font-size: 32px;
}
.anp-ai-generator {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #ffffff;
border-radius: 0.5rem;
background: linear-gradient(to bottom right, #a855f7, #ec4899);
transition: all 0.3s ease;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
border: none;
}
.anp-ai-generator:hover {
background: linear-gradient(to bottom right, #9333ea, #db2777);
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}
.anp-trash-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: all 500ms ease;
color: #ef4444;
flex-shrink: 0;
background-color: #fef2f2;
}
/* .anp-trash-icon:hover {
background-color: #fef2f2;
} */
.asc-content {
padding: 14px;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
#modal_body_vertical_area {
margin-top: 20px;
}
/* Responsive */
@media (max-width: 991.98px) {
.anp-title {
font-size: 34px;
}
.anp-section-title {
font-size: 20px;
}
}
@media (max-width: 575.98px) {
.anp-shell {
padding: 22px 14px 20px;
}
.anp-title {
font-size: 30px;
}
.anp-step {
font-size: 16px;
}
.anp-actions {
align-items: stretch;
margin-top: 15px;
}
.anp-btn,
.anp-btn-primary {
width: 100%;
min-width: auto;
}
}
.anp-apply-section {
margin: 28px 0 18px;
}
.anp-apply-check {
display: flex;
align-items: center;
gap: 12px;
}
.anp-checkbox {
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid #d1d5db;
cursor: pointer;
}
.anp-checkbox:checked {
background-color: #8200db;
border-color: #8200db;
}
.anp-checkbox-label {
font-size: 20px;
font-weight: 500;
color: #374151;
cursor: pointer;
}
/* Pricing Guidance box */
.anp-pricing-guidance {
margin-top: 18px;
padding: 16px;
border-radius: 10px;
background: #faf5ff;
border: 1px solid rgba(111, 44, 255, 0.25);
}
.anp-guidance-title {
font-size: 14px;
font-weight: 400;
color: #59168b;
margin-bottom: 10px;
}
.anp-guidance-text {
font-size: 14px;
line-height: 1.6;
color: #8200db;
margin: 0;
}
/* Responsive */
@media (max-width: 575.98px) {
.anp-checkbox-label {
font-size: 18px;
}
.anp-guidance-text {
font-size: 16px;
}
}
.sd-container {
max-width: 1200px;
margin: auto;
padding: 28px 16px 40px;
}
/* Generic Card */
.sd-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
}
/* ===== Top Stats ===== */
.sd-stat {
padding: 20px;
height: 100%;
}
.sd-stat-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.sd-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
}
.icon-green {
background: rgba(22, 163, 74, 0.12);
color: #16a34a;
}
.icon-gray {
background: rgba(0, 0, 0, 0.06);
color: #374151;
}
.icon-purple {
background: rgba(111, 44, 255, 0.12);
color: #8200db;
}
.sd-stat-label {
font-size: 12px;
font-weight: 400;
color: #6b7280;
}
.sd-amount {
font-size: 30px;
font-weight: 400;
margin-top: 8px;
}
.sd-green-text {
color: #16a34a;
}
.sd-sub {
color: #6b7280;
font-size: 14px;
font-weight: 400;
margin-bottom: 14px;
}
.sd-btn {
background: #16a34a;
color: #fff;
border: none;
height: 36px;
border-radius: 10px;
font-weight: 400;
width: 100%;
font-size: 14px;
}
/* ===== Panels ===== */
.sd-panel-title {
padding: 18px 20px;
border-bottom: 1px solid #e5e7eb;
font-size: 18px;
font-weight: 500;
}
.sd-row {
padding: 24px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.sd-row:last-child {
border-bottom: none;
}
.sd-row-title {
font-weight: 400;
}
.sd-row-date {
font-size: 12px;
color: #6b7280;
}
.sd-plus {
color: #16a34a;
font-weight: 400;
}
.sd-minus {
color: #111827;
font-weight: 400;
}
.sd-footer {
padding: 16px 20px;
border-top: none;
}
.sd-link {
color: #8200db;
font-weight: 400;
font-size: 14px;
text-decoration: none;
}
/* ===== Notifications ===== */
.sd-note {
padding: 24px;
display: flex;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid #e5e7eb;
}
.sd-note:last-child {
border-bottom: none;
}
.sd-note-left {
display: flex;
gap: 14px;
}
.sd-note-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.note-red {
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
}
.note-blue {
background: rgba(37, 99, 235, 0.12);
color: #2563eb;
}
.note-yellow {
background: rgba(245, 158, 11, 0.16);
color: #f59e0b;
}
.sd-note-title {
font-weight: 400;
margin-bottom: 4px;
}
.sd-note-sub,
.sd-note-time {
font-size: 12px;
color: #6b7280;
}
.sd-pill {
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 400;
height: fit-content;
}
.pill-red {
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
}
.pill-blue {
background: rgba(37, 99, 235, 0.12);
color: #2563eb;
}
/* Responsive */
@media (max-width: 575px) {
.sd-amount {
font-size: 30px;
}
.sd-note {
flex-direction: column;
}
}
.manifests-panel {
background: #fff;
border: 1px solid #e7eaf0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}
.manifests-panel-header {
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.manifests-panel-title {
font-size: 18px;
font-weight: 500;
margin: 0;
}
.manifests-divider {
height: 1px;
background: #edf0f5;
}
/* Buttons */
.manifests-btn-create {
background: #d5d8df;
color: #7b8292;
border: none;
border-radius: 10px;
padding: 10px 14px;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: not-allowed;
opacity: 0.9;
white-space: nowrap;
}
.manifests-btn-sort {
border: 1px solid #e7eaf0;
background: #fff;
border-radius: 10px;
padding: 10px 14px;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
/* Toolbar */
.manifests-toolbar {
padding: 14px 20px;
display: flex;
gap: 12px;
align-items: center;
}
.manifests-search {
flex: 1;
display: flex;
align-items: center;
border: 1px solid #e7eaf0;
border-radius: 10px;
background: #fff;
padding: 10px 12px;
gap: 10px;
min-width: 200px;
}
.manifests-search-input {
border: 0 !important;
outline: 0 !important;
width: 100% !important;
font-size: 14px;
}
/* List rows */
.manifests-row {
padding: 18px 20px;
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.manifests-row + .manifests-row {
border-top: 1px solid #edf0f5;
}
.manifests-row-left {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 520px;
min-width: 260px;
}
.manifests-row-meta {
flex: 0 0 auto;
min-width: 170px;
color: #6b7280;
font-size: 13px;
text-align: left;
}
@media (min-width: 768px) {
.manifests-row-meta {
text-align: right;
}
}
.manifests-thumb {
width: 64px !important;
height: 64px;
border-radius: 10px;
border: 1px solid #eef1f6;
object-fit: cover;
background: #f3f4f6;
flex: 0 0 auto;
}
.manifests-item-title {
font-weight: 400;
font-size: 14px;
margin: 0;
line-height: 1.2;
}
.manifests-item-sub {
margin: 6px 0 0;
font-size: 12px;
color: #6b7280;
line-height: 1.2;
}
/* Checkbox (unique) */
.manifests-check {
width: 20px;
height: 20px;
border: 2px solid #d7dbe4;
border-radius: 4px;
appearance: none;
display: inline-block;
position: relative;
background: #fff;
flex: 0 0 auto;
}
.manifests-check:checked {
border-color: #2563eb;
background: #2563eb;
}
.manifests-check:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 6px;
height: 12px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(45deg);
}
/* Icons */
.manifests-icon {
width: 18px;
height: 18px;
display: inline-block;
}
.manifests-icon-muted {
color: #6b7280;
}
/* History */
.manifests-history-row {
padding: 22px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.manifests-history-row + .manifests-history-row {
border-top: 1px solid #edf0f5;
}
.manifests-history-title {
font-weight: 400;
margin: 0;
font-size: 14px;
}
.manifests-history-sub {
margin: 8px 0 0;
font-size: 13px;
color: #6b7280;
line-height: 1.5;
}
.manifests-pill {
padding: 2px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 400;
white-space: nowrap;
}
.manifests-pill-missing {
background: #ffe4e4;
color: #b4232a;
}
.manifests-pill-done {
background: #dcfce7;
color: #15803d;
}
.manifestd-wrap {
padding: 22px 0 44px;
}
.manifestd-back {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--brand);
font-weight: 400;
text-decoration: none;
margin-bottom: 14px;
font-size: 14px;
}
.manifestd-back:hover {
text-decoration: underline;
}
.manifestd-card {
background: #fff;
border: 1px solid #e7eaf0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}
.manifestd-inner {
padding: 28px 18px 24px;
}
@media (min-width: 768px) {
.manifestd-inner {
padding: 34px 34px 28px;
}
}
.manifestd-result-title {
font-size: 24px;
font-weight: 400;
margin: 0 0 14px;
letter-spacing: 0.2px;
color: #111827;
}
/* Result summary banner */
.manifestd-alert {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 10px;
border: 1px solid #f4d7b5;
background: #fff7ed;
color: #1f2937;
margin-bottom: 18px;
}
.manifestd-alert-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #f54a00;
flex: 0 0 auto;
}
.manifestd-alert-text {
font-size: 15px;
line-height: 1.35;
}
.manifestd-alert-text strong {
font-weight: 600;
}
.manifestd-header {
text-align: center;
padding-top: 6px;
}
.manifestd-title {
font-size: 24px;
font-weight: 400;
margin: 0;
letter-spacing: 0.2px;
}
.manifestd-date {
margin-top: 8px;
color: #6b7280;
font-size: 15px;
}
.manifestd-qr-wrap {
display: flex;
justify-content: center;
margin: 28px 0 10px;
}
.manifestd-qr {
width: 256px;
height: 256px;
aspect-ratio: 1 / 1;
border-radius: 16px;
border: 4px solid #d1d5db;
background: #fff;
color: #99a1af;
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
}
.manifestd-qr-hint {
text-align: center;
color: #6b7280;
font-size: 15px;
margin: 12px 0 0;
}
.manifestd-section {
margin-top: 30px;
}
.manifestd-section-title {
font-weight: 400;
font-size: 14px;
margin: 0 0 12px;
color: #111827;
}
.manifestd-item-box {
background: #fbf9fa;
border-radius: 12px;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.manifestd-check {
width: 18px;
height: 18px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #16a34a;
background: #ecfdf5;
flex: 0 0 auto;
}
.manifestd-check svg {
width: 12px;
height: 12px;
color: #16a34a;
}
.manifestd-item-name {
font-weight: 400;
font-size: 14px;
color: #111827;
}
.manifestd-actions {
margin-top: 18px;
}
.manifestd-btn {
width: 100%;
border-radius: 10px;
padding: 0px 16px;
font-weight: 400;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 46px;
}
.manifestd-btn-print {
background: #fff;
border: 1px solid #d7dbe4;
color: #111827;
}
.manifestd-btn-save {
background: #8b0cf6;
border: 1px solid #8b0cf6;
color: #fff;
}
.manifestd-btn-save:hover {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.manifestd-icon {
width: 18px;
height: 18px;
}
/* Manifest results table tweaks (scoped to details view) */
.manifestd-card .manifest-list-table tbody td {
white-space: normal;
}
.manifestd-item-thumb {
width: 60px !important;
height: 60px;
border-radius: 6px;
object-fit: cover;
border: 1px solid #eef0f5;
background: #f2f4f7;
flex: 0 0 auto;
}
.manifestd-item-label {
font-weight: 500;
margin: 0;
color: #111827;
}
.manifestd-item-meta {
color: #667085;
font-size: 13px;
}
.rm-intake-status {
font-size: 14px;
}
.rm-status-icon {
width: 18px;
height: 18px;
}
.rm-status-text {
font-size: 14px;
font-weight: 400;
}
.rm-status-text--accepted {
color: #15803d;
}
.rm-status-icon--accepted {
color: #16a34a;
}
.rm-status-text--rejected {
color: #b4232a;
}
.rm-status-icon--rejected {
color: #dc2626;
}
.accepted-item .rm-admin-note {
color: #15803d;
}
.rejected-item .rm-admin-note {
color: #b4232a;
}
.rm-admin-note {
font-size: 14px;
font-weight: 400;
display: block;
}
.rm-admin-note--accepted {
color: #15803d;
}
.rm-admin-note--rejected {
color: #b4232a;
}
.rejected-item {
background: #fef2f2;
}
/* Highlight rejected rows when CancelArea is visible (modern browsers) */
.manifestd-card
.manifest-list-table
tbody
tr:has(
[data-rentmyattr="CancelArea"]:not(.d-none):not([hidden]):not(
[style*="display: none"]
)
) {
background: #fff1f1;
}
.manifestd-card
.manifest-list-table
tbody
tr:has(
[data-rentmyattr="CancelArea"]:not(.d-none):not([hidden]):not(
[style*="display: none"]
)
)
.rm-admin-note {
color: #b4232a;
}
/* Support bar */
.manifestd-support {
margin-top: 18px;
padding: 16px 18px;
border-radius: 12px;
border: 1px solid #b6d6fb;
background: #eef6ff;
color: #1c398e;
text-align: center;
font-size: 14px;
}
.manifestd-support-link {
color: #1d4ed8;
font-weight: 400;
text-decoration: underline;
margin-left: 6px;
}
.manifestd-support-link:hover {
color: #1e40af;
}
/* ===== Manifest List ===== */
.manifest-list-card {
background: #fff;
border: 1px solid #e8eaf0;
border-radius: 16px;
padding: 14px;
}
/* Tabs */
.manifest-list-tabs {
background: #fff;
border: 1px solid #e8eaf0;
border-radius: 16px;
padding: 10px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.manifest-list-tab {
flex: 1 1 140px;
text-align: center;
padding: 12px 16px;
border-radius: 10px;
text-decoration: none;
color: #667085;
font-weight: 400;
font-size: 14px;
border: 1px solid transparent;
background: transparent;
transition: 0.15s ease;
}
.manifest-list-tab:hover {
background: #f4f6fb;
color: #344054;
}
.manifest-list-tab.active {
background: #990ffa;
color: #fff;
}
/* Search and CTA bar */
.manifest-list-toolbar {
margin-top: 18px;
background: #fff;
border: 1px solid #e8eaf0;
border-radius: 14px;
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.manifest-list-search {
position: relative;
width: min(400px, 100%);
}
.manifest-list-search svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #98a2b3;
font-size: 16px;
}
.manifest-list-search input {
width: 100%;
height: 42px;
border-radius: 12px;
border: 1px solid #d0d5dd;
padding: 0 16px 0 46px;
outline: none;
background: #fff;
font-size: 14px;
}
.manifest-list-create {
height: 40px;
padding: 0 22px;
border-radius: 12px;
border: 1px solid #990ffa;
background: #990ffa;
color: #fff;
font-size: 14px;
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
white-space: nowrap;
}
.manifest-list-create:hover {
filter: brightness(0.96);
color: #fff;
}
.manifestd-table-area {
border: 1px solid #e8eaf0;
border-radius: 10px;
overflow: hidden;
}
/* Table card */
.manifest-list-tablewrap {
margin-top: 18px;
background: #fff;
border: 1px solid #e8eaf0;
border-radius: 16px;
overflow: hidden;
}
.manifest-list-table {
margin: 0;
}
.manifest-list-table thead th {
font-size: 12px;
text-transform: uppercase;
color: #667085;
font-weight: 400;
border-bottom: 1px solid #e8eaf0 !important;
padding: 12px 16px;
background: #f9fafb;
white-space: nowrap;
}
.manifest-list-table tbody td {
padding: 16px;
border-top: 1px solid #eef0f5 !important;
vertical-align: middle;
font-size: 14px;
color: #111827;
white-space: nowrap;
}
.manifest-list-id a {
font-weight: 400;
text-decoration: none;
}
.manifest-list-id a:hover {
text-decoration: underline;
}
/* Status pills */
.manifest-list-status {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 10px;
font-weight: 400;
font-size: 12px;
line-height: 1;
border: 1px solid transparent;
display: block;
width: fit-content;
margin: 0 auto;
}
.manifest-list-status.completed {
background: #dfffe5;
color: #138a2e;
}
.manifest-list-status.pending {
background: #fff0cc;
color: #b45309;
}
.manifest-list-status.partial {
background: #ffe6cc;
color: #c2410c;
}
.manifest-list-status.draft {
background: #f2f4f7;
color: #344054;
}
/* Action buttons */
.manifest-list-actions {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.manifest-list-btn {
height: 28px;
padding: 0 16px;
border-radius: 10px;
border: 1px solid #cfd4dc;
background: #fff;
color: #111827;
font-weight: 400;
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
white-space: nowrap;
}
.manifest-list-btn:hover {
background: #f4f6fb;
color: #111827;
text-decoration: none;
}
.manifest-list-btn-qr {
border-color: #990ffa;
background: #990ffa;
color: #fff;
}
.manifest-list-btn-qr:hover {
filter: brightness(0.96);
color: #fff;
background: #990ffa;
}
/* Responsive table -> cards on small */
@media (max-width: 991px) {
.manifest-list-table tr {
border-top: 1px solid #eef0f5;
padding: 14px 0;
}
.manifest-list-table tbody td {
border: 0 !important;
padding: 10px 16px;
white-space: normal;
font-size: 16px;
}
}
@media (max-width: 575px) {
.manifest-list-tabs {
padding: 8px;
}
.manifest-list-tab {
padding: 12px 10px;
}
.manifest-list-toolbar {
padding: 14px;
}
.manifest-list-search input {
height: 48px;
}
.manifest-list-create {
height: 48px;
width: 100%;
justify-content: center;
}
}
/* ===== Manifest Create Page ===== */
.manifest-create {
padding: 28px 0 80px;
}
.manifest-create-back {
display: inline-flex;
align-items: center;
gap: 8px;
color: #990ffa;
text-decoration: none;
font-weight: 600;
margin-bottom: 18px;
}
.manifest-create-back:hover {
text-decoration: underline;
}
.manifest-create-card {
background: #ffffff;
border: 1px solid #e8eaf0;
border-radius: 16px;
box-shadow: 0 2px 0 rgba(17, 24, 39, 0.02);
padding: 26px;
}
.manifest-create-title {
font-size: 22px;
font-weight: 500;
margin: 0 0 18px;
}
.manifest-create-label {
font-size: 14px;
font-weight: 500;
color: #344054;
margin: 16px 0 10px;
}
/* Item rows */
.manifest-create-item {
border: 1px solid #e8eaf0;
border-radius: 12px;
background: #fff;
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.manifest-create-item-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.manifest-create-thumb {
width: 54px;
height: 54px;
border-radius: 8px;
background: #f2f4f7;
border: 1px solid #f0f1f5;
flex: 0 0 auto;
}
.manifest-create-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
display: block;
}
.manifest-create-info {
min-width: 0;
}
.manifest-create-name {
font-weight: 500;
margin: 0 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.manifest-create-meta {
margin: 0;
color: #667085;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.manifest-create-item-select {
border: 1px solid #cfd4dc;
border-radius: 6px;
padding: 6px 10px;
font-size: 14px;
color: #111827;
}
.manifest-create-item-select select {
border: none;
outline: none;
margin: 0;
padding: 0;
background: transparent;
width: 100%;
font-size: 14px;
color: #111827;
}
.manifest-create-item-actions {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.manifest-create-qty {
color: #667085;
font-size: 14px;
white-space: nowrap;
}
.manifest-create-qty-count {
font-size: 12px;
display: block;
text-align: right;
margin-top: 3px;
}
.manifest-create-qty-input {
width: 72px;
height: 36px;
border-radius: 6px;
border: 1px solid #cfd4dc;
padding: 0 10px;
text-align: center;
outline: none;
background: #fff;
}
.manifest-create-icon-btn {
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: #98a2b3;
cursor: pointer;
}
.manifest-create-icon-btn:hover {
background: #f4f6fb;
border-color: #eef0f5;
color: #667085;
}
.manifest-create-icon-danger {
color: #ff3b30;
}
.manifest-create-icon-danger:hover {
background: #fff1f0;
border-color: #ffe2e0;
color: #ff3b30;
}
.manifest-create-plus {
color: white;
font-size: 22px;
background-color: #990ffa;
}
.manifest-create-divider {
border-top: 1px solid #e8eaf0;
margin: 22px 0;
}
/* ─── Manifest Shipping & Payment ─── */
.msp-card {
background: #fff;
border: 1px solid #e8eaf0;
border-radius: 16px;
padding: 32px;
margin-bottom: 4px;
}
.msp-title {
font-size: 22px;
font-weight: 700;
color: #1f2937;
margin: 0 0 24px;
}
/* Gift Banner */
.msp-gift-banner {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 22px;
background: #ecfdf5;
border-radius: 12px;
margin-bottom: 28px;
}
.msp-gift-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: #d1fae5;
color: #059669;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.msp-gift-title {
display: block;
font-size: 15px;
font-weight: 700;
color: #065f46;
line-height: 1.3;
}
.msp-gift-desc {
display: block;
font-size: 13px;
color: #047857;
margin-top: 2px;
line-height: 1.4;
}
/* Shipping Estimate */
.msp-estimate {
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 22px 24px;
margin-bottom: 28px;
}
.msp-estimate-label {
font-size: 11px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.msp-estimate-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.msp-estimate-left {
display: flex;
align-items: center;
gap: 14px;
}
.msp-estimate-icon {
color: #6b7280;
flex-shrink: 0;
display: flex;
}
.msp-estimate-name {
font-size: 15px;
font-weight: 600;
color: #1f2937;
line-height: 1.3;
}
.msp-estimate-route {
font-size: 12px;
color: #9ca3af;
margin-top: 3px;
}
.msp-estimate-price {
font-size: 22px;
font-weight: 700;
color: #1f2937;
white-space: nowrap;
}
.msp-estimate-price-box {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.msp-estimate-old-price {
font-size: 12px;
color: #9ca3af; /* gray-400 */
text-decoration: line-through;
}
.msp-estimate-new-price {
font-size: 18px;
font-weight: 700;
color: #16a34a; /* green-600 */
}
/* Payment Method */
.msp-payment {
margin-bottom: 28px;
}
.msp-payment-label {
font-size: 11px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 14px;
}
.msp-payment-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.msp-payment-option {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border: 2px solid #e5e7eb;
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: all 0.2s ease;
margin: 0;
}
.msp-payment-option:hover {
border-color: #c4b5fd;
background: #faf8ff;
}
.msp-payment-option.msp-payment-active {
border-color: var(--brand);
background: #faf5ff;
}
.msp-payment-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.msp-payment-icon {
color: #9ca3af;
flex-shrink: 0;
display: flex;
}
.msp-payment-active .msp-payment-icon {
color: var(--brand);
}
.msp-payment-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.msp-payment-name {
font-size: 15px;
font-weight: 700;
color: #1f2937;
}
.msp-payment-desc {
font-size: 13px;
color: #9ca3af;
}
.msp-payment-check {
flex-shrink: 0;
color: #d1d5db;
display: flex;
transition: color 0.2s;
}
.msp-payment-active .msp-payment-check {
color: var(--brand);
}
/* Pay Button */
.msp-pay-btn {
width: 100%;
padding: 16px 24px;
border: none;
border-radius: 14px;
background: linear-gradient(135deg, #a855f7, var(--brand));
color: #fff;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s;
}
.msp-pay-btn:hover {
opacity: 0.9;
}
/* Add Payment Option Button */
.msp-add-payment-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 18px 20px;
border: 2px dashed #d1d5db;
border-radius: 14px;
background: #fff;
color: #7c3aed;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.msp-add-payment-btn:hover {
border-color: #7c3aed;
background: #faf5ff;
}
.msp-add-payment-btn svg {
color: #7c3aed;
}
/* Add New Payment Form */
.msp-newcard {
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid #f0f0f0;
}
.msp-newcard-title {
font-size: 20px;
font-weight: 700;
color: #1f2937;
margin: 0 0 28px;
letter-spacing: 0.3px;
}
.msp-newcard-group {
margin-bottom: 22px;
}
.msp-newcard-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin-bottom: 8px;
}
.msp-newcard-req {
color: #ef4444;
font-weight: 700;
}
.msp-newcard-input {
width: 100%;
padding: 14px 16px;
border: 1px solid #e5e7eb;
border-radius: 10px;
font-size: 14px;
color: #374151;
background: #fafafa;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
}
.msp-newcard-input:focus {
border-color: #7c3aed;
background: #fff;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}
.msp-newcard-input::placeholder {
color: #9ca3af;
}
.msp-newcard-input-wrap {
position: relative;
}
.msp-newcard-input-wrap .msp-newcard-input {
padding-right: 60px;
}
.msp-newcard-card-icons {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
pointer-events: none;
}
.msp-newcard-row {
margin-bottom: 22px;
}
.msp-newcard-row .msp-newcard-group {
margin-bottom: 0;
}
.msp-newcard-row-inner {
display: flex;
gap: 12px;
}
.msp-newcard-select {
flex: 1;
padding: 14px 16px;
border: 1px solid #e5e7eb;
border-radius: 10px;
font-size: 14px;
color: #374151;
background-color: transparent !important;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
}
.msp-newcard-select:focus {
border-color: #7c3aed;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}
.msp-newcard-half {
max-width: 100%;
}
.msp-newcard-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 28px;
}
.msp-newcard-btn-cancel {
padding: 12px 28px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fff;
color: #374151;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.msp-newcard-btn-cancel:hover {
background: #f9fafb;
border-color: #d1d5db;
}
.msp-newcard-btn-submit {
padding: 12px 28px;
border: none;
border-radius: 10px;
background: var(--brand);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.msp-newcard-btn-submit:hover {
opacity: 0.9;
}
@media (max-width: 575.98px) {
.msp-newcard-row-inner {
flex-direction: column;
}
.msp-newcard-actions {
flex-direction: column;
}
.msp-newcard-btn-cancel,
.msp-newcard-btn-submit {
width: 100%;
text-align: center;
}
}
/* Package Details */
.msp-package-details {
margin-bottom: 24px;
}
.msp-package-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #64748b;
text-transform: uppercase;
margin-bottom: 14px;
}
.msp-package-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.msp-package-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.msp-package-field-label {
font-size: 13px;
font-weight: 600;
color: #374151;
}
.msp-package-input {
width: 100%;
padding: 12px 16px;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
font-size: 15px;
color: #1e293b;
background: #fff;
outline: none;
transition: border-color 0.2s;
}
.msp-package-input:focus {
border-color: #6366f1;
}
/* Responsive */
@media (max-width: 575.98px) {
.msp-card {
padding: 22px 18px;
}
.msp-gift-banner {
padding: 14px 16px;
}
.msp-estimate {
padding: 18px 16px;
}
.msp-estimate-row {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.msp-estimate-price {
font-size: 20px;
}
.msp-payment-option {
padding: 14px 16px;
gap: 12px;
}
}
/* ─── Manifest Shipping Confirmation ─── */
.msc-wrap {
margin-top: 28px;
margin-top: 28px;
background: #fff;
border: 1px solid #e8eaf0;
border-radius: 16px;
padding: 32px;
margin-bottom: 4px;
}
/* Summary Card */
.msc-summary-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: #fff;
border-bottom: 1px solid #e8eaf0;
padding: 24px 28px;
padding-top: 0;
flex-wrap: wrap;
margin: 24px -31px;
margin-top: 0;
}
.msc-summary-left {
flex: 0 0 auto;
min-width: 240px;
}
.msc-gift-banner {
margin-bottom: 0;
}
.msc-summary-center {
text-align: center;
}
.msc-manifest-id {
font-size: 20px;
font-weight: 700;
color: #1f2937;
line-height: 1.3;
}
.msc-manifest-status {
font-size: 13px;
color: #6b7280;
margin-top: 3px;
}
.msc-status-pending {
color: #d97706;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.msc-summary-right {
text-align: right;
}
.msc-ship-to-label {
font-size: 12px;
color: #9ca3af;
}
.msc-ship-to-value {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin-top: 2px;
}
/* Documents Card */
.msc-docs-card {
background: #faf5ff;
border: 1px solid #f3e8ff;
border-radius: 16px;
padding: 32px;
margin-bottom: 28px;
}
.msc-docs-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.msc-docs-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
color: #9810fa;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(152, 16, 250, 0.1);
}
.msc-docs-title {
font-size: 17px;
font-weight: 700;
color: #1f2937;
line-height: 1.3;
}
.msc-docs-desc {
font-size: 13px;
color: #6b7280;
margin: 4px 0 0;
line-height: 1.5;
}
.msc-docs-actions {
display: flex;
gap: 14px;
}
.msc-btn-download {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
border: none;
border-radius: 14px;
background: var(--brand);
color: #fff;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s;
}
.msc-btn-download:hover {
opacity: 0.9;
}
.msc-btn-reprint {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
border: 2px solid #e9d4ff;
border-radius: 14px;
background: #fff;
color: var(--brand);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.msc-btn-reprint:hover {
border-color: #c4b5fd;
background: #faf8ff;
}
.msc-docs-divider {
border-top: 1px solid #f0f0f0;
margin: 24px 0;
}
/* Instructions */
.msc-instructions-label {
font-size: 11px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 14px;
}
.msc-instructions-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.msc-instruction-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.msc-instruction-num {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.msc-instruction-text {
font-size: 12px;
color: var(--brand);
font-weight: 500;
line-height: 1.5;
padding-top: 2px;
}
/* Manifest Item List */
.msc-itemlist {
margin-bottom: 4px;
}
.msc-itemlist-label {
font-size: 11px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 14px;
}
.msc-itemlist-table-wrap {
background: #fff;
border: 1px solid #e8eaf0;
border-radius: 14px;
overflow: hidden;
}
.msc-table {
margin: 0;
}
.msc-table thead th {
font-size: 11px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 14px 24px;
border-bottom: 1px solid #f0f0f0 !important;
background: #fafafa;
}
.msc-table tbody td {
font-size: 14px;
color: #1f2937;
font-weight: 500;
padding: 16px 24px;
border-bottom: 1px solid #f5f5f5;
vertical-align: middle;
}
.msc-table tbody tr:last-child td {
border-bottom: none;
}
/* Responsive */
@media (max-width: 767.98px) {
.msc-summary-card {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 20px;
}
.msc-summary-center,
.msc-summary-right {
text-align: left;
}
.msc-docs-card {
padding: 22px 18px;
}
.msc-docs-actions {
flex-direction: column;
}
.msc-table thead th,
.msc-table tbody td {
padding: 12px 16px;
}
}
@media (max-width: 575.98px) {
.msc-docs-icon {
display: none;
}
}
.manifest-create-actions {
display: flex;
gap: 18px;
align-items: center;
}
.manifest-create-btn-draft {
border: 1px solid #cfd4dc;
background: #fff;
color: #111827;
border-radius: 12px;
height: 52px;
font-weight: 400;
}
.manifest-create-btn-submit {
background: #990ffa;
border: 1px solid #990ffa;
color: #fff;
border-radius: 12px;
height: 52px;
font-weight: 400;
}
.manifest-create-btn-submit:hover {
filter: brightness(0.96);
color: #fff;
}
@media (max-width: 991px) {
.manifest-create-card {
padding: 18px;
}
.manifest-create-title {
font-size: 18px;
}
}
@media (max-width: 575px) {
.manifest-create-item {
flex-direction: column;
align-items: stretch;
}
.manifest-create-item-actions {
justify-content: space-between;
}
.manifest-create-actions {
flex-direction: column;
}
.manifest-create-actions .btn {
width: 100%;
}
}
.walletpage-hero {
border-radius: 18px;
overflow: hidden;
border: 0;
background: var(--brand);
box-shadow: 0 10px 30px rgba(124, 58, 237, 0.18);
}
.walletpage-hero-inner {
padding: 26px 22px;
}
@media (min-width: 768px) {
.walletpage-hero-inner {
padding: 30px 34px;
}
}
.walletpage-hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.walletpage-hero-label {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
margin: 0 0 6px;
font-weight: 400;
}
.walletpage-hero-balance {
color: #fff;
font-size: 36px;
line-height: 1.05;
margin: 0;
font-weight: 500;
}
.walletpage-kyc-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 10px;
background: #a84fa5;
color: #fff;
border: #a84fa5;
font-weight: 400;
white-space: nowrap;
backdrop-filter: blur(6px);
font-size: 14px;
}
.walletpage-edit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.65);
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 13px;
font-weight: 400;
cursor: pointer;
white-space: nowrap;
}
.walletpage-edit-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.walletpage-icon {
width: 18px;
height: 18px;
display: inline-block;
}
.walletpage-bankbox {
margin-top: 18px;
background: #fb2c36;
color: #ffe2e2;
font-size: 14px;
border-radius: 14px;
padding: 16px 16px;
}
/* .walletpage-bank-title {
font-size: 15px;
margin: 0 0 8px;
font-weight: 400;
color: #fff;
}
.walletpage-bank-name {
margin: 0;
font-weight: 400;
font-size: 14px;
color: #fff;
}
.walletpage-bank-sub {
margin: 2px 0 0;
font-size: 14px;
color: #fff;
}
.walletpage-bank-edit {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
text-decoration: none;
font-weight: 400;
font-size: 12px;
opacity: 0.95;
padding: 6px 10px;
height: fit-content;
white-space: nowrap;
}
.walletpage-bank-edit:hover {
opacity: 1;
} */
.walletpage-hero-cta {
margin-top: 18px;
background: #fff;
border-radius: 14px;
padding: 11px 16px;
text-align: center;
color: var(--brand);
font-weight: 400;
border: 1px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
}
/* Stat cards */
.walletpage-stat {
background: #fff;
border: 1px solid #e7eaf0;
border-radius: 16px;
padding: 18px 18px;
height: 100%;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}
.walletpage-stat-label {
margin: 0;
color: #6b7280;
font-weight: 400;
font-size: 14px;
}
.walletpage-stat-value {
margin: 10px 0 8px;
font-size: 28px;
font-weight: 400;
letter-spacing: -0.2px;
}
.walletpage-stat-sub {
margin: 0;
color: #6b7280;
font-size: 12px;
}
/* History panel */
.walletpage-panel {
background: #fff;
border: 1px solid #e7eaf0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}
.walletpage-panel-head {
padding: 20px 20px 14px;
}
.walletpage-panel-title {
margin: 0;
font-size: 22px;
font-weight: 400;
}
.walletpage-panel-divider {
height: 1px;
background: #edf0f5;
}
.walletpage-filters {
padding: 14px 20px 16px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.walletpage-date-group {
display: flex;
gap: 10px;
align-items: center;
flex: 1 1 520px;
min-width: 260px;
flex-wrap: wrap;
}
.walletpage-to {
color: #6b7280;
font-weight: 400;
font-size: 14px;
padding: 0 6px;
white-space: nowrap;
}
.walletpage-input {
border: 1px solid #e7eaf0;
border-radius: 12px;
padding: 0px;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
min-width: 220px;
flex: 1 1 240px;
overflow: hidden;
}
.walletpage-input input {
border: 0 !important;
outline: 0 !important;
width: 100%;
font-size: 14px;
background: transparent;
}
.walletpage-input-icon {
color: #9ca3af;
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.walletpage-btn {
border: 1px solid #e7eaf0;
background: #fff;
border-radius: 12px;
padding: 10px 14px;
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.walletpage-btn:hover {
background: #f9fafb;
}
@media (max-width: 575.98px) {
.walletpage-btn {
width: 100%;
justify-content: center;
}
.walletpage-date-group {
flex: 1 1 100%;
}
.walletpage-input {
min-width: 100%;
}
.walletpage-to {
width: 100%;
text-align: center;
padding: 0;
}
}
/* Table */
.walletpage-table th {
font-size: 12px;
color: #475569;
font-weight: 400;
padding: 14px 18px;
background: #fbfcfe;
border-bottom: 1px solid #edf0f5 !important;
white-space: nowrap;
}
.walletpage-table td {
padding: 16px 18px;
border-bottom: 1px solid #edf0f5;
vertical-align: middle;
white-space: nowrap;
font-size: 14px;
}
.walletpage-pill {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 400;
line-height: 1;
font-size: 12px;
}
.walletpage-pill-rental {
background: #dcfce7;
color: #166534;
}
.walletpage-pill-payout {
background: #dbeafe;
color: #1d4ed8;
}
.walletpage-pill-damage {
background: #fee2e2;
color: #b91c1c;
}
.walletpage-amt-pos {
color: #16a34a;
font-weight: 400;
}
.walletpage-amt-neg {
color: #dc2626;
font-weight: 400;
}
/* ===== SUGGESTED CHANGES (unique prefix) ===== */
.schanges-wrap {
margin: 24px 0;
}
.schanges-card {
background: #fff;
border: 1px solid #b9d3ff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}
.schanges-card-body {
width: 100%;
max-height: 530px;
overflow: auto;
}
.schanges-head {
background: #eef6ff;
border-bottom: 1px solid #b9d3ff;
padding: 24px;
display: flex;
gap: 12px;
align-items: center;
}
@media (max-width: 767.98px) {
.schanges-head {
flex-wrap: wrap;
align-items: flex-start;
}
.schanges-head-actions {
width: 100%;
}
}
.schanges-head-inner {
display: flex;
align-items: center;
gap: 12px;
}
.schanges-head-actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
background-color: #f3f4f6;
border: 1px solid #e8eaf0;
border-radius: 10px;
padding: 6px 12px;
}
.schanges-head-actions .active-btn {
background: var(--brand);
color: #fff;
}
.schanges-head-actions .active-btn:hover {
background: #155dfc;
color: #fff;
}
.schanges-head-actions .active-btn:active {
background: #155dfc;
color: #fff;
}
.schanges-head-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #dbeafe;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: #155dfc;
}
.schanges-head-title {
margin: 0;
font-size: 14px;
font-weight: 400;
color: #1c398e;
}
.schanges-head-sub {
margin: 0;
font-size: 12px;
color: #2563eb;
font-weight: 400;
}
.schanges-body {
padding: 22px 18px 26px;
}
@media (min-width: 768px) {
.schanges-head {
padding: 22px 26px;
}
.schanges-body {
padding: 26px 26px 28px;
}
}
.schanges-item {
display: flex;
gap: 16px;
align-items: flex-start;
flex-wrap: wrap;
}
.schanges-thumb {
width: 96px !important;
height: 128px;
border-radius: 18px;
object-fit: cover;
background: #f3f4f6;
border: 1px solid #eef1f6;
flex: 0 0 auto;
}
.schanges-item-meta {
flex: 1 1 420px;
min-width: 260px;
}
.schanges-item-name {
font-size: 14px;
font-weight: 500;
margin: 0;
}
.schanges-item-brand {
margin: 0 0 14px;
color: #6b7280;
font-size: 12px;
}
.schanges-note {
background: #f8fafc;
border: 1px solid #eef2f7;
border-radius: 12px;
padding: 14px;
}
.schanges-note-text {
margin: 0 0 12px;
color: #475569;
font-size: 12px;
line-height: 1.55;
}
.schanges-note-text b {
color: #374151;
}
.schanges-grid {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
.schanges-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.schanges-row-label {
font-size: 12px;
color: #374151;
font-weight: 400;
min-width: 120px;
}
.schanges-row-change {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
margin-left: auto;
white-space: nowrap;
}
.schanges-old {
color: #6b7280;
text-decoration: line-through;
font-weight: 500;
}
.schanges-arrow {
color: #9ca3af;
font-weight: 700;
}
.schanges-new {
color: #2563eb;
font-weight: 700;
}
.schanges-actions {
margin-top: 18px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.schanges-btn {
border-radius: 10px;
padding: 8px 16px;
font-weight: 400;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid transparent;
background-color: #f3f4f6;
}
.schanges-btn-accept {
background: #0ea54b;
border-color: #0ea54b;
color: #fff;
}
.schanges-btn-accept:hover {
background: #0b8a3e;
border-color: #0b8a3e;
color: #fff;
}
.schanges-btn-keep {
background: #fff;
border-color: #d1d5db;
color: #111827;
}
.schanges-btn-keep:hover {
background: #f9fafb;
}
/* full-width buttons on small */
@media (max-width: 575.98px) {
.schanges-btn {
width: 100%;
}
}
/* ===== SHIPPING BANNER (unique prefix) ===== */
.shipbanner-wrap {
margin: 24px 0;
}
.shipbanner-card {
background: linear-gradient(180deg, #7c0bf6 0%, #8b18ff 45%, #7a0de8 100%);
border-radius: 14px;
padding: 24px;
color: #fff;
position: relative;
overflow: hidden;
}
.shipbanner-row {
display: flex;
gap: 16px;
align-items: flex-start;
flex-wrap: wrap;
}
.shipbanner-iconbox {
width: 48px;
height: 48px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.18);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.shipbanner-icon {
width: 24px;
height: 24px;
}
.shipbanner-title {
margin: 0;
font-size: 18px;
font-weight: 400;
color: #fff;
}
.shipbanner-text {
margin: 10px 0 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.45;
max-width: 820px;
}
.shipbanner-btn {
margin-top: 18px;
background: #fff;
color: var(--brand);
border: 0;
border-radius: 10px;
padding: 8px 16px;
font-weight: 400;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: fit-content;
}
.shipbanner-btn:hover {
background: #f3f4f6;
color: #6d28d9;
}
.RentMyOrderDetails .modal-body {
max-height: 100% !important;
}
.SelectedVariants {
padding-left: 10px;
border-left: 1px solid #e5e7eb;
border-radius: 0;
}
.DeleteVariant {
color: #fb2c36;
}
.variant-image-box {
position: relative;
}
.variant-image-box span {
position: absolute;
top: -6px;
right: -6px;
background: #fb2c36;
color: #fff;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
cursor: pointer;
}
.variant-image-box img {
border: 1px solid #e5e7eb;
}
/* Home page */
.rentchic-hero {
min-height: 100vh;
position: relative;
overflow: hidden;
/* Replace with your real hero image */
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3933/4xu6mqt_1750081306_gyvqtdd.JPG");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.rentchic-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff6;
z-index: 1;
}
.rentchic-hero-content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 0 70px;
z-index: 9;
}
.rentchic-hero-title {
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(17, 24, 39, 0.9);
margin: 0;
line-height: 1.05;
}
.rentchic-hero-title .rentchic-line {
display: block;
}
.rentchic-hero-title {
font-size: 44px;
}
.rentchic-hero-sub {
margin-top: 20px;
font-size: 20px;
color: rgba(17, 24, 39, 0.75);
font-weight: 500;
}
.rentchic-hero-btn {
margin-top: 24px;
background: #2b2b2b;
color: #fff;
border: 0;
padding: 14px 44px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 14px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
display: inline-block;
}
.rentchic-hero-btn:hover {
background: #111;
color: #fff;
}
.rentmy-logo-area img {
height: 80px;
}
.rentmy-menu-area {
width: max-content;
margin-left: auto;
}
@media (max-width: 991px) {
.rentmy-header
.rentmy-menu-header
.rentmy-menu-area
.rentmy-menu
.rentmy-nav-manu
ul
li {
padding: 8px 0;
border-bottom: 1px solid #f1f1f1;
box-shadow: 0 0 25px 12px rgba(51, 77, 136, 0.08);
}
}
.rentmy-header
.rentmy-menu-header
.rentmy-menu-area
.rentmy-menu
.rentmy-nav-manu
ul
li
a {
line-height: normal;
padding: 0 20px;
font-size: 14px;
color: #333;
text-transform: uppercase;
font-weight: 500;
}
.rentmy-header .rentmy-menu-header {
background-color: transparent;
box-shadow: none;
top: 10px;
z-index: 999;
}
.homeprods-wrap {
padding: 56px 0;
}
.homeprods-card {
background: #f3f5f8;
border-radius: 0;
/* looks square in screenshot */
padding: 24px;
}
.homeprods-imgbox {
height: 160px;
background: #fff;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.homeprods-imgbox img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.homeprods-content {
flex: 1 1 320px;
min-width: 240px;
}
.homeprods-title {
margin: 0;
font-weight: 700;
font-size: 30px;
color: #2b2b2b;
text-align: left;
}
.homeprods-link {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #2b2b2b;
font-weight: 700;
font-size: 18px;
}
.homeprods-link:hover {
text-decoration: underline;
color: #333;
}
.homeprods-arrow {
font-weight: 900;
transform: translateY(-1px);
}
/* Responsive */
@media (max-width: 991.98px) {
.homeprods-card {
padding: 20px;
}
.homeprods-inner {
gap: 28px;
}
.homeprods-imgbox {
width: 100%;
max-width: 420px;
}
.innerpage-banner.ds-transparent-inner {
height: 250px !important;
background-size: contain;
background-position: center;
}
}
@media (max-width: 575.98px) {
.homeprods-wrap {
padding: 36px 0;
}
.homeprods-card {
padding: 26px 18px;
}
.homeprods-inner {
text-align: center;
justify-content: center;
}
.homeprods-title {
font-size: 24px;
}
.homeprods-link {
margin-top: 14px;
}
}
body.category .rentmy-innerpage-banner,
body.package .rentmy-innerpage-banner,
body.products .rentmy-innerpage-banner,
.rentmy-innerpage-banner-product-list {
background-image: url("https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3933/l4oism6_1766482595_zc1sslv.jpg");
background-size: contain;
background-repeat: no-repeat;
}
.rentmy-innerpage-banner {
background-color: #f2f3f8;
margin-top: 0 !important;
}
.rentmy-header .rentmy-menu-header.shrink {
z-index: 9999;
top: 0;
position: fixed;
box-shadow: 0 0 30px #334d8814;
background-color: #fff !important;
}
.rentmy-header .rentmy-menu-header.shrink .rentmy-nav-manu ul li a {
line-height: normal;
}
.rentmy-mobile-device ul {
display: flex;
align-items: center;
gap: 8px;
}
.rentmy-header
.rentmy-menu-header
.rentmy-menu-area
.rentmy-menu
.rentmy-mobile-device
a
i {
font-size: 18px;
}
@media (max-width: 540px) {
.rentmy-logo-area img {
height: 60px;
}
}
/* ===== INVENTORY PRODUCT MODAL (unique prefix) ===== */
.invpm-modal {
background: #fff;
z-index: 9999;
}
.invpm-modal .modal-content {
border-radius: 16px;
overflow: hidden;
}
.invpm-header {
padding: 22px 26px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
border-bottom: 1px solid #eef2f7;
}
.invpm-titlewrap {
min-width: 0;
}
.invpm-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.15;
color: #111827;
}
.invpm-subtitle {
margin: 6px 0 0;
color: #6b7280;
font-size: 16px;
font-weight: 500;
}
.invpm-closebtn {
width: 42px;
height: 42px;
border-radius: 12px;
border: 0;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: #111827;
font-size: 26px;
line-height: 1;
flex: 0 0 auto;
}
.invpm-closebtn:hover {
background: #f3f4f6;
}
/* Tabs */
.invpm-tabs {
padding: 0 26px;
border-bottom: 1px solid #eef2f7;
display: flex;
align-items: center;
justify-content: space-between;
}
.invpm-tabsbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.invpm-nav {
gap: 22px;
}
.invpm-variant-selectwrap {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.invpm-variant-label {
color: #6b7280;
font-size: 12px;
font-weight: 500;
margin: 0;
letter-spacing: 0.02em;
}
.invpm-variant-select {
min-width: 190px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid #eef2f7 !important;
background-color: #fff !important;
color: #111827;
font-size: 14px;
font-weight: 500;
box-shadow: none;
margin: 0;
}
.invpm-variant-select:focus {
border-color: rgba(161, 51, 255, 0.6);
box-shadow: 0 0 0 0.2rem rgba(161, 51, 255, 0.12);
}
.invpm-navlink {
border: 0 !important;
background: transparent !important;
color: #6b7280 !important;
font-size: 14px;
font-weight: 400;
padding: 16px 8px !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
}
.invpm-navlink.active {
color: var(--brand) !important;
border-bottom-color: var(--brand) !important;
}
.invpm-body {
padding: 22px 26px 0;
}
/* Left image */
.invpm-imgwrap {
border-radius: 16px;
overflow: hidden;
height: 520px;
background: #e5e7eb;
position: relative;
}
.invpm-left {
display: flex;
flex-direction: column;
gap: 12px;
}
.invpm-thumbs {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
margin-top: 10px;
padding-top: 4px;
}
.invpm-thumbs::-webkit-scrollbar {
height: 6px;
}
.invpm-thumbs::-webkit-scrollbar-thumb {
background: #e5e7eb;
border-radius: 999px;
}
.invpm-thumb {
width: 76px;
height: 76px;
border-radius: 14px;
overflow: hidden;
border: 1px solid #eef2f7;
background: #fff;
padding: 0;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
transform 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.invpm-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.invpm-thumb:hover {
transform: translateY(-1px);
border-color: rgba(161, 51, 255, 0.45);
box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
}
.invpm-thumb.active {
border-color: rgba(161, 51, 255, 0.75);
box-shadow: 0 0 0 0.2rem rgba(161, 51, 255, 0.12);
}
.invpm-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Right details */
.invpm-right {
padding-left: 8px;
}
.invpm-sectiontitle {
margin: 6px 0 14px;
color: #6b7280;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.02em;
}
.invpm-info {
border-top: 1px solid #eef2f7;
}
.invpm-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid #eef2f7;
font-size: 14px;
}
.invpm-info-wrap {
/* max-height: 600px; */
overflow-y: auto;
}
.invpm-info-wrap::-webkit-scrollbar {
display: none;
}
.invpm-info-wrap::-webkit-scrollbar-thumb {
display: none;
}
.invpm-barcode-row {
align-items: flex-start;
}
.invpm-barcode-value {
display: flex;
justify-content: flex-end;
}
.invpm-barcode-img {
height: 100px;
width: auto;
object-fit: contain;
background: #fff;
margin-top: 10px;
}
.invpm-label {
color: #6b7280;
font-weight: 400;
font-size: 14px;
}
.invpm-value {
color: #111827;
font-weight: 400;
text-align: right;
font-size: 14px;
}
.invpm-status {
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 400;
background: #dcfce7;
color: #15803d;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
}
/* Rental stats cards */
.invpm-stats-title {
margin: 18px 0 12px;
color: #6b7280;
font-weight: 400;
font-size: 14px;
}
.invpm-statcard {
background: #f8fafc;
border: 1px solid #eef2f7;
border-radius: 14px;
padding: 18px 18px;
height: 100%;
}
.invpm-statvalue {
margin: 0;
font-size: 24px;
font-weight: 400;
color: #111827;
}
.invpm-statlabel {
margin: 6px 0 0;
color: #6b7280;
font-weight: 400;
font-size: 12px;
}
/* Footer action area inside modal */
.invpm-footer {
margin-top: 22px;
padding: 18px 26px 22px;
border-top: 1px solid #eef2f7;
background: #fff;
}
.invpm-returnbtn {
width: 100%;
border-radius: 12px;
padding: 16px 16px;
border: 2px solid #fb923c;
background: #fff;
color: #f97316;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
}
.invpm-returnbtn:hover {
background: #fff7ed;
border-color: #f97316;
color: #ea580c;
}
.invpm-footnote {
margin: 10px 0 0;
text-align: center;
color: #6b7280;
font-size: 12px;
font-weight: 400;
}
/* Responsive */
@media (max-width: 991.98px) {
.invpm-imgwrap {
height: 420px;
}
.invpm-right {
padding-left: 0;
margin-top: 14px;
}
}
@media (max-width: 575.98px) {
.invpm-header {
padding: 18px 16px;
}
.invpm-tabs {
padding: 0 16px;
}
.invpm-tabsbar {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 10px 0 6px;
}
.invpm-variant-selectwrap {
justify-content: space-between;
}
.invpm-variant-select {
width: 100%;
min-width: 0;
}
.invpm-body {
padding: 16px 16px 0;
}
.invpm-footer {
padding: 16px 16px 18px;
}
.invpm-imgwrap {
height: 340px;
border-radius: 14px;
}
}
/* ===== CALENDAR TAB UI (unique prefix) ===== */
/* Legend row */
.calui-legend {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
padding: 16px 0 18px;
}
.calui-legend-item {
display: flex;
align-items: center;
gap: 10px;
color: #4b5563;
font-weight: 400;
}
.calui-legend-dot {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid transparent;
flex: 0 0 auto;
background: #fff;
}
.calui-dot-rented {
background: #ffe4e6;
border-color: #fb7185;
}
.calui-dot-cleaning {
background: #e5e7eb;
border-color: #d1d5db;
}
.calui-dot-available {
background: #ecfdf5;
border-color: #86efac;
}
.calui-dot-blocked {
background: #f3e8ff;
border-color: #d8b4fe;
}
.calui-wrap {
overflow-y: auto;
max-height: 500px;
}
/* Calendar card */
.calui-card {
background: #fff;
border: 1px solid #e7eaf0;
border-radius: 18px;
padding: 18px 16px 18px;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}
@media (min-width: 768px) {
.calui-card {
padding: 22px 22px 22px;
}
}
/* Calendar header */
.calui-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 4px 12px;
}
.calui-navbtn {
width: 32px;
height: 32px;
border-radius: 10px;
border: 1px solid #e7eaf0;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #111827;
}
.calui-navbtn:hover {
background: #f9fafb;
}
.calui-month {
margin: 0;
font-weight: 400;
font-size: 18px;
text-align: center;
flex: 1 1 auto;
}
/* Weekday header */
.calui-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 14px;
padding: 10px 4px 10px;
}
.calui-weekday {
text-align: center;
color: #6b7280;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.02em;
}
/* Days grid */
.calui-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 14px;
padding: 8px 4px 6px;
}
.calui-day {
height: 107px;
border-radius: 10px;
border: 1px solid #bbf7d0;
background: #ecfdf5;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
color: #111827;
position: relative;
user-select: none;
}
.calui-day-muted {
opacity: 0;
pointer-events: none;
}
/* States */
.calui-day-available {
border-color: #86efac;
background: #ecfdf5;
}
.calui-day-rented {
border-color: #fb7185;
background: #ffe4e6;
color: #dc2626;
}
.calui-day-cleaning {
border-color: #d1d5db;
background: #e5e7eb;
color: #4b5563;
}
.calui-day-blocked {
border-color: #d8b4fe;
background: #f3e8ff;
color: #6d28d9;
}
/* Responsive sizes */
@media (max-width: 991.98px) {
.calui-day {
height: 92px;
}
}
@media (max-width: 575.98px) {
.calui-tabs {
gap: 22px;
}
.calui-tab {
font-size: 16px;
}
.calui-tab-active::after {
width: 90px;
}
.calui-month {
font-size: 20px;
}
.calui-weekdays,
.calui-grid {
gap: 10px;
}
.calui-day {
height: 40px;
font-size: 14px;
}
.calui-navbtn {
width: 38px;
height: 38px;
border-radius: 10px;
}
}
/* ===== REPORT EARNINGS TAB (unique prefix) ===== */
/* Base */
.rp-body {
background: #fafafa;
font-family:
system-ui,
-apple-system,
Segoe UI,
Roboto,
Arial,
sans-serif;
}
.rp-container {
padding: 24px 0 40px;
}
/* Tabs */
.rp-tabs {
margin-bottom: 24px;
border-radius: 14px;
}
.rp-tabs-body {
display: flex;
}
.rp-tab {
font-weight: 400;
color: #6b7280;
cursor: pointer;
padding: 16px 24px;
font-size: 14px;
}
.rp-tab-active {
color: var(--brand);
position: relative;
}
.rp-tab-active::after {
content: "";
position: absolute;
left: 0;
bottom: -0px;
width: 100%;
height: 3px;
background: var(--brand);
border-radius: 2px;
}
/* Stats */
.rp-stat {
border-radius: 18px;
padding: 24px;
color: #fff;
height: 100%;
}
.rp-stat-green {
background: linear-gradient(135deg, #00c853, #00a845);
}
.rp-stat-purple {
background: var(--brand);
}
.rp-stat-blue {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.rp-stat-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.rp-icon {
background: rgba(255, 255, 255, 0.2);
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
}
.rp-btn-cashout {
background: #fff;
color: #16a34a;
border: none;
padding: 8px 16px;
border-radius: 10px;
font-weight: 400;
}
.rp-amount {
font-size: 36px;
font-weight: 400;
margin-top: 16px;
}
.rp-label {
font-size: 14px;
opacity: 0.9;
}
/* Chart */
.rp-chart-card {
margin: 28px 0;
border-radius: 18px;
}
.rp-chart-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.rp-title {
font-weight: 600;
font-size: 18px;
}
.rp-export {
background: none;
border: none;
color: var(--brand);
font-weight: 600;
}
/* Table */
.rp-table-card {
border-radius: 18px;
}
.rp-table-title {
padding: 20px;
margin: 0;
}
.rp-table thead {
background-color: #fbf9fa;
}
.rp-table th {
font-size: 12px;
text-transform: uppercase;
color: #6b7280;
padding: 12px 24px;
border-bottom: none !important;
}
.rp-table td {
padding: 12px 24px;
vertical-align: middle;
font-size: 14px;
}
.rp-badge {
padding: 4px 8px;
border-radius: 4px;
font-weight: 400;
font-size: 12px;
}
.rp-badge-rental {
background: #e0e7ff;
color: #2563eb;
}
.rp-badge-sale {
background: #f3e8ff;
color: var(--brand);
}
.rp-badge-split {
background: #f3e8ff;
color: var(--brand);
}
.rp-positive {
color: #16a34a;
}
.rp-arrow {
color: #9ca3af;
font-size: 22px;
text-align: right;
}
/* ============================= */
/* Responsive Adjustments */
/* ============================= */
/* Tablets */
@media (max-width: 991px) {
/* Tabs */
.rp-tabs-body {
gap: 24px;
flex-wrap: wrap;
}
/* Stats cards */
.rp-amount {
font-size: 30px;
}
}
/* Mobile */
@media (max-width: 767px) {
/* Container spacing */
.rp-container {
padding: 16px 12px 32px;
}
/* Tabs stack */
.rp-tabs-body {
gap: 16px;
}
.rp-tab {
font-size: 14px;
}
.rp-tab-active::after {
bottom: -10px;
}
/* Stat cards */
.rp-stat {
padding: 20px;
}
.rp-amount {
font-size: 26px;
}
.rp-icon {
width: 40px;
height: 40px;
font-size: 18px;
}
/* Chart card */
.rp-chart-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.rp-chart-placeholder {
height: 160px;
}
/* Table */
.rp-table-title {
padding: 16px;
font-size: 16px;
}
.rp-table th,
.rp-table td {
padding: 14px;
white-space: nowrap;
}
/* Improve scroll UX */
.table-responsive {
overflow-x: auto;
}
/* Hide arrow column on mobile */
.rp-arrow {
display: none;
}
}
/* Extra small devices */
@media (max-width: 480px) {
/* Tabs */
.rp-tab {
font-size: 13px;
}
/* Stats */
.rp-amount {
font-size: 24px;
}
.rp-btn-cashout {
font-size: 13px;
padding: 5px 12px;
}
/* Chart */
.rp-chart-placeholder {
height: 140px;
}
}
/* Item Performance */
/* Filter Bar */
.ip-filterCard {
background: #fff;
border: 1px solid #e9ecf3;
border-radius: 18px;
padding: 18px;
}
.ip-filterInner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ip-filterBtn {
border: 0;
background: #f1f3f7;
color: #374151;
padding: 8px 16px;
border-radius: 10px;
font-weight: 400;
font-size: 14px;
transition: 0.15s ease;
}
.ip-filterBtn:hover {
filter: brightness(0.98);
}
.ip-filterBtnActive {
background: var(--brand);
color: #fff;
box-shadow: 0 10px 22px rgba(124, 58, 237, 0.18);
}
/* Cards grid */
.ip-grid {
margin-top: 18px;
}
.ip-card {
background: #fff;
border: 1px solid #e9ecf3;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06);
height: 100%;
display: flex;
flex-direction: column;
}
.ip-media {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
background: #eef2f7;
overflow: hidden;
}
.ip-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ip-statusBadge {
position: absolute;
top: 14px;
right: 14px;
padding: 6px 12px;
border-radius: 8px;
font-weight: 400;
font-size: 12px;
line-height: 1;
border: 1px solid rgba(0, 0, 0, 0.06);
background: #fff;
}
.ip-badgeRented {
background: #d7ffe6;
color: #0f7a3a;
}
.ip-badgeAvailable {
background: #dbeafe;
color: #1d4ed8;
}
.ip-badgeCleaning {
background: #ffe7d1;
color: #c2410c;
}
.ip-badgeSold {
background: #f3e8ff;
color: var(--brand);
}
.ip-content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ip-title {
margin: 0;
font-weight: 400;
font-size: 14px;
color: #111827;
}
.ip-brand {
margin: 0;
font-size: 12px;
color: #6b7280;
font-weight: 400;
}
.ip-bottom {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.ip-rented {
font-size: 12px;
color: #6b7280;
font-weight: 400;
}
.ip-earned {
font-size: 12px;
color: #16a34a;
font-weight: 400;
}
/* Responsive tweaks */
@media (max-width: 991px) {
.ip-filterCard {
padding: 12px;
}
.ip-filterBtn {
font-size: 12px;
padding: 6px 12px;
border-radius: 10px;
}
}
@media (max-width: 575px) {
.ip-container {
padding: 16px 0 28px;
}
.ip-filterInner {
gap: 10px;
}
.ip-filterBtn {
width: 100%;
text-align: center;
}
.ip-content {
padding: 16px;
}
.ip-title {
font-size: 17px;
}
.ip-earned {
font-size: 15px;
}
}
/* Card */
.od-card {
background: #fff;
border: 1px solid #e8e8ef;
border-radius: 18px;
overflow: hidden;
}
/* Header */
.od-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 22px;
}
.od-title {
margin: 0;
font-size: 18px;
font-weight: 500;
color: #111827;
}
.od-btn {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid #cfd3dd;
background: #fff;
border-radius: 10px;
padding: 8px 16px;
font-weight: 400;
font-size: 14px;
color: #111827;
cursor: pointer;
white-space: nowrap;
}
.od-btn:hover {
background: #f8fafc;
}
.od-btnIcon {
width: 20px;
height: 20px;
color: #111827;
}
.od-divider {
border: 0;
border-top: 1px solid #e8e8ef;
margin: 0;
}
/* Table */
.od-tableWrap {
width: 100%;
}
.od-table {
margin: 0;
}
.od-table thead th {
background: #fbf7fb;
color: #6b7280;
text-transform: uppercase;
font-size: 12px;
padding: 12px 24px;
border-bottom: 1px solid #e8e8ef !important;
white-space: nowrap;
}
.od-table tbody td {
padding: 16px 24px;
border-bottom: 1px solid #ececf3;
vertical-align: middle;
color: #111827;
font-size: 14px;
white-space: nowrap;
}
.od-table tbody tr:last-child td {
border-bottom: 0;
}
/* Order link */
.od-orderLink {
color: #a000ff;
font-weight: 400;
text-decoration: none;
}
.od-orderLink:hover {
text-decoration: underline;
}
/* Item cell */
.od-itemCell {
white-space: normal;
min-width: 260px;
}
.od-itemName {
font-weight: 400;
margin: 0;
font-size: 14px;
color: #111827;
}
.od-itemSku {
margin: 4px 0 0;
color: #6b7280;
font-size: 12px;
font-weight: 500;
}
.od-fees {
color: #ff0000 !important;
font-weight: 400;
}
.od-earn {
color: #00a63a !important;
}
/* Split badge */
.od-splitBadge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border-radius: 6px;
background: #f3e8ff;
color: #a000ff;
font-weight: 400;
font-size: 12px;
line-height: 1;
white-space: nowrap;
}
/* Responsive */
@media (max-width: 991px) {
.od-header {
padding: 18px;
}
.od-table thead th {
font-size: 12px;
padding: 14px 16px;
}
}
@media (max-width: 767px) {
.od-header {
flex-direction: column;
align-items: flex-start;
}
.od-btn {
width: 100%;
justify-content: center;
}
/* keep table usable on small screens */
.od-tableWrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.od-table thead th,
.od-table tbody td {
white-space: nowrap;
}
}
@media (max-width: 480px) {
.od-title {
font-size: 22px;
}
.od-btn {
padding: 11px 14px;
}
}
.innerpage-banner.ds-transparent-inner {
background-image: url(https://s3.us-east-2.amazonaws.com/images.rentmy.co/content-image/3933/l4oism6_1766482595_zc1sslv.jpg);
background-repeat: no-repeat;
}
.innerpage-banner {
background-color: #f2f3f8;
margin-top: 100px;
height: 150px;
overflow: hidden;
}
.ds-transparent-inner {
margin-top: 0;
height: 300px;
}
@media (min-width: 768px) {
.innerpage-banner.ds-transparent-inner {
height: 315px !important;
background-position: right center;
background-size: 100%;
}
}
@media (min-width: 1200px) {
.rent-sub-pages.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 6% !important;
padding-right: 6% !important;
width: 100%;
}
}
@media (min-width: 1600px) {
.rent-sub-pages.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 12% !important;
padding-right: 12% !important;
width: 100%;
}
}
.rent-sub-pages h2 {
font-size: 24px;
line-height: 1.3;
}
.rent-sub-pages p {
color: #888;
font-size: 16px;
line-height: 1.5;
margin-top: 12px;
}
.rent-sub-pages p + * {
margin-top: 24px;
}
.blog-list-content .tabs .overlay {
background: linear-gradient(120deg, #d4fc79, #96e6a1);
position: relative;
min-height: 330px;
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.blog-list-content .tabs .overlay::after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
background: linear-gradient(to bottom, #0000 40%, #000000b3);
transition: background-color 0.3s ease;
left: 0;
}
.blog_link {
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.text-red-600,
.text-red-700 {
color: var(--color-red-700);
}
.wallet-pickers {
height: 44px !important;
background-color: #f9f9f9 !important;
}
.cchat-table-card {
margin-top: 32px;
border: 1px solid #eef1f4;
border-radius: 12px;
background: #ffffff;
overflow: hidden;
}
.cchat-table-head {
padding: 16px 20px;
padding-top: 0;
border-bottom: 1px solid #eef1f4;
}
.cchat-title {
font-size: 24px;
font-weight: 600;
color: #000;
}
.cchat-table thead th {
background-color: #f7f9fc;
color: #36414d;
font-size: 14px;
font-weight: 600;
border-bottom: 1px solid #e9edf2 !important;
white-space: nowrap;
padding: 15px;
}
.cchat-table tbody td {
font-size: 14px;
color: #4c5864;
vertical-align: middle;
border-color: #eef1f4;
padding: 15px;
}
.cchat-action-btn {
border: none;
border-radius: 6px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
background: #f1f3f7;
color: #000000;
line-height: 1;
position: relative;
}
.cchat-action-btn:hover {
background: #e2e6eb;
}
.cchat-action-btn .cchat-badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 50%;
background: #ff3b3b;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
@media (max-width: 767px) {
.cchat-table thead th,
.cchat-table tbody td {
white-space: nowrap;
}
}
/* ── Add Log Button ───────────────────────────── */
.cchat-add-btn {
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--brand);
border: none;
border-radius: 8px;
padding: 8px 18px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: background 300ms ease;
}
/* ── Log Tabs ─────────────────────────────────── */
.cchat-tabs {
border-bottom: 1px solid #eef1f4;
display: flex;
align-items: center;
gap: 8px;
}
.cchat-tab {
font-size: 16px;
font-weight: 400;
color: #36414d;
padding: 20px 16px;
background: transparent;
border: none;
cursor: pointer;
position: relative;
}
.cchat-tab.active {
color: var(--brand);
font-weight: 500;
}
.cchat-tab:hover {
color: var(--brand);
}
.cchat-tab.active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand);
}
.cchat-tabs > .ms-auto {
margin-left: auto;
}
/* panes */
.cchat-pane-wrapper > .cchat-pane {
display: none;
}
.cchat-pane-wrapper > .cchat-pane.active {
display: block;
}
.cchat-add-btn:hover {
background: #152b43;
color: #fff;
}
/* ── Log Modal ────────────────────────────────── */
.log-modal-content {
border-radius: 14px;
border: 1px solid #eef1f4;
overflow: hidden;
}
.log-modal-header {
border-bottom: 1px solid #eef1f4;
padding: 16px 20px;
}
.log-modal-title {
font-size: 17px;
font-weight: 600;
color: #000;
}
/* ── Input bar (top & bottom) ─────────────────── */
.log-input-bar {
padding: 16px 20px;
border-bottom: 1px solid #eef1f4;
background: #f7f9fc;
}
.log-input-bar--bottom {
border-bottom: none;
border-top: 1px solid #eef1f4;
}
.log-input-wrap {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #e2e6eb;
border-radius: 10px;
overflow: hidden;
padding: 6px 6px 6px 14px;
}
.log-input-field {
flex: 1;
border: none !important;
outline: none;
font-size: 14px;
color: #4c5864;
background: transparent;
}
.log-input-field::placeholder {
color: #aab4be;
}
.log-submit-btn {
background: #990ffa;
color: #fff;
border: none;
border-radius: 8px;
padding: 7px 18px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background 300ms ease;
}
.log-submit-btn:hover {
background: #152b43;
}
/* ── Modal body / scrollable table ───────────── */
.log-modal-body {
max-height: 340px;
overflow-y: auto;
}
/* ── Status badges ───────────────────────────── */
.log-status-badge {
border-radius: 20px;
padding: 3px 12px;
font-size: 12px;
font-weight: 600;
display: block;
width: fit-content;
margin: 0 auto;
}
.log-status-done {
background: #e6f4ea;
color: #2e7d32;
}
.log-status-pending {
background: #fff3e0;
color: #e65100;
}
.log-status-rejected {
background: #fce4ec;
color: #c62828;
}
/* ── Sender badges ───────────────────────────── */
.log-sender-admin {
background: #ddeaf7;
color: #213f60;
}
.log-sender-customer {
background: #fff3e0;
color: #e65100;
}
.log-sender-me {
background: #d9f2ea;
color: #1a7f5a;
}
.log-sender-consignor {
background: #ede7f6;
color: #6d4c9f;
}
/* ── Sent date sub-text ──────────────────────── */
.log-sent-date {
font-size: 11px;
color: #aab4be;
margin-top: 4px;
display: block;
text-align: center;
}
/* ── Chat log body ───────────────────────────── */
.log-chat-body {
padding: 16px 20px;
max-height: 360px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
background: #f7f9fc;
}
/* ── Single chat item row ────────────────────── */
.log-chat-item {
display: flex;
align-items: flex-end;
gap: 10px;
}
.log-chat-item--me {
flex-direction: row-reverse;
}
/* ── Avatar circle ───────────────────────────── */
.log-chat-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
color: #fff;
}
.log-chat-avatar--admin {
background: #213f60;
}
.log-chat-avatar--customer {
background: #6d4c9f;
}
.log-chat-avatar--me {
background: #1a7f5a;
}
/* ── Bubble wrapper ──────────────────────────── */
.log-chat-bubble {
max-width: 68%;
display: flex;
flex-direction: column;
gap: 4px;
}
/* ── Sender meta line ────────────────────────── */
.log-chat-meta {
display: flex;
align-items: center;
gap: 6px;
}
.log-chat-item--me .log-chat-meta {
flex-direction: row-reverse;
}
.log-chat-sender {
font-size: 12px;
font-weight: 600;
color: #36414d;
}
.log-chat-role {
font-size: 10px;
font-weight: 600;
border-radius: 20px;
padding: 2px 8px;
display: inline-block;
}
.log-chat-role--admin {
background: #ddeaf7;
color: #213f60;
}
.log-chat-role--customer {
background: #ede7f6;
color: #6d4c9f;
}
.log-chat-role--me {
background: #d9f2ea;
color: #1a7f5a;
}
/* ── Message bubble ──────────────────────────── */
.log-chat-text {
background: #fff;
border: 1px solid #e2e6eb;
border-radius: 12px 12px 12px 2px;
padding: 10px 14px;
font-size: 13px;
color: #36414d;
line-height: 1.5;
word-break: break-word;
}
.log-chat-item--me .log-chat-text {
background: #213f60;
border-color: #213f60;
border-radius: 12px 12px 2px 12px;
color: #fff;
}
/* ── Timestamp ───────────────────────────────── */
.log-chat-time {
font-size: 11px;
color: #aab4be;
padding: 0 4px;
}
.log-chat-item--me .log-chat-time {
text-align: right;
}
/* ── Premium Auth Split Layout ───────────────────────────────── */
.auth-split-layout {
display: flex;
flex-wrap: wrap;
min-height: 75vh;
margin: 40px auto;
max-width: 1100px;
background: #fff;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
overflow: hidden;
border: 1px solid #eaeaea;
}
.auth-split-layout .auth-left {
flex: 1 1 55%;
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.auth-split-layout .auth-right {
flex: 1 1 45%;
position: relative;
background: linear-gradient(135deg, #213f60, #4585a5);
display: flex;
align-items: center;
justify-content: center;
color: white;
padding: 40px;
}
.auth-right::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("https://images.unsplash.com/photo-1696453424673-8b05ed67ce0f?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: cover;
background-position: center;
opacity: 0.15;
mix-blend-mode: overlay;
z-index: 0;
}
.auth-right-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 400px;
}
.auth-right-content h2 {
font-size: 38px;
font-weight: 700;
margin-bottom: 20px;
color: #fff;
letter-spacing: -0.5px;
}
.auth-right-content p {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.auth-split-layout .RegistrationTitle {
font-size: 32px;
font-weight: 700;
color: #213f60;
margin-bottom: 30px;
text-align: left;
}
.auth-split-layout .AuthSubTitle {
font-size: 16px;
font-weight: 400;
color: #666;
margin-top: 8px;
display: block;
}
@media (max-width: 991px) {
.auth-split-layout .auth-right {
display: none;
}
.auth-split-layout .auth-left {
padding: 40px 30px;
}
}
.auth-split-layout .RentMyInputField {
height: 55px;
border-radius: 8px;
border: 1px solid #dcdcdc;
padding: 0 20px;
font-size: 15px;
transition: all 0.3s ease;
background-color: #fcfcfc;
width: 100%;
}
.auth-split-layout .RentMyInputField:focus {
border-color: #4585a5;
box-shadow: 0 0 0 4px rgba(69, 133, 165, 0.1);
background-color: #fff;
outline: none;
}
.auth-split-layout .RentMyInputGroup {
margin-bottom: 20px;
}
.auth-split-layout .RentMyBtn {
height: 60px;
border-radius: 10px;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
margin-top: 10px;
box-shadow: 0 6px 15px rgba(33, 63, 96, 0.2);
width: 100%;
}
.auth-split-layout .AuthEyeIcon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #888;
background: none;
border: none;
outline: none;
}
.auth-split-layout .LoginHere {
font-weight: 600;
color: #4585a5;
margin-top: 20px;
display: flex;
justify-content: center;
font-size: 15px;
text-decoration: none;
}
.auth-split-layout .LoginHere:hover {
color: #213f60;
text-decoration: underline;
}
.auth-split-layout .RentMyRow {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}
.auth-split-layout .RentMyInputGroup {
padding-left: 10px;
padding-right: 10px;
}
.auth-split-layout .RentMyHalfwidth {
flex: 0 0 50%;
max-width: 50%;
}
.auth-split-layout .RentMyFullwidth {
flex: 0 0 100%;
max-width: 100%;
}
@media (max-width: 576px) {
.auth-split-layout .RentMyHalfwidth {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Tax Information Card */
.cr-tax-card {
background: #eef3fb;
border: 1px solid #d6e2f5;
border-radius: 14px;
padding: 22px 24px;
}
.cr-tax-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.cr-tax-header svg {
color: #3b6abf;
flex-shrink: 0;
margin-top: 2px;
}
.cr-tax-title {
font-size: 15px;
font-weight: 700;
color: #1f2937;
margin-bottom: 4px;
line-height: 1.3;
}
.cr-tax-desc {
font-size: 13px;
color: #4b5563;
line-height: 1.55;
margin: 0;
}
.cr-tax-fields {
display: flex;
gap: 12px;
}
.cr-tax-field {
flex: 1;
}
.cr-tax-field .RentMyInputField {
background: #fff !important;
border-color: #e5e7eb !important;
}
@media (max-width: 576px) {
.cr-tax-card {
padding: 18px 16px;
}
.cr-tax-fields {
flex-direction: column;
gap: 10px;
}
}
/* Consignor Withdrawals Styles */
.cw-search-wrap {
border-radius: 12px;
margin-top: 32px;
}
.cw-search-box {
display: flex;
align-items: center;
border: 1px solid #eaebf0;
border-radius: 12px;
padding: 12px 16px;
background: #fff;
width: 100%;
}
.cw-search-box svg {
margin-right: 12px;
color: #a0a0a0;
}
.cw-search-input {
border: none !important;
background: transparent;
width: 100%;
font-size: 15px;
color: #333;
outline: none;
}
.cw-search-input::placeholder {
color: #a0a0a0;
}
.cw-table-card {
background: #fff;
border-radius: 12px;
border: 1px solid #eaebf0;
overflow: hidden;
}
.cw-table {
width: 100%;
border-collapse: collapse;
}
.cw-table th {
background: #fafafa !important;
color: #6a7282;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
padding: 13px 24px;
border-bottom: 1px solid #eaebf0 !important;
}
.cw-table td {
padding: 16px 24px;
vertical-align: middle;
border-bottom: 1px solid #eaebf0;
font-size: 14px;
}
.cw-table tr:last-child td {
border-bottom: none;
}
.cw-table td strong {
color: #18181b;
font-weight: 700;
}
.cw-item-title {
color: #9333ea;
font-weight: 500;
margin-bottom: 0px;
font-size: 14px;
}
.cw-item-desc {
color: #a1a1aa;
font-size: 10px;
}
.cw-text-gray {
color: #71717a;
}
.cw-badge {
display: inline-flex;
align-items: center;
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.cw-badge-blue {
background: #eff6ff;
color: #3b82f6;
}
.cw-badge-gray {
background: #f4f4f5;
color: #52525b;
}
.cw-badge-yellow {
background: #fef3c7;
color: #d97706;
}
.cw-tracking-link {
color: #3b82f6;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.cw-tracking-link:hover {
text-decoration: underline;
color: #2563eb;
}
.cw-tracking-text-muted {
color: #d4d4d8;
font-size: 14px;
}
.cw-btn-purple {
background: #9333ea;
color: #fff;
border: none;
border-radius: 10px;
padding: 8px 18px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: background 0.2s;
}
.cw-btn-purple:hover {
background: #7e22ce;
color: white;
}
.cw-text-success {
color: #16a34a;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 12px;
}
.cw-text-processing {
color: #a1a1aa;
font-style: italic;
font-size: 12px;
}
.cw-info-alert {
display: flex;
align-items: flex-start;
gap: 16px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 8px;
padding: 20px 24px;
margin-top: 24px;
}
.cw-info-alert-icon {
color: #3b82f6;
flex-shrink: 0;
margin-top: -2px;
}
.cw-info-alert-text {
color: #1e3a8a;
font-size: 14px;
line-height: 1.5;
}
/* Client Activation Page */
#RentMyClientActivationContainer {
padding: 100px 0;
}
#RentMyClientActivationContainer .ca-activation-shell {
max-width: 760px;
margin: 0 auto;
padding: 32px;
border: 1px solid #e0e0e0;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
#RentMyClientActivationContainer .ca-page-title {
font-size: 30px;
font-weight: 700;
color: #213f60;
margin-bottom: 10px;
}
#RentMyClientActivationContainer .ca-page-subtitle {
font-size: 15px;
color: #6b7280;
margin-bottom: 24px;
}
#RentMyClientActivationContainer .ca-stepper {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
#RentMyClientActivationContainer .ca-step {
flex: 1 1 220px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #6b7280;
}
#RentMyClientActivationContainer .ca-step-index {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
background: #e5e7eb;
color: #374151;
}
#RentMyClientActivationContainer .ca-step-label {
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
#RentMyClientActivationContainer .ca-step.is-active {
border-color: #4585a5;
background: #ecf4fa;
color: #213f60;
}
#RentMyClientActivationContainer .ca-step.is-active .ca-step-index {
background: #4585a5;
color: #ffffff;
}
#RentMyClientActivationContainer .ca-step.is-completed {
border-color: #86efac;
background: #f0fdf4;
color: #166534;
}
#RentMyClientActivationContainer .ca-step.is-completed .ca-step-index {
background: #16a34a;
color: #ffffff;
}
#RentMyClientActivationContainer .ca-panel {
display: none;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 22px;
}
#RentMyClientActivationContainer .ca-panel.is-visible {
display: block;
}
#RentMyClientActivationContainer .ca-panel[data-panel="processing"] {
background: #f8fbfe;
border-color: #dbeafe;
}
#RentMyClientActivationContainer .ca-panel[data-panel="failed"] {
background: #fff7f7;
border-color: #fecaca;
}
#RentMyClientActivationContainer .ca-panel[data-panel="success"] {
background: #f0fdf4;
border-color: #bbf7d0;
}
#RentMyClientActivationContainer .ca-panel-kicker {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 10px;
}
#RentMyClientActivationContainer .ca-panel-title {
font-size: 24px;
font-weight: 700;
color: #111827;
margin-bottom: 10px;
}
#RentMyClientActivationContainer .ca-panel-message {
font-size: 15px;
color: #374151;
margin-bottom: 0;
}
#RentMyClientActivationContainer .ca-panel-meta {
font-size: 13px;
color: #6b7280;
margin-top: 12px;
margin-bottom: 0;
word-break: break-all;
}
#RentMyClientActivationContainer .ca-login-btn {
margin-top: 16px;
width: auto;
}
@media (max-width: 767px) {
#RentMyClientActivationContainer {
padding: 70px 12px;
}
#RentMyClientActivationContainer .ca-activation-shell {
padding: 22px;
}
#RentMyClientActivationContainer .ca-step {
flex-basis: 100%;
}
#RentMyClientActivationContainer .ca-panel {
padding: 18px;
}
#RentMyClientActivationContainer .ca-panel-title {
font-size: 20px;
}
.ConsignerLogin,
.ConsignerRegister,
.CustomerLogin,
.CustomerRegister {
padding: 0 !important;
}
.ConsignerLogin .auth-split-layout,
.CustomerLogin .auth-split-layout {
box-shadow: none;
border: none;
}
.ConsignerRegister .auth-split-layout,
.CustomerRegister .auth-split-layout {
margin: 40px 12px;
}
}
/* AI Generator Modal CSS */
.ai-generator-modal .modal-content {
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.ai-generator-modal h3 {
font-size: 24px;
color: #111;
}
.ai-gen-info-box {
background-color: #fbeeff;
border: 1px solid #ebcffc;
border-radius: 8px;
padding: 16px;
}
.ai-gen-info-box p {
font-size: 15px;
color: #7729b8;
}
.ai-gen-info-box strong {
font-weight: 700;
}
.ai-gen-prompt-btn {
background: var(--brand);
border: 1px solid #a133ff;
color: #a133ff;
font-size: 14px;
font-weight: 500;
padding: 10px 18px;
border-radius: 8px;
line-height: 1;
white-space: nowrap;
color: #fff;
}
.ai-gen-prompt-btn:hover {
background: #faf5ff;
color: #a133ff;
border-color: #a133ff;
}
.ai-gen-prompt-row {
background: #faf5ff;
border-radius: 10px;
padding: 10px 12px 12px;
border: 1px solid #ebcffc;
}
.ai-gen-prompt-input {
border-radius: 8px;
border: 1px solid #e0c7ff;
background: #fff;
padding: 10px 12px;
font-size: 14px;
resize: vertical;
}
.ai-gen-prompt-input:focus {
border-color: #a133ff;
box-shadow: 0 0 0 0.15rem rgba(161, 51, 255, 0.18);
}
.ai-gen-generate-btn {
min-width: 110px;
border-radius: 999px;
border: none;
background: #a133ff;
color: #fff;
padding: 8px 18px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 6px 14px rgba(161, 51, 255, 0.35);
}
.ai-gen-generate-btn:hover {
background: #8d17ef;
color: #fff;
}
.ai-gen-image-container {
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.ai-generated-img {
width: 75%;
height: auto;
object-fit: cover;
max-height: 400px;
border-radius: 12px;
}
.ai-gen-actions {
display: flex;
gap: 15px;
}
.ai-btn {
padding: 12px 0;
font-size: 16px;
font-weight: 500;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
transition: all 0.2s ease;
}
.ai-btn-cancel {
background-color: #fff;
border: 1px solid #e0e0e0;
color: #333;
}
.ai-btn-cancel:hover {
background-color: #f8f9fa;
color: #333;
}
.ai-btn-regenerate {
background-color: #fff;
border: 1px solid #a133ff;
color: #a133ff;
}
.ai-btn-regenerate:hover {
background-color: #faf5ff;
color: #a133ff;
}
.ai-btn-regenerate svg {
color: #a133ff;
}
.ai-btn-save {
background-color: #a133ff;
border: 1px solid #a133ff;
color: #fff;
}
.ai-btn-save:hover {
background-color: #8d17ef;
color: #fff;
border-color: #8d17ef;
}
.image-loader-wrapper {
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.image-loader {
width: 100%;
height: 400px;
border-radius: 12px;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #e9d5ff, #fbcfe8, #bfdbfe);
}
.image-loader.animate {
animation: pulse 2s infinite;
}
/* shimmer effect */
.shimmer {
position: absolute;
inset: 0;
background: linear-gradient(
to right,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
}
.shimmer.animate {
animation: shimmer 2s infinite;
}
/* center icon */
.loader-center {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrapper {
width: 128px;
height: 128px;
position: relative;
}
.sparkle-icon {
width: 32px;
height: 32px;
color: #9333ea;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 150%;
}
.sparkle-icon.animate {
animation: spin 3s linear infinite;
}
/* bottom text */
.loader-text {
position: absolute;
bottom: 32px;
left: 0;
right: 0;
text-align: center;
}
.loader-text p {
font-size: 14px;
font-weight: 500;
color: #581c87;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px);
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
}
.VariantBarcodeButton {
background: var(--brand);
color: #fff;
border: none;
border-radius: 8px;
padding: 7px 12px;
font-size: 12px;
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.VariantBarcodeButton-mobile {
display: none;
}
@media (max-width: 599px) {
.VariantBarcodeButton-desktop {
display: none;
}
.VariantBarcodeButton-mobile {
display: inline-flex;
padding: 4px;
}
}
#anpColor {
min-height: 47px;
border: 1px solid #d1d5db;
}
.cp {
color: var(--brand);
}
/* animations */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.uploading-image {
width: 40px;
height: 40px;
border: 1px solid #e6e6e6;
background: linear-gradient(45deg, black, transparent, black);
background-size: 1300% 300%;
animation: uploadAnim 2s linear infinite;
}
@keyframes uploadAnim {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
#right-sidebarmenu {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 300px;
opacity: 9;
transition: all 0.75s ease;
margin-right: -315px;
z-index: 9999;
padding: 25px;
border-left: 1px solid #eee;
background-color: #fff;
}
#right-sidebarmenu.toggle-show{
margin-right: 0;
}
.right-close {
float: right;
height: 30px;
color: #555;
font-size: 25px;
display: block;
border-radius: 50px;
line-height: 30px;
text-align: center;
}
.right-close:hover {
color: #333;
}
.sidebar-about h3 {
padding-top: 2px;
text-transform: uppercase;
font-size: 20px;
font-weight: 400;
}
.sidebar-about p {
font-size: 17px;
font-weight: 300;
color: #888;
padding: 10px 0 30px;
}
.sidebar-menu {
border-top: 1px solid #eee;
}
.sidebar-menu ul,.sidebar-contact ul,.sidebar-social ul {
padding: 0;
list-style: none;
}
.sidebar-menu ul li a {
display: block;
padding: 5px 0;
font-weight: 300;
color: #888;
font-size: 16px;
border-bottom: 1px solid #f2f3f8;
}
.sidebar-contact h3 {
color: #444;
font-size: 18px;
font-weight: 400;
margin-bottom: 15px;
text-transform: capitalize;
padding-top: 30px;
}
.sidebar-contact ul li {
padding-bottom: 15px;
color: #888;
font-weight: 300;
display: flex;
align-items: center;
}
.sidebar-social h3 {
color: #444;
font-size: 18px;
font-weight: 400;
margin-bottom: 15px;
text-transform: capitalize;
padding-top: 30px;
}
.sidebar-social ul {
float: left;
width: 100%;
}
.sidebar-social ul li {
padding-bottom: 15px;
color: #888;
font-weight: 400;
display: inline-block;
position: relative;
}
.sidebar-social ul li a {
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
position: relative;
border-radius: 50px;
margin-right: 5px;
color: #eee;
font-size: 12px;
transition: all 0.3s;
}
.sidebar-contact ul li span {
border-radius: 50px;
margin-right: 10px;
color: #555;
box-shadow: 0 0 10px #ccc;
font-size: 12px;
flex-shrink: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.instagram {
background-color: #999;
}