body {
    background-color: #222529;
    color: #fff;
    height: 100vh;
}

.smart-topbar {
    height: 60px;
    background-color: #2b2e32;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2b2e32;
}

.smart-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aaabad;
}

.smart-info-item {
    margin-left: 30px;
    font-size: 16px;
    line-height: 1;
}

#user_language>a {
    color: #aaabad;
    font-size: 16px;
    line-height: 20px;
    display: block;
}

#user_language a img {
    float: left;
    margin-right: 10px;
}

#lang_drop_trigger>li>a {
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
}

#smart-content {
    margin: 25px 25px 15px;
}

.smart-box {
    border: 1px solid #2b2e32;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 25px;
}

.col-lg-2 .smart-box:last-child,
.col-lg-3 .smart-box:last-child,
.col-lg-7 .smart-box:last-child,
.col-lg-8 .smart-box:last-child {
    margin-bottom: 0;
}

.smart-box-title {
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-indent: 20px;
    font-size: 18px;
    font-weight: bold;
    background-color: #2b2e32;
}

.smart-box-content {
    background-color: #2b2e32;
    padding: 20px;
    color: #aaabad;
}

.flex-row {
    display: flex;
    justify-content: space-between;
    line-height: 26px;
    gap: 10px;
    align-items: center;
    font-size: 16px;
}

.site-info {
    padding-top: 0;
    display: flex;
    flex-direction: column;
}

.site-info .flex-row {
    background-color: #222529;
    padding: 10px;
    margin: 10px 0;
}

.site-info .flex-row:last-child {
    margin-bottom: 0;
}

.progress {
    flex: auto;
    height: 12px;
    margin-top: 5px;
    background-color: #222529;
    border-radius: 6px;
}

.progress-bar,
.progress-bar-primary {
    background-color: #69d2ce;
}

.progress-percentage {
    text-align: right;
}

#map {
    color: #000;
}

.smart-site-title {
    font-size: 16px;
    display: flex;
    align-items: center;
}

.smart-site-title a {
    display: block;
    line-height: 20px;
}

.smart-site-title a img {
    float: left;
    margin-top: 2px;
    margin-right: 15px;
}

.topbar-links-wrap {
    display: none;
    position: absolute;
    left: 0;
    top: 60px;
    background-color: #fff;
    height: calc(100vh - 60px);
    width: 320px;
    z-index: 999;
}

.topbar-links li {
    clear: both;
    margin: 5px 0;
}

.topbar-links li.topbar-logout {
    /* position: absolute; */
    left: 0;
    bottom: 0;
    width: 100%;
}

.topbar-links li a {
    color: #808285;
    height: 44px;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: left;
}

.topbar-links li a img {
    margin: 0 25px;
}

.smart-site-nav {
    font-size: 24px;
    color: #fff;
    margin-right: 30px;
    padding-bottom: 3px;
}

.smart-site-nav.page-active,
.smart-site-nav:focus,
.smart-site-nav:hover {
    color: #698ca2;
    border-bottom: 2px solid #698ca2;
}

.smart-data-block {
    border: 1px solid #2b2e32;
    padding: 8px 0;
    background-color: #2b2e32;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.smart-data-block-icon {
    padding: 20px;
    background-color: #222529;
    border-radius: 50%;
    margin: 0 25px;
}

.smart-data-block-title {
    color: #a1a3ab;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
}

.smart-data-block-content {
    font-size: 28px;
    font-weight: bold;
    line-height: 30px;
}

#smart-data-blocks {
    margin-bottom: 35px;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

#smart-data-blocks .smart-data-block-icon img {
    width: 30px;
    height: 30px;
}

#smart-data-blocks:not(.mobile-marquee-block) .marquee-row {
    display: inline-block;
    white-space: nowrap;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    font-size: 0;
    animation-duration: 60s;
}

.marquee-item {
    display: inline-block;
    white-space: nowrap;
    margin-right: 25px;
    width: 354px;
}

#smart-data-blocks:hover .marquee-row {
    animation-play-state: paused !important;
}

.mobile-marquee-block .marquee-item {
    margin-bottom: 10px;
    width: 100%;
}

.mobile-marquee-block .marquee-item:last-child {
    margin-bottom: 0;
}

@keyframes marquee {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.smart-channel-order {
    color: #fff;
}

.smart-channel-order i {
    float: left;
    font-size: 12px;
    margin-top: 26px;
    color: #008744;
}

.site-monitors-wrap {
    position: relative;
    border-radius: 5px;
    height: 910px;
}

.site-monitors-wrap.no-monitors {
    background: url(../images/icon_no_video.png) no-repeat center center;
}

.site-monitors-wrap .item {
    height: 828px;
    width: 100%;
    display: block;
}

.site-monitors-wrap .owl-prev,
.site-monitors-wrap .owl-next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: -20px;
    background-color: rgba(255, 255, 255, .5);
    color: #161b2e;
    z-index: 9;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-monitors-wrap .owl-prev {
    left: -12.5px;
}

.site-monitors-wrap .owl-next {
    right: -12.5px;
}

.site-monitors-wrap .owl-prev.disabled,
.site-monitors-wrap .owl-next.disabled,
.site-monitors-wrap.disabled .owl-prev,
.site-monitors-wrap.disabled .owl-next {
    display: none;
}

.flex-data-row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 12.5px;
    padding-right: 12.5px;
}

