@charset "utf-8";


/***********************  customizzazione se PLanGei gira in service hub */
/********************* menù */

@media (min-width: 979px) {
	.plangei-five .sidebar-left .sidebar{
    width: 80px;
  }
	.plangei-five .sidebar-left .main-content {
    margin-left: 80px;
  }
  .plangei-five .main-bar-with-nicescroll {
    left: 80px;
  }
  .back-url{
	display: none;
  }
  
}

  .back-url{
	/*padding-top: 50px;
	padding-bottom: 20px; */
	color: var(--color-menu) !important;
	padding-left: 15px;
  }

.plangei-five .sidebar-inverse .nav-side {
  border-bottom: 0px;
  margin-top: 16px;
}

.plangei-five .sidebar-inverse .nav-list {
  padding-right: 0;
  padding-left: 0;
}

.plangei-five .nav-side ul > li > a, 
.plangei-five .sidebar-inverse .nav-side ul > a, 
.plangei-five .sidebar-inverse .nav-side ul > a:hover,
.plangei-five .sidebar-inverse .nav-side ul > .active > a, 
.plangei-five .sidebar-inverse .nav-side ul > .active > a:hover {
  padding: 7px 0px !important;
  font-size: 12px !important;
  text-align: center !important;
  color: white !important;
}

@media (max-width: 977px) {
.plangei-five .nav-side ul > li > a, .plangei-five .sidebar-inverse .nav-side ul > .active > a, .plangei-five .sidebar-inverse .nav-side ul > .active > a:hover {
	font-size: 18px;
	}
}

@media (min-width: 978px) {
	.plangei-five .nav-side ul > li > a, 
	.plangei-five .sidebar-inverse .nav-side ul > .active > a, 
	.plangei-five .sidebar-inverse .nav-side ul > .active > a:hover {
	  text-align: center;
	}
}


.plangei-five .nav-list > li > a /*, .nav-list .nav-header*/ {
  margin-right: 0px;
  margin-left: 0px;
}

.plangei-five .sidebar-inverse .nav-side ul > .active > a, 
.plangei-five .sidebar-inverse .nav-side ul > .active > a:hover, 
.plangei-five .sidebar-inverse .nav-side ul > li > a:hover{
	border-radius: 0px !important;
	/*background: rgb(54,76,105) !important;*/
}

.plangei-five .sidebar-inverse .nav-side ul > .active > a, 
.plangei-five .sidebar-inverse .nav-side ul > .active > a:hover {
	color: white !important;
	/*border-left: 2px solid white;*/
	background: none !important;
}

.plangei-five .nav-side .accordion-heading {
	height: 0;
  	display: none;
}

.plangei-five a.mobile-btn {
  height: 100%;
  color: var(--color-menu) !important;
}  
.plangei-five .mobile-btn i {
	text-align: left;
  	display: block;
  	width: 100%;
  height: 100%;
padding-top: 5px;
  padding-left: 10px;
}  
.plangei-five .mobile-btn i.fa-chevron-down:before {
  content: "\f0c9";
  font-size: 36px;
  color: var(color-menu);
  }
.plangei-five .mobile-btn h4 {
 display:none !important;
}

/**************  icone nel menù di navigazione */

/* DEPRECATED ON 9/4/2024
ATT!! icone del menù 
metto !important alle 3 icone usate perchè la selezionata else prende la freccia
Se cambio icone o ne ggiungo devo risolvere sta cosa e renderla dinamica

@media (min-width: 979px) {
	.plangei-five .nav-side ul > li > a[class*="fontello-icon"]:before,
	.plangei-five .sidebar-inverse .nav-side ul > .active > a[class*="fontello-icon"]:hover::before{
		font-size: 24px;
	  display: block;
	  text-align: center;
	  margin: 0 auto;
	}
}

.plangei-five .fontello-icon-cog-2::before {
  content: '\e866' !important;
}
.plangei-five .fontello-icon-calendar::before {
  content: '📅'  !important;
}
.plangei-five .fontello-icon-list-1::before {
  content: '\e765'   !important;
}
.plangei-five .nav-side .active .accordion-toggle::before, .plangei-five .nav-side .active .accordion-toggle:hover::before, .plangei-five .sidebar-inverse .nav-side ul > .active > a::before, .plangei-five .sidebar-inverse .nav-side ul > .active > a:hover::before {
  font-size: 24px;
}
*/

@media (min-width: 979px) {
	.plangei-five .nav-side ul > li > a[class*="-icon"]:before,
	.plangei-five .sidebar-inverse .nav-side ul > .active > a[class*="-icon"]:hover::before{
	  font-size: 24px;
	  display: block;
	  text-align: center;
	  margin: 0 auto;
	  padding: 0;
	}
}
.plangei-five .nav-side ul > li > a[class*="-icon"]{
	font-size: 24px;
	display: block;
	text-align: center;
	margin: 0 auto;
}


.plangei-five .nav-side .active .accordion-toggle::before, 
.plangei-five .nav-side .active .accordion-toggle:hover::before, 
.plangei-five .sidebar-inverse .nav-side ul > .active > a::before, 
.plangei-five .sidebar-inverse .nav-side ul > .active > a:hover::before {
  /*font-size: 24px;*/
  content: '';
}




.calendar-event-icon::before{
	display: block;
  	content: '';
 	background-image: url('assets/img/icona-service-qube/calendar-event.svg');
	background-size: 32px 32px;
    height: 32px;
    width: 32px;
}
.list-icon:before{
	display: block;
  	content: '';
 	background-image: url('assets/img/icona-service-qube/list.svg');
	background-size: 32px 32px;
    height: 32px;
    width: 32px;
}	
.settings-icon:before{
	display: block;
  	content: '';
 	background-image: url('assets/img/icona-service-qube/settings.svg');
	background-size: 32px 32px;
    height: 32px;
    width: 32px;
}


/************** dataTable 
.plangei-five .table td {
  line-height: 14px;
  font-size: 14px;
}
.plangei-five table.dataTable.cell-border tbody th, 
.plangei-five table.dataTable.cell-border tbody td {
  border-right: 0px;
  padding: 12px 24px !important;
}
.plangei-five.table thead th, 
.plangei-five table.dataTable thead th, 
.plangei-five table.dataTable tfoot th, 
.plangei-five table.dataTable > tbody > tr.child span.dtr-title {
  text-transform: uppercase;
  padding: 12px 24px !important;
}
*/