/* css variables */ 
:root {
	--menu-item-default-background: rgba(0,0,0,0.03);
	--divider-color: rgba(0,0,0,0.12);
	--menu-border-color: rgba(0,0,0,0.2);
}

#account div,
#account p {
	font-size: 14px;
}

#account-content .column-description,
#account-content .column-description div {
	font-size: 13px;
}

#account-content .column-description {
	line-height: 2;
	margin-top: 25px;
	margin-bottom: 45px;
	max-width: 470px;
}

#account-content .login-info .column-description.password-rules {
	max-width: unset;
}

#account-content .login-info .column-description.password-rules ul {
	padding-left: 16px;
}

#account-content .login-info .column-description.password-rules ul li {
	padding-bottom: 0;
}

#account-content .sub-header {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 25px;
}

/* sum header */
#account-content .sum-header h4,
#account-content .reward-earn h4,
#account-content .terms h4 {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 5px;
}

#account-content .reward-earn,
#account-content .terms {
	margin-top: 30px;
}

#account-content .reward-earn p:first-of-type {
	margin-top: 15px;
}

#account-content .reward-earn p:last-of-type {
	margin-bottom: 0;
}

#account-content .sum-header .total-sum {
	font-size: 44px;
	font-weight: 800;
}

#account-content .flex-form + .sub-header {
	margin-top: 25px;
}

#btn-close-fullscreen {
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 1;
}

#btn-close-fullscreen > span {
	font-size: 40px;
}

#account .btn-remove {
	background-color: transparent;
	padding: 10px;
	color: var(--button-inverse-text-color);
}

#account.columns .container {
	display: grid;
	grid-template-columns: minmax(300px, 350px) 1fr;
	column-gap: 60px;
	max-width: 1330px;
}

/* container for the rounded profile picture */
#account .profile-container,
#account .profile-container > .img-circle {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#account .left-content .profile-container {
	justify-content: left;
	padding-bottom: 40px;
	column-gap: 35px;
}

#account .left-content .profile-container img {
	aspect-ratio: 1;
}

#account-content > .inner .profile-container,
#account-content > .inner .profile-container > .img-circle {
	margin-bottom: 25px;
}

#account-content > .inner .column > .profile-container {
	flex-direction: column;
	margin-bottom: 100px;
}

#account-content > .inner .column > .profile-container > div {
	line-height: 2;
}

#account-content > .inner .column .non-editable-row {
	padding-top: 25px;
}

#account-content > .inner .column .payment-address-field-title {
	color: var(--action-color);
	font-size: 12px;
	font-weight: 600;
}

#account-content > .inner .column .payment-address-field-content {
	font-size: 14px;
	font-weight: 500;
}

#account-content > .inner .column .menu-item > input:checked + .label-container > .label-heading {
	font-weight: 700;
}

#account-content > .inner .column #payment-methods .menu-item > .label-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-height: 75px;
	padding: 23px 30px;
	border: 1px solid transparent;
	background-color: var(--menu-background-color);
	border-radius: 3px;
	line-height: 1.9;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

#account-content > .inner .column #payment-methods .menu-item > .label-container > .img-container {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
}

#account-content > .inner .column #payment-methods .menu-item > .label-container > .img-container + .label-heading {
	margin-left: 50px;
}

#account-content > .inner .column #payment-methods .menu-item > .label-container .label-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0,1,0,1);
}

#account-content > .inner .column #payment-methods .menu-item > input:checked + .label-container .label-content {
	max-height: 250px;
	transition: max-height 0.2s ease-in-out;
}

#account-content > .inner .column #payment-methods .menu-item > .label-container .label-content > .content-inner {
	display: block;
	padding-top: 17px;
	padding-bottom: 6px;
}

#account-content > .inner .column #payment-methods .menu-item > .label-container .label-content > .content-inner .form-control {
	margin-bottom: 0;
}

#account-content > .inner .column #payment-methods .menu-item > input:checked + .label-container.active-white {
	background-color: rgba(255,255,255,1);
}

/* when class "active-white" the background-color fades to white when menu item is active */
#account-content > .inner .column #payment-methods .menu-item > .label-container.active-white {
	transition: background-color 0.25s linear;
}

