@CHARSET "UTF-8";

/* ========================= HEADER ==========================*/
.nav_header {
	position: absolute;
	top: 0px;
	left: 0px;
	
	/*height: 80px;*/
	height: 40px;
	width: 140px;
	
	z-index: 10;
	
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
}

/*.nav_header div {
	position: relative;
	display: inline-block;
}*/

/*.nav_header div:nth-child(1) {
	height: 50px;
}*/

/*.nav_header div:nth-child(2) {*/
.nav_header div:nth-child(1) {
	/*height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 1.2em;*/
	position: relative;
	width: 100%;
	height: 100%;
    
    line-height: 40px;
    text-align: center;
    font-size: 0.9em;
}

.nav_header div:nth-child(2),
.nav_header div:nth-child(3),
.nav_header div:nth-child(4) {
	position: relative;
	width: 50px;
	height: 100%;
	
	cursor: pointer;
	
	display: none;
}

.nav_header div img {
	position: absolute;
	top: 50%;
	left: 50%;
		
	margin: 0;
	margin-right: -50%;
		
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* ========================== MENU UTENTE ============================ */
#user_menu {
	position: fixed;
	left: 0;
	/*top: 80px;*/
	top: 40px;
	
	width: 140px;
	height: 30px;
	
	border-top: solid 2px;
	
	/*font-size: 1.2em;*/
	/*font-size: 1.1em;*/
	font-size: 0.9em;
	
	z-index: 10;
}

#user_menu figure {
	position: relative;
	margin: 0;
	padding: 0;
	
	height: 28px;
	line-height: 28px;
	
	cursor: pointer;
}

#user_menu figure img {
	position: relative;
	margin: 0 5px 0 33px;
	
	display: inline-block;
	vertical-align: middle;
}

#user_menu figure figcaption {
	position: relative;
	
	display: inline-block;
	vertical-align: middle;
}

/* ============================== NAV ================================== */
nav.side {
	position: fixed;
	/*top: 110px;*/
	top: 70px;
	left: 0px;
	bottom: 0;
	
	width: 140px;
	
	/*font-size: 1.2em;*/
	/*font-size: 1.1em;*/
	
	z-index: 10;
}

.nav_label {
	position: relative;
	margin: 0;
	
	/*height: 100px;*/
	height: calc(100% / 7);
	
	border-top: solid 2px;
	
	cursor: pointer;
	box-sizing: border-box;
}

/*.nav_label:nth-child(1) {
	margin: 5px 0 0 0;
}*/

.nav_label figure {
	position: relative;
	margin: 0;
	
	height: 100%;
	width: 100%;
}

.nav_label figure img {
	position: absolute;
	top: 30%;
	left: 50%;
	
	margin: 0;
	margin-right: -50%;
	
	border: solid 7px;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	
	-webkit-transform: translate(-50%, -30%);
	-moz-transform: translate(-50%, -30%);
	-o-transform: translate(-50%, -30%);
	-ms-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
}

.nav_label figure figcaption {
	position: absolute;
	top: 85%;
	left: 50%;
	
	margin: 0;
	margin-right: -50%;
	
	-webkit-transform: translate(-50%, -85%);
	-moz-transform: translate(-50%, -85%);
	-o-transform: translate(-50%, -85%);
	-ms-transform: translate(-50%, -85%);
    transform: translate(-50%, -85%);
}

/* =========================== NAV MOBILE =============================== */
nav.mobile {
	position: fixed;
	top: 53px;
	right: 0;
	left: 0;
	
	height: 0;
	
	z-index: 1000;
	overflow: hidden;
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

nav.mobile .nav_mobile_label {
	position: relative;
	width: inherit;
	height: 50px;

	border-bottom: solid 2px;
	
	cursor: pointer;
	
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
}

nav.mobile .nav_mobile_label figure {
	position: relative;
	margin: 0;
	
	width: 100%;
	height: inherit;
}

nav.mobile .nav_mobile_label figure img {
	position: absolute;
	top: 50%;
	left: 20px;
	
	margin: 0;
	margin-right: 0;
	
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

nav.mobile .nav_mobile_label figure figcaption {
	position: relative;
	margin: 0 0 0 64px;
	height: inherit;
	
	line-height: 50px;
}

/* ========================= CONTENITORE ================================ */
#main_container {
	position: relative;
	/*top: 0px;
	right: 75px;
	bottom: 0px;
	left: 145px;*/
	margin: 0 5px;
	height: 100%;
	
	flex-grow: 1;
	overflow: hidden;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

#main_container .body {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#main_container .body header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	
	height: 40px;
	
	border: none;
	
	display: block;
	
	display: flex;
	flex-flow: row nowrap;
	
	z-index: 100;
}

#main_container .body header .add_activity {
	position: relative;
	
	width: 50px;
	height: 40px;
	
	cursor: pointer;
	display: none;
}

#main_container .body header .add_activity img {
	position: absolute;
	top: 8px;
	left: 13px;
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

#main_container .body header span {
	position: relative;
	margin: 0;
	padding: 0 0 0 20px;
	
	width: calc(100% - 40px);
	height: inherit;
	
	line-height: 40px;
    font-family: 'montserratbold';
    font-size: 1.1em;
}

