/*! jQuery UI - v1.12.1 - 2016-09-14 - etail path updated
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* Copyright jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;

	/* Support: IE <= 11 */
	overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	filter: alpha(opacity=25); /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectable {
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: inherit;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: inherit;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("/images/jqueryui/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_777777_256x240.png");
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
	background: #000;
	opacity: .5;
	filter: Alpha(Opacity=.3); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}
/**
 * Owl Carousel v2.2.1 
 * THIS IS A BASE FILE - overrides should be in sitepanes.css in the relevant place!
 * 
 * 
 * 
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }
/* ------------------------------------------------------------------------------------
	SCREEN - v6 Doors and Fittings 2026
	Filename : sitepanes.css
	Last Updated : 01. 03. 2026
	Copyright :(c) 2026 Etail Systems Ltd
	Author : Etail Systems Ltd

	Table of Contents
		=Definitions
		=Reset
		=Normalise
		=Page 
		=Typography 	
		=Grid Layout
		=SiteContainers		
		=Top Bar #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=Bottom Bar #pbf
		=Breadcrumb
		=Sitemap  
		=Client Specific Stylings 

-------------------------------------------------------------------------------------	
=Definitions
------------------------------------------------------------------------------------- */
:root {
	--spacer-width: calc((100% - var(--site-max-width)) / 2);
	--site-max-width: 1440px;
	--checkout-process-width:500px;
	--site-inner-width:1163px;
	--menu-max-width: calc(100vw - 2rem);
	--left-panel-width: calc(var(--site-max-width) / 5);
	--right-panel-width: calc(var(--site-max-width) / 5);
	--line-height: 1.25;
	--letter-spacing: normal;
	--outline-width: 3px;
	--spacing: 1rem;
	--half-spacing: .5rem;
	
	/* client color scheme */
	--black:rgba(27,35,40,1);
	--black-alpha:rgb(27 35 41);
	--pure-black:rgba(0,0,0,1);
	--dark-grey:rgba(95,98,102,1);
	--grey:rgba(178,181,185,1);
	--light-grey:rgba(178,181,185,.5);
	--pure-white:rgba(255, 255, 255, 1);
	--white-alpha:rgba(255, 255, 255, .5);
	--blue:#49718A;
	--dark-blue:#1F3946;
	--light-blue:#5F879E;
	--green:#D0E2A2;
	--dark-green:#8FAE5D;
	--off-white:#F6F7F7;
	--off-white-alpha:var(--light-grey);

	/*standard colors */
	--white: var(--pure-white);
	--featured-color:var(--black);
	--featured-alt-color:var(--black);
	--error-color: #F84033;
	--warn-color: rgb(230 167 27);
	--info-color: #5eb20a;
	--help-color: var(--black);


	/*Section colors */
	--background-color: var(--white);
	--panel-color: var(--white);
	--dropdown-color: var(--white);
	--popout-color: var(--white);
	--form-color: var(--white);
	--typography-spacing-vertical: 1rem;
	--block-spacing-vertical: calc(var(--spacing) * 2);
	--block-spacing-horizontal: var(--spacing);
	--form-element-spacing-vertical: 0.5rem;
	--form-element-spacing-horizontal: .725rem;
	--form-label-font-weight: var(--text-font-weight);

	/* font-sizes */
	--xlarge-heading-font-size:40px;
	--large-heading-font-size:32px;
	--heading-font-size:24px;
	--sub-heading-font-size:18px;
	--statement-font-size:20px;
	
	--text-size:16px;
	--font-size: 16px;
	--small-font-size:14px;

	/* fonts */
	--heading-font: "Neurial Grotesk Bold", sans-serif;
	--heading-font-weight: 700;
	
	--sub-heading-font: "Neurial Grotesk Medium", sans-serif;
	--sub-heading-font-weight: 500;

	--text-font: "Neurial Grotesk Regular", sans-serif;
	--text-font-weight: 400;
	
	--font-awesome: "Font Awesome 7 Pro";
	
	


	
	--navbar-dropdown-text: "Neurial Grotesk Regular", sans-serif;
	--navbar-heading-font: "Neurial Grotesk Medium", sans-serif;
	--navbar-font-weight: 500;
		
	
	/* grid info */
	--grid-spacing-vertical: var(--spacing);
	--grid-spacing-horizontal: var(--spacing);

	/*nav */
	--nav-element-spacing-vertical: 1rem;
	--nav-element-spacing-horizontal: 0.5rem;
	--nav-link-spacing-vertical: 0.5rem;
	--nav-link-spacing-horizontal: 0.5rem;
	--navbar-heading-font-size: 1em;
	--navbar-color: var(--featured-color);
	--navbar-heading-color: var(--black);
	--navbar-heading-weight: 400;
	--navbar-link-color: var(--black);
	--navbar-icon-color: var(--grey);
	
	/*hover/active */
	--navbar-active-color: transparent;
	--navbar-active-text-color: var(--black);
	--navbar-hover-color: var(--off-white);
	--navbar-hover-text-color: var(--black);
	
	/*nav - dropdowns*/
	--navbar-dropdown-width: 240px;
	--navbar-dropdown-item-height: 40px;
	--navbar-dropdown-color: var(--white);
	--navbar-dropdown-text-color: var(--black);
	--navbar-dropdown-text-size: .875rem;
	--navbar-sidebar-color: var(--off-white);
	--navbar-sidebar-text-color: var(--grey);
	--navbar-sidebar-hover-color: var(--off-white);
	--navbar-popout-color: var(--white);
	--navbar-menu-button-color:var(--black);
	
	/*Buttons */
	--button-font: "Neurial Grotesk Bold", sans-serif;
	--button-font-weight: 400;
	
	--button-color: var(--blue);
	--button-border-color: var(--button-color);
	--button-text-color: var(--white);
	--button-alt-color:rgba(255,255,255,0.1);
	--button-alt-border-color: var(--button-alt-color);
	--button-alt-text-color: var(--white);
	--button-hover-text-color: var(--white);
	--button-hover-color: var(--button-alt-color);
	--button-hover-border-color: var(--button-alt-color);
	--button-padding:1rem 2rem;
	--checkout-button: var(--featured-alt-color);
	--checkout-button-text: var(--white);
	--info-button: var(--info-color);
	--info-button-text: var(--white);
	--icon-color: var(--error-color);
	
	/*Borders */
	--border-color: var(--light-grey);
	--border-alt-color: var(--grey);
	--border-color-light: var(--light-grey);
	--border-radius: 0;
	--border-width: 1px;

	/* shadows */
	--box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	--transition: 0.5s ease-in-out;
	
	/*Text */
	--heading-color:var(--dark-blue);
	--sub-heading-color:var(--light-blue);
	
	--color: var(--black);
	--text-color: var(--dark-blue);
	--text-color-light:var(--grey);
	
	--text-link-color: var(--black);
	--text-link-color-hover: var(--black);
	--text-link-color-focus: transparent;
	
	--text-decoration: none;
	--text-decoration-color: var(--black);
	
	/*swiffy nav options */
	--swiffy-slider-nav: var(--featured-color);
	--swiffy-slider-item-color: var(--grey);
	--swiffy-slider-active-item-color: var(--featured-color);
}

/* -------------------------------------------------------------------------------------
=Reset 
------------------------------------------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,
tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,
tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
}

/* To enable HTML5 elements in IE */

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
	display: block;
}

*, *::before, *::after {
	box-sizing: border-box;
}

input:focus,textarea:focus,select:focus {
	outline-offset: 0px;
}

/* -------------------------------------------------------------------------------------
=Normalise v8.0.1 | MIT License | github.com/necolas/normalize.css 
------------------------------------------------------------------------------------- */

html {
	line-height: var(--line-height);
	-webkit-text-size-adjust: 100%;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

b,strong {
	font-weight: var(--bold-font-weight, 600);
}

code,kbd,samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img,picture,video,canvas,svg {
	display: block;
	max-width: 100%;
	height: auto;
	/*margin: auto;*/
}

.imgcont {}

.imgcont img {
	display: block;
}

button,input,optgroup,select,textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1;
	margin: 0;
}

button,input {
	overflow: visible;
}

button,select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--grey);
	opacity: 1;
	/* Firefox */
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: var(--grey);
}

::-ms-input-placeholder {
	/* Microsoft Edge */
	color: var(--grey);
}

/* -------------------------------------------------------------------------------------
=Page 
------------------------------------------------------------------------------------- */

html {
	-webkit-font-smoothing: antialiased
}

body {
	background-color: var(--background-color);
	font-family: var(--text-font);
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
}

/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
p {
	font-family: var(--text-font);
	font-size:var(--font-size, 1em);
	color:var(--text-color, --black);
}

li{
	font-size:var(--font-size, 1em);
}

sub,sup {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

a,[role=link] {
	--background-color: transparent;
	outline: none;
	background-color: var(--background-color);
	color: var(--text-link-color, inherit);
	text-decoration: var(--text-decoration);
	text-decoration-color: var(--text-decoration-color);
}

a:is([aria-current], :hover, :active, :focus),[role=link]:is([aria-current], :hover, :active, :focus) {
	--color: var(--text-link-color-hover);
	--text-decoration: underline;
}

a:focus,[role=link]:focus {
	--background-color: var(--text-link-color-focus);
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--heading-font);
	font-size: 1em;
	overflow-wrap: break-word;
	color:var(--heading-color, #000);
	letter-spacing:-.05em;
	text-wrap:pretty;
}

h1 em,h2 em,h3 em,h4 em,h5 em,h6 em {
	font-weight:600;
	color:var(--dark-green);
}

h1 {
	--font-size:var(--large-heading-font-size);
	--typography-spacing-vertical: 1rem;
	font-size: var(--font-size, 2.5em);
	font-weight:var(--heading-font-weight, 400);

}

h2 {
	--font-size:var(--large-heading-font-size);
	--typography-spacing-vertical: 1rem;
	font-size: var(--font-size, 2em);
	font-weight:var(--heading-font-weight, 400);
}

h3 {
	--font-size:var(--heading-font-size);
	--typography-spacing-vertical: 1rem;
	font-size: var(--font-size, 1.5em);
}

h4 {
	--font-size:var(--sub-heading-font-size);
	--typography-spacing-vertical: 1rem;
	font-family:var(--sub-heading-font);
	font-size: var(--font-size, 1.25em);
}

h5 {
	--font-size:var(--sub-heading-font-size);
	--typography-spacing-vertical: 1rem;
	font-family:var(--sub-heading-font);
	font-size: var(--font-size, 1.125em);
}

em {
	font-style: italic;
}

blockquote{
	color:var(--black);
	border-left:2px solid var(--grey);
	padding:2em;
	margin:2em 0;
	margin-left:2em;
	background-color:var(--grey)
}

blockquote footer:before{
	content:"—";
	margin-right:.5em;
}

blockquote footer{
	font-family:var(--sub-heading-font);
	color:var(--black)
}

[type=checkbox],
[type=radio] {
	--border-width: 2px;
}

[type=checkbox][role=switch] {
	--border-width: 3px;
}

pre,
code,
kbd,
samp {
	--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
	--text-font-weight: 400;
}

/* custom dropdown - same on all things... */
select,
textarea {
	padding: var(--half-spacing);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	border: 1px solid var(--border-color);
}

select {
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48dGl0bGU+YXJyb3dzPC90aXRsZT48cG9seWdvbiBmaWxsPSIjNDQ0IiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGZpbGw9IiM0NDQiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) var(--white) no-repeat right .5em center;
	padding-right: 1em;
	padding-left: 1em;
	/* display: inline; */
	max-width: 100%;
	border: 1px solid var(--border-color);
	border-radius: 100vw;
	border:1px solid var(--blue);
	background-color:var(--off-white);
	color: var(--text-color);
	height: 50px;
	font-size: 16px;
	font-family: var(--heading-font);
	cursor: pointer;
}

.fa-duotone {
	--fa-primary-color: var(--green);
	--fa-secondary-color: var(--dark-blue);
	--fa-primary-opacity: 1;
	--fa-secondary-opacity: 0.4;
}


/* Styled Articles
------------------------------------------------------- */
.styled h1,
.styled h2,
.styled h3,
.styled h4,
.styled h5,
.styled h6 {
	--heading-color:var(--blue);
	margin-top: 0;
	margin-block-start: var(--typography-spacing-vertical);
	margin-block-end: var(--typography-spacing-vertical);
	
}

.styled p{
	margin-block-end: var(--typography-spacing-vertical);
}

.styled a:not(.btn){
	color:var(--dark-green);
}

.styled a:hover{
	text-decoration:underline;
	text-decoration-color:var(--blue);
}

.styled .artp ul:not(.inline){
	margin:2em;
	margin-block-start: var(--typography-spacing-vertical);
	margin-block-end: var(--typography-spacing-vertical);
}

.styled .artp ul li{
	color:var(--text-color);
}

.styled .artp ul li::marker{
	color:var(--dark-green)
}


.styled .artp ol {

	
	list-style-type: decimal;
	margin:2em;
	margin-block-start: var(--typography-spacing-vertical);
	margin-block-end: var(--typography-spacing-vertical);
}

.styled .artp ol li{
	color:var(--text-color);
}

.styled .artp ol li::marker{
	color:var(--dark-green);
}

/* Articles - may require many unsets for other things
------------------------------------------------------- */
li::marker {
  color: var(--black);
}

.artp ul.nobullets {
	list-style-type: none;
	margin: .5em 0;
}

.artp ol li {}

.artp ol ol,
.artp ol ol ol {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

.artp a:hover {
	text-decoration: underline;
	text-decoration-color: var(--text-decoration-color);
}

/* Buttons 
------------------------------------------------------- */
.submit,
.btn {
	--button-border-color:var(--button-color);
	--font-weight:400;
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 2px solid var(--button-border-color);
	border-radius: 100vh;
	outline: none;
	padding: 1em 2.5em;
}

/* used on typography page for showing button layout */
#a142606367 ul {
  column-count: 2;
}

#a142606367 li {
  margin: 1em;
  text-align: center;
  list-style: none;
}

.btn.alt,
.btn.light{
	--heading-color:var(--black);
	--button-text-color:var(--black);
	--button-color:var(--light-grey);
	--button-border-color:var(--button-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 2px solid var(--button-border-color);
}

.btn.link{
		--heading-color:var(--black);
	--button-text-color:var(--black);
	--button-color:var(--light-grey);
	--button-border-color:var(--button-color);
	background-color: transparent;
	color: var(--button-text-color);
	border: none;
	text-decoration:underline;
}

.btn.dark{
	--heading-color:var(--grey);
	--button-text-color:var(--white);
	--button-color:var(--blue);
	--button-border-color:var(--button-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 2px solid var(--button-border-color);
}

.btn.white{
	--heading-color:var(--black);
	--button-text-color:var(--black);
	--button-color:var(--white);
	--button-border-color:var(--black);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 2px solid var(--button-border-color);
}

.btn.black{
	--heading-color:var(--white);
	--button-text-color:var(--white);
	--button-color:var(--black);
	--button-border-color:var(--button-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 2px solid var(--button-border-color);
}

.btn.transparent{
	--button-text-color:var(--black);
	--button-color:transparent;
	--button-border-color:var(--black);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 2px solid var(--button-border-color);
}

.btn.grey{
	--heading-color:var(--grey);
	--button-text-color:var(--white);
	--button-color:var(--grey);
	--button-border-color:var(--button-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 2px solid var(--button-border-color);
}



.submit:hover,
.btn:hover {
	text-decoration: underline;
	opacity:.8;
}

/* iphone specific overrides */
textarea,
input.text,
input.inputtext,
input.inputtext_short,
.ui-widget select,
input[type="text"],
input[type="email"],
input[type="button"],
input[type="submit"],
input[type="image"],
input#searchbox,
.input-checkbox {
	font-size: 16px;
	font-weight: 400;
	width: auto;
	border-width: 1px;
	border-style: solid;
}

td a.btn {
	display: block;
}

input::placeholder{
	color:var(--grey);
}

/* Tables 
------------------------------------------------------- */

/* Headings 
------------------------------------------------------- */



/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
/* is this the sign in page form */
.form.myaccount#psign {}
.page_useraccount{}

/*HACK  - until DH stops them from being shown!*/
.acctmsg{
	display:none;
}


/* Account sign in page
------------------------------------------------------- */
.page_signin #pm{	
	margin-bottom:4em;
}

.page_signin form{
	background-color:var(--off-white);
	margin:auto;
	max-width:700px;
	padding:2em;
	border-radius:2em;
}

.exstcust{

}

.exstcust .exstremtext{
	text-align:center;
	display:block;
	font-size:var(--sub-heading-font-size);
	color:var(--blue);
	font-family:var(--heading-font);
}

.exstnotme{
	--text-link-color:var(--blue);
	text-decoration:underline;
	text-decoration-color:var(--blue);
	font-size:var(--small-font-size);
	padding-bottom:.5em;
	margin-bottom:1em;
	border-bottom:1px dashed var(--grey);
}

.page_signin ul{
	list-style:none;
}

.page_signin li.info{
	color: var(--info-color);
	list-style: none;
}


.page_signin .inputtext{
	width:calc(100% - 1em);
	margin:0;
	padding:0 1em;
	margin-bottom:.5em;
	border:1px solid var(--blue);
	background-color:var(--white);
	height: 50px;
	text-align: left;
	border-radius:100vw;
}


.page_signin .submit{
	width:calc(100% - 1em);
	background-color:var(--green);
	border-color:var(--green);
	color:var(--blue);
}


.exstfgtpwd{
	--text-link-color:var(--blue);
	text-decoration:underline;
	text-decoration-color:var(--blue);
	font-size:var(--small-font-size);
	font-family:var(--text-font);
	margin:1em 0;
}

.exstreglnk,
.exstfgtpwd {}

.exstreglnk h5,
.exstfgtpwd h5{
	--text-link-color:var(--blue);
	text-decoration:underline;
	text-decoration-color:var(--blue);
	font-size:var(--small-font-size);
	font-family:var(--text-font);
	margin-bottom:0;
}

/* Forgotten passwordr
------------------------------------------------------- */
.page_passwordrequest #pm{	
	margin-bottom:4em;
}
.page_passwordrequest .bt h3{
	--font-size:var(--large-heading-font-size);
	text-align:center;
	margin-bottom:1rem;
	color:var(--blue);
}

.page_passwordrequest ul{
	list-style:none;
}

.page_passwordrequest .info{}

.page_passwordrequest .info.req{
	color: var(--info-color);
}

.page_passwordrequest form{
	background-color:var(--off-white);
	margin:auto;
	max-width:700px;
	padding:2em;
	border-radius:2em;
}

.page_passwordrequest .inputtext{
	width:calc(100% - 1em);
	margin:0;
	padding:0 1em;
	margin-bottom:.5em;
	border:1px solid var(--blue);
	background-color:var(--white);
	height: 50px;
	text-align: left;
	border-radius:100vw;
}
.page_passwordrequest .submit{
	width:calc(100% - 1em);
	background-color:var(--green);
	border-color:var(--green);
	color:var(--blue);
}

.page_passwordrequest h5{
	--text-link-color:var(--blue);
	text-decoration:underline;
	text-decoration-color:var(--blue);
	font-size:var(--small-font-size);
	font-family:var(--text-font);
	margin:.5em 0;
}

/* Account register
------------------------------------------------------- */
.page_register #pm{	
	margin-bottom:4em;
}

.page_register h3.header{
	display:none;
}

.page_register form{
	background-color:var(--off-white);
	border-radius:2em;
	margin:auto;
	max-width:700px;
	padding:2em;
}

.page_register ul{
	list-style:none;
}

.page_register li.info{
	color: var(--info-color);
	list-style: none;
}


.page_register .inputtext{
	width:calc(100% - 1em);
	margin:0;
	padding:0 1em;
	margin-bottom:.5em;
	border:1px solid var(--blue);
	background-color:var(--white);
	height: 50px;
	text-align: left;
	border-radius:100vw;
}

.page_register .submit{
	width:calc(100% - 1em);
	background-color:var(--green);
	border-color:var(--green);
	color:var(--blue);
	margin:1em 0;
}



/* Account icons (on main account page)
------------------------------------------------------- */
.page_useraccount .pmfull li.icon{
	display:inline-block;
	margin-right:1em;
	max-width: calc(25% - 0.8em);
}
.page_useraccount .pmfull li.icon:last-child{
	margin-right:0;
}

.page_useraccount .pmfull li.icon a.img{
	display:block;
	text-align:center;
	border:1px solid var(--border-colour);
	border-radius:1em;
	overflow:hidden;
}

.page_useraccount .pmfull li.icon a.lnk{
	display:block;
    text-align:center;
    margin:.5em auto;
}

.page_useraccount .pmfull li.icon a.img img{
	display:block;
	margin:auto;
}

.page_useraccount .pmfull ul.orders,
.page_useraccount .pmfull ul.contact,
.page_useraccount .pmfull ul.details{
	/* display:grid; */
	/* grid-template-columns:repeat(5, 1fr); */
	text-align:left;
}

.page_useraccount .pmfull ul.orders,
.page_useraccount .pmfull ul.contact,
.page_useraccount .pmfull ul.details li{
	list-style:none;
}

.page_useraccount .pmfull ul.orders img,
.page_useraccount .pmfull ul.contact img,
.page_useraccount .pmfull ul.details img{
	max-width:100%;
	height:auto;
}

/* Account headings
------------------------------------------------------- */
.page_useraccount  h4 {
	font-family:var(--heading-font);
	text-align:center;
	margin: 2rem 0;
	color:var(--blue);
}

.page_useraccount .pmfull h4 {
	font-size:40px;
}

/* Account messages
------------------------------------------------------- */
.acctmsg h3{
	/*for select only as the title of some of the messages is not user friendly and more internal */
	display:none;
}

/* account menu panel
------------------------------------------------------- */
	
#pmam + .pmfull{
	width: calc(var(--site-max-width) - 2rem);
}