/* when class "active-white" the background-color fades to white when menu item is active */
#account-content > .inner .column #payment-methods .menu-item > input:checked + .label-container.active-white {
	background-color: rgba(255,255,255,1);
}

#account-content > .inner .profile-container > .img-circle.wrapper-upload {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: var(--secondary-background-color);
	color: var(--button-inverse-text-color);
	font-size: 13px;
	font-weight: 400;
	padding: 0;
	transition: all .12s linear;
}

/* dropzone upload error styling */
#account-content > .inner .profile-container > .img-circle.wrapper-upload.dz-error,
#account-content > .inner .profile-container > .img-circle.wrapper-upload.dz-error:hover{
	background-color: #fcdfeb;
	border-color: #ed145b;
	color: #ed145b;
}

/* dropzone dragover styling */
#account-content > .inner .profile-container > .img-circle.wrapper-upload.dz-dragover {
	background-color: #e4f2e7;
	border-color: #00aa6e;
	border-style: dashed;
	color: #00aa6e;
}

/* dropzone icon spinner animation */
#account-content > .inner .profile-container > .img-circle.wrapper-upload.dz-spinner::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: 100px solid;
	border-top-color: rgba(255,2552,255,0.5);
	border-left-color: rgba(255,2552,255,0.1);
	border-bottom-color: rgba(255,2552,255,0.5);
	border-right-color: rgba(255,2552,255,0.1);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

#account-content > .inner .profile-container > .img-circle.wrapper-upload:hover {
	border-color: #999;
	border-style: dashed;
}

#account-content > .inner .profile-container > .img-circle.wrapper-upload > .status-text {
	white-space: normal;
	line-height: 1.7;
	padding: 10px;
	display: inline-block;
	pointer-events: none;
}

#account-content > .inner .profile-container > .img-circle.wrapper-upload.dz-spinner,
#account-content > .inner .profile-container > .img-circle.wrapper-upload > .image-preview {
	pointer-events: none;
}

#account-content > .inner .profile-container > .img-circle.wrapper-upload.dz-started {
	background-color: var(--background-color);
}

#account-content h1, 
#account-content .h1 {
	position: relative;
	top: 3px;
	display: flex;
	flex-direction: column;
	font-size: 36px;
	font-weight: 800;
	margin-top: 33px;
	margin-bottom: 0;
	padding-left: 60px;
	line-height: 1.3;
	min-width: 0;
}

#account-content h1 > span:not([class]),
#account-content .h1 > span:not([class]) {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

#account-content h1 > .sub-header {
	font-size: 14px;
	font-weight: 500;
}

#account-content h2, 
#account-content .h2 {
	font-size: 20px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 25px;
	padding-left: 30px;
}

#account-content h3,
#account-content .h3 {
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 45px;
}

#account hr {
	display: block;
	height: 1px;
	background-color: var(--divider-color);
	border: none;
	margin-top: 0;
	margin-bottom: 45px;
}

#account .flex-form + hr {
	margin-top: 25px;
}

#account .button-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 45px;
	margin-top: 45px;
}

#account .button-container .btn {
	display: block;
	max-width: 320px;
	margin-top: 0;
}

#account .link-container {
	margin-top: 25px;
	margin-bottom: 25px;
}

#account .column-description .link-container {
	margin-top: 0;
	margin-bottom: 0;
}

#account .link-container + hr {
	margin-top: 45px;
}

#account .link-container a {
	font-size: 14px;
	line-height: 2.5;
}

#account .link-container .internal-anchor {
	color: var(--anchor-color);
}

#account .internal-anchor > span.underline::after {
	background-color: var(--anchor-color);
}

#account .img-circle {
	display: inline-block;
	border-radius: 50%;
	background-color: white;
	border: 1px solid #eee;
	overflow: hidden;
}

#account-content {
	position: relative;
	overflow: hidden;
}

/* when navigation menu is sticky we add the extra margin bottom */
#account.is-sticky #account-content {
	margin-bottom: 1000px;
}

#account-content > .inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--secondary-background-color);
	transform: translateX(100%);
}

