body {
  background-color: rgb(238, 238, 238);
}


th { font-size: 11px; }
td { font-size: 10px; }
/* h1 {
  font-size: 20pt;
  margin-bottom: 15px;
} */

.page-title{
  padding-top: 10px;
  /* text-align: center; */
  font-weight: bold;
  color: #0D2547
}

.container {
    max-width: 90%;
    margin-top:24px
}

.form-control {
  height: calc(1.5em + .75rem + 2px)!important;
}

.card-header {
    color: #4988C1;
    font-weight: bold
}

/* #distance {
  font-weight: bold;
  color: #0D2547
} */

#api_output{
  height:500px;
}

#my_map {
height:500px;
}

/* @import url(https://fonts.googleapis.com/css?family=Raleway:100,600,400); */

*, body{
  transition: all 0.3s ease;
  /* font-family: 'Raleway', sans-serif; */
}

.button-holder{
  padding-top:40px;
}

#pred-button, #abaque-button{
  position:relative;
  display:inline-block;
  width:120px;
  height:40px;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-20px;
  text-align:center;
}


#submit, #submitAbaque {
  background-color:#0D2547;
  color:#FFFFFF;
  cursor:pointer !important;
}

.submit{
  font-weight: bold;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height:40px;
  border:2px solid #FFFFFF;
  border-radius:10px;
  /* font-size:17px; */
  outline:none;
}

#submit:hover, #submitAbaque:hover{
  background-color:#0069D9;
}

.loading{
  font-size:0;
  width:30px;
  height:30px;
  margin-top:5px;
  border-radius:15px;
  padding:0;
  border:1px solid #0069D9;
  border-bottom:3px solid rgba(255,255,255,0.0);
  border-left:3px solid rgba(255,255,255,0.0);
  background-color:transparent !important;
  animation-name: rotateAnimation;
  -webkit-animation-name: wk-rotateAnimation;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes rotateAnimation {
    0%   {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes wk-rotateAnimation {
    0%   {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

.fa-custom{
  color:#0069D9;
  font-size:18px !important;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-9px;
  margin-top:-9px;
  -webkit-transform:scaleX(0) !important;
  transform:scaleX(0) !important;
}

#clickableAwesomeFont {
     cursor: pointer
}

.finish{
  -webkit-transform:scaleX(1) !important;
  transform:scaleX(1) !important;
}
.hide-loading{
  opacity:0;
  -webkit-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
  -webkit-transform:scale(0) !important;
  transform:scale(0) !important;
}