html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

[data-theme="dark"] {
	--BGlighter2: #2f4653;
}

#nowide {
	/*max-width: 643px;*/
	overflow-y: auto;
	scroll-behavior: smooth;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
}

.realsize #nowide { height: unset; }
	
:disabled, select:not(:has(:nth-child(3))), select[inert] {
	background: initial;
	opacity: 1;
	appearance: none;
	border: none;
	color: black;
	margin: -1px 5px;
	pointer-events: none;
}
option:disabled { background: #6662; }

.focus, form:has(.removaldialog[open]) {
	box-shadow: 0 0 0 5000px #0004;
	z-index: 2; position: relative;
}

/*.Product > div:not(.toppart) > span { color: #c4c4c4 }*/
form > div:not(.toppart) > .linked > a:first-child, .removaldialog > p > a,
	.editall:hover, .editall:focus-visible { color: var(--colorlink); opacity: 1; }
form > div:not(.toppart) > .linked > a { opacity: .5; }
form > div:not(.toppart) > .linked > a[onclick^="unlink"] { margin: 0 1px 0 4px; padding: 0 3px; }
form > div:not(.toppart) > .linked > a > img {
	height: clamp(12px, 2.5vw, 13px);
	width: unset;
	transform: translateY(1px);
}
form > div:not(.toppart) > .linked > a > i {
	transform: translateY(-1px) scale(1.3);
	-webkit-text-stroke: 1px var(--color1);
	padding: 0 1px;
	font-size: 15px;
}
form > div:not(.toppart) > span > a:hover, .removaldialog > p > a:hover, .editall:hover,
form > div:not(.toppart) > span > a:focus, .removaldialog > p > a:focus, .editall:focus-visible { text-decoration: underline; opacity: 1; }

form > div:not(.toppart) > .linked:not(.linkedcenter) ~ .editall { display: none; }

/*More translation-friendly versions of label[title*='locked']:*/
body:not([data-small='1']) label[title^='('],
body:not([data-small='1']) label[title^='('] > select { cursor: help; width: fit-content; color: #666; }
body:not([data-small='1']) label[title^='(']:after {
	content: "\f059"; color: #0006;
	position: absolute; left: 89px; top: 3px;
	font-family: 'FontAwesome'; font-size: 15px;
}
body:not([data-small='1']) label[title^='(']:has([name='quality']):after { left: unset; right: 1px; }

.info select[name="quality"] {
	min-width: unset;
	/*text-wrap: auto;*/
	width: 111px;
}
.info label[title^='('] > select[name="quality"] { width: 101px; }

/*.info2 .hideinheader ~ label:has(input[name="quantity"]) {
	border-top: solid #FCFCFC 13px;
	width: calc(100% + 5px);
	margin-left: -5px;
	margin-top: 5px;
	padding-left: 5px;
	padding-top: 5px;
}*/

body:not([data-small='1']) label[title^='(']:not(:has(font)):after { left: clamp(75px, 16vw, 89px); }

select[name='level'] { max-width: 110px; }
.editonpagebtn {
	background: #9991;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	max-width: 130px;
}
.editonpagebtn > span {
	text-wrap: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: 1px;
}
button[name='engraving'] { font-family: 'Lucida Calligraphy W01', serif; font-size: 13px; }
button[name='engraving'][data-font*='Rage'] { font-family: 'Rage Italic V1', serif; font-size: 16px; }
button[name='engraving'][data-font*='Harrington'] { font-family: 'Harrington', serif; font-size: 17px; padding: 0 6px; }
button[name='engraving'][data-font*='SCRIPTBL'] { font-family: 'SCRIPTBL', serif; font-size: 15px; }
button[name='engraving'][data-font*='Informal Roman'] { font-family: 'Informal Roman Std', serif; font-size: 20px; }
button[name='engraving'][data-font*='Times New Roman'] { font-family: 'Times New Roman', serif; font-size: 16px; }
button[name='engraving'][data-font*='Freestyle'] { font-family: 'Freestyle Script', serif; font-size: 18px; }
button[name='engraving'][data-font*='Helvetica'] { font-family: 'Helvetica', sans-serif; font-size: 14px; }
button[name='engraving'][data-font*='Bookman'] { font-family: 'Bookman', serif; font-size: 13px; }
button[name='engraving'][data-font*='Colonna'] { font-family: 'Colonna MT', serif; font-size: 17px; }
button[name='engraving'][data-font*='Corinthia'] { font-family: 'Corinthia', serif; font-size: 19px; }
button[name='engraving'][data-font*='Lucida Handwriting'] { font-family: 'Lucida Handwriting', serif; font-size: 12px; }
button[name='engraving'][data-font*='Edwardian Script'] { font-family: 'Edwardian Script ITC Regular', serif; font-size: 18px; }
button[name='engraving'][data-font*='Olde English'] { font-family: 'Olde English', serif; font-size: 18px; }
button[name='engraving'][data-font*='ITC American Typewriter'] { font-family: 'ITC American Typewriter', monospace; font-size: 14px; }
button[name='engraving'][data-font*='Vladimir Script'] { font-family: 'Vladimir Script', serif; font-size: 17px; }
button[name='engraving'][data-font*='Elephant'] { font-family: 'Elephant', serif; font-size: 14px; }
button[name='engraving'][data-font*='Kunstler Script'] { font-family: 'Kunstler Script', serif; font-size: 20px; }
button[name='engraving'][data-font*='Magneto'] { font-family: 'Magneto', serif; font-size: 14px; }
button[name='engraving'][data-font*='Poor Richard'] { font-family: 'Poor Richard', serif; font-size: 16px; }
button[name='engraving'][data-font*='Harlow Solid'] { font-family: 'Harlow Solid', serif; font-size: 16px; }
button[name='engraving'][data-font*='Ebrima'] { font-family: 'Ebrima', sans-serif; font-size: 14px; }
button[name='engraving'][data-font*='Niagara Engraved'] { font-family: 'Niagara Engraved', serif; font-size: 18px; }
button[name='engraving'][data-font*='Haettenschweiler'] { font-family: 'Haettenschweiler', 'Impact', fantasy; font-size: 18px; }
button[name='engraving'][data-font*='Matura MT Script Capitals'] { font-family: 'Matura MT Script Capitals', serif; font-size: 14px; }
.editonpagebtn:hover:after, .editonpagebtn:focus-visible:after {
	content: "\f040";
	font-family: 'FontAwesome';
	padding-left: 5px;
	font-size: 15px;
	text-decoration: underline;
}
label:has(.editonpagebtn) { width: fit-content; }
input[name='quantity'] { max-width: 7vw; }
body:not([data-small='1']) input[name='quantity'][readonly] { border: transparent; background: var(--BGlighter); }

input, button, select, textarea { border: solid 1px var(--coolcolorhover); border-radius: 2px; background: white; }
input:invalid { border-color: red; background: #F001; }

form {
	/*max-width: 624px;*/
	border: solid 3px var(--mainblue);
	border-radius: 10px;
	margin-bottom: 5px;
	position: relative;
	background: #FCFCFC;
	display: flex;
	padding-top: 33px;
}
form > div { display: inline-block; margin-left: 5px; height: fit-content; font-size: 15px; }
.info, .info2 {
	margin: 3px 0 4px 4px;
	display: inline-flex;
	flex-direction: column;
	vertical-align: top;
	gap: 2px;
	background: #abc2;
	border-radius: 4px;
	padding: 5px;
	min-width: fit-content;
}
.info2:empty { display: none; }
.info select { min-width: 122px; }
form > div > * { display: block; position: relative; }
form > .toppart {
	display: flex;
	background: var(--mainblue);
	color: white;
	margin: 0;
	padding: 5px 0 8px 5px;
	border-radius: 5px 5px 0 0;
	position: absolute;
	top: 0;
	width: calc(100% - 5px);
}
form > .toppart > div { flex-grow: 1; margin: 0; }
form > .toppart > * { margin: 0 5px; color: white; text-wrap: nowrap; }
form > .toppart > .title {
	font-weight: 500;
	font-size: 13.5px;
	opacity: .85;
	margin-top: 2px;
	text-overflow: ellipsis;
	overflow: hidden;
}
form > .toppart > a { margin-right: 10px; }
form > img, form > .placeholderBG > img, form iframe {
	height: 121px; width: 121px;
	object-fit: scale-down;
	opacity: 0;
	transition: opacity .5s;
	margin-top: 0;
	border: none;
}
form button { margin: -1px 0; }
form:last-of-type { margin-bottom: 20px !important; }
.detaildiv, .detaildiv * { display: block; width: 100%; }
.detaildiv { width: calc(100% - 16px); margin: 9px 0 7px 12px; position: relative; flex-grow: 1; }
.detaildiv textarea, .detailhider {
	resize: none;
	border-radius: 3px;
	height: 69px;
	width: calc(100% - 12px);
}

.detaildiv .detailhider {
	display: none;
	overflow: hidden;
	text-align: center;
	padding: 12px 2px 2px;
	height: 35px;
	font-family: sans-serif;
	font-size: 19px;
	margin-top: 0;
	border: solid 1px #666;
}
.updating .detaildiv label > textarea { display: none; }
.updating .detaildiv .detailhider { display: block; }

.shipdate {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	font-size: 14px;
	padding: 1px 7px 2px;
	background: var(--coolcolor);
	border: solid 1px var(--coolcolorhover);
	border-width: 1px 0 0 1px;
	border-radius: 5px 0;
	filter: contrast(1.35);
}
.hideinheader > .shipdate {
	bottom: unset;
	top: -1px;
	right: -6px;
	width: auto;
	padding: 1px 4px 2px;
	border-radius: 5px 5px 0 0;
	border-width: 1px;
}

.shipdate > a {
	text-decoration: underline;
	color: var(--colorlink);
}

.diamondconnect {
	position: absolute;
	bottom: 4px;
	right: 5px;
	font-size: 12px;
	font-style: italic;
}

.linkless {
	font-style: italic;
	opacity: .75;
}

form:has(input[name='quantity'][value='1']) .each,
	#nowide:not(:has(.Product)) .info2:has(.linkless) { display: none; }
.toppart > label { text-wrap: nowrap; }

.popupcancel { background-color: #edf2fd; }
.placeholderBG {
	background: #0003 url('/static/img/icons/loading.svg') center/50% no-repeat;
	overflow: clip;
}
body:not([data-small='1']) .placeholderBG { margin: 3px 0 5px 5px; border-radius: 4px; }

.bottombuttons { display: none; }
form ~ .bottombuttons {
	position: sticky; bottom: 0; left: 0;
	display: flex; height: 50px;
	width: 100%;
	/*max-width: 626px;*/
	font-size: 15px;
	box-shadow: 0 0 15px 15px var(--BGlighter2);
}
.choosebutton { height: unset; overflow: clip; }
.viewbutton { background: white; color: black; }
.btn { flex-direction: column; }

.info:not(:has(option[value="Semi-Mount"], option[value="Complete"])) > label:has(select[name="quality"]) { display: none; }
body:not([data-small='1']) form:not(:has(option[value="Semi-Mount"], option[value="Complete"])) .info > .qp { margin-top: 50px; }

body[data-small='1'] .hideinheader,
	body:not([data-small='1']) .showinheader,
		body[data-small='1'] input::-webkit-inner-spin-button { display: none; }
body[data-small='1'] #nowide { display: flex; flex-direction: column; }
body[data-small='1'] form { margin: 3px 4px; overflow: hidden; flex-shrink: 0; padding-top: 25px; }
body[data-small='1'] form ~ .bottombuttons { margin-top: auto; flex-shrink: 0; }
body:not([data-small='1']) form ~ .bottombuttons > a { border-radius: 7px; }
body[data-small='1'] form > div { font-size: 13px; line-height: 13px; }
body[data-small='1'] form select, body[data-small='1'] form input { font-family: sans-serif; }
body[data-small='1'] form input { padding: 0; -moz-appearance: textfield; }
body[data-small='1'] form > div > * { margin-top: 0; }
body[data-small='1'] form > div.toppart { padding: 3px 5px 6px; }
body[data-small='1'] form.Diamond { padding-bottom: unset; }
body[data-small='1'] form.Diamond > div:last-child { transform: translateY(-1px); }
body[data-small='1'] form .placeholderBG { margin: -3px 0 0 0; border-radius: 0 0 0 7px; }
body[data-small='1'] form label:has(select[name="quality"]):not(:has(option[value])) { display: none; }
body[data-small='1'] form:has(select[name="quality"] > option[value]) .fing { margin-bottom: 11px; }
body[data-small='1'] form:has(select[name="quality"] > option[value]) .placeholderBG:has(~ div > .fing) > img { height: 107px; }
body[data-small='1'] form img, body[data-small='1'] form iframe { width: 90px; height: 90px; }
body[data-small='1'] .cost { margin-left: 5px; }
/*body[data-small='1'] .collapsible { display: none; }*/
body[data-small='1'] .info, body[data-small='1'] .info2 { background: none; }
body[data-small='1'] .info { margin-top: 0; }
body[data-small='1'] .info2 { position: absolute; bottom: -5px; left: 90px; width: 199px; }
body[data-small='1'] .info:has(~ .info2:not(.hideinheader)) { margin-top: -4px; line-height: 15px; }

.loading { pointer-events: none; }
.loading:before, .loading:after {
	content: "";
	background: url(/static/img/icons/loading.svg) center / 100% 80% no-repeat #0003;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#reloader { box-shadow: none; }
#reloader > img { width: 150px; }
#reloader > h2 { color: white; }

#emptycart {
	max-width: 320px;
	text-align: center;
	margin: 100px auto;
	color: black;
	background: #FFFD;
	border: solid 2px var(--mainblue);
	border-radius: 15px;
	padding: 5px 0;
}

.removaldialog {
	position: absolute;
	left: 100px;
	top: 32px;
	width: calc(100% - 100px);
	height: calc(100% - 32px);
	font-size: clamp(13px, 3.5vw, 16px);
	z-index: 1;
	border-radius: 0 0 10px 10px;
	display: none;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 50px;
	color: inherit;
	animation: none;
	box-shadow: unset;
}
.removaldialog > p {
	width: 100%;
	text-align: center;
	margin: 10px;
}
.removaldialog > a { flex-grow: 0; height: unset; }
.removaldialog[open] { display: flex; }
.removaldialog[open] ~ * { display: none; }

.popupbox { width: 380px; max-width: 94vw; }

@media (max-width: 665px) {
	form { flex-wrap: wrap; }
	.detaildiv { margin: -5px 0 27px 5px; }
	.detaildiv textarea, .detailhider { height: 49px; }
	.info, .info2 { font-size: clamp(12px, 2.5vw, 15px); }
	body:not([data-small='1']) select, body:not([data-small='1']) input { font-size: clamp(11px, 2.5vw, 13px); }
	form > img, form > .placeholderBG > img { width: clamp(100px, 19.5vw, 121px); height: clamp(100px, 19.5vw, 121px); }
	.editonpagebtn { max-width: 95px; }
	body:not([data-small='1']) label[title^='(']:after { font-size: 14px; }
}

@media (max-width: 600px) {
	body:not([data-small='1']) label[title^='(']:after { top: 1px; }
}

@media (max-width: 479px) {
	.collapsible { display: none; }
	body:not([data-small='1']) .placeholderBG { order: -2; }
	body:not([data-small='1']) .detaildiv {
		order: -1;
		width: 50%;
		margin: 5px 0 0 5px;
	}
	body:not([data-small='1']) .Product .info, body:not([data-small='1']) .Product .info2 {
		margin-top: 0;
		padding: 5px 3px;
	}
	body:not([data-small='1']) .info select { min-width: 111px; }
	body:not([data-small='1']) .info select[name="quality"] { width: 102px; }
	body:not([data-small='1']) .Product .info2 { margin-bottom: 25px; }
	.shipdate { font-size: 13px; }
}

body[data-small="1"] .removaldialog { font-size: 13px; margin-right: unset; width: 75%; gap: 10px 20px; }
body[data-small="1"] .removaldialog > p { margin: -2px 0 0; }
body[data-small="1"] .removaldialog > a { font-size: inherit; }

.popupsubmit, .popupcancel {
	border: none;
}

.strokeblast {
	outline: solid 0 transparent;
	animation: strokeblast 1.5s ease-out forwards;
}

@keyframes strokeblast {
	0% { outline-color: transparent; outline-offset: -20px; outline-width: 20px; }
	30% { outline-color: #9999; }
	31% { outline-width: 3px; }
	60% { outline-color: black; outline-width: 1px; }
	100% { outline-color: transparent; outline-offset: 20px; }
}

.bottombuttons > .cartbtn:before {
	content: '';
	background: transparent;
	position: absolute;
	height: 400%;
	top: -150%;
	left: -50%;
	width: 200%;
	opacity: 0;
	background: linear-gradient(0deg, transparent 15%, white, transparent 85%);
	animation: cartattract 15s linear infinite;
}

@keyframes cartattract {
	0% { transform: rotate(0deg); }
	35% { opacity: 0; }
	50% { transform: rotate(360deg); opacity: .25; }
	65% { opacity: .25; }
	100% { transform: rotate(720deg); opacity: 0; }
}