/* 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: 70%;
}
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%;}

/* bootstrap extension */
.panel *,
.card * {color: #555;}
input[type=date], input[type=time], input[type=datetime-local], input[type=month] {line-height: normal;}

/* Global col-* gutter fallback inside .row */
.row > [class^="col-"],
.row > [class*=" col-"],
.row > .col {
    padding-left: 15px;
    padding-right: 15px;
}

.form-group > [class^="col-"],
.form-group > [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

.form-group > .col-form-label {
    font-weight: 700;
    text-align: right;
    padding-top: 7px;
}

/* Bootstrap form-control overrides */
.form-control {
    border-color: #ccc !important;
}

/* Keep native select arrow for old select.form-control markup */
select.form-control:not([multiple]):not([size]) {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    background-image: none;
}

.form-control::placeholder {
    color: #8f98a1;
    opacity: 1;
}

/* ui.bootstrap 0.14.x compatibility when running with Bootstrap 5 */
.btn-default {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #ced4da;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    color: #212529;
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.pull-left {float: left !important;}
.pull-right {float: right !important;}

/* ui.bootstrap templates toggle "in" while BS5 expects "show" */
.tooltip,
.popover {
    position: absolute;
}
.tooltip.top {margin-top: -10px;}
.tooltip.top .tooltip-arrow,
.tooltip.right .tooltip-arrow,
.tooltip.bottom .tooltip-arrow,
.tooltip.left .tooltip-arrow {
    position: absolute;
}
.tooltip.top .tooltip-arrow {
    bottom: calc(-1 * var(--bs-tooltip-arrow-height));
    left: calc(50% - (var(--bs-tooltip-arrow-width) / 2));
}
.tooltip.top .tooltip-arrow::before {
    position: absolute;
    content: "";
    top: -1px;
    border-style: solid;
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-color: var(--bs-tooltip-bg) transparent transparent;
}
.tooltip.right .tooltip-arrow {
    left: calc(-1 * var(--bs-tooltip-arrow-height));
    top: calc(50% - (var(--bs-tooltip-arrow-width) / 2));
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
}
.tooltip.right .tooltip-arrow::before {
    position: absolute;
    content: "";
    right: -1px;
    border-style: solid;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-color: transparent var(--bs-tooltip-bg) transparent transparent;
}
.tooltip.bottom .tooltip-arrow {
    top: calc(-1 * var(--bs-tooltip-arrow-height));
    left: calc(50% - (var(--bs-tooltip-arrow-width) / 2));
}
.tooltip.bottom .tooltip-arrow::before {
    position: absolute;
    content: "";
    bottom: -1px;
    border-style: solid;
    border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-color: transparent transparent var(--bs-tooltip-bg) transparent;
}
.tooltip.left .tooltip-arrow {
    right: calc(-1 * var(--bs-tooltip-arrow-height));
    top: calc(50% - (var(--bs-tooltip-arrow-width) / 2));
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
}
.tooltip.left .tooltip-arrow::before {
    position: absolute;
    content: "";
    left: -1px;
    border-style: solid;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-color: transparent transparent transparent var(--bs-tooltip-bg);
}
.fade.in {opacity: 1;}
.modal-backdrop.in {opacity: .5;}
.modal.in .modal-dialog {
    transform: none;
}
.tooltip.in {opacity: .9;}
.popover.in {opacity: 1;}

/* Glyphicon fallbacks used by old ui.bootstrap datepicker templates */
.glyphicon {
    display: inline-block;
    font-style: normal;
    line-height: 1;
}
.glyphicon-chevron-left::before {content: "\2039";}
.glyphicon-chevron-right::before {content: "\203A";}
.glyphicon-chevron-up::before {content: "\02C4";}
.glyphicon-chevron-down::before {content: "\02C5";}

/* common */
html, body {margin: 0; padding: 0; width: 100%; font-size: 14px; 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: 11; 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, body.wagon-export header {height: 110px; width: 100%; text-align: left;}
body.auth header > *, body.wagon-export header > * {margin-top: 0; display: none;}
body.auth header .login, body.wagon-export .login {display: block; margin-top: 20px; position: absolute; bottom: 0; width: 100%;}
body.auth footer, body.wagon-export 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}

body .ajax-message {position: fixed; bottom: 0; width: 96%; border-radius: 0; z-index: 99;}
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: 83vh;}

.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;font-weight: 700;}

header {display: inline-block; height: 108px; padding-top: 10px; z-index: 2;}

header nav {
    overflow-y: hidden;
    height: 90px;
}
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 {text-align: center; float: left; padding: 0; border-radius: 5px 5px 0 0; height: 100%;}
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 li > a {font-size: 1rem; font-weight: 500; width: 80px; float: left; position: relative; height: 98px;}

@media screen and (max-width: 1450px) {
    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;}
header nav li a {text-decoration: none;}
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 nav ul li a:hover {text-decoration: underline;}

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;}
button.ms-choice .placeholder {min-height: unset}

form.table-form {overflow-x: scroll; padding: 0 10px; /*border-radius: 5px; !!! this kills IE with overflow-x: scroll */ margin: 1% 0; min-height: 500px;}

