.layout {
	display: flex;
	width: 100%;
	height: 100%;
}
.layout > div {
	height: 100%;
	flex-grow: 1;
	box-sizing: border-box;
}

.station-box {
	font-size: 20px;
	font-weight : 700;
/*	box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5); 	*/
}

.all-station-subbox {
	padding: 10px;	
	display: flex;
    flex-flow: column wrap;
}

.all-station-subbox > div{
	display: flex;
    flex-flow: wrap;
    align-items: center;
    height: 35px;
}


.all-station-title {
	background : rgb(51, 64, 72);
	color : #fff; 
	height : 60px;
	display: flex;
    align-items: center;
    justify-content: center;
}


.span-icon {
	display: flex;
    justify-content: flex-start;
	width: 8%;
}

.span-label {
	display: flex;
    justify-content: flex-start;
	width: 42%;
}

.span-value {
	display: flex;
    justify-content: flex-end;
    padding-right: 10px;
	width: 35%;
}

.span-unit {
	display: flex;
    justify-content: flex-start;
	width: 15%;
}

.span-label-2 {
	display: flex;
    justify-content: flex-start;
	width: 52%;
}

.span-value-2 {
	display: flex;
    justify-content: flex-end;
    padding-right: 10px;
	width: 10%;
}

.span-unit-2 {
	display: flex;
    justify-content: flex-start;
	width: 10%;
}

.span-unit-bar {
	display: flex;
    justify-content: flex-start;
	width: 20%;
}

.all-station-mapbox {	
	display: flex;
    flex-flow: column wrap;
}

.all-station-mapbox > div{
	display: flex;
    flex-flow: wrap;
    align-items: center;
    height: 25px;
    font-size: 15px;
    font-weight: bold;
}

.mapbox-label {
	display: flex;
    justify-content: flex-start;
	width: 40%;

}

.mapbox-value {
	display: flex;
    justify-content: flex-end;
    padding-right: 10px;
	width: 40%;
}

.mapbox-unit {
	display: flex;
    justify-content: flex-start;
	width: 20%;
}

.mapbox-btn {
	justify-content:center; 
	align-items:center; 
	font-size:14px; 
	font-weight:700;
	border:1px solid rgba(0,0,0,0.3);
	border-radius:10px;
	padding:5px;
	cursor:pointer;
	box-shadow: 4px 4px 10px -5px rgba(0,0,0,0.5);
	color:#027be3;
	background-color: #fff;
}

.mapbox-btn:hover {
  background-color: #027be3;
  color: #fff;
  box-shadow: 4px 4px 10px -5px rgba(0,0,0,0.5);
}

.q-carousel-right-arrow {
    background: #fff !important;
/*    opacity: 0.5;*/
    color : #000 !important;
    right: 0px !important;
}

.q-carousel-left-arrow {
    background: #fff !important;
/*    opacity: 0.5;*/
    color : #000 !important;
    left: 0px !important;
}


.q-carousel-quick-nav {
    padding: 0px !important;   
}    

[dir=ltr] .absolute-bottom, [dir=ltr] .fixed-bottom, [dir=rtl] .absolute-bottom, [dir=rtl] .fixed-bottom {
    left: 30px !important ;
    right: 30px !important ;
}
 
.q-btn-fab-mini {
    height: 30px;
    width: 30px;
} 

.img-box {
/*	max-width:100%; */
/*	max-height:100%; */
}

.img-single-box {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	width:100%; 
	height:100px; 
	box-shadow:1px 1px 10px 2px #979797; 
}


/* --  moblie device  -- */
@media all and (max-width: 575.98px) {

	.all-station-subbox{
		font-size: 14px;
	}

}
/* --  tablets and ipads  -- */
@media all and (min-width: 576px) and (max-width: 767.98px) {


}
/* --  laptops  -- */
@media all  and (min-width: 768px) and (max-width: 1199.98px) {

	.all-station-subbox{
		font-size: 16px;
	}
}
/* --  desktops  -- */
@media all and (min-width: 1200px) {

	
}