@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i');

body {
    background-image: none;
    background: #f5f5f5;
    font-family: 'Source Sans Pro';
    font-size: 13px;
}

#menu {
    box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.09);
    min-width: 160px;
    width: 11.5%;
    overflow: hidden;
    background-color: #fff;
    margin-left: 0;
    padding: 0 0 0 0;
}

#logo {
    position: unset;
    background: url(logo.png);
    width: 160px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    background-size: 160px;
}

#PanelWebControls {
    background: #ffffff;
    margin: 0;
    min-height: 230px;
    font-size: 12.5px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.52;
    border-top: 0;
}

#PanelWebControls a {
    padding-top: 0;
    margin-top: 0;
}

#PanelWebControls ul li {
    min-height: 30px;
    padding: 0;
}

#PanelWebControls ul li a, .ui-tabs-vertical > ul > li.ui-tab > a.ui-tabs-anchor {
    color: #697785;
    padding: 0;
    padding-left: 24px;
    height: 100%;
    line-height: 30px;
    display:inline-block;
}

#PanelWebControls ul li a:hover, .ui-tabs-vertical > ul > li.ui-tab > a.ui-tabs-anchor:hover {
    text-decoration: none;
    color: #59c8ff;
}

#PanelWebControls ul li a.selected, .ui-tabs-vertical > ul > li.ui-state-active > a.ui-tabs-anchor {
    width: 100%;
    color: #1a1a1a;
    font-size: 13px;
    padding-left: 20px;
    border-left: 4px solid #0fb1ff;
    height: 34px;
    line-height: 34px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);
    background-color: #fafbfc;
    cursor: default;
}

#body {
    top: 92px;
    background: #fff;
    box-shadow: 0 7px 10px 1px rgba(0, 0, 0, 0.16);
    padding: 21px 28px;
    right: 20px;
    left: 20px;
}

@media (max-width: 1280px) {
    #body {

    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Work Sans';
}

h1,
h2 {
    color: #2b2b2b;
}

h1 {
    font-size: 19px;
    font-weight: 600;
}

h2 {
    font-size: 15px;
    font-weight: 500;
}

h3 {
    font-size: 12px;
    font-weight: 500;
}

h4 {
    font-size: 12px;
    font-weight: 400;
}

/* Buttons */

input [type=submit], button, .DTTT_button {
    height: 30px;
    border-radius: 3px;
    background: #4F33DB;
    border: 0;
    font-size: 11px;
    min-width: 78px;
    margin: 4px 8px;
    padding: 0 16px;
    line-height: 30px;
}

input[type=submit]:hover:not(.disabled, .close),
button:hover:not(.disabled, .close),
a.DTTT_button:hover:not(.disabled, .close) {
    border: 0;
    background-color: #4F33DB;
    color: #eceef0;
}

.loginbutton {
    display: block !important;
    width:100% !important;
}

.btnRadioCodeDetails {
    cursor: pointer;
}

button:disabled, button:disabled:hover, button.danger:disabled, button.danger:disabled:hover {
    background: #d5d5d5;
    font-weight: 600;
    color: #fff;
    cursor: auto;
    border: 0px;
}

button.secondary {
    background: #f6f7f8;
    color: #0094dc;
    border: 1.2px solid #00a5f5;
}

button.secondary:hover {
    background: #f1f8ff;
    color: #00a5f5;
}

button.negative,
button.minus,
button.danger,
input.danger {
    background: #f6f7f8;
    border: 1.2px solid #ff5c72;
    color: #ff7688;
}

button.negative:hover,
button.minus:hover,
button.danger:hover,
input.danger:hover {
    background: #f9edee;
    color: #ff5c72;
}

button.positive,
button.plus {
    background: #f6f7f8;
    border: 1.2px solid #a4da11;
    color: #87c20f;
}

button.positive:hover,
button.plus:hover {
    background: #fafff0;
    color: #87c20f;
}

/* Tabs */
div.ui-tabs .ui-tabs-nav {
    background: #fff;
}

div.ui-tabs .ui-tabs-active {
    background-color: #fff;
}

.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: transparent;
    border: 0;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 11px;
}

div.ui-tabs li:hover:not(.ui-tabs-active) {
    background: transparent;
}

div.ui-tabs li:hover:not(.ui-tabs-active):not(.inactive) a {
    color: #59c8ff;
}

div.ui-tabs .ui-tabs-active a {
    color: #1a1a1a;
}

