/****************************************************************************************************
 * POP6
 ****************************************************************************************************/

@import "colors.css";
@import "fonts.css";
@import "global.css";

@import "header.css";
@import "main.css";
@import "footer.css";
@import "notes.css";

@import "badge.css";
@import "button.css";
@import "chatpop.css";
@import "columns.css";
@import "controls.css";
@import "dashboard.css";
@import "datepicker.css";
@import "drill-anywhere.css";
@import "dropdown.css";
@import "grid.css";
@import "icons.css";
@import "masterdata.css";
@import "metrics.css";
@import "monitor_builder.css";
@import "my_monitors.css";
@import "panel.css";
@import "photo-browser.css";
@import "photo-viewer.css";
@import "popups.css";
@import "search.css";
@import "visit_monitor.css";
@import "select_box.css";
@import "bootstrap-grid.css";
@import "section.css";
@import "mobile_app_preview.css";
@import "hof.css";
@import "container.css";

/****************************************************************************************************
 * SPACER
 ****************************************************************************************************/

.spacer {
    height: 1px;
    width: 10px;
}

/****************************************************************************************************
 * FLEX LAYOUT
 ****************************************************************************************************/

.flex-container {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.flex-container > div {
    flex-grow: 1;
    margin: 8px;
    width: 200px;
}

/****************************************************************************************************
* PANEL DATATABLE
****************************************************************************************************/

.panel.datatable .panel-body {
    /*    overflow-x: auto;*/
}

.panel.datatable .panel-body .badge {
    font-size: 13px;
    font-weight: bold;
    height: 17px;
    line-height: 18px;
    padding: 0 5px;
    text-align: right;
    width: 55px;
}

.panel.datatable .panel-body .badge.white {
    height: 19px;
    line-height: 20px;
    padding: 0 5px;
}

.panel.datatable .panel-body > .show-by {
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    padding: 10px;
}

.panel.datatable .panel-body .table {
    margin: 0 -1px;
}

.panel.datatable .panel-body > .table > table {
    border-spacing: 1px;
    font-size: 13px;
    padding-bottom: 4px;
    text-align: right;
    width: 100%;
}

.panel.datatable .panel-body > .table > table > * > * > table> {
    border-spacing: 1px;
}

.panel.datatable .panel-body > .table > table > * > * > table> * > * > table {
    border-spacing: 1px;
}

.panel.datatable .panel-body > .table > table > * > * > td {
    height: 32px;
    padding: 6px 10px;
}

.showFixScroll::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1px;
    transform: translateX(100%);
    content: "";
    border: solid 1px #CADDEA;
}

.hideFixScroll::after {
    content: none;
}

.panel.datatable .panel-body > .table > table > * > * > td:nth-of-type(1) {
    /*text-align: left;*/
}

.panel.datatable .panel-body > .table > table > * > * > td:nth-of-type(1) {
    /*text-align: left;*/
}

.panel.datatable .panel-body > .table > table > thead {
    background: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: bold;
    vertical-align: bottom;
}

.panel.datatable .panel-body > .table > table > thead > * > td {
    padding: 10px;
}

.panel.datatable .panel-body > .table > table > tbody > tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.9);
}

.panel.datatable .panel-body > .table > table > tbody > tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.8);
}

.panel.datatable .panel-body > .table > table > tbody > tr:hover {
	background: rgba(240, 255, 225, 0.5);
}

.panel.datatable .panel-body > .table > table > tfoot {
    background: rgba(255, 255, 255, 0.4);
    font-weight: bold;
}

/****************************************************************************************************
* SETTINGS TABLE
****************************************************************************************************/

.panel.settingstable .panel-body .table {
    margin: -1px -1px 0px -1px;
}

.panel.settingstable .panel-body .show-by {
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    padding: 10px;
}

.panel.settingstable .panel-body > .table > table {
    border-spacing: 1px;
    font-size: 13px;
    text-align: left;
    width: 100%;
    color: #333333;
}

.panel.settingstable .panel-body > .table > table > * > * > td {
    height: 38px;
    padding: 12px 10px;
    vertical-align: top;
}

.panel.settingstable .panel-body > .table > table > tbody > tr > td:nth-child(1) {
    background: rgba(255, 255, 255, 0.6);
    padding-right: 20px;
}

.panel.settingstable .panel-body > .table > table > tbody > tr > td:nth-child(2) {
    background: rgba(255, 255, 255, 0.85);
    padding-left: 20px;
}

.panel.settingstable .panel-body > .table > table > tbody > tr > td:nth-child(3) {
    background: rgba(255, 255, 255, 0.85);
}

