@media (max-width: 768px) {
	body:has(main.templator){ margin-top: 88px; }
}

/*  Special highlighter (prevent bubbling)  */
.tooltip:hover:not(:has(.tooltip:hover)) { background-color: rgb(245, 231, 230) !important; }

/*  <div id="message"> info / alert </div>  */
#message {
	display: none;
	position: fixed;
	z-index: 100;
	top: 55px;
	top: calc(50px + 1vw);
	right: 1%;
	margin-right: 10px;
	text-align: center;
	padding-left: 4px;
	border-radius: 4px 5px 5px 4px;
}

#message div {
	padding: 12px 24px;
	display: inline-block;
	border-radius: 0 4px 4px 0;
	white-space: nowrap;
	width: 100%;
}

#message.info { background-color: var(--success-color); box-shadow: 0 0 12px -1px var(--success-color) }
#message.info div {background-color: var(--success--bg-color) }

#message.alert { background-color: var(--alert-color); box-shadow: 0 0 12px -1px var(--alert-color); }
#message.alert div { background-color: var(--alert-bg-color) }



/*  MICROSITE  */
form .image_preview { display: none; }

form fieldset.image_preview > div {
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.03);
	width: 100%;
	min-height: 40px;
	overflow: hidden;
	background-image: url(/assets/img/check.gif);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 32px;
}
form fieldset.image_preview > div > img { width: 100%; display: block; }
form fieldset.image_preview > div:has(> img) { background: none; border: none; }

@media screen and (min-width: 568px)
{
	form.full fieldset.image_preview > div { width: 65%; margin-left: 25%; }
	form.full fieldset.font_preview { flex-wrap: wrap; }
	form.full fieldset.font_preview span#microsite__main_font_preview { margin-left: 25%; }
}

#thePreview {
	z-index: 2;
	position: absolute;
	margin-top: 6px;
	left: calc(25% + 200px);
	width: calc(72% - 200px);
	max-width: 414px;
	aspect-ratio: 100 / 140;
	overflow: hidden;
	box-shadow: var(--box-shadow);
	margin-left: 2em;
}
#micrositeEdit #thePreview { box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.03); }
#thePreview iframe {
    border: 0;
    display: block;
	transform-origin: 0 0;
	width: 200%;
	height: 200%;
	transform: scale(0.5);
}
@media screen and (max-width: 567px) {
	#thePreview { margin-top: 25px; left: 200px; width: calc(98% - 200px); }
}
@media screen and (min-width: 1024px) {
	#thePreview iframe { width: 125%; height: 125%; transform: scale(0.8); }
}

/*  TEMPLATOR  */

main.templator {
	--bg-aside-item: #F5F2F0;
	--bg-section: var(--th-bg-color);
 }

.topnav:has(+ main.templator) {  border-bottom: 1px solid var(--medium-color); }
main.templator form h2 { padding: 1% 2%; font-size: 1.1em; }
main.templator form h2:first-child { margin-top: -0.2%; }

main.templator > form.aside { width: 100%; padding: 0; border: none; display: block; background-color: unset; font-size: 0.95em}
main.templator > form.aside > .first { display: none; }
main.templator > form.aside > .first .navigation { width: 100%; min-width: unset; max-width: unset; }

main.templator > form.aside > .second { scroll-behavior: smooth; }
main.templator > form.aside > .second > .wrap { padding: 6px; margin-left: 6px; margin-right: 6px; }
main.templator > form.aside > .second > .wrap > h2 { margin: 6px -6px 0 -6px; margin-top: 10px; background-color: var(--medium-color); cursor: pointer; padding: 0.3em 0.5em; color: var(--second-brand-color); border-radius: 4px; }
main.templator > form.aside > .second > .wrap > h2.open { border-bottom-left-radius: 0;border-bottom-right-radius: 0; }
main.templator > form.aside > .second > .wrap > h2:first-child { margin-top: 0; }
main.templator > form.aside > .second > .wrap > h2::before { position: absolute; right: 10px; }
main.templator > form.aside > .second > .wrap > p { margin-top: 0; font-size: 80%; }