/* this shows on other account pages - is no longer needed with the menu button*/
a.myacct{
	/* display:none; */
}

/* show/hide menu button */
#mamtrigbtn {
	vertical-align: middle;
	text-align: center;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: .825rem;
	font-family: var(--text-font);
	font-weight: var(--text-font-weight);
	display:inline-block;
}

#mamtrigbtn span{
	display:block;
}

#mamtrigbtn span:before {
	content: "\f7f3";
	font-family: var(--font-awesome);
	display: inline-block;
	font-size: 1em;
	margin-right: .5rem;
}
	
#pmam .myacctmenu{
	height: 100%;
	width: 50%; /* 0 width - change this with JavaScript */
	max-width:300px;
	position: fixed;
	z-index: 10001; 
	top: 0; 
	left: 0;
	background-color: var(--popout-color);
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: var(--transition);
	box-shadow: var(--box-shadow);
	padding:1rem;
	display:none;
}

#pmam .myacctmenu.showmyacctmenu{
	display:block;
}

#pmam li{
	list-style:none;
	margin-bottom:.5rem;
}

/*how many times am I going to add this back in... */
/*we don't want the icons here! */
#pmam li a.img{
	display:none;
}


.fsclsdiv .fsclsspn{
	display:inline-block;
}


/* close member panel button */
.mamclsdiv {
	text-align:right;
}

.mamclsdiv .mamclsspn{
	display:inline-block;
	border:1px solid var(--off-white);
	color:var(--grey);
	background-color:var(--off-white);
	border-radius:50%;
	font-family:monospace;
	padding:.125rem;
	margin:0rem;
	width:1rem;
	height:1rem;
	line-height:1;
	text-align:center;
	cursor:pointer;
	display:inline-block;
}

/* account recent items
------------------------------------------------------- */


/* account articles
------------------------------------------------------- */
.page_useraccount .arts{
	grid-area:memberarts;
}

/* account 
------------------------------------------------------- */
.page_useraccount .carousel.prod{
	grid-area:memberarts;
}

/* My Orders
------------------------------------------------------- */
.member-order{
	display:grid;
	grid-template-areas: "orderinfo orderinfo"
	"invoice delivery"
	"orderdetails orderdetails"
	"actions actions";
	grid-gap:1em;
}

.member-order .invoice-address{
	grid-area:invoice;
} 

.member-order .delivery-address{
	grid-area:delivery;
}

.member-order .invoice-address li,
.member-order .delivery-address li{
	list-style:none;
}

.member-order .order-details{
	grid-area:orderdetails;
}

.member-order .account-actions{
	grid-area:actions;
}

.member-order .account-actions a{
	margin:1em;
}
.member-order .account-actions a.print{
}

.member-order .account-actions a.print img{
	display:inline-block;
	vertical-align:middle;
}
.member-order .account-actions a.print:before{
	content:"print order";
	margin-right:1em;
	display:inline-block;
}

/* My Orders
------------------------------------------------------- */
.orders-ext{}

.past_order_header{
	background-color:var(--blue);
	color:var(--white);
	font-family:var(--heading-font);
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.past_order_header div{
	padding:1em;
}

.past_order{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.past_order:nth-child(2n){
	background-color:var(--off-white);
}

.past_order div{
	padding:1em;
}

/* My Orders - specific order
------------------------------------------------------- */

.ordinfo{}

.ordinfo .customerDetails {
	display:grid;
	grid-template-areas:"orderinfo orderinfo"
	"invoice delivery";
	grid-gap:1em;
}
.ordinfo .customerDetails .header{
	font-family:var(--heading-font);
	background-color:var(--blue);
	color:var(--white);
	padding:1em;
}

.ordinfo .customerDetails .orderDetails:before{
	content:"Order Details";
	font-family:var(--heading-font);
	color:var(--white);
	background-color:var(--blue);
	display:block;
	padding:1em;
}
.ordinfo .customerDetails .orderDetails{
	grid-area:orderinfo;
}

.ordinfo .customerDetails .orderDetails div{
	padding:0 1rem;
}
.ordinfo .customerDetails .orderDetails .label{
	font-family:var(--heading-font);
	font-weight:bold;
}

.ordinfo .addressDetails{}

.ordinfo .addressDetails .names,
.ordinfo .addressDetails .addressBlock{
	padding:1em;
}

.ordinfo .addressDetails .label{
	font-weight:bold;
}

.ordinfo .order .header{
	background-color:var(--blue);
	color:var(--white);
	font-family:var(--heading-font);
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding:1em;
}

.ordinfo .order .data{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding:1em;
}

.ordinfo .order .data:nth-child(2n){
	background-color:var(--off-white);
}

.ordinfo .order + .totals{
	text-align:right;
	padding:1em;
	font-weight:bold;
}



/* buttons?
------------------------------------------------------- */
.action button {
	-webkit-appearance: none;
	background-color:var(--off-white);
	color:var(--dark-grey);

	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: 2em;
	border:1px var(--off-white) solid;
	cursor:pointer;
	display:inline-block;
	vertical-align:middle;
}

.action input.inputtext {
	font-size:1rem;
	border-color:var(--dark-grey);
	text-align: center;
	width:2em;
	padding:.5em 0;
	display:inline-block;
	vertical-align:middle;
}


/* page_orderinfo
------------------------------------------------------- */

/* member orders view 
------------------------------------------------------- */

/* Wishlists 
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	background-color: var(--form-color);
	grid-column:1/-1;
	margin:auto;
}

/*bit of a hack - really don't want to be using an img as a way of identifying a required field */
form img[alt="Required"]{
	width:8px;
	display:inline;
	vertical-align:top;
	margin-left:3px;
}

.form li{
	list-style: none;
	display:block;
}

.form label {
	display:block
}

form select,
form textarea,
form input {}

/* DON'T try grid layout here - its too restrictive*/
form li.reqmsg {
	color: var(--error-color);
}

form li.header {
	margin-bottom: 1.5em;
}

form label img {
	display: inline-block;
}

form li.help,
form li.info {
	font-size: .825em;
	margin-bottom:1em;
}

form li.info  img{
	display:inline;
}

form form .submit {
	display: block;
}

form .g-recaptcha {
	text-align: right;
	display: block;
	margin-left: auto;
}

/* fix for checklists*/
form  ul.check input {
	margin-right: var(--half-spacing);
}

/* fix for radio buttons */
form ul.radio input {
	margin-right: var(--half-spacing);
}

/* fix for subscribe checkbox */
form li.subscribe input {
	margin-right: var(--half-spacing);
	width:auto;
}

form li.subscribe label {
	display: inline !important;
	font-weight: normal;
}



/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */
#pm .pmind {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-gap:1em;
	grid-column-gap: 2em;
	grid-auto-flow: dense;
	/*don't put margin here*/
}

.page_dept #pm .pmind{
	grid-gap:0;
}

/*this would be avoided if we just wrote the content out in blocks
would be also better if we could add our own "blocks" for things to be in
you currently can't have a banner and an article side by side because of this */
#pm .pmind .pbnr {
	grid-column: 1/-1;
}

#pm .pmind .pbnr {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
}

/*set the default for any non grid class article #pm is needed as the css class is set higher than the immediate parent container */
.art,
.prdlst,
.carousel,
.brnd,
#depts {
	grid-column: 1/-1;
}

.fullWidth img,
.halfWidth img,
.thirdWidth img,
.quarterWidth img,
.twoThirdWidth img,
.fullWidth picture,
.thirdWidth picture,
.quarterWidth picture,
.twoThirdWidth picture {
	display: block;
	width: 100%;
	height: auto;
}

/* layout base classes
------------------------------------------------------- */
.fullWidth {
	grid-column: 1/-1;
}
.halfWidth {
	grid-column: auto / span 6;
}
.quarterWidth {
	grid-column: auto / span 3;
}
.threeQtrWidth {
	grid-column: auto / span 9;
}
.thirdWidth{
	grid-column: auto / span 4;
}
.twoThirdWidth {
	grid-column: auto / span 8;
}

.fullWidth,
.halfWidth,
.quarterWidth,
.threeQuarter,
.thirdWidth,
.twoThirdWidth {
	position: relative;
}

.fullWidth img,
.halfWidth img,
.quarterWidth img,
.threeQuarter img,
.thirdWidth img,
.twoThirdWidth img{
	width:100%;
}

.textImage{
	display:grid;
	grid-template-areas:"text image";
	grid-template-columns:1fr minmax(auto,1fr);
	grid-gap:2em;
	align-items:center;
}

.textImage h3{
	--font-size:var(--xlarge-heading-font-size);
}

.textImage .imgcont{
	background-color:var(--grey);
}

.textImage .artp{
	grid-area:text;
	text-align:left;
	margin:2em;
}

.imageText{
	display:grid;
	grid-template-areas:"image text";
	grid-template-columns:minmax(auto,1fr) 1fr ;
	align-items:center;
}

.imageText .imgcont{
	background-color:var(--grey);
}

.imageText .artp{
	grid-area:text;
	text-align:left;
	margin:2em;
}


/* responsive iframe - used in articles*/
iframe{
	max-width:100%;
}
.responsive-iframe {
	width: calc(100% - 2em);
	margin: 1em;
	display: inline-block;
	vertical-align: top;
}

.responsive-iframe .artp,
.responsive-iframe {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}

.responsive-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* client specific css classes for standardisation*/
ul.inline{
	margin:1em 0;
}

ul.inline .btn{
	margin-right:1em;
}
.inline li{
	list-style:none;
	display:inline-block;
	/* margin: 0px 0.6em; */
}

.dblheight{
	grid-row:auto/span 2;
}

/* headers */
.pHeader{
	text-align:center;
}

.pHeader h4{
	--font-size:var(--sub-heading-font-size);
	text-transform:uppercase;
}

.pHeader h3{
	--font-size:var(--large-heading-font-size);
}




/* headers
---------------------------*/

.plainHeader{
	display: flex;
	align-items: center;        /* vertical centering */
	justify-content: center;    /* horizontal centering */
	margin-bottom: 1rem;
	--heading-color:var(--blue);
}
.deptHeader{
	display: flex;
	align-items: center;        /* vertical centering */
	justify-content: center;    /* horizontal centering */
	margin-bottom: 1rem;
	--heading-color:var(--blue);
	background-color:var(--off-white);
	padding:1em;
}
.plainHeader h2,
.deptHeader h2{
	--font-size:var(--xlarge-heading-font-size);
	text-align:center;
	margin-bottom:1rem;
}
.plainHeader h3,
.deptHeader h3{
	--font-size:var(--large-heading-font-size);
	text-align:center;
	margin-bottom:1rem;
}
.plainHeader h4,
.deptHeader h4{
	--font-size:var(--sub-heading-font-size);
	text-align:left;
	margin-bottom:1rem;
}
.deptHeader .artp{
	text-align:left
}

.deptHeader ul{
	list-style-position: inside;
	margin-block-end:1em;
}

.deptHeader p{
	margin-bottom:1rem;
}

/* banners */
.bnrLink{
	text-align:center;
}

.bnrLink h3{
	--font-size:var(--heading-font-size);
	max-width:80%;
	margin:.5rem auto;

	padding-bottom:.5rem;
	border-bottom:1px var(--light-grey) solid;
}

/*layout */
.rounded{
	border-radius:1em;
}

.inset{
	margin:auto;
	padding:4em 4em;
	text-align:center;
	grid-column:1/-1;
}

.paddedContent{
	padding:1em 1.5em;
}

.center{
	text-align:center;
}


/* themes */
.light{
	background-color:var(--light-grey);
}

.dark{
	background-color:var(--blue);
	--text-color:var(--grey);
	--heading-color:var(--grey)
}

.white{
	background-color:var(--white);
	--text-color:var(--text-color);
	--heading-color:var(--heading-color)

}

.black{
	background-color:var(--black);
	--text-color:var(--white);
	--heading-color:var(--white)
}

.transparent{
	background-color:transparent;
}


.blue{
	background-color:var(--blue);
	color:var(--white);
	--text-color:var(--white);
	--heading-color:var(--white);
}


.darkBlue{
	background-color:var(--dark-blue);
	color:var(--white);
	--text-color:var(--white);
	--heading-color:var(--white);
}

.lightBlue{
	background-color:var(--light-blue);
	color:var(--white);
	--text-color:var(--white);
	--heading-color:var(--white);
}

.grey{
	background-color:var(--grey);
	--text-color:var(--white);
	--heading-color:var(--white)
}

.green{
	background-color:var(--green);
	--text-color:var(--dark-blue);
	--heading-color:var(--dark-blue);
	border-color:var(--green);
	color:var(--dark-blue);
}


/* elements */
.feat{}

.feat .imgcont{
	position:relative;
}

.feat .imgcont div{
	position:absolute;
	bottom:2em;
	background-color:white;
	padding:.5em 1em;
	border-top-right-radius:.5em;
	border-bottom-right-radius:.5em;
}
/* Category Links
------------------------------------------------------- */

.categoryLink{
	grid-column:auto/span 6;
	/* padding: 2em; */
	/* padding-bottom:1.5em; */
	display:grid;
	grid-template-areas:
		"title image"
		"text image";
	grid-template-columns:calc(60% - 3em) 40%;
	grid-column-gap:3em;
	align-items:center;
}
.categoryLinkLrg{
	grid-column:auto/span 4;
	padding: 2em;
	padding-bottom: 0em;
	display:grid;
	grid-template-areas:
		"image"
		"title"
		"text";
}


.categoryLink ul,
.categoryLinkLrg ul{
	display:inline-block;
	/* margin-bottom:1em; */
}
.categoryLink li,
.categoryLinkLrg li{
	display:inline-block;
}

.categoryLink h2,
.categoryLinkLrg h2{
	grid-area:title;
	align-self:center;
	margin:0;
	margin:.5rem 0;
	font-size:var(--large-heading-font-size);
	/* color:inherit; */
}
.categoryLink .artp,
.categoryLinkLrg .artp{
	grid-area:text;
	align-self:start;
	text-align:left;
	color:var(--off-white-alpha)
}

.categoryLink small,
.categoryLinkLrg small{
	display:block;
	padding-top:.5em;
	border-top: 1px var(--off-white-alpha) dashed;
	margin:1em 0;

}
.categoryLink .imgcont,
.categoryLinkLrg .imgcont{
	grid-area:image;
	align-self:center;
	
}

.categoryLink .imgcont img,
.categoryLinkLrg .imgcont img{
	width:100%;
} 

.deptLink{
	grid-column: auto / span 3;
	text-align:center;
	/* padding:1em; */
	border-top-right-radius:2em;
	border-top-left-radius:2em;
	overflow:hidden;
	margin-bottom:2em;
	background-color:var(--off-white);
}

.deptLink h4{
	font-size:var(--heading-font-size);
	margin-top:.5em;
	color:var(--black)
}

.deptLink a.btn{
	color:var(--blue);
	font-family:var(--text-font);
}

.deptLink img{
	margin:auto;
	width:100%;
}





	

/* Swiffy Sliders
------------------------------------------------------- */

/*dept sliders */
.slider-product{
    --swiffy-slider-item-count: 5;
}

/*dept sliders */
.slider-dept{
    --swiffy-slider-item-count: 5;
    --swiffy-slider-nav-light: #fff;
}
.slider-dept-alt{
    --swiffy-slider-item-count: 10;
}

/*Featured sliders */
.slider-featured{
    --swiffy-slider-item-count: 5;
}

/*cta slider */
.slider-cta{
    --swiffy-slider-item-count: 5;
}

.slider-cta .slider-container{
	--swiffy-slider-item-gap:0;
}

.slider-instagram{
    --swiffy-slider-item-count: 5;
}

.slider-trustedby{
    --swiffy-slider-item-count: 6;
}

.slider-cta li{
	margin:0;

}

