.widgetContainer {

  width: auto;height: 412px;display: block;background-color: #2b7abb;margin: 0 auto;

}





/* Widget 4 Quarter Division here */



.topLeft {

  height: 60%; padding: 0;

  font-size: 9px;

  margin: 0;

  width: auto;

  display: inline-block;

}

/*   

.topRight {

  height: 60%;width: auto;float: right;padding: 0;

  

  margin: 0;

  

  

 

} */



.bottomLeft {

  height: 40%;width: 45%;float: left; margin: 0;padding: 40px 0 0 50px;

}



.bottomRight {

  height: 40%; width: 55%;float: right;padding: 25px 0 0 60px;

}



h1,

h2,

h3,

p {

  margin: 0;

  padding: 0;

}





/* topLeft Div CSS */



#cityWeather {

  font-weight: 900;

  font-size: 25px;

}



#dayWeather {

  font-weight: 700;

  font-size: 25px;

  margin-top: 18px;

}



#dateWeather {

  font-weight: 500;

  font-size: 20px;

  margin-top: 4px;

}



#timeWeather {

  font-weight: 400;

  font-size: 18px;

  margin-top: 8px;

}



#codepen-link {

  font-weight: 400;

  font-size: 12px;

  margin-top: 20px;

}



.topLeft > a {

  text-decoration: none;

  color: white;

}



.topLeft > a:hover {

  color: #b0bec5;

}





/* topRight Div CSS */



#weatherStatus {

  font-size: 16px;
  font-weight: 500;
  width: 100%;
  position: absolute;
  left: 10px;
  bottom: -6px;
  text-transform: capitalize;

}



.topRight > img {

  width: 50%;

  height: auto;

}





/* horizontalHalfDivider */



.horizontalHalfDivider {

  width: 100%;

  height: 3px;

  margin-top: -5px;

  background-color: #263238;

}



.verticalHalfDivider {

  width: 3px;

  position: absolute;

  height: 167px;

  background-color: #263238;

  float: right;

  display: inline-block;

  padding: 0;

}





/* bottomLeft CSS */



#temperatureWeather,

#celsiusWeather,

#tempDivider,

#fahrenheitWeather {

  display: inline;

  vertical-align: middle;

}



#temperatureWeather {

  font-size: 36px;

  font-weight: 800;

  margin-right: 0px;

  color: #253147;

}

h5#temperatureWeatherDay {

  font-size: 16px;

  color: #253147;

}
p.humidity{
  font-size: 12px;
}

/* #celsiusWeather {

  margin-right: 10px;

} */



#fahrenheitWeather {

  margin-right: 5px;

  color: #b0bec5;

}



#celsiusWeather,

#tempDivider,

#fahrenheitWeather {

  font-size: 24px;

  font-weight: 800;

}



#celsiusWeather:hover,

#fahrenheitWeather:hover {

  cursor: pointer;

}









/* bottomRight CSS */



.otherDetailsKey {

  float: left;

  font-size: 16px;

  font-weight: 300;

}



.otherDetailsValues {

  float: left;

  font-size: 16px;

  font-weight: 400;

  margin-left: 40px;

}



.weatherBox{
  position: relative;
  width: 100%;

}

.weatherHeader {

/* display: flex;

justify-content: space-between;

align-items: start; */

/* border-bottom: 1px solid #ddd; */

padding-bottom: 5px;

padding-top: 60px;

width: 100%;

}

.weatherHeader h3 {
  font-size: 16px;
  color: #000;
  margin-bottom: 5px;

}

.weatherHeader p {

  font-size: 14px;

  margin: 0px;

  color: #000;

  width: 100%;

  margin-bottom: 3px;

}

.weatherBoxWrap {

  display: flex;

  flex-flow: row-reverse;

  align-items: center;

  justify-content: space-between;

  position: relative;

  padding-bottom: 30px;

  padding-top: 0px;

}

.topRight img.weatherIcon {
  width: 50px;
  margin: 0 auto;
  background: #ffc107a6;
  border-radius: 50%;

}



/*  */





  /*  */





.ulBox {

  list-style: none;

  margin: 0px;

  padding: 2px;

  width: 232px;

  /* border: 1px solid silver; */

  height: 150px;

  overflow: auto;

  display: none;

  z-index: 30;

  position: absolute;

  background: #dceffd;

  border-radius: 1px;

}

.ulBox li:hover {

    background: gainsboro;

}



.ulBoxTo {

  list-style: none;

  margin: 0px;

  padding: 2px;

  width: 232px;

  /* border: 1px solid silver; */

  height: 150px;

  overflow: auto;

  display: none;

  z-index: 30;

  position: absolute;

  background: #dceffd;

  border-radius: 1px;

}

.ulBoxTo li:hover {

  background: gainsboro;

}

.exchangeIcon{

cursor:pointer

}

.weatherCountry {

  position: relative;

}

.searchModalLoc {

  margin-top: 10px;

  position: absolute;

  top: -7px;

  z-index: 9;

  width: 100%;


}

.searchModalLoc #search-input {

  width: 70%;

  padding: 6px 5px;

  font-size: 14px;

}

button#addLocationWeather, button#addLocationToTable {

  padding: 7px 10px;

  font-size: 12px;

  margin: 0px;

  background: #34a0fd;

  height: 35px;

  color: #fff;

}

.searchModalLoc #weatherLoactionSearchErro {

  font-size: 14px;

  margin-top: -1px;

    display: block;

    font-weight: 300 !important;

}

ul#search-results {

  width: 60%;

  background: #f5f5f5;

  border-radius: 4px;

  position: absolute;

  top: 40px;

  z-index: 99;

  max-height: 214px;

  overflow: auto;

}

ul#search-results li {

  font-size: 12px;

  border-bottom: 1px solid #ddd;

  padding: 5px;

  cursor: pointer;

}

.removeListWeather {

  position: absolute;

  right: 0;

  bottom: 8px;

  z-index: 9;

}

.removeListWeather .deleteWeatherLocation {

  color: #F44336 !important;

  padding: 2px 10px;

  font-size: 10px;

  margin: 0;

  background: #fff !important;

  border: 1px solid #F44336 !important;

  height: 22px;

}

  /*  */