.row {
    margin-left: -12.5px;
    margin-right: -12.5px;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
    padding-left: 12.5px;
    padding-right: 12.5px;
}

.modal .col-lg-1,
.modal .col-lg-10,
.modal .col-lg-11,
.modal .col-lg-12,
.modal .col-lg-2,
.modal .col-lg-3,
.modal .col-lg-4,
.modal .col-lg-5,
.modal .col-lg-6,
.modal .col-lg-7,
.modal .col-lg-8,
.modal .col-lg-9,
.modal .col-md-1,
.modal .col-md-10,
.modal .col-md-11,
.modal .col-md-12,
.modal .col-md-2,
.modal .col-md-3,
.modal .col-md-4,
.modal .col-md-5,
.modal .col-md-6,
.modal .col-md-7,
.modal .col-md-8,
.modal .col-md-9,
.modal .col-sm-1,
.modal .col-sm-10,
.modal .col-sm-11,
.modal .col-sm-12,
.modal .col-sm-2,
.modal .col-sm-3,
.modal .col-sm-4,
.modal .col-sm-5,
.modal .col-sm-6,
.modal .col-sm-7,
.modal .col-sm-8,
.modal .col-sm-9,
.modal .col-xs-1,
.modal .col-xs-10,
.modal .col-xs-11,
.modal .col-xs-12,
.modal .col-xs-2,
.modal .col-xs-3,
.modal .col-xs-4,
.modal .col-xs-5,
.modal .col-xs-6,
.modal .col-xs-7,
.modal .col-xs-8,
.modal .col-xs-9 {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

#smart-content .horizontal-bar-tall-row .card-body {
    height: auto;
}

#site-charts {
    margin-top: -10px;
}

#site-charts .owl-stage-outer {
    padding-top: 10px;
}

#smart-site-progresses {
    padding: 0 20px;
    height: 319px;
}

#smart-map {
    height: 674px;
    color: #000;
}

#bim-left,
#bim-right {
    height: 908px;
    color: #aaabad;
    position: relative;
}

#bim-right {
    padding: 20px;
    font-size: 16px;
    overflow-y: auto;
}

.sub-page-title {
    height: 62px;
    line-height: 62px;
    color: #fff;
    font-size: 20px;
}

#bim_select,
#floor_select,
#lift_shaft_select {
    background-color: #2b2e32;
    border-radius: 10px;
}

.bim-name {
    font-size: 20px;
    text-align: center;
    border-bottom: 2px solid #aaabad;
    margin-bottom: 10px;
}

.bim-section-title {
    font-size: 18px;
    margin-top: 50px;
}

.bim-section-content {
    text-align: center;
}

.page-template-page-material-tracking #bim-right {
    height: 528px;
}

.bim-search-table-wrap {
    padding: 20px;
    height: 354px;
}

.bim-search-table {
    font-size: 16px;
}

.bim-search-table tbody tr th,
.bim-search-table tbody tr td {
    border: none;
    color: #aaabad;
    padding: 8px 0;
    vertical-align: middle;
    line-height: 22px;
}

.bim-search-table label {
    margin-bottom: 0;
    margin-right: 30px;
}

.bim-search-table input[type="radio"] {
    margin-top: 0;
}

.bim-search-table select.bim-search-select {
    height: 30px;
    border-radius: 5px;
    background: #2b2e32;
    color: #aaabad;
}

.bim-search-table .error {
    border-color: red;
}

#bim-search-btn {
    float: right;
    padding: 2px 20px;
    height: 30px;
    line-height: 24px;
    background: #aaabad;
    color: #fff;
}

.bim-checkpoint {
    height: 30px;
    line-height: 30px;
    text-align: left;
    margin: 15px 0;
}

.bim-checked {
    background: url(../images/icon_bim_checkmark.png) no-repeat right center;
}

.inspection-modal-trigger,
.risc-modal-trigger,
.permit-modal-trigger,
.safety-checklist-modal-trigger,
.action-modal-trigger,
.inspection-form-modal-trigger {
    cursor: pointer;
}

#smart-container .chart-container {
    height: 227px;
}

#smart-container .only-charts .chart-container {
    height: 379.5px;
}

.cctv-item {
    width: 100%;
    height: 267px;
    display: block;
}

.device-block {
    float: left;
}

.device-block .smart-data-block {
    background-color: #a3a3a5;
    border-color: #a3a3a5;
}

.device-block .smart-data-block.active {
    background-color: #69d2ce;
    border-color: #69d2ce;
}

.device-block .smart-data-block-title {
    color: #444;
}

