/*

┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓   ┏━━━┓ ┏━━━┓ ┏━━━┓
┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃   ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃
┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃   ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓
┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃   ┃┃   ┃┃ ┃┃ ┃┃┃┃┃┃   ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃
┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃   ┃┃   ┃┗━┛┃ ┃┃┃┃┃┃   ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃
┗━━━┛ ┗━━━┛ ┗━━━┛   ┗┛   ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET"

DESIGN BY © LO STUDIO

CUSTOM.CSS STYLESHEET FOR => " ___NOME_SITO___ "

BASE (MOBILE) SIZE

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/**
 *
 *  █  █  █▀▀  ▄▀▀▄  █▀▀▄  █▀▀  █▀▀▄
 *  █▀▀█  █▀▀  █▀▀█  █  █  █▀▀  █▐█▀
 *  ▀  ▀  ▀▀▀  ▀  ▀  ▀▀▀   ▀▀▀  ▀ ▀▀ - HEADER
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


header { z-index: 4; background-color: var(--white); position: relative; }
.head_wrapper { padding: 1em 1em; z-index: 2; gap: 0.25rem; box-shadow: 0 0 1rem rgb(var(--black-rgb) / 10%); justify-content: space-between; gap: 1rem 0.25rem; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.head_wrapper .head_logo { order: 1; width: calc(35% - 0.25rem); }
.head_wrapper .head_logo span { color: var(--blue); font-weight: 300; font-size: 2.3vw; display: block; position: relative; margin-top: 0.35rem; }

.head_wrapper .user_info { text-align: right; order: 2; width: calc(60% - 0.25rem); }

header .menu { padding: 0.25rem; text-align: right; border-radius: 1rem 1rem 0 0; width: max-content; cursor: pointer; transition: .35s ease; }
header .menu span { display: inline-block; transition: .25s ease; }
header .menu span svg { width: 0.75rem; }
header .menu span svg path { transition: .25s ease; }
header .menu.active span { transform: scale(-1); }
header .menu.active span svg path { fill: var(--white); }

header .sub_menu { bottom: 0; background-color: var(--white); border-radius: 1rem 0 1rem 1rem; box-shadow: 0 0 1rem rgb(var(--black-rgb) / 25%);
	width: 80%; transform: translateY(100%); z-index: 2; opacity: 0; pointer-events: none;}
header .sub_menu.active { opacity: 1; pointer-events: initial; }
header .sub_menu a { display: block; width: 100%; padding: 0.75rem 1rem; border-bottom: 1px solid var(--blue); transition: .35s ease; }
header .sub_menu a:hover { background-color: var(--blue); color: var(--white); }
header .sub_menu a:first-of-type { border-radius: 1rem 0 0 0; }
header .sub_menu a:last-of-type { border: 0; border-radius: 0 0 1rem 1rem; }

.head_wrapper .select_container { display: block; order: 3; margin-top: 0.5rem; text-align: center; width: 100%; }
.head_wrapper .select_container p { margin-bottom: 0.25rem; }
.head_wrapper .select_container select { position: relative; width: 100%; border: 1px solid rgb(var(--black-rgb) / 25%); padding: 0.5rem; border-radius: 6rem; text-align: center; 
	appearance: none; -webkit-appearance: none; font-size: calc(var(--rem)* 0.85); cursor: pointer; transition: .25s ease; }
.head_wrapper .select_container select:hover { border: 1px solid rgb(var(--blue-rgb) / 100%); }

.head_wrapper #form_select { position: relative; }
.head_wrapper #form_select::after { content: url(../images/svg/select-arrow.svg); position: absolute; top: 50%; right: 1rem; transform: translateY(-55%); width: 1rem; }




/**
 *
 *  ▄▀▀▄  ▄▀▀  ▄▀▀  █▀▀  ▀▀█▀▀  ▄▀▀
 *  █▀▀█   ▀▄   ▀▄  █▀▀    █     ▀▄
 *  ▀  ▀  ▀▀   ▀▀   ▀▀▀    ▀    ▀▀  - ASSETS
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
/* .link {
	display: block; position: relative; width: fit-content;
    padding: .5em 1em; margin: ;
    border: 1px solid var(--black); border-radius: ;
	font: inherit; font-size: var(--rem); color: var(--black);	
	background-color: var();
}
.link:hover, .link:focus, .link:active { background-color: var(--black); color: var(--white); }

.link_color { background-color: var(--black); border-color: var(--black); color: var(--white); }
.link_color:hover, .link_color:focus, .link_color:active { background-color: var(--white); color: var(--black); } */


.add-repeater-btn { background-color: var(--blue); border-radius: 50%; width: 2.5rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.filter_color {
	background-color: var(--color);
	mix-blend-mode: multiply;
	opacity: .5;
}

.filter_grey { background-color: rgb(var(--light_grey-rgb) / 50%); }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.filtering { opacity: 0.25; pointer-events: none; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#scroll_btn {
	display: inline-block;
	position: absolute; left: 50%; bottom: 1.5em; 
	--scroll-px: 40px;
	--scroll-min: 40;
	--scroll-max: 60;
	max-width: 60px;
	transform: translateX(-50%);
	cursor: pointer; z-index: 1;
}
#scroll_btn svg { 
	width: 100%; 
	animation: hang_scroll 1.5s ease-in-out infinite forwards alternate;
	animation-play-state: running;
}
@keyframes hang_scroll {
	from { transform: translateY(0); }
	to { transform: translateY(.5em); }
}
#scroll_btn:hover svg, #scroll_btn:focus svg, #scroll_btn:active svg { animation-play-state: paused; }
#scroll_btn svg path { fill: var(--black); transition: .25s ease; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.nav_btn { 
	top: 50%; transform: translateY(-50%); 
	width: 3.5em; padding: .25em; 
	z-index: 1; cursor: pointer; transition: .25s ease; 
}
.nav_btn :where(img, svg) { width: 100%; }
.nav_btn svg path { fill: var(--black); transition: .25s ease; }

.nav_prev { left: 0; }
.nav_next { right: 0; }

