/*=========
START: LOGIN PAGE CSS
=========*/

/*set background color of logo container and add padding to top and bottom - STD*/
.loginLogoContainer {
	background-color: var(--header-background-color);
	padding: 25px 0px 10px 0px;
	max-width: 455px;
	margin-left: auto;
	margin-right: auto;
}

a#ctl00_mybtn {
    margin-top: 5px;
}
/*=========
END: LOGIN PAGE CSS
=========*/

/*=========
START: LANDING PAGE CSS
=========*/
/* set height of 'All Categories' menu to 'fit content' */
.show-all-panel .scrollbar,
.show-all-panel .scrollbar > div,
.show-all-panel .scrollbar > div .content {
    max-height: 85vh !important;
}

.popover-wrapper .arrow {
    display: none;
}

/*reduce padding to top of Featured Products Container - STD*/
.home .featured-products-wrapper {
    padding: 15px 0px 55px 0px;
}


/*set link colour to 'Ultra Dark Text' with transition - STD*/
a.module-link {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
	color: var(--text-color-ultra-dark);
}

/*set link hover colour to 'Highlight Color' with transition - STD*/
a.module-link:hover {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
	color: var(--color-highlight);
}

/*reduce padding to top of NG Product Gallery (Carousel) - STD*/
.categories-wrapper {
	padding: 25px 0 12px !important;

/*redice line-height of Product Group labels in the NG Product Gallery (Carousel) + center justify - STD*/
}
.LinesEllipsis {
	line-height: 20px;
	text-align: center;
}

/*redice vertical space between module-header & module-text-subheader + set font weight to medium - STD*/
.module-text-subheader {
	margin-top: -15px;
	font-weight: 400;
}

/*set transition for hover event on footer text links - STD*/
a.footer-link {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}

/*set transition for hover event on footer icon links - STD*/
a.footer-icon-link {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}

/*set link hover colour to 'Highlight Color' - STD*/
a.footer-icon-link:hover {
	background-color: var(--color-highlight);
}

/*add top border & padding to copyright-box - STD*/ 
.copyright-box {
	border-top: 1px solid var(--color-highlight);
	padding-top: 30px;
}

/*adjust top margin for services icons*/
.footer-icon {
	margin-top: -4px;
}

/*adjust colour & opacity of carousel arrows - CUSTOME*/
g.right-arrow-icon {
	opacity: 1;
  }
  
  g.right-arrow-icon > path:first-child {
	fill: #FF2D28;
	opacity: 0.8;
  }
  
  path.right-arrow-icon {
	fill: #ffffff;
  }
  
  g.left-arrow-icon {
	opacity: 1;
  }
  
  g.left-arrow-icon > path:first-child {
	fill: #FF2D28;
	opacity: 0.8;
  }
  
  path.left-arrow-icon {
	fill: #ffffff;
  }

/*Hide product slider components*/
.pg-12801, .pg-12802, .pg-12803, .pg-12804, .pg-12805, .pg-12807 {
    display: none;
}

/*=========
END: LANDING PAGE CSS
=========*/

/*=========
START: PRODUCT GALLERY PAGE CSS
=========*/

/*change font weight and force uppercase for product-name - STD*/
.product-name {
    font-weight: bold;
    text-transform: uppercase;
}

/*change text-align + add border & padding to Short Description text - STD*/
div.LinesEllipsis > div {
    border-top: 1px solid var(--color-line);
    padding-top: 5px;
    text-align: left;
}

/*change text-align to Product Name - CUSTOM*/
div.product-name > div {
    text-align: left;
}

/*=========
END: PRODUCT GALLERY PAGE CSS
=========*/

/*=========
START: PRODUCT DESCRIPTION PAGE CSS
=========*/

/*adjust left & right padding to align with Product Details, Customise & Finalise headings - STD*/
.ProductDescMain {
	padding: 0px 10px 0px 10px !important;
}

/*centre align Product Description content - STD*/
.ProductDescMainText {
	width: 100% !important;
}

/*set position for cheatButton - ZEPHYR ONLY*/
.cheatButton {
	border: none;
	display: inline;
	vertical-align: top;
}

/*set position for videoButton - ZEPHYR ONLY*/
.videoButton {
	border: none;
	display: inline;
	vertical-align: top;
}

/*adjust padding for Inventory notice (Out of Stock, etc) so that it does not intersect prodcut image - STD*/
td.ProductDetailsInventory {
    padding: 50px 0 10px 3px;
}

/*=========
END: PRODUCT DESCRIPTION PAGE CSS
=========*/

/*=========
START: PRODUCT CUSTOMISATION PAGE CSS
=========*/

/*set styles for secondary 'refresh preview' button so that it matches the standard - STD*/
a#ctl00_cphMainContent_ucDialCustomization_btnUpdateThumbnails2 {
    border: 1px solid var(--button-secondary-border-color);
    background-color: var(--button-secondary-background-color);
    color: var(--button-secondary-text-color);
}

