/* logo upload popup */
body.logo-upload-visible {
	overflow-y: hidden;
}

body.logo-upload-visible.backdrop-visible .body-backdrop {
	top: 0;
	z-index: 9999 !important;
}

#logo-upload {
	padding-left: 82px;
	margin-right: 82px;
	overflow: overlay;
	background-color: rgba(255,255,255,0.8);
	z-index: 9998;
}

#logo-upload::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
	linear-gradient(160deg, rgba(237,14,107,1.0), rgba(255,255,255,0) 50.71%),
	linear-gradient(45deg, rgba(45,52,148,1.0), rgba(255,255,255,0) 50.71%),
	linear-gradient(215deg, rgba(252,177,54,1.0), rgba(255,255,255,0) 60%),
	linear-gradient(307deg, rgba(1,187,193,1.0), rgba(255,255,255,0) 100%);
}

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

#logo-upload h3,
#logo-upload .h3 {
	font-size: 26px;
	margin-bottom: 30px;
}

#logo-upload.ui-modal hr {
	margin-bottom: 65px;
}

#logo-upload > .ui-modal-left {
	position: fixed;
	top: 60px;
	left: 95px;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 90px);
	min-height: calc(100dvh - 90px);
	opacity: 1;
	z-index: 1;
}

#logo-upload > .ui-modal-left.fadeout > ol,
#logo-upload > .ui-modal-left.fadeout > div:not(.logotype)
{
	transition: all 1.5s;
	opacity: 0;
}

#logo-upload > .ui-modal-left div,
#logo-upload > .ui-modal-left > ol {
	color: var(--inverse-text-color);
}

#logo-upload > .ui-modal-left div:first-child {
	margin: 10px 0;
}

#logo-upload > .ui-modal-left > ol {
	list-style-position: outside;
	padding-left: 20px;
	flex-grow: 2;
}

#logo-upload > .ui-modal-left > ol > li > a {
	padding-left: 10px;
	vertical-align: top;
	pointer-events: none;
}

#logo-upload > .ui-modal-left > ol > li {
	opacity: 0.6;
	line-height: 2.3;
	margin: 15px 0;
}

#logo-upload > .ui-modal-left > ol > li.complete {
	opacity: 1;
}

#logo-upload > .ui-modal-left > ol > li.success {
	list-style-type: none;
	position: relative;
}

#logo-upload > .ui-modal-left > ol > li.success::after {
	content: "check_circle";
	font-family: "Material Icons";
	-webkit-font-feature-settings: "liga";
	position: absolute;
	left: -20px;
	color: var(--inverse-text-color);
	transform: scale(1.3);
}

#logo-upload > .ui-modal-left > ol > li  > a {
	color: var(--inverse-text-color);
	line-height: 2.3;
	font-weight: 100;
}

#logo-upload > .ui-modal-left > ol > li.complete > a {
	font-weight: 100;
	pointer-events: all;
}

#logo-upload > .ui-modal-left > ol > li.current > a {
	font-weight: 600;
}

#logo-upload > .ui-modal-left  span.underline::after {
	background-color: var(--background-color);
}

#logo-upload > .ui-modal-left > ol > li > a:hover > span.underline::after,
#logo-upload > .ui-modal-left > ol > li.current > a > span.underline::after {
	opacity: 1;
}

#logo-upload > .ui-modal-left .information {
	width: 400px;
	flex-grow: 1;
	margin-top: 50px;
}

#logo-upload > .ui-modal-left .information p {
	font-weight: 400;
}

#logo-upload > .ui-modal-left .logotype {
	line-height: 1;
	filter: brightness(0%) invert(1);
}

#logo-upload > .ui-modal-left .logotype > img {
	display: inline-block;
}

#logo-upload > .ui-modal-left .logotype > span {
	font-size: 16px;
	margin-left: 5px;
}

#logo-upload > .ui-modal-inner {
	margin-top: 0;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: none;
}

#logo-upload > .ui-modal-inner::-webkit-scrollbar {
	width: 7px;
}

#logo-upload > .ui-modal-inner::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: var(--background-color);
	cursor: grab;
}

#logo-upload > .ui-modal-inner::-webkit-scrollbar-thumb:hover {
	cursor: grab;
}