/* product sliders - code needs some tweaking */
/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
.carousel.prod > h2{
	font-family:var(--heading-font);
	font-size:40px;
	text-align:center;
	margin: 2rem 0;
	color:var(--blue);
}
.carousel.prod .swiffy-slider{
	--swiffy-slider-item-count: 5;
	margin-bottom:1rem;
	padding-bottom:1rem;
}

/* department sliders - code needs some tweaking */
/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
.carousel.dept .swiffy-slider{
	--swiffy-slider-item-count: 5;
	margin-bottom:1rem;
	padding-bottom:1rem;
}




/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */
#cont {
	margin: auto;
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

#site {
	background-color: var(--background-color);
	flex:1;
	display:flex;
	flex-direction:column;
}

/* -------------------------------------------------------------------------------------
=Top Bar #ptf
------------------------------------------------------------------------------------- */
#ptf {
	--heading-color: var(--white);
	--text-link-color: var(--white);
	
	position: relative;   /* explicit normal flow positioning */
	width: 100%;
	background-color: var(--blue);
	color: var(--white);
	text-align: center;
	min-height: 30px;
	align-content: center;

}

#ptf p,
#ptf h1,
#ptf h2,
#ptf h3,
#ptf h4,
#ptf h5,
#ptf h6{
	font-family:var(--text-font);
	margin:0;
	padding:.5em;
	font-size:14px;
	color:var(--white)
}

/* -------------------------------------------------------------------------------------
=Top Panel #pt
------------------------------------------------------------------------------------- */
#pt {
	width: 100%;
	margin: auto;
	background-color: var(--top-panel-color);
}

/*see media queries for other layouts layout */
#pt .ext {
	--logo-width: minmax(200px, 400px);
	--outer: var(--spacer-width);
	--search: 320px;
	--trade: 45px;
	--icons: 159px;
	--basket: 47px;

	/* Derived fixed totals (no JS) */
	--leftFixed:  calc(var(--outer) + var(--search));
	--rightFixed: calc(var(--trade) + var(--icons) + var(--basket) + var(--outer));
	
	/* The auto-calculated inner spacers */
	--innerLeft:  max(0px, calc((var(--rightFixed) - var(--leftFixed)) / 2));
	--innerRight: max(0px, calc((var(--leftFixed) - var(--rightFixed)) / 2));
	width:100%;
	max-width:100%;
	background-color: var(--top-panel-color);
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-column-gap: 0rem;
	grid-template-columns:
		var(--outer)       /* outer spacer left */
		var(--search)      /* search */
		var(--innerLeft)   /* inner spacer left (computed) */
		auto               /* logo */
		var(--innerRight)  /* inner spacer right (computed) */
		var(--trade)       /* trade */
		var(--icons)       /* icons */
		var(--basket)      /* basket */
		var(--outer);      /* outer spacer right */
	grid-template-areas:
		"outerL search innerL logo innerR trade icons basket outerR"
		"nav nav nav nav nav nav nav nav nav";
	align-items: center;
	position:relative;
	padding-top:1em;
}

#pt .ext>* {
	min-width: 0;
}

/* defaults */
li.pipe{
	display:none;
}

@media only screen and (max-width: 1440px) {
	#pt .ext {
		padding:1em;
	}
}


@media only screen and (max-width: 1200px) {
	#pt .ext {
		padding:1em;
	}
}

/* logo
------------------------------------------------------- */
#a142999552{
	grid-area:logo;
	/* margin-bottom: 3em; */
}

#a142999552 svg{
	margin:auto;
}

/* search toggle
------------------------------------------------------- */
#a142999554,
.art.fst{
	display:none;
}

/* search
------------------------------------------------------- */
#pt .search {
	grid-area: search;
	text-align: left;
	font-size:16px;
	border:1px solid var(--blue);
	border-radius:100vh;
	background-color:var(--off-white);
	padding: 8px 16px;
	height:50px;
	margin-right:auto;
	align-items:center;
	align-content:center;
	width: 320px;
}

#pt .search form {
	width:100%;
	display:grid;
	grid-template-areas:
		" button search";
	grid-template-columns: 24px 1fr;
}

#pt .search input {
	display: block;
}

#pt .search input#searchbox {
	grid-area:search;
	margin: auto;
	background-color:transparent;
	color:var(--black);
	font-size: 14px;
	padding: 0;
	border:none;
	width:calc(100% - 1em);
	/* outline:1px red solid; */
	height: 26px;
	/* margin-left:1em; */
}

#pt .search input#searchbox:focus-visible{
	outline:none;
}

#pt .search:focus-within{
	outline: 2px solid var(--blue);
	outline-offset: -8px;
}

#pt .search input#searchbox::placeholder{
	color:var(--black-alpha);
	font-family:var(--monospace);
}

/*could do with some way of nicely seeing font awesome icons in coms */
#pt .search input#search {
	margin: 0;
	padding:0;
	border:none;
	border-radius:0;
	background-color:transparent;
	color:var(--blue);
	font-family:var(--font-awesome);
	height:16px;
	align-self:center
}

/* trade signup
------------------------------------------------------- */
.art#a143163394{
	grid-area:trade;
	text-align:center;
	/* margin-right:1em; */
}

.art#a143163394 img{
	margin:auto;
	width:45px;
}

.art#a143163394 p{
	font-size:12px;
		text-align:center;
}
/* icons
------------------------------------------------------- */

/* icons
------------------------------------------------------- */
#p54820864,
#p54820864{
	grid-area:icons;
	margin-right:1em;
	margin-left:1em;
}

#p54820864 img,
#p54820864 img{
	width:45px;
	margin:auto
}

#p54820864 ul,
#p54820864 ul{
	display:grid;
	grid-template-columns: auto auto;
	align-items:center;
	grid-template-areas:"favourites account";
	grid-gap:1em;
	list-style:none;
	text-align:center;
	align-items:center;
}

#p54820864 li a.lnk{
	display:block;
	font-size:12px;
	line-height:1.1em;
	height:calc(1.1em * 2);
}

#p54820864 li a.img{
	width:45px;
	outline:1px red solid;
}


#p54820864 li.tel{
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	padding:1em 2em;
}

#p54820864 li.wish{
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	/* padding:1em; */
}

#p54820864 li.sin,
#p54820864 li.acct{
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	/* padding:1em; */
}

#p54820864 li.reg,
#p54820864 li.sout{
	display:none;
}

/* basket
------------------------------------------------------- */
#pt .bskt {
	grid-area: basket;
	position:relative;
	display:block;
	margin-left:auto;
	align-content:start;
	anchor-name:  --basket-anchor;
}

#pt .bskt:hover{
	cursor:pointer;
}

/*items in basket */
#pt .bskt p,
#pt .bskt a.mybsktlnk{
}

/* new checkout changes the way the basket works... 
------------------------------------------------------- */
#mybskt{
	grid-area: basket;
	position:relative;
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	/* padding:1em; */
}

#mybskt .bsktitems{}
#mybskt h4{
	display:none;
}

#mybskt .bsktvalue{
	display:none;
}

#mybskt .bsktitems{
	display:block;
	position:absolute;
	top:0;
	right:0;
	background-color:var(--blue);
	border-radius:2em;
	padding:.125em;
	z-index:1;
}


#mybskt .bsktitems p{
	font-size:.725em;
	margin:0;
	font-family:monospace;
	width:1rem;
	height:1rem;
	align-content:center;
	text-align:center;
	color:var(--white);
	background-color:var(--blue);
	border-radius:100vw;
}

#mybskt .bsktitems span{
	display:none;
}

#mybskt a.btn{
	position:relative;
	display:block;
	margin:auto;
	padding: 0;
	border:none;
	background:none;
	color:var(--text-color)
}

#mybskt:after{
	content:"Basket";
	display:block;
	font-family:var(--text-font);
	font-size:12px;
	text-align:center;
		font-size:12px;
	line-height:1.1em;
	height:calc(1.1em * 2);
}

#mybskt img{
	--button-color:transparent;
	--button-text-color:transparent;
	--button-border-color:transparent;
	font-size: 1em;
	text-align: center;
	cursor: pointer;
	border: none;
	border-radius: var(--border-radius);
	outline: none;
	padding: 0;
	width: 47px;
}



#mybskt img:hover,
#mybskt a.btn:hover{
	border:none;
	background-color:transparent;
}

#mybskt a.btn img:hover{
	--button-hover-color:transparent;
}

/*top ctas
------------------------------------------------------- */
.art#a143032320{
	z-index:999;
	width:100%;
	background-color:var(--blue);
}

.art#a143032320 .fa-duotone {
	--fa-primary-color: var(--green);
	--fa-secondary-color: var(--dark-blue);
	--fa-primary-opacity: 1;
	--fa-secondary-opacity: 0.4;
	font-weight:200;
	font-size:20px;
}

.art#a143032320 p{
	color:var(--white);
	padding:10px;
}


.art#a143032320 .artp{
	max-width:var(--site-max-width);
	margin:auto;
	padding:16px 5px;
}
.art#a143032320 .slidecont{
	text-align:center;
	display:block;
	color:var(--white);
	padding:.2em;
}

.art#a143032320 i,
.art#a143032320 p{
	display:inline;
}

.art#a143032320 li{
	border-right:1px solid var(--white-alpha);
	margin:0em;
	margin-block-start: 0em;
	margin-block-end: 0em;
}
.art#a143032320 li:last-child{
	border-right:none;
}

.art#a143032320 button,
.art#a143032320 .slider-indicators{
	display:none;
}


.art#a143032320 p{
	color:var(--white);
	padding: 10px;
}

/* Nav Settings
------------------------------------------------------- */
#pt .nav-wrapper{
	margin-top: 1em;
}
.nav-wrapper .nav{
	border-top:1px solid rgba(155, 168, 174, 0.25);
	border-bottom:1px solid rgba(155, 168, 174, 0.25)
}

/* client specific 
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Center Panel #pc
------------------------------------------------------------------------------------- */
#pc {
	display: flow-root;
	text-align: center;
	background-color:var(--off-white);
	background-color:#F6F8F9;
	margin-bottom:2em;
}

#pc .arts{
	max-width:var(--site-max-width);
	margin:auto;
}

/* -------------------------------------------------------------------------------------
=Main Panel #pmid
------------------------------------------------------------------------------------- */
#pmid {
	width: 100%;
	margin: auto;
	display: flex;
	flex:1;
	z-index:2;
}

/* filter search results? 
------------------------------------------------------- */
#fs {
	display: none;
}

/* full width panel 
------------------------------------------------------- */
.pmfull {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	width: var(--site-max-width);
	max-width:100%;
	z-index:2;
}

/* left panel - when filter is in use
------------------------------------------------------- */
#pl {
	width: 0;
}

/* Right panel
------------------------------------------------------- */
#pr {
	width: var(--right-panel-width);
	margin: 0;
	margin-right: auto;
	margin-left: 1rem;
	vertical-align: top;
}

/* wide panel (used if left or right panels exist)
------------------------------------------------------- */
.pmwide {
	width: var(--site-max-width);
	display: inline-block;
	vertical-align: top;
	margin: 0;
	margin-left: auto;


	width: calc(var(--site-max-width));
	display: inline-block;
	vertical-align: top;
	margin:auto
}

.pmstd {
	width: var(--site-max-width);
}

/* -------------------------------------------------------------------------------------
=Footer Panel #pf
------------------------------------------------------------------------------------- */
#pf {
	width: 100%;
	margin: auto;
	z-index:1;
	background-color:var(--off-white);
	padding:2em;
}

#pf .ext {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	max-width: var(--site-max-width);
	width: 100%;
	padding: 0;
		display:grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-gap:1em;
	grid-column-gap: 2em;
}

#pf .ext  .arts{
	display:grid;
	grid-column:1/-1;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-gap:1em;
	grid-column-gap: 2em;
}

/* -------------------------------------------------------------------------------------
=Bottom Panel #pb
------------------------------------------------------------------------------------- */
#pb {
	--text-link-color:var(--grey);
	--heading-color:var(--grey);
	--text-color:var(--grey);
	width: 100%;
	margin: auto;
	padding-top:2em;
	background-color:var(--off-white);
}

#pb .ext {
	--logo-width: 300px;
	--gap:150px;
	z-index:1;
	background-color: var(--dark-blue);
	border-top-right-radius:2em;
	border-top-left-radius:2em;
	margin: 0 auto;
	padding: 75px 0;
	position: relative;
	display: grid;
	grid-template-areas:
		". logo logo logo . . . ."
		". customerservices .  product . contact . .";
	grid-template-columns: var(--spacer-width) 
		auto var(--gap) auto var(--gap) auto 1fr
		var(--spacer-width)
}

#pb a:hover{
	text-decoration:underline;
	color:var(--green);
	text-decoration-color:var(--light-blue);
}
#pb #a142999552{
	grid-area:logo;
}

#pb #a142999552 svg{
	margin:0;
	max-width:300px;
	margin-bottom:2em;
}

#p54788102{
	grid-area:customerservices;
}

#p54788103{
		grid-area:product;
}

#a142999555{
	grid-area:contact;
	margin-top:2em;
}


/* Info defaults 
------------------------------------------------------- */
/* hide icons if present on info links */
#pb .info li.icon img {
	display: none;
}

#pb .info h3 {
	--font-size:1.5em;
	text-transform: capitalize;
	margin-bottom:1em;
}

#pb .info ul {
	padding: 0;
}

#pb .info li {
	list-style: none;
	font-size: 1em;
	padding: 0;
	line-height:1.75;
	
}


/* Article defaults 
------------------------------------------------------- */
/* hide icons if present on info links */
#pb .art li.icon img {
	display: none;
}

#pb .art h2,
#pb .art h3 {
	font-size: 20px;
	font-weight:400;
	text-transform: capitalize;
	color: var(--bottom-panel-heading-color);
}

#pb h1 + p,
#pb h2 + p,
#pb h3 + p{
	font-size:initial;
}

#pb li{
	list-style:none;
}

/* -------------------------------------------------------------------------------------
=Bottom bar #pbf
------------------------------------------------------------------------------------- */
#pbf {
	background-color: var(--dark-blue);
	--font-size: 11px;
	--text-link-color:var(--grey);
	font-size:small;
	padding: 0;
}

#pbf .ext {
	--text-color:var(--off-white);
	margin: 0 2em;
	position: relative;
	display: grid;
	text-align: center;
	color: var(--white);
	grid-template-areas:".  paymenticons terms copyright .";
	align-items:center;
	grid-template-columns: var(--spacer-width) 1fr auto 1fr var(--spacer-width);

}

#pbf .etailcopy{
	grid-area:copyright;
	text-align:right;
}
#pbf .etailcopy p{
	display:inline-block;
	margin-left:.5em;
}

#pbf .etail,
#pbf .etail a,
#pbf .etailcopy p{

}

#p54788099{
	grid-area:terms;
}

#p54788099 li{
	display:inline-block;
	margin:.5em;
}

#a142639116{
	--font-size:16px;
	grid-area:paymenticons;
	text-align:left;
}
#a142639116 li{
	display:inline-block;
	margin:.5em;
}

#a142639116  i {
	font-size:20px;
}

/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */
.bdcb {
	grid-area:bdcb;
	width:100%;
	padding: 1em 0;
	text-align: center;
	background-color:var(--white);
}

.home .bdcb {
	display: none;
}

.crumb {
	display: block;
	max-width:var(--site-max-width);
	margin:auto;
	text-align: left;
	/* margin: 0 var(--half-spacing); */
}

.bdcb ul li {
	list-style: none;
	display: inline-block;
	margin: 0;
}

.bdcb li a,
.bdcb li h1{
	font-family: var(--text-font);
	color:var(--text-color-light);
	line-height:1;
	font-size: 12px;
	font-weight: normal;
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align:middle;
	letter-spacing:normal;
}

/*active page */
.bdcb li h1 {
	font-size: 12px;
	margin:0;
	color:var(--text-color);
}

/*for the break between the crumb*/
.bdcb li:after {
	display:inline-block;
	font-family: var(--text-font);
	color:var(--text-color-light);
	font-size: .825rem;
	font-weight: normal;
	content:">";
	margin: 0 .25rem;
}

.bdcb li:last-child:after {
	content: "";
	margin: 0;
	display: none;
}

.bdcb span {
	display: inline-block;
	margin: 0;
}

.bdcb h1 {}


/* -------------------------------------------------------------------------------------
=Sitemap 
------------------------------------------------------------------------------------- */
#pm .smap ul {
	list-style-position: inside;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
#pm .smap ul li {}
/* First Level */
#pm .smap ul li {}
#pm .smap ul li a {
	font-weight: var(--heading-font-weight);
	font-size: 1.2em;
}
/* Second Level */
#pm .smap ul li ul {
	grid-template-columns: 1fr;
}
#pm .smap ul li ul li {
	width: 100%;
}
#pm .smap ul li ul li a {
	font-weight: normal;
	font-size: 1em;
}
/* Third Level */
#pm .smap ul li ul li ul li a {
	font-weight: normal;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=DEPARTMENT PAGES 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */
.filter{
	height: 100%;
	width: 50%; /* 0 width - change this with JavaScript */
	max-width:300px;
	position: fixed;
	z-index: 10001; 
	top: 0; 
	left: 0;
	background-color: var(--off-white);
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: var(--transition);
	box-shadow: var(--box-shadow);
	padding:1rem;
	display:none;
	z-index:999;
}

/* close filter button */
.filter.showfilter{
	display:block;
}

.fsclsdiv {
	text-align:right;
}

.fsclsdiv .fsclsspn{
	display:inline-block;
	border:1px solid var(--black);
	color:var(--black);
	background-color:var(--green);
	border-radius:50%;
	font-family:monospace;
	padding:0rem;
	margin:0rem;
	width:1rem;
	height:1rem;
	line-height:1;
	text-align:center;
	cursor:pointer;
}

.filter .bt {
	border-bottom:2px solid var(--green);
	margin-bottom:1rem;
}

.filter .bt h3 {
	font-weight:var(--heading-font-weight);
	font-size:1.25rem;
}

.longattrsection .items {
	overflow-x: hidden;
	-ms-overflow-x: scroll;
	margin-bottom: 1rem;
}

.HeaderContent h5 {
	font-size: 1rem;
}

.collapsed h5 {}
.collapsed h5:hover {}

.items {}

.citem {
	padding: var(--spacing) 0;
	font-family: var(--sub-heading-font);
	margin: 0;
	cursor: pointer;
	text-align: left;
	
}

.citem::before,
.citemselected::before {
	font-family: var(--font-awesome);
	margin-right: .5rem;
	font-size: 1.25rem;
	display: inline-block;
	vertical-align:middle;
}

.citem::before {
	content: '\f0c8';
}

.citemselected::before {
	content: '\f14a';
	color:var(--green);
	font-weight:600
}

.citem:empty {
	display: none;
}

.citem:hover {}

.citemselected:hover {}