#main_container .body #pulsantiera {
	position: absolute;
	top: 40px;
	right: 0;
	bottom: 0;
	width: 80px;
	
	border-left: solid 3px;
	
	display: flex;
	flex-flow: column nowrap;
	
	z-index: 90;
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

#main_container .body section,
.pannello_iniziale #dettaglio_scadenze .reminder_container section {
	position: absolute;
	/*top: 70px;*/
	top: 40px;
	right: 80px;
	bottom: 0;
	left: 0;
}

#main_container .body section .dettaglio,
.pannello_iniziale #dettaglio_scadenze .reminder_container section .dettaglio {
	position: absolute;
	top: 0px;
	right: 30px;
	bottom: 10px;
	left: 0px;
}

#main_container .body section .dettaglio .info_body {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	
	border: solid 1px;
	overflow: hidden;
}

/* ======================= CONTENITORE OVER ============================= */ 
#main_over_container {
	position: relative;
	/*top: 0;
	bottom: 0;
	left: 138px;*/
	margin: 0 0 0 138px;
	
	width: 0;
	height: 100%;
	
	z-index: 1;
	
	border-right: solid 2px;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	
	overflow: hidden;
}

#main_over_container .header_div {
	position: relative;
	height: 40px;
	
	margin: 0;
	
	border-bottom: solid 2px;
}

#main_over_container_header_title {
	position: relative;
	margin-left: 20px;
	
	height: 38px;
	
	line-height: 38px;
	font-family: 'montserratbold';
}

#main_over_container .header_div .form_button_area {
	right: 15px;
	bottom: 7px;
}

#main_over_container_body {
	position: absolute;
	top: 41px;
	right: 1px;
	bottom: 1px;
	left: 3px;
	
	/*overflow-y: auto;*/
}

#main_over_container_body .wrapper {
	position: relative;
	width: 100%;
	
	height: 40px;
	line-height: 40px;
	
	display: flex;
	flex-flow: row nowrap;
}

#main_over_container_body .wrapper .anagrafica {
	position: relative;
	width: 100%;
	height: inherit;
	
	padding-left: 5px;
	
	line-height: inherit;
	font-weight: bold;
	
	border-bottom: solid 1px;
	
	cursor: pointer;
	
	overflow: hidden;
}


#main_over_container_body .wrapper:last-child {
	border-top: solid 1px;
	border-bottom: solid 1px;
}

#main_over_container_body .label,
#main_over_container_body .interlabel,
#main_over_container_body .information {
	height: inherit;
	line-height: inherit;
	
	padding-left: 5px;
}

#main_over_container_body .label {
	width: 130px;
	
	border-right: solid 1px;
}

#main_over_container_body .interlabel {
	margin: 0 5px 0 10px;
}

#main_over_container_body .information {
	max-width: calc(100% - 133px);
	
	font-family: 'montserratbold';
	overflow: auto;
	
	border: solid 1px #fff;
}

/* ========================= SORTING BOX ================================ */
.sorting_box_container {
	position: fixed;
	top: 50px;
	right: 110px;
	
	width: 750px;
	height: 40px;
	
	z-index: 80;
	/*overflow: hidden;*/
	
	display: flex;
	flex-flow: row-reverse nowrap;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.sorting_box_container .mobile_button {
	position: absolute;
	top: 0;
	right: 0;
	
	height: 50px;
	width: 50px;
	
	cursor: pointer;
	
	display: none;
	z-index: 10;
}

.sorting_box_container .mobile_button img {
	position: absolute;
	top: 50%;
	left: 50%;
		
	margin: 0;
	margin-right: -50%;
		
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.sorting_box_container .sorting_box {
	position: relative;
	margin: 0;
	
	width: 250px;
	height: 40px;
	
	border: solid 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	
	overflow: hidden;
}

.sorting_box_container .sorting_box:nth-child(3),
.sorting_box_container .sorting_box:nth-child(4) {
	margin: 0 10px 0 0;
}

.sorting_box_container .sorting_box .title {
	position: relative;
	
	height: 40px;
	
	display: flex;
    justify-content: space-between;
    
    cursor: pointer;
    
    z-index: 10;
}

.sorting_box_container .sorting_box .title span,
.sorting_box_container .sorting_box .title .sorting_arrow {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.sorting_box_container .sorting_box .title span {
	margin-left: 10px;
	line-height: 40px;
}

.sorting_box_container .sorting_box .title .sorting_arrow {
	margin: 8px 10px 0px 0px;
	
	height: 24px;
	width: 24px;
}

.sorting_box_container .sorting_box,
.sorting_box_container .sorting_box .title .sorting_arrow {
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.sorting_box_container .sorting_box .sorting_form {
	position: absolute;
	top: 30px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

.sorting_box_container .sorting_box .sorting_form select,
.sorting_box_container .sorting_box .sorting_form input {
	width: 70%;
}

.sorting_box_container .sorting_box .sorting_form .form_button_area {
	bottom: 10px;
}