div.ui-tabs:not(.ui-tabs-vertical) .ui-tabs-active a:after {
    content: '';
    position: absolute;
    height: 2px;
    bottom: 0px;
    background: #43c2ff;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: calc(100% - 16px);
}

.ui-tabs {
    padding: 0;
}

/* Login form */
.inputForm {
    border: 0;
}
.inputForm label:not(#errorText) {
    color: #2b2b2b
}
.inputForm #errorText {
    color: #ff5c72;
    background: transparent;
    font-weight: normal;
}

#PasswordRequired {
    display: none;
}

.inputForm .footer {
    background: transparent;
}

#loginForm {
    margin: 0 auto;
}

#forgotPassword {
    left: 120px;
    bottom: 56px;
    width: 98px;
}

/* Start page */
div#customer > table {
    border: 1px solid #d9d9d9;
}

/* UI elements */

.spinner {
    width: 80px;
}

.spinner > div {
    border-radius: 4px;
    width: 5px;
}

.progress-bar {
    background-color: #29b9ff;
}

.ui-widget.ui-widget-content {
    border: 0;
}

.ui-autocomplete.ui-widget.ui-widget-content {
    border: 0;
    margin-top: -13px;
    box-shadow: 4px 0 6px 0 rgba(0, 0, 0, 0.09);
}

.ui-autocomplete.ui-widget.ui-widget-content li {
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.ui-autocomplete.ui-widget.ui-widget-content li:hover {
    background: #43c2ff;
    color: #fff;
}

.modal-content {
    border: 0;
}

.modal-content button.close[data-dismiss$=close] {
    padding: 0;
}

#body #advancedFilter table tr:nth-child(2n+1), #body #advancedFilter table tr:nth-child(2n), #body #advancedFilter {
    background: #f6f7f8;
}

#PanelCustomMenuControls > span > div:first-child {
    height: 52px;
}

/* Status colors */

.error:not(input) {
    color: #ff5c72;
}

.warning {
    color: #ffce05;
}

.statusIndicator.colorOk {
    color: #7dca2f;
}

.statusIndicator.colorError {
    color: #ff5c72;
}

.statusIndicator.colorWarning {
    color: #ffce05;
}

.statusIndicator.colorInactive {
    color: #8e99a0;
}

.statusIndicator.colorScrapped {
    color: #8e99a0;
}

.statusIndicator.colorProgress {
    color: #39caff;
}

.statusBackground.Ok {
    background-color: #7dca2f;
}

.statusBackground.Warning {
    background-color: #ffce05;
}

.statusBackground.Error,
.statistics.battery.p25>div:first-child>div {
    background-color: #ff5c72;
}

.statusBackground.Inactive,
statusBackground.Scrapped {
    background-color: #8e99a0;
}

.statusBackground.Progress {
    background-color: #39caff;
}

.settingsGroupHeader.accordion {
    margin-top: 0px;
}

.settingsGroupHeader.accordion.active {
    background-color: #0fb1ff;
    font-weight: normal;
    color: #fff;
}

.settingsGroupHeader.accordion button.right {
    font-size: 11px;
    margin: -6px 6px;
    height: 26px;
}

#developmentchanges div ul li.bug>span:first-child,
span.bug {
    background-color: #ff5c72;
}

#developmentchanges div ul li.ui>span:first-child,
span.ui {
    background-color: #39caff;
}

#developmentchanges div ul li.feature>span:first-child,
span.feature {
    background-color: #7dca2f;
}

/* Tables */
#body table {
    border: 0px;
}

#body table tr th {
    background-color: #fff;
    color: #5b5b5b;
    font-size: 12px;
    height: 48px;
}

#body table tr.filter th,
#body table tr.filter th select {
    background-color: #f6f7f8;
    color: #1a1a1a;
    max-width: 230px;
}

#body table tr.filter th select#lbFilter_Status {
    max-width: 40px;
}

#body table tr.filter th select#lbFilter_LastContact {
    max-width: 120px;
}

#body table tr.filter th select {
    border: 1px solid #e5e5e5;
    background: #fff;
}

#body table tr:nth-child(2n+1), #body table tr:nth-child(2n) {
    background: #ffffff;
}

#body table tr:nth-child(2n+1):hover, #body table tr:nth-child(2n):hover {
    background: #f7f9fa;
}

#body table:not(.ignoreExtendedStyling) tr td {
    border-top: 1px solid #d9d9d9;
}

