/*
	Qui ci va solo ciò che specifica le cose a livello di struttura/scheletro
	(ad eccezione del livello di struttura dell'assetto cms, es. "#body.cms_mode ....", che va in 50_ec_cms.css)
	Le direttive relative ai contenuti vanno specificate in apposito file di stile (es. ec_box.css per contenuti di ".box").
*/

/********** BODY **********/

	body {
	}

	#body {
		margin: 0 auto;
		padding: 0; /* 0 perchè se > 0 per qualche ignoto motivo #areacenter va sotto #arealeft prima ancora di incolonnare le schedine nel catalogo matrix su resize del browser */
		width: 100%;
		max-width: 1920px;
	}
	
	body:not(.email) table.email {
		/* Annulla per il browser le dimensioni appositamente aggiunte per la e-mail (caso layout carrello bicolonna) */
		width: 100% !important;
		max-width: unset !important;
	}

/* --------- BODY --------- */

/********** NAVBAR TAB **********/

	/* Non contemplato per il desktop */

/* --------- NAVBAR TAB --------- */

/********** AREA MIDDLE (#areamiddle --> #arealeft.areaside / #areacenter.areaside --> (#areacenter_top / #areacenter_content) / #arearight) **********/

	#areamiddle {
	    display: flex;
	    flex-wrap: wrap;
		width: 100%; 
		max-width: 1280px;
		min-height: 800px;
		margin: 20px auto 0;
		overflow: hidden;
	}
	
	#areamiddle .panel_title {
		position: absolute;
		right: 0;
	}
	
	#areamiddle #arearight .panel_title {
		left: 0;
	}
	
	#areamiddle .panel_handle {
		width: 16px;
		z-index: 1000;
		cursor: pointer;
	}

	#areamiddle .panel_handle span > svg {
		color: var(--wec-color-focus);
	}
	
	#arealeft {
		width: 280px; /* Valore usato da codice js */
		max-width: 280px; /* Valore usato da codice js */
		margin-right: 20px; /* Valore usato da codice js. Spazio tra #areacenter e panel */
		padding-left: 0;
		padding-right: 20px; /* Valore usato da codice js. Spazio per panel handle. */
	}
	
	#arealeft.collapsed {
		padding-left: 0;
	}
	
	#areacenter {
		width: 1280px; /* Se non si massimizza #areacenter all'inizio, non viene visualizzata bene. Esistono dei calcoli js tra #arealeft/#areacenter/#arearight che la ridimensionano poi a dovere. */ 
		min-width: 5%;
		max-width: 1280px; /* Valore usato da codice js */
		overflow: auto hidden;
	}
	
	#arearight {
		width: 240px; /* Valore usato da codice js */
		max-width: 240px; /* Valore usato da codice js */
		margin-left: 20px; /* Valore usato da codice js. Spazio tra #areacenter e panel */
		padding-left: 20px; /* Valore usato da codice js. Spazio per panel handle. */
		padding-right: 0;
	}
	
	#arearight.collapsed {
		padding-right: 0;
	}
	
	#arealeft,
	#arearight,
	#areacenter {
		position: relative;
	}

/* --------- AREA MIDDLE (#areamiddle --> #arealeft.areaside / #areacenter.areaside --> (#areacenter_top / #areacenter_content) / #arearight) --------- */