.nav_btn.swiper-button-disabled { display: none; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
/* Buttons */
.btn_blue { text-transform: uppercase; color: var(--blue); font-weight: 500; border: 2px solid var(--blue); padding: 0.25rem 1.5rem; border-radius: 5rem;
	font-size: var(--rem); font-family: var(--main-font); line-height: 1.2; transition: .25s ease; }

.btn_blue:disabled { color: rgb(var(--black-rgb) / 10%); border: 2px solid rgb(var(--black-rgb) / 10%); }
.btn_blue.disabled { color: rgb(var(--black-rgb) / 10%); border: 2px solid rgb(var(--black-rgb) / 10%); pointer-events: none; }
.btn_blue:disabled img { filter: brightness(0); opacity: 0.2; }

.btn_blue:hover, .btn_blue.active { color: var(--white); background-color: var(--blue); }
.btn_blue:disabled:hover { color: rgb(var(--black-rgb) / 10%); border: 2px solid rgb(var(--black-rgb) / 10%); background-color: transparent; }

.btn_rmv { text-transform: uppercase; color: var(--red); font-weight: 500; border: 2px solid var(--red); padding: 0.25rem 1.5rem; border-radius: 5rem; transition: .25s ease; 
	display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.btn_rmv::after { content: url(../images/svg/trash.svg); position: relative; width: 1rem; display: block; transition: .25s ease; }
.btn_rmv:hover { color: var(--white); background-color: var(--red); }
.btn_rmv:hover::after { filter: brightness(0) invert(1); }

/* Social */
.social li { list-style: none; }
.social a { display: inline-block; width: 3.5em; padding: .25em; }
.social a :where(img,svg) { width: 100%; }
.social a svg path { transition: .25s ease; }

/* Accordion */
.accordion_text { display: none; margin-top: 0.5rem; }

.accordion_head { cursor: pointer; }
.accordion_head .accordion_arrow { transition: .25s ease; }
.accordion_head.active .accordion_arrow { transform: rotate(180deg); }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SIDEBAR ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.sticky { top: 15vh; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BREADCRUMBS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#breadcrumb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5em; }
#breadcrumb li { list-style: none; margin: 0; }
#breadcrumb :where(a,span) { display: inline-block; min-width: fit-content; color: var(--white); }




/**
 *
 *  █▀▀  ▄▀▀▄  ▄▀▀▄  ▀▀█▀▀  █▀▀  █▀▀▄
 *  █▀▀  █  █  █  █    █    █▀▀  █▐█▀
 *  ▀     ▀▀    ▀▀     ▀    ▀▀▀  ▀ ▀▀ - FOOTER
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
footer { background-color: transparent; }
.foot_block p a { font: inherit; }

/* Foot Logo */
.foot_logo { 
	display: block; 
	--foot-logo-width: 240px;
	--foot-logo-min: 240;
	--foot-logo-max: 360;
	max-width: 360px;
}

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#credits p {
	font-size: .825em; line-height: 1.5; text-align: center;
	margin: 0 auto; z-index: 1;
}
#credits .resp_sep { display: none; }
#credits a { display: inline-block; font: inherit; color: inherit; }




/**
 *
 *  ▄▀▀  █▀▀  ▄▀▀  ▀▀█▀▀  ▀  ▄▀▀▄  █▄ █  ▄▀▀ 
 *   ▀▄  █▀▀  █      █    █  █  █  █ ▀█   ▀▄ 
 *  ▀▀   ▀▀▀   ▀▀    ▀    ▀   ▀▀   ▀  ▀  ▀▀  - SECTIONS
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ REPEATER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.composition_reach_status_wrapper { border-radius: 1rem; position: relative; padding: 2rem 1rem; border: 1px solid var(--blue);
	margin-bottom: 1rem; box-shadow: 0 0 1.1rem rgb(var(--blue-rgb) / 25%); }

.composition_reach_status_wrapper .btn_remove_item { position: absolute; width: 2.5rem; background: var(--blue); top: 0; right: 0; border-radius: 0 1rem; height: 2.5rem; 
	display: flex; justify-content: center; align-items: center; }
.composition_reach_status_wrapper .btn_remove_item button {  width: 100%; padding: 0.25rem 0.5rem; height: 100%; }
.composition_reach_status_wrapper .btn_remove_item button svg path {     fill: var(--white); }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NATURAL ORIGIN SECTION ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#noi_repeater_container .repeater { margin-top: 2rem; }
#noi_repeater_container .single_repeater, .single_noi_16128 { gap: 1rem; width: 100%; }


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAVY METALS SECTION ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.metal_container { position: relative; width: 100%; gap: 1rem; margin-top: 0.5rem; }
.metal_container .single_field:first-of-type { width: 60%; }

#button_noi_repeater { display: none; }




/**
 *
 *  ▄▀▀  ▄▀▀▄  █▀▀▄  █▀▀▄  ▄▀▀ 
 *  █    █▀▀█  █▐█▀  █  █   ▀▄ 
 *   ▀▀  ▀  ▀  ▀ ▀▀  ▀▀▀   ▀▀  - CARDS
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */

 /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD INDEX ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.card_index { width: 100%; gap: 1rem; transition: .35s ease; background-color: var(--white); border-radius: 1rem; cursor: pointer; }
.card_index:hover { box-shadow: 0 0 2rem rgb(var(--blue-rgb) / 30%); }

.card_index .title { gap: 0.5rem; }
.card_index .title .dot { gap: 0.5rem; align-items: stretch; }
.card_index .title .product_id { font-size: 0.75rem; }

.card_index .desc { justify-content: flex-start; gap: 0.25rem; margin-top: 1rem; overflow: hidden; max-height: 2.5rem; transition: max-height 0.5s ease;}
.card_index.open .desc { max-height: 20rem; }

.card_index h2 { font-size: 1.15rem; line-height: 1.3; transition: .5s ease;  }
.card_index h2 strong { padding-right: 0.25rem; }
.card_index p { font-size: 0.8em; transition: .5s ease;  }

/* .card_index .notice { width: 0.15rem; min-height: 100%; position: relative; display: block; min-width: 0.15rem; }
.card_index .notice.green { background: green; } 
.card_index .notice.red { background: var(--red); }  */
.card_index.notice { border-left: 3px solid; }
.card_index.notice.red { border-color: var(--red); }
.card_index.notice.green { border-color: green; }

.card_index .btn_container { gap: 0.5rem; margin: 1rem auto 1rem auto; width: max-content; }
.card_index .btn_container .btn_blue { padding: 0.75rem; }
.card_index .btn_container .btn_blue img { width: 1.25rem; min-width: 1.25rem; transition: .35s ease; }
.card_index .btn_container .btn_blue:hover img { filter: brightness(0) invert(1); }

.card_index a.disabled { opacity: 0.25; pointer-events: none; }
.card_index button.disabled { opacity: 0.25; pointer-events: initial; }
.card_index button.disabled img { filter: brightness(0); }
.card_index button.disabled:hover { background-color: unset; }
.card_index .btn_container .btn_blue:hover img { filter: brightness(0); }

.card_index .products_link { padding: 1rem 1.5rem; transition: .35s ease; }
.card_index .accordion_text { padding: 0 1.5rem 1.5rem 1.5rem; }
.card_index .accordion_text h3 { position: relative; display: block; font-size: 1.75rem; color: var(--blue); margin-bottom: 1rem; text-align: center; }

.card_index .accordion_arrow { padding: 1rem 0 0 0; padding: 0.5rem; border-radius: 8rem; margin: 0.5rem auto 0 auto;
    width: max-content; transition: .35s ease; }
.card_index .accordion_arrow img { width: 1rem; height: 1rem; min-width: 1rem; }

.card_index .cat_list .separator:first-of-type { display: none; }
.card_index .cat_list a { display: inline; text-decoration: underline; }

.card_index:hover .accordion_arrow { background-color: var(--blue); }
.card_index:hover .accordion_arrow img { filter: brightness(0) invert(1); }

.card_index .all_posts_container { gap: 0.5rem; }

/* Evidence card */
.card_index.evidence { background-color: var(--yellow); }
.card_index.evidence .btn_container .btn_blue { color: var(--black); border: 2px solid var(--black); }
.card_index.evidence .btn_container .btn_blue:hover { background-color: var(--black); } 
.card_index.evidence .btn_container .btn_blue img { filter: brightness(0); }
.card_index.evidence .btn_container .btn_blue:hover img { filter: brightness(0) invert(1); }
.card_index.evidence:hover .accordion_arrow { background-color: var(--black); }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.card_empty { padding: 2em 1.5em; }
.card_empty svg { width: 6em; }
.card_empty .text { margin-top: 1em; }




/**
 *
 *  █  █  ▄▀▀▄  █▄ ▄█  █▀▀
 *  █▀▀█  █  █  █ █ █  █▀▀
 *  ▀  ▀   ▀▀   ▀   ▀  ▀▀▀ - HOMEPAGE
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#s1_home > .container { min-height: 90vh; }
.s1_container { background-color: var(--blue); border-radius: 1.5rem; box-shadow: 0 0 1.5rem rgb(var(--black-rgb) / 25%); }



/**
 *
 *  █▀▀▄  ▄▀▀▄  ▄▀▀▀   █▀▀  ▄▀▀
 *  █  █  █▀▀█  █  ▀▌  █▀▀   ▀▄
 *  █▀▀   ▀  ▀   ▀▀▀   ▀▀▀  ▀▀  - TEMPLATES _ PAGINE
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */




/**
 *
 *  ▄▀▀▄  █▀▀▄  ▄▀▀▀  █  █  ▀  ▐▌ ▐▌  █▀▀
 *  █▀▀█  █▐█▀  █     █▀▀█  █   ▀▄▀   █▀▀
 *  ▀  ▀  ▀ ▀▀   ▀▀▀  ▀  ▀  ▀    ▀    ▀▀▀ - TEMPLATES _ ARCHIVIO
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.s1_archive .wrapper .all_cards { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }

.s1_archive .card_container { opacity: 1; pointer-events: initial; display: grid; gap: 1rem; transition: .5s ease;  }
.s1_archive .card_container.anim_on { opacity: 0.25; pointer-events: none;  }


/**
 *
 *  ▄▀▀  ▀  █▄ █  ▄▀▀▀   █     █▀▀
 *   ▀▄  █  █ ▀█  █  ▀▌  █  ▄  █▀▀
 *  ▀▀   ▀  ▀  ▀   ▀▀▀   ▀▀▀▀  ▀▀▀ - SINGLE
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */







/**
 *
 *  █▀▀  ▄▀▀▄  █▀▀▄  █▄ ▄█
 *  █▀▀  █  █  █▐█▀  █ █ █
 *  ▀     ▀▀   ▀ ▀▀  ▀   ▀ - FORM
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FORM ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/* Generic */
#dynamic_form { background-color: var(--white); padding: 2.5rem 2rem; border-radius: 1.25rem; width: 100%; }
#dynamic_form.read_only, #dynamic_form.read_only * { pointer-events: none; }
#dynamic_form h2 { margin-bottom: 1rem; font-weight: 700; text-transform: uppercase; font-size: calc(var(--h2-size)* 0.25); }
#dynamic_form h3 { margin-bottom: 3rem; font-size: calc(var(--h3-size)* 1); font-weight: 500; }
#dynamic_form h4 { opacity: 0.75; font-size: calc(var(--h4-size)* 0.7); margin-top: 2.5rem; }

#dynamic_form .single_field label { opacity: 0.5; transition: .25s ease; }
#dynamic_form .single_field.mandatory_not_filled { border-left: 3px solid var(--red); padding-left: 0.75rem; }
#dynamic_form .single_field.not_visible_field { display: none; }

#dynamic_form .single_field.glowing { border: 2px solid rgb(var(--red-rgb) / 0%); border-radius: 0.5rem; padding: 0.25rem 0.25rem; animation: field_glowing 1s ease infinite alternate; }
@keyframes field_glowing {
	0%   { border: 2px solid rgb(var(--red-rgb) / 0%); }
	100% { border: 2px solid rgb(var(--red-rgb) / 100%); }
}  

.required_mark { color: var(--red); }

/* Select 2 */
#dynamic_form .select2-container { position: relative; display: block; width: 100% !important; }
#dynamic_form .select2-container .select2-selection--multiple { margin-top: 0.35rem; }
#dynamic_form .select2-container--default .select2-selection--single { border: 0; border-radius: 0; height: auto; }

#dynamic_form .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0.5rem 0.25rem; font-size: var(--rem);
    line-height: 1.5; display: block; border-bottom: 1px solid rgb(var(--black-rgb) / 50%); opacity: 0.5; color: var(--black); transition: .25s ease; }
#dynamic_form .select2-container--default .select2-selection--single .select2-selection__rendered.active { border-bottom: 1px solid rgb(var(--black-rgb) / 25%); opacity: 1; }

#dynamic_form .select2-selection__choice__display { padding: 0.25rem 0.25rem 0.25rem 0.5rem; }

/* Input */
#dynamic_form input[type="text"], #dynamic_form input[type="phone"], #dynamic_form input[type="email"], #dynamic_form input[type="number"] { border: 0; 
	border-bottom: 1px solid rgb(var(--black-rgb) / 25%);  padding: 0.5rem 0.25rem; display: block; width: 100%; font-size: var(--rem); }