body.login #account-content > .inner {
	position: static;
}

#account-content > .inner.transition {
	transition: transform 0.2s cubic-bezier(0,0,0.1,1);
}

#account-content > .inner.active {
	transform: translateX(0);
}

#account-content > .inner .column:not(.transparent) {
	border-radius: 8px;
	padding: 60px;
	background-color: #ffffff;
}

#account-content > .inner .column.historical-orders {
	background-color: unset;
}

#account-content > .inner > .column:not(.transparent):not(.auto-height) {
	min-height: calc(100vh - 310px);
}

body.login #account-content > .inner > .column:not(.transparent) {
	min-height: auto;
}

#account .container > .left-content > .column {
	transition: top 0.15s ease-in-out;
}

#account.is-sticky .container > .left-content > .column {
	position: -webkit-sticky;
	position: sticky;
	top: 70px;
}

/* fixed header means we need to offset the position */
body.fixed-header #account.is-sticky .container > .left-content > .column {
	top: 4px;
}

body.shrink-header #account.columns .container > .left-content > .column {
	top: 10px;
}

#account.columns .container > .left-content > .column > .customer-id {
	margin-left: 30px;
	padding-bottom: 45px;
}

#account-content > .inner > .column:not(.transparent) .btn-container {
	margin-top: 25px;
	margin-bottom: 45px;
}

#account-content > .inner > .header {
	position: relative;
	min-height: 125px;
}

/* hide previous button on desktop */
#account-content > .inner .header > .btn-previous,
#account-content > .inner .header > .btn-close {
	position: absolute;
}

/* hide the previous button on level 1 */
#account-content > .inner.level-1 .header > .btn-previous {
	display: none;
}

#account-content > .inner .header > .btn-previous {
	padding: 0;
	top: 7px;
	z-index: 1;
}

#account-content > .inner .header > .btn-previous > .material-icons {
	font-size: 40px;
	font-weight: 600;
}

#account-content > .inner .header > .btn-close {
	display: none;
}

#account-content > .inner .column > .details {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#account-content > .inner .column > .title {
	font-size: 16px;
	font-weight: 700;
	margin-top: 25px;
}

#account-content > .inner .column > .title > a {
	display: inline-grid;
}
	
#account-content > .inner .column > .title > a > .underline {
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	line-height: 2.5;
}

#account-content > .inner .column > .punchline {
	font-size: 16px;
	line-height: 1.6;
	text-overflow: ellipsis;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

#account-content > .inner .click-box-general-description {
	display: block;
	margin-left: 0;
	margin-bottom: 25px;
}

#account-content > .inner .column-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 25px;
}

#account-content > .inner .click-box-description {
	display: none;
	margin-left: 60px;
}

#account-content > .inner .click-box-description.empty {
	display: block;
}

#account-content > .inner-footer {
	display: none;
}

/* click box */
#account-content > .inner .column-wrapper > .click-box {
	position: relative;
	cursor: pointer;
	padding: 45px;
	transition: all 0.12s ease-out;
}

#account-content > .inner .column-wrapper > .click-box.transition {
	opacity: 0;
	transform: scale(0.8);
}

#account-content > .inner .column-wrapper > .click-box .btn-remove {
	position: absolute;
	top: 25px;
	right: 25px;
	z-index: 1;
	opacity: 0;
	transition: opacity linear 0.25s;
}

#account-content > .inner .column-wrapper > .click-box .btn-remove > .material-icons { 
	font-size: 28px;
}

#account:not(.select-multiple.columns) #account-content > .inner .column-wrapper > .click-box:hover .btn-remove,
#account:not(.select-multiple.columns) #account-content > .inner .column-wrapper > .click-box:hover span.underline::after {
	opacity: 1;
}

#slide-up-remove-menu {
	display: none;
}

#account-content > .inner .column .btn-previous > .material-icons {
	font-size: 40px;
}

#account li.menu-item {
	position: relative;
	list-style: none;
	margin: 0;
}

/* common css rules for the navigation */
#account .navigation {
	margin-bottom: 85px;
}

#account .navigation:not(.shipping-address):last-of-type {
	margin-bottom: 0;
}

