/* Microsite skin */

#pagesTable .fa-icon { opacity: 0.6; }
#pagesTable td .fa-icon {color: var(--first-brand-color); }

.modtable.fancy td[data-column="pages"]::after { content: " page(s)"; }

/* Forms */
form fieldset div.editor { width: 100%; background-color: white; }
form fieldset select,
form fieldset input[type=number] { width: initial; }

/* (from) vertical tablet */
@media screen and (min-width: 768px)
{
	form.full fieldset input.tiny50 { width: 50px; text-align: center; text-transform: uppercase; }
}

/* ***  RGB(A) selector  *** */
form fieldset input.RGBA { text-align: center; text-transform: uppercase; width: 180px !important; }
form fieldset input.tinyRGBA { float: left; caret-color: transparent; width: 33px !important; box-shadow: none; padding-right: 0; cursor: pointer; }
form fieldset input.tinyRGBA:has(+ input.RGBA) { width: 32px !important; margin-right: 0; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
form fieldset input.tinyRGBA + * { outline: none; }
form fieldset input.tinyRGBA + input.RGBA { width: 148px !important; border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
form fieldset input.tinyRGBA + :not(.RGBA) { margin-left: 0.5em; margin-bottom: 2px; }

form fieldset.alternative { display: flex !important }
form fieldset.alternative + fieldset { padding-top: 0 !important; }
form fieldset.alternative:has(input[type=checkbox]:checked) { padding-bottom: 3px !important; }
form fieldset.alternative:has(input[type=checkbox]:not(:checked)) + fieldset { display: none; }
form fieldset.alternative > input.tinyRGBA:has(+ input[type=checkbox]:not(:checked)) { border: none; height: 16px; background-position: 1px 0 !important; background-size: 31px 100% !important; }
form fieldset.alternative > input.tinyRGBA:has(+ input[type=checkbox]:not(:checked)) ~ :not(.RGBA) { color: #AAA; }

/* >= 568px, horizontal mobile */
@media screen and (min-width: 568px)
{
	form.full fieldset input.RGBA { text-align: center; text-transform: uppercase; width: 180px; }
	form.full fieldset input.tinyRGBA { width: 33px; box-shadow: none; padding-right: 0; }
	form.full fieldset input.tinyRGBA:has(+ input.RGBA) { width: 32px; margin-right: 0; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
	form.full fieldset input.tinyRGBA + input.RGBA { width: 148px; border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
}

form fieldset.filtered input {
	width: 79px !important;
	margin-left: 1px;
	padding-right: 24px;
	background-repeat: no-repeat;
	background-image: url(/assets/img/search.png);
	background-position: 57px center;
}

#micrositeEdit .optional-steps { display: none; }
#micrositeEdit:has(#skip_1:checked) .optional-steps { display: block; }
#micrositeEdit fieldset:has(#skip_1) { display: block; margin-left: 25%; line-height: 1.4;}
#micrositeEdit fieldset:has(#skip_1) input { margin: 0}



/* (up to) vertical mobile */
@media screen and (max-width: 567px) {
	form fieldset.filtered label { width: 100%; }
	form fieldset.filtered { display: flex; flex-wrap: wrap; }
	form fieldset.filtered select { width: calc(100% - 80px); }
}
/* (from) horizontal mobile */
@media screen and (min-width: 568px) {
	form.full fieldset.filtered select { width: calc(65% - 80px); }
	form:not(.full) fieldset.filtered { display: flex; flex-wrap: wrap; } /*VER */
	form:not(.full) fieldset.filtered select { width: calc(100% - 80px); } /*VER */
}
/* (from) vertical tablet */
@media screen and (min-width: 768px) {
	form.full fieldset.filtered select { width: 100%; max-width: calc(65% - 80px); }  /* Feo, pero necesario */
}
/* (from) horizontal tablet */
@media screen and (min-width: 1024px) {
	form.full fieldset.filtered select { width: auto; }  /* Feo, pero necesario */
}

.separator { display: flex; align-items: center; text-align: center; color: var(--field-color); font-size: 1em; }
.separator::before,
.separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--field-color) }
.separator:not(:empty)::before { margin-right: 1em; }
.separator:not(:empty)::after { margin-left: 1em; }
.separator.tiny { width: 180px; }
.separator.tiny a { color: var(--field-color) ; margin: 2px 0 0 6px; }

/* >= 568px, horizontal mobile */
@media screen and (min-width: 568px)
{
	.separator.tiny { width: calc(25% + 180px); }
}

/* Icons */
main.templator > form.aside > .second > .wrap > h2:before,
#selector a:before 	{ font-family: var(--fa-style-family-classic); font-weight: var(--fa-style, 900); display: inline-block; min-width: 1.3em; text-align: center; }

main .navigation a.nav-back:before { content: "\f060"; }

main .navigation ol > li > a:before  { content: "\f00b"; }
main .navigation ol > li > a[href*="pages"]:before     { content: "\f0db"; }
main .navigation ol > li > a[href*="blocks"]:before    { content: "\f1b2"; }
main .navigation ol > li > a[href*="statics"]:before   { content: "\f302"; }
main .navigation ol > li > a[href*="languages"]:before { content: "\f1ab"; }

main .navigation ol > li > a[href*="/page/"]:before { content: "\f0c8"; }
main .navigation ol > li.active > a[href*="/page/"]:before { content: "\f14a"; }
main .navigation ol > li > a.newpage:before  { content: "\f0fe"; }

main .navigation ol > li.nav-ecousers  > a:before { content: "\f007"; }
main .navigation ol > li.nav-ecouser   > a:before { content: "\f007"; }
main .navigation ol > li.nav-whitelist > a:before { content: "\e541"; }
main .navigation ol > li.nav-blacklist > a:before { content: "\e540"; }

a.data-publish:before { content: "\f0ee"; margin-right: 0.2em;}

a.layout:before    { content: "\f247"; }
a.clone:before     { content: "\f24d"; }
a.checkbox_off:before 		{ content: "\f0c8"; }
a.checkbox_off:hover:before { content: "\f14a"; opacity: 0.75; }
a.checkbox_on:before { content: "\f14a"; opacity: 1; color: var(--first-brand-color); cursor: default; }
a.publish:before   { content: "\f0ee"}
a.empty:before 	   { content:" "; cursor: default; }
a.blank:before 	   { content: "\f08e"; font-size: 0.85em; margin-right: 0.25em }

#selector #select-desktop:before { content: "\f390"; margin-right: 0.1em; }
#selector #select-mobile:before  { content: "\f3cd"; }