#dynamic_form .textarea_field textarea { display: block; width: 100%; border: 1px solid rgb(var(--black-rgb) / 25%); font-size: var(--rem); 
	border-radius: 1rem; padding: 0.5rem 0.5rem; font-family: var(--main-font); resize: none; }

/* Checkbox */
#dynamic_form .checkbox_container { margin-top: 0.5rem; }
#dynamic_form .checkbox_container .checkbox_input { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
#dynamic_form .checkbox_container .checkbox_input label { cursor: pointer; }

#dynamic_form .checkbox_container .checkbox_input input { position: relative; appearance: none; -webkit-appearance: none; border: 1px solid var(--black); 
	width: 0.85rem; height: 0.85rem; }
#dynamic_form .checkbox_container .checkbox_input input:checked { background-image: url(../images/svg/checked-white.svg); background-position: center;
	background-repeat: no-repeat; background-color: var(--black); background-size: 90%; }
#dynamic_form .checkbox_container .checkbox_input input:checked + label { opacity: 1;}

/* Radio */
.radio_container { margin: 0.5rem 0; }
.radio_container .radio_input { display: flex; justify-content: flex-start; align-items: center; padding: 0.25rem 0; }

.radio_container .radio_input label { cursor: pointer; padding-left: 0.25rem; }
.radio_container .radio_input input { appearance: none; -webkit-appearance: none; border: 1px solid var(--black); width: 0.85rem; 
	height: 0.85rem; border-radius: 6rem; min-width: 0.85rem;  }
.radio_container .radio_input input:checked { background-color: var(--black); }
.radio_container .radio_input input:checked + label { opacity: 1; }

.radio_container.reset_on { position: relative; }
.radio_container.reset_on .reset { cursor: pointer; position: absolute; bottom: 0; right: 0; transform: translate(0, 100%); width: 100%; height: 1.25rem; 
	font-size: 0.8rem; line-height: 1; text-align: center; border: 1px solid var(--blue); background-color: transparent; color: var(--blue); 
	font-weight: 500; transition: .25s ease; display: flex; justify-content: center; align-items: center; border-radius: 0; opacity: 1; pointer-events: initial; }
.radio_container.reset_on .reset:hover { background-color: var(--blue); color: var(--white); }
.radio_container.hide_reset .reset { opacity: 0; pointer-events: none; }