/* price slider 
------------------------------------------------------- */
/* should be a toggle in coms to turn this on or off - also could do with a class on it for better targeting purposes */
div[sectiontype="priceslider"] {
display:none;

}
.mnu_filter_search{
	display:grid;
}

div[sectiontype="Refine by Colour"] {
grid-row:1;

}

.longattrsection .items {
	overflow-x: hidden;
	-ms-overflow-x: scroll;
	margin-bottom: 1rem;
}

.attrsection {}

.filter .HeaderContent {
	padding: var(--spacing) 0;
	position: relative;
	cursor: pointer;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1rem;
	border-bottom:1px solid var(--border-color)
}

.HeaderContent:after {
	content: '\f107';
	font-family: var(--font-awesome);
	font-size: 1rem;
}

.HeaderContent.collapsed:after {
	content: '\f106';
}

.HeaderContent h5 {
	margin: 0;
	font-size: 1rem;
	padding: 0;
	position: relative;
	cursor: pointer;
}

.items {
}



#divPriceRangeDisplay {
	text-align: center;
	padding: var(--spacing);
}

#sldiv {
	margin: 1em;
}

/* filter buttons
------------------------------------------------------- */
.fltrattrbtn,
.resetfs {
	display:inline-block;
	vertical-align:middle;
	margin-right:.5rem;
	margin-bottom:.5rem;
	text-align:center;
	padding:var(--half-spacing) var(--spacing);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	cursor:pointer;
}


#fstrigbtn{
	display:inline-block;
	margin-top:1em;
}

.fstrigspn{
	display:block;
	vertical-align:middle;
	/* margin-right:.5rem; */
	/* margin-bottom:.5rem; */
	text-align:center;
	padding:var(--half-spacing) var(--spacing);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	cursor:pointer;
	font-size:.825rem;
	font-family:var(--text-font);
	font-weight:var(--text-font-weight);
}

.fstrigspn:before{
	content:"\f1de";
	font-family:var(--font-awesome);
	display:inline-block;
	font-size:1em;
	margin-right:.5rem;
}

/*as we currently write out TWO clear filter buttons*/
.resetfs + .resetfs,
.fltrattrbtn + .resetfs{
	display:none;
}

.fltrattrtxt,
.resetfs h5 {
	font-size:.825rem;
	font-family:var(--text-font);
	font-weight:var(--text-font-weight);
	margin: 0;
}

.fltrattrbtn{
	background-color:var(--light-grey);
	border-color:var(--light-grey);
}

.fltrattrtxt:after{
	content:"\0058";
	font-family:var(--font-awesome);
	display:inline-block;
	font-size:.725em;
	margin-left:.5rem;
}




/* -------------------------------------------------------------------------------------
=SearchHeader / SearchFooter 
------------------------------------------------------------------------------------- */
.deptwrap {
	/* margin-top:1em; */
}

.searchheader {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas:
		"items filter sort-by";
	grid-gap: 1em;
	align-items: center;
	padding: 0em;
	margin-bottom:1em;
	background-color: var(--main-panel-color);
}

.searchheader .search {
	/* for unknown reasons we re-write out the searchbox in the search header*/
	display: none !important;
}

.searchheader label{
	font-family:var(--text-font);
	font-weight:normal;
	font-size:.825rem;
	margin:0;
	margin-right:.5rem;
	display:none;
}

.searchheader .paging{
	/*important needed as something shoves an inline style there!*/
	display:none !important;
}

.searchheader select{
	margin:0;
}


/* results found */
.searchheader h5#rescou {
	grid-area:items;
	font-family:var(--monospace);
	color:var(--text-color-light);
	font-weight:normal;
	font-size:.825rem;
	margin:0;
}

/* sort by */
.searchheader #sorpan,
.searchheader form[name="dispord"]{
	grid-area:sort-by;
	margin: 0;
}

/* results per page */
.searchheader #rpppan,
.searchheader .rpp {
	margin: 0;
}

/*filter options if applicable */
.fltrbtnholder{
	grid-area:filter;
}

/* paging
------------------------------------------------------- */
.paging {
	grid-area:paging;
	text-align: center;
}

/*writing out "page" is a little daft */
.paging label {
	display: none;
}

.paging .currpg {
	font-size: 1em;
	display: inline-block;
	margin-right: .5em;
	border-radius:50%;
	background-color:var(--black);
	color:var(--white);
	width:55px;
	height:55px;
	align-content:center;
}

.paging a {
	font-size: 1em;
	display: inline-block;
	margin-right: .5em;
	border-radius:50%;
	background-color:var(--off-white);
	width:55px;
	height:55px;
	align-content:center;
}

.paging a:last-child {
	margin-right: 0;
	width:unset;
	height:unset;
	background-color:transparent;
	border-radius:0;
	text-decoration:underline;
}

.searchfooter {
	padding: .5em;
	text-align: center;
	margin: 1em 0;
}

#sr {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
	grid-row-gap: 4rem;
	position: relative;
}

.pmwide #sr {
	grid-template-columns: repeat(4, 1fr);
}

/* -------------------------------------------------------------------------------------
=Subdepartment tree  
------------------------------------------------------------------------------------- */
.depttree{
	grid-column:1/-1;
}

.depttree > .bt h3{
    display:none;
}

.depttree{
	display:block !important;
	margin-bottom:2rem;
}

.depttree h4.tagline{}

.depttree ul{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-gap: 2rem;
}

.depttree li{
	position:relative;
	margin:0;
	overflow:hidden;
	align-items:center;
	background-color:var(--grey);
	display:grid;
	grid-template-columns:1fr;
}

.depttree li a.img{
	/*cos iphones? */
	display:block;
	margin:0;
	padding:0;
	grid-column:1;
	grid-row:1;
}

.depttree li a.img img{
	min-width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin: auto;
}

.depttree li a.txt{
	color:var(--white);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size:1.25rem;
	grid-column:1;
	grid-row:1;
	padding:.5rem;
	align-self:center;
	text-align:center;
}

/* -------------------------------------------------------------------------------------
=FeaturedProducts 
------------------------------------------------------------------------------------- */

/* Base settings
------------------------------------------------------- */

#deptlist .fprdcont,
#searchlist .fprdcont {}

/* lets use grid layouts cos they are awesome! */
.fprd {
	position: relative;
	overflow:hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"image image"
		"strapline strapline"
		"title title"
		"selling-price prev-price"
		"fprdinfo fprdinfo";
	grid-template-rows:auto auto auto 1fr auto;
}
/* different layout for samples */
.fprd.sample {
	position: relative;
	grid-template-areas:
		"image image"
		"strapline strapline"
		"title title"
		"sample sample"
		"fprdinfo fprdinfo";
}

/* reset margins and paddings */
.fprd p,
.fprd h3,
.fprd h4,
.fprd h5 {
	margin: 0;
	padding: 0;
}

.fprd h5.type{
	display:none !important;
}

/* image 
------------------------------------------------------- */
.fprd .fprdimg {
	grid-area: image;
	anchor-name: --fprdimg-anchor;
}

.fprd .fprdimg a {
	display: block;
	text-align: center;
}

.fprd .fprdimg a.swap{
	position:absolute;
	position-anchor: --fprdimg-anchor;
	bottom:anchor(--fprdimg-anchor bottom);
	right:anchor(--fprdimg-anchor right);
	padding:1em;
}

.fprd .fprdimg img {
	margin: 0 !important;
	object-fit:cover;
	width:100%;
}

.fprd .fprdimg a.swap img{
	width:120px;
}

.fprd .fprdimg img:hover {}

/* title
------------------------------------------------------- */
.fprd .fprdtitle,
.fprd a.title{
	grid-area: title;
	font-family:var(--heading-font);
	font-size: 22px;
	line-height: 1.4em;
	height: calc(1.4em * 2); /* forces 2-line height */
	display: -webkit-box; 
	-webkit-line-clamp: 2;  
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom:1rem;
}

.fprd .fprdtitle a.lnk,
.fprd a.title {
	color:var(--black);
}

/*strapline */
.fprd .strap {
	--text-color:var(--light-blue);
	align-self:end;
	grid-area: strapline;
	padding-bottom:4px;
	border-bottom: 1px var(--off-white-alpha) dashed;
	margin:.5rem 0;

}

.fprd .strap p{
		--font-size:14px;
		font-family:monospace;
}

/* title
------------------------------------------------------- */
.fprd .fprddescr{
	grid-area:description;
	display:none;
}




/* saving ribbon
------------------------------------------------------- */
.fprd .saving {
	--featured-color: var(--featured-alt-color);
	/*funky ribbon effect courtesy of freecodecamp */
	--f: .5em;/* control the folded part*/
	--r: .5em;/* control the ribbon shape */
	--t: .5em;/* the top offset */
	--featured-color:var(--green);

	position: absolute;
	top:var(--t);
	left: calc(-1*var(--f));
	
	padding: 0 10px var(--f) calc(10px + var(--r));
	  clip-path: polygon(0 0,0 calc(100% - var(--f)),var(--f) 100%,
      var(--f) calc(100% - var(--f)),100% calc(100% - var(--f)),
      calc(100% - var(--r)) calc(50% - var(--f)/2),100% 0);
	background: var(--featured-color);

}

.fprd .saving label {
	color:var(--blue);
	margin:0;
}

.fprd .saving h6 {
	color:var(--blue);
	margin:0;
}

/* pricing structure
------------------------------------------------------- */
.fprd h6 {
	margin: 0;
	padding: 0;
	margin-top:.5rem;
	display:inline;

}

.fprd h6 span {
	font-size: small;
	display: block;
}

.fprd label {
	margin: 0;
	padding: 0;
	font-size: small;
	--text-color:var(--light-blue);
	color:var(--light-blue);
}
.fprd label + h6
{
		margin-left:.5em;
}

.fprd .prevprice {
	grid-area:prev-price;
	display:none;
}

.fprd .prevprice label {}
.fprd .prevprice h6 {
	text-decoration: line-through;
}

.fprd .price {
	grid-area: selling-price;
	color:var(--black);
	align-self:end;
}

.fprd.sample .price {
	display:none;
}
.fprd .price label {
	/* display:none; */
}

.fprd .trade {
	grid-area: selling-price;
	text-align: center;
}

.fprd .offer:not(.flag) {
	grid-area: selling-price;
	/* margin-left:1rem; */
}

/* pricebreaks 
------------------------------------------------------- */
.pricebreak {}

/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {
	grid-area: unit-price;
}

.fprd .packsize {
	grid-area: packsize;
	text-align: left;
}

.fprd .unit h6 span {
	display: block;
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

.fprd .qty {
	grid-area: carton;
	text-align: center;
}
.fprd .qty h6 span {
	display: block;
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref span {}
.fprd .model,
.fprd .clientref {
	margin: 0;
	font-size: small
}

.fprd .model span,
.fprd .clientref span {
	font-size: small;
	display: block;
}

.fprd .clientref {
	grid-area: client-ref;
	font-size: .725em;
	text-align: left;
}

.fprd .model {
	grid-area: model-number
}

/* flags
------------------------------------------------------- */
/*flags may exist either within the image or as a separate element, position accordingly */
.fprdimg .piflags {
	position: absolute;
	top: 0rem;
	pointer-events:none;
}

.fprdimg .piflags .f18022400{
	display:none;
}

.fprd .piflags ul {
	margin: 0;
	padding: 0;
}

.piflags ul li {
	list-style: none;
	margin: 0;
}

.fprd .piflags img {
	width: auto;
	border-radius:0;
}

/* flag could be any auto sys flag like no stock, offer etc */
.fprd .flag {
	position:absolute;
	display:block;
}

.fprd .flag img {
	display:block;
	margin:0;
}

/* quantity in basket - CAUTION not shown everywhere... 
------------------------------------------------------- */
.qtyInBskt {
	display: none;
}

/* more info and quickview button 
------------------------------------------------------- */
.fprdinfo{
	grid-area:fprdinfo;
	margin:1rem 0;
}

.fprdinfo a.btn{
	display:block;
	padding:var(--half-spacing);
	height:50px;
	align-content:center;
	padding:var(--half-spacing);
	background-color:var(--green);
	border-color:var(--green);
	color:var(--dark-blue);
}

.sample .fprdinfo a.btn{
	background-color:var(--blue);
	border-color:var(--blue);
	color:var(--white);
}

/* Buy form 
------------------------------------------------------- */
.fprd form {
	grid-area: buy-pane;
	text-align: center;
	margin: 0;
}
.fprd form.smplreqform{
	grid-area:sample;
	display:none;
}

.fprd.sample form.smplreqform{
	display:block;
}

.fprd form.smplreqform input.submit {
	display:block;
	padding:var(--half-spacing);
	background-color:var(--green);
	border-color:var(--green);
	color:var(--dark-blue);
	height:50px;
	align-content:center;
	width:100%
}

.fprd form select {}

.fprd form label {
	/*seems daft to display a label for an input that is obvious*/
	display: none;
}

.fprd button {
	display:inline-block;
	vertical-align:middle;
	font-weight:600;
	padding: .5em .75em;
}





/* Wishlist/Savefor later on fprd
------------------------------------------------------- */
.sfl{
	grid-area:unset;
	position:absolute;
	top:.5em;
	right:.5em;
	z-index:1;
}

.sfl .submit {
	border:0;
	padding:0.125em;
	width:2em;
	line-height:1;
	background-color:var(--white);
}

/* Email when in stock
------------------------------------------------------- */
.fprd .ewis {
	grid-area: buy-pane;
	margin: 0;
	padding: 0 .5rem;
}

/* fprd adverts
------------------------------------------------------- */
.fprd.add{
	display:block;
	position:relative;
}

.fprd.add .bnr{
	width: 100%;
	height:100%;
	object-fit: cover;
	color:var(--white);
}

.fprd.add .bnr picture,
.fprd.add .bnr img{
	width: 100%;
	height:100%;
	object-fit: cover;
	border-radius:1em;
}

.fprd.add .toi{
	position:absolute;
	top:1em;
	padding:2em;
}
.fprd.add h3{
	--heading-color:var(--white);
	font-size:40px;
	position:relative;
	z-index:1;
	margin-bottom:2rem;
}


/* -------------------------------------------------------------------------------------
=Client Specific Stylings 
------------------------------------------------------------------------------------- */

.msgpnl  ul{
	list-style:none;
	background-color:var(--off-white);
	padding:1em;
}
/* ------------------------------------------------------------------------------------
        SCREEN - Doors and Fittings 2017
        3768320 : 4816896
        Filename : jquery_menu.css
        Last Updated : 24. 08. 2017
        Copyright : (c) 2017 Etail Systems Ltd
        Author : Etail Systems Ltd
        Web : http://www.etailsystems.com
		
	Table of Contents
		01.	=Tabs   
		02. =Dropdown   
		03. =Hacks

		Colors Used;
		Dark-Grey #605e5e
		light-Grey #eeecec
		AlmostBlack #0d0d0d
		Offer/Alert-Red #d94927
		
	
------------------------------------------------------------------------------------- */

#pt  .dept{
    display:inline-block;
    vertical-align:top;
    color:#fff;
    position: relative;
    width:100%;
    background-color:#8d8d99; 
}

#pt  .dept .bt,
#pt  .dept .bb{
    display: none;
}

#pt  .dept .bc{
	width:100%;
	text-align:center;
    background-color: transparent;
}

#pt .dept ul#jnav{
    display:inline-block;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    z-index: 1001;
    width:100%;
}

#pt .dept ul#jnav li{
    display:inline-block;
}
#pt .dept ul#jnav li.nav:first-child,
#pt .dept ul#jnav li.navcurr:first-child{
	font-weight:600;
}

#pt .dept ul#jnav li.nav:after,
#pt .dept ul#jnav li.navcurr:after{}

#pt  .dept ul#jnav li.nav:last-child::after{
	content:"";
}

#pt  #jnav li{
    padding: 0px 0px;
}

#pt  #jnav li.pipe{
}


/***********************************************************************/
/* =Tabs                                                                */
/***********************************************************************/

#pt  #jnav li.nav a,
#pt  #jnav li.navcurr a {
	text-align: center;
	font-weight:600;
	font-size: 1.125em;
	display: inline-block;
	text-decoration: none;
	padding: 1em 1.5em;
	/* margin:0 .5em; */
}

#pt  #jnav li.nav a:hover,
#pt  #jnav li.navcurr a:hover{
	background-color:#f3f4f6;
	color:#3d4146;
	text-decoration:underline;
}

#pt  #jnav li.nav:hover,
#pt  #jnav li.navcurr:hover {
}

#pt  #jnav li.navcurr a:hover {}

#pt  #jnav .navleft,
#pt  #jnav .navright,
#pt  #jnav .navleftcurr,
#pt  #jnav .navrightcurr{
    display: none;
}

/***********************************************************************/
/* =Dropdown                                                           */
/***********************************************************************/
#pt  #jnav li.nav ul.snav,
#pt  #jnav li.navcurr ul.snav{
    position: absolute;
    background-color:#f3f4f6;
    text-align:center;
    display: none;
    padding: 0;
    -webkit-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
    -moz-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
    box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
    width: 240px;
    margin:0;
}


#pt  #jnav li.nav ul.snav li,
#pt  #jnav li.navcurr ul.snav li{
    position: relative;
    display: inline-block;
    margin: 0;
    vertical-align:middle;
    width: calc(100% - 1em);
    margin:.5em;
    border-bottom:1px #3d4146 solid;
    padding-bottom:.5em;
}

#pt  #jnav li.nav ul.snav li:last-child,
#pt  #jnav li.navcurr ul.snav li:last-child
{
	border:none;
}


/***********************************************************************/
/* =Slide out from dropdown                                            */
/***********************************************************************/
#jnav li.navcurr ul.snav li ul.snav,
#jnav li.nav ul.snav li ul.snav{}

#pt  #jnav li.nav ul.snav li.depts,
#pt  #jnav li.navcurr ul.snav li.depts{}

#pt  #jnav li.nav ul.snav li a,
#pt  #jnav li.navcurr ul.snav li a{
	font-size:1em;
	font-family:inherit;
	text-transform:none;
	display:inline-block;
	vertical-align:middle;
	text-align:left;
	color:#090909;
}

#pt  #jnav li.nav ul.snav li a.deptIcon,
#pt  #jnav li.navcurr ul.snav li a.deptIcon{
	display:inline-block;
	vertical-align:middle;
	margin:0;
	padding:0 1em;
	width:60px;
	height:60px;
	display:table-cell;
}

#pt  #jnav li.nav ul.snav li a.deptIcon img,
#pt  #jnav li.navcurr ul.snav li a.deptIcon img{
	vertical-align:middle;
	/* width:60px !important; */
	/* height:60px !important; */
	margin:auto;
}

#pt  #jnav li.nav ul.snav li a.deptLink,
#pt  #jnav li.navcurr ul.snav li a.deptLink{
	display:table-cell;
	vertical-align:middle;
	margin:0;
	padding:0;
	max-width:calc(100% - 60px);
	word-wrap: break-word;
}

