/*:::::::::::::::::::::::::::::::::::::::::: GENERALI ::::::::::::::::::::::::::::::::::::::::::::::::::::
----------------------------------------------------------------------------------------------------------*/

body{
	overflow-x: hidden;
	font-size: 13px;
}
h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.4rem;
}

@media (min-width: 768px) {
  h1 {
      font-size: 2rem;
  }
  h2 {
      font-size: 1.6rem;
  }
}

@media (min-width: 991px) {
  h1 {
      font-size: 2.4rem;
  }
  h2 {
      font-size: 2rem;
  }
}

@media (min-width: 1200px) {
	h1{
		font-size: 2.8rem;
	}
	h2{
		font-size: 2.2rem;
	}
	.container-cm{
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
		max-width: 1800px;
	}
}

.btn{
	cursor: pointer;
}
.text-michroma{
	font-family: 'Michroma', sans-serif;
}
.mt-10{
	margin-top: 16rem !important;
}
.modal {
    overflow-y:auto;
}
.link{
	font-size: 1.6em;
	padding: 0.2em;
	cursor: pointer;
	color: #007bff !important;
}
.link:hover {
	text-decoration: underline !important;
}
.input-desc{ /*tooltip*/
	cursor: pointer;
	color: black;
}
.rightx{
	float: right;
	cursor: pointer;
	color: #007bff;
}
.rightx:hover {
	color: #0056b3;
}
.message{
	font-size: 18px;
}
.col-fx{

}
.col-0{
	width: 0px;
	flex: 0 0 0%;
    max-width: 0%;
	opacity: 0;
}
.mh-custom{
	max-height: 319px!important;
}
.notransition{
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}


/*:::::::::::::::::::::::::::::::::::::::::: CARICAMENTO PAGINA ::::::::::::::::::::::::::::::::::::::::::
----------------------------------------------------------------------------------------------------------*/
.pace {
	-webkit-pointer-events: none;
	pointer-events: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.pace-inactive {
	display: none;
}

.pace .pace-progress {
	background: #007bff;
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 2px;
}

#cover{
	background-color: white;
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 1000;
}

/*:::::::::::::::::::::::::::::::::::::::::: FORM :::::::::::::::::::::::::::::::::::::::::::::
-----------------------------------------------------------------------------------------------*/
form input, form select {
	border-radius: 0 !important;
}
.form-control:disabled, .form-control[readonly]{
	background-color: #f5f5f5;
}
.euro{
	padding-left: 25px !important;
}
.input-symbol-euro {
    position: relative;
    display: block;
}
.input-symbol-euro:after {
    color: #37424a !important;
    content: "€";
    font-size: 17px !important;
    font-weight: 400;
    position: absolute;
    display: block;
    height: 100%;
    bottom: 5px;
    left: 10px;
    line-height: 42px;
}
.modified{
	background-color: #ffffcc;
}
.green_input {
	background-color: #28a745;
	color: white;
}
.green_input:disabled, .green_input[readonly] {
	background-color: #28a745;
	opacity: .65;
}
.red_input {
	background-color: #dc3545;
	color: white;
}
.red_input:disabled, .red_input[readonly] {
	background-color: #dc3545;
	opacity: .65;
}
.date_read_only::-webkit-inner-spin-button {
  display: none;
}
.date_read_only::-webkit-calendar-picker-indicator {
  display: none;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
	margin-top: 1em;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

/* QR CODE GENERATOR */

.qr-code-generator {
	margin: 14px;
	height: 100%;
	font-size: 14px;
	flex-direction: column;
	display: flex;
}

#qrcode {
	width: 250px;
	height: 250px;
	margin: 10px auto;
	text-align: center;
}

/*:::::::::::::::::::::::::::::::::::::::::: VALIDAZIONE ::::::::::::::::::::::::::::::::::::::
-----------------------------------------------------------------------------------------------*/
label.error{
    color: #f33;  
    padding: 0;   
    font-size: 11px;  
}
input.error{
	border-color: #FF0000;
}
input.error:focus {
    border-color: #FF0000;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

/*:::::::::::::::::::::::::::::::::::::::::: MESSAGGI :::::::::::::::::::::::::::::::::::::::::
-----------------------------------------------------------------------------------------------*/
#alert_placeholder{
	z-index: 1030;
	position: fixed;
	top: 10px; 
	left: 2%;
	width: 96%;
}
hr.dashed {
  border-top: 1px dashed;
}
span.msg{
	line-height: 1.8;
}