/* Select */
#dynamic_form .select_field label { padding-left: 0.25rem; }

/* Label */
#dynamic_form .text_field label,
#dynamic_form .email_field label,
#dynamic_form .phone_field label,
#dynamic_form .number_field label { position: absolute; top: 50%; left: 0.25rem; transform: translateY(-50%); pointer-events: none;}

#dynamic_form .text_field.mandatory_not_filled label,
#dynamic_form .email_field.mandatory_not_filled label,
#dynamic_form .phone_field.mandatory_not_filled label,
#dynamic_form .number_field.mandatory_not_filled label { transform: translate(1.25rem ,-50%);}

#dynamic_form .text_field.active label, #dynamic_form .text_field.active_input label,
#dynamic_form .email_field.active label, #dynamic_form .email_field.active_input label,
#dynamic_form .phone_field.active label, #dynamic_form .phone_field.active_input label,
#dynamic_form .number_field.active label, #dynamic_form .number_field.active_input label { transform: translateY(-175%); }

#dynamic_form .text_field.active.mandatory_not_filled label, #dynamic_form .text_field.active_input.mandatory_not_filled label,
#dynamic_form .email_field.active.mandatory_not_filled label, #dynamic_form .email_field.active_input.mandatory_not_filled label,
#dynamic_form .phone_field.active.mandatory_not_filled label, #dynamic_form .phone_field.active_input.mandatory_not_filled label,
#dynamic_form .number_field.active.mandatory_not_filled label, #dynamic_form .number_field.active_input.mandatory_not_filled label { transform: translate(1.25rem ,-175%); }

#dynamic_form input[type="checkbox"] label, #dynamic_form select label { margin-bottom: 0.5rem; }

#dynamic_form .textarea_field label { margin-bottom: 0.5rem; display: block; }

#dynamic_form .single_field label a { display: inline; color: var(--blue); text-decoration: underline; pointer-events: initial; transition: .25s ease; }
#dynamic_form .single_field label a:hover { color: var(--red); }

/* Upload */
#dynamic_form .file_field.file_uploaded .file_container .show_file_field { display: none; }
#dynamic_form .file_field.file_uploaded .file_container .show_text_field { display: flex; }

#dynamic_form .file_field .file_container .show_file_field, #dynamic_form  .file_field .file_container .show_text_field  { display: flex; justify-content: flex-start; align-items: center; 
	flex-wrap: wrap; margin-top: 0.5rem; gap: 0.5rem; }
#dynamic_form .file_field .file_container .show_text_field { display: none; }

#dynamic_form .file_container input { border: 0; }
#dynamic_form .file_container input[type="text"] { width: auto; flex: auto; }
#dynamic_form .file_container input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#dynamic_form .file_container .placholder { flex: auto; padding: 0.5rem 0.25rem; }

/* Buttons */
#navigation_container { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 2rem;   }
#navigation_container .right { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }

#dynamic_form select { display: block; width: 100%; font-size: var(--rem); }

#dynamic_form .single_field { position: relative; display: block; margin-top: 1.5rem; }
#dynamic_form .single_field.select_field { margin-top: 1rem;  }

/* Repeater */
#dynamic_form .generic_repeater .repeater:first-child .btn_remove_item { display: none; opacity: 0; width: 0; height: 0; pointer-events: none; }
#dynamic_form .generic_repeater .radio_container .reset { display: none; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FORM LOGIN ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#home_form .logo { text-align: center; margin-bottom: 2.5rem; }
#home_form .logo img { margin-bottom: 0.5rem; width: 65%; }
#home_form .logo h2 { color: var(--blue); font-weight: 300; font-size: calc(var(--h2-size) * 0.65);
 display: block; position: relative; margin-top: 0.35rem; }

#home_form h1 { margin-bottom: 1.5rem; text-align: center; font-weight: 500; font-size: calc(var(--h1-size)* 0.75); }

#home_form .login-username label, #home_form .login-password label { font-size: var(--rem); opacity: 0.5; position: absolute; bottom: 0.75rem; left: 0.25rem; pointer-events: none; }
#home_form .login-username input, #home_form .login-password input { border: 0; border-bottom: 1px solid rgb(var(--black-rgb) / 25%); width: 100%; 
	padding: 0.75rem 0.75rem; margin-top: 0.5rem; font-size: var(--rem); }

#home_form .login-submit { text-align: center; margin-top: 1.25rem; cursor: pointer; }
#home_form .login-submit input { text-transform: uppercase; color: var(--blue); font-weight: 500; border: 2px solid var(--blue); padding: 0.5rem 2rem;
    border-radius: 5rem; background-color: var(--white); font-size: calc(var(--rem)* 1.2); cursor: pointer; }

#home_form .login-username { position: relative; }
#home_form .login-password { margin-top: 1rem; position: relative; }

#home_form .login-remember { margin-top: 1.5rem; }

#home_form .login-username label, #home_form .login-password label { transition: .25s ease; }
#home_form .login-username.active label, #home_form .login-password.active label,
#home_form .login-password.active_input label, #home_form .login-username.active_input label { transform: translateY(-100%); }

#home_form form { max-width: 450px; margin: 0 auto; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FORM PROFILO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#profile_form { background-color: var(--white); padding: 2.5rem 2rem; border-radius: 1.25rem; }
#profile_form .single_field { position: relative; display: block; margin-top: 1.5rem; }
#profile_form .single_field label { opacity: 0.5; transition: .25s ease; }

/* Select 2 */
#profile_form .select2-container { position: relative; display: block; width: 100% !important; }
#profile_form .select2-container--default .select2-selection--single { border: 0; border-radius: 0; height: auto; }

#profile_form .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0.5rem 0.25rem; font-size: var(--rem);
    line-height: 1.5; display: block; border-bottom: 1px solid rgb(var(--black-rgb) / 50%); opacity: 0.5; color: var(--black); transition: .25s ease; }
#profile_form .select2-container--default .select2-selection--single .select2-selection__rendered.active { border-bottom: 1px solid rgb(var(--black-rgb) / 25%); opacity: 1; }

/* Input */
#profile_form .text_field input, #profile_form .phone_field input, #profile_form .email_field input, .text_field .number_field input { border: 0; border-bottom: 1px solid rgb(var(--black-rgb) / 25%);  padding: 0.5rem 0.25rem; display: block; width: 100%; font-size: var(--rem); }
#profile_form .textarea_field textarea { display: block; width: 100%; border: 1px solid rgb(var(--black-rgb) / 25%); font-size: var(--rem); 
	border-radius: 1rem; padding: 0.5rem 0.5rem; font-family: var(--main-font); resize: none; }

/* Checkbox */
#profile_form .check_field .single_check { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
#profile_form .check_field .single_check label { cursor: pointer; }

#profile_form .check_field .single_check input { position: relative; appearance: none; -webkit-appearance: none; border: 1px solid var(--black); 
	width: 0.85rem; height: 0.85rem; }
#profile_form .check_field .single_check input:checked { background-image: url(../images/svg/checked-white.svg); background-position: center;
	background-repeat: no-repeat; background-color: var(--black); background-size: 90%; }
#profile_form .check_field .single_check input:checked + label { opacity: 1;}