.savings-table {
    width: 100%;
    font-size: 18px;
}

.savings-table td {
    color: #a1a3ab;
    padding: 10px;
    line-height: 30px;
}

.savings-table th {
    color: #fff;
    padding: 10px;
    line-height: 30px;
}

.savings-table .tons {
    color: #5ccca9;
    font-weight: bold;
}

.savings-table .litres {
    color: #474df5;
    font-weight: bold;
}

.table-data-block {
    color: #fff;
    font-size: 16px;
    border: 1px solid #2b2e32;
    border-radius: 10px;
    background-color: #2b2e32;
    padding: 20px;
}

.table-data-title {
    font-size: 18px;
    display: flex;
    align-items: center;
}

.table-data-expend {
    padding-right: 10px;
    line-height: 1;
    cursor: pointer;
}

.table-data-expend .caret {
    margin-left: 10px;
}

.table-data-num {
    font-size: 14px;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 2px 20px;
}

.table-data {
    table-layout: fixed;
}

.table-data>tbody>tr>td,
.table-data>tbody>tr>th,
.table-data>tfoot>tr>td,
.table-data>tfoot>tr>th,
.table-data>thead>tr>td,
.table-data>thead>tr>th {
    line-height: 1.42857143;
}

.table-data.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgb(126, 128, 131);
}

.table-data tr th,
.table-data tr td {
    color: #fff;
    word-break: break-all;
}

.modal .table-data tr th,
.modal .table-data tr td {
    color: #252525;
}

.modal .table>thead>tr>th {
    border-bottom-color: #252525;
}

.modal .table>tbody>tr>td,
.modal .table>tbody>tr>th,
.modal .table>tfoot>tr>td,
.modal .table>tfoot>tr>th,
.modal .table>thead>tr>td,
.modal .table>thead>tr>th {
    border-top-color: #252525;
}

.table-data tr th {
    white-space: nowrap;
}

.mobile .table-data tr th {
    white-space: pre-wrap;
}

.table-data tr td.accepted,
.table-data tr td.mobile_accepted {
    color: #4dc54d;
}

.table-data tr td.denied,
.table-data tr td.mobile_denied {
    color: red;
}

.table-data thead tr th:last-child {
    text-align: left;
}

.table-data a,
.mobile-list-table a {
    color: #fff;
    text-decoration: underline !important;
}

.permit-expend {
    cursor: pointer;
}

.permit-expend .caret {
    margin-left: 10px;
    margin-right: 10px;
}

.permit-trigger,
.permit-trigger:hover,
.permit-trigger:focus {
    color: #fff;
    line-height: 18px;
    display: inline-block;
    background: url(../images/icon_permit.png) right center no-repeat;
    height: 18px;
    width: 18px;
    vertical-align: middle;
}

.bg-transparent {
    background-color: transparent !important;
}

.table-divider {
    border-bottom: 1px dashed #fff;
}

.access-control-permit-trigger {
    padding: 0.5rem 1rem;
    margin-bottom: 20px;
    border-radius: 10px;
}

.access-control-permit-trigger.active {
    background-color: rgb(51, 102, 204);
}

.control-system-tooltip {
    display: inline-block;
    vertical-align: middle;
}

.control-system-tooltip .tooltip {
    position: relative;
    opacity: 1;
    z-index: 1000;
}

.green-tooltip {
    color: #4dc54d;
}

.red-tooltip {
    color: red;
}

.green-tooltip i,
.red-tooltip i {
    vertical-align: middle;
    margin-left: 4px;
}

.green-tooltip .tooltip.right .tooltip-arrow {
    border-right-color: #4dc54d;
}

.red-tooltip .tooltip.right .tooltip-arrow {
    border-right-color: red;
}

.green-tooltip .gate-tooltip-inner,
.red-tooltip .gate-tooltip-inner {
    background-color: #fff;
    color: #2b2e32;
    line-height: 1;
    max-width: 100%;
    padding: 3px 8px;
    text-align: center;
    border-radius: 4px;
}

.green-tooltip .gate-tooltip-inner {
    border: 1px solid #4dc54d;
}

.red-tooltip .gate-tooltip-inner {
    border: 1px solid red;
}

.red-text,
.table-data tr td.red-text,
.mobile-list-table tbody tr td.red-text {
    color: red;
}

.blue-text,
.table-data tr td.blue-text,
.mobile-list-table tbody tr td.blue-text {
    color: blue;
}

.gate-tooltip-inner .permit-trigger {
    width: auto;
    height: auto;
    background: none;
    color: #004f9f;
}

.gate-mobile-tooltip .tooltip-inner {
    padding: 0;
    background-color: transparent;
}

.pagination>li>a,
.pagination>li>span {
    border: none;
    background: none;
    color: #fff;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    color: #fff;
    text-decoration: underline !important;
    border: none;
    background: none;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    border: none;
    background: none;
    color: #fff;
}

.mobile .smart-date {
    display: none;
}

.mobile .smart-logo img {
    height: 40px;
}

