.content {
  max-width: 1000px;
  margin: auto;
  background: white;
  padding: 10px;}
#title_container {

  padding: 10px;
  border: 5px solid gray;
  margin: auto;
   border-radius: 15px;
}
#title {color: red;
  text-align: center;
vertical-align: middle;
 font-style: italic;
 font-family: "Times New Roman", Times, serif;
}
#maincollegamenti {
  background-color: grey;
  color: black;
  border: 4px solid grey;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 15px;}
  #collegamenti {color: red;
 text-align: center;
vertical-align: middle;
 font-style: italic;
 font-family: "Times New Roman", Times, serif;
  background-color: white;
  color: black;
  border: 4px solid grey;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block}
#description_main {

  padding: 10px;
  border: 5px solid gray;
  margin: auto;
   border-radius: 15px;
}
#input_form {width: 200px;
  padding: 2px;
  border: 5px solid gray;
  margin: 0;
  text-align: center;
  border-radius: 15px;}

  #op {width: 200px;
  padding: 2px;
  border: 5px solid gray;
  margin: 0;
  text-align: center;
  border-radius: 15px;}

#dataframe {
 float: left;
 width: auto;
  border-collapse: collapse;
}
.viewer {
 float: left;
 clear: right;
 width: 100%;
 border: 5px solid black;
}

#help {width: 200px;
  padding: 2px;
  border: 5px solid gray;
  margin: 0;
  text-align: center;
  border-radius: 15px;}

.wt {
    border: 1px solid green;
}
.mt {
    border: 1px solid red;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

#helpex {
    display: block;
    width: 200px;
  padding: 2px;
  border: 5px solid gray;
  margin: 0;
  text-align: center;
  border-radius: 15px;
}

#qr:hover ~ #qrhelp{
    display: block;}
#inphelp {
    display: none;
    width: 200px;
  padding: 2px;
  border: 5px solid gray;
  margin: 0;
  text-align: center;
  border-radius: 15px;
}

.qrtooltip {
  position: relative;
  display: inline-block;

}
.qrtooltip .qrtooltiphelp {
  visibility: hidden;
  width: 400px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border: 3px solid gray;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.qrtooltip:hover .qrtooltiphelp {
  visibility: visible;
}

.inptooltip {
  position: relative;
  display: inline-block;

}
.inptooltip .inptooltiphelp {
  visibility: hidden;
  width: 400px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border: 3px solid gray;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 160%;
}

.inptooltip:hover .inptooltiphelp {
  visibility: visible;
}
.optooltip {
  position: relative;
  display: inline-block;

}
.optooltip .optooltiphelp {
  visibility: hidden;
  width: 400px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border: 3px solid gray;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 160%;
}

.optooltip:hover .optooltiphelp {
  visibility: visible;
}
.loadingdiv {color: black;
  text-align: center;
vertical-align: middle;
 font-style: italic;
 font-family: "Times New Roman", Times, serif;
 display:none;
}
.searchbar{
 float:left;

 }
 .examples{
 float:right;

 }
.search-container{

  padding: 10px;
  border: 5px solid gray;
  margin: auto;
   border-radius: 15px;
}
.example_file {
    width: 200px;
  padding: 2px;
  border: 5px solid gray;
  margin: 0;
  text-align: center;
  border-radius: 15px;
}

#intpopup {width: 400px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
border: 3px solid gray;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 160%;}