/****************** TABLE OF CONTENTS ********************

  CUSTOM COLOR THEME
  CUSTOM FONT(S)
  GLOBAL
  BUTTONS
  INDEX
  LOGIN
  PROFILE
  DIVISIONS
  CATALOG
  QUOTES/SIDE BY SIDE
  MAIL MERGE
  BASKET VIEW
  DELIVERY METHODS
  SHIPPING
  BILLING
  REVIEW
  ACCEPT
  GUEST SHOPPING

****************************************************************************************/


/****************************** CUSTOM COLOR THEME ************************************/

:root {
  /* Header */
  --header-bkgd-color: #1b1752;
  --custom-header-image: none;

  /* Header links */
  --header-link-bkgd-color: #990000;
  --header-link-txt-color: #898989;
  --header-link-txt-color-hover: #cccccc;
  --header-link-bkgd-color-hover: transparent;
  --header-link-border-color-hover: #FFFFFF;

  /* Custom font */
  --custom-font: 'Montserrat', sans-serif;
}


/********************************* CUSTOM FONT(S) *************************************/
/* NOTE: Add html font URL source to:
   Site-Wide Appearance > Site Header > Site Meta Data > Other Metadata */


/************************************** GLOBAL ****************************************/

/*** Remove sr_ error text from Basket, Review, Accept pages ***/
.previewcell pre {
  display: none;
}

/*** Make Admin Menu Bar opaque enough to see the logo ***/
.menu-knob-bar {
  opacity: .8;
}

/*** Prevent catalog from shifting during load ***/
.catalog form {
  overflow: visible !important;
}

.main {
  max-width: 800px !important;
  margin: 20px auto 0 !important;
}

.select-items {
  max-width: none !important;
}

/*--- CANCEL LINK ---*/
#footer\2e footercanceltext {
  padding-right: 15px;
}

.pageinstructions {
  width: 80%;
  margin: 0 auto !important;
  text-align: center;
}

/*--- Add border to preview image on Basket, Review, Accept pages ---*/
.previewcell img {
  border: 1px solid #ccc !important;
}

.req_field {
  color: red;
  display: inline-block;
}


/************************************** HEADER ****************************************/

h2.pagetitle,
.pagetitle {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  text-shadow: none;
}

#header-wrapper {
  background-color: #1b1752 !important;
  background-image: none !important;
  height: 110px;
  position: relative;
}

#header_logo > img.no_mobile {
  padding: 4px 0 0 15px;
  height: 85px;
}

.header {
  width: 100% !important;
}

#header_title img {
  padding-top: 30px;
  padding-right: 30px;
}

.header-links {
  position: absolute;
  top: 35px;
  right: 15px;
  font-family: var(--custom-font);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  padding: 6px 0;
  text-decoration: none;
}

.header-links a {
  color: var(--header-link-txt-color);
  padding: 6px 10px;
  text-decoration: none;
}

.header-links a:hover {
  color: var(--header-link-txt-color-hover);
  background-color: var(--header-link-bkgd-color-hover);
  border: var(--header-link-border-color-hover) solid 1px;
  padding: 6px 9px;
}

#logout_userid {
  color: var(--header-link-txt-color);
  padding: 0 15px;
}


/*--- Dropdown select and input text fields ---*/
select,
input#passwd,
input[type=text],
textarea {
  border-radius: 6px;
  border: 1px solid #8A8D8F;
  padding: 6px;
  /* -webkit-appearance: none; */
}

.form-body td.input {
  vertical-align: middle;
}


/************************************ BUTTONS *****************************************/

.main .buttonsbar button {
  margin-bottom: 20px;
}

.button:hover .button .span:hover,
.button .span {
  color: #000000;
}

/* Arrow */
button:hover span.button_arrow_right {
  color: #000000;
}

/* Cancel Button */
#submit_cancel {
  margin-right: 30px;
}


/************************************** INDEX *****************************************/

.index-container {
  margin: 20px 20px;
  padding-bottom: 20px;
  font-size: 14px;
}


/************************************* LOGIN ******************************************/

.login,
.login .message-block {
  text-align: center !important;
}


/************************************ CATALOG ****************************************/

