.container-fluid {
  background-image: url(../img/background.svg);
  background-size: cover;
  background-repeat: no-repeat;
  /* height: 100vh; */
  padding: 20px 0;
}

.container {
  display: grid;
  grid-template-rows: auto;
  grid-row-gap: 20px;
}

i.fa {
  padding-right: 10px;
}

.btn-container {
  grid-row: 1/2;
  width: 100%;
  justify-self: center;
}

.btn-group {
  width: 100%;
}

.btn {
  border: 1px solid #DFDFDF;
}

.canvas-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto;
}

.canvas {
  width: 100%;
  height: 100%;
  background: #F8F9FA;
  border: 1px solid #DFDFDF;
  align-self: center;
  justify-self: center;
}

.data-container,
.input-container {
  width: 100%;
  justify-self: center;
}

.card-data-body {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

input[type="number"] {
  padding-right: 0;
}

.span-parameter-lg {
  grid-column: 1/3;
}

.input-desc {
  grid-row: 2/3;
  grid-column: 1/3;
  min-height: 40px;
  max-height: 140px;
  overflow: hidden;
  margin-bottom: 10px;
}

#select-normativa {
  margin-bottom: 10px;
}

.div-addr,
#normativa,
.input-falda {
  grid-column: 1/3;
}

.card-body-input,
.card-body-output {
  padding: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-row-gap: 20px;
}

.section {
  position: relative;
  border: 1px solid #DFDFDF;
  border-radius: 3px;
}

.section-title {
  position: absolute;
  top: -15px;
  left: 10px;
  background: #fff;
  padding: 0 5px 0 5px;
}

.section-rete {
  grid-column: 1/5;
}

.section-body {
  padding: 10px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 7fr 0.8fr 1fr 0.8fr;
  grid-row-gap: 10px;
}

.section-body-geotecnica {
  display: grid;
  grid-template-rows: auto auto;
  grid-row-gap: 20px;
}


.section-body-geotecnica {
  padding-top: 25px;
}

.section-terreno-spingente {
  grid-column: 1/5;
}

.section-body-terreno-spingente {
  grid-template-rows: auto;
  grid-template-columns: 7fr 0.8fr 1fr 0.8fr;
  grid-row-gap: 10px;
}

.section-terreno-fondazione {
  grid-column: 1/5;
}

.span-parameter {
  grid-column: 1/2;
  padding-left: 5px;
  padding-top: 5px;
  text-align: left;
  /* border-bottom: 1px solid #DFDFDF; */
  margin-right: 10px;
}

.span-symbol {
  text-align: right;
  padding-right: 10px;
  padding-top: 5px;
}

.span-unit {
  text-align: left;
  padding-left: 10px;
  padding-top: 5px;
}

.input-value,
.output-value {
  width: 100%;
}

.output-value-lg {
  grid-row: 1/2;
  grid-column: 2/5;
}

#descrizionerete {
  grid-column: 1/5;
  min-height: 40px;
  max-height: 140px;
  overflow: hidden;
  margin-bottom: 0 !important;
}

#btn-calculate {
  grid-column: 1/5;
}

.card-header {
  background: #F8F9FA;
}

.input-group-text,
#basic-addon2,
#has-falda,
.output-value {
  background: #F8F9FA !important;
}

#link-teoria:link,
#link-teoria:visited,
#link-teoria:hover,
#link-teoria:active {
  color: #000;
  text-decoration: none;
}

/* --------- */
/* animations */
.fadein {
  animation: fadein 2s ease-out;
}

.fadeout {
  animation: fadeout 2s ease-out;
}

.flick {
  animation: flick 2s ease-in-out;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flick {
  0% {
    border: none;
  }

  50% {
    border: 1px solid #BFDEFF;
  }

  100% {
    border: 1px solid #BFDEFF;
  }
}