#pt  #jnav li.nav ul.snav li a:hover,
#jnav li.navcurr ul.snav li a:hover{
	text-decoration: underline;
	text-decoration-color:#383838
}

/* Banners */
#pt  #jnav li.nav ul.snav li.bnrs,
#pt  #jnav li.navcurr ul.snav li.bnrs{}

#pt  #jnav li.nav ul.snav li.bnrs .bnr,
#pt  #jnav li.navcurr ul.snav li.bnrs .bnr{}

#pt  #jnav li.nav ul.snav li.bnrs .bnr a,
#pt  #jnav li.navcurr ul.snav li.bnrs .bnr a{}

/* Level 1 dept header */
#pt  #jnav li.nav ul.snav li.depts a,
#pt  #jnav li.navcurr ul.snav li.depts a{
	width:auto;
}

#pt  #jnav li.nav ul.snav li.depts a.l1,
#pt  #jnav li.navcurr ul.snav li.depts a.l1{
	/*remove the padding that is inherited from the top level tabs */
	padding:0;
	color:#343d46;
}

#pt  #jnav li.nav ul.snav li.depts a.l1:hover,
#pt  #jnav li.navcurr ul.snav li.depts a.l1:hover{
	text-decoration-color:#2c1a30;
}

/* Level 2 depts */
#pt  #jnav li.nav ul.snav li a.l2,
#pt  #jnav li.navcurr ul.snav li a.l2{
	font-size:1em;
	color:#2c1a30;
	font-family: 'Playfair Display';
	/*remove the padding that is inherited from the top level tabs */
	padding:0;
}

#pt  #jnav li.nav ul.snav li a.l2:hover,
#pt  #jnav li.navcurr ul.snav li a.l2:hover{
	text-decoration-color:#343d46;
}

#pt  #jnav li.nav ul.snav li.depts a:hover,
#pt  #jnav li.navcurr ul.snav li.depts a:hover{}

#pt  #jnav li.nav ul.snav li.depts a.seeall{
    cursor:pointer;
}

#pt  #jnav li.nav ul.snav li.depts a.seeall:hover{}

#pt  .dept .bt,
#pt  .dept .bb{}

#pt  .dept ul{
    list-style-type: none;
    position: relative;
}

#pt  #jnav li:first-child {}
#pt  #jnav li:last-child {}

#pt  #jnav li.nav ul.snav li,
#pt  #jnav li.navcurr ul.snav li{
    vertical-align:top;
}

#pt  #jnav li.nav ul.snav li.alldepts,
#pt  #jnav li.navcurr ul.snav li.alldepts{}

#pt  li.alldepts ol{
    /*depts are in ol not ul */
    list-style-position:inside;
}

#pt  #jnav li.nav ul.snav li.alldepts li.depts,
#pt  #jnav li.navcurr ul.snav li.alldepts li.depts{
    display:inline-block;
    list-style-position:inside;
    margin:0;
    padding:0;
    text-align:left;
    height: auto;
}

#pt  #jnav li.nav ul.snav li.prods,
#pt  #jnav li.navcurr ul.snav li.prods{
    /*may need to sort out other widths as .fprd is set elsewhere */
}

#pt  #jnav li.nav ul.snav li.prods .fprd {}
#pt  #jnav li.nav ul.snav li.prods .fprd a {}
#pt  #jnav li.nav ul.snav li.prods .fprd a:hover {}
#pt  #jnav li.nav ul.snav li.prods .fprd .fprdtitle a {}
#pt  #jnav li.nav ul.snav li.prods .fprd .fprdtitle a:hover {}
#pt  #jnav li.nav ul.snav li.prods .fprd h5.clientref {}
#pt  #jnav li.nav ul.snav li.prods .fprd .packsize {}
#pt  #jnav li.nav ul.snav li.prods .fprd .price {}
#pt  #jnav li.nav ul.snav li.prods .fprd .price h6 {}
#pt  #jnav li.nav ul.snav li.prods .fprd form {}

#pt  #jnav li.nav ul.snav li.arts,
#pt  #jnav li.navcurr ul.snav li.arts {
    display: inline;
    width:initial;
    height:auto;
}

#pt  #jnav li.nav ul.snav li.arts a,
#pt  #jnav li.navcurr ul.snav li.arts a{
}

#pt  #jnav li.nav ul.snav li.arts a img,
#pt  #jnav li.navcurr ul.snav li.arts a img{
	display:block;
}

#pt  #jnav .art.menuArt {}
#pt  #jnav li.nav ul.snav li.arts h3{}
#pt  #jnav .art.menuArt p {}
/* ------------------------------------------------------------------------------------
        SCREEN - Doors and Fittings 2020
        3768320 : 4816896
	Filename : product.css
	Last Updated : 19. 06. 2020
	Copyright : (c) 2020 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com
		
Table of Contents
    01.	=Product Panels   
    02. =Typography 
    03. =Tab Panel 
    04. =Imagery 
    05. =Buy pane  
    06. =Buy pane form  
    07. =Super Attributes 
    08. =Associated and Related products  
    09. =Recommended products - Buy option 
    10. =buytogether
    11. =Flags / Files
    12. =Videos 
    13. =Wishlist
    14. =Social bookmarks pane   
    15. =Feefo 
    16. =Hacks

------------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------------
=Product Panels   
------------------------------------------------------------------------------------- */

#pi{
    float: left;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

#pi .top{
    position:absolute;
    top:0;
    right:0;
    width:200px;
    z-index:1000;
}

#pi .main{
    float:left;
    width: 100%;
    margin-right:1em;
    position:relative;
}

#pi .left{
    float: left;
    width: 524px;
    margin-right: 2em;
    padding: 0;
}

#pi .right{
    float: left;
    position: relative;
    width: 644px;
    padding: 0;
}

#pi .bottom{
   display:inline-block;
   /* text-align:center; */
   width:100%;
   margin-top:1em;
   /* border-top:1px #eeecec solid; */
}
/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */

/* Title
------------------------------------------------------- */

#pi .pititle{
	width: 428px;
	float:left;
	clear:both;
	margin-right:1em;
}
#pi .pititle h2{
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
    color:#0d0d0d;
}

/* Description panes 
------------------------------------------------------- */

#pi .delivery{
	display:inline-block;
	border-top:1px #e3e3e3  solid;

	padding-top:.5em;
	
}


#pi .pidesc{
    float:left;
    width:calc(100% - 2em - 2px);
    /*removed the below because pidesc is writen out regardless of whether the product has any data entered against it */
    /* border:1px #d9e1e6 solid; */
    /* padding:1em; */
    /* -webkit-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75); */
    -moz-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
    /* box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75); */
}

#pi .pidesc h2[itemprop="name"],
#pi .pidesc h4[itemprop="description"]{
	display:none;
}
#pi .delivery h3{
	display:none;
}
#pi .pidesc p,  
#pi .delivery p{}
#pi .pidesc ul{}
#pi .pidesc li{}


/* direct despatch */
#pi .pidesc.desp h5{
	/* display:none; */
	font-size:0.938em;
	display:inline;
	color:#66666e;
}
#pi .pidesc.desp p{
	display:inline;
    font-size: 0.938em;
    color: #949498;
}

/* Extra Description 
------------------------------------------------------- */
#pi .pidescx{
	width:100%;

	float:left;
	border-bottom:2px #eef2f3 solid;
	padding-bottom:1em;
	margin-bottom:.5em;
}

/*because of the insistance of using inline styles!*/
#pi .pidescx ul{
    list-style-type:none !important;
    font-size:initial !Important;
    margin-left:0 !Important;
}


#pi .pidescx ul li{
   list-style: none;
   line-height:1;
   font-size: 1em;
}

/* Brand and Manufacturer  
------------------------------------------------------- */

#pi .brandmanu.brand{
	width: 428px;
	float:left;
	clear:both;
	margin-right:1em;
	margin-bottom:1em;
	text-transform:uppercase;
}

#pi .brandmanu.brand a{
	display:block;
	color:#49708b;
	font-size:0.875em;
}


#pi .brandmanu.brand img{
}

#pi .brandmanu.model{
	/* text-transform:uppercase; */
}

#pi .brandmanu h5{}
#pi .brandmanu h6{}
#pi .brandmanu p,
#pi .brandmanu a{}
#pi .brandmanu.brand h5{
    display: none;
}





#pi .brandmanu.model{
	width: 428px;
	float:left;
	clear:both;
	margin-right:1em;
	margin-bottom:1em;
	/* text-transform:uppercase; */
}
#pi .brandmanu.clientref{
	width: 428px;
	float:left;
	clear:both;
	margin-right:1em;
	margin-bottom:1em;
	/* text-transform:uppercase; */
}


#pi .brandmanu.model h5,
#pi .brandmanu.clientref h5{
	display:inline-block;
	width:100px;
	vertical-align:middle;
	color:#49708b;
	font-size:0.875em;
	margin-right:1em;
}

#pi .brandmanu.model h6,
#pi .brandmanu.clientref h6{
	display:inline-block;
	vertical-align:middle;
	font-size:0.875em;
	font-weight:normal;
}


/* Telephone orders   
------------------------------------------------------- */

#pi .piphone{}
#pi .piphone h4{}
#pi .piphone h5{}
#pi .piphone p{}



/* -------------------------------------------------------------------------------------
=Tab Panel 
------------------------------------------------------------------------------------- */

#pm #pi #pi_wrapper{
    float:left;
    width:100%;
	-webkit-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
    -moz-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
    box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
}

#pm #pi ul.pi_tabs{
    display:inline-block;
    float:left;
    width:100%;
    cursor:pointer;
}

#pm #pi ul.pi_tabs li{
    float:left;
    font-size:1em;
    font-weight:600;
    padding: 1em;
    margin-right: 0.25em;
    text-align:center;
    border:1px #ebecee solid;
    background-color:#ebecee;
}

#pm #pi ul.pi_tabs li.selected{
	border:1px #d9e1e6 solid;
	border-bottom: 1px #fff solid;
	background-color:#fff;
	color:#0d0d0d;
	z-index:99999999;
	font-weight:600;
}
#pm #pi ul.pi_tabs li:last-child{}

#pm #pi .pi_tab_content{
    float:left;
    width: 610px;
    min-height: 140px;
    padding: 0 1em;
    /*overflow-y:scroll;
    overflow-x:hidden;*/
    border:1px #d9e1e6 solid;
    /* border-bottom:none;*/
}

#pm #pi .pi_tab_content h2{
    font-size:1.2em;
}
#pm #pi .pi_tab_content h3,
#pm #pi .pi_tab_content h4,
#pm #pi .pi_tab_content ul{
    
}
#pm #pi .pi_tab_content p{
	padding:.5em 0;
	font-size:0.938em;
}
#pm #pi .pi_tab_content a{}
#pm #pi .pi_tab_content a img {}

#pm #pi .pi_tab_content ul ,
#pm #pi .pi_tab_content ol{
	margin:1em 2em;
}
#pm #pi .pi_tab_content ul li,
#pm #pi .pi_tab_content ol li{

}

#pm #pi .pi_tab_content ul li{
    list-style: disc;
    font-size:0.938em;
}

/* -------------------------------------------------------------------------------------
=Imagery 
------------------------------------------------------------------------------------- */

#pi .piimg{
    border: solid 1px #dbdfe1;
}
#pi .piimg img{
	margin:0 !important;
}



#pi .piimg p{
    display: none;
}

#pi .piimgx{}

/* If image not aligning centrally */
#pi .piimg a{
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* Gallery
------------------------------------------------------- */

#pi .gallery{
    float:left;
    width:100%;
    text-align:left;
    margin:.5em 0;
}

#pi .gallery h4{
    display: none;
}

#pi .gallery .piimg_large{
    width:83px;
    display:inline-block;
    margin:1em;
}

#pi .gallery .piimg_large img{
    width:100%;
    height:auto;
}
#pi .gallery .piimg_large a{}

/* Main Image Zoom
------------------------------------------------------- */

/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens{
    border: 1px solid #888;
    margin: -2px; /* Set this to minus the border thickness. */
    background-color: #fff;
    cursor: move;
}

/* This is for the title text. */
.cloud-zoom-title{
}

/* This is the zoom window. */
.cloud-zoom-big{
    border: 1px solid #ccc;
    overflow: hidden;
    margin-top: -1px;
    margin-left: -7px;
    background-color:#fff;
}

/* This is the loading message. */
.cloud-zoom-loading{
    position: absolute;
    top: 0;
    margin: 0;
    color: white;
    background: #222;
    padding: 3px;
}
   
/* -------------------------------------------------------------------------------------
=Buy pane  
------------------------------------------------------------------------------------- */

#pi .pibuy{
	width: 100%;
	display:inline-block;
	vertical-align:bottom;
	/* padding-top:1em; */
	margin-bottom: 1em;
}

#pi .pibuy h6{
	font-family: 'Open Sans', sans-serif;
}
#pi .pibuy .bt{}
#pi .pibuy .bc{}
#pi .pibuy .bb{}

#pi .pibuy .bc .title{
    display:none;
}

/* pricing info
------------------------------------------------------- */
#pi .pibuy .bc .price,
#pi .pibuy .bc .offer,
#pi .pibuy .bc .prevprice,
#pi .pibuy .bc .rrp,
#pi .pibuy .bc .trade,
#pi .pibuy .bc .saving{
	display:inline-block;
	margin-right:1em;
}

/*normal price */
#pi .pibuy .bc .price {
	display:none;
}
#pi .pibuy .bc .price h6{
    color:#4b738e;
    font-size:1.5em;
} 
#pi .pibuy .bc .price label{
    display:none;
}
#pi .pibuy .bc .price span{} 

/*rrp price */
#pi .pibuy .bc.rrp {}
#pi .pibuy .bc .rrp h6{}
#pi .pibuy .bc .rrp label{}
#pi .pibuy .bc .rrp span{} 

/*offer price */
#pi .pibuy .bc .offer {
	color:#d94927;
	}
#pi .pibuy .bc .offer h6{}
#pi .pibuy .bc .offer label{} 
#pi .pibuy .bc .offer span{} 

/*previous price (goes with offer) */
#pi .pibuy .bc .prevprice {
	color:#4b738e;
}
#pi .pibuy .bc .prevprice h6{
	text-decoration: line-through;
	text-decoration-color:#d94927;
}
#pi .pibuy .bc .prevprice label{}
#pi .pibuy .bc .prevprice span{} 

/*offer price */
#pi .pibuy .bc .saving {
	color:#a1c327;
}
#pi .pibuy .bc .saving h6{}
#pi .pibuy .bc .saving label{}
#pi .pibuy .bc .saving span{}  

/*trade price */
#pi .pibuy .bc .trade {}
#pi .pibuy .bc .trade h6{}
#pi .pibuy .bc .trade label{}
#pi .pibuy .bc .trade span{} 

/* Messages */
#pi .pibuy p{}
#pi .pibuy h4{}
#pi .pibuy h5{}
#pi .pibuy p.p_stock{}


/* stock */
#pi .pibuy .stock{
    font-size:.8em;
}


/* -------------------------------------------------------------------------------------
=Buy pane form  
------------------------------------------------------------------------------------- */

#pi .pibuy form#buy_form{
    float:left;
    width:100%;
    margin-top:1em;

}
/*to do with the next day doors*/
#pi .pibuy form#buy_form div.attr,
#pi .pibuy form#buy_form div.attrqty{
	/* display:inline-block; */
	/* vertical-align:middle; */
	/* margin-top: 1.5em; */
	/* position:relative; */
}

#pi .pibuy form#buy_form div.attr .qtyinput,
#pi .pibuy form#buy_form div.attrqty .qtyinput{
	display:inline-block;
	vertical-align:middle;
}
/* quantity input */
.attrqty .qtyinput{
	display:inline-block;
	vertical-align:middle;
	margin:.5em;
}

/*hide quantity label*/
.attrqty .qtyinput label{
	display:none;
}
.attrqty .qtyinput #skuqty{
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	padding:.5em;
	/* margin:.5em; */
}

/*increase/decrease buttons */
.attrqty .qtyinput  button{
	display:inline-block;
	vertical-align:middle;
	border:1px #735e5d solid;
	color:#735e5d;
	font-weight:600;
	font-size:1.3em;
	padding:.25em .5em;
	background-color:#fff;
	cursor:pointer;
}

.attrqty .submit{
	/* outline:1px red solid; */
	height: 36px;
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	padding:0;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	border:none;
}


#selectResponse{
	position:absolute;
	top: -1.5em;
	left:0;
	font-size:.813em;
	font-weight:600;
	color:red;
}

#pi .pibuy form#buy_form div.attr .attritem{}
#pi .pibuy form#buy_form div.attr .attritem .multiselect{}
#pi .pibuy form label{}

.sa_validator /* Shouldn't be visible. AL */
{
    display: none;
}


/* to do with the next day doors and html structure */
#buy_form .fixedpane.initial label{
	display:inline-block;
	font-weight:600;
	padding: 1em .5em;
	background-color:#f3f4f6;
	width:calc(100% - 1em);
}
#buy_form .fixedpane.initial select{
	margin-left:.5em;
}



#pi .pibuy form div.attr label{
}
#pi .pibuy form div.attrqty label{
    display:none;
}
#pi .pibuy form div.attr label#selectResponse{}
#pi .pibuy form input,
#pi .pibuy form select,
#pi .pibuy form textarea{}
#pi .pibuy form select{
	margin:1em;
	margin-left:0;
}
#pi .pibuy form .inputtext,
#pi .pibuy form .textarea{}
#pi .pibuy span.chars{
	font-size:.8em;
}
#pi .pibuy .submit{
    font-weight:600;
    font-size:0.75em;
    padding:0.8em 1em;
    border: none;
    text-align: center;
    text-transform: uppercase;
    border-color:inherit;
    cursor:pointer;
    border-radius:.5em;
    color:#fff;
    border:1px #a1c327 solid;
    background-color:#a1c327;
}

#pi .pibuy .submit#smplreq{
	margin-left:1em;
    font-weight:600;
    font-size:0.75em;
    padding:0.8em 1em;
    border: none;
    text-align: center;
    text-transform: uppercase;
    border-color:inherit;
    cursor:pointer;
    border-radius:.5em;
    color:#605e5d;
    border:1px #ebecee solid;
    background-color:#ebecee;
}


#pi .pibuy .submit:hover{
	color:#a1c327;
	background-color:transparent;
	text-decoration:none;
	border:1px #a1c327 solid;
}

#pi .pibuy #bspsubmit.submit{}

#pi .pibuy .curr{
    display:none;
}

#pi .dynprice{
	/* position:absolute; */
	/* right: 116px; */
	/* bottom: 389px; */
	margin-bottom:1em;
	}

#pi .dynprice p{
	color:#4b738e;
	font-size:1.5em;
	font-weight:600;
}