/* Align caret icon with catalog tab name */
.responsive_tabs .opened:before,
.responsive_tabs .closed:before {
  padding-top: 6px;
}

.select-items .vertical-shell {
  margin-left: 10px !important;
}

.select-items .image-container img {
  margin: 10px 0;
}

.select-items .longname * {
  font-size: 14px;
}

.select-items .pagetitle {
  margin-left: 10px !important;
}

.select-items .buttonsbar button {
  margin-bottom: 20px;
}

#submit_catalog_add {
  margin-top: 5px;
}

#copy4 {
  display: none;
}

.bundle_subitem_preview img {
  border: 1px solid gray;
}

.qtyspec_label {
  margin-left: 5px !important;
}

.responsive_tabs-shell .after {
  margin-top: 20px !important;
}

#basket-list-title {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  border-bottom: 2px solid #333;
  margin-bottom: 10px;
}

.basket-list-item {
  margin-bottom: 10px !important;
  font-size: 12px;
}

.basket-list-item .button {
  padding: 1px 1px 1px 5px !important;
}


/* BUNDLE */

.detail_text_wrapper {
  width: 29% !important;
}

.detail_tagcheck_wrapper {
  width: 32% !important;
  margin-top: 0 !important;
}

.bundle-qty-selection {
  position: inherit !important;
}

.bundle-qty-selection .add-to-basket-qty-select {
  text-align: center;
  padding-top: 20px;
}

.multi_preview a {
  margin-right: 5px;
}

.multi_preview a img {
  margin-bottom: 5px;
}

.bundle_subitem_longname {
  margin-bottom: 6px !important;
  font-weight: bold;
  font-size: 15px;
  margin-left: 25px !important;
}

#d_tag_check input[type="text"] {
  border-radius: 5px !important;
  text-align: center;
  padding: 5px;
  border-style: groove;
  font-weight: bold;
  width: 100px !important;
}

.bundle_subitem_input {
  position: relative;
  top: 0;
  float: left;
}

.bundle_please_note {
  color: red;
  font-size: 15px;
}

.bundle_subitem {
  width: 90% !important;
  margin-left: 50px !important;
}


/******************************** QUOTES/SIDE BY SIDE *********************************/

/* QUOTES - CUSTOMIZE LABELS AND INPUT FIELDS */

.imprint .form-body td.label {
  display: block;
  text-align: left !important;
  padding: 3px 0 0 6px !important;
}

.imprint .form-body td.input {
  display: block;
}

.imprint .form-body td input {
  width: 98%;
  border-radius: 4px;
  border: 1px solid #4d4d4d;
  padding: 3px 2px;
}

.imprint .form-body td.input select {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #4d4d4d;
  padding: 3px 2px;
}

#curr_item_image {
  width: 300px;
}


/*-- START: LnF Quotes - #all_options and amenities --*/

#curr_item_name {
  font-size: 22px;
}

#all_options .label {
  width: fit-content;
  max-width: none;
  font-size: 16px;
}

#all_options .label div {
  display: inline;
}

#all_options tr {
  display: block;
  margin: 1rem 0;
}

#all_options td {
  display: block;
}

#all_options td.input {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#all_options tbody {
  width: 300px;
}

#all_options input[type="text"] {
  flex-basis: 80%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  border-width: 1px;
  margin-right: 0.5rem;
  flex-grow: 1;
}

#all_options select {
  flex-basis: 80%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  border-width: 1px;
  margin-right: 0.5rem;
  height: fit-content;
  flex-grow: 1;
}

#all_options .option_extra {
  font-size: .85rem;
  margin-top: 0 !important;
}

#all_options .option_extra .option_image {
  left: 0;
  bottom: 0;
}

#all_options .option_extra .option_image img {
  width: 34px;
}

#all_options .estimate-total {
  width: 100%;
  font-size: .85rem;
}

div[id^="details_select"] > div:not(.option_detail) {
  width: 35px !important;
  height: 35px !important;
  border-radius: 8px !important;
}

#all_options .option_extra .option_detail,
#all_options .qtyspec_label {
  padding-top: 4px;
}

#total_block #total_display {
  font-size: 30px;
  font-weight: bold;
  background: #e1e1e1;
  padding: 4px 10px;
}

