.logo {
	color: #FFFFFF;
  background-color: #01608d;
  padding: 1.5em;   
  margin-bottom: 1em; 
}

.pl-0 {
	padding-left: 0;
} 
 
.pl-1 {
  padding-left: 1em !important;
}

.pr-1 {
  padding-right: 1em !important;
}
 
.pt-1 {
  padding-top: 1em;  
}
 
.ptb-1 {
	padding-top: 1em;
	padding-bottom: 1em;
}

.pb-1 {
  padding-bottom: 1em;
}

.mb-0 {
	margin-bottom: 0;
}

input.ng-invalid:NOT(:DISABLED) {
	border: 1px solid red;
}

.map {
	height: 700px;
  width: 100%;
}

.btn.btn-square {
  border-radius: 0;
}

hr.hrhalfheight {
	margin: 10px;	
}

.btn.btn-success {
  color: #fff;
  background-color: #00843D; /* change from green to accessible green */
  border-color: #00843D;
}

.btn.btn-subListSuccess {
  color: #fff;
  background-color: #5b4d94; /* accessible colour for the sublist buttons when clicked*/
  border-color: #5b4d94;
}
.btnMenu {
  color: #fff;
  background-color: #00843D; /* change from green to accessible green */
  border-color: #00843D;
}

.btn-ml {
	font-size: 13px; /* in between medium and large */
	padding-top: 4px;
	padding-bottom: 4px;
}

.btn-ml2 {
    font-size: 16px; /* in between medium and large */
    color: #333;
    background-color: #fff; /* this is a combination of btn-ml & btn-default for the collapse buttons */
    border-color: #ccc;
}

.btn-ml2:hover {
    background-color: #e6e6e6; 
}
.btn-ml2:active {
    background-color: #e6e6e6; 
}

.btn-group-vertical:not(#accessibleCollapse):not(#cycleCollapse):not(#constructCollapse){
  display: inline-block;
}


.square {
	border-radius: 0 !important;		
}

.previewFrame {
	width: 100%;
	height: 710px;
}

.feature-list button {
	text-align: center;
}

#sidebar {
	text-align: center;
}

#sidebar .tt-menu {
	text-align: left;
}

#roomButtons {
  border: 0;
  text-align: left;
  white-space: nowrap;
}

#roomButtons button {
  margin-top: -1px;
  margin-bottom: -1px;
  height: 100%
}

/*
 * Twitter typeahead styles.
 */
.twitter-typeahead {
  display: block !important;
}

.tt-menu {
  background-color: white;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 30px;
  padding: 5px;  
}

.tt-suggestion:hover, .tt-cursor {
  cursor: pointer;
  background-color: #0097CF;
  color: #FFFFFF;
}

.scrollable-dropdown-menu .tt-menu {
  max-height: 150px;
  overflow-y: auto;
}

.show-accessible-routes {
	padding-top: 5px !important;
}

#embeddedMapControls {
	padding-top: 1em;
	padding-right: 0;
	z-index: 1 !important;
}

#embeddedSearchControl {
	visibility: hidden; 
	width: 0;
}

/* These next 3 styles over-ride Bootstrap and allow collapsible menus inside button groups.  */
.btn-group-vertical {
	display: block;
}

.btn-group-vertical.collapse {
  display: none;
}

.btn-group-vertical.collapse.in {
  display: block;
}

/*
 * Off Canvas (see http://getbootstrap.com/examples/offcanvas)
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
	
	.logo {
	  padding: .8em;
	} 
	
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
    right: 0;
  }
    
  .row-offcanvas.active {
    right: 75%; /* Scrolls the screen 75% to the right, showing the search form. */
  }
 
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    padding-right: 2em;
    padding-left: 0;
    right: -75%; /* Places the search form off screen to the right. */   
  }
  
  #embeddedMapControls {
	  padding-right: 1em;
	}
  
  #embeddedSearchControl {
    visibility: visible;
    width: auto;
  }
}