.mobile .col-lg-3 .smart-box:last-child {
    margin-bottom: 25px;
}

.mobile .smart-box.m-b-10 {
    margin-bottom: 25px !important;
}

.mobile .col-lg-4:last-child .smart-box.m-b-10 {
    margin-bottom: 10px !important;
}

.mobile .site-monitors-wrap {
    height: auto;
}

.mobile .site-monitors-wrap .item {
    height: 300px;
}

.mobile.page-template-page-environment-sensors .flex-data-row .col,
.mobile.page-template-page-enertainers .flex-data-row .col,
.mobile.page-template-page-access-control-system .flex-data-row .col,
.mobile.page-template-page-gate-control-system .flex-data-row .col,
.mobile.page-template-page-smart-helmet .flex-data-row .col,
.mobile.page-template-page-digital-tracking .flex-data-row .col,
.mobile.page-template-page-vr-training .flex-data-row .col,
.mobile.page-template-page-tower-crane-warning .flex-data-row .col,
.mobile.page-template-page-tower-crane-warning-2 .flex-data-row .col,
.mobile.page-template-page-mobile-plant-alert-system .flex-data-row .col,
.mobile .mobile-margin-bottom {
    margin-bottom: 25px;
}

.mobile.page-template-page-environment-sensors .flex-data-row .col:last-child,
.mobile.page-template-page-enertainers .flex-data-row .col:last-child,
.mobile.page-template-page-access-control-system .flex-data-row .col:last-child,
.mobile.page-template-page-gate-control-system .flex-data-row .col:last-child,
.mobile.page-template-page-smart-helmet .flex-data-row .col:last-child,
.mobile.page-template-page-digital-tracking .flex-data-row .col:last-child,
.mobile.page-template-page-vr-training .flex-data-row .col:last-child,
.mobile.page-template-page-tower-crane-warning .flex-data-row .col:last-child,
.mobile.page-template-page-tower-crane-warning-2 .flex-data-row .col:last-child,
.mobile.page-template-page-mobile-plant-alert-system .flex-data-row .col:last-child {
    margin-bottom: 0;
}

.mobile .tower-crane-gif {
    margin-bottom: 25px;
}

.mobile .bim-li {
    display: none;
}

.mobile .savings-table {
    font-size: 14px;
}

.mobile .mobile-none {
    display: none;
}

.mobile .table-data .online,
.mobile .table-data .offline {
    display: block;
    width: 30px;
    height: 24px;
    text-indent: -9999px;
}

.mobile .table-data .online {
    background: url(../images/icon_sm_online.png);
}

.mobile .table-data .offline {
    background: url(../images/icon_sm_offline.png);
}

.mobile .table-data .door_close,
.mobile .table-data .door_open {
    display: block;
    width: 20px;
    height: 24px;
    text-indent: -9999px;
}

.mobile .table-data .door_close {
    background: url(../images/icon_door_close.png);
}

.mobile .table-data .door_open.red-tooltip {
    background: url(../images//icon_reddoor_open.png);
}

.mobile .table-data .door_open.green-tooltip {
    background: url(../images//icon_greendoor_open.png);
}

.mobile .smart-info-bar {
    width: 210px;
}

body.mobile {
    height: auto;
}

.mobile .smart-topbar {
    position: fixed;
    top: 0;
    z-index: 1010;
}

.mobile #smart-content {
    margin-top: 85px;
}

.mobile .control-system-tooltip {
    display: none;
}

.mobile .tooltip-inner {
    background-color: #fff;
    color: #2b2e32;
    border: 1px solid red;
}

.mobile .tooltip.top .tooltip-arrow {
    border-top-color: red;
}

.month-filter {
    display: inline;
    width: auto;
    height: 34px;
    border-radius: 4px;
    border-color: transparent;
}

.mobile-list-table {
    width: 100%;
    table-layout: fixed;
}

.table-layout-initial{
    table-layout: initial;
}

.mobile-list-table tbody tr td,
.mobile-list-table tbody tr th,
.mobile-list-table tfoot tr td,
.mobile-list-table tfoot tr th,
.mobile-list-table thead tr td,
.mobile-list-table thead tr th {
    border: none;
    color: #fff;
    padding: 0 4px;
    vertical-align: top;
    word-break: break-all;
}

.mobile-list-table.small-padding tbody tr td,
.mobile-list-table.small-padding tbody tr th,
.mobile-list-table.small-padding tfoot tr td,
.mobile-list-table.small-padding tfoot tr th,
.mobile-list-table.small-padding thead tr td,
.mobile-list-table.small-padding thead tr th {
    padding: 0;
    line-height: 24px;
}

.small-padding {
    margin: 4px 0 10px;
}

.text-grey {
    color: #252525 !important;
}

.mobile-list-table.mobile-table-gap>tbody>tr:not(:first-child)>td {
    border-top: 1px dashed #333;
}

.mobile .blue-model .modal-content {
    width: 90%;
    margin: 0 auto;
}

.mobile .mobile-list-table tbody tr td.mobile-list-order {
    width: 1.5rem;
    padding: 0;
    text-align: center;
}

.admin-info-bar {
    display: flex;
    flex-wrap: wrap;
}

.admin-info-bar .state-block {
    display: flex;
    width: 25%;
    margin: 10px 0;
    align-items: center;
}

.admin-info-bar .state-block button {
    width: 160px;
}

.js-nl {
    white-space: pre-wrap;
}

.js-nl label {
    display: block;
}

.blue-model .form-control {
    border-color: #aaa;
}

.blue-model .form-control:hover {
    border-color: #aaa;
}

.blue-model .form-control[disabled],
.blue-model .form-control[readonly],
.blue-model fieldset[disabled] .form-control {
    background-color: #bbb;
}

.date-td {
    width: 8rem;
}

.user-td {
    width: 10rem;
}

.datetime-td {
    width: 11rem;
}

.table-data tr td.low,
.table-data tr td.very_light,
.table-data tr td.light {
    color: blue;
}

.table-data tr td.high,
.table-data tr td.fever,
.table-data tr td.hard,
.table-data tr td.maximum {
    color: red;
}

.square-slider-wrap {
    --grid-big-item-margin: 20px;
    --grid-small-gap: 5px;
    --grid-big-gap: calc(var(--grid-small-gap) * 4);
    --grid-small-edge-length: 120px;
    --grid-big-edge-length: calc(var(--grid-small-edge-length) * 3 + var(--grid-small-gap) * 2 + var(--grid-big-item-margin) * 2);
    --grid-big-bg: rgb(214, 210, 190);
    --grid-small-gap-bg: rgb(82, 33, 22);
    --bolt-text-indent: 5px;
    --grid-slider-item-width: calc(var(--grid-big-edge-length) * 2 + var(--grid-big-gap));
}

#square-slider {
    position: relative;
    width: calc(var(--grid-slider-item-width) * 2 + 40px);
    margin: 0 auto;
}

