/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
   * A better looking default horizontal rule
   */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
   * Remove default fieldset styles.
   */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
   * Allow only vertical resizing of textareas.
*/

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
     Browser Upgrade Prompt
     ========================================================================== */

     .browserupgrade {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }
    
/* ==========================================================================
     Author's custom styles
     ========================================================================== */

.container-fluid {
  padding: 0;

}

.container {
  padding: 20px;
}

#map {
    height:50%;
    position: relative;
    cursor: crosshair;
    Width:auto;
    overflow: hidden;
}
#map >iframe{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#DIVLATLNG{
  width: 100%;
  text-align: center;
  grid-row-gap: 10px;
  
  /* font-size:1vw; */
}
/* .cercazona{
  width:100%;
  box-sizing: border-box;
  border: 1px solid #DFDFDF;
  border-radius: 3px;
  padding:10px;
} */

.tabella_cercazona{
  font-family: Tahoma;
  /* font-size: 1vw; */
  font-style: normal;
  font-weight: normal;
  display: grid;
  grid-template-columns: 0.1fr auto 0.1fr auto;
  box-sizing: border-box;
  border: 1px solid #DFDFDF;
  padding:10px;
  border-radius: 3px;
  width:100%;
  grid-row-gap: 10px;
  /* grid-template-rows: auto auto auto; */
}
.tipo_di_sito{
  font-family: Tahoma;
  /* font-size: 1vw; */
  font-style: normal;
  font-weight: normal;
  display: grid;
  grid-template-columns:0.05fr auto;
  box-sizing: border-box;
  border: 1px solid #DFDFDF;
  padding:10px;
  border-radius: 3px;
  width:100%;
  grid-row-gap: 10px;
}
.distanza{
  font-family: Tahoma;
  /* font-size: 1vw; */
  font-style: normal;
  font-weight: normal;
  display: grid;
  grid-template-columns:0.01fr auto;
  box-sizing: border-box;
  border: 1px solid #DFDFDF;
  padding:10px;
  border-radius: 3px;
  width:100%;
  grid-row-gap: 10px;

}
.tabella_punti{
  font-family: Tahoma;
  /* font-size: 1vw; */
  font-style: normal;
  font-weight: normal;
  display: grid;
  grid-template-columns:0.05fr 1fr 1fr 1fr 1fr 1fr;
  box-sizing: border-box;
  border: 1px solid #DFDFDF;
  padding:10px;
  border-radius: 3px;
  width:100%;
  grid-row-gap: 10px;

}

.titoli{
  position: relative;
  top: 7px;
  left: 10px;
  background: #fff;
  padding: 0 5px 0 5px;
  font-weight: 650;
  width:fit-content;
}
.risultati{
  font-weight: 650;
  /* font-size:1.2vw; */
  width:100%;
  

}
.descrizioni{
  width:100%;
  /* font-size: 1.2vw; */
}

.refresh{
  padding-top: 9px;
  padding-left: 7px;
}
#btn-calculate.btn-primary{
  width:100%;
  /* text-align:center; */
  /* margin:0; */
  /* vertical-align: center; */
  grid-column-start: 1;
  grid-column-end:5;
  font-weight: 600;
  height:100%;

  margin-left: auto;
}

#sorgente.descrizioni{
  grid-column-start: 2;
  /* padding: 5px 0 0 5px; */
}
#p1.descrizioni{
  grid-column-start: 3;
  grid-column-end: 5;
  text-align: center;
  align-self: self-end;
}
#p2.descrizioni{
  grid-column-start:5;
  grid-column-end: 7;
  text-align: center;
  align-self: self-end;
}
#distanza.risultati{
  grid-column-start:2;
  text-align: center;
}
#magnitudo.risultati{
  grid-column-start:3;
  text-align: center;
}
#acc_suolo.risultati{
  grid-column-start:4;
  text-align: center;
}
#latp1.descrizioni{
  grid-column-start:3;
  text-align: center;
}
#lonp1.descrizioni{
  grid-column-start:4;
  text-align: center;
}
#latp2.descrizioni{
  grid-column-start:5;
  text-align: center;
}
#lonp2.descrizioni{
  grid-column-start:6;
  text-align: center;
}
#Radio1{
  grid-column-start:1;
}

#ButtonCalcola.btn-primary{
  grid-column-start:1;
  grid-column-end:7;
  font-weight: 600;
  height:100%;
  margin-left: auto;
  width:100%;
}
input[type=radio]{
  align-self:center;
  
}
/* #RadioS0[type=radio]:checked{
  align-self:center;
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
  background: no-repeat 50%/50% 50%;
}
#RadioS1{
  align-self:center;
} */
input[type=checkbox]{
  align-self:center;

}