/*adjust padding of left customisation column to align with Product Details, Customise & Finalise headings - STD*/
td#tdDialCustomization {
    padding-left: 9px;
}

/*adjust padding of secondary 'refresh preview' button to align with Product Details, Customise & Finalise headings - STD*/
div#ctl00_cphMainContent_ucDialCustomization_updatePanelDummy2 {
    padding-left: 9px;
}

/*adjust padding of Back & Next buttons to align with Product Details, Customise & Finalise headings - STD*/
.WizardButtonsContainer {
    padding-left: 9px !important;
}

/*adjust width on input Dials & add bottom border - STD*/
.Duc {
	border-bottom: 10px solid #eeeeee;
	width: 400px;
}

/*add padding to bottom of Image Selector input controls - STD*/
.Duc > div {
	padding-bottom: 10px;
}

/*set image postion & margin for Gallery List/Grid Input Controls + add transition - ZEPHYR ONLY*/
.FieldOptionItem {
    background-position: left !important;
    margin-bottom: 10px;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
}

/*set box-shadow on hover event for Gallery List/Grid Input Controls + add transition - ZEPHYR ONLY*/
.FieldOptionItem:hover {
	box-shadow: 3px 3px 10px #cccccc;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
}

/*set box-shadow and background colour for 'Selected' Gallery List/Grid Input Controls - ZEPHYR ONLY*/
.FieldOptionItem.FOList.selected {
	box-shadow: 3px 3px 10px #cccccc;
	background-color: #dddddd !important;
}

/*set border colour of Image Selector box to 'Line Color' - STD*/ 
.first {
	border: 1px solid var(--color-line) !important;
}

/*add box-shadow t0 Image Selector box - STD*/
.imagepreviewDiv {
	box-shadow: 0 5px 11px 0 rgba(0,0,0,0.3)
}

/*set border colour of Image Selector slide-out box to 'Line Color' - STD*/ 
.second {
	border: 1px solid var(--color-line) !important;
	z-index: 1 !important;
}

/*set header colour of Image Selector slide-out box to 'Highlight Color' + adjust height - STD*/
.galleryButtons {
	height: 38px !important;
	background-color: var(--color-highlight) !important;
}

/*style multi-line text input to match standard input fields - STD*/
textarea.FormField {
	width: 380px;
	height: 200px;
	font-family: sans-serif;
	line-height: 1.25 !important;
	resize: vertical;

/*add extra margin to the bottom Image Selector box - STD*/	
}
.imageGalleryBody {
    margin-bottom: 5px;
}

/*remove margin from Input Dial labels - STD*/
.FormLabel {
    margin-bottom: 0px !important;
}

/*adjust width of Text Input - STD*/
.dtiStringTextBox {
    width: 380px;
}

/*adjust margin of Image Selector dial label - STD*/
.dialNameText {
    margin-bottom: 10px;
}

/*adjust padding on Date/Time Selector dial label - STD*/
.datetimeWrapper > div:nth-child(1) {
	padding-bottom: 5px;
}

/*clear float so that input sits below label - STD*/
.datetimeWrapper div {
	float: none;
}

/*style 'clear' button on Date/Time selector to match standard buttons - std*/
.datetimeWrapper > div:nth-child(2) > span:nth-child(4) {
	border: 1px solid var(--button-secondary-border-color);
    background-color: var(--button-secondary-background-color);
	color: var(--button-secondary-text-color) !important;
	padding: 5px 20px 5px 20px;
	float: right;
	border-radius: var(--button-border-radius);
	-webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
}

/*style 'clear' button on Date/Time selector to match standard buttons - std*/
.datetimeWrapper > div:nth-child(2) > span:nth-child(4) > a {
	color: var(--button-secondary-text-color);
	text-decoration: none !important;
}

/*style 'clear' button on Date/Time selector to match standard buttons - std*/
.datetimeWrapper > div:nth-child(2) > span:nth-child(4):hover {
	box-shadow: 3px 3px 10px #cccccc;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
}

/*adjust width of Date/Time selector input box - STD*/
input.riTextBox {
    width: 290px !important;
}

/*adjust margin of Date/Time popup button so that it is centred - STD*/
a.rcCalPopup {
    margin-left: 5px !important;
}

/*adjust position of Date/Time selector popup box - STD*/
.RadCalendarPopup.RadCalendarPopupShadows {
	left: 450px !important;
	margin-top: 5px;
}

/*set display to none for left column on Date/Time selector popup box - STD*/
th.rcViewSel, .rcRow > th {
    display: none;
}

/*change text-align & background color on 'header' row for Date/Time selector popup box - STD*/
tr.rcWeek > th {
    text-align: center !important;
	background-color: var(--color-highlight);
}

