:root{
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UISymbol","Noto Color Emoji";
  --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

body{
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
*, :after, :before {
  box-sizing: border-box;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}

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

/* ==========================================================================
     Stile area di input e di calcolo
     ========================================================================== */
.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: .5rem 1rem
}

.navbar>.area_di_calcolo,
.navbar>.contenitore_app {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.navbar-expand>.area_di_calcolo,
.navbar-expand>.contenitore_app {
  padding-right: 0;
  padding-left: 0
}
.navbar-expand>.area_di_calcolo,
.navbar-expand>.contenitore_app {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap
}

.contenitore_app{
  padding: 0;
  width:100%;
  margin-right: auto;
  margin-left: auto;
}

.area_di_calcolo{
  padding:20px;
  /* padding-left: 15px;
  padding-right: 15px; */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.tabella {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem
}
.tabella>hr {
  margin-right: 0;
  margin-left: 0
}

.tabella>.list-group:first-child .list-group-item:first-child {
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem
}

.tabella>.list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem
}
.input#n2{
  margin-top: 20px;
}

.dati_input{
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 7fr 0fr 1.5fr .2fr;
  grid-row-gap: 20px;
  flex: 1 1 auto;
  padding: 1.25rem;
}
.gruppo_dati{
  grid-column: 1/5;
  position: relative;
  border: 1px solid #dfdfdf;
  border-radius: 3px;
}
.body_gruppo_dati_input{
  padding: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 7fr 0fr 1.5fr .6fr;
    grid-row-gap: 10px;
}

.body_gruppo_dati_input#n2{
  grid-template-columns: 1fr 0fr 1fr 0.1fr 1.5fr .2fr;
}
/* .body_gruppo_dati_input#n1_1{
  
    grid-template-columns: 1fr 1fr;
} */

.contenitore_dati {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem
}

.intestazioni {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125)
}

.intestazioni:first-child {
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}

.titoli{
  position: absolute;
    top: -15px;
    left: 10px;
    background: #fff;
    padding: 0 5px;
    font-weight: 650;
}
.descrizioni{
  grid-column: 1/2;
    padding: 5px 0 0 5px;
    text-align: left;
    margin: 0 10px 0 0;
    border-bottom: 1px solid #ced4da;
}
.frazioni{
  display: inline-block;
    vertical-align: middle;
    font-size: 90%;
    text-align: center;
    margin-right: 10px;
}
.numeratore{
  display: block;
}
.denominatore{
  padding-top: .05em;
  border-top: .1em black solid;
}

.simboli{
  grid-column: 2/3;
    padding: 5px 10px 0 0;
    text-align: right;
    align-self: center;
}
.input_dati_input{
  grid-column: 3/4;
  text-align: center!important;
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  overflow: visible;
  font-family: inherit;
  margin: 0;
  align-self: center;
}

.unità{
  grid-column: 4/5;
    padding: 5px 0 0 10px;
    text-align: center;
    align-self: center;
}

.output{
  margin-top: 20px;
}

.dati_output{
  flex: 1 1 auto;
  padding: 1.25rem;
  display: grid;
  grid-template-rows: auto;
  grid-row-gap: 20px;
}

.body_gruppo_dati_output{
  padding: 10px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 10px;
  margin-top: 10px;
}

.body_gruppo_dati_output#n5,.body_gruppo_dati_output#n4{
  grid-template-columns: 1fr;

} 
.contenitore_grafico#grafico{
  grid-template-columns: 1fr ;
  grid-row:1;
  width: 100%;
  max-width: 800px;
}
.button{
  grid-column:1/4;
  width:100%;
  /* grid-column-end: 2; */
  margin: 0;
  height:auto;
  width: 100%;
  font-weight: 600;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  text-transform: none;
  overflow: visible;
  font-family: inherit;
}
.button#calcola{
  grid-column:1/5;

}
.retini{
  justify-self: center;
  margin-right: 10px;
}

#ntc2018{
  grid-column: 3/4;
  align-self: center;
}
#ec8{
  grid-column: 1/2;
}
#descrizione_2{
  grid-column: 1/4;
}
#label_vs{
  margin-top:5%
}
#tipologia{
  grid-column: 3/5;
}
#terreni1,#terreni2{
  grid-column: 3/3;
}
#simbolo_4,#simbolo_5,#simbolo_6{
  grid-column: 4/4;
}

#input_5,#input_4,#input_6{
  grid-column: 5/5;
}
#unità_di_misura_5,#unità_di_misura_4,#unità_di_misura_6{
  grid-column: 6/6;
}
#label_tipologia{
  grid-column: 1/3;
}
.immagini{
  overflow: auto;
}
#retino_1{
  grid-column: 2;
}
.risultato_calcolo{
  grid-column:3/4;
  /* grid-column-end: 5; */
  opacity: 1;
  background: #f7f7f7!important;
  text-align: center!important;
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  overflow: visible;
  font-family: inherit;
  margin: 0;
  align-self: center;
}

.nascosto {
  display: none !important
}
.risultato_calcolo#risultato_11{
  grid-column: 1/5;
}
/* .button#calcola_na,#calcola_c_a,#calcola_np,#calcola_cp,#calcola_termine_a,#calcola_termine_b,#calcola_termine_c,#calcola_fs{
  grid-column: 1;
} */
/* ==========================================================================
     Contenuto personalizzato: barra di navigazione in alto
     ========================================================================== */