#logo-upload > .ui-modal-inner::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: rgba(0,0,0,0.1);
	margin: calc(100vh * 0.175);
}

#logo-upload.ui-modal > .ui-modal-inner > .ui-modal-dialog {
	width: 680px;
	border-radius: 20px;
	padding: 60px;
	margin-bottom: 30px;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content,
#logo-upload .ui-modal-body-step:nth-child(4) {
	min-height: calc(100vh - 210px);
	min-height: calc(100dvh - 210px);
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content-inner,
#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .slide-nav-container {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: none;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content-inner .picker-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 500px;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content-inner::-webkit-scrollbar,
#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .slide-nav-container::-webkit-scrollbar {
	display: none;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content:not(.fixed-footer) .slide-nav-container {
	padding-bottom: 0;
}

/* pantone picker container - #logotype-settings-3-1 */
#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content:not(.fixed-footer) p + .content-inner {
	height: calc(100vh - 397px);
	height: calc(100dvh - 397px);
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content-inner .palette-container {
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 8px 10px 8px;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content-inner .picker-wrapper .selected-color-container {
	font-size: 14px;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content-inner .picker-wrapper .selected-color-container .label-color,
#logo-upload .slide-nav > .menu-item > .label-container > .label-wrapper .label-color {
	position: relative;
	display: inline-block;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	margin-left: 7px;
	top: 3px;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content.fixed-footer .content-footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	background-color: var(--background-color);
	padding-top: 20px;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content.fixed-footer .content-footer .btn {
	display: block;
	margin: 0 auto;
}

/* .slide-nav-container - #logotype-settings-1/2/3 */
#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .slide-nav-container {
	height: calc(100vh - 266px);
	height: calc(100dvh - 266px);
	padding-bottom: 70px;
}

/* .slide-nav-container - #logotype-settings-2 */
#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .slide-nav-container.limited-height {
	height: calc(100vh - 465px);
	height: calc(100dvh - 465px);
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .slide-nav-container.limited-height > .color-desc-container {
	margin-top: 20px;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .slide-nav-container.limited-height .content-footer {
	display: none;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .slide-nav-container > .slide-nav {
	padding: 2px 0;
}

#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .slide-nav-container > input.form-control {
	border-radius: 6px;
}

/* floatingt container, just floating above the background */
#logo-upload .ui-modal-floating-container {
	display: none;
	position: relative;
	max-width: 1200px;
	margin: 60px auto;
}

@media only screen and (max-height: 1093px) {

	#logo-upload > .ui-modal-inner > .ui-modal-dialog > .ui-modal-content .content.fixed-footer .content-inner {
		overflow: hidden;
	}

	#logo-upload .slide-nav > .menu-item:nth-child(2) > .content {
		height: auto;
	}

	#logo-upload .ui-modal-floating-container {
		max-width: 960px;
	}

}

#logo-upload > .btn-close {
	top: 42px;
}

#logo-upload > .btn-close .material-icons {
	font-size: 40px;
}

#logo-upload > .ui-modal-inner .btn {
	max-width: 320px;
}

#logo-upload > .ui-modal-inner .btn.btn-completed {
	max-width: 460px;
}

#logo-upload .scan-title.h3,
#logo-upload .information > .h3 {
	margin-bottom: 20px;
}

#logo-upload button:not([data-dismiss="alert"]) {
	padding: 18px 15px;
	font-size: 16px;
}

#logo-upload .ui-modal-body.menu-loading::after {
	content: "";
	display: block;
	position: absolute;
	border: 7px solid rgba(0,0,0,0.1);
	border-top: 7px solid rgba(0,0,0,0.3);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	animation: spin 2s linear infinite;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

#logo-upload input[type='url'].form-control {
	text-align: center;
	border-radius: 6px;
}

#logo-upload .ui-modal-body-step {
	display: none;
	position: relative;
}

#logo-upload .logotype-preview {
	position: relative;
	min-height: 20px;
	margin-bottom: 45px;
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23A0A0A0FF' stroke-width='3' stroke-dasharray='10%2c15' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
	padding: 2px;
	margin: 0 auto;
}