/* Radio */
#profile_form .radio_field { display: flex; justify-content: space-between; align-items: center; }
#profile_form .radio_field .option_container { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }

#profile_form .radio_field .single_option { display: flex; justify-content: flex-start; align-items: center; padding: 0.25rem 0; }

#profile_form .radio_field .single_option label { cursor: pointer; padding-left: 0.25rem; }
#profile_form .radio_field .single_option input { appearance: none; -webkit-appearance: none; border: 1px solid var(--black); width: 0.85rem; 
	height: 0.85rem; border-radius: 6rem; min-width: 0.85rem;  }
#profile_form .radio_field .single_option input:checked { background-color: var(--black); }
#profile_form .radio_field .single_option input:checked + label { opacity: 1; }

/* Select */
#profile_form .select_field label { padding-left: 0.25rem; }




/**
 *
 *  █▀▀  █  █  ▀▀█▀▀  █▀▀▄  ▄▀▀▄
 *  █▀▀  ▄▀▀▄    █    █▐█▀  █▀▀█
 *  ▀▀▀  ▀  ▀    ▀    ▀ ▀▀  ▀  ▀ - EXTRA
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FORM INDEX ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#form_index { background-color: var(--blue); border-radius: 1.25rem; padding: 2.5rem 2rem; }
#form_index h3 { color: var(--white); font-size: calc(var(--h3-size) * 0.75); margin-bottom: 1.5rem; font-weight: 700; }

#form_index .container { transform: rotateY(-180deg);  }
#form_index .container::-webkit-scrollbar { width: 4px; background-color: rgb(var(--white-rgb) / 25%); }
#form_index .container::-webkit-scrollbar-thumb { width: 4px; background-color: var(--white); }

#form_index .index_chapter { position: relative; transform: rotateY(180deg); padding-left: 1rem; margin-bottom: 1rem;  }
#form_index .index_chapter.mandatory_not_filled::before { content: ""; position: absolute; top: 0; left: -0.75rem; width: 2px; height: 100%; background-color: var(--red); }
#form_index .index_chapter:last-of-type { margin-bottom: 0; }

#form_index .index_chapter .chapter_title { color: var(--white); font-size: calc(var(--rem) * 1.1); font-weight: 500; }

#form_index .index_chapter .accordion_head { margin-bottom: 0.5rem; cursor: pointer; }
#form_index .index_chapter .accordion_head svg { width: 1.25rem; transition: .25s ease; }
#form_index .index_chapter .accordion_head.active svg { transform: rotate(180deg); }
#form_index .index_chapter .accordion_head svg path { fill: var(--white); }

#form_index .index_subchapter {  margin-bottom: 0.75rem; cursor: pointer; padding-left: 0.5rem; }

#form_index .index_subchapter p { position: relative; color: var(--white); font-size: calc(var(--rem)* 0.85); opacity: 0.6; transition: 0.25s ease; }
#form_index .index_subchapter p.mandatory_not_filled::before { content: ""; position: absolute; top: 50%; left: -0.75rem; 
	width: 0.5rem; height: 0.5rem; background-color: var(--red); border-radius: 5rem; transform: translateY(-50%); }
/*#form_index .index_subchapter p::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--white); transition: 0.25s ease; }*/

#form_index .index_subchapter:hover p, #form_index .index_subchapter.current p { opacity: 1; }
#form_index .index_subchapter:hover p::after, #form_index .index_subchapter.current p::after { width: 100%; }

#form_index .index_subchapter.current_step p { opacity: 1; }
#form_index .index_subchapter.current_step p::after { width: 100%; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SEARCH FIELD FORM ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#search_field_container { transform: rotateY(180deg); width: 100%; margin-bottom: 1.5rem; }
#search_field_container input { font-size: calc(var(--rem) * 0.85); }
#search_field_container .search_title { margin-bottom: 0.5rem; gap: 0.5rem; }
#search_field_container .search_title p { color: var(--white); font-size: calc(var(--rem) * 1.1); font-weight: 500; }
#search_field_container .search_title img { width: 1.25rem; }

#search_field_container .select2-container { width: 100% !important; }

#search_field_container .select2-selection { background-color: transparent; border: 1px solid var(--white); padding: 0.25rem 1rem; height: auto; 
	border-radius: 1rem; transition: .25s ease; }
#search_field_container .select2-selection:hover { box-shadow: 0 0 1rem rgb(var(--white-rgb) / 50%); }
#search_field_container .select2-selection__rendered { color: var(--white); font-size: calc(var(--rem) * 0.85); padding: 0 0.5rem 0 0; }
#search_field_container .select2-selection__arrow { top: 0; right: 0; width: 2.25rem; height: 100%; pointer-events: none; }
#search_field_container .select2-selection__arrow b { border-color: var(--white) transparent; border-width: 8px 6px 0 6px; margin-top: -4px; }

.select2-container .select2-results li { cursor: pointer; font-size: calc(var(--rem) * 0.85); white-space: nowrap; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ INDEX MENU SWITCH ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#index_menu_switch { gap: 0.5rem; order: 3; }
#index_menu_switch button { font-weight: 700; opacity: 0.5; color: var(--black); font-size: 0.9rem; transition: .35s ease; }
#index_menu_switch button.open { opacity: 1; color: var(--blue); }

#index_menu_switch .switch_btn { position: relative; width: 3.5rem; background-color: var(--blue); height: 1.75rem; border-radius: 12rem; padding: 0.35rem 0.5rem; 
	box-shadow: 0 0 1rem rgb(var(--black-rgb) / 5%); opacity: 1; display: flex; justify-content: flex-start; align-items: center; transition: .35s ease; }
#index_menu_switch .switch_btn:before { content: ""; position: absolute; top: calc(0.75rem / 2); left: 0.5rem; background-color: var(--white); border-radius: 12rem; 
	transition: .15s ease; width: 1rem; height: 1rem;transition: .15s ease; }

#index_menu_switch .switch_btn.open:before { left: calc(100% - 1.35rem); }


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PROGRESS BAR ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#bars_container { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; z-index: 5; 
	background-color: rgb(var(--white-rgb) / 80%); backdrop-filter: blur(2px); padding: 0.5rem 1rem; bottom: 0;  box-shadow: 0 0 1rem rgb(var(--black-rgb) / 50%);
	display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-direction: column; transition: .25s ease;
}

#bars_container .left { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
#bars_container .right { gap: 1rem; }

#progress_bar { position: relative; display: block; width: 100%; height: 1rem; background-color: rgb(var(--black-rgb) / 10%); border-radius: 1rem;  }
.progress { content: ""; position: absolute; top: 0; left: 0; height: 100%; background-color: var(--blue); border-radius: 1rem;  transition: .25s ease; }

#progress_steps p { font-size: calc(var(--rem) * 0.85); text-align: center; position: relative; width: 100%; margin-bottom: 0.25rem; }

#bars_container .progress_container { flex: auto; }
#bars_container .navigation { display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
#bars_container .navigation button {  padding: 0.5rem; border-radius: 6rem; width: 2.25rem; height: 2.25rem; display: flex; justify-content: center; align-items: center; }

#bars_container .prev_subchapter, #bars_container .next_subchapter { background-color: var(--blue); border: 1px solid var(--blue); transition: .25s ease; }
#bars_container .prev_subchapter svg path, #bars_container .next_subchapter svg path { transition: .25s ease; }

