html {
	height: 100%;
}

body {
	height: 100%;
}

.all-container {
	height: 100%;
}

.login-container {
	height: 80%;
	display: flex;
	align-items: center;
}

.login-form {
	margin: auto;
}

.fields-row {
	display: flex;
}

body .field-container .field-label {
	font-size: small;
	padding-bottom: 0.3em;
}
body .field-container .field-label.required {
	color: var(--primary-color);
}

body .field-container .field-message {
	font-size: small;
	padding-top: 0.3em;
}
body .field-container .field-message .error {
	color: red;
}

body #page .flex-columns {
	display: flex;
	flex-direction: column;
	padding-left: 20%;
	padding-right: 20%;
}

.absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
  	transform: translate(-50%, -50%);
}

.drop-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 15rem;
	text-align: center;
	line-height: 1.5rem;
}

.drop-area .icon {
	font-size: 3rem;
	margin:2rem;
}

.summary-card .ui-card-content{
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 15rem;
	text-align: center;
	line-height: 1.5rem;
	font-weight: bold;	
	
}

.summary-card .table {
	margin: 1.5rem 0;
	text-align: left;
	font-weight: bold;
}

.summary-card .table td {
	padding: 1.5rem;
}

.summary-card .table td .cell {
	text-align: center;
}

.summary-card .table .row1 {
	background-color:var(--primary-color);
}

.summary-card .table .row2 {
	background-color:var(--primary-color);
}

  .gauge-container {
    width: 10rem;
    height: 10rem;
    display: block;
    overflow: hidden;
  }
  .gauge > .dial {
	stroke: var(--primary-color);
    stroke-width: 10;
    opacity: 50%;
  }
  
  .gauge > .value {
    stroke: var(--primary-color);
    stroke-dasharray: none;
    stroke-width: 10;
  }
  
  .gauge > .value-text {
    fill: rgb(47, 227, 255);
    font-family: sans, 'sans-serif';
    font-weight: bold;
    font-size: 0.6em;
  }

#page {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: scroll;
	padding: 1em;
	display: flex;
	flex-direction: column;
}

.mycard {
	padding: 0.5em;
}

#Campi .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
#Campi .ui-panel {
  margin: 0.5em; }
#Campi .ui-panel-content {
  display: flex;
  flex-wrap: wrap;
  width: min-content; }
#Campi .fields-panel-row {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  flex-basis: 100%;
  justify-content: center; }
#Campi .fields-row {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  flex-basis: 100%;
  justify-content: center; }
#Campi .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1em; }