/* layout variants */
body.top header {min-height: 0; color: #EEEEEE;}
body.top header h2 {text-align: center; display: inline-block; margin-top: 7px; float: left;}
body.top header h2 div {font-size: 0.9rem; margin-top: 5px;}
body.top nav.nav-2 {float: right; margin-right: 90px;}
body.top img {float: left; padding: 10px 10px 20px; height: 100%;}
body.top img.all-logos {padding: 0; border-radius: 3px 3px 0px 0px;}
body.top nav.pane {min-height: 0; padding: 1ex 0;}
body.top .pane {width: 100%; float: none;}
body.top nav li {list-style-type: none; display: inline-block;}
body.top .settings {left: auto; right: 15px; top: 100%; bottom: auto; margin-top: 15px;}
body.top .settings:before {top: -15px; right: 15px; left: auto; border-style: solid; border-width: 0 15px 15px 15px;}

body.left header {position: fixed;}
body.left nav.pane {position: fixed; width: 12.75%;}
body.left nav li a {padding-right: 15px;}
body.left main {left: 15%;}
body.left footer {width: 68.25% !important;}
body.left .wrapper {left: 15%;}
header.pane {z-index: 1001 !important;}

/* bootstrap extension */
.panel * {color: #555;}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {border-top: 0 none; padding: 4px 8px;}
input[type=date], input[type=time], input[type=datetime-local], input[type=month] {line-height: normal;}
.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {left: 20px; margin-top: 3px;}

/* common */
html, body {margin: 0; padding: 0; height: 100%; width: 100%; font-size: 14px; overflow-x: hidden; position: relative;}

.loading-bg {width: 100%; position: fixed; left: 0; bottom: 0; opacity: 1; z-index: 10;}
.center-main {left: 50%; margin-left: -25%;}
#loading {position: absolute; right: 0; top: 0; height: 100px; cursor: pointer; z-index: 1001; width: 90px;}
#loading svg {height: 90%;}
#loading .reload {display: none;}
#loading .reload.init {display: block;}
#loading * {font-weight: bold; font-size: 25px;}

body.auth header {height: 110px; width: 100%; text-align: left;}
body.auth header > * {margin-top: 0; display: none;}
body.auth header .login {display: block; margin-top: 20px; position: absolute; bottom: 0; width: 100%;}
/*body.auth footer {display: none;}*/

/*body.change header > * {margin-top: 0; display: none;}*/

body.auth.left > header,
body.auth.left > section,
body.auth.left-top > header,
body.auth.left-top > section {padding-top: 200px !important;}
body.auth.left header,
body.auth.left-top header{width: 36%; text-align: right; padding: 2%;}
body.auth.left header .login,
body.auth.left-top header .login {position: relative; bottom: auto; width: auto;}
body.auth.left .wrapper,
body.auth.left-top .wrapper{left: 36%;}
body.auth.left .wrapper main,
body.auth.left-top .wrapper main {left: 0}

/* z-index of ajax message has to be over uib modal */
body .ajax-message {position: fixed; bottom: 0; width: 96%; border-radius: 0; z-index: 1051;}
body .ajax-message i {float: right; cursor: pointer;}

* {
	/*font-family: 'Source Sans Pro', sans-serif;*/
	/*font-family: 'PT Sans', sans-serif;*/
	/*font-family: 'Noto Sans', sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	position: relative;
	font-size: 1rem;
}

.wrapper {min-height: 100vh;}

.pane {float: left;}

body .login {display: none;}

.languages {float: left; padding: 0;}
.languages li {list-style-type: none; float: left; display: inline-block;}

.colors {float: left; padding: 0;}
.colors li {list-style-type: none; float: left; display: inline-block;}

.layouts {float: left; padding: 0;}
.layouts li {list-style-type: none; margin: 10px; float: left; display: inline-block; width: 20px; height: 20px; cursor: pointer;}
.layouts li a {width: 12px; height: 12px; display: inline-block;}
.layouts li.top {border-top: 3px solid;}
.layouts li.top a {border-top: 2px solid; margin: 3px 3px 3px 0;}
.layouts li.top-left {border-top: 3px solid;}
.layouts li.top-left a {border-left: 2px solid; margin: 3px 3px 3px 0;}
.layouts li.left {border-left: 3px solid;}
.layouts li.left a {border-left: 2px solid; margin: 0 3px 3px 3px;}
.layouts li.left-top {border-left: 3px solid;}
.layouts li.left-top a {border-top: 2px solid; margin: 0 3px 3px 3px;}

.settings {position: absolute; left: 100%; width: 230px; bottom: 2%; margin-left: 15px; padding: 8px 16px;}
.settings:before {position: absolute; bottom: 15px; left: -15px; content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 15px 15px 0; }
.settings h4 {clear: both;}

.error {color: darkred; text-align: left !important; display: block; width: 100%;}

header {display: inline-block; height: 100px; padding-top: 10px; z-index: 2;}
header nav {height: 90px; float: left;}
header nav h3 {width: 80px; line-height: inherit; opacity: 0; padding: 3px 0 0 0; height: 47px; margin: -47px 0 0 0; color: #dddddd; overflow: hidden; font-size: 1rem;}
header nav h3 a {font-size: inherit; height: 100%; height: inherit; display: inherit; text-decoration: none !important;}
header nav li {float: left; padding: 0; border-radius: 5px 5px 0 0; height: 100%;}
.nav > li > a:focus {background-color: inherit;}
header > nav.right {float: right;}
header > nav.right > ul {padding-right: 90px;}
header > nav > ul {float: right;}
header > nav > ul > li {margin: 0px 2px;}
header > nav.nav-2 > ul > li {margin: 0;}
header nav li.active:not(.no-views) {padding: 0 4px 0 0;}
header nav > ul > li > a {font-size: 1rem; font-weight: 500; float: left; position: relative; margin-right: 5px; border-radius: 5px 5px 0px 0px; cursor: pointer;}
header nav > ul > li {margin-top: 40px;}
@media screen and (max-width: 1555px){
    img.logo {
        display:none; }
}
/*header > nav > ul > li.active > a {padding-top: 40px; z-index: 1;}*/
header nav li.active a span {display: none;}
header nav li nav {display: inline-block; vertical-align: bottom; float: right;}
header nav li nav i {display: block !important; visibility: hidden;}
header nav li nav ul {float: left; padding: 0;}
header nav li nav ul li {padding: 0 !important; border-radius: 5px 5px 0 0; height: 51px; width: 80px; overflow: hidden;}
header nav li nav ul li a {padding: 6px;}

header nav li.dropdown:hover .dropdown-menu {
	display: block;
}
header nav li.dropdown .dropdown-menu li {
	width: 100%;
}

main {overflow: visible !important;}

textarea {overflow-x: hidden;}

button {padding: 5px 15px; border-size: 2px; border-style: solid; font-weight: bold; border-radius: 4px;}
button.active,
button:hover {cursor: pointer;}
button.small {padding: 4px 10px; margin: 2px;}

form.table-form {padding: 0 10px; overflow-x: scroll; /*border-radius: 5px; !!! this kills IE with overflow-x: scroll */ margin: 1% 0; min-height: 500px; clear:both;}
form.table-form .top-filter {padding-top: 1%;}
.top-filter .form-group {height: 62px;}
table.table {margin-bottom: 0;}
table.table > thead > tr > th {border-bottom: 3px double;}
table.table > thead > tr.title > th {font-size: 1.0rem; text-transform: capitalize; font-weight: normal; padding-bottom: 17px;}
table.table > thead > tr.title > th.filter-toggle {width: 150px; font-weight: normal; text-align: right;}
table.table > thead > tr.title > th > i.fa {display: none; position: absolute; left: 5px; bottom: 25px;}
table.table > thead > tr.title > th.sorting,
table.table > thead > tr.title > th.sorting-asc,
table.table > thead > tr.title > th.sorting-desc {padding-left: 19px; cursor: pointer;}
table.table > thead > tr.title > th.sorting i.fa-caret-up {display: block;}
table.table > thead > tr.title > th.sorting i.fa-caret-down {display: block; margin-bottom: -10px;}
table.table > thead > tr.title > th.sorting-desc i.fa-caret-down {display: block; margin-bottom: -10px;}
table.table > thead > tr.title > th.sorting-asc i.fa-caret-up {display: block;}
table.table > thead > tr.filter > th {font-size: 1rem; font-weight: normal; padding: 4px 10px 4px 0; vertical-align: baseline;}
table.table > thead > tr.filter > th.date {min-width: 90px;}
table.table > thead > tr.filter > th > div > span > div > button {padding: 3px; margin: 2px;}
table.table > thead > tr.filter > th > div > span > div > button span {font-size: 0.9rem;}
table.table > thead > tr.filter > th input {padding: 2px; margin: 2px;}
table.table > thead > tr.filter > th .empty-handling {visibility: hidden;}
table.table > thead > tr.filter > th .empty-handler {position: absolute; top: 8px; left: 0; width: 16px;}
table.table > thead > tr.filter > th .empty-handler i {cursor: pointer; float: left;}
table.table > thead > tr.filter > th .bool-handler i {cursor: pointer;}
table.table > thead > tr.filter > th.search {min-width: 250px;}
table.table > thead > tr.filter > th.search input {float: none;}
table.table > thead > tr.filter > th select,
table.table > thead > tr.filter > th input {width: 100%; display: inline-block;}
/*table.table > thead > tr.filter > th.search button {position: absolute; right: 0; top: 2px;}*/
table.table > thead > tr.filter > th > div {margin-left: 16px;}
table.table > tbody > tr > td {border-top: 2px solid; vertical-align: middle;}
table.table > tbody > tr > td.actions {text-align: right;}
table.table > tbody > tr > td .hidden {display: inline-block !important; visibility: hidden !important;}
table.table > tfoot > tr > td { border-top: 6px double; vertical-align: middle;}
table.table > tfoot > tr > td.cpagination {text-align: right;}
table.table > tfoot > tr > td.cpagination input {width: 70px; display: inline-block;}

.number input {width: 49%; display: inline-block;}
.trainNumberFrom div input:nth-child(1),
.trainNumberTo div input:nth-child(2){width: 99%;}
.trainNumberFrom div input:nth-child(2),
.trainNumberTo div input:nth-child(1){display: none;}

form input[type=checkbox],
form input[type=radio] {width: 40px; float: left; margin: 0 10px;}

footer {clear: both; border-top: 1px solid #43845a; color: #eee;}

.p0 {padding-right: 0.5%; padding-left: 0.5%; box-sizing: content-box;}
.p1 {padding-right: 1%; padding-left: 1%; box-sizing: content-box;}
.p2 {padding-right: 2%; padding-left: 2%; box-sizing: content-box;}
.pv0 {padding-bottom: 0.5%; padding-top: 0.5%;}
.pv1 {padding-bottom: 1%; padding-top: 1%;}
.pv2 {padding-bottom: 2%; padding-top: 2%;}

/*.wizard */
.wizard ul {float: left; width: 100%; padding-left: 0; height: 70px; /*border-radius: 5px; */overflow: hidden;}
.wizard ul li {height: 100%; overflow: hidden; text-align: center; border-style: solid; border-width: 1px 0px 1px 0;}
.wizard ul li a {font-size: 1.2rem; padding: 6px; height: 100%; margin-left: 25px; display: block; text-decoration: none;}
.wizard ul li.done a {cursor: pointer;}
/*.wizard ul li.active:nth-child(1) {border-width: 2px 0px 2px 2px;}*/
.wizard ul li a .number {font-size: 1.45rem; display: block;}
.wizard ul li a .title {font-size: 0.9rem; display: block;}
.wizard .triangle {border-style: solid; float: left; width: 0; height: 0; border-width: 35px 0 35px 25px; -webkit-transform:rotate(360deg)}
.wizard .triangle.grey {border-style: solid;}

/* itndb overrides */
table.table > thead > tr.filter th .empty-handler {display: none;}
table.table > thead > tr.filter th > div {margin: 0 !important;}

/* wenzhixin multiple select */
.ms-parent.form-control {padding: 0; height: auto;}
.ms-parent.form-control button {font-weight: normal; font-size: 0.9rem; padding: 6px 12px; height: 34px;}
.ms-parent.form-control label {font-weight: normal; font-size: 0.9rem;}
.ms-parent.form-control input[type="radio"], input[type="checkbox"] {margin: 0 !important; width: auto !important; float: none !important;}
.ms-parent.form-control .ms-choice > span {top: 3px; left: 6px;}
.ms-parent.form-control .ms-choice > div {top: 3px;}
.ms-drop {
	width: 250px !important;
}

/* pickers css */
/* .dropdown-menu {min-width: 310px; padding: 5px;} */
table .dropdown-menu {min-width: 285px;}
.my-picker {position: absolute; z-index: 2; margin-top: -5px; min-width: 285px;}
.text-muted {color: #bbb !important;}
.text-info {color: white !important;; font-weight: bold !important;}

/* calendar */
.calendar-year-picker {text-align: center;}
.calendar-year-picker ul li {list-style-type: none; float: left; width: 1.3%; margin: 0 0.1%;}
.calendar-year-picker ul li .week-number {cursor: pointer; font-size: 0.9em;}
.calendar-year-picker ul.days {float: left; margin: 0; padding: 0; width: 100%;}
.calendar-year-picker ul.days li {float: none; width: 100%; background-color: white; margin: 2px; font-size: 0.8em; color: #888; cursor: pointer;}
.calendar-year-picker ul.days li.selected {background-color: #bd873d !important; color: white;}
.calendar-year-picker ul.days li.not-valid {background-color: #ddd; color: #999; cursor: default;}
.calendar-year-picker ul.days li.empty {background-color: #eee; color: #888;}
.calendar-year-picker ul.days li.offset {background-color: #e4cdad; color: white;}
.calendar-year-picker ul.days.day-selection li {background-color: transparent; color: #333; cursor: pointer;}
.calendar-year-picker ul.months {}
.calendar-year-picker ul.months li {float: left; margin: 0; cursor: pointer;}
.calendar-year-picker ul.months li.size-1 {width: 1.5%;}
.calendar-year-picker ul.months li.size-2 {width: 3%;}
.calendar-year-picker ul.months li.size-3 {width: 4.5%;}
.calendar-year-picker ul.months li.size-4 {width: 6%;}
.calendar-year-picker ul.months li.size-5 {width: 7.5%;}
.calendar-year-picker ul.months li.size-6 {width: 9%;}


svg .state {
	fill: lightgray;
}

svg .state:hover {
	fill: darkgray;
}

svg .state.selected {
	/*fill: black;*/
}

svg .state.neighbour {
	fill: lightgreen;
}

svg .state.neighbour:hover {
	fill: limegreen;
}

svg .state.selected.neighbour {
	/*fill: darkgreen;*/
}

svg path:hover, path.active {
	cursor: pointer;
	opacity: 1;
}

.check {
	background-image: url(../lib/font-awesome-4.5.0/png/fa-check_15.png);
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

.times {
	background-image: url(../lib/font-awesome-4.5.0/png/fa-times_15.png);
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

.exclamation {
	background-image: url(../lib/font-awesome-4.5.0/png/fa-exclamation_15.png);
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

.filter-none {
	padding-top: 1%;
	margin: 1% 0px;
	/*border-radius: 5px;*/
	background-color: #DDDDDD;
}

.link a:hover {
	cursor: pointer;
	color: #337ab7!important;
}

input.ng-invalid-number, input.ng-invalid-min, input.ng-invalid-max {
	border: 1px solid red;
}

input[type='checkbox'].form-control {
	height: 17px;
	margin: 9px 0px !important;
}

.inline-block {
	display: inline-block;
}