html, body { 
	height: 100%; margin: 0; padding: 0;
    width: 100vw;
    overflow: hidden;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
body{
	position:relative;
}
#main-container {
    overflow: hidden;
}
.inner-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#map {
	width: 100%; height: 100%;
}

/*.dataTables_wrapper {
    overflow: scroll;
    max-height: 80%;
}*/
#punctuality-table {
    max-height: 67%;
    overflow: scroll;
}
/*g:hover circle{
	transform:scale(1.3,1.3); //background-color:green;
}
g:hover line {
    stroke-width: 10;
}*/

.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:40px; left: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;
    z-index: 1000;
}
#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 .current-time, #main-menu .time-range{
	margin-bottom:5px; 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:20%;
}
#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:absolute; top:0; left:0; z-index:99999; background-color:rgba(0,0,0,0.4); cursor:wait; display:none; align-items:center; justify-content: center;
}
.loading .loading-msg{
	width: 30%; height: 20%; background-color:#fff; color:#424242; text-align:center; font-size:18px; display: flex; align-items:center; justify-content: center;
}
.notification {
    position: absolute;
    top: 20px;
    text-align: center;
    width: 100%;
    font-size: 20px;
    display: none;
    color: white;
}
.notification span {
    background-color: #a1a1a1;
    padding: 10px;
    border: 2px solid grey;
    border-radius: 25px;
}

.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;
}

/*g.svg__g-station circle {
    fill: blue;
    r: 5;
    opacity: 0.7;
}*/

g[passed=true] circle {
    fill: orangered;
    /*r: 10;*/
}

g[passed=false] circle {
    fill: orange;
    /*r: 10;*/
}

g[skip] circle {
    fill: deepskyblue !important;
    /*r: 10;*/
}

g.highlight-passed circle {
    fill: orangered;
    r: 10;
}

g.highlight-upcoming circle {
    fill: orange;
    r: 10;
}

g.highlight-disabled circle {
    fill: deepskyblue !important;
    r: 10;
}

g.highlight-new circle {
    fill: pink;
    r: 6;
}

g.highlight-deactivated circle {
    fill: grey;
    r: 6;
}

tr[disabled] {
    color: grey !important;
}

td[skip] {
    color: grey !important;
}

/*table.dataTable tbody tr[original=true] {
    background-color: lightblue;
}*/

/*table {
    overflow: scroll;
    width: 100%;
}
*/
#timetable tbody td {
    vertical-align: top;
}
table.dataTable tbody tr[selected] {
    background-color: DarkKhaki !important;
}

#timetable tbody tr:hover {
    background-color: deepskyblue;
}
#timetable tbody td:hover {
    background-color: cornflowerblue;
}

th.stop-station {
    min-width: 200px;
}
/*table.dataTable tbody tr td {
    width: 100px;
}*/

table.dataTable tbody tr.even {
    background-color: lightcyan;
}

#timetable .result.header {
    display: inline-block;
    width: 50%;
}
#timetable .result {
    display: inline-block;
    width: 25%;
}
#timetable .result.altered {
    display: inline-block;
    width: 25%;
}

.altered {
    color: red;
}

/*.iframewrap {
    position: absolute;
    height: 600px;
    width: 900px;
}*/
iframe {
    /*position: absolute;
    height: 600px;
    width: 900px;*/
    height: 100%;
    width: 100%;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

rect.slave-figurine {
    pointer-events: none;
}

#side-panel{
    background-color: #BDBDBD;
    /*color: #fff;*/
    z-index: 1002;
}
#side-panel table{
    color: black;
}
.left-shadow-overlay{
    box-shadow: 10px 0 15px 10px #585858;
}
#side-panel h3{
    background-color: #2E2E2E;
    font-size: 1.9em;
    padding: 20px;
    margin: 0;
    font-weight: 300;
    color: white;
}
#side-panel a{
    border-bottom: 1px solid #D8D8D8;
    padding: 1em;
    display: block;
    color: #424242;
    font-size: 1.4em;
    font-weight: 300;
    text-decoration: none;
}
#side-panel a:hover{
    background-color: #D8D8D8;
}
#side-panel .handle{
  background-color: #2E2E2E;
  left: -40px;
  padding: 10px;
  position: absolute;
  top: 0px;
  width: 40px;
  cursor: pointer;
  /*margin-top: -20px;*/
    /*-moz-transition: 200ms ease all;
    -webkit-transition: 200ms ease all;
  -o-transition: 200ms ease all;
  transition: 200ms ease all;*/
}
#side-panel .handle .glyphicon {
    color: white;
}

#side-panel .handle:hover{
  /*left: -46px;
  width: 30px;*/
}

.leaflet-overlay-pane canvas{
    pointer-events: none;
}

.station-tooltip {
    background-color: yellow;
    border: 1px solid black;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 1;
}