#account .navigation.shipping-address {
	margin: 0 0 40px 0;
}

#account .navigation.products {
	margin-bottom: 25px;
}

#account .navigation.products > .menu-item > a.disabled {
	opacity: 1;
}

#account-content .navigation > .menu-item {
	padding-bottom: 15px;
}

#account-content .navigation > .menu-item > a,
#account-content .navigation > .menu-item > .label-container {
	border-radius: 3px;
}

#account .navigation.orders .menu-item > a > span:first-child {
	font-weight: 700;
}

#account .navigation.orders.historical-orders > .menu-item:first-child {
	border-top: 1px solid #ececec;
}

#account .navigation.orders.historical-orders > .menu-item {
	padding-bottom: 0;
	border-bottom: 1px solid #ececec;
}

#account .navigation.orders.historical-orders > .menu-item > a.download-link {
	min-height: 45px;
	padding: 10px 20px 10px 30px;
	pointer-events: none;
}

#account .navigation.orders.historical-orders > .menu-item > a.download-link .label-container.underline {
	margin-left: auto;
	line-height: 1;
}

#account .navigation.orders.historical-orders > .menu-item > a.download-link .label-container.underline > span {
	font-size: 24px;
	font-weight: 400;
	pointer-events: auto;
}

#account .navigation.orders.historical-orders > .menu-item > a .underline::after {
	bottom: 0;
}

#account .navigation > .menu-item > input:not(.inline-checkbox) {
	display: block;
	position: absolute;
	bottom: 15px;
	left: 50%;
	opacity: 0;
	margin: 0;
}

#account .navigation > .menu-item > a,
#account .navigation > .menu-item > .label-container {
	position: relative;
	display: flex;
	flex-direction: row;
	min-height: 70px;
	padding: 15px 30px;
	line-height: 1.9;
	white-space: normal;
	padding-right: 65px;
}

/* first item in a visual group */
#account-nav-menu > .menu-item.group-start > a,
#account-nav-menu > .menu-item.group-start > .label-container {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

/* last item before next group */
#account-nav-menu > .menu-item:has(+ .menu-item.group-start) > a,
#account-nav-menu > .menu-item:has(+ .menu-item.group-start) > .label-container {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* last item in menu */
#account-nav-menu > .menu-item:last-child > a,
#account-nav-menu > .menu-item:last-child > .label-container {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

#account-nav-menu > .menu-item:has(+ .menu-item > a[data-logout]) > a,
#account-nav-menu > .menu-item:has(+ .menu-item > a[data-logout]) > .label-container {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

#account-nav-menu > .menu-item:has([data-logout]) > a,
#account-nav-menu > .menu-item:has([data-logout]) > .label-container {
	border-radius: 8px;
}

#account .navigation > .menu-item > .label-container {
	min-height: 75px;
	padding: 23px 30px;
	background-color: var(--menu-background-color);
	line-height: 1.9;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

#account .navigation.shipping-address > .menu-item > .label-container {
	justify-content: space-around;
}

#account .navigation > .menu-item > input:checked + .label-container {
	box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}

#account .navigation > .menu-item > input:checked + .label-container > .label-heading {
	font-weight: 700;
}

#account .navigation > .menu-item > a.address {
	padding: 23px 30px;
	min-height: 75px;
}

#account .navigation > .menu-item > a.default {
	flex-direction: column;
}

/* menu item links can be disabled while ajax request is loading content */
#account .navigation > .menu-item > a.disabled {
	opacity: 0.4;
	pointer-events: none;
}

#account .navigation > .menu-item .label-container {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#account .navigation > .menu-item .label-container > .underline {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* info label */
#account .navigation > .menu-item .label-container.info {
	background-color: transparent;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
	pointer-events: none;
}

#account .navigation > .menu-item > a.active > .label-container {
	font-weight: 700;
}

#account .navigation > .menu-item > .label-container .underline::after,
#account .navigation > .menu-item > a .underline::after {
	bottom: 4px;
}

#account .navigation > .menu-item > a.active > .label-container .underline::after,
#account .navigation > .menu-item > .label-container:hover .underline::after,
#account .navigation > .menu-item > a:not(.download-link):hover .underline::after {
	opacity: 1;
}