#logo-upload .logotype-preview > img.grow {
	animation: zoom-in .2s forwards;
}

@keyframes zoom-in {
	0% {
		transform: scale(0.2);
	}
	100% {
		transform: scale(1);
	}
}

#logo-upload .ui-modal-preview {
	display: none;
	position: absolute;
	top: 0;
	right: -200px;
	width: 180px;
	min-height: 30px;
	padding: 18px;
	background-color: var(--background-color);
	border-radius: 20px;
	box-shadow: 0 0 35px rgba(0,0,0,0.12);
	z-index: 1;
}

#logo-upload .ui-modal-preview.bright,
#logo-upload .logotype-preview.bright {
	background-color: #b9bcbf;
}

#logo-upload .ui-modal-preview.show {
	display: block;
}

#logo-upload .logotype-preview > img,
#logo-upload .ui-modal-preview > img {
	display: block;
	max-height: 400px;
	margin: 0 auto;
}

#logo-upload .logotype-preview > img {
	transform: scale(0.2);
	transform-origin: center;
}

#logo-upload .logotype-preview ~ p {
	padding-top: 20px;
}

#logo-upload .ui-modal-arrow-preview {
	display: none;
	cursor: pointer;
}

#logo-upload .ui-modal-preview .ui-modal-arrow-preview {
	display: none;
	position: absolute;
	bottom: -40px;
	left: 50px;
	color: var(--inverse-text-color);
}

#logo-upload .ui-modal-preview .ui-modal-arrow-preview.show {
	display: block;
}

#logo-upload .ui-modal-preview .ui-modal-arrow-preview button {
	padding: 0;
	margin-left: 10px;
	background-color: transparent;
}

#logo-upload .ui-modal-arrow-back,
#logo-upload .ui-modal-arrow-settings {
	width: 250px;
	display: none;
	position: absolute;
	color: var(--button-text-color);
	cursor: pointer;
}

#logo-upload .ui-modal-arrow-back.show,
#logo-upload .ui-modal-arrow-settings.show {
	display: block;
}

#logo-upload .ui-modal-arrow-back button,
#logo-upload .ui-modal-arrow-settings button {
	padding: 0;
	background-color: transparent;
}

#logo-upload .ui-modal-arrow-back button {
	margin-right: 10px;
}

#logo-upload .ui-modal-arrow-settings button {
	margin-left: 10px;
}

#logo-upload .ui-modal-arrow-back button .material-icons,
#logo-upload .ui-modal-arrow-settings button .material-icons {
	font-size: 40px;
	font-weight: 500;
}

#logo-upload .ui-modal-arrow-back > span,
#logo-upload .ui-modal-arrow-settings > span {
	font-size: 18px;
	vertical-align: middle;
}

#logo-upload .ui-modal-dialog .ui-modal-arrow-back {
	top: 0;
	left: -150px;
	z-index: 2;
}

#logo-upload #logo-upload-svg-preview .ui-modal-arrow-back {
	display: block;
	top: 10px;
	left: 0px;
	z-index: 2;
}

#logo-upload .ui-modal-dialog .ui-modal-arrow-settings {
	top: 0;
	left: 700px;
}

#logo-upload .ui-modal-body-step.active {
	display: block;
}

#logo-upload textarea.form-error,
#logo-upload input.form-error {
	outline: none;
	border: 1px solid #ff0000;
}

#logo-upload textarea:valid.form-error,
#logo-upload input:valid.form-error,
#logo-upload .form-control:invalid:focus {
	border: 1px solid transparent;
}

#logo-upload .ui-modal-body-step .error-file-wrapper {
	text-align: center;
	margin: 40px 0 20px 0;
}

#logo-upload .ui-modal-body-step .error-file-wrapper .error-file-name {
	color: #1B77B6;
	font-weight: 600;
}

#logo-upload .ui-modal-body-step:nth-child(3).active {
	display: flex;
	flex-direction: column;
}

#logo-upload .ui-modal-body-step:nth-child(3) > .wrapper-upload.center {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

#logo-upload .ui-modal-body-step:nth-child(4) > .wrapper-upload.center {
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	margin: 0 auto;
	padding-top: 20px;
}