#TextD1.input.form-control{
  grid-column-start:2;
}
#refresh1.refresh{
  grid-column-start:1;
}
#refresh2.refresh{
  grid-column-start:1;
}
#refresh3.refresh{
  grid-column-start:1;
}



/* ==========================================================================
     Helper classes
     ========================================================================== */

/*
   * Hide visually and from screen readers
   */

.hidden {
  display: none !important;
}

/*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
  
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  /* 1 */
}
/*
  * Extends the .visuallyhidden class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */
  .visuallyhidden.focusable:active,
  .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
  }
  /*
  * Hide visually and from screen readers, but maintain layout
  */
  .invisible {
    visibility: hidden;
  }
/*
  * Clearfix: contain floats
  *
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the
  *    `contenteditable` attribute is included anywhere else in the document.
  *    Otherwise it causes space to appear at the top and bottom of elements
  *    that receive the `clearfix` class.
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */

  .clearfix:before,
  .clearfix:after {
    content: ' ';
    /* 1 */
    display: table;
    /* 2 */
  }
  
  .clearfix:after {
    clear: both;
  }
/* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media screen and (max-width: 575px) {
  .container {
    padding: 0;
  }
  .form-control{
    padding: 0.1rem 0.1rem;
  }
  .descrizioni {
    padding: 0;
    font-size: 1em;
    align-self: center;
  }
  .risultati {
    padding: 0;
    font-size: 1em;
  }
  .tabella_cercazona {
    padding: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 0fr 1fr 0fr 0.4fr;
    grid-row-gap: 10px;
  }
  .tipo_di_sito {
    padding: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 0fr 1fr;
    grid-row-gap: 10px;
  } 
  .distanza {
    padding: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 0fr 1fr;
    grid-row-gap: 10px;
  }
  .tabella_punti {
    padding: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 0fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
    grid-row-gap: 10px;
  }
  #magnitudo.risultati {
    grid-column-start: 3;
    grid-column-end: 5;
    text-align: center;
}
#acc_suolo.risultati {
  grid-column-start: 5;
  grid-column-end:7;
  text-align: center;
}
.tabella_punti>#TextMw1.form-control{
  font-size: 1em;
  grid-column-start: 3;
  grid-column-end: 5;
}
.tabella_punti>#TextMw2.form-control{
  font-size: 1em;
  grid-column-start: 3;
  grid-column-end: 5;
}
.tabella_punti>#TextMw3.form-control{
  font-size: 1em;
  grid-column-start: 3;
  grid-column-end: 5;
}
.tabella_punti>#TextAcc1.form-control{
  font-size: 1em;
  grid-column-start: 5;
  grid-column-end: 7;
}
.tabella_punti>#TextAcc2.form-control{
  font-size: 1em;
  grid-column-start: 5;
  grid-column-end: 7;
}
.tabella_punti>#TextAcc3.form-control{
  font-size: 1em;
  grid-column-start: 5;
  grid-column-end: 7;
}

}

@media screen and (max-width: 768px) {
  .container {
    font-size: 1em;
  }
  #btn-calculate,#ButtonCalcola{
    font-size: 1em;
  }
  .tabella_cercazona>.form-control{
    font-size: 1em;
  }
  .tabella_punti>.form-control{
    font-size: 1em;
    
  }

}
  
  .accordion {
    font-size: 0.8em;
  }
  .accordion button {
    font-size: 0.8em;
  }


@media screen and (max-width: 345px) {
  .risultati,
  .titoli,
  .descrizioni{
  font-size: 0.7em;
  }
}

@media screen and (max-width: 1200px) {
  .titoli {
    width:13%;
  }
  #magnitudo.risultati {
    grid-column-start: 3;
    grid-column-end: 5;
    text-align: center;
}
#acc_suolo.risultati {
  grid-column-start: 5;
  grid-column-end:7;
  text-align: center;
}
.tabella_punti>#TextMw1.form-control{
  font-size: 1em;
  grid-column-start: 3;
  grid-column-end: 5;
}
.tabella_punti>#TextMw2.form-control{
  font-size: 1em;
  grid-column-start: 3;
  grid-column-end: 5;
}
.tabella_punti>#TextMw3.form-control{
  font-size: 1em;
  grid-column-start: 3;
  grid-column-end: 5;
}
.tabella_punti>#TextAcc1.form-control{
  font-size: 1em;
  grid-column-start: 5;
  grid-column-end: 7;
}
.tabella_punti>#TextAcc2.form-control{
  font-size: 1em;
  grid-column-start: 5;
  grid-column-end: 7;
}
.tabella_punti>#TextAcc3.form-control{
  font-size: 1em;
  grid-column-start: 5;
  grid-column-end: 7;
}
.titoli{
  width:fit-content;
}