/* Product Personalisation info
------------------------------------------------------- */
#pi .pibuy form .pers{
	background-color:#eef2f3;
	padding:.5em;
	margin-bottom:1em;
}


#pi .pibuy form .pers li{
	margin-bottom:.5em;
}
#pi .pibuy form .pers li:last-child{
	margin-bottom:0;
}

#pi .pibuy form .pers label{
	width:100px;
	display:inline-block;
}
#pi .pibuy form .pers input.inputtext{
	width:270px;
	margin-right:.5em;
}


#pi .pibuy form .pers span.chars{

}

#pi .pibuy form .pers span{
		font-size:.8em;
}

/* -------------------------------------------------------------------------------------
=Super Attributes    
------------------------------------------------------------------------------------- */

#buy_form .fixedheader,
#buy_form .header{
	font-weight:600;
	padding: 1em .5em;
	background-color:#f3f4f6;
}


/*hack to do with a blank field - see made to measure doors */
#buy_form .fixedheader.initial{
	background:none;
	padding:0;
}

#buy_form .fixedpane{
	/*so we can position the help icon */
	position:relative;
	/* padding:1em; */
	border:1px #f3f4f6 solid;
	border-top:0;
}

#sa_pnl_product_not_found{
	display:none;
}

#pi .pibuy form#buy_form .cls_superattrribute label.sa_name {
	/*bit of a problem here, due to the way the code is written out, 
	hiding this also hides a help icon that may be wanted
	code improvement needed if help icons are needed to be shown*/
}

#pi .pibuy form#buy_form .cls_superattrribute{
	/* margin-bottom:1em; */
	position:relative;
	padding: 1em;
	margin:0;
}

#pi .pibuy form#buy_form .cls_superattrribute .bc table{}
#pi .pibuy form#buy_form .cls_superattrribute .bc table .sa_left_cell_type_1,
#pi .pibuy form#buy_form .cls_superattrribute .bc table .sa_right_cell_type_1{}

#pi .pibuy form#buy_form .cls_superattrribute label.sa_name{
	font-weight:600;
	display:none; /* because we double stuff up in the width/height bit for doors/drawers */
}

#pi .pibuy form#buy_form .cls_superattrribute .att_X,
#pi .pibuy form#buy_form .cls_superattrribute .att_Y{
	display:inline-block;
	/* width: 50%; */
	/* margin:0.5em; */
	margin-left:0;
}

#pi .pibuy form#buy_form .cls_superattrribute .att_X label,
#pi .pibuy form#buy_form .cls_superattrribute .att_Y label{
	/* min-width: 100px; */
	display:inline-block;
	margin-right:1em;
	margin-bottom:.4em;
	font-weight:600;
}


#pi .pibuy form#buy_form .cls_superattrribute .calc_price{
	display:inline-block;
	vertical-align:middle;
	margin:0.5em;
	/* filter:invert(100); */
}

.sa_right_cell_type_5 div{
	display:inline-block;
}

.sa_validator{
	color:red;
	font-size:.813em;
	font-weight:600;
}

#pi .pibuy form#buy_form .cls_superattrribute .submit{
    font-weight:normal;
    font-size:1em;
    padding:0;
    border: none;
    text-align: center;
    text-transform: uppercase;
    border-color:inherit;
    cursor:pointer;
    border-radius:0;
    color:#000;
    border:none;
    background-color:transparent;
}

#pi .cls_superattrribute .inputtext_short{
    width: 100px;
    padding: 2px;
}

#pi .cls_superattrribute .sa_error{
	vertical-align:top;
}



#pi .pibuy form#buy_form .attributeTypePrice_Matrix_Calculator {
	background-color:#f2f9f9;
	padding:1em;
}

#pi .pibuy form#buy_form .attributeTypeRadio_button li {
	display:inline-block;
	/* margin-right: 1em; */
}


#pi .pibuy form#buy_form .attributeTypeRadio_button li ul  .radioholder img{
	display:inline-block;
	vertical-align:middle;
	margin:.25em;
	max-width:64px;
	height:auto	;
}

#pi .pibuy form#buy_form .cls_superattrribute img[id^="help"]{
	position:absolute;
	top: 0.5em;
	right: 0.5em;
}

/* specifics
------------------------------------------------------- */

/*attributeTypeVolume_Surface_Calculator
***************************************************************/
.cls_superattrribute.attributeTypeVolume_Surface_Calculator  {
	width:100%;
	/* border-bottom:1px #e3e3e3 solid; */
}

.cls_superattrribute.attributeTypeVolume_Surface_Calculator {
}

.cls_superattrribute.attributeTypeVolume_Surface_Calculator   .info.sa_name{
	/* display:none; */
	position:relative;
	left:-1em;
}

/*help icon needs to be placed differently for different items... */
.cls_superattrribute.attributeTypeVolume_Surface_Calculator    img[id^="help"]{
	position:absolute;
	display:inline-block;
	vertical-align:middle;
	right: .5em;
}

.cls_superattrribute.attributeTypeVolume_Surface_Calculator   .sa_ddl_content{
	display:inline-block;
	width:50%;
}

.volcalcdatavalli{
	width:100%;
	margin:1em 0;
}

.volcalcvalue{
	display:inline-block;
	vertical-align:middle;
	margin-right:1em;
	text-align:right;
	min-width: 1.6em;
	margin-bottom:1em;
	text-align:center;
}

#pi .pibuy form .volcalcvalue label{
	margin:0;
	font-weight:600;
}

.volcalcinput{
		display:inline-block;
		vertical-align:middle;
		margin-right: 0.5em;
		margin-bottom:1em;
}

.volcalcinput input{
	/* outline:1px red solid; */
	/* width: 152px; */
}

#pm .bc ul.accordion li.volcacldata{
	display:none;
}

/* attributeTypePrice_Matrix_Calculator 
***************************************************************/
.cls_superattrribute.attributeTypePrice_Matrix_Calculator {
	background-color:#f7f9f9;
	width:calc(100% - 2em);
	margin-bottom:1em;
}

.cls_superattrribute.attributeTypePrice_Matrix_Calculator .bc{
	padding:.5em;
}

/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypePrice_Matrix_Calculator  #saten_pnl_show img[id^="help"]{
	position:absolute;
	right: 1em;
	top:1em;
}

.cls_superattrribute.attributeTypePrice_Matrix_Calculator  .att_X label,
.cls_superattrribute.attributeTypePrice_Matrix_Calculator  .att_Y label{
	width:100%;
	font-weight:400;
}

.cls_superattrribute.attributeTypePrice_Matrix_Calculator  label{
	font-weight:600;
}




/* attributeTypeDimensions 
***************************************************************/
.cls_superattrribute.attributeTypeDimensions {
	background-color:#f7f9f9;
	width:100%;
	margin-bottom:1em;
	position:relative;
}

.cls_superattrribute.attributeTypeDimensions .bc{
		padding:.5em;
}
	
.cls_superattrribute.attributeTypeDimensions .width{
	display:inline-block;
	width:100%;
	border-bottom:2px #fff solid;
	margin-bottom:1em;
	position:relative;
}

.cls_superattrribute.attributeTypeDimensions .drop{
	display:inline-block;
	width:100%;
	position:relative;
}

.cls_superattrribute.attributeTypeDimensions .width label,
.cls_superattrribute.attributeTypeDimensions .width input,
.cls_superattrribute.attributeTypeDimensions .drop label,
.cls_superattrribute.attributeTypeDimensions .drop input{

	display:inline-block;
	vertical-align:middle;
	float:none;
	margin-bottom:1em;
	width:200px;
	margin-right:1em;
	font-weight:400 !important;;
}

/* due to lack of a decent structure... */
/* width */
.attributeTypeDimensions .width input:nth-of-type(1){
    position:absolute;
    left:0px;
    top:52px;
}

.attributeTypeDimensions .width label:nth-of-type(2){
    position:absolute;
    top:0;
    left: 216px;
}
.attributeTypeDimensions .width input:nth-of-type(2){
    position:absolute;
    top:52px;
    left:216px;
}

.attributeTypeDimensions .width label:nth-of-type(3){
    position:absolute;
    top:0;
    left: 433px;
}

.attributeTypeDimensions .width input:nth-of-type(3){
    position:absolute;
    top:52px;
    left: 433px;
}

/*drop */
.attributeTypeDimensions .drop input:nth-of-type(1){
    position:absolute;
    left:0px;
    top:52px;
}

.attributeTypeDimensions .drop label:nth-of-type(2){
    position:absolute;
    top:0;
    left: 216px;
}
.attributeTypeDimensions .drop input:nth-of-type(2){
    position:absolute;
    top:52px;
    left:216px;
}

.attributeTypeDimensions .drop label:nth-of-type(3){
    position:absolute;
    top:0;
    left: 433px;
}

.attributeTypeDimensions .drop input:nth-of-type(3){
    position:absolute;
    top:52px;
    left: 433px;
}


/*hide the unneeded character count */
.cls_superattrribute.attributeTypeDimensions .width span,
.cls_superattrribute.attributeTypeDimensions .drop span{
	display:none;
}

/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeDimensions  img[id^="help"]{
	position:absolute;
	right: 1em;
	top:1em;
}

.cls_superattrribute.attributeTypeDimensions  .att_container{
	padding:.5em;
}

.cls_superattrribute.attributeTypeDimensions  .att_X label,
.cls_superattrribute.attributeTypeDimensions  .att_Y label{
	width:100%;
}

.cls_superattrribute.attributeTypeDimensions  label{
	display:inline-block;
	width:100%;
	margin-bottom:1em;
	font-weight:600;
}

/* attributeTypeRadio_button
***************************************************************/
.cls_superattrribute.attributeTypeRadio_button {
	/* width:calc(100% - 1em); */
	/* border-bottom:1px #e3e3e3 solid; */
	padding:1em 0;
}

.cls_superattrribute.attributeTypeRadio_button  .info.sa_name{
	display:none;
}

/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeRadio_button   img[id^="help"]{
	position:absolute;
	display:inline-block;
	vertical-align:middle;
	right: .5em;
}

.cls_superattrribute.attributeTypeRadio_button  .radiobuttondatali{
	display:inline-block;
	width:100%;
}

.cls_superattrribute.attributeTypeRadio_button  .radiobuttondatali ul{
	display:inline-block;
	vertical-align:middle;
	width:100%;
	margin:0;
}

.cls_superattrribute.attributeTypeRadio_button  .radiobuttondatali .radioholder{
	display:inline-block;
	vertical-align:middle;
	width:calc(50% - 1em);
}

.cls_superattrribute.attributeTypeRadio_button  .radiobuttondatali .radioholder input{
	display:inline-block;
	vertical-align:middle;
	width:2em;
}

.cls_superattrribute.attributeTypeRadio_button  .radiobuttondatali .radioholder label{
	display:inline-block;
	vertical-align:middle;
	width: calc(100% - 8em);
}

.cls_superattrribute.attributeTypeRadio_button  .radiobuttondatali .radioholder img{
	display:inline-block;
	vertical-align:middle;
	max-width:4em;
	height:auto;
}



/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry {
	width:100%;
	border-bottom:1px #e3e3e3 solid;
	padding:1em 0;
	position:relative;
}

/*hackity hack from lack of decent structure... */

.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry .bc div{
	display:inline-block;
}

.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry  .sa_name{
	position:relative;
	width:326px;
	display:inline-block;
	vertical-align:middle;
}

/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry   img[id^="help"]{
	position:absolute;
	right: 334px;
	top: 27px;
	/* outline:1px blue solid; */
}

.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry span{
	display:none;
}



/*attributeTypeDrop_down_list
***************************************************************/
.cls_superattrribute.attributeTypeDrop_down_list {
	width:100%;
	/* border-bottom:1px #e3e3e3 solid; */
	padding:1em 0;
}

.cls_superattrribute.attributeTypeDrop_down_list  .info.sa_name{
	position:relative;
	left:-1em;
}

/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeDrop_down_list   img[id^="help"]{
	position:absolute;
	display:inline-block;
	vertical-align:middle;
	right: .5em;
}

.cls_superattrribute.attributeTypeDrop_down_list  .sa_ddl_content{
	display:inline-block;
	width:50%;
}
/* for things with images... */

.cls_superattrribute.attributeTypeDrop_down_list  .sa_ddl_content .sa_swatch_panel{
/*except this isn't just written out when images are in use because people don't think! */
/*don't put stuff in here it breaks things you may not be seeing on other pages */
}

.cls_superattrribute.attributeTypeDrop_down_list  .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner{
	display:inline-block;
	vertical-align:top;
	width: 25%;
	text-align:center;
	margin-right:1em;
}



img.sa_img_swatch_selected{
	outline:2px #5b5e6b solid;
}


.cls_superattrribute.attributeTypeDrop_down_list  .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner img,
.cls_superattrribute.attributeTypeDrop_down_list  .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner span{
	width:100%;
}

.cls_superattrribute.attributeTypeDrop_down_list  .sa_ddl_content select{
	width:100%;
}

/* whatever this is we don't want it! */
.sa_pnl_product_popup_image_show{
	outline:1px red solid;
	display:none !important;
}


/*attributeTypeSingle_Image_Upload 
***************************************************************/
.cls_superattrribute.attributeTypeSingle_Image_Upload {
	width:100%;
	border-bottom:1px #e3e3e3 solid;
	padding:1em 0;
}


/*hackity hack from lack of decent structure... */

.cls_superattrribute.attributeTypeSingle_Image_Upload .bc + div{
	display:inline-block;
}


.cls_superattrribute.attributeTypeSingle_Image_Upload .progress{
	width:100%;
}

.cls_superattrribute.attributeTypeSingle_Image_Upload .progress + div	{
	text-align:right;
}

.cls_superattrribute.attributeTypeSingle_Image_Upload  .sa_name{
	position:relative;
	width: 301px;
	display:inline-block;
	vertical-align:middle;
}

/* no idea why this is done like this.. radio options with images*/

.sa_pnl_product_popup_image_show{

}


/* -------------------------------------------------------------------------------------
=Associated and Related products  
------------------------------------------------------------------------------------- */
#pi .prec,
#pi .pass,
#pi .prel,
#pi .pran{
	display:inline-block;
	width:100%;
	text-align:center;
}

#pi .prec h3,
#pi .pass h3,
#pi .prel h3,
#pi .pran h3{
	text-align:center;

}

#pi .prec label,
#pi .pass label,
#pi .prel label,
#pi .pran label{
		max-width: 55px;
}




#pi .bottom h3{
	padding: 10px;
	position:relative;
	background-color: #fff;
	text-align:center;
}


#pi .bottom  .carousel{
	margin-top:0;
	margin-bottom:5em;
}


#pi .bottom  .carousel .owl-prev{
    position:absolute;
    left:-2.5em;
    z-index:9999999;
}

#pi .bottom  .carousel .owl-next{
    position:absolute;
    right:-2.5em;
}


#pi .bottom  .carousel .owl-prev,
#pi .bottom  .carousel .owl-next {
    color: #a1c327;
    font-size: 1.5em;
    margin: .5em;
    padding: .5em;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
    font-weight:800;
    pointer-events:initial;
}

#pi .bottom  .carousel  .owl-prev:hover,
#pi .bottom  .carousel  .owl-next:hover {
    background: #a1c327;
    color: #FFF;
    text-decoration: none; 
}


#pi .bottom  .carousel .owl-controls{
}


/*assuming all things in bottom panel are related items 

#pi .prec > .bt,
#pi .pass > .bt,
#pi .prel > .bt,
#pi .pran > .bt {
    
    width: 100%;
    margin: 10px auto 0px;
    background-image: url('https://s3-eu-west-1.amazonaws.com/doorsfittings/4816896/i/bdr/line.png');
    background-repeat: repeat-x;
    background-position: center;
    text-align:center;
}
#pi .prec > .bt h3 ,
#pi .pass > .bt h3,
#pi .prel > .bt h3,
#pi .pran > .bt h3{
	display: inline-block;
	padding: 10px;
	margin: 0 auto;
	background-color: #fff;
}*/

#pi .prec .fprd,
#pi .pass .fprd,
#pi .prel .fprd,
#pi .pran .fprd{
	display:inline-block;
	vertical-align:top;
	padding:.5em;
	float:none;
	width: 274px;
	font-size:.850em;
	-webkit-transition: none;
	transition:none;
}

/*remove zoom in*/
#pi .prec .fprd:hover,
#pi .pass .fprd:hover,
#pi .prel .fprd:hover,
#pi .pran .fprd:hover{
    -webkit-transform: none;
        -ms-transform: none;
        transform: none;
}


#pi .prec .fprd .fprdimg,
#pi .pass .fprd .fprdimg,
#pi .prel .fprd .fprdimg,
#pi .pran .fprd .fprdimg{
	display:inline-block;
	vertical-align:middle;
	width:50%;
}


#pi .prec .fprd .fprdtitle,
#pi .pass .fprd .fprdtitle,
#pi .prel .fprd .fprdtitle,
#pi .pran .fprd .fprdtitle {
	display:inline-block;
	vertical-align:middle;
	width:50%;
	margin:0;
	height: initial;
	height: auto; /*max number of lines before display issues!*/
	text-align:center;
	color:#0d0d0d;
}



#pi .prec .fprd form,
#pi .pass .fprd form,
#pi .pran .fprd form,
#pi .prec .fprd form {
	width:100%;
	float:left;
}

#pi .prec .fprd:nth-child(4n),
#pi .pass .fprd:nth-child(4n),
#pi .prel .fprd:nth-child(4n),
#pi .pran .fprd:nth-child(4n){
	margin-right:0;
}





/* -------------------------------------------------------------------------------------
=Recommended products - Buy option  
------------------------------------------------------------------------------------- */


#pi .prec .sprd{}
#pi .prec .sprd form{}
#pi .prec .sprd form p{}
#pi .prec .sprd .img{}
#pi .prec .sprd .img img{}
#pi .prec .sprd a.lnk{}
#pi .prec .sprd .price,
#pi .prec .sprd .offer{}
#pi .prec .sprd .prevprice,
#pi .prec .sprd .price label,
#pi .prec .sprd .prevprice label,
#pi .prec .sprd .offer label{}
#pi .prec .sprd .price h6{}
#pi .prec .sprd h3{}




/* -------------------------------------------------------------------------------------
=buytogether
------------------------------------------------------------------------------------- */

.buytogether{
    float:left;
    width:100%;
}

.buytogether li.header{
	font-family: 'Abril Fatface', cursive;
    color:#605e5e;
    text-align:center;
    padding:.5em 0;
   	font-size:2em;
}

.buytogether  ul.boughtto{
	float:left;
	width:100%;
}

.buytogether  ul.boughtto li{
	width:90%;
	margin:.5em auto;
}

.buytogether ul.boughtto li.imgs{
    text-align:center;
    margin:0 auto;
}

.buytogether ul.boughtto li.imgs img{

	height:auto;
	margin:.5em;
	max-width:150px;
	width:22%;
	text-align:center;
	vertical-align:middle;
}