#logo-upload .ui-modal-floating-container > .h3,
#logo-upload .ui-modal-floating-container > p  {
	color: var(--inverse-text-color);
}

#logo-upload .ui-modal-floating-container > .h3 {
	font-size: 56px;
	font-weight: 800;
	margin-bottom: 20px;
}

#logo-upload .ui-modal-floating-container > p {
	font-size: 16px;
	margin-bottom: 65px;
}

#logo-upload .ui-modal-floating-container:nth-of-type(2) > p {
	font-size: 36px;
	font-weight: lighter;
}

#logo-upload .ui-modal-floating-container:nth-of-type(2) > .h3 {
	padding-top: 20px;
	font-size: 60px;
}

#logo-upload .ui-modal-floating-container:nth-of-type(2) > .wrapper-upload {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 130px;
}

#logo-upload .ui-modal-floating-container:nth-of-type(2) > .wrapper-upload > button {
	padding-top: 28px;
	padding-bottom: 28px;
}

#logo-upload .ui-modal-floating-container:nth-of-type(2) > .wrapper-upload > button:first-child {
	margin-bottom: 10px;
}

#logo-upload .ui-modal-floating-container:nth-of-type(3) > .wrapper-upload {
	margin-top: 50px;
}

#logo-upload .ui-modal-floating-container:nth-last-of-type(1) > .wrapper-upload > button,
#logo-upload .ui-modal-floating-container:nth-of-type(3) > .wrapper-upload > button {
	max-width: 410px;
	padding: 24px 0;
}

#logo-upload .ui-modal-floating-container.show {
	display: block;
}

#logo-upload .ui-modal-floating-container .wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: 25px;
	justify-content: center;
}

#logo-upload .ui-modal-floating-container .wrapper .img-container {
	display: grid;
	background-color: rgba(0,0,0,0.12);
	border-radius: 15px;
	padding: 20px;
	aspect-ratio: 1 / 1;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease-in;
}

#logo-upload .ui-modal-floating-container .wrapper .img-container:hover {
	background-color: rgba(0,0,0,0.2);
}

#logo-upload .ui-modal-floating-container .wrapper .img-container > img,
#logo-upload .ui-modal-floating-container .wrapper .img-container > svg {
	transition: transform .15s ease-in;
	transform: scale(1);
}

#logo-upload .ui-modal-floating-container .wrapper .img-container:hover > img,
#logo-upload .ui-modal-floating-container .wrapper .img-container:hover > svg {
	transform: scale(1.05);
}

#logo-upload .ui-modal-floating-container .wrapper .img-container > img,
#logo-upload .ui-modal-floating-container .wrapper .img-container > svg {
	align-self: center;
	min-width: 5vw;
	width: 100%;
	min-height: 0;
	max-height: 100%;
	height: auto;
}

#logo-upload .ui-modal-floating-container .strike {
	margin-top: 70px;
	margin-bottom: 70px;
}

#logo-upload .ui-modal-floating-container .strike > span {
	color: var(--inverse-text-color);
}

#logo-upload .circle-nav {
	display: flex;
	flex-wrap: nowrap;
	margin: 30px 0;
	padding: 0 !important;
	width: 100%;
	column-gap: 15px;
}

#logo-upload .circle-nav > .menu-item  {
	align-self: center;
	flex: 1;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#logo-upload .circle-nav > .menu-item:first-child {
	padding-left: 2px;
}

#logo-upload .circle-nav > .menu-item:last-child {
	padding-right: 2px;
	align-self: normal;
}

#logo-upload .circle-nav > .menu-item > span {
	display: flex;
	width: 100%;
	min-width: 40px;
	height: auto;
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	background-color: rgba(0,33,64,0.02);
	border-radius: 50%;
	cursor: pointer;
}

#logo-upload .circle-nav > .menu-item:last-child > span {
	min-width: 80px;
	height: 100%;
	border-radius: 25px;
	aspect-ratio: unset;
}

#logo-upload .circle-nav > .menu-item > span:hover {
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
}

#logo-upload .circle-nav > .menu-item.active > span {
	box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
	font-weight: 800;
}

/* slide-nav layout (mostly identical to product options).
I added this as separate classes for now, may be changed later */
#logo-upload .slide-nav {
	margin: 0;
	padding: 0;
}