#bars_container .prev_subchapter:hover, #bars_container .next_subchapter:hover { background-color: var(--white); }
#bars_container .prev_subchapter:hover svg path, #bars_container .next_subchapter:hover svg path { fill: var(--blue); }

#bars_container .prev_subchapter svg { transform: translateX(-2px); }
#bars_container .next_subchapter svg { transform: translateX(2px); }

#bars_container.read_only .save-btn { opacity: 0.25; pointer-events: none; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DEBUG ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.debug { display: none; position: fixed; bottom: 0; left: 0; overflow-y: scroll; z-index: 5; width: 500px; max-height: 50vh; font-size: 16px; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NOTICE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#notice { display: none; }
#notice .container { padding: 0.5rem 1rem; border-radius: 1.25rem; background-color: var(--white); }

#notice .single_notice { display: none; text-align: center;  }
#notice .single_notice p { font-size: calc(var(--rem) * 0.9); }
#notice.notice_1_active, #notice.notice_2_active { display: flex; justify-content: center; align-items: center; }

#notice.notice_1_active .notice_1.single_notice { display: block;  }
#notice.notice_1_active .notice_1.single_notice p { color: var(--red); }
#notice.notice_1_active .container { border: 1px solid var(--red);  }

#notice.notice_2_active .notice_2.single_notice { display: block; }
#notice.notice_2_active .container { border: 1px solid rgb(var(--black-rgb) / 50%);  }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOADER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
#bars_container.saving_on #loader { opacity: 1; transform: translateY(calc(-100% - 1.5rem)); }

#loader { position: absolute; top: 0; right: 2rem; width: 10rem; background-color: var(--white); z-index: 6; padding: 0.25rem 1rem; 
    border-radius: 1.5rem; box-shadow: 0 0 1rem rgb(var(--black-rgb) / 50%); pointer-events: none; opacity: 0; transition: 0.25s ease; }
#loader img { width: 2.5rem; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#s1_404 { background-color: var(--bkg_color); }

#s1_404 .s1_title h1 { font-size: 2rem; }
#s1_404 .s1_title p { font-size: 1.1rem; }
#s1_404 .s1_title .link { display: inline-block; padding: 0.9rem 1.7rem; border: 2px solid var(--btn_color); border-radius: 0.6rem; font-size: 1rem; color: var(--btn_color); }
#s1_404 .s1_title .link:hover { background-color: var(--btn_color); color: var(--btn_color_hover); transform: scale(1.05); }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.sidebar_wrapper { margin: 0 auto 2rem auto; }
.filters_container { margin: 0 auto 1rem auto; gap: 1px; background-color: var(--white);
	border-radius: 1rem; padding: 1.5rem 1.5rem; }

.filters_container .top { gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgb(var(--blue-rgb) / 50%);  }
.filters_container .top img { width: 2.5rem; }
.filters_container .top p { color: var(--blue); font-weight: 700; font-size: 1.25rem; }

.filters_container .all_filters { padding-top: 1rem; }

.filter_select p { margin-bottom: 0.25rem; }

.filter_select .accordion_head { padding: 0.75rem 0; cursor: pointer; }
.filter_select .accordion_head img { width: 1rem; }
.filter_select .accordion_head h3 { color: var(--blue); font-weight: 500; font-size: 1rem; }

.filter_select .card_accordion { border-bottom: 1px solid rgb(var(--blue-rgb) / 50%); }
.filters_container .filter_select:last-of-type .card_accordion { border: 0; }

/* Input */
.filters_container .single_input label {  color: var(--blue); font-weight: 500; font-size: 1rem; }
.filters_container .single_input input { font-size: 1rem; padding: 0.5rem; border: 1px solid var(--blue); width: 100%; margin-top: 0.5rem; }

/* Radio */
.filter_select .radio_container { display: block; max-height: 25vh; overflow-y: scroll; padding-right: 8px; }
.filter_select .radio_container::-webkit-scrollbar { width: 6px; border: 1px solid rgb(var(--blue-rgb) / 50%); }
.filter_select .radio_container::-webkit-scrollbar-thumb { width: 6px; background-color: var(--blue); }

.filter_select .radio_container .single_radio { padding: 0.25rem 0; display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.filter_select .radio_container .single_radio label { font-size: 0.85rem; text-transform: uppercase; }
.filter_select .radio_container .single_radio .radio_check { position: relative; display: block; width: 1rem; height: 1rem; min-width: 1rem; 
	border: 2px solid var(--blue); transition: .25s ease; }
.filter_select .radio_container .single_radio input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; appearance: none; cursor: pointer; z-index: 1; }

.filter_select .radio_container .single_radio.checked .radio_check { background-color: var(--blue); }
.filter_select .radio_container .single_radio.disabled { pointer-events: none; opacity: 0.25; }

/* Filter history*/
.filter_history { display: none; }
.filter_history.active { padding: 1rem 0; display: block; border-bottom: 3px solid rgb(var(--blue-rgb) / 100%);  }
.filter_history .reset_filter {  width: 100%; margin-top: 0.25rem; font-size: 0.85rem; border-radius: 0; border: 1px solid var(--blue); }
.filter_history .filter_single_result { padding: 0.5rem 0; gap: 0.25rem; }
.filter_history .filter_single_result:first-of-type { padding-top: 0; }
.filter_history .filter_single_result:last-of-type { border-bottom: 0; }

.filter_history .current_filter_term { font-size: 0.85rem; position: relative; width: 100%; cursor: pointer; transition: .25s ease; }
.filter_history .current_filter_term::after { content: ""; position: absolute; top: 50%; left: 0; background-color: var(--red); width: 0; height: 2px; 
	transform: translateY(-50%); transition: .35s ease; pointer-events: none; }
.filter_history .current_filter_term:hover { color: var(--red); }
/*.filter_history .current_filter_term:hover::after { width: 100%; }*/

/* .filter_select .select_container select { position: relative;  font-size: calc(var(--rem)); padding: 0.6rem 2rem 0.6rem 1.5rem;  
	appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url(../images/svg/select-arrow.svg); background-size: 1rem; 
	background-repeat: no-repeat; background-position: 95% 55%; background-color: var(--white); max-width: 14rem; }
.filter_select .select_container select:hover { color: var(--blue); transition: .5s ease;  }

.filter_select .select_container .close { aspect-ratio: 1 / 1; top: 0; right: 0; width: 2rem; justify-content: center; align-items: center; background-color: var(--blue); 
	color: var(--white); transform: translate(50%, -25%);  border-radius: 8rem; display: flex; opacity: 0; pointer-events: none; border: 1px solid var(--blue); transition: .5s ease; }
.filter_select .select_container .close:hover { background-color: var(--white); color: var(--blue); }
.filter_select .select_container .close.active { opacity: 1; pointer-events: inherit; } */