.buytogether ul.boughtto li.imgs span{
	width:5%;
	text-align:center;
	vertical-align:middle;
	font-size:2em;
}

.buytogether ul.boughtto li.prods{
	width: 70%;
	margin:0;
	margin-right:1em;
	text-align:left;
	padding-bottom:.25em;
	padding-left:.5em;
	padding-right:1em;
	float:left;
	border-right:2px #eef2f3 solid;
}

.buytogether ul.boughtto li.prods input,
.buytogether ul.boughtto li.prods span.descr,
.buytogether ul.boughtto li.prods span.price{
	float:left;
}

.buytogether ul.boughtto li.prods input{
	font-size:1em;
	width:10%;
	margin:0;
	display:inline-block;
	margin-top:.3em;
	line-height:1.5;
	
}
.buytogether ul.boughtto li.prods span.descr{
	/* font-weight:600; */
	width:70%;
}
.buytogether ul.boughtto li.prods span.price{
	float:right;
	color:#5a5859;
	font-weight:600;
	width:20%;
	text-align:right;
	float:left;
}


.buytogether ul.boughtto li.total
{
	position:relative;
	top: -2.5em;
	width: 24%;
	margin:0;
	float:left;
	text-align:center;
	font-size:1.2em;
}

.buytogether ul.boughtto li.total span{

}

.buytogether ul.boughtto li.btn{
	position:relative;
	top:-1.4em;
	width: 24%;
	margin:0;
	float:left;
	text-align:center;
	font-size:1.2em;
}


.buytogether ul.boughtto li.btn .submit{
  	float:left;
  	font-size:.8em;
  	background-color:#d94927;
  	display: inline-block;
  	text-transform:uppercase;
  	color:#fff;
  	border-radius:2em;
  	padding: .5em 1em;
  	width: auto;
  	border:1px #d94927 solid;
  	margin-bottom: .5em;
}




/* -------------------------------------------------------------------------------------
=Flags / Files
------------------------------------------------------------------------------------- */


#pi .flags{
	display:inline-block;
}

#pi .flags .flag{
	display:inline-block;
	margin-bottom:.5em;
}

/* Links, File & Flags panes   
------------------------------------------------------- */
#pi .pilinks, 
#pi .pifile{
	display:inline-block;
	width:100%;
}

#pi .piflags{
	display:inline-block;
}

#pi .piflags ul{
}

#pi .piflags li{
	display:inline-block;
	margin-bottom:.5em;
}

#pi .pilinks .bt, 
#pi .pilinks .bb, 
#pi .pifile .bt, 
#pi .pifile .bb, 
#pi .piflags .bt, 
#pi .piflags .bb{
    display: none;
}

#pi .pilinks .bc, 
#pi .pifile .bc, 
#pi .piflags .bc{
    float: left;
    border: none;
    width:100%;
}

#pi .pilinks ul li,
#pi .pifile ul li{
	font-size:0.938em;
	display:inline-block;
	margin-bottom:.5em;
	width:100%;
}
#pi .pilinks ul li a, 
#pi .pifile ul li a{}
#pi .pilinks ul li .linkimg, 
#pi .pifile ul li .linkimg{
	display:inline-block;
	vertical-align:middle;
	margin-right:1em;
}

#pi .pilinks ul li .linkimg img, 
#pi .pifile ul li .linkimg img{
	display:inline-block;
	vertical-align:middle;
	/* margin-right:1em; */
	width:1em;
	height:auto;
}

#pi .pilinks ul li a.lnk,
#pi .pifile ul li a.lnk{}
#pi .pilinks ul li.email a.lnk{
	color:#a1c327 ;
	padding-left:1.9em;
	display:inline-block;
	vertical-align:middle;
}

#pi .pilinks ul li.query a.lnk{
	/* background:url('https://s3-eu-west-1.amazonaws.com/doorsfittings/4816896/i/bdr/greyenvelope.png') no-repeat left center; */
	/* padding-left:1.9em; */
	cursor:pointer;
	display:inline-block;
	vertical-align:middle;
}


/* -------------------------------------------------------------------------------------
=Videos 
------------------------------------------------------------------------------------- */

#pi .youtube a{}

/* -------------------------------------------------------------------------------------
=Wishlist 
------------------------------------------------------------------------------------- */

#pi .pibuy form.wishlist{}
#pi .pibuy form.wishlist input.chkbox{}
#pi .pibuy form.wishlist label{}
#pi .pibuy form.wishlist .submit{}

/* -------------------------------------------------------------------------------------
=Social bookmarks pane    
------------------------------------------------------------------------------------- */
#pi .socbook{
	float:left;
	width:100%;
	text-align:center;
	margin-bottom:.5em;

}
#pi .socbook li{}

/* -------------------------------------------------------------------------------------
=Feefo 
------------------------------------------------------------------------------------- */

#pi #feefologohere{}

#pm #pi .pi_tab_content ul.feefo li{
    list-style: none;
    border-bottom: 1px solid #D2D2D2;
}

#pm #pi .pi_tab_content ul.feefo li:last-child{
    border-bottom: none;
}
:root{
		--font-awesome:	"Font Awesome 6 Pro";
		--heading-font: 'Playfair Display';
	--white:#fff;
	--text-font:'Lato';
	--spacing:1em;
}

#pm .form form ul li.signin{
	margin-bottom:.5em;
}

#pm .form form ul li.req{
	margin:.5em 0;
	color:#d17f85 ;
}

.deladd{
	margin:1em !important;;
}
label[for^="source"]{
	display:none !important;;
}

.terms h5{
	margin-top:1em;
	font-size:16px !important;
	display:inline-block;
	margin-right:1em;
}

.terms h5 input {
	display:inline-block;
	margin:.5em !important;

}

.chkflow #ptf{
	display:none;
}

/* -------------------------------------------------------------------------------------
=Basket - Checkout v5
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	display: grid;
	grid-template-columns: 6fr 3fr;
	grid-gap: 0;
	grid-column-gap: 2em;
	grid-template-areas: "breadcrumb breadcrumb"
		"header header"
		"lines totals"
		"lines shipping"
		"lines buttons"
		"lines voucher"
		
		"lines ."
		"art art"
		"prioritydelivery prompane"
		"standarddelivery prompane"
		". prompane";
	align-items: start;
	margin-bottom: 4rem;
}

#pm .bskt form {
	margin: 0 auto;
	padding: 0;
}

/* if basket is empty and user is in it */
.bskt .empty {}
.bskt .empty .header {}
.bskt .empty .total {}

/* Checkout Breadcrumb
------------------------------------------------------- */
.chkcrumb {
	grid-area: breadcrumb;
}

/* Basket header
------------------------------------------------------- */
#pm .bskt .header {
	margin:1em;
	text-align:center;
	grid-area: header;
}

#pm .bskt .header .icon{
	display:none;
}

#pm .bskt .header .title {
	display: block;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

#pm .bskt .header .title span {
	font-size: 1rem;
	font-weight: normal;
	color: var(--grey);
}

/* Basket Lines
------------------------------------------------------- */
#pm .bskt .alllines {
	grid-area: lines;
	max-height: 650px;
	/* padding: 1rem; */
	overflow-y: auto;
	border:1px solid #2c1a30;
	/* border-top: 8px #d17f85 solid; */
	background-color:#fff;
}

#pm .bskt .line {
	padding-bottom: 1em;
	/* margin-bottom: 1em; */
	align-items: start;
	display: grid;
	--image-width: 4rem;
	--description-width: 1fr;
	--qty-width: auto;
	--netprice-width: auto;
	--rem-width: auto;
	--total-width: 100px;
	grid-template-columns: var(--image-width) var(--description-width) var(--qty-width)  var(--total-width) var(--rem-width);
	grid-template-areas:
		"icon desc qty price rem"
		"icon desc . . . "
		"icon netprice . . ."
		"icon skuselect . . . ";
	border-bottom:1px solid #d5d6d6;
	grid-column-gap: 1rem;
}

/* Image */
#pm .bskt .line .prodimg {
	grid-area: icon;
}

#pm .bskt .line .prodimg img {
	margin: 0;
	max-width:100%;
	height:auto;
}

/* Product Info - in list form */
#pm .bskt .line .prodinfo {
	grid-area: desc;
	margin: 0;
	padding: 0;
}

#pm .bskt .line .prodinfo .surcharge {
	font-weight: 700;
}

#pm .bskt .line .prodinfo li {
	list-style: none;
	font-size: 12px;
	margin-left:.5em
}

#pm .bskt .line .prodinfo li img {
	margin: 0;
	max-width: 250px
}

#pm .bskt .line .prodinfo li.descr,
#pm .bskt .line .prodinfo li.sample{
	margin-left: 0;
	font-size: 20px;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	/* margin-bottom: var(--half-spacing); */
}

#pm .bskt .line .prodinfo li.lead {
	color: var(--info-color);
	font-weight: bolder;
}

#pm .bskt .line .prodinfo li.lead {
	color: var(--text-color);
	font-style: italic;
	font-weight: normal;
	margin: .5rem 0;
}

#pm .bskt .line .prodinfo li.lead span {
	display: inline-block;
	color: var(--navy);
	font-style: normal;
	border: 1px var(--navy) solid;
	padding: .25rem;
	border-radius: .25rem;
	margin-right: .5rem;
}

#pm .bskt .line .prodinfo li.lead span:before {
	font-family: var(--font-awesome);
	content: "\f00c";
	display: inline-block;
	font-size: 1em;
	margin-right: 1em;
}

/*product quantity */
#pm .bskt .lines .line .qty {
	grid-area: qty;
	align-self: center;
}
#pm .bskt .lines .line .netprice {
	grid-area: netprice;
	font-size:.725em;
	margin-left:.5em
}



#pm .bskt .lines .line .qty form {
	line-height: 1;
}

#pm .bskt .lines .line .qty label,
#pm .bskt .lines .line .qty #update{
	display:none;
}

#pm .bskt .lines .line .qty button {
	background: var(--white);
	border: 1px solid black;
	font-size:16px;
	padding: .5em;
	font-family: monospace;
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {
	border-right: 0;
}

#pm .bskt .lines .line .qty button.skuqtybsktadd {
	border-left: 0;

}

#pm .bskt .lines .line .qty input.inputtext {
	text-align: center;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	font-family: monospace;
		font-size:16px;
	margin:0;
	height:19px;
}

/* remove item */
#pm .bskt .line .rem {
	grid-area: rem;
	text-align: center;
	align-self: center;
}

#pm .bskt .line .rem input {
	font-family: var(--font-awesome);
	color: #d5d6d6;
	background-color: transparent;
	border: none;
	font-weight: 400;
}

/* if product is multi sku then show this in the same area as the quantity update */
#pm .bskt .lines .line .skuselect {
	grid-area: skuselect;
	align-self: end;
}

#pm .bskt .lines .line .skuselect select {
	margin: 0;
	font-size: small;
	width: auto;
}

/* remove item */
#pm .bskt .line .price {
	grid-area: price;
	text-align: center;
	font-family: var(--headtexting-font);
	font-weight: 600;
	align-self: center;
}

/* out of stock messages */
.oos {
	color: var(--error-color);
}

/* Basket Sample Lines
------------------------------------------------------- */
#pm .bskt .lines.sample {
	grid-area: samples;
}

/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal {
	/*why display this... we have this info in the totals area... */
	display: none;
	grid-area: basket-sub-total;
	text-align: right;
	font-size: 1.25em;
	margin-bottom: var(--spacing);
}

.prodsubtotal label {}

.prodsubtotal span {}

/* Delivery info
------------------------------------------------------- */
/* for free delivery messages */
#pm .bskt .header.freedel {
	grid-area: freedelivery;
	font-weight: 400;
	text-transform: none;
	font-size: 1em;
	padding: 0;
	display:none;
}

.header.delivery {
	/*doesn't exist but should be on the actual delivery header */
}

/* Shipping 
------------------------------------------------------- */
.shipping {
	grid-area: shipping;
	text-align:center;
}

.shipping .header{
	display:none;
}

.shipping  select{
	width: 299px;
	margin-bottom:1em;
}

.shipping ul {
	margin: 0;
	padding: 0;
}

.shipping ul li.ship {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: var(--half-spacing);
	display: grid;
	grid-template-columns: 4em 1fr;
}

.shipping ul li.ship input {
	margin: 0;
	padding: 0;
	margin-right: auto;
	font-size: 2em;
	-ms-transform: scale(1.5);
	/* IE 9 */
	-webkit-transform: scale(1.5);
	/* Chrome, Safari, Opera */
	transform: scale(1.5);
}

.shipping ul li.ship label {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 100px;
	font-weight: normal;
}

.shipping ul li.ship input[type="radio"]:checked+label {
	font-weight: 700;
}

.shipping ul li.ship label span {
	margin-left: var(--half-spacing);
	text-align: right;
}

.shipping form input, .shipping form h4 {
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--half-spacing);
}

.shipping form h4 {}

.shipping ul li.delivery {}

.shipping ul li.delivery .address h4{
	display:none;
}

.shipping ul li.delivery.deliveryto {
	display: block;
}

/*if only one country we show the country as a span - a bit redundant so hidden */
.shipping .delivery.deliveryto form span {}

.shipping ul li.delivery.collectstore {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "title title" "location location" "address options";
}

.shipping ul li.delivery.collectstore label {
	grid-area: title;
}

.shipping ul li.delivery.collectstore form {
	grid-area: location
}

.shipping ul li.delivery.collectstore.info:before {
	display: none;
}

.shipping ul li.delivery.collectstore p {
	padding: 0;
	margin: 0;
}

.shipping ul li.delivery.collectstore .address {
	margin-left: var(--spacing);
	font-size: small;
}

/*better code structure needed - is just a p if only one option is available*/
.shipping ul li.delivery.collectstore #serviceid, .shipping ul li.delivery.collectstore .address+p {
	grid-area: options;
}

/* Basket Totals
------------------------------------------------------- */
.bskttotals {
	grid-area: totals;
	text-align: center;
	padding: var(--spacing);
	display: grid;
	grid-template-areas: "subtotals" "discount" "discount2" "totals" ;
	background-color:var(--off-white);
	border:none;
}

.bskttotals .total {
	grid-row: total;
	text-align:center;
}

.bskttotals .total span {
	grid-area: totals;
	font-size: 2rem;
	font-weight: var(--heading-font-weight);
}

.bskttotals .total label {
	display: block;
	margin-bottom: var(--spacing)
}

.bskttotals .total span {
	display: block;
	width:100% !important;;
	margin-bottom: var(--half-spacing);
}

.bskttotals .subtotal {
	grid-area:subtotals;
	margin: 0 2rem;
	display: grid;
	grid-template-areas:
		"label total"
}

.bskttotals .subtotal+.subtotal {
	grid-area:discount;
	display: grid;
}
.bskttotals .subtotal+.subtotal+.subtotal {
	grid-area:discount2;
	display: grid;
}

.bskttotals .subtotal label {
	display: block;
	grid-area: label;
	text-align: left;
}

.bskttotals .subtotal span {
	display: block;
	grid-area: total;
	text-align: right;
	width:unset;
}

/* Vouchers
------------------------------------------------------- */
.vouchentryaccord, .vouchentry {
	grid-area: voucher;
	background-color: var(--off-white);
	padding: 0 1rem;
	text-align: center;
}

.vouchentryaccord ul, .vouchentry ul {
	list-style: none;
}

.vouchentryaccord li, .vouchentry li {
	list-style: none;
}

.vouchentryaccord li.pane {
	display: none;
}

#pm .bskt .vouchentryaccord .header {
	font-size: 1rem;
	border: none;
	border: 0;
	padding: 0;
	font-size: .825rem;
	text-decoration: underline;
	align-items:center;
	border:1px solid var(--navy);
	padding:1em;
}

#pm .bskt  .accordion .header.current {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom:0;
}

.vouchentryaccord .header img {
	width:1.5em;
}

#pm .ul.accordion .vouchentryaccord .pane, #pm .bskt ul.accordion .pane {
	padding: 1em;
	padding-top:0;
	display: none;
	border:1px solid var(--navy);
	border-top:0;
}

#pm .bskt ul.accordion li.pane ul {
	margin: 0;
}

.vouchentry ul.vouch {
	margin: 0;
	padding: 0;
	display: grid;
	grid-row-gap: .5em;
	grid-template-columns: 1fr 100px;
	grid-template-areas: "code submit"
}

.vouchentry .appliedpromovoucher {
	/* margin-top:1em; */
	padding: var(--half-spacing) var(--half-spacing);
	font-size: .725rem;;
}

.vouchentry .remove a {
	display: block;
	background-color: var(--navy);
	border-color: var(--navy);
	font-size: .725rem;
}

.remove input {
	width: 100%;
	display: block;
}

.vouchentry ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vouchentry ul li.info {
	grid-area: title;
	/*due to duplicate title when voucher applied */
	display: none;
}

.vouchentry ul li.vouchentry {
	grid-area: code;
}

.vouchentry ul li.vouchentry input {
	width: 100%;
	font-size:.725em;
}

.vouchentry .submit {
	grid-area: submit;
	background-color: var(--navy);
	border-color: var(--navy);
	margin-left: .5rem;
	font-size:.725em;
}

/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons {
	grid-area: buttons;
	text-align: center;
	padding: var(--spacing);
	background-color:var(--off-white);
	margin-bottom: 1rem;
	display:grid;
	grid-template-areas:"pay"
	"continue"
	"logos"
}

.bsktbuttons .startcheckout {
	grid-area: pay;
	margin-bottom: .5em;
}

.bsktbuttons .startcheckout a:before {
	content: "\f023";
	font-family: var(--font-awesome);
	margin-right: 1rem;
}

.bsktbuttons .startcheckoutcollect {
	grid-area: collect;
	margin-bottom: .5em;
}

.bsktbuttons .startcheckout a.btn {
	display: block;
	float:none;
	margin:0;
}

.bsktbuttons .clear {
	grid-area: empty;
}

.bsktbuttons .clear a.btn {
	display: block;
	margin-top: 1em;
}

.bsktbuttons .cont {
	grid-area: continue;
	/* display: none; */
}

.bsktbuttons .cont a.btn {
	display: block;
	font-size: .825rem;
	border: 2px var(--button-color) solid;
	background-color: transparent;
	color: var(--button-color);
}

#pm .bsktbuttons .art {
	grid-area: logos;
	margin-top:1em;
}
#pm .bsktbuttons .art ul{
	margin:0;
}
#pm .bsktbuttons .art li {
	display: inline-block;
	font-size:20px;
	margin: .5rem;
}
#pm .bsktbuttons .art li a{
	color:black;
}

.bsktbuttons .art h4 {
	font-family: var(--headingFont);
	font-size: 1em;
	font-weight: 700;
	text-transform: capitalize;
}

#pm .bskt .art#a128581638{
	grid-area:art;
}

/*promo content on basket - awful layout - why is this a ul?*/

