h1, h2, h3, h4{
  font-family: 'Calibri', sans-serif !important;
  text-align: center !important;
  font-color: #202936;
}
text, p,ul, ol{
  font-family: 'Lato', sans-serif !important;
  font-color: #202936;
}
p, ul, ol{
  text-align: justify;
  font-size: x-large;

}
.social{
  text-align: center;
  font-size: x-large;
}
.social i{
  margin: 1%;
}
.social p{
  text-align: center;
}
.social .fa-facebook{
  color: #3B5998;
}
.social .fa-twitter{
  color: #00aced;
}
.social .fa-google{
  color: #dd4b39;
}
.social .fa-linkedin{
  color: #007bb6;
}
.social .fa-reddit{
  color: #ff4500;
}
.social .fa-heart{
  color: red;
}
body{
  background-color: #eceff1; 
}
.list-item{
    font-family: 'Lato', sans-serif !important;
  font-size: large !important;
}
.footer-icons{
  width: 80%;
}
.separator{
  border-right-style: solid; 
}
#header{
  text-align: center;
  margin: 1%;
}
.url-container{
  display: flex;
  margin: auto;
  width: 50%;
}
.info-box{
  margin-top: 8%;
}
.info-box p{
  padding-right: 10%;
  font-size: 1.2em;
}
.url-container #left{
  display: block;
  width: 90%;
  height: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.modal-dialog{
  top: 10%;
}
.url-container input{
  width: 100%;
}
.url-container #right{
  display: block;
  margin: 0;
  padding: 0;
  width: 10%;
  height: 100%;
  float: right;
}
.url-container button{
  height: 28px;
}
.url-container img{
  padding-bottom: 10px;
}
#header img{
  height: 70px;
}

#header h1{
  font-size: 5vh;
  vertical-align: middle;
}

#main{
  margin: 1%;
      min-height: 100%;
          margin-bottom: -100px;
}
#main:after{
  content: "";
  display: block;
  height: 100px;
}
.footer{
  margin-top: 3%;
  margin-left: 1%;
  bottom: 0;
  opacity: 0.6;
  font-size: medium;
  text-align: left;
}
#image-list{
  list-style-type: none;
}
#image-list li{
  margin: 1%;
}
.gallery .carousel-control{
  background-image: none !important;
}
.file-upload{
  background-image: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.history-image{
  height: 10%;
  width: 10%;
}
.carousel-image{
  height: 64px !important;
  width: 64px !important;
  display: block;
  margin: auto;
}
.app-bar button{
  height: 80px !important;
}
.input-box{
  border-style: dashed !important;
  background-color: #eceff1 !important;
  border-radius: 30px !important;
  margin-top: 3%;
}
.output{
  margin-top: 3%;
}
.gallery .glyphicon{
  color: black !important;
}
#about{
  text-align: justify;
}
.image-input-box{
  border-radius: 50px;
  margin-top: 3%;
}
#image-input{
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 6%;
  border-radius: 50px;
}
#image-input h2, h3, p{
  text-align: center;
}
#image-input p{
  text-align: center;
}
.input-icon{
  font-size: 10vw;
  text-align: center;
  width: 100%;
  display: block;
  margin: auto;
  bottom: 0;
  cursor: pointer;
}
.style-bar{
  font-size: 10vw;
  text-align: center;
  width: 100%;
  display: block;
  margin: auto;
  margin-top: 3%;
  bottom: 0;
  cursor: pointer;
}
.item img{
  height: 512px !important;
}
.url-input-box{
  width: 100%;
}
#url-input{
  margin-top: 100px;
}
.camera-feed{
  border-style: solid;
  background-color: #eceff1;
  border-radius: 50px;
  margin-top: 2%;
  position: relative;
  overflow: hidden;
}
.camera-feed img{
  display: block;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  object-fit: contain;
}
.myCarousel{
  border-radius: 50px !important;
  height: 100% !important;
}
.carousel-image{
  max-height: 64px;
  opacity: 0.5;
}
.carousel-image:hover{
  opacity: 1;
  border-radius: 50px;
}
.barchart{
  margin-top: 4%;
}
.actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  margin-top: 2%;
}
.actions button {
  margin:0 auto;
  display:block;
  width: 50%;
  min-height: 70px;
  font-size: x-large;
}
#nav-button{
  margin-top: 2%;
}
#nav-button button{
  margin-top: 2%;
  min-height: 100px;
  min-width: 200px;
}
#over {
   width: 100%; /* Full width (cover the whole page) */
   border-radius: 50px;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #eceff1;
   z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
 }
.ReactCrop{
  border-radius: 50px !important;
}