/* ---- RETURN CENTER REFRESH SHORT-TERM DESIGN SOLUTION ---- */

/*
  The prefixed defaults here can be set via custom CSS inside of a

  :root {

  }

  block
 */
:root {
  /* default font family is roboto, unless one is specified in custom CSS */
  --font-family-coalesced: var(--font-family, 'Roboto');

  /* disabled button styling */
  --button-disabled-font-color: #6C7A7D;
  --button-disabled-background-color: #E1E1E1;
  --button-hover-brightness: 80%;

  /* start rma button color, start gift return button color */
  --start-rma-button-color: var(--dark-primary-button-background-color, #333333);

  /* button that takes you back in the return process */
  --go-back-button-color: var(--dark-go-back-button-color, #333333);

  /* buttons that go forward in the return process, including checkout button */
  --go-forward-button-color: var(--dark-go-forward-button-color, #333333);

  /* Variant modal button options: Add to cart button, change quantity button */
  --cart-modify-button-color: var(--dark-cart-modify-button-color, #333333);

  /* button credit badge background color; needs to be a light color */
  --bonus-credit-background-color: var(--light-bonus-credit-background-color, #85daf3);

  /* URL color */
  --url-color: var(--all-url-color, #337ab7);

  /* status page header/accent color */
  --status-page-accent-color: var(--dark-status-page-accent-color, #444444);

  /* button default for misc buttons */
  --primary-button-background-color: var(--dark-primary-button-background-color, #333333);

  /* print shipping label button on status page */
  --status-page-print-shipping-label-button: var(--dark-status-page-print-shipping-label-button, #333333);

  /* find shipping locations button on status page */
  --status-page-find-usps-locations-button: var(--dark-status-page-find-usps-locations-button, #333333);


  /* status page circles on the left of status box */
  --status-page-step-completed-circle: var(--dark-status-page-step-completed-circle, #333333);

  --status-page-current-step-circle: var(--dark-status-page-current-step-circle, #F7CC45);

  --status-page-future-step-circle: var(--dark-status-page-future-step-circle, #D7DDE1);

  --status-page-retailer-started-rma-circle: var(--dark-status-page-retailer-started-rma-circle, #027DB4);


  /* status page icon circle on the right of status box */
  --status-page-authorized-icon: var(--dark-status-page-authorized-icon, #FFCB00);

  --status-page-complete-icon: var(--dark-status-page-complete-icon, #FFCB00);

  --status-page-received-icon: var(--dark-status-page-received-icon, #FFCB00);

  --status-page-requested-icon: var(--dark-status-page-requested-icon, #FFCB00);

  --status-page-cancelled-icon: var(--dark-status-page-cancelled-icon, #A30014);

  --status-page-in-transit-icon: var(--dark-status-page-in-transit-icon, #FFCB00);

  --status-page-delivered-icon: var(--dark-status-page-delivered-icon, #3DC3B7);

  --status-page-active-icon: var(--dark-status-page-active-icon, #027DB4);

  --status-page-processed-icon: var(--dark-status-page-processed-icon, #027DB4);

  --status-page-rejected-icon: var(--dark-status-page-rejected-icon, #A30014);
}

/* these lines are basically the same as the template
   if you update these consider if you need to update the template!

   Also added here so users do not have
   to copy/paste these into their custom CSS if they don't plan on doing advanced customization
 */
:root {
  /* the most common type of button in the code; used frequently in modals, etc. */
  --dark-primary-button-background-color: var(--primary-color);

  /* start RMA button color. Button color on the landing page and if the start gift card page */
  --dark-start-rma-button-color: var(--primary-color);

  /* the back/previous buttons that are at the bottom of the return center */
  --dark-go-back-button-color: var(--primary-color);

  /* buttons that go forward in the return process, including checkout button */
  --dark-go-forward-button-color: var(--primary-color);

  /* variant modal button options: Add to cart button, change quantity button, etc. */
  --dark-cart-modify-button-color: var(--primary-color);

  /* button credit badge background color; needs to be a light color */
  --light-bonus-credit-background-color: var(--bonus-credit-badge-color);

  /* status page header/accent color */
  --dark-status-page-accent-color: var(--primary-color);

  /* status page print shipping label button */
  --dark-status-page-print-shipping-label-button: var(--primary-color);

  /* status page find USPS locations button */
  --dark-status-page-find-usps-locations-button: var(--primary-color);

  /* the step circles on the left of the Return Status box on the status page
   * completed: The step is done
   * current: The current step
   * retailer started RMA: All circles change to this color after the RMA is received/active/processed/complete
   */
  --dark-status-page-step-completed-circle: var(--primary-color);
  --dark-status-page-current-step-circle: var(--status-in-progress-color);
  --dark-status-page-retailer-started-rma-circle: var(--status-complete-color);

  /* the circle/icon on the right side of the Return Status box on the status page */
  --dark-status-page-authorized-icon: var(--status-in-progress-color);
  --dark-status-page-complete-icon: var(--status-in-progress-color);
  --dark-status-page-received-icon: var(--status-in-progress-color);
  --dark-status-page-requested-icon: var(--status-in-progress-color);
  --dark-status-page-cancelled-icon: var(--status-issue-color);
  --dark-status-page-in-transit-icon: var(--status-in-progress-color);
  --dark-status-page-delivered-icon: var(--status-complete-color);
  --dark-status-page-active-icon: var(--status-complete-color);
  --dark-status-page-processed-icon: var(--status-complete-color);
  --dark-status-page-rejected-icon: var(--status-issue-color);
}



/*
  Setting the background color
  Background image options are provided for optional customization
*/
body {
  background-color: var(--background-color, #f0f6f8);
  background-image: var(--background-image, none);
  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: var(--font-family-coalesced), sans-serif !important;
  color: #333333;
  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: var(--font-family-coalesced), sans-serif !important;
  font-size: 16px;
  line-height: 1.3;
}

/* Descriptive text, Review and Product page name text */
h5 {
  margin-bottom: 15px;
  font-family: var(--font-family-coalesced), sans-serif !important;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.3;
  color: #333333;
}

/* Third-party Warranty Add a Product Page Item Pop-up Modal item details */
h6 {
  font-family: var(--font-family-coalesced), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.3;
  color: #333333;
}

.start-warranty-button {
  background-color: var(--start-rma-button-color) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--start-rma-button-color) !important;
}

.start-warranty-button:hover {
  filter: brightness(var(--button-hover-brightness));
}

/* Remove from required label */
.form-required-label {
  display: none;
}

/* General body text */
p, span, div {
  font-family: var(--font-family-coalesced), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.3;
}

/* Descriptor text */
.margin-left-5.margin-top-5, .text-muted.margin-top-5 {
  font-family: var(--font-family-coalesced), sans-serif !important;
  color: #7A7A7A !important;
  line-height: 1.3;
}

.text-muted {
  font-family: var(--font-family-coalesced), sans-serif !important;
  color: #7a7a7a;
  font-size: 16px;
  line-height: 1.3;
}

/* Primary Button */
.btn-primary {
  color: #FFFFFF;
  background-color: var(--primary-button-background-color);
  border-color: var(--primary-button-background-color);
  min-width: 200px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  transition: background-color 200ms ease, opacity 200ms ease, transform 600ms ease;
}

.btn-success, .btn-danger {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  transition: background-color 200ms ease, opacity 200ms ease, transform 600ms ease;
}

.btn-primary:hover, btn-primary:active {
  color: #FFFFFF;
  filter: brightness(var(--button-hover-brightness));
  background-color: var(--primary-button-background-color);
  border-color: var(--primary-button-background-color);
}

/* Form labels */
label {
  font-family: var(--font-family-coalesced), sans-serif !important;
  font-size: 16px !important;
  color: #333333;
  margin-bottom: 4px;
}

.bonus-credit-available {
  background-color: var(--bonus-credit-background-color);
}

/* Form Groups & Form Elements */
.form-group {
  margin-bottom: 20px;
}

select.input-lg {
  height: 46px;
  line-height: 30px;
  background-color: #F9F9F9 !important;
  border: 1px solid #C2C2C2 !important;
  border-radius: 4px !important;
  padding-left: 15px !important;
}

/* ----------- Remove blue autofill of input in Chrome -------------- */
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 30px #F9F9F9 inset !important;
}

/* Error text when filling form */C
.label-error {
  font-family: var(--font-family-coalesced), sans-serif !important;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.3;
  color: #C54F4F !important;
}

/* Error Message */
.alert-danger {
  color: #C54F4F !important;
  font-family: var(--font-family-coalesced), sans-serif !important;
}

/* Logo */
.nav-logo {
  max-height: 125px !important;
}

/* -- 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: 20px;
  margin-bottom: 20px;
}

/* Grid layout for Return Center */
.main-grid {
  display: grid;
  background-color: transparent;
}


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

input:not([type="radio"]) {
  font-size: 18px !important;
  font-family: var(--font-family-coalesced), sans-serif !important;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 !important;
  border-radius: 4px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: #F9F9F9 !important;
  border: 1px solid #C2C2C2 !important;
  padding: 16px !important;
  color: #333333;
}

input:focus {
  font-family: var(--font-family-coalesced), sans-serif !important;
  /* border: 1px solid #4579B2 !important; */
  border: 0;
  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: var(--font-family-coalesced), 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 #333333 !important;
  padding: 8px !important;
}


/* -- Buttons -- */

/* All buttons */
.btn {
  border-radius: 4px;
  font-size: 16px;
}

/* Button that takes you back to previous page of return process */
.items-footer .btn-danger {
  position: relative;
  background-color: var(--go-back-button-color) !important;
  color: #FFFFFF;
  border: 1px solid var(--go-back-button-color) !important;
  border-radius: 4px;
  min-width: 200px !important;
  margin-right: 10px;
}

.items-footer .btn-danger:hover, .items-footer .btn-danger:active {
  filter: brightness(var(--button-hover-brightness));
}

/* Button that takes you next in the return process */
.items-footer .btn-success {
  background-color: var(--go-forward-button-color) !important;
  color: #FFFFFF;
  border: 1px solid var(--go-forward-button-color) !important;
  border-radius: 4px;
  min-width: 200px !important;
  margin-left: 10px;
}


.items-footer .btn-success[aria-disabled=true], .items-footer .btn-success[aria-disabled=true]:hover {
  background-color: var(--button-disabled-background-color) !important;
  color: var(--button-disabled-font-color) !important;
  border: 1px solid var(--button-disabled-background-color) !important;
}

.items-footer .btn-success:hover, .items-footer .btn-success:active {
  filter: brightness(var(--button-hover-brightness));
}



/* ---- 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;
  border-radius: 10px;
}

.notified-card .notified-header .notified-icon {
  padding: 20px 0 20px;
}


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

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

.band {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
  padding-top: 20px;
}

.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-- */

/* Orders Form */
.orders-form {
  display: block;
  position: relative;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
  min-height: 50px;
  text-align: center;
  width: 100%;
}

/*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) 0 12px 28px 0,
              rgba(0, 0, 0, 0.1) 0 2px 4px 0,
              rgba(255, 255, 255, 0.05) 0 0 0 1px inset;
  max-width: 500px;
  padding: 20px 50px 50px 50px;
  border-radius: 10px;
}

.ng-scope > .start-return-wrapper {
  background-color: rgba(256, 256, 256, .8);
  max-width: 1050px;
  border-radius: 8px;
  margin-right: auto;
  margin-left: auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
  backdrop-filter:  blur(3px);
}

.ng-scope > .start-return-wrapper > .status-grid-wrapper {
  padding-bottom:  25px;
  margin-bottom:  25px;
}

.form-required-asterisk {
  color: #C54F4F !important;
}


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

/* Button to start return process */
#start-return .btn-start-rma {
  border: 1px solid var(--start-rma-button-color) !important;
  background-color: var(--start-rma-button-color) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}

#start-return .btn-start-rma:active, #start-return .btn-start-rma:hover {
  filter: brightness(var(--button-hover-brightness));
  background-color: var(--start-rma-button-color) !important;
  border: 1px solid var(--start-rma-button-color) !important;
  color: #FFFFFF !important;
}

#start-return .btn-start-rma[aria-disabled=true] {
  background-color: var(--button-disabled-background-color) !important;
  color: var(--button-disabled-font-color) !important;
  border: 1px solid var(--button-disabled-background-color) !important;
}

#start-return .btn-start-rma[aria-disabled=true]:hover {
  background-color: var(--button-disabled-background-color) !important;
  color: var(--button-disabled-font-color) !important;
  border: 1px solid var(--button-disabled-background-color) !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: 20px 50px 50px 50px;
  border-radius: 10px;
  margin-bottom: 150px
}

/* Address card within address content container */
.address-card {
  box-shadow: none;
}


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

#addressChangeForm {
  font-size: 16px;
}



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

/* -- RL Page Header -- */
.rl-page-header {
  background-color: #ffffff;
  max-width: 700px;
  margin: auto auto 20px;
  min-height: 60px;
  border-radius: 10px;
}

.rl-page-header:not(.form-width) {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* -- Sub Header -- */
.sub-header:not(.form-width) {
  background-color: #ffffff;
  max-width: 700px;
  margin: auto;
  min-height: 40px;
  border-radius: 0 0 10px 10px;
  margin-bottom: 20px;
}

.sub-header:not(.form-width) {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* -- Items Page: Items Band -- */
.items-band {
  grid-template-columns: auto !important;
  max-width: 700px;
}

.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; */
  /* box-shadow: 0 0 0 2px #2684ff; */
  box-shadow: none !important;
  cursor: pointer;
  border-radius: 10px;
}
/* Once an item has been selected, this if the focus effect  */
[role=button]:focus, [tabindex]:focus, a:focus, button:focus, input[type=button]:focus {
  /* box-shadow: 0 0 0 2px #2684ff; */
  box-shadow: none !important;
  outline: 0;
  border-radius: 0;
  border: 0;
}
.item-disabled-overlay,
.return-details {
  cursor: not-allowed !important;
  background-color: none !important;
}
.item-disabled-overlay {
  background-color: none !important;
  border-radius: 10px !important;
}
.item-title {
  margin: auto;
  text-align: left;
}

.item-title .item-title-details {
  border-top: 0 !important;
  padding-top: 0;
}

.item-title h4 {
  font-size: 2em;
}

.items-card {
  border-radius: 10px;
  flex-direction: row !important;
  margin: auto !important;
  max-width: 700px;
  border: 1px solid #f9f9f9;
}

.items-card:hover {
  top: 0 !important;
  background-color: #f9f9f9;
  transition: background-color 0.5s ease;
}

.items-card .item-image {
  margin: 0;
  height: inherit !important;
}

/* This is the containing div after a user uploads an image in the item selection modal */
.col-sm-12, .margin-top-5, .rma-images {
  padding-left: 0 !important;
}
.col-sm-12, .margin-top-5, .rma-images img {
  padding-left: 0 !important;
}

.item-image {
  text-align: left;
  max-height: 250px;
  max-width: 200px;
  padding: 15px;
}

.item-image img {
  padding-left: 15px;
}

/* Item selected green checkmark */
.item-action-button .selected {
  background-color: #6ABE6A;
  padding: 2px 6px;
  border-radius: 25px;
  border: 0 !important;
  margin: 10px;
}

/* Item selected red "X"" */
.item-action-button .selected-remove {
  background-color: #C54F4F;
  padding: 5px;
  border-radius: 0;
  margin: 10px;
  text-align: center !important;
  border: 0 !important;
}

.item-action-button .selected-remove:hover {
  border: 0 !important;
}

.item-action-button .selected-remove > .fa-times {
  padding: 0 !important;
}

/* -- Items Page: Pop-Up Modal Page Structure -- */
.modal-content {
  padding: 10px !important;
}
.item-modal-header-title {
  background-color: #ffffff;
  border-radius: 10px;
}

.btn-modal-action.modal-gray {
  background-color: #ffffff;
  border-left: 0;
  border-radius: 10px;
}
.btn-modal-action {
  border: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: transparent;
  width: 60px;
}
/* -- !!!! IMPORTANT NOTE: THIS IS HACKY. WE CAN GET RID OF THIS IF WE JUST REMOVE "text-center" CLASS FROM THE MODAL BODY. THIS IS IMPLEMENTED TO LEFT ALIGN THE FORM ELEMENTS !!!! -- */
.padding-bottom-20 {
  text-align: left !important;
}

/* Back Arrow */
.color-dark-grey {
  color: #333333 !important;
}


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

/* Where shoppers input additional information about their return */
textarea:focus {
  outline: none !important;
  font-family: var(--font-family-coalesced), 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: #333333;
}
/* -- !!! IMPORTANT NOTE: This left aligns all div elements withint the select-container modal. This is because the div containing the label for return type has no class --  */
.select-container div {
  text-align: left !important;
}

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

/* de-emphasize refunds text */
.deemphasize-refunds-text{
  font-weight: lighter;
  padding-right: 40px;
  padding-left: 20px;
}

/* Browse Images */
#rmaForm .btn-primary {
  color: #333333 !important;
  background-color: #FFFFFF !important;
  border: 1px solid #333333 !important;
}

#rmaForm .btn-primary:hover,
#rmaForm .btn-primary:active {
  color: #333333 !important;
  background-color: #F2F2F2 !important;

}

/* Button on Items Page to proceed with return process */
#rmaForm .btn-success {
  background-color: var(--go-forward-button-color) !important;
  border: 1px solid var(--go-forward-button-color) !important;
  color: #ffffff !important;
  min-width: 200px;
  padding-left: 60px;
  padding-right: 60px;
}

#rmaForm .btn-success:hover, #rmaForm .btn-success:active {
  filter: brightness(var(--button-hover-brightness));
}

#rmaForm .btn-success[aria-disabled=true], #rmaForm .btn-success[aria-disabled=true]:hover {
  background-color: var(--button-disabled-background-color) !important;
  color: var(--button-disabled-font-color) !important;
  border: 1px solid var(--button-disabled-background-color) !important;
}

/* Return Reason Form Elements */
textarea.form-control {
  background-color: #F9F9F9 !important;
  border-bottom: 1px solid #C2C2C2 !important;
  max-width: 100% !important;
}

/* Image display after user browses and selects image from return reasons modal */
.rma-images {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  flex-direction: column;
}

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

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

/* Buttons to select the various return types */
.btn-return-type {
  border: 1px solid #797979;
  text-align: left;
  font-weight: lighter;
}

.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 #333333;
}

.btn-return-type:hover {
  /* box-shadow: rgb(0 0 0 / 0.08) 0px 5px 5px 0px, rgb(0 0 0 / 10%) 0px 2px 4px 0px, rgb(255 255 255 / 5%) 0px 0px 0px 1px inset; */
  box-shadow: none !important;
  background-color: #F2F2F2;
}
/* Disabled Return Type Buttons */
.btn[aria-disabled=true], .btn[disabled] {
  /* background-color: #F9F9F9 !important; */
}
.btn[aria-disabled=true], .btn[disabled]:hover {
  box-shadow: none !important;
}

/* Variant Modal Form Elements */
.list-unstyled h4 {
  color: #333333 !important;
}
/* ---- ITEMS PAGE: EXCHANGES PAGE ---- */
/* Secondary Return Reason */
.color-accent-banding {
  background-color: #ffffff !important;
}

.exchange-selected-menu-option {
  /* box-shadow: 0 0px 5px rgb(0 0 0 / 10%) !important;
  background-color: #FFFFFF; */
  box-shadow: none;
  background-color: #F2F2F2;
  font-weight: bold;
}

.exchange-title-container {
  background-color: #FFFFFF;
}

/* Cart icon */
.exchange-title-cart-button {
  border-left: 0 !important;
}
/* Exchange Message */
.exchange-message {
  background-color: #C2C2C2;
  color: #333333;
  display: none;
}


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

/* Button to add product when customer chooses to add new variant exchange */
.variant-modal .btn-primary {
  background-color: var(--cart-modify-button-color) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--cart-modify-button-color) !important;
  padding-left: 60px;
  padding-right: 60px;
  margin-right: 20px;
}

.variant-modal .btn-primary:hover, .variant-modal .btn-primary:active {
  filter: brightness(var(--button-hover-brightness));
}


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

/* Full catalog exchange item */
.exchange-search-result-item {
  cursor: pointer !important;
  border: 1px solid #EBEBEB !important;
  border-radius: 10px;
  position:  relative;
}

.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;
}


/* -- FULL CATALOG PAGE -- */

.exchange-sticky-header {
  /* use the same background as the body */
  z-index:  2;
  background-color: var(--background-color, #f0f6f8) !important;
  background-image: var(--background-image, none) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.exchange-sticky-header > .nav-container > navheader > div > .navbar {
  margin-top: 8px;
  margin-bottom:  8px;
}

.exchange-sticky-header > .nav-container > navheader > div > .navbar > .logo-image-wrapper > div > a > img {
  margin: 0;
}


.exchange-search-results {
  grid-template-columns: 50% 50%;
  grid-gap: 0;
}
/* Full catalog item */
.exchange-search-result-item-image-container {
  width: 300px;
  height: 400px;
}
.exchange-search-result-item-image {
  max-height: 450px;
  max-width: 100%;
  padding: 15px;
}
/* Full catalog edit button */

.exchange-search-result-item-image-container-top {
  position:  absolute;
  top:  8px;
  right:  8px;
  z-index:  1;
}

.btn-exchange-search-result-item-edit {
  background-color: #3c4043;
  border-radius: 4px!important;
  margin: 15px;
}
.btn-exchange-search-result-item-edit:hover {
  background-color: #000000;
  border-radius: 4px!important;
}
.exchange-cart-list-element {
  padding-left: 0 !important;
  align-items: left !important;
  text-align: left !important;
}
.exchange-cart-list-element .text-center {
  padding-left: 0 !important;
  text-align: left !important;
}

.exchange-cart-list-element .btn-success {
  background-color: #333333;
  border-color: #333333;
}

.exchange-cart-list-element .btn-success:hover {
  background-color: #000000;
  border-color: #000000;
}

.exchange-cart-list-element p {
  font-size: 16px !important;
  line-height: initial;
  margin: 0;
}

.exchange-cart-template .btn-success {
  background-color: #333333;
  border-color: #333333;
}

.checkout-button {
  background-color: var(--go-forward-button-color);
  border: 1px solid var(--go-forward-button-color);
}

.checkout-button:hover {
  filter: brightness(var(--button-hover-brightness));
  background-color: var(--go-forward-button-color) !important;
  border: 1px solid var(--go-forward-button-color) !important;
}

.exchange-cart-template .btn-success:hover {
  background-color: #000000;
  border-color: #000000;
}

/* Back to top button  */
.exchange-back-to-top {
  background-color: #333333;
  border-radius: 0 !important;
}
.exchange-back-to-top:hover {
  background-color: #000000;
  border-radius: 0 !important;
}

.exchange-title {
  float: none;
  background-color: #FFFFFF;
}

/* Search Bar */
.exchange-title-search-input {
  border-top: 0;
  padding: 0;
  background-color: #FFFFFF;
}

.exchange-title-search-input-mobile {
  background-color: #FFFFFF;
}

.input-group-addon:first-child {
  border-right: 0;
  border: 0;
}
.input-group-addon {
  background-color: #F2F2F2;
  border: 0 !important;
  border-radius: 0;
}
#searchProducts {
  box-shadow: none !important;
  background-color: #F2F2F2 !important;
  border: 0 !important;
  border-radius: 0 !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: var(--font-family-coalesced), sans-serif !important;
  line-height: 1.3;
  color: #333333 !important;
}

.order-number {
  float: none !important;
}

.order-price-qty {
  text-align: left;
}

.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;
}
/* Area displaying the exchange message along with blue arrow */
.return-details:after, .return-details:before {
  content: " ";
  display: inline-block;
}
/* Hiding the exchange price because it floats to the right */
.return-price {
  display: none;
}
/* Red item returned text on items page */
.color-red {
  font-size: 16px !important;
}
.fa-times {
  padding-right: 0 !important;
}

.col-md-12,
.col-md-6,
.return-price,
.exchange-search-result-item-title {
  font-size: 16px !important;
  color: #333333 !important;
}

/* "x" icon in full catalog exchange item variant selection pop-up */
.col-lg-1 {
  background-color: #F2F2F2 !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;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 10px !important;
}
.review-card {
  border-radius: 10px;
}

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

/* Price details */
.total-label,
.total-amount {
  margin-bottom: 3px;
  margin-top: 3px;
}

/* Receiving container */
.refund-credit-container {
  text-align: left;
}

/* Remove uppercase text-transform */
.refund-credit-container > .refund-credit-items > .exchange-values-container > ul > li {
  text-transform:  none !important;
}

.return-item-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.selected-exchange-item-container {
  display:  flex;
  justify-content:  space-between;
  flex-wrap:  wrap;
}

.selected-exchange-item-container > .selected-exchange-item-image > img {
  max-height:  300px;
  max-width:  250px;
}

.return-item-container > .return-item-image > img {
  max-height:  300px;
  max-width:  250px;
}

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

/* Grid Container */
.status-grid-container {
  margin-bottom: 0;
}

.status-card {
  border-radius: 8px;
  box-shadow:  rgb(0 0 0 / 16%) 0px 1px 4px !important;
}

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

/* Bullet points for next steps */
.fancyBulletNoPadding,
.fancyBulletPoint {
  color: #7F7E7E !important;
}

.review-form {
  max-width: 1000px;
}

.warranty-support-icon {
  filter:  grayscale(1);
}

#footerContainer {
  border-bottom-right-radius:  8px;
  border-bottom-left-radius:  8px;
  box-shadow: 0 -2px 15px rgb(0 0 0 / 10%);
}

.status-band {
  max-width:  1000px;
}

.status-band > #parentDiv {
  border-radius:  8px;
  margin-bottom:  20px;
  display:  flex;
  overflow: visible;
}

#contactSupportComponent {
  box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px !important;
  border-radius: 8px;
}

#returnTrackerDiv {
  padding-bottom:  0;
  margin-bottom:  0;
  border-radius: 8px;
  box-shadow:  rgb(0 0 0 / 16%) 0px 1px 4px !important;
}

#whatsNextDiv {
  padding-bottom:  0;
  margin-bottom:  0;
  border-radius: 8px;
  box-shadow:  rgb(0 0 0 / 16%) 0px 1px 4px !important;
}

.contactSupportDiv {
  box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px !important;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.contactSupportHeader {
  box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px !important;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  text-align: left;
  padding-left: 20px;
  background-color: var(--status-page-accent-color);
  color: #FFFFFF !important;
}

.nextHeader {
  border-top-left-radius: 8px;
  border-top-right-radius:  8px;
  box-shadow: none;
  background-color: var(--status-page-accent-color);
  color: #ffffff !important;
  width: 100%;
  font-weight: 700;
  line-height: inherit;
  border-bottom: 0px !important;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-coalesced), sans-serif !important;
  padding: 20px;
  text-align: left;
}

.headerMessageTop {
  border-top-right-radius: 8px;
  border-top-left-radius:  8px;
  font-family: var(--font-family-coalesced), sans-serif !important;
  background-color: var(--status-page-accent-color);
  font-weight: 700;
  text-align: left;
  padding: 20px;
  line-height: inherit;
}

.headerMessageBottom {
  font-family: var(--font-family-coalesced), sans-serif !important;
  background-color: #f2f2f2 !important;
  font-weight: 700;
  text-align: left;
  padding: 20px;
  color: #333333;
  line-height: inherit;
}

.footerMessageTop {
  font-family: var(--font-family-coalesced), sans-serif !important;
  background-color: var(--status-page-accent-color);
  font-weight: 700;
  text-align: left;
  padding: 20px;
  line-height: inherit;
}

.footerMessageBottom {
  font-family: var(--font-family-coalesced), sans-serif !important;
  background-color: #f2f2f2 !important;
  font-weight: 700;
  text-align: left;
  padding: 20px;
  color: #333333;
  line-height: inherit;
  border-bottom-right-radius:  8px;
  border-bottom-left-radius:  8px;
}

.printShippingLabelDiv {
  padding-top: 10px;
}

.return-item-container {
  padding-top: 20px;
  padding-bottom: 25px;
}

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

.status-banner .status-banner-content {
  padding-left: 0;
  text-align: left;
}

.status-banner-content .btn-primary {
  background-color: var(--status-page-accent-color);
  border-color: var(--status-page-accent-color);
  line-height: 1.333333;
  padding: 10px 16px;
}

.status-banner-content .btn-primary {
  background-color: var(--primary-button-background-color);
  border-color: var(--primary-button-background-color);
}

.status-banner-content .btn-primary:hover {
  filter: brightness(var(--button-hover-brightness));
}
/* -- Summary Page: Icons -- */

/* Return status circle */
.circle {
  background-color: var(--status-page-future-step-circle) !important;
  border-color: var(--status-page-future-step-circle) !important;
}

.completedCircle {
  background-color: var(--status-page-step-completed-circle) !important;
  border-color: var(--status-page-step-completed-circle) !important;
}

.retailerStartedRmaCircle {
  background-color: var(--status-page-retailer-started-rma-circle) !important;
  border: 2px solid var(--status-page-retailer-started-rma-circle) !important;
}

.activeCircle {
  background-color: var(--status-page-current-step-circle) !important;
  border-color: var(--status-page-current-step-circle) !important;
}

/* Icon that shows up when return item is received */
.receivedIcon {
  color: var(--status-page-received-icon) !important;
}

.cancelledIcon {
  color: var(--status-page-cancelled-icon) !important;
}

.requestedIcon {
  color: var(--status-page-requested-icon) !important;
}

.completeIcon {
  color: var(--status-page-complete-icon) !important;
}

.authorizedIcon {
  color: var(--status-page-authorized-icon) !important;
}

.inTransitIcon {
  color: var(--status-page-in-transit-icon) !important;
}

.deliveredIcon {
  color: var(--status-page-delivered-icon) !important;
}

.activeIcon {
  color: var(--status-page-active-icon) !important;
}

.processedIcon {
  color: var(--status-page-processed-icon) !important;
}

.rejectedIcon {
  color: var(--status-page-rejected-icon) !important;
}


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

.summaryMessageText,
p.returnByText,
.trackingText {
  font-size: 16px !important;
  color: #333333 !important;
  line-height: 1.3;
  font-family: var(--font-family-coalesced), sans-serif !important;
}

.returnByDate {
  font-size: 16px !important;
  color: #333333 !important;
  line-height: 1.3;
  font-family: var(--font-family-coalesced), sans-serif !important;
  padding-bottom: 20px;
}

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

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

/* Contact Customer Support */
.contactSupportHeader, .nextHeader {
  color: #333333;
}

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

/* Print Shipping Label button */
.btn-success.btn-lg.btn-print-label {
  background-color: var(--status-page-print-shipping-label-button) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--status-page-print-shipping-label-button) !important;
  min-width: 200px;
}

.btn-success.btn-lg.btn-print-label:hover {
  filter: brightness(var(--button-hover-brightness));
}

.btn-find-usps-locations {
  background-color: var(--status-page-find-usps-locations-button) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--status-page-find-usps-locations-button) !important;
  min-width: 200px;
}



/* ---- 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: Warranty Card Container */
.warranty-card {
  border-radius: 10px;
}

/* "Add a Product" modal buttons */
.border-button:hover {
  box-shadow: none;
  background-color: #f9f9f9;
}

/* -- 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;
  border-radius: 10px;
}

.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: 0;
  margin-bottom: 20px;
  max-width: auto !important;
  max-height: 300px !important;
}
/* Variant Modal - Right Side */
.variant-div {
  padding-left: 0 !important;
  box-shadow: none !important;
  padding-right: 10px !important;
}
/* Variant Grid for Variant Options Titles */
.variants_grid {
  grid-template-columns: 50px 1fr 1fr !important;
}
/* Variant Title Options */
.variant-title {
  grid-column: 50px 1fr 1fr !important;
  align-self: center;
  padding-left: 10px
}
/* 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;
}

/* Third Party Warranty Review Page */
.selected-warranty-item-variant {
  justify-self: right;
  align-self: center;
}

/*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 #333333 !important;
  color: #333333;
}

.info-card .form-group .btn-primary:hover, .info-card .form-group .btn-primary:active {
  margin-bottom: 20px !important;
  background-color: #F2F2F2 !important;
  color: #333333;
}

/* Third-Party Warranty start return button */
.text-center .btn-primary {
  margin-bottom: 40px;
  background-color: var(--primary-button-background-color);
  border: 1px solid var(--primary-button-background-color);
  color: #FFFFFF;
  min-width: 200px;
}

.text-center .btn-primary:active, .text-center .btn-primary:hover {
  background-color: var(--primary-button-background-color);
  color: #FFFFFF;
}

.text-center .btn-primary[aria-disabled=true], .text-center .btn-primary[aria-disabled=true]:hover {
  background-color: var(--button-disabled-background-color);
  color: var(--button-disabled-font-color);
  border: none;
}

/* Third Partyy Warranty Browse Images */
.col-md-12, .col-md-6, .return-price, .exchange-search-result-item-title {
  text-align: left !important;
  padding-left: 20px;
  float: left !important;
}

/* Find and add catalog to Third-Party Warranty claim */
.shop-catalog-button {
  background-color: var(--primary-button-background-color) !important;
  color: #FFFFFF;
  border: 1px solid var(--primary-button-background-color) !important;
  padding-left: 60px;
  padding-right: 60px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-top: 10px;
}

.shop-catalog-button:hover, .shop-catalog-button:active {
  filter: brightness(var(--button-hover-brightness));
}

.add-item-button {
  background-color: var(--primary-button-background-color) !important;
  color: #FFFFFF;
  border: 1px solid var(--primary-button-background-color) !important;
}

.add-item-button:hover, .add-item-button:active {
  filter: brightness(var(--button-hover-brightness));
}

.add-item-button[aria-disabled=true], .add-item-button[aria-disabled=true]:hover {
  background-color: var(--button-disabled-background-color) !important;
  border: 1px solid var(--button-disabled-background-color) !important;
  color: var(--button-disabled-font-color) !important;
}

/* Add a Product Pop-Up: browse images button */
.variant-container .btn-primary {
  color: #333333;
  background-color: #FFFFFF !important;
  border: 1px solid #333333 !important;
  margin-bottom: 20px !important;
}

.variant-container .btn-primary:hover,
.variant-container .btn-primary:active {
  color: #333333;
  background-color: #FFFFFF !important;
  margin-bottom: 20px !important;
}

/* Add a Product Pop-Up: add item button */
.variant-div .btn-success {
  margin-bottom: 40px;
  background-color: var(--primary-button-background-color) !important;
  border: 1px solid var(--primary-button-background-color) !important;
  color: #FFFFFF !important;
}

.variant-div .btn-success:active, .variant-div .btn-success:hover {
  filter: brightness(var(--button-hover-brightness));
}

.variant-div .btn-success[aria-disabled=true], .variant-div .btn-success[aria-disabled=true]:hover {
  background-color: var(--button-disabled-background-color) !important;
  color: var(--button-disabled-font-color) !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 #333333 !important;
  color: #333333 !important;
}

.warranty-select-container .btn-primary:active,
.warranty-select-container .btn-primary:hover {
  color: #333333 !important;
  background-color: #f2f2f2 !important;
}

/* Third-Party Warranty Can't Find Product Pop-Up: back button */
.warranty-select-container .btn-default {
  background-color: var(--primary-button-background-color) !important;
  color: #FFFFFF;
  border: 1px solid var(--primary-button-background-color) !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  min-width: 225px !important;
}

.warranty-select-container .btn-default:hover, .warranty-select-container .btn-default:active {
  filter: brightness(var(--button-hover-brightness));
}

/* Third-Party Warranty Can't Find Product Pop-Up: add product button */
.warranty-select-container .btn-success {
  background-color: var(--primary-button-background-color) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary-button-background-color) !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  min-width: 225px !important;
}

.warranty-select-container .btn-success:hover, .warranty-select-container .btn-success:active {
  filter: brightness(var(--button-hover-brightness));
  min-width: 225px !important;
}

.warranty-select-container .btn-success[aria-disabled=true], .warranty-select-container .btn-success[aria-disabled=true]:hover {
  background-color: var(--button-disabled-background-color) !important;
  color: var(--button-disabled-font-color) !important;
  border: 1px solid var(--button-disabled-background-color) !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: #333333 !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: var(--primary-button-background-color) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--primary-button-background-color) !important;
}

.uib-datepicker-popup .btn-info:active, .uib-datepicker-popup .btn-info:hover {
  filter: brightness(var(--button-hover-brightness));
}

/* 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;
}

/* Third Party Warranty Purchase Information Form */
.two-column-form {
  display: flex;
  flex-direction: column !important;
  text-align: left;
}
.two-column-form > .form-column {
  width: 100% !important;
}
.two-column-form > .form-column > .form-group > .col-md-12 {
  text-align: left !important;
  padding-left: 0 !important;
  float: none !important;
}

.two-column-form > .form-column > .form-group > .col-md-12 > .text-center  {
  text-align: left !important;
}


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

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

.gift-form {
  background-color: #FFFFFF !important;
  box-shadow: rgb(0 0 0 / 20%) 0px 12px 28px 0px, rgb(0 0 0 / 10%) 0px 2px 4px 0px, rgb(255 255 255 / 5%) 0px 0px 0px 1px inset;
  max-width: 550px;
  padding: 20px;
  margin-top: 10px;
  border-radius: 10px;
}
.margin-left-5.margin-top-5, .text-muted.margin-top-5 {
  color: #333333;
}

/* Hot fix to remove the pull-right class and display button and link to the left */

.gift-form, .form, .text-left {
  display: flex;
  flex-direction: column;
}

/* Hot fix to change the link color from red to blue */

.gift-form, .form, .text-left a {
  color: var(--url-color);
}

/* Hof fix to place the gift return link underneath the button */

.gift-form > .form > .pull-right {
  display: flex;
  flex-direction: column-reverse;
}
/* -- Gift Return Page: Font -- */

.color-red {
  margin-right: 0;
}


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

/* Starts gift return */
.gift-form .btn-primary {
  margin-bottom: 10px;
  background-color: var(--start-rma-button-color) !important;
  border: 1px var(--start-rma-button-color) !important;
  color: #FFFFFF !important;
  margin-top: 10px;
  margin-left: 0;
}

.gift-form .btn-primary:active, .gift-form .btn-primary:hover {
  filter: brightness(var(--button-hover-brightness))
}

.gift-form .btn-primary[aria-disabled=true], .gift-form .btn-primary[aria-disabled=true]:hover {
  background-color: var(--button-disabled-background-color) !important;
  color: var(--button-disabled-font-color) !important;
  border: 1px solid var(--button-disabled-background-color) !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: #333333;
}


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

/* Start new return button */
.invalid-card .btn-success {
  background-color: var(--start-rma-button-color) !important;
  color: #FFFFFF;
  border: 1px solid var(--start-rma-button-color) !important;
  padding-left: 60px;
  padding-right: 60px;
  min-width: 225px;
}

.invalid-card .btn-success:hover, .invalid-card .btn-success:active {
  filter: brightness(var(--button-hover-brightness));
}

/* MEDIA QUERIES FOR MOBILE FRIENDLINESS */

/* IPHONE 12 PRO */
@media (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
  /* Product Header */
  .rl-page-header {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .sub-header {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .items-footer .btn-danger {
    margin-right: 0;
    margin-bottom: 20px
  }
  .items-footer .btn-success {
    margin-left: 0;
  }
  .text-center .btn-primary {
    width: 100%;
  }
  .selected-warranty-items-wrapper {
    height: 200px;
  }
  .exchange-search-results{
    grid-template-columns: 100% !important;
  }
  .exchange-search-result-item {
    width: 90%;
  }
  .exchange-item-totals {
    text-align: right;
  }
  .return-item-total {
    text-align: left;
  }
  .exchange-grid-wrapper {
    padding: 0;
  }
}

.exchange-credit-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 5px;
  flex-wrap: wrap;
  gap: 6px;
}