.panel.settingstable .panel-body .checked-table > table {
    border-spacing: 1px;
    font-size: 13px;
    text-align: left;
    width: 100%;
    color: #333333;
}

.panel.settingstable .panel-body .checked-table > table > * > * > td {
    height: 38px;
    padding: 12px 10px;
    vertical-align: top;
}

.panel.settingstable .panel-body .checked-table > table > tbody > tr > td:nth-child(1) {
    background: rgba(255, 255, 255, 0.6);
    padding-right: 20px;
}

.panel.settingstable .panel-body .checked-table > table > tbody > tr > td:nth-child(2) {
    background: rgba(255, 255, 255, 0.85);
    padding-left: 20px;
}

.panel.settingstable .panel-body .checked-table > table > tbody > tr > td:nth-child(3) {
    background: rgba(255, 255, 255, 0.85);
}

.blue-line {
    background: #CFDEE9;
    height: 1px;
    width: auto;
}

.red-line {
	background: #E3D8D6;
	height: 1px;
	width: auto;
}

.shadow-up {
    background-image: url('../images/shadow_up.png');
    height: 30px;
    width: auto;
}

.blue-line2 {
    background: #CFDEE9;
    height: 1px;
    width: auto;
    margin: 12px 0px;
}

/****************************************************************************************************
* TABLE BACKGROUNDS
****************************************************************************************************/

.panel-body.general {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
}

.panel-body .regular {
    background: rgba(255, 255, 255, 0.6);
}

.panel-body .light {
    background: rgba(255, 255, 255, 0.8);
}

.panel-body .light2 {
    background: rgba(255, 255, 255, 0.85);
}

.panel-layer .regular {
    background: rgba(0, 0, 0, 0.6);
    overflow-x: hidden;
}

.table-blank {
    background: #FFFFFF;
    color: #E32800;
    font-weight: bold;
    height: 616px;
    padding: 2px;
    padding-top: 300px;
    text-align: center;
    width: 100%;
    font-size: 13px;
}

/****************************************************************************************************
* DATA FILTERS
****************************************************************************************************/

.panel.filters .panel-body .columns {
    background: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}

.panel.filters .panel-body .columns .blank {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    height: 18px;
    margin-top: 8px;
}

.panel.filters .panel-body .columns .dropdown {
    font-size: 11px;
    line-height: 18px;
    margin-top: 8px;
}

.panel.filters .panel-body .columns .dropdown button {
    font-size: 11px;
    height: 18px;
    line-height: 17px !important;
}

.panel.filters .panel-body .row {
    background: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}

.panel.filters .panel-body .row .blank {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    height: 18px;
    margin-top: 8px;
}

.panel.filters .panel-body .row .dropdown {
    font-size: 11px;
    line-height: 18px;
    margin-top: 8px;
}

.panel.filters .panel-body .row .dropdown button {
    font-size: 11px;
    height: 18px;
    line-height: 17px !important;
}

.dropdown-placeholder {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    height: 18px;
}


/****************************************************************************************************
* CONTENT AREA
****************************************************************************************************/

.content-area {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
}


/****************************************************************************************************
* TIPS
****************************************************************************************************/

.tip {
    border-radius: 5px;
    box-shadow: 0 0px 16px 0 rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    cursor: default;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    line-height: 14px;
    outline: none;
    padding: 6px 8px;
    text-align: left;
    text-decoration: none;
    width: 250px;
    word-wrap: break-word;
}

.tip.blue {
    background-color: #13A4E2;
    border: 1px solid #068CC0;
}

.tip.red {
    background-color: #E22800;
    border: 1px solid #BA1004;
}

.tip.white {
    background-color: #FFFFFF;
    color: #333333;
}


/****************************************************************************************************
* PROCESSING ANIMATION
****************************************************************************************************/

.spinner {
    margin: 40px 0px;
    width: 500px;
    text-align: center;
    font-size: 13px;
}

.spinner > div {
    border-radius: 25%;
    display: inline-block;
    height: 18px;
    margin: 0px 0px 10px 0px;
    width: 18px;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    background-color: #E32800;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
}

.spinner .bounce2 {
    background-color: #FFAF00;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.spinner .bounce3 {
    background-color: #5A9C28;
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.spinner .bounce4 {
    background-color: #13A4E2;
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.spinner .bounce5 {
    background-color: #AC3DE9;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.spinner .bounce6 {
    background-color: #E0256B;
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0.5)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

/****************************************************************************************************
* POPUP
****************************************************************************************************/

/*The popup for display in design documents*/

.popup-design {
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.4);
    cursor: default;
    display: inline-block;
    width: 500px;
}

/*The actual popup for use in the system*/

.popup {
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.4);
    cursor: default;
    display: inline-block;
    left: 50%;
    padding: 0px;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
}