.square-slider-item {
    width: var(--grid-slider-item-width);
    float: left;
}

.square-slier-item-title {
    margin-bottom: 20px;
    font-size: 20px;
    height: 30px;
    line-height: 30px;
}

.square-slier-item-title span {
    font-size: 14px;
}

.square-big4-wrap {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, var(--grid-big-edge-length));
    grid-template-rows: repeat(2, var(--grid-big-edge-length));
    gap: var(--grid-big-gap);
}

.square-big4-item {
    background: var(--grid-big-bg);
}

.square-big4-item-inner {
    display: grid;
    grid-template-columns: repeat(3, var(--grid-small-edge-length));
    grid-template-rows: repeat(3, var(--grid-small-edge-length));
    gap: var(--grid-small-gap);
    margin: var(--grid-big-item-margin);
    background: var(--grid-small-gap-bg);
}

.square-small9-item {
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--grid-big-bg);
    flex-direction: column;
    padding: 5px;
}

.square-small9-item .bolt {
    background: rgb(108, 96, 93) url(../images/icon_bolt.png) no-repeat center center;
    width: 46px;
    height: 44px;
    position: relative;
}

.square-small9-item .bolt.offline::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 14px;
    background: url(../images/icon_offline.png) no-repeat center center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.small9-tow-item {
    justify-content: space-between;
}

.small9-top-right-item .top .data {
    text-align: right;
    padding-right: var(--bolt-text-indent);
}

.small9-top-right-item .bottom .data {
    text-align: left;
    padding-left: var(--bolt-text-indent);
}

.small9-top-left-item .top .data {
    text-align: left;
    padding-left: var(--bolt-text-indent);
}

.small9-top-left-item .bottom .data {
    text-align: right;
    padding-right: var(--bolt-text-indent);
}

.small9-top-right-item .top,
.small9-top-right-item .bottom {
    flex-direction: row-reverse;
}

.square-small9-item .top,
.square-small9-item .bottom {
    display: flex;
    width: 100%;
}

.square-small9-item .top .data,
.square-small9-item .bottom .data {
    flex: 1;
    width: 50%;
    display: flex;
    flex-direction: column;
}

.square-small9-item .top .data {
    justify-content: flex-start;
}

.square-small9-item .bottom .data {
    justify-content: flex-end;
}

.square-small9-item .top .data div,
.square-small9-item .bottom .data div {
    line-height: 1;
}

.small9-center-item {
    background: var(--grid-small-gap-bg);
    font-size: 50px;
    color: #fff;
}

.green-text {
    color: #4dc54d;
}

.red-text {
    color: red;
}

#square-slider .owl-prev,
#square-slider .owl-next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    background-color: rgba(255, 255, 255, .5);
    color: #161b2e;
    z-index: 9;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#square-slider .owl-prev {
    left: -60px;
}

#square-slider .owl-next {
    right: -60px;
}

#square-slider .owl-prev.disabled,
#square-slider .owl-next.disabled,
#square-slider.disabled .owl-prev,
#square-slider.disabled .owl-next {
    display: none;
}

