body {
	background-image: url("Avezano-sfondo-nero-scuro-pietra-di-carbonio-grotta-marmo-superficie-Texture-modello-decorazioni-per-feste-sfondo.jpg_640x640.jpg");
	min-width:auto; 
font-family: "Google Sans",Roboto,Arial,sans-serif;
font-size:50px;
	
}

.marquee {
marquee-speed: slow;
}
#utente {
color:white;
}

#tabellaaaa td 
{
    text-align:center;
}

.disponibile {
background-color: green;
}
.acconto {
background-color: yellow;
}
.riservato {
background-color: gray;
}
.nondisponibile {
background-color: red;
}
.nonpagato {
background-color: red;
}

#logo {
position:relative;
margin-right:150px;
z-index:3;
}
#logo1 {
position:relative;

}


#trasparente {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

#data {
    background-color: transparent;
    background-repeat: no-repeat;
    border: solid;
    cursor: pointer;
    overflow: hidden;
    outline: none;
	color:white;
	
	}
	

#data:hover {
    background-color: #4CAF50;
    color: white;
}
a {
	float:left;
 }

a:link {
	text-decoration: none;
	color: black;;
}
a:visited {
	text-decoration: none;
	color: black;
}
a:hover {
	text-decoration: none; 
	color: #0000fd;
}

#menu {

	border : 1px solid;
	box-shadow: 10px 10px;
	padding : 20px; 
    border-radius :  10px 10px 10px 10px; 
	font-size: 24px;	
	background-color: #733B3C; 
	min-height:530px;
	margin: 20px;
	
min-width:830px;



}






#cerchiamo {
	top: 5px;

}
#content {
	background-color : #9B9B9B;

}

#bottone_cerca {
	display:none;
	
}

#visualizza {
	border : 1px solid;
	box-shadow: 10px 10px;
    padding : 20px; 
    border-radius :  10px 10px 10px 10px; 
	background-color: #733B3C; 
	min-height:900px;
	min-width:830px;
	margin-left: 20px;
    margin-right: 20px;
	font-size:15px;
	margin-bottom:40px;

	}
	

#visualizzaa {
	border : 1px solid;
	box-shadow: 10px 10px;
    padding : 20px; 
    border-radius :  10px 10px 10px 10px; 
	background-color: white; 
	max-height:500px;
	margin-left: 15px;
    margin-right: 15px;
	
	font-size:15px;
	margin-bottom:40px;

	} 
	#visualizzaaaa {
	border : 1px solid;
	box-shadow: 10px 10px;
    padding : 20px; 
    border-radius :  10px 10px 10px 10px; 
	background-color: white; 
	max-height:auto;
	margin-left: 15px;
    margin-right: 15px;
	
	font-size:15px;
	margin-bottom:40px;

	} 
	#visualizzaaa {
	border : 1px solid;
	box-shadow: 10px 10px;
    padding : 20px; 
    border-radius :  10px 10px 10px 10px; 
	background-color: white; 
	min-height:200px;
	margin-left: 15px;
    margin-right: 15px;
	max-width: auto;
	font-size:15px;
	margin-bottom:40px;

	} 

#lente {
	background-color : #733B3C;
	position :absolute;
	width: 15px; height: 15px;
	top: -20px;
	text-align: left;
	font-size:32px;
	left : 1505px;
}

#rubrica{
	position: relative;
    top: 20px;
    color: black;
    font-size: 45px;

}

#note {

	max-width:800px;
	font-size: 15px;
	
}

#foot {
	font-size: 14px;
	text-align: center;
	background-color: #e4e4e4;
	margin: 10px;
}

#content {
	background-color :#9B9B9B;
}

#successivo {
	border : 1px solid black;
	box-shadow: 3px 3px #333333;
	border-radius :  5px 5px 5px 5px; 
	float:right;
}



.button-27 {
  appearance: none;
  background-color: #000000;
  border: 2px solid #1A1A1A;
  border-radius: 15px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform;
}
#password {
  background-color: white;
  width: 300px;
  border: 1px solid black;
  padding: 50px;
  margin: 25px;
  border-radius:35px;
}

.button-27:disabled {
  pointer-events: none;
}