#account .navigation > .menu-item .label-container > .label-heading {
	font-weight: 700;
}

#account .navigation > .menu-item > a > .label-container > .label-default {
	color: var(--default-text-color);
}

/* arrow */
#account .navigation > .menu-item > a.arrow::after {
	font-family: "Material Icons";
	content: "chevron_right";
	-webkit-font-feature-settings: "liga";
	color: var(--dark-anchor-color);
	position: absolute;
	display: inline-block;
	font-size: 24px;
	line-height: 1.7;
	font-weight: 400;
	top: 50%;
	right: 21px;
	margin-top: -20px;
}

#account-content > .inner .navigation > .menu-item > a {
	column-gap: 100px;
	overflow: hidden;
}

#account-content > .inner .navigation > .menu-item > a .min-width {
	min-width: 60px;
}

/* hover border effect for active */
#account-content > .inner .navigation > .menu-item > input:not(:checked) + label.label-container:hover,
#account-content > .inner .navigation > .menu-item > a:not(.download-link):hover {
	box-shadow: inset 0px 0px 0px 1px var(--menu-border-color);
}

#account .navigation > .menu-item > a > span {
	margin: auto 0;
}

#account .navigation > .menu-item > a > .material-icons-outlined:first-child {
	font-size: 22px;
}

#account .navigation > .menu-item > a > span:first-child {
	margin-right: 25px;
}

#account-nav-menu > .menu-item > a {
	background-color: white;
}

#account-nav-menu a:not(.active):not(.download-link):hover,
#account-content .navigation > .menu-item > a:not(.download-link),
#account-nav-menu > .menu-item > a.active {
	background-color: var(--menu-item-default-background);
}

#account-content > .inner .navigation > .menu-item > a.is-logotype,
#account-content > .inner .navigation > .menu-item > a.has-img {
	padding: 0;
	column-gap: 15px;
	padding-right: 50px;
}

/* visual group heading for account navigation */
#account-nav-menu > .menu-item.group-start:first-child {
	margin-top: -15px;
}

#account-nav-menu > .menu-item.group-start:not(:first-child) {
	margin-top: 32px;
}

#account-nav-menu > .menu-item.group-start::before {
	content: attr(data-group-title);
	display: block;
	margin: 0 0 14px 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #8a8a8a;
}

#account-nav-menu > .menu-item:has([data-logout]) {
	margin-top: 32px;
}

/* product image or canvas */
#account-content > .inner .navigation > .menu-item > a.has-img > .img-container {
	display: inline-flex;
	padding: 10px 15px;
	margin-right: 0;
}

#account-content > .inner .navigation > .menu-item > a.has-img > .img-container > canvas,
#account-content > .inner .navigation > .menu-item > a.has-img > .img-container > img {
	width: auto;
	max-width: 100%;
	max-height: 80px;
	mix-blend-mode: multiply;
}

/* logotypes */
#account-content > .inner .navigation > .menu-item > a.is-logotype > .material-icons {
	font-size: 18px;
	color: var(--anchor-color);
}

#account-content > .inner .navigation > .menu-item > a.is-logotype > .img-container {
	display: inline-block;
	margin-right: 15px;
	padding-left: 10px;
	min-width: 140px;
}

#account-content .logo-container.bright,
#account-content > .inner .navigation > .menu-item > a.is-logotype > .img-container.bright {
	background-color: #b9bcbf;
}

#account-content > .inner .navigation > .menu-item > a.is-logotype > .img-container > img {
	width: auto;
	max-width: 100%;
	max-height: 100px;
	height: 100px;
	width: auto;
	margin: 10px 15px;
}

#account-content > .inner .navigation > .menu-item > a.is-logotype > .label-container {
	word-break: break-all;
}

#account-content .logo-container {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--menu-background-color);
	border-radius: 12px;
	padding: 45px;
	min-height: 350px;
	margin-bottom: 85px;
}

#account-content .color-circle {
	display: inline-block;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	vertical-align: text-bottom;
}

#account-content .color-circle.bright {
	border: 1px solid #cccccc;
}