.mobile .square-slider-wrap {
    --grid-big-item-margin: 10px;
    --grid-small-edge-length: 110px;
    --grid-big-edge-length: calc(var(--grid-small-edge-length) * 3 + var(--grid-small-gap) * 2);
    --grid-slider-item-width: var(--grid-big-edge-length);
}

.mobile #square-slider {
    width: 100%;
    display: block;
}

.mobile .square-slier-item-title span.pull-right {
    display: none;
}

.mobile .square-big4-wrap {
    grid-template-columns: repeat(1, var(--grid-big-edge-length));
    grid-template-rows: repeat(4, var(--grid-big-edge-length));
    margin: 0 auto;
}

.mobile .square-big4-item-inner {
    margin: 0;
}

.mobile .square-slider-item:not(:first-child) .square-slier-item-title {
    margin-top: 20px;
}

.mobile .square-slider-item {
    margin: 0 auto;
    float: none;
}

.flex-sub-title {
    display: flex;
    align-items: center;
}

.type-filter-wrap {
    flex-grow: 2;
}

.type-filter {
    height: 34px;
    box-shadow: none;
    border-radius: 10px;
    border-color: #e7e7e7;
    background-color: #2b2e32;
    color: #fff;
}

.details-new {
    height: 100vh;
    background: #0e1924;
}

.sidebar-new {
    width: 320px;
    color: #fff;
    background: #000;
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    z-index: 10;
}

.sidebar-new-mini {
    width: 100px;
}

.sidebar-new-item-wrap {
    height: 980px;
    position: relative;
}

.sidebar-new-trigger {
    position: absolute;
    width: 34px;
    height: 34px;
    background: url(../images/sidebar_trigger.png) no-repeat center center;
    right: -17px;
    top: 30px;
    transition: all 0.3s ease-in-out;
    transform: rotate(180deg);
}

.sidebar-new-mini .sidebar-new-trigger {
    transform: rotate(0deg);
}

.sidebar-new-logo {
    max-height: 70px;
    margin: 15px auto;
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.7));
}

.sidebar-new-item {
    width: 320px;
    margin: 5px 0;
}

.sidebar-new-item-name {
    transition: all 0.3s ease-in-out;
}

.sidebar-new-mini .sidebar-new-item-name {
    opacity: 0;
}

.sidebar-new-item-logout {
    /* position: absolute; */
    bottom: 0;
}

.sidebar-new-item a {
    display: block;
    color: #fff;
    height: 44px;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: left;
}

.sidebar-new-item a img {
    margin-left: 30px;
    margin-right: 30px;
}

.details-new-content {
    padding: 17px 25px 0 130px;
}

