@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,500&display=swap'); :root {--white: #ffffff; --dark: #000000; --soft-dark: #262424; --primary: #5d8ef4; --gray: #f4f4f5; --grayDark: #666666; --yellow: #faaf00; --red: #EB5757; } html, body {background: #fff; } h3 {font-family: 'Poppins', sans-serif; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; text-align: left; color: var(--dark); margin: 8px 0px; } .widget_container {margin: 0px auto; max-width: 600px; position: relative; } .MuiRating-root {display: inline-flex; position: relative; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; pointer-events: none; } .MuiRating-decimal {position: relative; } .MuiSvgIcon-root {user-select: none; width: 1em; height: 1em; display: inline-block; fill: currentcolor; flex-shrink: 0; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-size: inherit; } .MuiRating-icon {display: flex; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; pointer-events: none; } .carousel {padding-bottom: 1px; position: relative; } .carousel .carousel_container {padding: 8px 0px 0px 0px; border-top: 1px solid var(--dark); box-sizing: border-box; } .carousel .carousel__arrow {background: transparent !important; color: var(--primary); } .carousel .carousel__arrow svg {fill: var(--primary); } .carousel_footer__uldots__li_dot {background-color: var(--gray); } .carousel_footer__uldots__li_dot__active {background-color: var(--primary); } .carousel-card {display: flex; padding: 10px 8px; flex-direction: column; align-items: flex-start; background: var(--gray); height: 100%; box-sizing: border-box; } .carousel-media {height: 109px; text-align: center; width: 100%; float: left; display: flex; flex-direction: column; margin-bottom: 2px; gap: 8px; } .carousel-content {text-align: left; width: 100%; float: left; gap: 8px; display: flex; flex-direction: column; margin-bottom: 16px; } .carousel-button {text-align: left; width: 100%; float: left; display: flex; flex-direction: column; gap: 8px; } .carousel-card h4 {font-family: 'Poppins', sans-serif; word-break: break-word; font-size: 14px; font-style: normal; font-weight: 600; white-space: break-spaces; color: var(--dark); line-height: normal; text-align: left; letter-spacing: 0.099px; margin: 0px; height: 42px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } .carousel-card p {font-family: 'Poppins', sans-serif; word-break: break-word; font-size: 12px; font-style: normal; font-weight: 400; white-space: break-spaces; text-align: left; margin: 0px; line-height: normal; letter-spacing: 0.099px; height: 90px; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } .review {font-family: 'Poppins', sans-serif; color: var(--primary); font-size: 12px; font-style: normal; text-align: left; font-weight: 400; margin-bottom: 16px; line-height: normal; letter-spacing: 0.099px; text-decoration: none; } .button {position: relative; font-family: 'Poppins', sans-serif; font-size: 14px; border-radius: 4px; cursor: pointer; width: fit-content; display: inline-flex; text-decoration: none; padding: 6px 16px; text-align: center; outline: none; } .primary {background-color: var(--primary); color: var(--white); border: 1px solid var(--primary); } .carousel-img {display: block; height: 80px; max-width: 100%; width: 100%; object-fit: contain; object-position: center; } .rating {color: var(--yellow); font-size: 16px; margin-right: 4px; } .rating .MuiRating-iconEmpty {color: var(--yellow) !important; } .rating-transparent {color: transparent !important; font-size: 16px; margin-right: 4px; } .rating-transparent .MuiRating-iconEmpty {color: transparent !important; } .col-md-12 {display: block; clear: both; width: 100%; } .text-center {text-align: center !important; } .carousel_footer {width: 100%; padding: 0px 8px; gap: 16px; margin-top: 10px; } .carousel_footer__top {gap: 8px; } .flex_row_center_center {display: flex; justify-content: center; align-items: center; } .flex_row_between_center {display: flex; justify-content: space-between; align-items: center; } .flex_column_center_center {display: flex; flex-direction: column; justify-content: center; align-items: center; } .carousel-media-image-container {position: relative; height: 80px; width: 100%; } .carousel-card .carousel-media-image-container-discount {position: absolute; top: 8px; left: 8px; z-index: 10; width: fit-content !important; height: 20px !important; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; background-color: var(--primary); color: white; display: flex; justify-content: center; align-items: center; padding: 2px; box-sizing: border-box; border-radius: 4px; } .carousel-card .pricebox-merchants-text {display: flex; justify-content: center; align-items: center; gap: 0px; margin: 0px; color: var(--white); font-weight: 600; font-size: 14px; flex-direction: column; gap: 2px; height: 60px; min-height: 60px; max-height: 60px; flex: 1; width: 100%; } .carousel-card .pricebox-merchants-text:hover {color: var(--white); } .discount-style {text-decoration: line-through; margin: 0px; } .automatic-amazon {padding: 6px 8px; width: 100%; } #expiration-date-offer-container {gap: 4px; height: 24px; width: 130px; display: flex; justify-content: center; align-items: center; visibility: hidden; } #expiration-date-offer {font-size: 12px; font-weight: 600; width: 82px; text-align: left; color: var(--red); } .pricebox-subscription-primeday {display: flex; justify-content: center; align-items: center; width: fit-content; gap: 8px; padding: 5px 10px; border-radius: 4px; border: none; box-sizing: border-box; color: var(--soft-dark); } .pricebox-subscription-primeday-text {font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; margin: 0px; text-align: left; padding-bottom: 10px; } .path-LogoFastCart {fill: var(--red) !important; } .line-LogoFastCart {stroke: var(--red) !important; } .button-prime-day {background-color: var(--soft-dark); color: var(--white); border: 1px solid var(--soft-dark); font-size: 12px; font-weight: 600; padding: 3px 16px; } .prime-day-logo-image {width: 100%; height: 34px; object-fit: contain; object-position: center; } .carousel-prices-warning {width: 100%; padding: 8px 8px; gap: 16px; text-align: left; border-bottom: 1px solid var(--dark); } .carousel-prices-warning p {font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 400; color: var(--grayDark); } .button-pricebox-merchant {width: 100%; } @media (max-width: 480px) {.widget_container {max-width: 320px; } }