/*change text-align & background color on rows for Date/Time selector popup box - STD*/
tr.rcRow > td {
	text-align: center !important;
	background-color: var(--color-line);
}

/*adjust padding on rows for Date/Time selector popup box - STD*/
tr.rcRow > td > a {
    padding: 1px 0px 1px 0px !important;
}

/*adjust colour of selected date for Date/Time selector popup box - STD*/
.rcSelected > a {
    color: var(--color-highlight) !important;
}

/*adjust margin for 'Mandatory Field' note - STD*/
div#ctl00_cphMainContent_divMandatoryDial {
    margin-top: 5px;
}

/*adjust width for dial name elements - STD*/
.dtiName, .dmiName, .dddlName {
    width: 380px;
}

/*addjust width for DropDown selector - STD*/
.dddlValue select {
    width: 400px;
}

/*=========
END: PRODUCT CUSTOMISATION PAGE CSS
=========*/

/*=========
START: INSTRUCTIONAL VIDEO PAGE CSS
=========*/

/*add box-shadow to Video - Zephyr*/
.demoVideo {
    box-shadow: 3px 3px 10px #aaaaaa;
}

/*set position for tooltip div - Zephyr*/
.tooltip {
	position: relative;
}

/*set style for tooltip popup - Zephyr*/
.tooltip .tooltiptext {
	visibility: hidden;
	font-size: 14px;
	width: 400px;
	background-color: #ffffff;
	border: 1px solid #484848;
	color: #484848;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 3px;
	margin-left: 150px;
	opacity: 0;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}

/*set style for tooltip arrow - Zephyr*/
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	margin-left: -12px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #484848 transparent transparent;
}

/*sets visbility for tooltip elements so that they fade on on hover event - Zephyr*/
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}

/*=========
END: INSTRUCTIONAL VIDEO PAGE CSS
=========*/

/*=========
START: BOOKLET BUILDER PAGE CSS
=========*/

/*change height of Product Properties popup window - STD*/
div#wndPrintProperties {
	height: 550px !important;
}

/*adjust padding on elements within Product Properties popup window - STD*/
#divPropertyDucs {
    padding-left: 10px;
}

/*adjust padding of input controls - STD*/
dd.dddlValue {
    padding-top: 10px;
}

/*add box-shadow to Product Properties popup window - STD*/
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.PrintPropertiesControl {
    box-shadow: 3px 3px 10px #cccccc;
}

/*adjust width for Product Property Dials*/
#divPropertyDucs > div {
    width: auto;
}

/*=========
END: BOOKLET BUILDER PAGE CSS
=========*/

/*=========
START: CHECKOUT - ORDER SUMMARY PAGE CSS
=========*/

.CheckoutServices {
    width: auto !important;
}

/*=========
END: CHECKOUT - ORDER SUMMARY PAGE CSS
=========*/

/*=========
START: COUPON PAGE CSS
=========*/

/*change width of coupon text element - STD*/
td.uStoreLegacy-whiteSpaceNormal {
    width: 300px;
}

/*change width of coupon input - STD*/
input#ctl00_cphMainContent_txtCouponCode {
    width: 140px !important;
}

/*adjust margin on 'clear' link - STD*/
a#ctl00_cphMainContent_lnkClearCoupon {
    margin-right: 10px;
    margin-left: 5px;
}

/*adjust margin on 'select coupon' button - STD*/
a#ctl00_cphMainContent_btnUserSelectCoupon {
    margin-left: 10px;
}
/*=========
END: COUPON PAGE CSS
=========*/

/*=========
START: ASSET LIBRARY PAGE CSS
=========*/

/*set width of table to fill screen - STD*/
#tdPropertyList > .Duc {
    width: 100%;
}

/*adjust row height - CUSTOM*/
.Grid td {
    height: 120px;
}
/*=========
ND: ASSET LIBRARY PAGE CSS
=========*/

/*=========
START: SEARCH RESULT PAGE CSS
=========*/

/*hide 'Enlarge' & 'Download' Links from product images - STD*/
.overlay.horizontalList {
    display: none !important;
}

/*=========
END: SEARCH RESULT PAGE CSS
=========*/

/*=========
START: FOOTER CSS
=========*/

.footer-logo {
    width: 240px;
    margin-top: 10px;
}

.footer-text.footer-list.my-recipient-lists {
    display: none;
}

.footer-icon {
    width: 260px;
    height: auto;
    padding-top: 30px;
}

/*=========
END: FOOTER CSS
=========*/

/*=========
START: MY ACCOUNT MENU CSS
=========*/

.my-recipient-lists.dropdown-item {
    display:none !important;
}

/*=========
END: MY ACCOUNT MENU CSS
=========*/



body, #body-legacy {
!background-color: #ffffff;
}