body {
    height: 100%;
    height: -webkit-calc(100% - 50px);
    height: -moz-calc(100% - 50px);
    height: calc(100% - 50px);
    width: 100%;
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
    width: 100%;
}
#mapid
{
   height: 100%;
    width: 100%; 
    margin-top: 50px;
}
.leaflet-tooltip {
    background-color:rgba(255,255,255,0.7);
    border: 0px;
    box-shadow: 0 1px 3px transparent;
    font-weight: bold;
    font-size: 0.9em;
    padding: 2px;
}
.leaflet-container {
    background-color: #B5D0D0;
}

.modal-header {
	color: white;
    background-color:#286090;
    border-color: transparent;
}

.modal_body_route{
  position: relative;
  padding: 15px;
  display: flex;
  justify-content: center;
}
#para_od {
    font-size: 1.2em;
    font-weight: bold;
    color:  #1E1E1E;
    text-align: center;
}
.gare_heure{
    height: auto;
    width: calc(100%/4);
    /*background-color: red;*/
    display: flex;
    justify-content: center;
    color: #0088ce;
}
#b{
    height: auto;
    width: calc(100%/2);
    display: flex;
    justify-content:space-between;
    /*background-color: blue;*/
}

#e{
    width: calc(100%/2);
    height: auto;
    /*background-color: orange;*/
    display: flex;
    justify-content: center;
}

#g{ 
    height: 60px;
    border-left: dotted 3px;
    border-color: #0088ce;
    display: flex;
    justify-content: center;
    padding-left: 5px;
}
.con{
    display: flex;
}
.point{
    width: 12px;
    height: 12px;
    border-radius: 20px;
    background-color: #999;
    margin-top: auto;
    margin-bottom: auto;
}
.line{
    height: 2px;
    width: 100%;
    background-color: #999;
    margin-top: auto;
    margin-bottom: auto;
}
.nom_gare{
    color:#1E1E1E;
    font-weight: bold;
}
#next_route{
    text-align: left;
}
.gare_heure.TLJ{
    color: green;
    font-weight: bold;
}
.gare_heure.NOV{
    color: orange;
    font-weight: bold;
}
.gare_heure.OKV{
    color: red;
    font-weight: bold;
}
.gare_heure.NWEF{
    color: darkorange;
    font-weight: bold;
}
.leaflet-control-messagebox {
	display: block; /* Initially hidden */
	border: 2px solid red;
	background-color: white;
	padding: 3px 10px;
}
#alertbox{
    width: 100vw;
    margin-left: 0px;
    font-weight: bold;
    text-align: center;
}

/*==================================================*/
/*BOOTLEAF*/
.navbar{
    background-color:#053661;
    border-color: transparent;
}

#aboutTabsContent {
  padding-top: 10px;
}
.white {
  color: white;
}
.yellow {
  color: yellow;
}
.navbar .navbar-brand {
  font-weight: bold;
  font-size: 25px;
  color: #FFFFFF;
}
.navbar-collapse.in {
  overflow-y: hidden;
}
.navbar-header .navbar-icon-container {
  margin-right: 15px;
}
.navbar-header .navbar-icon {
  line-height: 50px;
  height: 50px;
}
.navbar-header a.navbar-icon {
  margin-left: 25px;
}
.typeahead {
  background-color: #FFFFFF;
}
.tt-dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 4px;
  padding: 4px 0;
  width: 100%;
  max-height: 300px;
  overflow: auto;
}
.tt-suggestion {
  font-size: 14px;
  line-height: 20px;
  padding: 3px 10px;
}
.tt-suggestion.tt-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
  cursor: pointer;
}
.tt-suggestion p {
  margin: 0;
}
.tt-suggestion + .tt-suggestion {
  border-top: 1px solid #ccc;
}
.typeahead-header {
  margin: 0 5px 5px 5px;
  padding: 3px 0;
  border-bottom: 2px solid #333;
    color: black;
}

.has-feedback .form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
}
#aboutTabsContent {
  padding-top: 10px;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background-color:steelblue;
}
/*=======================================*/
/*GPS LOCATION*/
.leaflet-touch .leaflet-bar-part-single {
  -webkit-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
  border-bottom: none;
}
.leaflet-touch .leaflet-control-locate {
  box-shadow: none;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.leaflet-control-locate a {
  font-size: 1.4em;
  color: #444;
}
.leaflet-control-locate.active a {
  color: #2074B6;
}
.leaflet-control-locate.active.following a {
  color: #FC8428;
}
/*=========================================*/
/*MEDIA QUERY*/
@media screen and (max-height:480px)
{
.modal-body{
    
    max-height: 300px;
    overflow: auto;
    }
}


@media screen and (min-height:480px) and (max-height:700px)
{
.modal-body{
    
    max-height: 400px;
    overflow: auto;
    }
}

@media screen and (min-height:700px) and (max-height:900px)
{
.modal-body{
    
    max-height: 500px;
    overflow: auto;
    }
}

@media (max-width: 992px) {
  .navbar .navbar-brand {
    font-size: 18px;
  }
}

@media screen and (min-height:900px) and (max-height:1200px)
{
.modal-body{
    
    max-height: 80vh;
    overflow: auto;
    }
}
/*LOADING*/

#para_loading, .br_loading{
    display: none;
}
.animationload {
    background-color: transparent;
    height:50px;
    margin: auto;
    position: absolute;
    width: 50px;
    z-index: 10000;
    display: none;
}
.osahanloading {
    animation: 1.5s linear 0s normal none infinite running osahanloading;
    -moz-animation: 1.5s linear 0s normal none infinite running osahanloading;
    background: #053661 none repeat scroll 0 0;
    border-radius: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    width: 50px;
}
.osahanloading::after {
    animation: 1.5s linear 0s normal none infinite running osahanloading_after;
    -moz-animation: 1.5s linear 0s normal none infinite running osahanloading_after;
    border-color: steelblue transparent;
    border-radius: 80px;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 80px;
    left: -15px;
    position: absolute;
    top: -15px;
    width: 80px;
}
@keyframes osahanloading {
0% {
    transform: rotate(0deg);
}
50% {
    background: steelblue none repeat scroll 0 0;
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}