.button-27:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.button-27:active {
  box-shadow: none;
  transform: translateY(0);
}
.button-17 {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border-radius: 24px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
  box-sizing: border-box;
  color: #3c4043;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-family: "Google Sans",Roboto,Arial,sans-serif;
  font-size: 18px;
  font-weight: 500;
  height: 48px;
  justify-content: center;
  letter-spacing: .25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
  will-change: transform,opacity;
  z-index: 0;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


.button-17:hover {
  background: #F6F9FE;
  color: #174ea6;
}

.button-17:active {
  box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
  outline: none;
}

.button-17:focus {
  outline: none;
  border: 2px solid #4285f4;
}

.button-17:not(:disabled) {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.button-17:not(:disabled):hover {
  box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
}

.button-17:not(:disabled):focus {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.button-17:not(:disabled):active {
  box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
}

.button-17:disabled {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}






/* CSS */
.button-11 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
  padding: 6px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  border-radius: 6px;
  color: #3D3D3D;
  background: #fff;
  border: none;
  box-shadow: 3px 3px 3px rgba(1, 1, 1, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-11:focus {
  box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
  outline: 0;
}

#stampa {
border : 1px solid black;
	box-shadow: 3px 3px #333333;
	border-radius :  5px 5px 5px 5px; 
	
}

#nuovo_contatto {
	display:table;
	position: absolute;
    margin-left: 60;
    margin-top: -590px;
	width:inherit;
    max-width:inherit;
    height:inherit;
}


#bottone_aggiungi {
	border : 1px solid black;
	box-shadow: 3px 3px #333333;
	border-radius :  10px 10px 10px 10px;
	background-size : 20px;
	background-position: center;
	position :absolute;
	top: 145px;
	margin-left :300px;
	
}

#btn_cancella {
	border-radius :  10px 10px 10px 10px;
	background-image: url('x.png');
	background-size : 30px;
	transition-duration: 2s;
	background-position: center;
	background-repeat:no-repeat;
	width: 23px; height: 23px;
	border-width: 1px;
}
#btn_cancella1 {
position : relative;
	border-radius :  100px;
	background-image: url('x.png');
	background-size : 40px;
	transition-duration: 2s;
	background-position: center;
	background-repeat:no-repeat;
	width: 30px; height: 30px;
	border-width: 1px;
	
	top : -40px;
	
	
	z-index: 5;
}

#btn_modifica {
	border-radius :  10px 10px 10px 10px;
	background-image: url('https://banner2.cleanpng.com/20180417/eeq/kisspng-computer-icons-editing-icon-design-random-icons-5ad5ac7df28c06.7497951515239527659935.jpg');
	background-size : 15px;
	transition-duration: 2s;
	background-position: center;
	background-repeat:no-repeat;
	width: 23px; height: 23px;
	border-width: 1px;
}

#btn_dettagli {
	border-radius :  10px 10px 10px 10px;
	background-image: url('https://www.kindpng.com/picc/m/280-2801550_done-cccccc-order-details-icon-details-hd-png.png');
	background-size : 15px;
	transition-duration: 2s;
	background-position: center;
	background-repeat:no-repeat;
	width: 23px; height: 23px;
	border-width: 1px;
}
#cerca { 
	border: 1px solid black;
    box-shadow: 3px 3px #333333;
    border-radius: 8px 8px 8px 8px;
   
    height: 40px;
	width : 450px;
    top : 50px;
    margin: auto;
    text-align: center;
    font-size: 20px;
    color: #778899;
 

}
#tes {
	top:150;
	border-radius :  10px 10px 10px 10px;
    padding-right: 50px;
	padding-left: 50px;
    max-width: auto;
    height:400px;
    
    
 
}
div#tes.modal.fade.in {
padding-left:17px;
}


#model-content {
	position : relative;
	max-width: 800px;
	background-color : #9b9b9b;
	max-height:600px;
}

#tabella_aggiungi {
	position:absolute;
	margin-top: 550px;


}
#tabella_modifica {
	min-width:auto;

}
#indietroo {

	background-size : 15px;
	transition-duration: 2s;
	background-position: center;
	background-repeat:no-repeat;
	width: 23px; height: 23px;



}

