*IMPORTANT NOTE: The Custom CSS section of the template code belongs on the first page of the Customize Settings in the “Custom CSS” input field in the admin portal (Settings > Returns-Originate > Customize > Returns Center > Landing Page: Global). The “Details Section HTML” template code belongs in the “Details Section” input field on the same page in the admin portal.

Please note you must be on Classic Mode in your Customize Settings. These templates do not apply to Modern Mode.

Modern Return Center with an image background of clothes and content containers with box shadows

Logo Icon made by Freepik from Flaticon.

Background Photo by Svitlana from Unsplash.

To learn how to customize the templates, check out the section How to Customize the Return Center Templates within the Branding the Return Center Help Center collection.

Overview

Code Customization

Any text with this font and inside this gray box or with a gray 
highlight (shown below) is code except for
text within /* */, i.e., comments. 

/* Comments label the sections of the code depending on which page(s)
we are editing and any notes. We will leave the comments in this
article to help you identify which section's code we are referring to 
and if you want to copy and paste the notes in your code for easier 
future reference as to what's being done. */

Any text in this gray highlight is also code and all of the above applies.

Note: The Table of Contents calls out most major sections, but not everything, so if you don’t see what you’re looking for here, it’s best to go directly to the code to see if we have it.

Overview

Code Customization
Table of Contents

Custom CSS

Global Settings
- Background
- Font
- Page Structure
- Forms

Notification Page
- Content Container

Orders Page
- Content Container
- Page Structure
- Font

Landing Page
- Content Container
- Buttons
- Hyperlinks

Address Page
- Content Container
- Font

Items Page
- Items Band
- Page Structure
- Forms
- Buttons
- Items Selection Page
  - Items Selection Page: Buttons
- Exchanges
  - Exchanges Page: Buttons
  - Exchanges Page: Items
  - Exchanges Page: Font

Review Page
- Review Band
- Font

Summary Page
- Content Container
- Page Structure
- Icons
- Font
- Buttons

Third-Party Warranty Page
- Content Container
- Page Structure
- Font
- Buttons
- Calendar
  - Calendar Font
  - Calendar Buttons

Gift Return Page
- Content Container
- Font
- Buttons

Invalid Page
- Page Structure
- Font
- Buttons

Details Section

Custom CSS

/* ---- GLOBAL SETTINGS: TEMPLATE 3 ---- */

/* -- Background -- */

