#Inputcol {
  margin: 5px
}

#card-body1 {
  background: rgba(0, 0, 0, 0.15) no-repeat center;
  background: url("../img/city/Mantova.jpg");
  background-size: cover;
  height: 550px;
  font-style: italic;
  margin-bottom: 70px;
}

#list-inline {
  justify-content: center;
}

.col-xs-4 {
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
}

#main {
  text-align: center;
  margin-top: 70px;
}

#main h2 {
  font-size: xx-large;
  margin-bottom: 0
}

#city {
  padding-top: 150px;
  margin-bottom: -5px;
  color: #fff
}

#myicon {
  width: auto;
  height: 65px;
  border: none;
  margin-bottom: 10px;
  margin-left: -15px;
  margin-right: 4px;
}

#mytemp {
  font-size: 2em;
  font-style: italic;
  margin-left: 0;
}

#date1,
#date2,
#date3,
#date4,
#date5 {
  font-style: italic;
  margin-top: 60px;
  margin-bottom: 5px;
  font-weight: bold;
}

#icon1,
#icon2,
#icon3,
#icon4,
#icon5 {
  margin-bottom: -2px;
  margin-left: 3px;
}

#temp1,
#temp1a,
#temp2,
#temp2a,
#temp3,
#temp3a,
#temp4,
#temp4a,
#temp5,
#temp5a {
  font-size: 1, 5em;
  font-style: italic;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 0;
  margin-left: 5px;
  font-size: large;
}

#description1,
#description2,
#description3,
#description4,
#description5 {
  font-size: 1, 5em;
  font-style: italic;
  font-weight: 600;
  margin-top: -20px;
}

#humidity {
  font-size: 15px;
  margin-left: 0;
  font-style: italic
}

#pression {
  font-size: 15px;
  margin-left: 5px;
  font-style: italic
}

#desc {
  font-size: 16px;
  margin-left: 0;
  margin-right: 15px;
  margin-left: -15px;
  text-transform: capitalize;
  font-style: italic
}

hr.style1 {
  position: relative;
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255), rgba(255, 255, 255, 0));
  width: 40%;
  margin: auto;
  margin-top: -15px;
  margin-bottom: 10px;
}

.lang-mytemp,
.lang-myhum,
.lang-mypres,
.lang-mywind {
  font-weight: bold;
  cursor: pointer;
}

#wrapper {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: scroll;
  margin: 0;
  padding: 0;
}

.myspan {
  text-align: center;
}

.col-md-6 {
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 10px;
  font-style: italic
}

#card1 {
  padding-left: 0;
}

#card6 {
  padding-right: 0;
}

#spanclock {
  position: absolute;
  margin-top: -10px;
  margin-left: -5px;
}

#mychart {
  margin-bottom: 70px;
}

@media only screen and (min-width: 640px) and (max-width: 991px) {

  #card-body1 {
    background-size: 100% auto;
    /* si adatta alla larghezza */
    background-repeat: no-repeat;
    background-position: center;
    height: 550px;
    margin-top: -150px;
    margin-bottom: -50px;
  }

  #main {
    padding-top: 0;
    margin-top: 100px;
  }

  #weatherIcon {
    width: auto;
    height: 60px;
    border: none;
    margin-left: -10px;
    margin-top: -26px;
  }

  #city {
    margin-top: -10px;
  }

  #list-inline {
    visibility: hidden;
  }

  #mychart {
    margin-bottom: 50px;
  }

}

@media only screen and (max-width: 640px) {

  #card-body1 {
    height: 300px;
    margin-bottom: 50px;
  }

  #main {
    text-align: center;
    height: 100%;
    overflow-y: hidden;
    padding-top: 0;
    margin-top: 50px;
  }

  #main h3 {
    font-size: large;
    margin-bottom: 0
  }

  #weatherIcon {
    width: auto;
    height: 40px;
    border: none;
    margin-left: -10px;
    margin-top: -20px;
  }

  #city {
    padding-top: 0;
    margin-top: 70px;
  }

  #mytemp {
    display: inline;
    cursor: pointer;
    font-size: 1.5em;
    margin-left: 3px;
    font-style: italic;
  }

  #humidity {
    font-size: 13px;
    margin-left: 0;
    font-style: italic
  }

  #spanclock {
    font-size: 13px;
  }

  #pression {
    font-size: 13px;
    margin-left: 5px;
    font-style: italic
  }

  #desc {
    font-size: 14px;
    margin-right: 5px;
    text-transform: capitalize;
    font-style: italic
  }

  hr.style1 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255), rgba(255, 255, 255, 0));
    width: 80%;
    margin: auto;
  }

  #list-inline,
  .col-xs-4 {
    visibility: hidden;
    width: 0;
    height: 0;
  }

  .myblock {
    margin: 0;
    padding: 0;
    margin-left: 3px;
    margin-bottom: 3px;
  }

  .col-md-6 {
    width: 50%;
    padding: 0;
  }

  #mychart {
    margin-bottom: 50px;
  }

  #card2,
  #card4 {
    padding-left: 5px;
    padding-bottom: 5px;
  }

  #card3 {
    padding-bottom: 5px;
  }

  #card1 {
    padding-right: 0;
    padding-bottom: 5px;
  }

  #card6 {
    padding-left: 5px;
  }
}

.select {
  border: none;
  font-weight: bold;
  padding: 0px 0px 4px 0px;
  border: 0;
  outline: 0;
  background-color: transparent;
  border-radius: 0;
}

.option {
  border: none;
  font-weight: bold;
  background: transparent;
  padding: 5px;
  border-radius: 0;
}

body.dark-mode .card {
  background-color: #2a2a2a !important;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .lang-myhum,
body.dark-mode .lang-mypres,
body.dark-mode .lang-mywind {
  color: #f1f1f1 !important
}