:root {
	--navbar-top: 4em;
	--sidebar-x: 45em;
	--font-family: "Roboto", sans-serif;
    --font-size:	1.3rem;
    --font-weight:	400;
    --line-height:	1.6;
    --color:		#4F4F4F;
	--background:	#FFFFFF;
}


/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                /*url('../img/ajax-loader.gif') */
                50% 50% 
                no-repeat;
}

#simple-modal .modal-dialog{
	position: absolute;
	float: left;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}


body {
    font-family:	var(--font-family);
    font-size:		var(--font-size);
    font-weight:	var(--font-weight);
    line-height:	var(--line-height);
    color:			var(--color);
    background:		var(--background);
}


input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 	1px solid #ccc;
    display: 	inline-block;
    padding: 	6px 12px;
    cursor: 	pointer;
	max-width: 	70px;
	background: #DDD;	
}


#page-body{
	/* impostando lo stesso colore della sidebar, si elimina l'effetto
		del bianco visibile quando c'è la transition di apertura della sidebar
	background:		#FFFFFF;
	*/
	background:		#E9EFF2;
	z-index:		-1;
}

#calendar{
	background:		#FBFBFF;
	transition: all 0.4s;
}

#calendar.swapMode{
	background:		#DDEEDD;
}


#navbar-menu{
	background:		#FFFFFF;
}

#content{
/*	background:		#FA9F39;	*/
	background:		#F4F4FF;
}

#sidebar{
	background:		#E9EFF2;
	z-index:		-1;
}

#sidebar-container{
	background:		#E9EFF2;
}

#menu-action{
	background:		#E9EFF2;
}

.hidden{
	visibility: hidden;
}

hr.huge{
	border-top: 3px solid #999
}

hr.solid{
	border-top: 2px solid #999
}

hr.thin{
	border-top: 1px solid #999
}

hr.dotted{
	border-top: 1px dotted #999
}

.separator {
	margin: 		3rem 0;
	border-bottom:	1px dashed #fff;
}

.text-uppercase {
	letter-spacing:	0.1em;
}

.text-gray {
	color: 			#aaa;
}

.text-dark {
	color: 			#333;
}

.no-decoration {
	text-decoration:	none;
}


#navbar-menu {
	position: fixed !important;
	width: 100%;
	height: var(--navbar-top);
	z-index:200;
}

#page-body {
	position: fixed !important;
	top: var(--navbar-top);
	width: 100%;
	height: calc(100% - var(--navbar-top));
}

#iframe-container {
	position: fixed !important;
	top: 0;
	width: 100%;
	height: 100%;
	z-index:199;
}
#iframe-calendar {
	width: 100%;
	height: 100%;
}

#AllegatoFoto {
	visibility: hidden;
	height: 0%;
}


/* per funzionamento sidebar */

#sidebar {
	min-width: var(--sidebar-x);
	width: var(--sidebar-x);
	height: calc(100% - var(--navbar-top));
	position: fixed;
	left: calc(100% - var(--sidebar-x));
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.4s;
}

#content {
	width: calc(100% - var(--sidebar-x));
	height: calc(100% - var(--navbar-top));
	transition: all 0.4s;
}

#sidebar.hide {
	margin-left: calc(100%);
}

#content.hide {
	width: 100%;
	margin-right: 0;
}


@media (max-width: 768px) {
	#sidebar {
		margin-left: calc(100%);
	}
	#sidebar.active {
		left: calc(100% - var(--sidebar-x));
	}
	#content {
		width: 100%;
		margin-right: 0;
	}
	#content.active {
		width: calc(100% - var(--sidebar-x));
	}
}

/* ----------------------------------------  */
.toggle-sidebar {
	width:		10px;
	height:		32px;
	position:	absolute;
	z-index:	100;
	top:		45px;
	display:	block;
	cursor:		pointer;
	outline:	0;
	text-decoration: none;
	background: url("../img/toggle-button.png") no-repeat;
	background-position-x: 0%;
	background-position-y: 0%;
	transition: visibility 0s, left 0.4s;
}


#show-toggle-sidebar {
	background-position: 0 0;
	left: calc(100% - 13px);
	visibility:	visible;
	
}

#hide-toggle-sidebar {
	background-position: 0 -32px;
	left: calc(100% - var(--sidebar-x));
	visibility:	visible;
	
}

#show-toggle-sidebar.hide {
	background-position: 0 0;
	left: calc(100% -  var(--sidebar-x) - 13px);
	visibility:	hidden;
	
}

#hide-toggle-sidebar.hide {
	background-position: 0 -32px;
	left: calc(100% - 3px);
	visibility:	hidden;
	
}

.hide-object{
	visibility:	hidden;
}
.collapse-object{
	display:	none;
}


.bg-highlight {
	background-color: #1111 !important;
}

.bg-highlight-blue {
	background-color: #22f2 !important;
}
.bg-highlight-green {
	background-color: #2f22 !important;
}

.bg-orange {
	background-color: #fd7e14;
}

.bg-ocra {
	background-color: #ffd800;
}


/* ----------------------------------------  */


/* ----------- DT BUTTONS------------------  */
div.dt-button-collection a.reset-dt-filter {
	border-top: 1px solid #cfcfcf;
}
div.dt-button-collection a.custom-dt-filter {
	margin-top: 1em;
	border-top: 3px solid #9f9f9f;
}


/* ----------------------------------------  */

/* ----------- OVERWRITE CALENDAR ------------------  */
#calendar .fc-day-today {
    border: 3px solid #9f9f9f !important;
} 

/* ----------------------------------------  */


.textarea-div {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    max-height: 200px;
    overflow: auto;
    padding: 2px;
    /*resize: both;
    width: 400px;*/
}

ul li{
	font-size:		1.6rem;
    font-weight:	500;
}

ul.dual-column li:nth-child(2n+0) {
    list-style: none;
}