/* inline checkbox */
#account-content .inline-checkbox {
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	background-color: white;
	margin: 0;
	padding: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #666;
	border-radius: 3px;
	display: grid;
	place-content: center;
	cursor: pointer;
	aspect-ratio: 1;
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: auto;
	opacity: 1;
	transition: background-color .12s ease, border-color .12s ease;
	z-index: 2;
}

#account-content .inline-checkbox::before {
	font-family: "Material Icons";
	content: "check";
	-webkit-font-feature-settings: "liga";
	font-size: 12px;
	font-weight: 700;
	color: white;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0);
	transition: .12s transform ease-in-out;
	border-radius: 3px;
}

#account-content .inline-checkbox:checked {
	background-color: #666;
	border-color: #666;
}

#account-content .inline-checkbox:checked::before {
	transform: scale(1);
}

#account-content .inline-checkbox + .label-container,
#account-content .navigation > .menu-item > .inline-checkbox + .label-container {
	padding-left: 56px;
}

/* order details */
#account ul.order-details {
	margin: 0;
}

#account ul.order-details .table-responsive:first-child {
	border-top: 0;
}

#account ul.order-details .table-responsive:nth-child(2) {
	padding-top: 20px;
}

#account ul.order-details .table-responsive {
	margin-top: 30px;
}

#account ul.order-details h4 {
	font-size: 15px;
	line-height: 2;
	font-weight: 700;
	margin: 0;
}

#account ul.order-details p {
	line-height: 2;
}

#account ul.order-details .menu-item .table {
	margin-top: 0;
	margin-bottom: 0;
}

#account ul.order-details .menu-item .table td, 
#account ul.order-details .menu-item .table th{
	padding-left: 20px;
	padding-right: 20px;
}

#account ul.order-details .menu-item .table > tbody {
	position: relative;
}

#account ul.order-details .menu-item .table > tbody:not(:last-child)::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 18px;
	left: 5px;
	right: 5px;
	border-bottom: 1px solid var(--divider-color);
}

#account ul.order-details .menu-item .table > tbody:last-child::after {
	display: none;
}

/* total sum */
#account ul.order-details .menu-item .table > tbody.order-total > tr.total-sum > td {
	vertical-align: bottom;
	font-weight: 800;
}

#account ul.order-details .menu-item .table > tbody.order-total > tr.total-sum > td:last-child {
	font-size: 36px;
	line-height: 1;
}

#account ul.order-details .menu-item .table > tbody.order-total > tr.total-sum > td > span {
	font-size: 0.6em;
}

#account ul.order-details .menu-item .table > tbody.order-total > tr > td.delivery {
	color: var(--action-color);
	font-weight: 700;
}

/* product details */
#account .canvas-container,
#account .canvas-thumbnails,
#account .image-container,
#account .image-thumbnails {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/* retina needs max dimensions */
#account .canvas-wrapper:not(.click-box) .canvas-container,
#account .image-wrapper:not(.click-box) .image-container {
	margin: 0 auto;
	max-width: 1000px;
	max-height: 750px;
}

#account .canvas-wrapper:not(.click-box) .canvas-container.swipe-left,
#account .image-wrapper:not(.click-box) .image-container.swipe-left {
	animation: ease-in swipe .5s reverse;
	pointer-events: none;
}

#account .canvas-wrapper:not(.click-box) .canvas-container.swipe-right,
#account .image-wrapper:not(.click-box) .image-container.swipe-right {
	animation: ease-out swipe .5s backwards;
	pointer-events: none;
}

/* retina needs max dimensions */
#account .canvas-wrapper.click-box .canvas-container,
#account .image-wrapper.click-box .image-container {
	max-width: 640px;
	max-height: 480px;
}

#account .canvas-wrapper:not(.click-box) .canvas-responsive,
#account .image-wrapper:not(.click-box) .image-responsive {
	cursor: zoom-in;
}

#account .canvas-container + .canvas-thumbnails,
#account .image-container + .image-thumbnails {
	padding-top: 25px;
}

#account .click-box > .canvas-container + .canvas-thumbnails,
#account .click-box > .image-container + .image-thumbnails {
	padding-top: 10px;
}