#logo-upload .slide-nav > .menu-item {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	padding: 0 2px 15px 2px;
}

#logo-upload .slide-nav > .menu-item.active > .label-container {
	box-shadow: 0px 0px 0px 2px rgb(0 0 0);
	transition: none;
}

#logo-upload .slide-nav > .menu-item > .label-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-height: 90px;
	padding: 20px 30px;
	border: 1px solid transparent;
	background-color: rgba(0,33,64,0.02);
	border-radius: 3px;
	line-height: 1.9;
	font-size: 13px;
}

#logo-upload .slide-nav > .menu-item > .label-container:hover {
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
}

#logo-upload .slide-nav > .menu-item > .label-container .label-heading {
	font-weight: 700;
}

#logo-upload .slide-nav > .menu-item > .label-container > .label-heading > span {
	position: relative;
}

/* required menus should display asterisk */
#logo-upload .slide-nav > .menu-item > .label-container[data-required] > .label-heading > span::before {
	font-family: "Material Icons";
	content: "emergency";
	-webkit-font-feature-settings: "liga";
	color: #aaaaaa;
	position: absolute;
	display: inline-block;
	font-size: 12px;
	font-weight: 400;
	right: -15px;
}

/* hide required icon once the primary (heading-adjacent) caption is no longer default */
#logo-upload .slide-nav > .menu-item > .label-container[data-required]:not(:has(> .label-heading + .label-wrapper .label-caption.label-default)) > .label-heading > span::before {
	content: "";
}

#logo-upload .slide-nav > .menu-item > .label-container > .label-wrapper .label-caption {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 90%;
}

#logo-upload .slide-nav > .menu-item > .label-container > .label-wrapper .label-default {
	color: var(--default-text-color);
}

#logo-upload .slide-nav > .menu-item > .content.fixed-footer .selected-color-container .label-color.bright,
#logo-upload .slide-nav > .menu-item > .label-container > .label-wrapper .label-color.bright {
	border: 1px solid #cccccc;
}

#logo-upload .slide-nav > .menu-item > .label-container::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;
	font-weight: 400;
	top: 50%;
	right: 21px;
	margin-top: -20px;
}

#logo-upload .slide-nav >.menu-item > .content,
#logo-upload #logotype-settings-3 .slide-nav-container .content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	min-height: calc(100vh - 210px);
	min-height: calc(100dvh - 210px);
	background-color: var(--background-color);
	visibility: hidden;
	transform: translateX(100%);
	transition: visibility 0s linear 0.2s, max-height 0s linear 0.2s, transform 0.2s cubic-bezier(0,0,0.1,1);
	z-index: 1;
}

#logo-upload .slide-nav > .menu-item > .content.active,
#logo-upload #logotype-settings-3 .slide-nav-container .content.active {
	visibility: visible;
	transform: translateX(0);
	transition: visibility 0s linear 0s, transform 0.2s cubic-bezier(0,0,0.1,1);
}

#logo-upload .slide-nav > .menu-item > .content .btn-previous {
	position: absolute;
	top: -20px;
	left: -20px;
}

#logo-upload .slide-nav > .menu-item > .content .btn-previous > span {
	font-size: 32px;
}

#logo-upload .slide-nav > .menu-item > .content .btn-previous[disabled] {
	opacity: 0.4;
	pointer-events: none;
}

#logo-upload .logo-send-success-wrapper button {
	color: var(--button-text-color);
	position: static;
}

#logo-upload .faq-wrapper {
	display: none;
	position: relative;
	width: 680px;
	margin: 150px auto 300px auto;
}

#logo-upload .faq-wrapper.active {
	display: block;
}

#logo-upload .faq-wrapper .h3 {
	margin-bottom: 60px;
}

#logo-upload .collapsible .content-inner {
	color: var(--inverse-text-color);
}