.bar {
    border-radius: 2px;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 5px;
}

.bar.red {
    background-color: #E32800
}

.bar.orange {
    background-color: #FFAF00
}

.bar.green {
    background-color: #5A9C28
}

.bar.blue {
    background-color: #13A4E2
}

.bar.purple {
    background-color: #AC3DE9
}

.bar.purplepink {
    background-color: #CF3493
}

.bar.pink {
    background-color: #E0256B
}

.bar.grey {
    background-color: #4A4A4A
}


.blur {
    background: rgba(255, 255, 255, 0.9);
    height: 100%;
    left: 0px;
    margin: 0px;
    padding: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 100
}

@supports ((-webkit-backdrop-filter: blur(40px)) or (backdrop-filter: blur(40px))) {
    .blur {
        backdrop-filter: blur(40px);
        background: none;
        height: 100%;
        left: 0px;
        margin: 0px;
        padding: 0px;
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 100;
        -webkit-backdrop-filter: blur(40px);
    }
}

/****************************************************************************************************
* CHECKBOXES & RADIO BUTTONS
****************************************************************************************************/

.checkbox {
    background-image: url('../images/checkbox_0.svg');
    background-size: 14px 14px;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    height: 14px;
    padding-left: 20px;
    margin-right: 10px;
    width: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #333333;
    white-space: nowrap;
}

.checkbox.p15 {
    padding-left: 15px;
    margin-right: 0px;
}


.checkbox.p10 {
    padding-left: 24px;
}

.checkbox_builder {
    background-image: url('../images/checkbox_0.svg');
    background-size: 14px 14px;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    height: 14px;
    padding-left: 20px;
    margin-right: 10px;
    width: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 15px;
    color: #333333;
    white-space: nowrap;
}

.checkbox.small {
    font-size: 11px;
}

.checkbox.m10 {
	margin-right: 10px;
}

.checkbox.m6 {
	margin-right: 6px;
}

.checkbox.single {
	display: inline-block;
	margin-right: 0px;
	padding-left: 14px;
}

.checkbox.controls {
    font-size: 11px;
    line-height: 14px;
}

.checkbox.checked {
    background-image: url('../images/checkbox_1.svg');
}

.checkbox.checked.blue {
    background-image: url('../images/checkbox_1_blue.svg');
}

.checkbox.disabled {
    background-image: url('../images/checkbox_x.svg');
}

.checkbox.list {
    margin-bottom: 8px;
}

.checkbox_builder.checked {
    background-image: url('../images/checkbox_1.svg');
}

.checkbox_builder.disabled {
    background-image: url('../images/checkbox_x.svg');
}

.checkbox.form_item_error {
    background-image: url('../images/checkbox_r.svg');
    color: #E32800;
    box-shadow: none !important;
}

.d_cbx_sel_color {
    vertical-align: middle;
    background: url(/resources/graphics/svg/cb1_b.svg);
}

.checkbox.notChecked.disabled {
    background-image: url('../images/checkbox_x_g.svg');
}

.checkbox.checked.disabled {
    background-image: url('../images/checkmark_k.svg');
}

/****************************************************************************************************
* RADIO BUTTONS
****************************************************************************************************/

.radio-button {
    background-image: url('../images/radio_button_0.svg');
    background-size: 14px 14px;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    height: 14px;
    padding-left: 20px;
    width: auto;
}

.radio-button.bold {
    font-weight: bold;
}

.radio-button.faded {
    color: #AAAAAA;
}

.radio-button.m10 {
    margin-right: 10px;
}

.radio-button.controls {
    font-size: 11px;
}

.radio-button.selected {
    background-image: url('../images/radio_button_1.svg');
}

.radio-button.disabled {
    background-image: url('../images/radio_button_x.svg');
}

.radio-button.list {
    margin-bottom: 8px;
    display: block;
}

.radio-button.form_item_error {
    background-image: url('../images/radio_button_r.svg');
    color: #E32800;
    box-shadow: none !important;
}
/****************************************************************************************************
* SWITCH
****************************************************************************************************/

.switch {
    background-size: 26px 14px;
	background-repeat: no-repeat;
    cursor: pointer;
	display: inline-block;
	height: 14px;
	width: 26px;
	padding-left: 33px;
}