#pm ul.prompane {
	grid-area: prompane;
	list-style: none;
	grid-gap: 0;
	grid-column-gap: 4em;
	margin: 0;
}

#pm ul.prompane li i {
	grid-area: icon;
	color: var(--navy)
}

#pm ul.prompane li span {
	grid-area: text;
	font-size: .825rem
}

/* delivery messages*/
.stddelinfo {
	grid-area: standarddelivery;
}

.priordelinfo {
	grid-area: prioritydelivery;
}

.priordelinfo, .stddelinfo {
	display: grid;
	border-radius: var(--border-radius);
	background-color: var(--off-white);
	padding: var(--spacing);
	margin-bottom: 1rem;
	grid-template-areas: "icon message price" "icon details .";
	grid-template-columns: 4rem 1fr 5rem;
	grid-column-gap: 2rem;
}

.priordelinfo img, .stddelinfo img {
	grid-area: icon;
}

.priordelinfo h4, .stddelinfo h4 {
	grid-area: message;
	margin: 0;
}

.priordelinfo h5, .stddelinfo h5 {
	grid-area: details;
	margin: 0;
	font-family: var(--text-font);
	font-weight: 400;
	font-size: .825rem
}

.priordelinfo p, .stddelinfo p {
	grid-area: price;
	margin: 0;
	font-weight: 700;
}

.ordertimer {
	font-size: .825rem;
}

#pm ul.prompane .returns {
	display: grid;
	grid-template-areas: "icon message ." "icon details . ";
	grid-template-columns: 4rem 1fr auto;
	grid-column-gap: 2rem;
	align-items: center;
}

#pm ul.prompane .returns img {
	grid-area: icon;
}

#pm ul.prompane .returns h4 {
	grid-area: message;
	margin: 0;
}

#pm ul.prompane .returns h5 {
	grid-area: details;
	margin: 0;
	font-family: var(--text-font);
	font-weight: 400;
	font-size: .825rem
}

/* -------------------------------------------------------------------------------------
=New Checkout Process - replaces Checkout v5 Accordion Option
------------------------------------------------------------------------------------- */

#pt.checkouttop {
	background:#fff;
	margin-bottom:2em;
}

#pt.checkouttop .ext {
	--site-max-width:1200px;
	display:grid;
	align-items:center;
	--breadcrumb-width: 1fr;
		--spacerwidth: calc((100% - var(--site-max-width)) / 2);
	grid-template-columns: var(--spacerwidth) 1fr var(--breadcrumb-width) var(--spacerwidth);
	grid-template-areas: ". logo breadcrumb .";

	
}

/* site logo */
#pt.checkouttop .ext .pbnr{
	grid-area:logo;
	margin:1em auto ;
}

#ptf .ext {
	padding:.25rem;
	display: grid;
	grid-template-areas:
		". message .";

}

#pt.checkouttop .ext .pane {
	grid-area: breadcrumb;
	text-align: center;
}

#pt.checkouttop .ext .pane li {
	display: inline-block;
	margin: 0;
	margin-right: 1em;
}

#pt.checkouttop .ext .pane li:last-child {
	margin-right: 0em;
}

#pt.checkouttop .ext .pane li:before {
	font-family: var(--font-awesome);
	content: "\f054";
	display: inline-block;
	font-size: 1em;
	margin-right: 1em;
}

#pt.checkouttop .ext .pane li:first-child:before {
	content: "";
	margin: 0;
	display: none;
}

.chksteps_prev, .chksteps_curr, .chksteps_next {
	text-transform: capitalize;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight)
}

.chksteps_prev {
	color: var(--grey)
}

.chksteps_curr {
	color: var(--text-color)
}

.chksteps_next {
	color: var(--light-grey)
}

/* Signin/guest pane
------------------------------------------------------- */
.page_checkoutsignin {}

.checkoutsignin .signin {
	width: 50%;
	margin: auto;
	display: grid;
	align-items: start;
	grid-template-columns: 1fr;
	grid-gap: 4em;
	grid-template-areas: "signin" "guest ";
}

.page_checkoutsignin .form#psign {
	grid-area: signin;
	width: auto;
}

.page_checkoutsignin .form#pguest {
	grid-area: guest;
	width: auto;
}

.page_checkoutsignin .form label {
	display: block;
}

.page_checkoutsignin form input,
.page_checkoutsignin form select {
	width: calc(100% - 2em);
}

.page_checkoutsignin form img{
	display:inline-block;
	vertical-align:top;
}




.page_checkoutsignin .form#psign .submit,
.page_checkoutsignin .form#pguest .submit {
	grid-column:1/-1;
	width:auto;
	padding: var(--half-spacing) var(--spacing);
	margin: auto;
}

.exstregfield {
	display: none;
}

.page_delivery, .page_checkout, .page_checkoutsignin, .page_delivery, .page_shipping, .page_payment {}

/* Address (delivery and invoice) 
------------------------------------------------------- */




.page_delivery h3, .page_checkout h3 {
	font-size: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}
.page_delivery form, .page_checkout form {
	display: grid !important;
	margin:auto!important;
	grid-template-columns: 6fr 3fr;
	grid-template-areas:
		"address summary"
		"address continue"
		"address .";
	grid-column-gap: 1rem;
}

#pm .page_delivery form input, .page_checkout form input, .page_delivery form select, .page_checkout form select {
	width: calc(100% - 2em);
	margin-right:0;
}

.page_delivery form img, .page_checkout form img{
	display:inline-block;
	vertical-align:top;
	margin-left:.25em;
}

.page_delivery form .terms, .page_checkout form .terms {}

.page_delivery form .terms h5, .page_checkout form .terms h5 {
	/* display: grid; */
	/* grid-template-areas:
		"checkbox text"; */
	/* grid-template-columns: 2rem 1fr; */
	/* align-items: center; */
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825rem;
	text-transform:none;
	letter-spacing:unset;
}

.page_delivery form .terms input, .page_checkout form .terms input {
	grid-area: checkbox;
	margin: 0;
	width:auto;
}

.page_delivery form .termsart, .page_checkout form .termsart {
	text-align: left;
	font-size: .825rem;
}

/*class needed on this ul!*/
.page_delivery #pm form>ul, .page_checkout #pm form>ul {
	grid-area: address;
	border:1px solid #2c1a30;
	/* border-top: 8px #d17f85 solid; */
	background-color:#fff;
	padding:1em;
	text-align:center;
}

.page_delivery #pm form>ul input, .page_checkout #pm form>ul input,
.page_delivery #pm form>ul select, .page_checkout #pm form>ul select{
	margin:.5em 0;
	width:320px;
	font-size:16px;
}

.page_delivery #pm form>ul input[type="checkbox"], .page_checkout #pm form>ul input[type="checkbox"]{
	width:auto;
	vertical-align:middle;
}

.page_delivery #pm form>ul input[type="checkbox"] + label, .page_checkout #pm form>ul input[type="checkbox"] + label{
	display:inline;
	vertical-align:middle;
	margin-left:.5em;
}

.page_delivery #pm form>ul li, .page_checkout #pm form>ul li{
	margin-bottom:.5em;
	width:400px;
	margin:auto;
	text-align:left;
	display:inline-block;
}

.page_checkout .subscribe{
	padding:1em;
}

.page_delivery .form li.info, .page_checkout .form li.info {
	display: none;
}

.page_delivery .form li label, .page_checkout .form li label {
	display: none;
}

.page_delivery .form li.reqmsg, .page_checkout .form li.reqmsg {
	color: var(--error-color);
	color:red;
	font-weight:bold;
	padding-top:1em;
	/* display:inline; */
}

.page_delivery .form li.req, .page_checkout .form li.req{
	font-size:small;
	margin:.5em 0;
}

#countryIdDel,
#countryId,
#source_7012352,
.page_delivery textarea, .page_checkout textarea{
	width:320px;
}

.page_delivery .chars, .page_checkout .chars{
	font-size:small;
	text-align:right;
}

.page_delivery .help, .page_checkout .help{
	font-size:small;
	dis
}

.page_delivery .submit, .page_checkout .submit {
	grid-area: continue;
margin-right:1em;
}

/*display corrections for same invoice as delivery address checkbox */
.page_delivery .form .deladd .chkbox {
	width: auto;
	margin-right: 1rem;
}

.page_delivery .form .deladd label {
	display: inline-block;
}

/*if member this shows */
.page_delivery li.chkbox {}

.page_delivery li.chkbox input {
	width: auto;
	margin: 0;
	margin-right: .5rem;
	display: inline-block;
	vertical-align: middle;
}

.page_delivery .chkbox .help {
	display: inline-block;
	vertical-align: middle;
}

.page_delivery form[name="delAddress"] {}

.page_delivery .remove {
	font-size: .825rem;
	color: var(--error-color)
}

/* Postcode Lookup
------------------------------------------------------- */
.page_delivery .form li .pclup, .page_checkout .form li .pclup {}
.page_delivery .form li .pclup label, .page_checkout .form li .pclup label, .page_delivery .form li .pclupdel label, .page_checkout .form li .pclupdel label {}
.page_delivery .form li label[for="txtPostCodeLookup"], .page_checkout .form li label[for="txtPostCodeLookup"], .page_delivery .form li label[for="ddlMultiAddress"], .page_checkout .form li label[for="ddlMultiAddress"] {
	display: none;
}

.page_delivery .form li .pclup input, .page_checkout .form li .pclup input, .page_delivery .form li .pclupdel input, .page_checkout .form li .pclupdel input {
	width: auto;
	display: inline-block;
}

.page_delivery .form li .pclup input.submit, .page_checkout .form li .pclup input.submit, .page_delivery .form li .pclupdel input.submit, .page_checkout .form li .pclupdel input.submit {}
.page_delivery .form li .pclup span.or, .page_checkout .form li .pclup span.or, .page_delivery .form li .pclupdel span.or, .page_checkout .form li .pclupdel span.or {
	display: none;
}

.page_delivery .form li .pclupdel, .page_checkout .form li .pclupdel {}
.page_delivery form[name="back"] {
	display: none !important;
}

/* Order Fulfilment/shipping
------------------------------------------------------- */
.page_shipping {}
.shipdel{
	width:400px;
	margin:auto;
}

.page_shipping .pmfull {
	margin: 0 auto;
	position: relative;
	width: calc(var(--site-max-width) / 2);
}

.page_shipping h3 {
	font-size: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.page_shipping select {
	width: 100%;
}

.page_shipping .service, .page_shipping .shippinginfo {
	margin: 1rem 0;

}
.page_shipping .deliveryinfo
{
		display:none;
}

.page_shipping .subtotal {
	margin: 1rem 0;
	display: grid;
	grid-template-areas: "label value";
	grid-template-columns: 1fr auto
}

.page_shipping .subtotal label {
	grid-area: label;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight)
}

.page_shipping .subtotal span {
	grid-area: value;
	text-align: right;
}

.page_shipping .cont a {
	display: block;
}

/* Payment
------------------------------------------------------- */
.page_payment {}

.page_payment #pm .bc{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "header header"
						 "payment summary"
						 ". summary"
						 "details summary";
	grid-column-gap: 4rem;
	position: relative;
}

.page_payment #pm .bdcb{
	display:none;
}

.page_payment #pm .bt {
	grid-area: header;
	text-align: center;
	margin-bottom: 1rem
}

.payoptsform{
	grid-area:payment;
}



.page_payment h3 {
	font-size: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.termsagreemsg {
	margin-bottom: 1em;
	text-align: center;
}

.termsart {
	margin-bottom: 1em;
	text-align: center;
}

/*payment article */
.page_payment #pm .art {
	grid-area: header;
}

.page_payment #pm .art ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page_payment #pm .art li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
}

.page_payment #pm .art li:last-child {
	margin-bottom: 0;
}

.page_payment #pm .art li i {
	grid-area: icon;
	color: var(--navy)
}

.page_payment #pm .art li span {
	grid-area: text;
	font-size: .825rem
}

.payoptentry, #psagepay {
	grid-area: details;
}

.page_payment #pm form.payoptsform .submitcontainer {
	/* grid-area: pay; */
	/* text-align: center; */
	/* position: absolute; */
	/* bottom: 0; */
	/* right: 0; */
	/* width: calc(50% - 2rem); */
}

.page_payment input[type="submit"] {
	/* color:var(--text-color); */
	display: block;
	padding: 1rem 0;
	width: 100%;
}

.confirmorder {
	grid-area: details;
}



/* Payment
------------------------------------------------------- */
.page_payment{}

.termsagreemsg{
	margin-bottom:1em;
	text-align:center;
}

.termsart{
	margin-bottom:1em;
	text-align:center;
}

.payopts{
	display:grid;
	grid-template-columns:1fr;
	grid-gap:1em;
	/* grid-template-rows:50px; */
	grid-template-areas:
		"dna"
		"google"
		"apple"
		"paypal"
		"invoice";
}

.payopts > div {
	display:inline-block;
	/* margin-left:1em; */
}

.payopts .paypal submit:hover,
.payopts .paypal .btn:hover {
	 border:0;
}

.payopts .paypal{
	background:none;
	padding:0;
	border:0;
	border-radius:0;
	max-height:42px;
	overflow:hidden;
	align-content:center;
	align-items:center;
	display:grid;
}

.payopts .paypal.btn:hover{
	border:0;
}

/* dna payments */
.pt_debitcreditcard {
	grid-area:dna;
}

.pt_debitcreditcard a{
	display:block;
	border-radius:0;
	color:var(--white);
	background-color:black;
	font-weight:600;
	height: 46px;
	padding:0;
	align-content:center;
	border:0;
	border-radius:4px;
}

.pt_debitcreditcard a:hover{
	border:none;
}

.pt_debitcreditcard a:before{
	content:'\f09d';
	font-family:var(--font-awesome);
	margin-right:.5em;
}


/* invoice */
.pt_invoice  {
	grid-area:invoice;
}

.pt_invoice  a{
	display:block;
	border-radius:0;
	color:var(--white);
	font-weight:600;
	height: 46px;
	padding:0;
	align-content:center;
	border:0;
	border-radius:4px;
}

.pt_invoice  a:hover{
	border:none;
}

.pt_invoice  a:before{
	content:'\f570';
	font-family:var(--font-awesome);
	margin-right:.5em;
}

/* google pay */
.pt_googlepay {
	grid-area:google;
}
#googlepaybtncontainer {
	height: 46px;
	border-radius:4px;
}


/* apple pay */
.pt_applepay  {
	 grid-area:apple;
}
#applepaybtncontainer {
	height: 46px;
}

/* paypal */
.pp_button {
	grid-area:paypal;
	height: 46px;
	background-color:#f0c74b;
	align-content:center;
	border-radius:4px;
}

.pp_button img {
	grid-area:paypal;
}


.dnapayments.payoptentry {
	background-color:var(--white);
	padding:1em;
	margin-bottom: 1em;
}

.dnapayments.payoptentry label{
	display:none;
}

@media only screen and (max-width: 600px) {
.dnapayments.payoptentry {

	grid-row: 2;
}
}

#submitpaymentpanel{display:block;border-radius:0;color:#fff;font-weight:600;height: 46px;padding:0;align-content:center;border:0;border-radius:4px;background-color:black;}

.hostedfield {
	height:35px;
	border-color:var(--border-color);
	border-radius: .25rem;
	font-size: 16px;
	padding: .5em;
	width: auto;
	border-width:1px;
	border-style:solid;
	margin-bottom:.5em;
}

.dna-payments-hosted-field-focused {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.dna-payments-hosted-field-valid {
  border-color: #28a745;
}
.dna-payments-hosted-field-valid.dna-payments-hosted-field-focused {
  box-shadow: 0 0 0 0.2rem rgb(40, 167, 69, 0.25);
}
.dna-payments-hosted-field-invalid {
  border-color: #dc3545;
}
.dna-payments-hosted-field-invalid.dna-payments-hosted-field-focused {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

#threedsecurecontainer{
	min-width: 515px;
}



/* Basket Summary
------------------------------------------------------- */
.bsktsum {
	grid-area: summary;
	align-self: start;
}

.bsktsum h4 {
	display: none;
}

.bsktsum .lines {
	overflow-y: scroll;
	max-height: 200px;
	background-color:#fff;
	padding: 1rem;
	padding-left: .5rem;
	display:none;
}

.bsktsum .lines .line {
	align-items: start;
	display: grid;
	grid-template-columns: 1fr auto 10ch;
	grid-template-areas:
		"desc qty price";
	grid-column-gap: 1rem;
}

@media only screen and (max-width: 600px) {
	.bsktsum .lines .line {
		align-items: start;
		display: grid;
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"img desc "
			"qty price";
		grid-column-gap: 1rem;
	}
}

.bsktsum .lines .line .unitprice {
	display: none;
}

/* Product Info - in list form */
.bsktsum .lines .prodinfo {
	grid-area: desc;
	list-style: none;
}

#pm .bsktsum .lines li {
	font-size: .725rem;
	margin-left: .5rem;
	display:none;
}

#pm .bsktsum .lines li.descr {
	font-size: .825rem;
	font-family: var(--heading-font);
	font-weight:500;
	margin-left: 0;
	display:inline-block;
}

#pm .bsktsum .lines li.lead{
		display:inline-block;
}

.bsktsum .lines li.flags {}

.bsktsum .lines li.flags img {
	margin: 0;
	max-width: 100%;
}

.bsktsum .lines .qty {
	grid-area: qty;
	font-size:.825em;
}

.bsktsum .lines .qty:before{
	content:"x"
}

.bsktsum .lines .qty label {
	display: none;
}

.bsktsum .lines .price {
	grid-area: price;
	font-size:.825em;
	text-align: right;
}

.bsktsum .totals {
	margin-top: 1rem;
	text-align: right;
	font-weight:700;
	font-size:.825em;
}

.bsktsum .totals label{ 
	font-weight:400;
	text-align:left;
}

.bsktsum .totals .subtotal {
	display: grid;
	grid-template-areas:"label value";
	margin:0 2rem;
	/* grid-template-columns:1fr 100px; */
	/* grid-gap:.5em; */
}

.bsktsum .subtotal span{
	font-weight:600;
	/*fix a min width for different number alignment */
	display:inline-block;
	width:unset;
}

.bsktsum .totals .subtotal:last-child {
	color:var(--blue);
	display:block;
	text-align:center;
	font-size:2em;
	padding:1em;
}

.bsktsum .totals .subtotal:last-child label {
	font-weight: 400;
	display:inline-block;
	margin-right:.5em;
	color:var(--grey)
}

.bsktsum .totals .subtotal:last-child span {
	font-weight: 700;
}

.ordertotal{}

/* Continue Checkout Process
------------------------------------------------------- */
.page_delivery .contbtn, .page_checkout .contbtn {}
.forinvoice {}
.page_delivery .forinvoice .chkbox label {}
.page_delivery .contbtn input, .page_checkout .contbtn input {
	width:100%;
}