.details-new-topbar {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.details-new-title {
    font-size: 16px;
    display: flex;
    align-items: center;
}

.details-new-weather {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.details-new-weather img {
    width: 50px;
    height: 50px;
}

.details-new-weather-warning-message {
    font-size: 16px;
}

.details-new-weather-temperature {
    font-size: 20px;
}

.new-smart-data-blocks {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin-top: 20px;
}

.new-smart-data-blocks .smart-data-block {
    width: 100%;
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: cover;
}

.new-smart-data-blocks .smart-data-block.new-ft-1 {
    background-image: linear-gradient(#211d28, #211d28), linear-gradient(#c6414e, #0e1924);
}

.new-smart-data-blocks .smart-data-block.new-ft-2 {
    background-image: linear-gradient(#231f27, #231f27), linear-gradient(#de533d, #0e1924);
}

.new-smart-data-blocks .smart-data-block.new-ft-3 {
    background-image: linear-gradient(#252829, #252829), linear-gradient(#ecad55, #0e1924);
}

.new-smart-data-blocks .smart-data-block.new-ft-4 {
    background-image: linear-gradient(#1a2828, #1a2828), linear-gradient(#81b04b, #0e1924);
}

.new-smart-data-blocks .smart-data-block.new-ft-5 {
    background-image: linear-gradient(#1e292f, #1e292f), linear-gradient(#3a9fc8, #0e1924);
}

.new-smart-data-blocks .smart-data-block.new-ft-6 {
    background-image: linear-gradient(#242120, #242120), linear-gradient(#eeae55, #0e1924);
}

.new-smart-data-blocks .smart-data-block.new-ft-7 {
    background-image: linear-gradient(#282021, #282021), linear-gradient(#d6523d, #0e1924);
}

.new-smart-data-blocks .smart-data-block .smart-data-block-icon {
    background-color: #0e1924;
}

.details-new-charts>div {
    margin-top: 25px;
}

.details-new-charts .smart-box-title {
    padding-top: 10px;
}

.details-new-charts .smart-box-title img {
    margin-right: 5px;
}

.details-new-more,
.details-new-more:hover {
    float: right;
    margin-right: 20px;
    color: #c9a2e9;
    text-decoration: underline !important;
    font-size: 14px;
}

.details-new-charts .smart-box {
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: cover;
    background-image: linear-gradient(#122735, #122735), linear-gradient(#3a9fc8, #0e1924);
}

.details-new-charts .smart-box-title,
.details-new-charts .smart-box-content {
    background-color: #122735;
    color: #fff;
}

.tower-crane-img a {
    display: block;
}

.tower-crane-img img {
    max-width: 100%;
    height: 391px;
    margin: 0 auto;
    display: block;
}

.ptw_ncr_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    margin-bottom: 10px;
}

.ptw_ncr_total {
    color: #3a9fc8;
    font-weight: bold;
    font-size: 20px;
}

#smart-container .details-new-charts .chart-container {
    height: 391px;
}

.details-new-data-list-item {
    color: #fff;
    margin-bottom: 15px;
}

.details-new-data-list-item-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.details-new-data-list-item-line-title {
    color: #c9a2e9;
}

.details-new-data-list-item-line .permit-trigger {
    width: auto;
    height: auto;
    background: none;
    color: #c9a2e9;
    text-decoration: underline !important;
}

.details-new-data-list-item:last-child {
    margin-bottom: 0;
}

.details-new-no-data {
    text-align: center;
    color: #fff;
}

.details-new-data-list-item .accepted {
    color: #4dc54d;
}

.details-new-data-list-item .denied {
    color: red;
}

.details-new-charts-1 .smart-box-content {
    height: 391px;
}

.details-new-charts-2 .smart-box-content {
    height: 354px;
}

.details-new-charts-1 .tower-crane-img .smart-box-content {
    height: 431px;
}

.details-new #bim-left {
    height: 431px;
}

.details-new #bim-left>img {
    width: 100%;
    height: 100%;
}

.details-new #bim-left .adsk-toolbar {
    display: none !important;
}

.mobile .mobile-mt-title.flex-sub-title {
    display: block;
}

.mobile .mobile-mt-title.sub-page-title {
    height: auto;
}

.mobile .mobile-mt-title.flex-sub-title .m-l-30 {
    margin-left: 0 !important;
}

.mobile .mobile-mt-box.m-t-62 {
    margin-top: 25px !important;
}

.mobile .details-new {
    height: auto;
}

.mobile .details-new-content {
    padding: 65px 25px 15px;
}

.mobile .details-new-charts-2 .smart-box-content {
    height: auto;
}

.mobile .details-new-topbar {
    height: auto;
    margin-top: 20px;
}

.mobile .details-new-title {
    display: none;
}

.mobile .details-new-weather {
    gap: 5px;
    flex-wrap: wrap;
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: cover;
    background-image: linear-gradient(#122735, #122735), linear-gradient(#3a9fc8, #0e1924);
    padding: 20px;
    width: 100%;
    border-radius: 10px;
}

.mobile .details-new-weather-warning-message {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}

.mobile .new-smart-data-blocks {
    margin-top: 10px;
}

.watch-summary .media-object {
    width: 50px;
}

.watch-summary .total-watches {
    color: #F7B52D;
}

.watch-summary .total-online {
    color: #2EA6DF;
}

.watch-summary .total-sos {
    color: #E50012;
}

.table-watch-data-wrap {
    height: 813px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.table-watch-data tr {
    cursor: pointer;
}

.table-watch-data img {
    width: 30px;
}

.table-data.table-watch-data tr .watch-no-thd {
    vertical-align: middle;
}

.table-data.table-watch-data tr .watch-status-thd {
    width: 80px;
    text-align: center;
    vertical-align: middle;
}

.table-data.table-watch-data tr .watch-battery-thd {
    width: 80px;
    text-align: center;
    vertical-align: middle;
}

.table-data.table-watch-data tr .watch-sos-thd {
    width: 80px;
    text-align: center;
    vertical-align: middle;
}

.table-data.table-watch-data tr .watch-details-thd {
    width: 80px;
    text-align: center;
    vertical-align: middle;
}

.table-watch-data-wrap .popover {
    max-width: fit-content;
    color: #222529;
    font-size: 16px;
    min-width: 500px;
    z-index: 1040;
}

.table-watch-data-wrap .popover.top,
.table-watch-data-wrap .popover.bottom {
    margin-top: 0;
}

.table-watch-data-wrap .popover.top>.arrow{
    border-top-color: transparent;
}

.table-watch-data-wrap .popover.top>.arrow:after {
    bottom: 3px;
}

.table-watch-data-wrap .popover.bottom>.arrow:after {
    top: 3px;
}

.watch-details-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

.watch-details-popover-title {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    flex-grow: 1;
    line-height: 25px;
}

.watch-details-popover-icons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.watch-details-popover-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 5px;
    white-space: nowrap;
    border-bottom: 2px solid #000;
}

.watch-details-popover-icon-img{
    width: 25px;
    height: 25px;
    margin-left: 15px;
}

.floor-image-wrap{
    position: relative;
}

.floor-image-img-xy{
    width: 40px;
    height: 40px;
    position: absolute;
    background: #1E67AF url(../images/icon_online2.png) no-repeat center center / cover;
    border-radius: 50%;
    background-size: 60%;
}

.floor-image-img-xy[data-toggle]{
    cursor: pointer;
}

.floor-image-img-xy .has-sos{
    width: 20px;
    height: 20px;
    position: absolute;
    left: -5px;
    top: -5px;
    border-radius: 50%;
    border: 1px solid #FE413C;
    background: #fff url(../images/icon_alert_red.png) no-repeat center 30%/ cover;
    background-size: 60%;
}

.floor-image-img-xy .nearby-watches-count{
    width: 20px;
    height: 20px;
    position: absolute;
    right: -5px;
    top: -5px;
    border-radius: 50%;
    background-color: #FF0000;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
}

.floor-image-wrap .popover{
    font-size: 16px;
    background-color: #222529;
    z-index: 1040;
}

.floor-image-wrap .popover.top>.arrow{
    border-top-color: transparent;
}

.floor-image-wrap .popover.top>.arrow:after{
    border-top-color: #222529;
}

.floor-image-wrap .popover.top>.arrow:after {
    bottom: 3px;
}

.floor-image-wrap .popover-wrap{
    display: flex;
    height: 24px;
    line-height: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.floor-image-wrap .popover-now{
    color: #4AD967;
}

.floor-image-wrap .popover-wrap .popover-sos{
    width: 20px;
    height: 20px;
    background: url(../images/icon_alert_red.png) no-repeat center center / cover;
}

.mobile .table-watch-data.mobile-list-table img{
    width: 24px;
    display: block;
}

.mobile .table-watch-data-wrap{
    height: auto;
}

.mobile .table-watch-data-wrap .popover{
    min-width: 100%;
}

.risk-item{
    height: 40px;
    padding-left: 60px;
    margin-left: 20px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

.risk-safety{
    background-image: url(../images/risk-safety.png);
}

.risk-quality{
    background-image: url(../images/risk-quality.png);
}

.risk-contract{
    background-image: url(../images/risk-contract.png);
}

.risk-square{
    width: 40px;
    height: 40px;
}

.risk-red{
    background: #ff0000;
}

.risk-yellow{
    background: #ffff00;
}

.risk-green{
    background: #015421;
}

.risk-na{
    background: #fff;
    position: relative;
}

.risk-na::after{
    content: 'N/A';
    color: #000;
    /* 水平垂直居中 */
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 40px;
}

.risk-item .tooltip-inner{
    font-size: 14px;
    color: #2b2e32;
    background-color: #fff;
    max-width: fit-content;
}

.risk-item .risk-red + .tooltip .tooltip-inner{
    border: 1px solid #ff0000;
}

.risk-item .risk-yellow + .tooltip .tooltip-inner{
    border: 1px solid #ffff00;
}

.risk-item .risk-green + .tooltip .tooltip-inner{
    border: 1px solid #015421;
}

.risk-item .risk-na + .tooltip .tooltip-inner{
    border: 1px solid #fff;
}

.risk-item .risk-red + .tooltip.bottom .tooltip-arrow{
    border-bottom-color:#ff0000;
}

.risk-item .risk-yellow + .tooltip.bottom .tooltip-arrow{
    border-bottom-color: #ffff00;
}

.risk-item .risk-green + .tooltip.bottom .tooltip-arrow{
    border-bottom-color: #015421;
}

.risk-item .risk-na + .tooltip.bottom .tooltip-arrow{
    border-bottom-color: #fff;
}

.mobile-marquee-block .mobile-risk-management{
    display: flex;
    justify-content: space-around;
    padding: 23px 0;
}

.mobile-marquee-block .mobile-risk-management .risk-item{
    margin-left: 0;
}

.ilogic-whitelist{
    background: url(../images/ilogic-whitelist.png) no-repeat right 4px / 18px 18px;
    padding-right: 26px;
    display: inline-block;
}
.details-new-data-list-item-line .ilogic-whitelist{
    background-position-y: 2px;
}

.lift-shaft-light{
    width: 20px;
    height: 20px;
}
.lift-img-td{
    width: 3rem;
}
#lift-shaft-img-wrap{
    background-color: #fff;
    padding: 20px;
    margin: 0 20px;
    position: relative;
    height: 865px;
    overflow: hidden;
}
#lift-shaft-img{
    height: 100%;
}
#lift-shaft-door{
    width: 150px;
    height: 161px;
    position: absolute;
    display: none;
    transition: all 0.3s ease-out;
}
#lift-shaft-info{
    position: absolute;
    color: #000;
    font-size: 16px;
    display: flex;
    line-height: 20px;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100px;
    visibility: hidden;
    transition: all 0.3s ease-out;
}
.dahua-td{
    width: 61px;
}
.dahua-td-link{
    float: left;
    margin-right: 5px;
}
tbody td .dahua-td-link:last-child{
    margin-right: 0;
}
.dahua-icon{
    width: 20px;
    height: 20px;
}