main.templator > form.aside > .second .layoutSection { margin: 0 -6px 0 -6px; padding: 10px; overflow: hidden; background-color: var(--bg-aside-item); border-width: 0 1px 1px 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.03); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
main.templator > form.aside > .second .layoutSection.closed { display: none; }
main.templator > form.aside > .second .layoutSection > p { margin-top: 0; font-size: 80%; }
main.templator > form.aside > .second .layoutSection h3 { background-color: var(--medium-color); margin: 15px -10px 5px -10px; padding: 5px 10px; }
main.templator > form.aside > .second .layoutSection h4 { background-color: var(--medium-color); margin: 15px -10px 5px -10px; padding: 2px 10px; }
main.templator > form.aside > .second .layoutSection h5 { width: 100%; margin-bottom: 0; }
main.templator > form.aside > .second .layoutSection hr { margin: 12px 0; }
main.templator > form.aside > .second .layoutSection fieldset { padding: 10px 0; }
main.templator > form.aside > .second .layoutSection fieldset textarea { resize: vertical; }
main.templator > form.aside > .second .layoutSection fieldset .trumbowyg-box { background-color: #FFF; }
main.templator > form.aside > .second .layoutSection .fieldNote { margin-top: -8px; }
main.templator > form.aside > .second .layoutSection fieldset ._save_as { vertical-align: top; }

main.templator > form.aside > .second .layoutSection fieldset .trumbowyg-button-pane .trumbowyg-button-group::after { margin: 0 4px; }
main.templator > form.aside > .second .layoutSection fieldset .trumbowyg-button-pane:not(.trumbowyg-disable) button.template { opacity: .2; cursor: default; pointer-events: none; }
main.templator > form.aside > .second .layoutSection fieldset .trumbowyg-button-pane.trumbowyg-disable button.template { opacity: 1; cursor: pointer; pointer-events: auto; }
main.templator > form.aside > .second .layoutSection fieldset .trumbowyg:not(.trumbowyg-fullscreen) .trumbowyg-button-group:nth-child(3)::after { display: none; }

main.templator > form.aside > .third { background-color: none; padding: 7px; }
main.templator > form.aside > .third.loading input { opacity: 0.6 !important; filter: saturate(0) !important; }

main.templator > form.aside > .third fieldset.buttons { display: flex; flex-direction: row; gap: 7px; }
main.templator > form.aside > .third fieldset.buttons > * { flex: 1 1 0; margin: 0; text-indent: -300px; }
main.templator > form.aside > .third fieldset.buttons > input { background: var(--image) center center no-repeat; background-size: 1em auto;}
main.templator > form.aside > .third fieldset.buttons > input.save { --image: url(https://storage.wowcast.co/assets/webfonts/solid/floppy-disk.svg); }
main.templator > form.aside > .third fieldset.buttons > input.reset { --image: url(https://storage.wowcast.co/assets/webfonts/solid/rotate-left.svg); }
main.templator > form.aside > .third fieldset.buttons > input.goBack { --image: url(https://storage.wowcast.co/assets/webfonts/solid/arrow-left.svg); }

form.full .layoutSection h2 fieldset input[type=checkbox]:first-child { margin-left: 0; margin-right: 3px; }
form.full .layoutSection h2 fieldset input[type=checkbox]:first-child + label { font-weight: bold; }

main.templator form fieldset.alternative { flex-wrap: wrap;}
main.templator form fieldset.alternative + fieldset { margin-top: -1.1em }
main.templator form fieldset.alternative label:first-child { min-width: 100% }
main.templator form fieldset.alternative label:last-child { width: auto !important}

main.templator div[id*="_expire_wrap"] { max-width: 100%; overflow: hidden; }
main.templator div[id*="_expire_wrap"] > *,
main.templator div[id*="_expire_wrap"] > fieldset:first-child * { width: 100%; max-width: 100%;  }
main.templator form fieldset select { max-width: 100%; }
main.templator form fieldset select#microsite__main_font { width: 100%; }
main.templator form fieldset.font_preview span { display: block; padding: 0.4em; max-width: 100%; background: var(--medium-color); font-size: 0.9em;}

main.templator fieldset:has(input[type="radio"]) label:first-child,
main.templator fieldset:has(input[type="checkbox"]) label:first-child { flex: 0 0 100%; }

/* >= 568px, horizontal mobile */
@media screen and (min-width: 568px)
{
    main.templator form fieldset { display: inherit }
    main.templator form fieldset label:has( + input ),
    main.templator form fieldset label:has( + select ),
    main.templator form fieldset label:has( + textarea ),
    main.templator form fieldset label:has( + div ),
    main.templator form fieldset label:last-child { width: 100% !important; padding: 0.3em 0 !important; text-align: left !important; }
	main.templator form fieldset label:has( + span ) { width: 97% !important;}
    main.templator form fieldset input[type="text"],
    main.templator form fieldset input[type="email"],
    main.templator form fieldset input[type="password"],
    main.templator form fieldset input[type="url"],
    main.templator form fieldset textarea { width: 100% }
    main.templator form .fieldNote { margin: -3px 0.3em 0.3em 0.3em ; }
    main.templator form input[type="radio"]:first-child,
    main.templator form input[type="checkbox"]:first-child {margin-left: inherit;}
    main.templator form fieldset input[type="checkbox"] + label,
    main.templator form fieldset input[type="radio"] + label { width: auto; margin-left: 0.1em; margin-right: 0.3em; }
}

@media screen and (min-width: 768px)
{
	main.templator { max-height: calc(100vh - 100px); min-height: calc(100vh - 100px); }

	main.templator > form.aside {
		width: 320px;
		flex: 0 1 320px;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	main.templator > form.aside > .first { flex: 1 1 0; }
	main.templator > form.aside > .first .navigation { margin: 0; display: block; }
	main.templator > form.aside > .first .navigation::-webkit-scrollbar { width: 10px; }
	main.templator > form.aside > .first .navigation::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0, 0, 0, 0.40); }

	main.templator > form.aside > .second { flex: 1 1 100%; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
	main.templator > form.aside > .second::-webkit-scrollbar { width: 10px; }
	main.templator > form.aside > .second::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0, 0, 0, 0.40); }

	main.templator > form.aside > .third { box-shadow: var(--box-shadow); }
	main.templator > form.aside > .third { flex: 1 1 0; height: 180px; }
}



/*  SPECIAL FIELDSETS  */
fieldset.tinyUnit { display: flex !important; flex-wrap: wrap; }
fieldset.tinyUnit label { flex: 0 0 100%; }
fieldset.tinyUnit select { width: 60px; }
@media screen and (min-width: 568px)
{
	form.full fieldset.tinyUnit label:first-child { flex: 0 0 25%; }
}

fieldset.tinyAlign { display: flex; flex-wrap: wrap; }
fieldset.tinyAlign label:first-child { flex: 0 0 100%; }
fieldset.tinyAlign input[type=radio] + label { margin-right: 25px; }
@media screen and (min-width: 568px)
{
	form.full fieldset.tinyAlign label:first-child { flex: 0 0 25%; }
}

fieldset.tinyRadio { display: flex; flex-wrap: wrap; }
fieldset.tinyRadio input { margin-top: 2px; }
fieldset.tinyRadio input[type=radio] { flex: 0 0 24px; margin: 2px 0 4px 0; }
fieldset.tinyRadio input[type=radio] + label { flex: 1 1 content; margin: 0; }
@media screen and (min-width: 568px)
{
	form.full fieldset.tinyRadio label:first-child { flex: 0 0 25%; }
	form.full fieldset.tinyRadio input[type=text],
	form.full fieldset.tinyRadio input[type=file] { margin-top: 8px; margin-left: 25%; }
	form.full fieldset.tinyRadio input[type=radio] + label { flex: 0 0 content; }
}



/*  COLUMNATOR  */
.columnator > div { display: flex; width: 100%; }
.columnator > div.columnator_in { gap: 1px; }
.columnator > div.columnator_in > input { padding: 8px 4px; text-align: center; width: inherit; }
.columnator > div.columnator_in > input:nth-child(odd) { flex: 1 1 0%; }
.columnator > div.columnator_in > input:nth-child(even) { flex: 1 1 0%; padding: 0.6em 0.9em }
.columnator > div.columnator_out { height: 50px; border: 1px solid #AAA; border-radius: 2px; margin-top: 1px; }
.columnator > div.columnator_out > div { flex-grow: 1; flex-shrink: 1; }
.columnator > div.columnator_out > div.column_spacer { background: linear-gradient(45deg, #FFF, transparent); }
.columnator > div.columnator_out > div.column_content { background: linear-gradient(45deg, #000, transparent); cursor: pointer; }
.columnator > div.columnator_labels { margin-top: 1px; align-items: center; }
.columnator > div.columnator_labels > label,
.columnator > div.columnator_labels > label:last-child { flex: 1 1 0%; text-align: center !important; font-size: 80%; width: auto !important; min-width: unset !important;padding: 0 !important;flex: 1 1 0% !important; font-weight: normal !important;}
.columnator > div.columnator_labels > label:nth-child(even) { padding: 0 0.1em }



/*  TRUMBOWYG  */
main.templator form fieldset .trumbowyg-box { border-color: var(--bg-section) }
main.templator form fieldset .trumbowyg-textarea { resize: none !important; }


/*  PREVIEW  */
main.templator > section { min-height: 100px; background-color: var(--bg-section); box-shadow: var(--box-shadow); }

main.templator > section #selector { height: 32px; line-height: 32px; text-align: center; }
main.templator > section #selector .active { font-weight: bold; }

main.templator > section #iframeWrap {
	width: 100%;
	height: 300px;
	margin: 0 auto 5px auto;
	background-color: #FFF;
	box-shadow: var(--box-shadow);
	overflow: hidden;
}

main.templator > section #iframeWrap iframe {
	border: none;
	transform-origin: 0 0;
}
main.templator > section #iframeWrap iframe.loading {
	background: url(/assets/img/check.gif) no-repeat center 45%;
	background-size: 10%;
}

main.templator > section #iframeWrap.mobile iframe { width: 100%; height: 100%; }
main.templator > section #iframeWrap.desktop iframe { width: 400%; height: 400%; transform: scale(0.25); }

/* (from) horizontal mobile */
@media screen and (min-width: 568px) and (max-width: 767px) {
	main.templator > section #iframeWrap { width: 412px; height: 426px; }
	main.templator > section #iframeWrap.desktop iframe { width: 250%; height: 250%; transform: scale(0.4); }
}

/* (from) vertical tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	main.templator > section #iframeWrap.mobile { width: 400px; height: calc(100% - 40px); }
	main.templator > section #iframeWrap.desktop { width: 412px; height: calc(100% - 40px); }
	main.templator > section #iframeWrap.desktop iframe { width: 250%; height: 125%; transform: scale(0.4); }
}

/* (from) horizontal tablet + desktop */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
	main.templator > section #iframeWrap.mobile { width: 400px; height: calc(100% - 40px); }
	main.templator > section #iframeWrap.desktop { width: 512px; height: calc(100% - 40px); }
	main.templator > section #iframeWrap.desktop iframe { width: 200%; height: 125%; transform: scale(0.5); }
}

/* (from) large desktop */
@media screen and (min-width: 1200px)
{
	main.templator > section #iframeWrap.mobile { width: 400px; height: calc(100% - 40px); }
	main.templator > section #iframeWrap.desktop { width: 820px; height: calc(100% - 40px); }
	main.templator > section #iframeWrap.desktop iframe { width: 125%; height: 125%; transform: scale(0.8); }
}

/* (from) ultra large desktop */
@media screen and (min-width: 1600px)
{
	main.templator > section #iframeWrap.desktop { width: 1300px; height: calc(100% - 40px); }
}

/* Icons */
main.templator > form.aside > .second > .wrap > h2:before   	 { content: "\f146"; }
main.templator > form.aside > .second > .wrap > h2.closed:before { content: "\f0fe"; }



/*  LANGUAGES @TODO  */
ol.lang { display: flex; flex-direction: row; margin: 0; padding: 0; }
ol.lang li {
	display: inline-block;
	width: 50px;
	padding: 2px 6px;
	margin-right: 2px;
	border-top-left-radius: 1px;
	border-top-right-radius: 5px;
	text-align: center;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #CCC;
	cursor: pointer;
}
ol.lang li:hover { background-color: white; }
ol.lang li.active { background-color: white; font-weight: bold; }