table.table {margin-bottom: 0;}
.table {
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
}
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: 125px; 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 .timestamp {min-width: 90px;}
/*table.table > thead > tr.filter > th.number input {width: 40%;}*/
table.table > thead > tr.filter > th > div > span > button {padding: 3px; margin: 2px;}
table.table > thead > tr.filter > th > div > span > 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: 125px; text-align: left;}
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%;}
/*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 span {display: inline-block; width: 100%;}
table.table > tbody > tr > td {border-top: 2px solid; vertical-align: middle;}
table.table > tbody > tr > td .actions {text-align: left;}
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: 75px!important; display: inline-block;}

form input[type=checkbox],
form input[type=radio] {width: 40px; float: left; margin: 0 10px;}
form input[type=checkbox].form-control {
    width: auto;
    height: auto;
    float: none;
    display: inline-block;
    margin: 0 8px 0 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    appearance: auto;
    vertical-align: middle;
}
.form-group {display: flex;}

footer {clear: both; border-top: 1px solid #ab1111; 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%;}
.mgl {margin-left: 17px!important;}

a.auth-a-with-hover{
	color: gray;
}
a.auth-a-with-hover:hover{
    cursor: pointer;
    color: black !important;
    text-decoration: none;
}
.auth-forgot-div{
	text-align: right;
}
.auth-forgot-main{
	margin: auto;
	min-width: 350px;
	width: 500px;
}
.auth-forgot-input{
	width: 100%;
}
.auth-forgot-buttons{
	text-align: right;
}
.auth-forgot-btn{
	padding: 0 17px 0 5px;
	display: inline-block;
}

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

.chart-container chart-legend {float: left;}
.wagons form.search {display: inline-block;}
.wagons table.table {min-width: 1800px;}
.wagons table.table * {font-size: 0.9rem;}
.wagons table.table > thead > tr.title th {white-space: nowrap;}
.wagons table.table > thead > tr.title th.filter-toggle,
.wagons table.table > thead > tr.filter th.search{width: 114px;}
.wagons.detail table.table > thead > tr.title th.filter-toggle {width: 0px;}
.wagons table.table > thead > tr.filter th .empty-handler {display: none;}
.wagons table.table tbody tr td {white-space: nowrap; max-width: 60px; overflow: hidden;}
.wagons table.table tbody tr td:nth-child(2) {max-width: 110px;}
.wagons table.table tbody tr td:nth-child(20) {max-width: 20px;}
.wagons table.table tbody tr td:nth-child(21) {max-width: 20px;}
.wagons table.table tbody tr td:nth-child(22) {max-width: 20px;}
.wagons table.table tbody tr td:nth-child(23) {max-width: 20px;}
.wagons table.table tbody tr td:nth-child(24) {max-width: 20px;}
.wagons table.table tbody tr td:nth-child(25) {max-width: 20px;}
.wagons.detail table.table tbody tr td:nth-child(2) {max-width: 100px;}
.wagons table.table tbody tr td.actions {max-width: 150px!important;}
.wagons.detail table.table tbody tr td.actions {max-width: 0px!important;}
.wagons table.table tbody tr td * {white-space: nowrap;}
.wagons table.table tbody tr td {padding: 3px 6px;}
.wagons table[role="grid"] tbody tr td {padding: 0 0}
.wagons table.table .ms-parent {width: 100%;}
.wagons table.table .ms-parent button {width: 100% !important;}

.import.detail form.search {display: inline-block;}
.import.detail table.table {min-width: 1800px;}
.import.detail table.table * {font-size: 0.9rem;}
.import.detail table.table > thead > tr.title th {white-space: nowrap;}
.import.detail table.table > thead > tr.title th.filter-toggle {max-width: 50px; font-weight: normal; text-align: right;}
.import.error table.table > thead > tr.title th.filter-toggle {width: 0px; padding: 0px;}
.import.detail table.table > thead > tr.title th.filter-toggle {width: 0px; padding: 0px;}
.import.detail table.table tbody tr td:nth-child(2) {max-width: 100px;}
.import table.table > thead > tr.filter th .empty-handler {display: none;}
.import table.table tbody tr td {white-space: nowrap; overflow: hidden;}
.import.detail table tbody tr td { max-width: 70px;}
.import.detail table.table tbody tr td.actions {max-width: 175px;}
.import.error table.table tbody tr td.actions {width: 0px; padding: 0px; max-width: 0px;}
.import table.table tbody tr td * {white-space: nowrap;}
.import table.table tbody tr td {padding: 3px 6px;}
.import table[role="grid"] tbody tr td {padding: 0 0}

.import.error table.table tbody tr td:nth-child(2) {width: 250px;}
.import table.table .ms-parent {width: 100%;}
.import table.table .ms-parent button {width: 100% !important;}
.import table.table tfoot tr td {min-width: 200px;}
.import table.table > thead > tr.filter > th.search {min-width: 25px;}

.users table.table th.search {text-align: right;}

.last-data-source {
    background-color: rgba(75, 160, 46, 0.63);
    display: block;
}

.data-source {
    display: block;
}

.icons {
    height: 24px!important;
    width: 24px!important;
    float: none!important;
    padding: 0 0 0 0!important;
}

.file-type-select {width: 60px;}
.data-source-filter {width: 280px;}

/* wenzhixin multiple select */
.ms-parent button {font-weight: normal; font-size: 0.9rem;}
.ms-parent label {font-weight: normal; font-size: 0.9rem;}
.ms-parent input[type="radio"], input[type="checkbox"] {margin: 0 !important; width: auto !important; float: none !important;}
.ms-drop {
    width: 190px !important;
}

/* bootstrap angularui tooltip changes */
.tooltip-inner {word-break: break-all;}

/* 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;}

textarea {
    resize: none;
}

.searching {
    width: 90px;
}

.login-links {
    margin-top: 30px;
}

.login-links .login-link {
    background-image: url(../img/login_arrow.png);
    background-repeat: no-repeat;
    background-size: 22px 18px;
}

.login-links a {
    color: black;
    text-decoration: none;
    font-size: 16px !important;
    padding: 0px 0px 2px 30px !important;
}

.login-links a:hover {
    text-decoration: none;
    color: black !important;
    cursor: pointer;
}