#all_options,
#all_options_container {
  border: none !important;
  margin-left: 30px;
}

/*-- END: LnF Quotes - #all_options and amenities --*/


div.form-body div.title {
  border-radius: 7px !important;
  background: #ccc !important;
  margin-top: 20px !important;
}

div.form-body div.title > h2 {
  padding: 0 !important;
}

div.field-container {
  border-bottom: 0 !important;
}

.buttonsbar,
.form-body {
  border-radius: 0 !important;
}

#estimate-item-container {
  padding: 20px 0;
}

.submit.center button {
  margin-bottom: 20px !important;
}

.fileSpec {
  position: relative;
  left: 10px;
}

.form-subheader {
  text-align: left !important;
}

#approval_checkbox_group input * {
  width: 100px;
  height: auto;
}

.uploadIcon {
  margin-top: 5px !important;
}

div#confirm_container button {
  margin-top: 20px !important;
}

.checkbox-table {
  margin-left: 0 !important;
}


/*********************************** MAIL MERGE ****************************************/

.mail-merge header {
  margin-left: 25px;
}

.mail-merge nav.submit {
  padding-bottom: 30px !important;
}

#listimp-s3-section-5 div {
  margin-left: 25px;
}

div.error {
  margin-bottom: 10px;
}

#ml-handle-link {
  margin-left: 25px;
}

.personal-list-actions {
  text-align: center !important;
}

form[name='clientlist'] div:last-child {
  padding: 20px !important;
}


/********************************** BASKET VIEW ***************************************/

.basket-view td.previewcell {
  background-color: transparent !important;
}

.basket-view .buttonsbar button {
  margin-bottom: 20px;
}

table:not(.items-table) {
  width: auto;
  margin: 0 auto;
}


/********************************* DELIVERY METHODS ***********************************/

tr.dpt--headerRow,
tr.dpt--headerRow span,
tr.dpt--headerRow *,
tr.item_row * {
  font-size: 14px !important;
}