#comunicazione {
	text-align:center;
	padding-top :30px;
	padding-bottom:30px;
}

#bordo {
	background-color: white; 
	border : 1px solid;
	box-shadow: 5px 5px;
	
	min-width : 475px;
	border-radius :  10px 10px 10px 10px; 
	margin-left:50px;
	padding-left:10px;
	padding-right:10px;
	margin-right:50px;
}

#modal-body {

	max-width: auto;
    min-width: auto;
    border-radius: 5px 5px 5px 5px;
    bottom: auto;
	}



#chiudi	{
background-color:red;
height:20px;
width:20px;
border : 1px solid;
border-radius :  10px 10px 10px 10px; 
font-size:20px;
max-width: auto;
min-width: auto;
background-position: center;
z-index:10;

}
 

#modal-content {
max-height:700px;
max-width:700px;
}

.campo {
width:400px;
white-space: nowrap;
overflow: hidden;
text-overflow:Ellipsis;

}

#scorrimento {
max-width:180;
}


#suca {
height:300px;
width:1500px;
float :center;
 
 }

#sucas {
bottom:-25px;
height:300px;
width:1500px;
float :center;
 
 }

 #poltrona {
 cursor: pointer;
 clip: rect(5px, 5px, 5px, 5px);
}


#suca td {
 
 height:70px;
 width:65px;
 border-radius:35px;
 }
 #sucas td {
 
 height:70px;
 width:65px;
 border-radius:35px;
 }

#sucaaa td {
 
 height:70px;
 width:65px;
 border-radius:35px;
 }
 
#legenda {
 font-family: "Google Sans"; 
 color:black;
 }
 * {
  box-sizing: border-box;
}


position:relative;
}
#gestione1 {
position:relative;
margin-top: 10px;
padding-right:50px;
}


input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  max-width:1050px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
#sucaa td {
 
 height:70px;
 width:65px;
 border-radius:35px;
 }

#gestione1 {
position:relative;
margin-top: 10px;
padding-right:-50px;
}
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
   body {
   font-size:25vw;
   }
}
#gestione {
float:center;
top:450px;
position:absolute;
min-width:500px;
font-size:40px;
display:inline;


}

#sucas {
transform:scale(1);
padding-left:-150px;
max-height:50px;
max-width:2550px;

}


@media screen and (max-width: 1050px){
#gestione {
float:center;
top:450px;
position:absolute;
min-width:500px;
font-size:40px;
display:inline;

}
#gestione1 {
position:relative;
margin-top: 10px;
padding-right:-50px;
}

#suca {
transform:scale(1);
padding-left:-150px;
max-height:200px;
max-width:2550px;

#sucas {
transform:scale(1);
padding-left:-150px;
max-height:100px;
max-width:2550px;

}
#sucaaa {
transform:scale(1);
padding-left:-150px;
max-height:200px;
max-width:2550px;

}

#menu {
max-height:500px;
max-width:860px;
margin-left: 10px;

}

#logo {
top:-50px;

position:relative;

}

#visualizza {
max-height:auto;
min-width:880px;
margin-right: 10px;
}

#visualizzaaaa {
display: block;
transform:scale(1);
position:relative;
min-height:350px;
min-width:830px;
margin-left:-10px;
#visualizzaaa {
display: block;
transform:scale(1);
position:relative;
min-height:350px;
min-width:830px;
margin-left:-10px;
max-width:auto;
}
#visualizzaa{
overflow: hidden;
position:relative;
max-height:300px;
min-width:830px;
margin-left:-10px;

}

#cerca {
position:absolute;
top:-380px;


}
#tasti {
z-index:5;
position:relative;
top:-150px;
}
#logo1 {
z-index:-1;
position:relative;
left:75px;


}
#gestione1 {
position:relative;
margin-top: 10px;
padding-right:-50px;
}



.clickable {
     cursor:pointer;
  }
  #chiudi {
  display: none;}

#successivo {
  display: none;
  
  }
#poltrone {
transform: scale(2);
}

#btn_prenota {

float:right;
margin-right:-10px;
margin-top:20px;

}

#nome {

min-width:330px;
}
#tabella td {
 
 width:450px;
 
 }
 
 #tabella {
 transform:scale(1.2);

 }

}