#account .canvas-thumbnails,
#account .image-thumbnails {
	display: flex;
	gap: 0;
	width: 100%;
	line-height: 1;
	z-index: 1;
}

#account .canvas-thumbnails > .img-container,
#account .image-thumbnails > .img-container {
	position: relative;
	cursor: pointer;
	max-width: 160px;
	max-height: 120px;
	flex: 1;
}

#account .click-box .canvas-thumbnails > .img-container,
#account .click-box .image-thumbnails > .img-container {
	max-width: 80px;
	max-height: 60px;
}

/* notification icon */
#account .material-icons.label-notification,
#account .material-icons-outlined.label-notification {
	display: inline-block;
	position: relative;
	margin-left: auto !important;
	top: 2px;
	font-size: 26px;
}

#account .label-notification[data-count]::after {
	font-family: 'plus_jakarta', sans-serif;
	letter-spacing: 0.01em;
	font-size: 9px;
	color: white;
	text-align: center;
	content: attr(data-count);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: var(--danger-color);
	height: 18px;
	width: 18px;
	border-radius: 50%;
	border: 1px solid white;
}

/* download container + link */
#account .column > .download-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 45px;
}

/* hide when proof is accepted or declined */
#account .column > .download-container.accepted > .icon,
#account .column > .download-container.accepted > .description,
#account .column > .download-container.declined > .icon,
#account .column > .download-container.declined > .description{
	display: none;
}

#account :not(.menu-item) > a.download-link {
	color: var(--anchor-color);
	line-height: 2.5;
}

#account :not(.menu-item) a.download-link > span.underline::after {
	background-color: var(--anchor-color);
}

#account :not(.sub-header):not(.menu-item) > a.download-link {
	position: relative;
	display: inline-block;
}

@keyframes move-arrow-back {
	0% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(-20px);
	}
	100% {
		transform: translateX(0px);
	}
}

@keyframes move-arrow-forward {
	0% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(20px);
	}
	100% {
		transform: translateX(0px);
	}
}

#account :not(.sub-header):not(.accepted):not(.declined):not(.menu-item) > a.download-link::before,
#account :not(.sub-header):not(.accepted):not(.declined):not(.menu-item) > a.download-link::after {
	font-family: "Material Icons";
	-webkit-font-feature-settings: "liga";
	color: var(--dark-anchor-color);
	position: absolute;
	font-size: 24px;
	line-height: 1.4;
	animation-name: move-arrow-left;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#account :not(.sub-header):not(.accepted):not(.declined):not(.menu-item) > a.download-link::before {
	content: "arrow_forward";
	animation-name: move-arrow-forward;
	left: -75px;
}

#account :not(.sub-header):not(.accepted):not(.declined):not(.menu-item) > a.download-link::after {
	content: "arrow_back";
	animation-name: move-arrow-back;
	right: -75px;
}

#account .accepted > a.download-link::before {
	position: absolute;
	left: -27px;
	content: "check_circle";
	font-family: "Material Icons Outlined";
	-webkit-font-feature-settings: "liga";
	color: var(--action-color);
	font-size: 19px;
	line-height: 2;
}

#account .declined > a.download-link::before {
	position: absolute;
	left: -27px;
	content: "cancel";
	font-family: "Material Icons Outlined";
	-webkit-font-feature-settings: "liga";
	color: var(--danger-color);
	font-size: 19px;
	line-height: 2;
}

/* tables */
#account-content .table-responsive {
	margin-top: 85px;
}

#account-content .table-responsive.table-top-border {
	border-top: 1px solid var(--divider-color);
}

#account .table-responsive.reward {
	margin-top: 10px;
}

#account .table-responsive.reward > .table {
	margin-top: 0;
}

#account-content .table-responsive > .table > tbody {
	position: relative;
}

#account-content .table-responsive > .table > tbody:not(:last-child)::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 15px;
	left: 5px;
	right: 5px;
	border-bottom: 1px solid var(--divider-color);
}

#account-content .table-responsive > .table > tbody > tr > td[colspan="4"] {
	font-weight: 700;
}