#i-dropship {
  position: relative;
  font-size: 14px;
  color: #00000A;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
  padding: 4px 10px;
  border: 1px solid #CCCCCC;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #FFFFFF;
  background: linear-gradient(#FFFFFF, #CCCCCC);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#FFFFFF),
    to(#CCCCCC)
  );
  background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
  background: -ms-linear-gradient(#FFFFFF, #CCCCCC);
  filter: progid:DXImageTransform.Microsoft.gradient(
    GradientType=0,
    startColorstr='#FFFFFF',
    endColorstr='#CCCCCC'
  );
  -pie-background: linear-gradient(#FFFFFF, #CCCCCC);
  behavior: url(/hub/css/PIE.htc);
}

.mail-merge .buttonsbar,
.mail-merge .buttonsbar a,
.mail-merge .buttonsbar a:link,
.mail-merge .buttonsbar * {
  text-decoration: none !important;
  text-align: center !important;
}

.mail-merge .buttonsbar {
  margin-bottom: 10px;
}

tr.dpt--finalizeRow td.dpt--status {
  border-bottom: 0 !important;
}


/*********************************** SHIPPING *****************************************/

.message-block {
  text-align: center;
}

.mail-merge .pagetitle {
  margin-left: 15px !important;
}

#see_shipping_methods {
  position: relative;
  font-size: 14px;
  color: #00000A;
  font-family: var(--custom-font), "Lucida Sans", "Trebuchet MS", "Arial";
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
  padding: 4px 10px;
  border: 1px solid #CCCCCC;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #FFFFFF;
  background: linear-gradient(#FFFFFF, #CCCCCC);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#FFFFFF),
    to(#CCCCCC)
  );
  background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
  background: -ms-linear-gradient(#FFFFFF, #CCCCCC);
  filter: progid:DXImageTransform.Microsoft.gradient(
    GradientType=0,
    startColorstr='#FFFFFF',
    endColorstr='#CCCCCC'
  );
  -pie-background: linear-gradient(#FFFFFF, #CCCCCC);
  behavior: url(/hub/css/PIE.htc);
  max-width: 150px;
  text-shadow: none !important;
}

.mail-merge .field-note {
  display: none !important;
}

.mail-merge #throbber {
  margin-bottom: 20px !important;
}

.mail-merge .field-container * {
  color: #333333 !important;
}

label[for="comments"] {
  position: relative;
  bottom: 12px;
}

.shipping .form-body {
  width: 80%;
}

form[action="shiptrack.cgi"] {
  padding-bottom: 25px !important;
}


/************************************ BILLING *****************************************/

.billing .pagetitle {
  margin-left: 15px !important;
}

.billing .buttonsbar button {
  margin-bottom: 20px;
}

.billing * {
  font-size: 14px !important;
}

.billing .form-body {
  width: 740px;
  margin-top: 0;
  margin-bottom: 0;
}

.billing .form-body .input table {
  margin-left: 0;
}


/************************************* REVIEW *****************************************/

.review .buttonsbar button {
  margin-bottom: 20px;
}

.review .pageinstructions {
  font-size: 14px;
}

.review * {
  font-size: 14px !important;
}

.review td.data {
  background-color: #eeeeee;
}

.review div {
  margin: 0 10px;
}

.pagetitle {
  margin-left: 10px;
}

.main p {
  margin-left: 10px;
}

.accept-proofs table {
  width: 80%;
  margin-bottom: 20px;
}


/************************************* ACCEPT ******************************************/

.done div * {
  font-size: 14px;
}

.done td.data {
  background-color: #eeeeee;
}

.done .accept-proofs .form-body {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 30px;
  width: 80%;
}

.done div {
  margin: 10px;
}

.catalog--container .pagetitle {
  margin-top: 10px !important;
}

.accept-proofs b {
  margin-left: 20px;
  margin-top: 10px;
  line-height: 30px;
}

.previewcell a span {
  position: relative;
  font-size: 14px;
  color: #00000A;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
  padding: 4px 10px;
  border: 1px solid #CCCCCC;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #FFFFFF;
  background: linear-gradient(#FFFFFF, #CCCCCC);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#FFFFFF),
    to(#CCCCCC)
  );
  background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
  background: -ms-linear-gradient(#FFFFFF, #CCCCCC);
  filter: progid:DXImageTransform.Microsoft.gradient(
    GradientType=0,
    startColorstr='#FFFFFF',
    endColorstr='#CCCCCC'
  );
  -pie-background: linear-gradient(#FFFFFF, #CCCCCC);
  behavior: url(/hub/css/PIE.htc);
  margin: 5px 20px;
}

.previewcell a {
  text-decoration: none;
  margin: 0 auto;
  line-height: 50px;
  text-align: center;
}

.previewcell * {
  text-align: center !important;
}


/******************************* CUSTOM ODG STYLING ***********************************/

/* Header nav links as gold buttons */
.header-links a {
  background: #f5bd00 !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  border: none !important;
  display: inline-block;
}

/* Header nav hover */
.header-links a:hover {
  background: #d9a700 !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Logged-in username text */
#logout_userid {
  color: #f5bd00 !important;
}


/* Rounded product images */
.select-items .image-container img,
.bundle_subitem_preview img,
#curr_item_image,
.catalog img,
.index-container img,
.select-items img {
  border-radius: 16px !important;
  overflow: hidden;
}


/* Remove unwanted borders / outlines around images */
img {
  border: 0 !important;
  outline: 0 !important;
}

.catalog img,
.index-container img,
.select-items img,
.previewcell img,
.image-container,
.catalog-item,
.item {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* Index page catalog image cleanup */
.index-container img,
.index-container a img,
.index-container table img,
.index-container td,
.index-container a,
.index-container .image-container,
.index-container .catalog-item,
.index-container .item,
.index-container .previewcell {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}  
/* Holiday Cards background */
body:has(#tab_0.on) {
  background-color: #F7F5EF !important;
  background-image: url("https://shop.odgltd.com/store//con/SnowflakePattern.jpg") !important;
  background-repeat: repeat !important;
  background-size: 450px 450px !important;
}

/* Restore the normal background on other tabs */
body:not(:has(#tab_0.on)) {
    background-image: none;
}

/************************************* GUEST SHOPPING *********************************/

/**** #submit_checkout_as_guest {display:none;} *******/