#body table:not(.ignoreExtendedStyling) tr.selected td,
#body table:not(.ignoreExtendedStyling) tr.active td {
    background: #dbedff;
}

#body table tr.selected,
#body table tr.active {
    background-color: #f5f7fa;
}

#body table tr td.active,
#body table tr:nth-child(2n) td.active,
#body table tr:nth-child(2n+1) td.active,
#body table tr:nth-child(2n).selected td.active,
#body table tr:nth-child(2n+1).selected td.active {
    background-color: rgba(125, 202, 47, 0.9) !important;
}

#body table tr.warning {
    background-color: #ffce05;
}

#body table tfoot {
    display: none;
}

/* Input */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime"],
input[type="search"],
input[type="url"],
input[type="time"],
select {
    border-radius: 4px;
    border: solid 1px #e5e5e5;
}

input[type="text"].error,
input[type="password"].error,
input[type="number"].error,
input[type="datetime"].error,
input[type="search"].error,
input[type="url"].error,
input[type="time"].error,
select.error,
#body table tr.error {
    background-color: #ff5c72;
    color: #fff;
}

.autocomplete ul.holder li.bit-box {
    background-color: #0fb1ff;
    color: #fff;
}

.autocomplete ul.holder li.bit-box button {
    min-width: auto;
    height: auto;
    top: -2px;
    margin: 0 4px;
    position: relative;
}

.bit-box .close {
    color: #fff;
    filter: alpha(opacity=60);
    opacity: .6;
}

.close:hover {
    border-width: 0;
    background-color: transparent;
    color: #eceef0;
}

#tbPassword {
    font-family: 'Lato', Arial;
    margin-left: 2px;
}

/* Alerts */
.alert-success {
    color: rgba(0,0,0,0.7);
    background-color: #a6ed18;
    border: 0;
}

.alert-info {
    color: rgba(0,0,0,0.7);
    background-color: #dbedff;
    border: 0;
}

.alert-warning {
    color: rgba(0,0,0,0.7);
    background-color: #fdd901;
    border: 0;
}

.alert-danger {
    color: rgba(0,0,0,0.7);
    background-color: #ff5c72;
    border: 0;
}

.alert-dismissable .close {
    position: relative;
    top: -10px;
    right: -58px;
    color: inherit;
}

.alert-dismissable .close:hover {
    background: transparent;
    color: #bac6d5;
}

/* Select */
select,
.select2-container--default .select2-selection--single {
    border: 1px solid #e5e5e5;
    height: 34px;
    border-radius: 4px !important;
    background: #fff;
}

select,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
    letter-spacing: -0.2px;
    color: #666666;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 100%;
    line-height: 31px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #29b9ff;
    color: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #0fb1ff transparent transparent transparent;
}

.select2-selection.error {
    border: 3px solid #ff5c72 !important;
}

#districtTables select {
    max-width: 175px;
}

/* DataTables */

#unitTableWrapper {
    visibility:hidden;
}

.dataTables_wrapper .paginate_button {
    color: #0094dc;
}

.dataTables_wrapper .paginate_button:hover {
    border: 0;
    background: transparent;
    color: #0094dc;
    font-weight: 600;
    text-decoration: none;
}

.dataTables_wrapper .paginate_button.current {
    border: 0;
    background: transparent;
    color: #000;
    font-weight: 600;
}

/* Unit Settings */
#editDeviceSettingsView .modal-body {
    padding: 15px 0;
}

#editDeviceSettingsView .update-profile-msg, #editDeviceSettingsView #summary {
    padding: 16px;
}



/* Close buttons */

#btnSettingViewClose,
#btnEditCustomerClose,
#btnCloseUser,
#btnCloseDb,
#btnClose,
#btnTemplateViewClose,
#btnSetTemplateClose {
    background: #f6f7f8;
    color: #0094dc;
    display: none;
}

/*
http://local.tessmp.tunstall.com:50753/?Page=Customers

*/

#btnSettingViewClose:hover {
    background: #f1f8ff;
}

.modal-footer {
    min-height: 70px;
}

.modal-header button.close {
    font-size: 36px;
    font-weight: 100;
    margin-right: -27px;
    margin-top: -9px;
    color: #8a9bad;
    opacity: 1.0;
}

.modal-header button.close:hover {
    background: transparent;
    color: #bac6d5;
}

#body #systemSettingsForm table tr th {
    color: #000;
}

.sSettingTextForm {
    min-width: 450px; 
    max-width: 450px;
}