#account-content .table-responsive > .table > tbody > tr > td.delivery {
	color: var(--action-color);
	font-weight: 500;
}

#account-content .table-responsive > .table > tbody > tr > td.uploaded-file {
	display: flex;
	align-items: center;
}

#account-content .table-responsive > .table > tbody > tr > td.uploaded-file .internal-anchor {
	color: var(--anchor-color);
	transition: color 0.2s linear;
	line-height: 2.5;
	-webkit-user-select: none;
	user-select: none;
}

#account-content .table-responsive > .table > tbody > tr > td.default-logo .wrapper-label {
	display: flex;
	align-items: center;
}

#account-content .table-responsive > .table > tbody > tr > td.default-logo .wrapper-label[data-update-default-logo="true"] {
	cursor: pointer;
}

#account-content .table-responsive > .table > tbody > tr > td.default-logo .wrapper-label .material-icons-outlined {
	font-size: 20px;
	color: #5f6368;
	margin-left: -2px;
	margin-right: 8px;
}

/* invoice details */
#account-content > .inner .column > .details > .notify {
	font-size: 52px;
} 

#account-content > .inner .column > .details > .description {
	margin-top: 15px;
}

#account-content .table-responsive > .table > tbody.download-container tr:first-child > td {
	padding-top: 45px;
}

#account-content .flex-form > .flex-row > .flex-column > .form-control > input[type="radio"] {
	width: auto;
}

#account-content .flex-form.form-switch > .flex-row {
	flex-direction: row;
	margin-top: 0;
}

#account-content .flex-form.form-switch > .flex-row > .flex-column + .flex-column {
	margin-top: 0;
}

/* collapsible override when collapsible-form is inside collapsible */
#account-content .collapsible .collapsible-form > .flex-form {
	padding-top: 45px;
}

/* collapsible form */
#account-content .collapsible-form {
	max-height: 0px;
	overflow: hidden;
	transition: max-height 0.35s cubic-bezier(0,1,0,1);
}

#account-content .collapsible-form:not(.customer-info).active {
	max-height: 1000px;
	transition: max-height 0.5s ease-in-out;
}

/* inside collapsible form so we need some extra margins so outline is not clipped */
#account-content .collapsible-form .label-container {
	margin-left: 2px;
	margin-right: 2px;
}

/* some spacing between sections */
#account-content .collapsible-form.customer-info > h3:first-child,
#account-content .collapsible-form.customer-info > .h3:first-child {
	margin-top: 85px;
}

/* negative scroll-margin-top to compensate for the margin-top: 85px on h3 */
#account-content .collapsible-form.customer-info {
	scroll-margin-top: -45px;
}

/* need some extra max-height so content is not clipped */
#account-content .collapsible-form.customer-info.active {
	max-height: 5000px;
	transition: max-height 0.75s ease-in-out;
}

#account-content .collapsible-form .flex-form {
	padding-top: 5px;
}

/* show info icon only when the preceding input is readonly */
.flex-form .flex-column > .material-icons-outlined[data-toggle~="tooltip"] {
	position: absolute;
	right: 15px;
	top: 15px;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* fade in icon when input field becomes readonly */
.flex-form .flex-column > .form-control[readonly] + .form-placeholder + .material-icons-outlined[data-toggle~="tooltip"],
.flex-form .flex-column.payment-method-extra-info > .form-control + .form-placeholder + .material-icons-outlined[data-toggle~="tooltip"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* list styling */
#account-content ul:not(.navigation):not(.order-details),
#account-content ol:not(.navigation):not(.order-details) {
	list-style-position: outside;
	padding-left: 30px;
	margin-bottom: 30px;
}

#account-content ul:not(.navigation):not(.order-details) > li,
#account-content ol:not(.navigation):not(.order-details) > li {
	padding-bottom: 15px;
}

#account-content ul:not(.navigation):not(.order-details) > li:last-child,
#account-content ol:not(.navigation):not(.order-details) > li:last-child {
	padding-bottom: 0;
}

#account-content > .inner .column ul.password-rules {
	padding-left: 18px;
}

#account-content > .inner .column ul.password-rules > li {
	padding-bottom: 0;
}