/* the color of the elements in the FAQ section is white. */
#logo-upload .collapsible.faq-wrapper h2,
#logo-upload .collapsible.faq-wrapper .h2,
#logo-upload .collapsible.faq-wrapper h3,
#logo-upload .collapsible.faq-wrapper .h3,
#logo-upload .collapsible.faq-wrapper h4,
#logo-upload .collapsible.faq-wrapper .h4,
#logo-upload .collapsible.faq-wrapper h5,
#logo-upload .collapsible.faq-wrapper .h5,
#logo-upload .collapsible.faq-wrapper a,
#logo-upload .collapsible.faq-wrapper a::after {
	color: var(--inverse-text-color);
}

#logo-upload .collapsible.faq-wrapper a::after {
	line-height: 1.8;
}

#logo-upload .faq-wrapper .internal-anchor > span.underline::after {
	bottom: 0.5em;
	background-color: var(--inverse-text-color);
}

#logo-upload .collapsible > ul.collapsible-nav > li.menu-item:first-child {
	border-top: 1px solid rgba(255,255,255,0.4);
}

#logo-upload .collapsible > ul.collapsible-nav > li.menu-item {
	border-bottom: 1px solid rgba(255,255,255,0.4);
}

#logo-upload .collapsible > ul.collapsible-nav > li.menu-item > a {
	border-bottom: 0px;
}

#logo-upload .collapsible ul > li.menu-item > .collapsible-content::after,
#logo-upload .collapsible ul > li.menu-item > .collapsible-content::before {
	box-shadow: unset !important;
}

#logo-upload .color-detail-header {
	position: relative;
}

/* show header shadow box-shadow when overflow */
#logo-upload #logotype-settings-2.header-overflow > .color-detail-header::before,
#logo-upload #logotype-settings-3-1.header-overflow > .slide-nav-container::before {
	content: "";
	position: absolute;
	height: 44px;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 10px 20px -20px rgba(0, 0, 0, 1);
	z-index: 1;
	pointer-events: none;
}

#logo-upload #logotype-settings-3-1.header-overflow > .slide-nav-container::before {
	top: 0;
	bottom: unset;
}

/* show footer shadow box-shadow when overflow */
#logo-upload #logotype-settings-2.footer-overflow > .content-footer::before,
#logo-upload #logotype-settings-3-1.footer-overflow > .slide-nav-container::after {
	content: "";
	position: absolute;
	height: 44px;
	bottom: 30px;
	left: 0;
	right: 0;
	box-shadow: 0 -10px 20px -20px rgba(0, 0, 0, 1);
	pointer-events: none;
}

#logo-upload #logotype-settings-3-1.footer-overflow > .slide-nav-container::after {
	bottom: -44;
}

#logo-upload .logo-tool-video > .video-header > p {
	margin-bottom: 65px;
	font-size: 26px;
	font-weight: 600;
	color: var(--inverse-text-color);
}

/* line clamp - only allow certain amounts of text rows before clipping */
#logo-upload .line-clamp-checkbox {
	opacity: 0;
	position: absolute;
	pointer-events: none;
}

@supports (-webkit-line-clamp: 4) {
	#logo-upload .line-clamp {
		text-overflow: ellipsis;
		word-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

#logo-upload .line-clamp > p:last-of-type {
	margin-bottom: 0;
}

#logo-upload .line-clamp-checkbox:checked  + .line-clamp {
	-webkit-line-clamp: initial;
}

#logo-upload .line-clamp + label {
	display: inline-block;
	color: var(--anchor-color);
	cursor: pointer;
	margin-top: 10px;
}

#logo-upload .line-clamp + label:hover {
	text-decoration: underline;
}

#logo-upload .line-clamp + label > span {
	display: none;
}

#logo-upload .line-clamp + label > span:first-of-type {
	display: block;
}

#logo-upload .line-clamp-checkbox:checked  + .line-clamp  + label > span:first-of-type {
	display: none;
}

#logo-upload .line-clamp-checkbox:checked  + .line-clamp  + label > span:last-of-type {
	display: block;
}

@supports not (-webkit-line-clamp: 4) {
	#logo-upload .line-clamp + label {
		display: none;
	}
}

@media (pointer: fine) {

	#logo-upload .palette-container::-webkit-scrollbar {
		width: 2px;
		border-radius: 4px;
		background: transparent;
 }

	#logo-upload .palette-container::-webkit-scrollbar-thumb {
		background-color: black;
	}
}