.fa-file,
.fa-folder,
.fa-save,
.fa-file-word,
.fa-calculator,
.fa-question-circle {
  margin-right: 5px;
}

#btn-geoapp,
#btn-new,
#btn-open,
#btn-save,
#btn-print {
  margin-right: 5px;
}

#btn-new,
#btn-open,
#btn-save,
#btn-print,
#btn-help,
#btn-calculate {
  font-weight: 600;
}
.navbar-toggler {
  padding: .5rem 1rem;
  /* font-size: 1.25rem; */
  /* line-height: 1.5; */
  /* border-radius: .3rem */
}
.hidden {
  display: none !important;
}

/* ==========================================================================
     effetti speciali
     ========================================================================== */
.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 */
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

.invisible {
  visibility: hidden;
}
.clearfix:before,
.clearfix:after {
  content: ' ';
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}
/* ==========================================================================
     Modalità responsive per dispositivi mobili
     ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media screen and (max-width: 370px) {

.frazioni{
  font-size: 0.8em;
}

}     
@media screen and (max-width: 576px) {
  .area_di_calcolo {
    padding: 0;
  }

  .dati_input {
    padding: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 10px;
  }
  .body_gruppo_dati_input {
    grid-template-columns: 2fr 0fr 1.5fr 0fr;
  }
  .body_gruppo_dati_output#n1,.body_gruppo_dati_output#n2{
    grid-template-columns: 2fr 0fr 1.5fr 0fr;
  }
  .titoli{
    top:-10px;
    padding:0;
  }
  /* .button#calcola{
    padding:0;
    font-size: 0.8em;
  } */

}

@media screen and (max-width: 768px) {
  .area_di_calcolo {
    font-size: 0.8em;
    /* max-width: 720px; */
  }
  .button>#calcola {
    font-size: 0.8em;
    
  }
  .input_dati_input,
  .risultato_calcolo {
    font-size: 1em;
  }
}
.coeff_parz{
  font-size: 1em;
}
.body_gruppo_dati_input{
  grid-template-columns: 2fr 0fr 1.5fr .2fr;
}
.body_gruppo_dati_output#n3,.body_gruppo_dati_output#n4{
  grid-template-columns: 2fr 0fr 1.5fr 0.2fr;
}
/* @media (min-width:768px) {
  .area_di_calcolo {
    max-width: 720px
  }
} */

@media screen and (max-width: 992px) {
  #btn-geoapp,
  #btn-navbar {
    margin-bottom: 5px;
  }

  #btn-open,
  #btn-save,
  #btn-print,
  #btn-help {
    margin-top: 5px;
    margin-right: 0;
  }
}
/* @media (min-width:992px) {
  .area_di_calcolo {
    max-width: 960px
  }
} */

/* @media (min-width:1200px) {
  .area_di_calcolo {
    max-width: 1140px
  }
} */

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }
  
@media (max-width:575.98px) {
  .navbar-expand-sm>.area_di_calcolo,
  .navbar-expand-sm>.contenitore_app {
    padding-right: 0;
    padding-left: 0
  }
}

@media (min-width:576px) {
  .navbar-expand-sm>.area_di_calcolo,
  .navbar-expand-sm>.contenitore_app {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
  }
}

@media (min-width:768px) {
  .navbar-expand-md>.area_di_calcolo,
  .navbar-expand-md>.contenitore_app {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
  }
}

@media (max-width:991.98px) {

  .navbar-expand-lg>.area_di_calcolo,
  .navbar-expand-lg>.contenitore_app {
    padding-right: 0;
    padding-left: 0
  }
}

@media (min-width:992px) {
  .navbar-expand-lg>.area_di_calcolo,
  .navbar-expand-lg>.contenitore_app {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
  }
}

@media (max-width:1199.98px) {

  .navbar-expand-xl>.area_di_calcolo,
  .navbar-expand-xl>.contenitore_app {
    padding-right: 0;
    padding-left: 0
  }
}
@media (min-width:1200px) {
  .navbar-expand-xl>.area_di_calcolo,
  .navbar-expand-xl>.contenitore_app {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
  }
}

@media (max-width:767.98px) {

  .navbar-expand-md>.area_di_calcolo,
  .navbar-expand-md>.contenitore_app {
    padding-right: 0;
    padding-left: 0
  }
}



  /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */

     @media print {

      *,
      *:before,
      *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }
  
      a,
      a:visited {
        text-decoration: underline;
      }
  
      a[href]:after {
        content: ' ('attr(href) ')';
      }
  
      abbr[title]:after {
        content: ' ('attr(title) ')';
      }
  
      /*
         * Don't show links that are fragment identifiers,
         * or use the `javascript:` pseudo protocol
         */
  
      a[href^='#']:after,
      a[href^='javascript:']:after {
        content: '';
      }
  
      pre {
        white-space: pre-wrap !important;
      }
  
      pre,
      blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
      }
  
      /*
         * Printing Tables:
         * http://css-discuss.incutio.com/wiki/Printing_Tables
         */
  
      thead {
        display: table-header-group;
      }
  
      tr,
      img {
        page-break-inside: avoid;
      }
  
      p,
      h2,
      h3 {
        orphans: 3;
        widows: 3;
      }
  
      h2,
      h3 {
        page-break-after: avoid;
      }

      .area_di_calcolo {
        min-width: 992px !important
      }
    
    }