.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.icon_succ::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058";
}
.icon_fail::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f06a";
}
.alert_my {
   z-index: 9990;
   position: fixed;
   top: 5px; 
   left:2%;
   width: 96%;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#table_msg{
	font-size: 15px;
}
#form_msg{
	font-size: 15px;
}

/*:::::::::::::::::::::::::::::::::::::::::: RICERCA ::::::::::::::::::::::::::::::::::::::::::
-----------------------------------------------------------------------------------------------*/

fieldset.f_search{
	border: 1px solid #ddd !important;
	margin: 0;
	xmin-width: 0;
	padding: 10px;       
	position: relative;
	border-radius:4px;
	background-color:#f5f5f5;
	padding-left:10px!important;
}
legend.l_search{
	font-size:14px;
	font-weight:bold;
	margin-bottom: 0px; 
	border: 1px solid #ddd;
	border-radius: 4px; 
	padding: 5px 10px 5px 10px; 
	background-color: #ffffff;
	width:auto;
}
.selected_f , .selected_f:focus{
	border-color: rgba(69, 173, 43, 0.8);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
	outline: 0 none;
}
.selected_i, .selected_i:focus{
	border-color: rgba(69, 173, 43, 0.8);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
	outline: 0 none;
}
.gj-icon {
	top: 5px !important;
}
input[type="search"] {
	-webkit-appearance: searchfield;
}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: searchfield-cancel-button;
}

.btn-group.special {
  display: flex;
}

.special .btn {
  flex: 1
}

/*:::::::::::::::::::::::::::::::::::::::::: FIELDSET ALTERNATIVO ::::::::::::::::::::::::::::::::::::::::::
------------------------------------------------------------------------------------------------------------*/

fieldset.scheduler-border {
    border: 1px solid #dee2e6 !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
	color: #757575;
	font-size: 1.2em !important;
	font-weight: bold !important;
	text-align: left !important;
	width:auto;
	padding:0 10px;
	border-bottom:none;
}

/*:::::::::::::::::::::::::::::::::::::::::: TABELLA ::::::::::::::::::::::::::::::::::::::::::
-----------------------------------------------------------------------------------------------*/

table.dataTable{
	border-collapse: collapse;
}