/*Setting the background image*/ body { background-image: url("https://images.unsplash.com/photo-1596433904500-97b901c5d274?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2564&q=80"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }

/* -- Font -- */

/* h1: summary page CTA title,

h2: landing page title,

h3: every page after landing page */

h1, h2, h3 {

font-family: 'Helvetica', sans-serif !important;

color: #444444;

line-height: 1.3; }

/* Card titles, Items Page Item Card non-returnable messages,

Variant Exchange Pop-up Modal's "Select Variant" text,

Review Page container titles, Summary Page CTA Content Block Message */

h4 {

font-family: 'Helvetica', sans-serif !important;

font-size: 16px;

line-height: 1.3; }

/* Descriptive text, Review and Product page name text */

h5 {

margin-bottom: 10px;

font-family: 'Helvetica', sans-serif !important;

font-size: 16px !important;

font-weight: 400;

line-height: 1.3;

color: #444444; }

/* Third-party Warranty Add a Product Page Item Pop-up Modal item details */

h6 {

font-family: 'Helvetica', sans-serif !important;

font-size: 16px !important;

line-height: 1.3;

color: #444444; }

/* General body text */

p, span {

font-size: 16px !important;

line-height: 1.3; }

/* Descriptor text */

.margin-left-5.margin-top-5, .text-muted.margin-top-5 {

color: #7A7A7A !important;

line-height: 1.3; }

.text-muted {

color: #7a7a7a;

font-size: 16px;

line-height: 1.3; }

/* Form labels */

label {

font-family: 'Helvetica', sans-serif !important;

font-size: 16px !important;

color: #444444;

margin-bottom: 4px; }

/* Error text when filling form */

.label-error {

font-family: 'Helvetica', sans-serif !important;

font-size: 16px !important;

font-weight: 400;

line-height: 1.3; }

/* -- Page Structure -- */

/* Making wrappers and containers transparent */

.address-grid-wrapper, .emailed-grid-wrapper, .exchange-grid-wrapper, .gift-grid-wrapper, #gift-instruction-grid-wrapper, .info-grid-wrapper, #instruction-grid-wrapper, .invalid-grid-wrapper, .items-footer, .items-grid-wrapper, .nav-container, .navbar-fixed-bottom, .navbar-white, .notified-grid-wrapper, .orders-grid-wrapper, .review-grid-wrapper, .start-grid-wrapper, .status-grid-wrapper, .text-center, .warranty-grid-wrapper {

background-color: transparent !important;

border: none !important; }

/* Navbar margins */

.navbar.navbar-default {

margin-top: 100px;

margin-bottom: 30px; }

/* Grid layout for Return Center */

.main-grid {

display: grid;

background-color: transparent; }

/* -- Forms -- */

/* -- Drop-down Lists, Text Input Fields, etc -- */

input {

font-size: 18px !important;

font-family: 'Helvetica', sans-serif !important;

font-weight: 400;

line-height: 1.5;

margin: 0 !important;

border-radius: 0px !important;

-webkit-appearance: none !important;

-moz-appearance: none !important;

appearance: none !important;

background: #FFFFFF !important;

border: 1px solid #444444 !important;

padding: 16px !important;

color: #444444; }

input:focus {

font-family: 'Helvetica', sans-serif !important;

border: 1px solid #4579B2 !important;

box-shadow: offset 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(108, 122, 125, 1); }

select {

font-size: 18px !important;

font-family: 'Helvetica', sans-serif !important;

font-weight: 400;

line-height: 1.5;

margin: 0 !important;

border-radius: 0 !important;

box-shadow: 0 0 0 1px transparent !important;

background: #fff !important;

border: 1px solid #444444 !important;

padding: 8px !important; }

/* -- Buttons -- */

/* All buttons */

.btn {

border-radius: 0;

font-size: 16px; }

/* Button that takes you back to previous page of return process */

.items-footer .btn-danger {

position: relative;

background-color: #5E6D6E !important;

color: #FFFFFF;

border: 1px solid #444444 !important; }

.items-footer .btn-danger:hover, .items-footer .btn-danger:active {

background-color: #444444 !important;

border: 1px solid #444444 !important; }

/* Button that takes you next in the return process */

.items-footer .btn-success {

background-color: #E1E1E1 !important;

color: #444444 !important;

border: 1px solid #444444 !important; }

.items-footer .btn-success:disabled, .items-footer .btn-success:disabled:hover {

background-color: #E1E1E1 !important;

color: #6C7A7D !important;

border: 1px solid #6C7A7D !important; }

.items-footer .btn-success:hover, .items-footer .btn-success:active {

background-color: #FFFFFF !important;

border: 1px solid #444444 !important; }

/* ---- NOTIFICATION PAGE ---- */

/* -- Notifications Page: Content Container -- */

.notified-card {

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

padding-bottom: 20px !important; }

/* ---- ORDERS PAGE ---- */

/* -- Orders Page: Content Container-- */

.card.returnable {

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

cursor: pointer; }

/* -- Orders Page: Page Structure-- */

/*Changing space top at the top of the Order Card*/

.card .order-header { padding-top: 15px; }

/* Order Total Band */

.card .order-total { background-color: #5E6D6E; }

/* -- Orders Page: Font -- */

.orders-form .card h1.orderNumber {

margin-top: 12px;

margin-bottom: 8px;

font-size: 24px !important; }

.card .order-date {

font-size: 16px;

margin-top: 8px;

margin-bottom: 10px; }

/* ---- LANDING PAGE ---- */

/* -- Landing Page: Content Container -- */

#start-return .start-form {

background-color: #FFFFFF !important;

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

max-width: 500px;

padding: 60px; }

/* -- Landing Page: Buttons -- */

/* Button to start return process */

#start-return .btn-start-rma {

margin-bottom: 40px;

border: 1px solid #444444 !important;

background-color: #5E6D6E !important;

color: #FFFFFF !important; }

#start-return .btn-start-rma:active, #start-return .btn-start-rma:hover {

background-color: #444444 !important;

border: 1px solid #444444 !important;

color: #FFFFFF !important; }

#start-return .btn-start-rma:disabled, #start-return .btn-start-rma:disabled:hover {

background-color: #6C7A7D !important;

color: #FFFFFF !important;

border: none !important; }

/* -- Landing Page: Hyperlinks -- */

.gift-link, a.ng-binding {

font-size: 16px; }

/* ---- ADDRESS PAGE ---- */

/* -- Address Page: Content Container -- */

.address-card, .international-card {

background: transparent !important;

min-height: 100%;

position: relative;

padding: 10px; }

.address-form {

background-color: #FFFFFF !important;

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

max-width: 600px;

padding: 60px; }

/* Address card within address content container */

.address-card {

box-shadow: none; }

/* -- Address Page: Font-- */

#addressChangeForm {

font-size: 16px; }

/* ---- ITEMS PAGE ---- */

/* -- Items Page: Items Band -- */

.items-band div.ng-scope:hover {

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

cursor: pointer; }

.item-disabled-overlay, .return-details {

cursor: not-allowed !important; }

/* -- Items Page: Pop-Up Modal Page Structure -- */

.item-modal-header-title {

padding-left: 15px; }

/* -- Items Page: Pop-Up Modal Forms -- */

/* Where shoppers input additional information about their return */

textarea:focus {

outline: none !important;

font-family: 'Helvetica', sans-serif !important;

border: 1px solid #4579B2 !important;

box-shadow: offset 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(108, 122, 125, 1); }

input[type=button], input[type=button]:hover {

color: #444444; }

/* -- Items Page: Pop-Up Modal Buttons -- */

/* Browse Images */

#rmaForm .btn-primary {

color: #444444 !important;

background-color: #FFFFFF !important;

border: 1px solid #444444 !important; }

#rmaForm .btn-primary:hover, #rmaForm .btn-primary:active {

color: #444444 !important;

background-color: #FFFFFF !important;

border: 3px solid #E98B82 !important; }

/* Button on Items Page to proceed with return process */

#rmaForm .btn-success {

background-color: #5E6D6E !important;

color: #FFFFFF !important;

border: 1px solid #444444 !important;

padding-left: 60px;

padding-right: 60px;

margin-left: 20px; }

#rmaForm .btn-success:hover, #rmaForm .btn-success:active {

background-color: #444444 !important;

border: 1px solid #444444 !important;

color: #ffffff !important;

padding-left: 60px;

padding-right: 60px;

margin-left: 20px; }

#rmaForm .btn-success:disabled, #rmaForm .btn-success:disabled:hover {

background-color: #6C7A7D !important;

color: #FFFFFF !important;

border: none !important; }

/* ---- ITEMS PAGE: ITEMS SELECTION PAGE ---- */

/* -- Items Selection Page: Buttons -- */

/* Buttons to select the various return types */

.btn-return-type {

border: 1px solid #444444; }

.btn-return-type.active {

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

border: 3px solid #E98B82; }

.btn-return-type:hover {

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

background-color: #FFFFFF;

border: 3px solid #E98B82; }

/* ---- ITEMS PAGE: EXCHANGES PAGE ---- */

.exchange-selected-menu-option {

box-shadow: 0 0px 5px rgb(0 0 0 / 10%) !important;

background-color: #FFFFFF; }

/* -- Exchanges Page: Buttons -- */

/* Button to add product when customer chooses to add new variant exchange */

.variant-modal .btn-primary {

background-color: #5E6D6E !important;

color: #FFFFFF !important;

border: 1px solid #444444 !important;

padding-left: 60px;

padding-right: 60px;

margin-right: 20px; }

.variant-modal .btn-primary:hover, .variant-modal .btn-primary:active {

background-color: #444444 !important;

border: 1px solid #444444 !important;

color: #ffffff !important;

padding-left: 60px;

padding-right: 60px;

margin-right: 20px; }

/* -- Exchanges Page: Items -- */

/* Full catalog exchange item */

.exchange-search-result-item {

cursor: pointer !important;

border: 1px solid #EBEBEB !important; }

.exchange-search-result-item:hover {

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

cursor: pointer !important; }

/* Item title on full catalog exchange */

.exchange-search-result-item-title {

margin-bottom: 10px; }

/* -- Exchanges Page: Font -- */

/* .sku-details: Items page item card variant details,

.order-number: item card order number,

.order-price: item card order price */

.sku-details, .order-number, .order-price {

font-size: 16px;

font-family: 'Helvetica', sans-serif !important;

line-height: 1.3;

color: #444444 !important; }

.sku-details { padding-top: 10px; }

/* Div that contains red item returned text on items page */

.return-details {

box-shadow: none !important;

padding-top: 10px;

padding-bottom: 0; }

/* Red item returned text on items page */

.color-red {

font-size: 16px !important; }

.col-md-12, .col-md-6, .return-price, .exchange-search-result-item-title {

font-size: 16px !important;

color: #444444 !important; }

/* "x" icon in full catalog exchange item variant selection pop-up */

.col-lg-1 { background-color: #F2F2F2 !important; }

.items-card { padding-bottom: 20px !important; }

/* ---- REVIEW PAGE ---- */

/* -- Review Page: Review Band -- */

/* Content container bands on Review Band Page */

.review-band {

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; }

/* -- Review Page: Font -- */

/* Price details */

.total-label, .total-amount {

margin-bottom: 3px;

margin-top: 3px; }

/* ---- SUMMARY PAGE ---- */

/* -- Summary Page: Content Container -- */

.status-card span, #footerContainer span {

background-color: #FFFFFF !important;

color: #444444; }

/* -- Summary Page: Page Structure -- */

/* Bullet points for next steps */

.fancyBulletNoPadding, .fancyBulletPoint {

color: #7F7E7E !important; }

.review-form {

max-width: 600px; }

#footerContainer {

box-shadow: 0 -2px 15px rgb(0 0 0 / 10%); }

.nextHeader {

box-shadow: 0 -2px 10px rgb(0 0 0 / 25%) !important;

background-color: #FFFFFF !important;

color: #444444;

width: 100%;

font-size: 22px;

font-weight: 700;

line-height: 40px;

border-bottom: 0px !important;

display: flex;

flex-direction: column;

padding-top: 20px;

padding-bottom: 20px;

font-family: 'Helvetica', sans-serif !important; }

.headerMessageTop {

padding-top: 20px;

font-family: 'Helvetica', sans-serif !important; }

.headerMessageBottom {

padding-bottom: 20px;

font-family: 'Helvetica', sans-serif !important; }

.footerMessageTop {

padding-top: 20px;

font-family: 'Helvetica', sans-serif !important; }

.footerMessageBottom {

padding-bottom: 40px;

font-family: 'Helvetica', sans-serif !important; }

.printShippingLabelDiv { padding-top: 10px; }

.return-item-container {

padding-top: 20px;

padding-bottom: 25px; }

.status-rma-wrapper { margin-bottom: 20px; }

/* -- Summary Page: Icons -- */

/* Return status circle */

.circle {

background-color: #D7DDE1 !important;

border-color: #D7DDE1 !important; }

.completedCircle, .blueCircle {

background-color:#444444 !important;

border-color: #444444 !important; }

.activeCircle {

background-color: #F7CC45 !important;

border-color: #F7CC45 !important; }

/* Icon that shows up when return item is received */

.receivedIcon, .completeIcon {

color: #FFCB00 !important; }

/* -- Summary Page: Font -- */

.summaryMessageText, p.returnByText, .trackingText {

font-size: 16px !important;

color: #444444 !important;

line-height: 1.3;

font-family: 'Helvetica', sans-serif !important; }

.returnByDate {

font-size: 16px !important;

color: #444444 !important;

line-height: 1.3;

font-family: 'Helvetica', sans-serif !important;

padding-bottom: 20px; }

.return-item-total { padding-right: 20px; }

.status-rma-container { padding-bottom: 20px; }

/* -- Summary Page: Buttons -- */

/* Print Shipping Label button */

.btn-success.btn-lg.btn-print-label {

background-color: #5E6D6E !important;

color: #FFFFFF !important;

border: 1px solid #6C7A7D !important; }

.btn-success.btn-lg.btn-print-label:hover {

background-color: #444444 !important;

color: #FFFFFF !important;

border: 1px solid #6C7A7D !important; }

/* ---- THIRD-PARTY WARRANTY PAGE ---- */

/* -- Third-Party Warranty Page: Content Container -- */

.info-card {

background-color: #FFFFFF !important;

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

padding: 60px; }

/* -- Third-Party Warranty Page: Page Structure -- */

.info-form .info-card {

margin-top: 24px;

padding-top: 36px;

padding-bottom: 24px;

padding-left: 28px;

padding-right: 28px; }

.info-form .form-group {

margin-bottom: 20px; }

.info-form label { margin-bottom: 10px; }

.selected-warranty-item-container { padding-top: 25px; }

/* Add a Product Variant Selected Image */

.variant-selected-image {

margin-top: 20px;

margin-bottom: 20px; }

/* Add a Product Added Image */

.variant-container .col-md-8 {

padding-left: 45px;}

/* Third-Party Warranty Review Warranty submission info */

.warranty-info-container { padding-top: 20px; }

/* -- Third-Party Warranty Page: Font -- */

textarea {

padding-left: 15px !important;

padding-top: 10px !important; }

/*Items Product Name*/

.search-result-title {

font-weight: 700;

margin-left: 16px; }

/* Add a Product title */

.pull-left { font-size: 24px; }

/*Increase Return Reason and Additional Info Input Field Box Width*/

.form-control .input-xl,

.text-area-xl {

max-width: 425px; }

/* -- Third-Party Warranty Page: Buttons -- */

/* Add a Product Exit icon*/

.warranty-select-header-container .fa-times:before {

font-size: 1.2em;

cursor: pointer !important; }

/* Add a Product Selected Back Arrow */

.fa-long-arrow-alt-left { padding-left: 15px; }

/* Add a Product Selected Exit icon */

.fa-times { padding-right: 15px; }

/* Third-Party Warranty Landing Page: browse images button */

.info-card .form-group .btn-primary {

margin-bottom: 20px !important;

background-color: #FFFFFF !important;

border: 1px solid #444444 !important;

color: #444444; }

.info-card .form-group .btn-primary:hover,

.info-card .form-group .btn-primary:active {

margin-bottom: 20px !important;

background-color: #FFFFFF !important;

border: 3px solid #E98B82 !important;

color: #444444; }

/* Third-Party Warranty start return button */

.text-center .btn-primary {

margin-bottom: 40px ;

background-color: #5E6D6E ;

border: 1px solid #5E6D6E ;

color: #FFFFFF; }

.text-center .btn-primary:active,

.text-center .btn-primary:hover {

background-color: #444444;

color: #FFFFFF; }

.text-center .btn-primary:disabled,

.text-center .btn-primary:disabled:hover {

background-color: #6C7A7D;

color: #FFFFFF;

border: none; }

/* Find and add catalog to Third-Party Warranty claim */

.shop-catalog-button {

background-color: #5E6D6E !important;

color: #FFFFFF;

border-color: #5E6D6E;

padding-left: 60px;

padding-right: 60px;

margin-right: 20px;

margin-bottom: 15px;

margin-top: 10px; }

.shop-catalog-button:hover,

.shop-catalog-button:active {

background-color: #444444 !important;

border-color: #444444 !important; }

/* Add a Product Pop-Up: browse images button */

.variant-container .btn-primary {

color: #444444 ;

background-color: #FFFFFF !important;

border: 1px solid #444444 !important;

margin-bottom: 20px !important; }

.variant-container .btn-primary:hover,

.variant-container .btn-primary:active {

color: #444444;

background-color: #FFFFFF !important;

border: 3px solid #E98B82 !important;

margin-bottom: 20px !important; }

/* Add a Product Pop-Up: add item button */

.variant-div .btn-success {

margin-bottom: 40px ;

background-color: #5E6D6E !important;

border: 1px solid #444444 !important;

color: #FFFFFF !important; }

.variant-div .btn-success:active,

.variant-div .btn-success:hover {

background-color: #FFFFFF !important;

color: #444444 !important;

border: 1px solid #444444 !important; }

.variant-div .btn-success:disabled,

.variant-div .btn-success:disabled:hover {

background-color: #6C7A7D !important;

color: #FFFFFF !important;

border: none; }

/* Third-Party Warranty Can't Find Product Pop-Up: browse images button */

.warranty-select-container .btn-primary {

background-color: #FFFFFF !important;

border: 1px solid #444444 !important;

color: #444444 !important; }

.warranty-select-container .btn-primary:active,

.warranty-select-container .btn-primary:hover {

color: #444444 !important;

background-color: #FFFFFF !important;

border: 3px solid #E98B82 !important; }

/* Third-Party Warranty Can't Find Product Pop-Up: back button */

.warranty-select-container .btn-default {

background-color: #5E6D6E !important;

color: #FFFFFF;

border: 1px solid #444444 !important;

padding-left: 60px !important;

padding-right: 60px !important; }

.warranty-select-container .btn-default:hover,

.warranty-select-container .btn-default:active {

background-color: #444444 !important;

color: #FFFFFF !important;

border: 1px solid #444444 !important;

padding-left: 60px !important;

padding-right: 60px !important; }

/* Third-Party Warranty Can't Find Product Pop-Up: add product button */

.warranty-select-container .btn-success {

background-color: #E1E1E1 !important;

color: #444444 !important;

border: 1px solid #444444 !important;

padding-left: 60px !important;

padding-right: 60px !important;

min-width: 225px !important; }

.warranty-select-container .btn-success:disabled,

.warranty-select-container .btn-success:disabled:hover {

background-color: #E1E1E1 !important;

color: #6C7A7D !important;

border: 1px solid #6C7A7D !important; }

.warranty-select-container .btn-success:hover,

.warranty-select-container .btn-success:active {

background-color: #FFFFFF !important;

border: 1px solid #444444 !important;

min-width: 225px !important; }

/* -- Third-Party Warranty Page: Calendar -- */

/* Calendar Font*/

.uib-year .text-info, .uib-month .text-info, .uib-day .text-info,

.small, .h6,

.uib-day .btn-sm {

color: #444444 !important;

font-size: 16px !important; }

.uib-day .text-muted {

color: #7a7a7a !important;

font-size: 16px !important; }

/* Today Button */

.uib-datepicker-popup .btn-info {

font-size: 16px;

background-color: #5E6D6E !important;

color: #FFFFFF !important;

border: 1px solid #444444 !important; }

.uib-datepicker-popup .btn-info:active, .uib-datepicker-popup .btn-info:hover {

background-color: #444444 !important;

border: 1px solid #444444 !important; }

/* Clear Button */

.uib-datepicker-popup .btn-danger {

font-size: 16px;

color: #D8352B !important;

background-color: #FFFFFF !important;

border-color: #D8352B !important; }

.uib-datepicker-popup .btn-danger:active,

.uib-datepicker-popup .btn-danger:hover {

color: #FFFFFF !important;

background-color: #D8352B !important;

border-color: #D8352B !important; }

/* Done Button */

.uib-datepicker-popup .btn-success {

font-size: 16px;

border: 1px !important; }

.uib-datepicker-popup .btn-success:active,

.uib-datepicker-popup .btn-success:hover {

border: 1px !important; }

/* ---- GIFT RETURN PAGE ---- */

/* -- Gift Return Page: Content Container-- */

.gift-form {

background-color: #FFFFFF !important;

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

max-width: 550px;

padding: 60px;

margin-top: 30px; }

/* -- Gift Return Page: Font -- */

.color-red { margin-right: 20px; }

/* -- Gift Return Page: Buttons -- */

/* Starts gift return */

.gift-form .btn-primary {

margin-bottom: 40px;

background-color: #5E6D6E !important;

border: 1px #444444 !important;

color: #FFFFFF !important;

margin-top: 10px;

margin-left: 10px; }

.gift-form .btn-primary:active, .gift-form .btn-primary:hover {

margin-bottom: 40px;

background-color: #444444 !important;

border: 1px #444444 !important;

color: #FFFFFF !important;

margin-top: 10px;

margin-left: 10px; }

.gift-form .btn-primary:disabled, .gift-form .btn-primary:disabled:hover {

background-color: #6C7A7D !important;

color: #FFFFFF !important;

border: none !important;

margin-top: 10px;

margin-left: 10px; }

/* ---- INVALID PAGE ---- */

/* -- Invalid Page: Page Structure -- */

/* Spacing between icon and text */

.invalid-card .invalid-text {

padding-top: 0px !important;

padding-bottom: 30px !important; }

.invalid-card hr {

margin-top: 30px;

margin-bottom: 30px; }

/* -- Invalid Page: Font -- */

.invalid-card .invalid-details {

font-size: 26px !important;

color: #444444; }

/* -- Invalid Page: Buttons -- */

/* Start new return button */

.invalid-card .btn-success {

background-color: #E1E1E1 !important;

color: #444444;

border: 1px solid #444444 !important;

padding-left: 60px;

padding-right: 60px;

min-width: 225px; }

.invalid-card .btn-success:hover, .invalid-card .btn-success:active {

background-color: #FFFFFF !important;

border: 1px solid #444444 !important;

min-width: 225px; }

Go Back to the Table of Contents ↑

Details Section HTML

<div class = "container"> 
    <div class="box"> 
        <div class="information"> 
            <p style="font-size:16px;"> For more information about our return policy, please visit our <a href="INSERT URL HERE"> Return Policy </a> page. For additional support, please contact us via [INSERT CONTACT DETAILS HERE]. To learn more about us, please visit our <a href="INSERT URL HERE"> About Us</a> page.</p> 
        </div> 
        <h4 class="image-title"> How It Works </h4> 
        <div class="dot" style="text-align:center"> 1 </div>  
        <div class="text">Select item for return</div>  
        <div class="dot" style="text-align:center"> 2 </div> 
        <div class="text">Choose return method</div> 
        <div class="dot" style="text-align:center"> 3 </div> 
        <div class="text">Ship item and track progress</div> 
    </div> 
    
    <style> 
        .container { 
            max-width: 800px; 
            max-height: 100%; 
            justify-content: center; 
            background: transparent;
            display: flex;
            justify-content: center;
            position: relative; } 
        .container .box{ 
            max-width: 500px;
            max-height: 100%;
            background: #fff;
            background-position: center;
            display: table;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
                rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
            margin-bottom: 50px;  } 
        .information{  
            margin-top: 30px; 
            margin-left: 30px;  
            margin-right: 30px; } 
        .image-title { 
            margin-top: 40px; } 
        .dot { 
            height: 25px; 
            width: 25px; 
            margin-top: 10px; 
            margin-left: auto; 
            margin-right: auto; 
            background-color: #1F1F1F; 
            border: 1px #1F1F1F !important; 
            border-radius: 50% !important; 
            color: #FFF; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            position: relative; } 
        .text { 
            margin-top: 10px; 
            margin-bottom: 20px; 
            font-size: 16px; } 
    </style> 
</div>

We're here to help! Email us at support@returnlogic.com or use the live chat inside the platform with any questions or feedback.

Go Back to the Table of Contents ↑