/* Search fields */
.filters_container .search_fields { position: relative; border: 1px solid var(--black); width: 100%; padding: 0.5rem; font-size: 1rem; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CSV BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.sidebar_btn { background-color: var(--white); padding: 1rem 1.5rem; border-radius: 1rem; transition: .25s ease; gap: 0.5rem; }
.sidebar_btn :where(span, button) { color: var(--blue); font-weight: 500; text-align: left; width: 100%; transition: .25s ease;  }
.sidebar_btn img { width: 1.75rem; transition: .25s ease;  }

.sidebar_btn:hover { background-color: var(--blue); box-shadow: 0 0 2rem rgb(var(--blue-rgb) / 30%); }
.sidebar_btn:hover :where(span, button) { color: var(--white); }
.sidebar_btn:hover img { filter: brightness(0) invert(1); }

/* PDF export */
#export_all_products { margin-top: 1rem; }

#export_all_products form { display: none; width: 100%; width: 100%; padding: 1rem 1.5rem; background-color: var(--white); border-radius: 0 0 1rem 1rem; }
#export_all_products form button[type="submit"] { width: 100%; text-align: center; padding: 0.5rem 1rem; border: 1px solid var(--blue); background-color: var(--blue); 
	color: var(--white); border-radius: 1rem; transition: .25s ease; }
#export_all_products form button[type="submit"]:hover { background-color: var(--white); color: var(--blue); }

#export_all_products #file_title { width: 100%; padding: 0.5rem 1rem; border: 1px solid var(--blue); border-radius: 0.5rem; margin-bottom: 0.75rem; font-size: 0.8rem; }
#export_all_products #file_title::placeholder { opacity: 0.5; font-size: 0.8rem; }

#export_all_products.open .sidebar_btn { border-radius: 1rem 1rem 0 0; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PRINT MODE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.print_mode #s1_home .container.p10t { padding: 0 !important; }

/* Hide */
.print_mode * { box-shadow: unset;  }
.print_mode #notice { display: none !important; }
.print_mode #form_index { display: none !important; }
.print_mode .filter_grey { display: none !important;  }
.print_mode label a { display: none !important;  }

.print_mode header .select_container { display: none; }
.print_mode header .user_info { display: none; }
.print_mode footer { display: none !important; }
.print_mode #bars_container { display: none !important; }

.print_mode header { display: block; position: relative; background-color: transparent; width: auto; }
.print_mode .btn_repeater_container { display: none; }
.print_mode #dynamic_form .field_empty { display: none !important; }
.print_mode #dynamic_form .single_field.file_field .btn_rmv, .print_mode #dynamic_form .single_field.file_field .btn_blue { display: none; }
.print_mode .subchapter.no_fields { display: none !important; }
.print_mode .chapter.no_subchapters { display: none !important; }

/* Header */
.print_mode header .head_wrapper { justify-content: center; }
.print_mode header .head_wrapper .head_logo { text-align: center; }

/* Show */
.print_mode .chapter { display: block !important; }
.print_mode .subchapter { display: block !important; }

.print_mode #dynamic_form .chapter::before { content: url(../images/svg/logo-print.svg); position: relative; display: block; width: 80px; padding-bottom: 5mm; padding-top: 10mm;  }

/* Button */
.print_mode #print_btn { transform: translate(0); position: fixed; right: 2rem; left: unset; top: 2rem; z-index: 5; border-radius: 6rem; width: 3.5rem; }
.print_mode .close { position: fixed; top: 2rem; z-index: 5; right: 2rem; background-color: var(--white); }
.print_mode .close:hover { background-color: var(--blue); }

/* Form */
.print_mode #dynamic_form { /*pointer-events: none; */ border-radius: 0;  }

.print_mode #dynamic_form .chapter { padding: 2.5rem 0; border-bottom: 5px dashed var(--blue); }
.print_mode #dynamic_form .chapter:last-of-type { border-bottom: 0; }
.print_mode #dynamic_form .chapter:first-of-type { padding-top: 0; }

.print_mode #dynamic_form .subchapter { padding-top: 2rem; }
.print_mode #dynamic_form .subchapter:first-of-type { padding-top: 0.25rem; }

.print_mode #dynamic_form .textarea_field textarea { border: 2px solid rgb(var(--black-rgb) / 25%); }

/* Home */
.print_mode #s1_home .s1_container { grid-template-columns: 100%; }
.print_mode #s1_home .container { padding: 0; }

/* Text */
.print_mode #dynamic_form input[type="text"], #dynamic_form input[type="phone"], #dynamic_form input[type="email"], #dynamic_form input[type="number"] { font-size: 16px; }
.print_mode #dynamic_form label { font-size: 18px; }
.print_mode #dynamic_form .selection span { font-size: 16px; }
.print_mode #dynamic_form .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 16px; }
.print_mode #dynamic_form h3 { margin-bottom: 0.5rem; font-size: 25px;}
.print_mode #dynamic_form h4 { font-size: 20px;}

/* Composition reach status */
.print_mode .composition_reach_status_wrapper { box-shadow: unset; border: 2px solid var(--blue); }
.print_mode .composition_reach_status_wrapper:last-of-type { margin-bottom: 0; }

@media print {
	.print_mode .head_wrapper .head_logo img { width: 140px; }
	.print_mode .head_wrapper .head_logo span { font-size: 11px; }
	
	.print_mode #dynamic_form .chapter { border-bottom: 0; }
	.print_mode #dynamic_form .chapter h2 { display: none; }
	.print_mode #dynamic_form .subchapter { /* page-break-after: always; */ border-bottom: 0; margin: 0; }
	
	/* Radio input*/
	.print_mode .radio_container .radio_input input, .print_mode #dynamic_form .checkbox_container .checkbox_input input {  appearance: auto; -webkit-appearance: auto; }
	.print_mode #dynamic_form .radio_input input:not( .print_mode #dynamic_form .radio_input input:checked) { display: none; }
	.print_mode #dynamic_form .radio_input input + label:not( .print_mode #dynamic_form .radio_input input:checked + label) { display: none; }

	.print_mode .close { opacity: 0; }


	.print_mode .flex-l { display: block; }


	@page {
		size: auto;
		margin: 15mm 15mm 15mm 15mm; 
	}

}




/**
 * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
 *
 * RESPONSIVE
 *
 * Settare se necessario regole fluid per minmax di elementi specifici basandosi sulle seguenti regole:
 *	=>	ORIGINAL CALC			->	calc( 12px + (24 - 12) * ( (100vw - 360px) / (1920 - 360) ) )
 *	=>	CALC 1920px -> 360px	->	calc( 12px + (24 - 12) * ( (100vw - 360px) / 1560 ) )
 *	=>	CALC 1280px -> 360px	->	calc( 12px + (24 - 12) * ( (100vw - 360px) / 920 ) )
 *	=>	CALC 1024px -> 360px	->	calc( 12px + (24 - 12) * ( (100vw - 360px) / 664 ) )
 *
 * Da creare fluid dinamico con 2 step per i calc iniziali =   1920 -> 1024   1024 -> 360
 *
 * __________________________________________________________________________________________________________________________________________________________________________
 */

/* .head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 360px) / 1560 ) ); }

#scroll_btn { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 360px) / 1560 ) ); }

.foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 360px) / 1560 ) ); }
#back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 360px) / 1560 ) ); } */