table.dataTable  td.center{
	text-align: center;
}
	table.dataTable thead{
	color: #495057;
}
	table.dataTable tfoot{
	color: #495057;
}
table.dataTable thead th,
table.dataTable thead td {
	border-bottom: 1px solid #dee2e6; }
table.dataTable thead th:active,
table.dataTable thead td:active {
	outline: none; }
table.dataTable tfoot th,
table.dataTable tfoot td {
	border-top: 1px solid #dee2e6; }
/*table.dataTable tbody tr {
	height: 0px;
}*/
table.dataTable tbody tr.selected {
	background-color: #007bff1c !important;
	box-shadow: 0 -2px 0 0 #007bff inset;
	/*animation-name: fadeInBorder;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.25s;*/
}

@keyframes fadeInBorder {
	0% {
		/*background-color: #cedee0;*/
		box-shadow: 0 -2px 0 0 transparent inset;
	}
	100% {
		/*background-color: white;*/
		box-shadow: 0 -2px 0 0 #007bff inset;
	}
}

table.dataTable.hover tbody tr:hover{
	background-color: #f4f9ff;
}

tbody>tr.selected>.sorting_1 {
	background-color: #f4f9ff !important;
	font-weight: bold;
}

table.dataTable tbody tr  .btn-link{
	color: #007bff !important;
}

table.dataTable tbody tr.selected  .btn-link{
	color: #007bff !important;
}

.rightx{
	float: right;
	cursor: pointer;
	color: #007bff;
}
.rightx:hover {
	color: #0056b3;
}

th { font-size: 12px; white-space:nowrap; }
td { font-size: 12px; white-space:nowrap; }
tr { cursor: pointer; }
thead { font-size: 13px; }
div.dt-buttons{
	float: right !important;
}
.dataTables_processing {
    z-index: 999;
}
.spinner-border{
	z-index: 999;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody{
	border-bottom: 1px solid #dee2e6 !important;
}

.btn_table{
	padding: 0;
}

.paginate_button{
	background: none !important;
	border-radius: 10px !important;
}

.paginate_button:hover{
	color: black !important;
}

td.details-control {
	font-size: 17px;
    color: #28a745;
	text-align: center;
}
tr.shown td.details-control {
     color: #dc3545;
}

tr.shown td.details-control {
     color: #dc3545;
}

.det_group, .det_group:hover{
	background: none !important;
}

tr.details{
	border-bottom: 1px solid #dee2e6;
}

tbody tr.details:hover{
	background: none !important;
}

.no{
	color: red;
}

/*:::::::::::::::::::::::::::::::::::::::::: TABELLA di STAMPA ::::::::::::::::::::::::::::::::
-----------------------------------------------------------------------------------------------*/

.table-low-padding td, .table-low-padding th{
	padding: 0.3rem !important;
}

.table-print td, .table-print th{
	padding-top: 0.3rem !important;
	padding-bottom: 0.3rem !important;
}

.table-print tr td{
	font-size: 20px;
}

.table-print td{
	padding-left: 50px;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

.longtext{ 
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}


/*:::::::::::::::::::::::::::::::::::::::::: TABELLA STORICO ::::::::::::::::::::::::::::::::::::
-------------------------------------------------------------------------------------------------*/

.table-wrapper {
  max-height: 300px;
  overflow: auto;
  display:inline-block;
}

.table-wrapper th { position: sticky; top: 0; background:#eee; box-shadow: 0px -3px 0px 0px rgba(0,0,0,1);}

.table-wrapper tr {
   line-height: 10px;
   min-height: 10px;
   height: 10px;
}

/*:::::::::::::::::::::::::::::::::::::::::: LUCCHETTO ::::::::::::::::::::::::::::::::::::::::::
-------------------------------------------------------------------------------------------------*/
.container-padlock {
	display: flex;
	box-sizing: border-box;
	--locked-color: #0275d8;
	--unlocked-color: #d9534f;
	padding-top: 10px;
}
.lock {
	width: 24px;
	height: 21px;
	border: 3px solid var(--locked-color);
	border-radius: 5px;
	position: relative;
	cursor: pointer;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.lock:after {
	content: "";
	display: block;
	background: var(--locked-color);
	width: 3px;
	height: 7px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -3.5px 0 0 -2px;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.lock:before {
	content: "";
	display: block;
	width: 14px;
	height: 12px;
	bottom: 100%;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	border: 3px solid var(--locked-color);
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	border-bottom: 0;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
/* Locked Hover */
.lock:hover:before {
	height: 13px;
}
/* Unlocked */
.unlocked {
	transform: rotate(10deg);
}
.unlocked:before {
	bottom: 130%;
	left: 31%;
	margin-left: -11.5px;
	transform: rotate(-45deg);
}
.unlocked,
.unlocked:before {
	border-color: var(--unlocked-color);
}
.unlocked:after {
	background: var(--unlocked-color);
}
/* Unlocked Hover */
.unlocked:hover {
	transform: rotate(3deg);
}
.unlocked:hover:before {
	height: 10px;
	left: 40%;
	bottom: 124%;
	transform: rotate(-30deg);
}

/*:::::::::::::::::::::::::::::::::::::::::: FILE INPUT :::::::::::::::::::::::::::::::::::::::::
-------------------------------------------------------------------------------------------------*/
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

#img-upload2{
    width: 100%;
}

.img_container {
	position: relative;
	text-align: center;
	color: white;
}

.requires_saving_text {
	position: absolute;
	bottom: 8px;
	left: 7px;
	font-size: 20px;
	font-weight: bold;
	color: #db0000;
}

.requires_saving_bg{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}


/*:::::::::::::::::::::::::::::::::::::::::: LOADING ::::::::::::::::::::::::::::::::::::::::::::
-------------------------------------------------------------------------------------------------*/

#loading{
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 9999;
}
.loading_text{
	font-size: 20px;
	font-weight: bold;
	color: white;
}

#uploading{
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 9999;
}

.lds-grid {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-grid div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
  top: 8px;
  left: 8px;
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 8px;
  left: 32px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
  top: 8px;
  left: 56px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
  top: 32px;
  left: 8px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 32px;
  left: 32px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
  top: 32px;
  left: 56px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
  top: 56px;
  left: 8px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
  top: 56px;
  left: 32px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
  top: 56px;
  left: 56px;
  animation-delay: -1.6s;
}
@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/*:::::::::::::::::::::::::::::::::::::::::: LOADING DOTS :::::::::::::::::::::::::::::::::::::::
-------------------------------------------------------------------------------------------------*/

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}