.switch.only		{padding-left: 26px}
.switch.on			{background-image: url('../images/switch_on.svg')}
.switch.on.blue		{background-image: url('../images/switch_on_blue.svg')}
.switch.off			{background-image: url('../images/switch_off.svg')}
.switch.disabled	{background-image: url('../images/switch_disabled.svg');cursor: none}


/****************************************************************************************************
 * EXPAND/COLLAPSE BUTTONS
 ****************************************************************************************************/

.button-ec {
    background: #C8C8C8;
    border-radius: 8px;
    height: 12px;
    width: 27px;
    display: inline-block;
}

.button-ec.large {
    height: 18px;
    width: 40px;
}

.button-ec.grey {
    background: #CCCCCC
}

.button-ec.black {
    background: #000000
}

.button-ec.blue {
    background: #13A3E1
}

.button-ec.red {
    background: #E22800
}

.button-ec.orange {
    background: #FFAE00
}

.button-ec.green {
    background: #5A9C28
}

.button-ec.collapse {
    background-image: url(../images/button_collapse.svg)
}

.button-ec.expand {
    background-image: url(../images/button_expand.svg)
}


/****************************************************************************************************
* DIVIDER
****************************************************************************************************/

.divider {
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 1px;
}

.divider.light-grey {
    background-color: #DDDDDD
}

/****************************************************************************************************
* TASK MONITOR TABLE
****************************************************************************************************/

.table-arrow {
    background-image: url('../images/task_monitor_arrow.svg');
    background-size: 20px 14px;
    cursor: default;
    display: inline-block;
    height: 14px;
    width: 20px;
}

.icon-barcode {
    background-image: url('../images/icon_barcode.svg');
    background-repeat: no-repeat;
    background-size: 25px 25px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 27px;
    height: 25px;
    padding-left: 30px;
    width: auto;
}

.icon-qrcode {
    background-image: url('../images/icon_qrcode.svg');
    background-repeat: no-repeat;
    background-size: 25px 25px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 27px;
    height: 25px;
    padding-left: 30px;
    width: auto;
}

.icon-rfid {
    background-image: url('../images/icon_rfid.svg');
    background-repeat: no-repeat;
    background-size: 25px 25px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 27px;
    height: 25px;
    padding-left: 30px;
    width: auto;
}

.icon-text {
    background-image: url('../images/icon_text.svg');
    background-repeat: no-repeat;
    background-size: 25px 25px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 27px;
    height: 25px;
    padding-left: 30px;
    width: auto;
}

.icon-text-16 {
    background-image: url('../images/icon_text.svg');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    padding-left: 16px;
    width: auto;
}

/****************************************************************************************************
 * DISCUSSION ITEM
 ****************************************************************************************************/

.discuss {
	background: #FFF300;
	border-radius: 8px;
	color: #000000;
	font-family: Arial;
	font-size: 13px;
	width: 720px;
	padding: 26px;
}

.cursor_col_resize {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: col-resize;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    margin-right: 2px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    /*background: #B092C1;*/
}

*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
}

.tab_chart_curr_img {
    background-image: url('../images/icon_tab_dashboard_b.svg');
    background-repeat: no-repeat;
}

.tab_single_img {
    background-image: url('../images/icon_tab_table.svg');
    background-repeat: no-repeat;
}

.tab_chart_img {
    background-image: url('../images/icon_tab_dashboard.svg');
    background-repeat: no-repeat;
}

.tab_single_curr_img {
    background-image: url('../images/icon_tab_table_b.svg');
    background-repeat: no-repeat;
}

.dropicon_blue_img {
    background-image: url('../images/ddbutton_arrow_w.gif');
    background-repeat: no-repeat;
}

.dropicon_black_img {
    background-image: url('../images/ddbutton_arrow.gif');
    background-repeat: no-repeat;
}

.remove-x.small {
    width: 18px;
    height: 18px;
}

.remove-x {
    background-image: url(../images/but_search_x.svg);
    display: none;
    right: 0px;
    width: 22px;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 22px;
    position: absolute;
    top: 0;
    padding: 0 6px;
}


.preview-screen {
    box-shadow: 0 0 20px 0px rgb(0 0 0 / 50%);
    width: 385px;
    margin: 19px 0px;
}

.text_limit {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.form_item_error {
    box-shadow: 0 0 0 1px rgb(227, 40, 0) !important;
}

/**
将eric改动移至此处
 */
.row.dynamicFilter > div:not(.table-blank) {
    padding: 5px;
}