/**
 *
 *  █▄ ▄█  ▄▀▀▄  █▀▀▄  ▀  █     █▀▀
 *  █ █ █  █  █  █▀▀█  █  █  ▄  █▀▀
 *  ▀   ▀   ▀▀   ▀▀▀   ▀  ▀▀▀▀  ▀▀▀ - MOBILE PORT | 601 -> 767
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 601px) {

	
	/*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/
	header { position: fixed; top: 0; }

	.head_wrapper {  padding: 1em 2%; z-index: 2;  justify-content: space-between; flex-wrap: nowrap; }

	.head_wrapper .head_logo { width: 25%; order: unset; }
	.head_wrapper .head_logo span { font-size: 1.8vw; }

	.head_wrapper .menu { padding: 0.5rem 0.55rem; }
	.head_wrapper .menu.active { background-color: var(--blue); color: var(--white); }

	.head_wrapper .sub_menu { min-width: 60%; width: auto; border-radius: 1rem 0 1rem 1rem; }

	.head_wrapper .select_container { margin-top: 0; width: 40%; order: unset; }
	.head_wrapper .select_container select { text-align: left; padding: 0.5rem 1rem; }

	.head_wrapper .user_info { width: 25%; order: unset; }

	#index_menu_switch { order: unset; }

	/*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/
	#s1_single .container.p10t { padding-top: var(--c25v); }

	/*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/
	.s1_archive .container { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding-top: calc(var(--c15v) + 3rem); }

	/*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/
	.radio_container .radio_input label { padding-left: 0.5rem; }

	/*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/
	/* Progress bar */
	#bars_container { flex-direction: row; padding: 0.75rem 2rem; gap: 1rem; }
	#bars_container .left { width: calc(50% + 2.5rem); }
	#bars_container .progress_container { max-width: 500px; }

	/*∞∞∞∞∞∞ SECTION ∞∞∞∞∞∞*/
	/* Natura origin index */
	#noi_repeater_container .single_field, .single_noi_16128 .single_field { width: calc(50% - 1rem); }

}




/**
 *
 *  ▀▀█▀▀  ▄▀▀▄  █▀▀▄  █     █▀▀  ▀▀█▀▀
 *    █    █▀▀█  █▀▀█  █  ▄  █▀▀    █
 *    ▀    ▀  ▀  ▀▀▀   ▀▀▀▀  ▀▀▀    ▀   - TABLET |  768 x 1024  ->  1023 x 1280
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 768px) {

	/*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/
	.radio_field .field_label {  width: auto; max-width: 55%; } 
	#dynamic_form .radio_container { display: flex; justify-content: flex-start; align-items: center; gap: 2rem; margin-top: 0; }

	#dynamic_form .single_field.radio_field { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
	#dynamic_form .single_field.radio_field.not_visible_field { display: none; }

	#dynamic_form .file_container input, #dynamic_form .file_container .placholder { border-bottom: 1px solid rgb(var(--black-rgb) / 25%); }

	/*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/
	.natural_origin_container .flex-container { justify-content: space-between;  margin-top: 0.25rem; }
	.natural_origin_container .single_field { width: 48%; }


	/*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/
	/* Contents */

	/* Credits */
	#credits br { display: none; }
	#credits .resp_sep { display: inline-block; }

}




/**
 *
 *  █▀▀▄  █▀▀  ▄▀▀  █ ▄▀  ▀▀█▀▀  ▄▀▀▄  █▀▀▄      ▄▀▀  █▄ ▄█  ▄▀▀▄  █    █ 
 *  █  █  █▀▀   ▀▄  █▀▄     █    █  █  █  █       ▀▄  █ █ █  █▀▀█  █ ▄  █ ▄ 
 *  ▀▀▀   ▀▀▀  ▀▀   ▀ ▀▀    ▀     ▀▀   █▀▀       ▀▀   ▀   ▀  ▀  ▀  ▀▀▀  ▀▀▀  - LAPTOP |  1024 x 768  ->  1280 x 720
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 1024px) {


	/*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/
	/* Head Content */
	.head_wrapper .head_logo img { max-width: 160px; }
	.head_wrapper .head_logo span { font-size: 12px; }

	.head_wrapper #form_select { max-width: 325px; margin: 0 auto; }

	/*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/
	/* Notice */
	#notice .container { padding: 1.25rem 2rem; }

	/* Card */
	.card_index .title { width: 25%; }
	.card_index .info { width: 25%; }
	.card_index .desc { margin: 0; width: 40%; }
	.card_index .btn_container {  margin: 0; width: 10%; }

	.card_index .products_link { display: flex; justify-content: center; align-items: center; gap: 1rem; }
	.card_index .accordion_arrow { width: max-content; margin-top: 0; }

	/*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/
	/* Index */
	#form_index { background-color: transparent; padding: 0; }
	#form_index .container { position: sticky; top: var(--c20v); padding: 2.5rem 1.5rem; background-color: var(--blue); border-radius: 1.5rem; }
	#form_index .index_chapter { padding-left: 0; }

	/*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/
	.s1_container { background-color: transparent; box-shadow: unset; grid-template-columns: 68.5% 30%; gap: 1.5rem; }

	/* Login */
	#s1_home.login .container { grid-template-columns: 1fr 1fr; }
	#s1_home.login .left { background-color: var(--blue);  }

	/* Wrapper */
	.sidebar_wrapper {  position: sticky; top: 15vh; margin: 0;  }

	/*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/
	#s1_single .container.p10t { padding-top: var(--c20v); }

	/*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/
	.s1_archive .wrapper { display: flex; justify-content: center; align-items: stretch; gap: 1rem;  }
	.s1_archive .wrapper #filter_products, .s1_archive .wrapper #filter_formulations { width: 25%; }
	.s1_archive .wrapper .all_cards { width: calc(75% - 1rem); }

	/*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/
	/* Contents */

	/* Credits */
	#credits a:hover, #credits a:active, #credits a:focus { opacity: 1; color: var(--color); }
	#credits #credits_studio:hover { color: #e74e0f; }

	/* Back Top */
	#back_top { opacity: 1; }

}




/**
 *
 *  █     ▄▀▀▄  █▀▀▄  ▀█▀  ▄▀▀▄  █▀▀▄
 *  █  ▄  █▀▀█  █  █   █   █  █  █  █
 *  ▀▀▀▀  ▀  ▀  █▀▀    ▀    ▀▀   █▀▀  - LAPTOP |  1281 x 720  ->  1366 x 768
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 1281px) {

	/* Card */
	.card_index .btn_container {  flex-wrap: nowrap; }

}




/**
 *
 *  █▀▀▄  █▀▀  ▄▀▀  █ ▄▀  ▀█▀  ▄▀▀▄  █▀▀▄
 *  █  █  █▀▀   ▀▄  █▀▄    █   █  █  █  █
 *  ▀▀▀   ▀▀▀  ▀▀   ▀ ▀▀   ▀    ▀▀   █▀▀  - LAPTOP |  1367 x 768  ->  1919 x 1080
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 1367px) {}




/**
 *
 *  █  █  █▀▀▄  █▀▀  █▀▀▄
 *  █  █  █▀▀█  █▀▀  █▐█▀
 *   ▀▀   ▀▀▀   ▀▀▀  ▀ ▀▀ - ÜBER | 1921 -> ...
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 1921px) {}




/**
 *
 *   ▄▀█   █ ▄▀
 *  █▄▄█▄  █▀▄
 *     █   ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ...
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and ( min-width: 2561px ) {}