html, body { 
	height: 100%; margin: 0; padding: 0;
}
body{
	position:relative;
}
#map {
	with: 100%; height: 100%;
}
g:hover circle{
	transform:scale(1.3,1.3); //background-color:green;
}
.tooltip-inner {
    padding:15px 30px; font-size:16px; font-weight:normal; 
}
#left-menu{
	position:absolute; left:0; top:0; width:50px; height:100%; background-color:rgba(40,96,144,0.8);
}
#main-menu{
	position:absolute; bottom:90px; right:80px; width:300px; height:95px; height:140px; xxheight:170px; height:170px; background-color:rgba(255,255,255,0.7); border:1px solid #aaa; font-size:16px; border-radius:5px;
}
#main-menu .main-box{
	margin:20px auto; width:80%;
}
#main-menu .main-box #time-clock{
	font-weight:bold; font-size:18px; margin-bottom:10px; text-align:center;
}
#main-menu #input_date_picker{
	width:100%; height:32px; cursor:pointer; outline:none; outline-color:transparent; border-radius:3px; line-height:32px; text-align:center;
	outline:none; border:1px solid grey; background-color:rgba(255,255,255,0.8);
}
#main-menu .station-name{
	border:1px solid #666; border-radius:5px; width:100%; height:35px; line-height:35px;
}
#main-menu .time-option-box{
	margin:10px 0 0px 0; border:1px solid #aaa; border-radius:5px;
}
#main-menu .radio-box{
	width:50%; margin:5px 0; font-size:14px; line-height:20px;
}
#main-menu  .radio-btn{
	display:inline-block; vertical-align:middle; width:16px; height:16px; border-radius:50%; border:1px solid #666; margin:0 5px; cursor:pointer; 
}
#main-menu  .radio-btn .dot{
	width:8px; height:8px; border-radius:50%; background-color:#337ab7; margin:3px; display:none;
}
#main-menu  .radio-btn.selected .dot{
	display:block;
}
#main-menu .depature-time{
	margin-top:5px; width:100%; font-size:14px; text-align:center;
}
#main-menu .time-slider-box{
	width:90%; margin:-5px auto 10px auto;
}
#main-menu #station-option, #time-option{
	width:100%; height:30px; border-radius:5px; font-size:15px; text-align:center;  padding-left:25px; 
}
#main-menu #time-option{
	margin-top:10px;
}
.modal-dialog{
	width:400px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-200px;
}
.modal-body{
	margin:40px 50px 50px 40px;
}
.modal .input-title{
	font-size:16px; margin-bottom:20px;
}
.modal .input-title span{
	font-size:13px; color:#337ab7;
}
.modal  input{
	width:95%; height:35px; margin:0 2.5%; border:none; background-color:transparent; line-height:35px;
}
.modal .passenger-box{
	margin-top:10px; border:1px solid #999; border-radius:5px; width:100%; height:35px; line-height:35px; 
}
#main-menu .play-btn{
	margin-top:10px; width:100%; 
}
#main-menu .play-btn .btn{
	width:50%;
}
#main-menu .play-btn .last-btn{
	width:50%;
}
#main-menu .play-btn .btn40{
	width:40%;
}
#main-menu .play-btn .btn20{
	width:20%;
}
#modal-message #message-box{
	width:100%; text-align:center;
}
textarea:focus, input:focus{
    outline: none;
}

.loading{
	width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; background-color:rgba(0,0,0,0.4); cursor:wait; display:none;
}
.loading .loading-msg{
	width: 400px; height: 250px; position:absolute; top:50%; left:50%; margin-left:-125px; margin-top:-200px; background-color:#fff; color:#424242; text-align:center; font-size:18px; line-height:250px; 
}

.ui-slider-horizontal {
    height: 10px;
    background: #D7D7D7;xxbackground:grey;
    border: 1px solid #BABABA; border: 1px solid grey;
    box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
    clear: both;
    margin: 8px 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
.xxxui-slider {
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle {
	outline: none;
    border-radius: 50%;
    background: #F9FBFA;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
    background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: linear-gradient(top, #C7CED6, #F9FBFA);
    width: 22px;
    height: 22px;
    -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    -webkit-transition: box-shadow .3s;
    -moz-transition: box-shadow .3s;
    -o-transition: box-shadow .3s;
    transition: box-shadow .3s;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    cursor: default;
    border: none;
    cursor: pointer;
}
.ui-slider .ui-slider-handle:after {
    content:"";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 50%;
    margin-top: -4px;
    left: 50%;
    margin-left: -4px;
    background: #30A2D2;
    -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
    -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
    box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.5em;
    margin-left: -.6em;
}
.ui-slider a:focus {
    outline:none;
}

.tooltip-inner {
    max-width:900px;  padding:10px 20px; text-align:left; font-size:12px; font-weight:normal; 
}
.tooltip-inner p.stop-name{
	font-size:16px; 
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}