div.wheel-card /******** layout.html ********/
.md-card.layout-vehicle-detail {
    margin-top: 0px;
}

/******** Vehicle List ********/
.md-card-toolbar.vehicle-list-title {
    background-color: var(--main);
}

.md-card-content.content-tracking {
    padding: 0px;
}

#search-tracking {
    display: block;
    padding: 5px;
}

.toggle-arrow-white>i {
    color: #fff;
}

/*#overflow-y-vehicle-list>.md-card-content.uk-accordion-title {
    background: #ffffff;
    border-bottom: 1px solid var(--mainBorderColor);
    margin: 0;
    height: 32px;
    line-height: 32px;
}*/

.accordian-vehicle-list {
    padding: 0 0 0px 0;
}

#running-status {
    /*min-height: 60px;*/
    width: 65px;
    padding-left: 10px;
}

.running-status-detail {
    gap: 3px;
    display: flex;
    flex-direction: column;
}

    .running-status-detail > * > * {
        display: block;
    }

.md-card .md-card-content .speed-tracking {
    padding: 0px;
    margin-top: 10px;
}

.accordian-vehicle-list ul {
    margin: 10px 0px;
}

li.tracking-li-vehicle, div.tracking-li-vehicle {
    border-bottom: 0px;
}

    li.tracking-li-vehicle.smallIcon, div.tracking-li-vehicle.smallIcon {
        min-height: 30px;
        border: none;
        cursor: pointer;
    }

li.tracking-li-vehicle, div.tracking-li-vehicle {
    min-height: 60px;
    /*padding-top: 10px;*/
    border: none;
    cursor: pointer;
    padding: 0px;
    /*padding: 4px 0px;*/
    margin: 0px 16px 10px;
}

.md-list > li.tracking-li-vehicle:last-child {
    margin-bottom: 10px;
}

li.tracking-li-vehicle div.md-list-addon-element.tracking-icon, div.tracking-li-vehicle div.md-list-addon-element.tracking-icon {
    padding-top: 0px;
}

li.tracking-li-vehicle.smallIcon div.md-list-addon-element.tracking-icon div.speed-tracking div, div.tracking-li-vehicle.smallIcon div.md-list-addon-element.tracking-icon div.speed-tracking div {
    font-size: 14px;
}

li.tracking-list-user-location {
    min-height: 40px;
    cursor: pointer;
}

    li.tracking-list-user-location > * > .md-list-addon-element {
        border-left: 4px solid #FFF;
    }

    li.tracking-list-user-location.selected > * > .md-list-addon-element {
        border-left-color: #1E88E5;
    }

li.tracking-list-map-location {
    border-left: 4px solid #FFF;
}

    li.tracking-list-map-location.selected {
        border-left-color: #1E88E5;
    }

li.tracking-list-user-location p {
    width: 100%;
    margin: 0px;
    display: inline-block;
}

.location-type-color-green {
    color: #33cc33;
}

.location-type-color-yellow {
    color: #f9d300;
}

.location-type-color-red {
    color: red;
}

.location-type-color-blue {
    color: blue;
}

ul.list-user-location li.selected {
    border-left: 4px solid #1E88E5;
}

.md-list-addon-element.tracking-parking>i {
    padding-top: 0px;
    margin-top: 0px;
}


input#search-car {
    padding: 12px 4px 0px 4px;
}

span.countUpMe.ng-binding {
    color: #757575;
}

.speed-tracking .epc_chart>canvas {
    width: 52px !important;
    height: 52px !important;
}

.icon-outofservice {
    color:#727272; 
    font-size: 35px !important;
    padding-left: 3px;
}

i.icon-sensor {
    margin-bottom: 0px;
    font-size: 18px;
    position: relative;
    top: 1px;
}

.icon-sensor {
    width: 15px;
    height: 15px;
    margin-bottom: 2px !important;
}

.icon-sensor-big {
    width: 18px;
    height: 18px;
    margin-top: -5px;
}

.icon-sensor-large {
    width: 24px;
    height: 24px;
}


.material-icons.icon-18-px {
    font-size: 18px;
}

.search-input {
    border-width: 0px;
    border-bottom-width: 1px;
    color: #757575;
    font-size: 15px;
    width: 100%;
}

.tracking-icon {
    border-left-style: solid;
    border-left-width: 4px;
    border-left-color: #FFFFFF;
}

    .tracking-icon.selected {
        border-left-color: var(--main);
    }

.search-status-label {
    display: inline-block;
    font-size: 14px;
    width: 50px;
    color: #757575;
}

.search-status-input {
    width: calc(100% - 55px);
    color: #757575;
}

ul.uk-dropdown-scrollable > li.uk-active > a {
    background: rgba(0,0,0,.085);
}

.vehicle-list-search {
    position: absolute;
    z-index: 20;
    right: 0px;
    /*left: 0px;*/
    text-align: right;
    width: calc(60%);
}

    .vehicle-list-search.has-setting {
        right: 40px;
    }

    .vehicle-list-search.active {
        z-index: 40;
    }

    .vehicle-list-search i.search-close {
        color: #FFFFFF;
        position: absolute;
        top: 12px;
        right: 5px;
        display: none;
        cursor: pointer;
    }

        .vehicle-list-search i.search-close.active {
            display: block !important;
        }

    .vehicle-list-search input.list-search-input {
        width: 15px;
        box-sizing: border-box;
        border: none;
        font-size: 14px;
        background: rgba(255, 255, 255, 0) url('../img/vehiclesStatus/searchIcon.png') no-repeat right center/30px;
        padding: 12px 25px 12px 12px;
        -moz-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        -webkit-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        height: 49px;
        color: #fff;
        border-radius: 12px;
        cursor: pointer;
    }

    .vehicle-list-search.active input.list-search-input {
        padding: 0px;
        padding-left: 30px;
        width: 100%;
        cursor: text;
        background: url('../img/vehiclesStatus/searchIcon.png') no-repeat;
        background-size: 30px 30px;
        background-position-y: center;
        background-color: var(--mainSub1);
        border: 4px solid var(--main);
    }

#vehicle-setting-search {
    position: absolute;
    z-index: 20;
    right: 10px;
    height: 49px;
}

.placeholder-white::-webkit-input-placeholder {
    color: #fff;
}

.placeholder-white::-moz-placeholder {
    color: #fff;
}

.placeholder-white:-moz-placeholder {
    color: #fff;
}

.placeholder-white:-ms-input-placeholder {
    color: #fff;
}

.none-padding.uk-grid > * {
    padding: 0px;
}

.listSettingDisplay {
    padding: 0px 5px 5px 15px;
}

#list-setting-reset-button {
    position: absolute;
    right: 15px;
    padding: 0px 7px;
    min-height: 25px;
}

    #list-setting-reset-button > i {
        font-size: 18px;
    }

.status-absolute-right {
    position: absolute;
    right: 0;
}

.hide-search-label > .md-input-filled > label, .hide-search-label > .md-input-focus > label {
    display: none;
}

.selectize-text-overflow .selectize-control.single .selectize-input {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px 20px 9px 8px;
}

#list-map-location-header i {
    color: #fff;
}

/******** Map Vehicle Detail ********/

.detail-vehicle-map {
    background-color: #fff;
    position: absolute;
    z-index: 5;
    margin-left: 10px;
    line-height: 20px;
    bottom: 10px
}

    .detail-vehicle-map label {
        font-size: var(--fontSmall);
        line-height: 22px;
    }

    .detail-vehicle-map i, .detail-vehicle-map span, .vehicle-list-of-status-icon i {
        font-size: 18px;
        cursor: default;
    }

    .detail-vehicle-map div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 0px;
    }

/******** Vehicle Detail ********/

#tracking-place-panel2 {
    background-color: #1E88E5;
}

    #tracking-place-panel2 > div > h3 {
        color: #fff;
        margin: 0px;
        /*font-weight: lighter;*/
    }

#tracking-information-panel2 > div > h3,
#tracking-status-panel2 > div > h3 {
    font-weight: normal;
    color: #727272;
}

#tracking-parking-panel,
#tracking-outofservice-panel {
    /*border-bottom: 1px solid var(--mainBorderColor);*/
    padding: 0px;
}

.detail-info {
    display: inline-table;
    width: 100%;
}

.detail-info-cell {
    display: inline-table;
    float: left;
    width: 50%;
    margin-top: 0px;
}

    .detail-info-cell > h5 {
        display: initial;
        margin: 0px;
        font-weight: normal;
        color: #727272;
    }

.detail-info-cell-letter {
    display: initial;
}

    .detail-info-cell-letter > h5 {
        display: initial;
        margin: 0px;
        font-weight: normal;
        color: #727272;
    }

    .detail-info-cell-letter > h6 {
        display: block;
        font-weight: lighter;
        color: #727272;
        margin: 0px;
    }

.detail-info-icon {
    padding-top: 10px;
}

    .detail-info-icon i {
        font-size: 30px;
    }

.detail-status-icon {
    padding-top: 3px;
}

    .detail-status-icon i {
        font-size: 30px;
    }

/******** Layout Overflow ********/
.tracking_block {
    position: relative;
    height: calc(100vh - 48px); height: calc(100svh - 48px);
}
.has_breadcrumb .tracking_block {
    height: calc(100vh - 88px); height: calc(100svh - 88px);
}
    .has_breadcrumb .tracking_block.hasPadding {
        height: calc(100vh - 128px); height: calc(100svh - 128px);
    }
    .has_breadcrumb .tracking_block.hasPadding div.MEA_block_tracking {
        height: 100%;
    }

.has_breadcrumb > #page_content:has(> div.bus_actionbutton_tab) .tracking_block,
.has_breadcrumb > div > #page_content:has(> div.bus_actionbutton_tab) .tracking_block {
    height: calc(100vh - 128px); height: calc(100svh - 128px);
}

@media only screen and (max-width: 767px) {
    .tracking_block {
        height: calc(100vh - 0px); height: calc(100svh - 0px);
    }
    .has_breadcrumb .tracking_block {
        height: calc(100vh - 88px); height: calc(100svh - 88px);
    }
        .has_breadcrumb .tracking_block.hasPadding {
            height: calc(100vh - 88px);height: calc(100svh - 88px);
        }
}

.tracking_block > div {
    position: relative;
    height: 100%;
}
    .tracking_block .fullBlock {
        position: relative;
        height: 100%;
        width: 100%;
    }
    .tracking_block > div > div.mainLayout {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

.relativeBlock {
    position: relative;
    width: 100%;
    height: 100%;
}

.relative100 {
    position: relative;
    height: 100%;
}

.vehicle-list-side {
    height: 100%;
    width: 100%;
}

.overflow-y-vehicle-list {
    height: calc(100% - 30px);
    margin-top: 0px;
    max-height: none;
    border-radius: 0px;
}

    .overflow-y-vehicle-list > .md-card-content {
        height: calc(100% - 60px);
        overflow-y: auto;  position: relative;
        margin-top: 0px;
    }

.overflow-y-vehicle-search {
    height: 100%;
    margin-top: 0px;
    max-height: none;
    border-radius: 0px;
}

    .overflow-y-vehicle-search > .md-card-content {
        height: calc(100% - 192px);
        overflow: hidden;
        margin-top: 0px;
        box-sizing: border-box;
        padding: 0px;
    }

#overflow-y-map {
    /*height: calc(100% - 50px);*/
    /*overflow-y: auto;  position: relative;*/
    height: 100%;
    position: relative;
    padding: 0px;
}
    #overflow-y-map > ul {
        height: 100%;
    }
        #overflow-y-map > ul > li {
            height: 100%;
            overflow-y: auto;  position: relative;
            overflow-x: hidden;
            position: relative;
        }
            #overflow-y-map > ul > li.hidden {
                height: 0px;
            }
            #overflow-y-map > ul > li > div.map-layout-view {
                height: 100%;
            }

@media only screen and (max-width: 767px) {
    #overflow-y-map {
        padding: 0px 0px 0px 10px;
    }
}

/******** Tool ********/

#map-icon-close.hide {
    display: none;
}

#map-icon-close {
    display: block;
}

#tool-progress-loading {
    width: 100%;
    display: inline-table;
    background: #ddd;
    border-radius: 4px;
    height: 10px;
    line-height: 10px;
    margin-bottom: 10px;
}

#tool-progress-loading-pic {
    width: 0%;
    background: var(--main);
}

#tool-take-a-pic {
    /*float: right;*/
    /*background: #1E88E5; */
}

#tool-show-image {
    width: 100%;
    /*height: 100%;*/
    margin: auto;
}

#tool-show-image-out {
    /*height: 100%;*/
    width: calc(100% + 30px);
    background: #ddd;
    margin: 10px -15px 0px;
    display: none;
}

#tool-image-info {
    display: none;
}

.tool-set-command {
    margin-left: 8px;
}

.tool-button-comment {
    margin-top: 5px;
    display: flex;
    flex-direction: row;
}

#tool-print-picture {
    display: flex;
    height: 35px;
    width: 70px;
}

#tool-rotate-picture {
    display: flex;
    height: 35px;
    width: 70px;
    /*margin-right: 10px;*/
}

.tracking-li-vehicle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.next-station-box .detail-location {
    column-gap: 5px;
}

#control-engine-header {
    display: inline-block;
    margin: 0px;
}

#control-engine-loading {
    position: relative;
    top: -4px;
    display: inline-block;
}

/******** Card Reader ********/ f

.card-2-column {
    display: inline-block;
    width: 50%
}

.map-detail-small {
    max-width: 300px;
    width: 80% !important;
}

.map-detail {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: #fff;
    border-radius: 5px;
    padding: 5px;
    width: 300px;
}

.detail-margin-top {
    margin-top: 5px;
}

.detail-margin-bottom {
    margin-bottom: 5px;
}

#tabTracking > li.uk-active > a {
    border-bottom-color: #ffffff;
}

#tabTracking > li > a, #tabTracking > li > a::before {
    color: #ffffff;
}

.tracking-detail-header {
    background: rgba(153,153,153,.2);
    border-radius: 0;
    border: none;
    margin: 0 0 4px;
    font-size: var(--fontMediem);
    font-weight: 400;
    padding: 8px 24px 8px 16px;
}

.tracking-detail-header-loading {
    position: relative;
    top: -5px;
    height: 30px;
}

.tracking-detail-header-block {
    min-height: 150px;
}

.tracking-detail-tab-small {
    max-width: 100px;
}

.uk-tab > li > a {
    text-shadow: 0 0px 0 #fff;
}

.map-auto-tracking-icon {
    background: #43a047 !important;
}

    .map-auto-tracking-icon i {
        color: #FFFFFF !important;
    }


/*searchNear*/
.list_searchNear div.md-list-action-dropdown {
    width: 90px;
    text-align: right;
}

    .list_searchNear div.md-list-action-dropdown i {
        position: relative;
        top: -3px;
    }

.list_searchNear div.md-list-content {
    width: calc(100% - 90px);
}

.tracking-header {
    max-width: calc(100% - 420px);
}

@media only screen and (max-width: 767px) {
    .tracking-header {
        max-width: calc(100% - 160px)
    }
}

@media only screen and (max-width: 960px) {
    .tracking-header {
        max-width: calc(100% - 160px)
    }
}

h3.tracking-detail-header.uk-accordion-title {
    pointer-events: none;
}

    h3.tracking-detail-header.uk-accordion-title::after, h3.tracking-detail-header.uk-accordion-title:after {
        display: none;
    }

    h3.tracking-detail-header.uk-accordion-title.smallScreen {
        pointer-events: auto;
    }

        h3.tracking-detail-header.uk-accordion-title.smallScreen::after, h3.tracking-detail-header.uk-accordion-title.smallScreen:after {
            display: block;
        }

    h3.tracking-detail-header.uk-accordion-title:not(.smallScreen) + div {
        height: auto !important;
    }

div.wheel-card {
    /*height: 80px;*/
    border: 2px solid #ddd;
    border-radius: var(--mainBorderRadius);
    margin: 2px;
    /*width: calc(50% - 4px);*/
    /*padding: 5px 5px 5px 0px;*/
    padding: 5px 0px;
    height: max-content;
    width: 95px;
    text-align: center;
    background-color: #fff;
}

    div.wheel-card.wheel-card-setting {
        width: 120px;
        padding: 5px;
    }

    div.wheel-card div.wheel-icon, div.wheel-card div.wheel-detail {
        display: inline-block;
    }

    div.wheel-card div.wheel-icon {
        width: 70px;
    }

    div.wheel-card div.wheel-detail {
        /*width: calc(100% - 75px);*/
        text-align: center;
    }

        div.wheel-card div.wheel-detail div i {
            font-size: 14px !important;
            top: 0px
        }

        div.wheel-card div.wheel-detail div {
            margin-top: 3px;
            min-width: 70px;
        }

            div.wheel-card div.wheel-detail div label.detail {
                width: 14px;
                display: inline-block;
            }

    div.wheel-card div.wheel-icon i, i.main-wheel {
        top: 8px;
        font-size: 50px;
    }

i.rotate {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

i.fas.fa-ring.rotate {
    left: -1px;
}

.positionTire4LF {
    position: absolute;
    top: 5%;
    left: 5%;
}

.positionTire4RF {
    position: absolute;
    top: 5%;
    right: 5%;
}

.positionTire4LR {
    position: absolute;
    /*bottom: 5%;*/
    left: 5%;
    top: calc(5% + 80px);
}

.positionTire4RR {
    position: absolute;
    /*bottom: 5%;*/
    right: 5%;
    top: calc(5% + 80px);
}

.positionTire6ALF {
    position: absolute;
    top: 5%;
    left: 5%;
}

.positionTire6ARF {
    position: absolute;
    top: 5%;
    right: 5%;
}

.positionTire6A1LR {
    position: absolute;
    bottom: 35%;
    left: 5%;
}

.positionTire6A1RR {
    position: absolute;
    bottom: 35%;
    right: 5%;
}

.positionTire6A2LR {
    position: absolute;
    bottom: 5%;
    left: 5%;
}

.positionTire6A2RR {
    position: absolute;
    bottom: 5%;
    right: 5%;
}

.wheel_main_svg {
    width: calc(80%);
    padding: 0px;
    left: 10%;
    position: relative;
}

div.wheel_main_svg rect.wheel_status_warning {
    fill: orange;
}

div.wheel_main_svg polyline.wheel_status_warning {
    stroke: orange;
}

div.wheel_main_svg rect.wheel_status_danger {
    fill: red;
}

div.wheel_main_svg rect.wheel_status_normal {
    fill: #43a047;
}

div.wheel_main_svg polyline.wheel_status_danger {
    stroke: red;
}

div.wheel_main_svg polyline.wheel_status_normal {
    stroke: #43a047;
}

.wheel_status {
    color: #43a047
}

.wheel_status_warning, div.wheel_status_warning i {
    color: orange !important;
}

.wheel_status_danger, div.wheel_status_danger i {
    color: red;
}

div.wheel_status_normal, div.wheel_status_normal i {
    color: #43a047;
}

@keyframes wheel_hideshow {
    0% {
        opacity: 1;
    }
    /*50% {
        opacity: 1;
    }*/
    100% {
        opacity: 0.5;
    }
}

.wheel_hideshow {
    animation: wheel_hideshow 1s ease infinite;
}
/*JJ*/
div.epc_orders_green, div.epc_orders_green span {
    color: #388E3C;
    font-weight: bold;
}

div.epc_orders_yellow, div.epc_orders_yellow span {
    color: #D7DF01;
    font-weight: bold;
}

div.epc_orders_red, div.epc_orders_red span {
    color: #D50000;
    font-weight: bold;
}

div.tracking-icon.smallIcon {
    padding: 0px;
    top: 0px !important;
}

    div.tracking-icon.smallIcon i {
        font-size: 25px !important
    }

.tracking-parkingStartEngineTime, .tracking-parkingStartEngineTime i {
    color: #b2a42c;
    font-weight: 500;
}

.nav-vehicle-filter li a {
    font-size: var(--fontSmall);
}

.uk-nestable-panel .vehicle-filter {
    padding: 0px 8px 0px;
    border-bottom: 1px solid #ddd;
}

    .uk-nestable-panel .vehicle-filter .icon {
        display: inline-block;
        width: 115px;
        vertical-align: bottom;
        padding-bottom: 10px;
    }

    .uk-nestable-panel .vehicle-filter .selection {
        display: inline-block;
        width: calc(100% - 240px);
        position: relative;
    }

div.mediaForJC200-button a.md-fab.md-fab-small {
    padding: 10px;
    display: inline-block;
}

.tracking-ONTrip-border {
    border: 1px solid #43a047;
    border-radius: var(--mainBorderRadius);
    padding: 10px !important;
}

.tracking-ONTrip, .tracking-ONTrip i {
    color: #43a047;
    font-size: 16px;
}

.uk-nestable-panel .vehicle-filter-trip {
    padding: 0px 8px 0px;
    border-bottom: 1px solid #ddd;
}

    .uk-nestable-panel .vehicle-filter-trip .icon {
        display: inline-block;
        width: 25px;
        vertical-align: bottom;
        padding-bottom: 10px;
    }

    .uk-nestable-panel .vehicle-filter-trip .selection {
        display: inline-block;
        width: calc(100% - 30px);
        position: relative;
    }

.overflow-y-trip-list > .md-card-content {
    height: calc(100vh - 265px);
    overflow-y: auto;  position: relative;
    margin-top: 0px;
    overflow-x: hidden;
}

.overflow-y-trip-list.full > .md-card-content {
    height: calc(100vh - 215px);
    overflow-y: auto;  position: relative;
    margin-top: 0px;
}

.overflow-y-trip-list {
    height: calc(100vh - 130px);
    margin-top: 0px;
    max-height: none;
}

    .overflow-y-trip-list.full {
        height: calc(100vh - 80px);
        margin-top: 0px;
        max-height: none;
    }

/*tracking-mixing-mortar*/
.uk-space-nowrap {
    white-space: nowrap !important;
}

.popupslider i.material-icons {
    font-size: 18px;
}

.leaflet-popup-content .leaflet-popup-vehicle {
    color: #636363;
}

.leaflet-popup-vehicle i {
    font-size: 20px;
}

.icon-sensorIcomoon i, i.sensorIcomoon {
    font-size: 15px !important;
    position: relative;
    top: -1px;
    vertical-align: text-bottom;
}

.vehicle-runing {
    color: #4caf50 !important;
}

.vehicle-parkingEngineOn {
    color: #ddc91b !important;
}

.vehicle-parkingEngineOff {
    color: #f44336 !important;
}

.vehicle-linkDown {
    color: #9e9e9e !important;
}

.vehicle-outOfService {
    color: #454343 !important;
}

.vehicle-overSpeed {
    color: #ff9100 !important;
}

.vehicle-camera {
    color: #39f !important;
}

.icon-sensorFont {
    font-size: 14px !important;
}

.button-in-vehicle-detail {
    margin-left: 0px !important;
    text-align: left;
    margin-top: 4px;
}

    .button-in-vehicle-detail md-preloader {
        margin-top: 3px;
    }

.text-vehicle-running {
    color: #249733 !important;
}

.text-vehicle-parkingEngineOn {
    color: #f5c70a !important;
}

.text-vehicle-parkingEngineOff {
    color: #FF9371 !important;
}

.text-vehicle-powerSave {
    color: #02CC96 !important;
}

.text-vehicle-overspeed {
    color: #D50000 !important;
}

.text-vehicle-other {
    color: #6d6d6d;
}

.tracking-vehicleDetail {
    font-size: 12px;
    font-weight: 600;
}

.icon-locationLBS {
    /*color: #ff9100 !important;*/
    color: rgb(255, 127, 0) !important;
}

.icon-locationGPS {
    /*color: #43a047 !important;*/
    color: rgb(76, 175, 80) !important;
}

.icon-locationWifi {
    /*color: #1976d2 !important;*/
    color: rgb(255, 205, 0) !important;
}

iframe#jc400_livepreview div.col-sm-4.p-lr0 {
    display: none;
}


iframe#jc400_livepreview {
    /*width: 72%;
    max-width: 850px;
    min-height: 400px;
    max-height: 600px;*/
    overflow: hidden;
}

#main_iframe_jc400_livepreview {
    transform-origin: left center;
    min-width: fit-content;
    max-width: fit-content;
    width: max-content;
}


.md-fab-small a.md-fab, .md-fab-small a.md-fab i {
    font-size: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    line-height: 48px;
}

div.md-fab-small.md-fab-speed-dial .md-fab-wrapper-small {
    position: absolute;
    bottom: 60px;
    right: 0px;
    min-height: 0px !important;
    height: 0px;
    width: 48px;
    z-index: -1;
    margin-bottom: 48px;
}

    div.md-fab-small.md-fab-speed-dial .md-fab-wrapper-small .md-fab-small:nth-last-child(2) {
        bottom: 10px;
    }

    div.md-fab-small.md-fab-speed-dial .md-fab-wrapper-small .md-fab-small:nth-last-child(3) {
        bottom: 70px;
    }

.padding24 {
    padding: 24px 24px 24px 24px !important;
}

#modal_jc400_eventVideo_preview {
    width: 100%;
}

.blocker {
    z-index: 1204 !important;
    padding: 10px 0px !important;
}

/*#modal_jc400_eventVideo {
    max-width: 854px;
}*/

#trackingMixingMortarDivD div.webui-popover {
    top: -160px !important;
    left: 180px !important;
}


#tabTracking {
    margin-top: 2px;
}

.tms-disable {
    pointer-events: none;
    opacity: 0.7;
}

.forter-border {
    border-top: 1px solid #ddd;
}

.k-timepicker, .k-datepicker {
    min-width: 160px;
}

    .k-timepicker .k-picker-wrap, .k-datepicker .k-picker-wrap {
        height: 40px;
    }

input.k-timepicker, input.k-datepicker {
    display: inline !important;
    padding: 10px 10px 2px 10px !important;
    border: 0px !important;
    height: 30px;
}

.k-rtl input.k-timepicker, .k-rtl input.k-datepicker {
    margin-left: 22px !important;
    font-size: 12px !important;
}

.k-rtl span.k-select {
    margin-top: 0px !important;
    left: 0px;
}

.uk-visible {
    visibility: hidden;
}

.formPlan-body {
    overflow-y: auto;  position: relative;
    overflow-x: hidden;
}

div.timeline_icon.awesome {
    background: none;
    top: 2px;
    border: 0px;
    left: -54px;
}

    div.timeline_icon.awesome div.timeline_date {
        background: white;
        line-height: 15px;
        min-width: 50px;
        /*margin-top: 25px;*/
        /*margin-left: -10px;*/
    }

div.timeline_icon.button {
    width: 60px;
    padding: 0px 5px;
    min-width: 0px;
    white-space: nowrap;
    background: none;
    left: -60px;
    top: 0px;
}

.timeline.dashed:before {
    position: absolute;
    left: 29px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: none !important;
    content: '';
    display: block;
    border: 2px dashed #e0e2e1;
}

.timeline_content_tms {
    box-shadow: none;
    max-width: 100%;
    margin: 5px;
    padding: 5px 5px;
    border-radius: var(--mainBorderRadius);
    border: solid 1px var(--mainBorder2);
    background-color: #ffffff;
}

    .timeline_content_tms div {
        line-height: 22px;
    }

i.uk-text-medium {
    font-size: 20px !important
}

.uk-text-smaller {
    font-size: var(--fontSmall);
}

.uk-text-smallest {
    font-size: var(--fontSmallx);
}

i.uk-text-smaller, i.icon-smaller {
    font-size: 14px;
}

.uk-badge.badge-radius {
    border-radius: 50px;
    padding: 3px 8px;
}

.form_createTrip .uk-form-row {
    margin-top: 5px;
}

div.md-list-addon-element.tms-icon {
    font-weight: bold;
    font-size: 24px;
    padding-left: 5px;
    padding-top: 15px !important;
    display: flex;
    justify-content: center;
}

    div.md-list-addon-element.tms-icon div.tms-icon-border {
        border: 2px solid #c2c2c2;
        border-radius: 50%;
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        div.md-list-addon-element.tms-icon div.tms-icon-border i {
            font-size: 24px;
        }

.tms-list-header div.tms-list-action {
    width: 35px;
    position: absolute;
    top: 4px;
}

    .tms-list-header div.tms-list-action div.uk-dropdown {
        top: 32px !important;
    }


div.tms-list-header div.trip-title {
    width: calc(100% - 150px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.tms-list-header div.trip-status {
    width: 145px;
}

    div.tms-list-header div.trip-status.hasAction {
        width: 120px !important;
    }

.tms-list-detail {
    width: calc(100% - 100px);
}

.uk-text-white {
    color: #ffffff !important;
}

.icon-marker-number {
    width: 20px;
    text-align: center;
    display: inline-block;
}

    .icon-marker-number i.fas {
        font-size: 28px;
    }

    .icon-marker-number span {
        position: absolute;
        top: 2px;
        left: 7px;
        text-align: center;
        width: 30px;
        font-size: 12px;
    }

.icon-markerSmall-number {
    width: 20px;
    text-align: center;
    display: inline-block;
    position: relative;
}

    .icon-markerSmall-number i.fas {
        font-size: 18px;
    }

    .icon-markerSmall-number span {
        position: absolute;
        top: 1px;
        left: 0px;
        text-align: center;
        width: 20px;
        font-size: 8px;
    }

.tms-trip-status-initial, .tms-node-status-initial {
    background: #FFD600 !important;
}

.tms-trip-status-start, .tms-node-status-start {
    background: #183F88 !important;
}

.tms-trip-status-success {
    background: #00CC00 !important;
}

.tms-node-status-arrive {
    background: #00CC00 !important;
}

.tms-trip-status-complete, .tms-node-status-success {
    background: #249733 !important;
}

.tms-trip-status-cancel, .tms-node-status-na {
    background: #747474 !important;
}

i.tms-node-status-initial {
    background: none !important;
    color: #FFD600 !important;
}

i.tms-node-status-start {
    background: none !important;
    color: #183F88 !important;
}

i.tms-node-status-arrive {
    background: none !important;
    color: #00CC00 !important;
}

i.tms-node-status-success {
    background: none !important;
    color: #249733 !important;
}

i.tms-node-status-na {
    background: none !important;
    color: #747474 !important;
}

div.tms-route-summary {
    width: 100px;
    padding: 0px;
}

    div.tms-route-summary div.pricing_table_price {
        margin-bottom: 0px !important;
        padding-top: 0px !important;
        font-size: 0px !important;
    }

        div.tms-route-summary div.pricing_table_price i {
            font-size: 16px;
            margin-right: 10px;
        }

        div.tms-route-summary div.pricing_table_price span.node-current {
            font-size: 24px !important;
            color: #007aff !important;
            font-weight: 500;
        }

        div.tms-route-summary div.pricing_table_price span.node-all {
            font-size: 18px !important;
            color: #bbbbbb !important;
        }

        div.tms-route-summary div.pricing_table_price span.node-unit {
            font-size: 11px !important;
            color: #bbbbbb !important;
            padding-top: 0px !important;
        }

.tms-border-card {
    border-right: 10px solid #eaecefbf;
}


.tms_form_addProduct div i.md-list-addon-icon.fas {
    font-size: 20px !important;
}

.tms_form_addProduct div i.md-list-addon-icon.material-icons {
    font-size: 24px !important;
}


.tms-list-detail-info div i {
    width: 22px;
}

.uk-border-bottom {
    border-bottom: 1px solid #ddd;
}

.tms-product-status-Initial {
    background: #FFD600 !important;
    color: #FFFFFF !important;
}

i.tms-product-status-Initial {
    background: none !important;
    color: #FFD600 !important;
}

.tms-product-status-OnTheWay {
    background: #2C8ADE !important;
    color: #FFFFFF !important;
}

i.tms-product-status-OnTheWay {
    background: none !important;
    color: #2C8ADE !important;
}

.tms-product-status-Delivering {
    background: #183F88 !important;
    color: #FFFFFF !important;
}

i.tms-product-status-Delivering {
    background: none !important;
    color: #183F88 !important;
}

.tms-product-status-Completed {
    background: #249733 !important;
    color: #FFFFFF !important;
}

i.tms-product-status-Completed {
    background: none !important;
    color: #249733 !important;
}

.tms-product-status-Incomplete {
    background: #FF5050 !important;
    color: #FFFFFF !important;
}

i.tms-product-status-Incomplete {
    background: none !important;
    color: #FF5050 !important;
}

.productList-detail div {
    font-size: var(--fontSmall) !important;
    line-height: 20px;
}

    .productList-detail div span.productList-header {
        color: #747474 !important;
    }

.tms-dashboard-block {
    display: flex;
    min-height: 60px;
    background: #f5f5f5;
    border: 2px solid #f5f5f5 !important;
    border-radius: 4px !important;
    display: flex;
    align-items: center;
}

    .tms-dashboard-block div.icon {
        padding: 15px 10px 15px 10px;
        width: 46px;
    }

        .tms-dashboard-block div.icon i {
            font-size: 28px;
        }

    .tms-dashboard-block div.detail {
        width: calc(100% - 46px);
    }

.tms-loadingMore {
    text-align: center;
    margin-left: 20px !important;
    border: 2px solid #ebebeb;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom: 2px solid #ebebeb !important;
    margin-top: 1px !important;
}

.tms-product-icon {
    font-size: 20px !important;
    top: -2px !important;
    padding: 4px !important;
}

.tms-product-imageFile {
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: 3px solid transparent;
    -moz-border-image: -moz-radial-gradient(center, ellipse cover, #fff 75%, #607d8b 100%);
    -webkit-border-image: -webkit-radial-gradient(center, ellipse cover, #fff 75%, #607d8b 100%);
    border-image: radial-gradient(ellipse at center, #fff 75%, #607d8b 100%);
    border-image-slice: 1;
}

.tms-searching-tab {
    /*width: calc(100% - 8px) !important;*/
    overflow: hidden;
    height: 42px;
    box-sizing: border-box;
    background-color: #fff;
}
    .tms-searching-tab.isSmall {
        height: 34px;
    }
        .tms-searching-tab.isSmall span.k-picker-wrap {
            height: 32px;
        }
            .tms-searching-tab.isSmall span.k-picker-wrap span.icon-search i,
            .tms-searching-tab.isSmall span.k-picker-wrap span.icon-close i {
                font-size: 20px;
                top: -3px;
            }

            .tms-searching-tab span.k-picker-wrap {
                border-radius: var(--mainBorderRadius);
            }

    .tms-searching-tab span input {
        /*width: calc(100%) !important;*/
        background-image: none;
        background-position: 50% 50%;
        background-color: #fafafa;
        border: 0px;
        line-height: 30px;
        margin-left: 40px;
        margin-right: 40px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        font-size: var(--fontMediemBB);
    }

        .tms-searching-tab span input::placeholder {
            font-size: var(--fontMediem)
        }

    .tms-searching-tab span.k-picker-wrap span.icon-search i, .tms-searching-tab span.k-picker-wrap span.icon-close i {
        /*top: 2px;*/
        position: relative;
        vertical-align: middle;
    }
    .tms-searching-tab span.k-picker-wrap span.icon-search i {
        left: 5px;
    }
    .tms-searching-tab span.k-picker-wrap span.icon-close {
        right: 0px !important;
        left: auto;
    }
        .tms-searching-tab span.k-picker-wrap span.icon-close i {
            right: 5px;
        }
    .tms-searching-tab .tms-searching-tab-select {
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
        align-content: center;
    }
        .tms-searching-tab .tms-searching-tab-select > span.selectElement {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            align-content: center;
            padding: 0px 10px;
        }
            .tms-searching-tab .tms-searching-tab-select > span.selectElement.hasicon {
                padding-left: 40px;
                width: calc(100% - 80px);
            }
        .tms-searching-tab .tms-searching-tab-select > span.selectClose {
            width: 40px;
            z-index: 2;
            background: #FFFFFF;
        }

.tms-product-medium-layout {
    position: absolute;
    top: 0px;
    z-index: 1149;
    background: #FFF;
    width: 100%;
}

    .tms-product-medium-layout.large {
        z-index: 1205;
    }

.tms-map-medium-layout {
    position: absolute;
    top: 0px;
    z-index: 1150;
    background: #FFF;
    width: 100%;
}

@media only screen and (max-width: 959px) {
    .tms-map-medium-layout {
        z-index: 1000;
    }

    .tms-product-medium-layout {
        z-index: 999;
    }
}

.tms-dashboard-block-detail {
    line-height: 25px;
    min-height: 50px;
}


.tms-list-detail-icon-vehicle {
    font-size: 16px;
    width: 18px;
    margin-left: 2px;
}

.tms-list-detail-startTime {
    padding-left: 2px;
    top: 3px;
    position: relative;
    margin-right: 20px;
}

.tms-route-summary .pricing_table_price span.node-unit {
    margin-top: -4px;
}

.tms-route-summary {
    height: 45px;
}

.icon-markerSmall-number.table i {
    font-size: 24px !important;
}

.icon-markerSmall-number.table span {
    font-size: 12px;
}

.inLocationTable {
    display: flex;
}

    .inLocationTable i {
        margin-right: 5px;
    }

.tms_layout_noList .hasProduct {
    width: 49% !important;
    position: relative;
    display: inline-block;
}

/*    .tms_layout_noList .hasProduct.tmsTracking_mapMonitor {
        border-left: 2px solid #eaecefbf;
    }*/

.md-list .uk-nestable-list > li:last-child, .md-list > li:last-child {
    margin-bottom: 5px;
}

.md-list-content .md-list-heading {
    margin: 0;
    font-weight: 500;
    display: block;
    overflow: hidden;
    padding-bottom: 1px;
}
/*tracking_mdvr vss*/
.tracking_mdvr iframe {
    width: 100%;
    height: 100%;
}

.product-summary {
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0px;
    background: #f5f8ff;
    margin-top: 5px;
    color: #007aff;
    display: flex;
    align-items: center;
    align-content: center;
}

    .product-summary div {
        padding-left: 5px;
    }

    .product-summary i {
        color: #007aff;
    }

    .product-summary.productcomplete {
        background: rgba(212,255,218,.30980392156862746) !important;
        color: #249733 !important;
    }

        .product-summary.productcomplete i {
            color: #249733 !important
        }

    .product-summary .detail {
        text-align: center;
    }

        .product-summary .detail .uk-badge {
            color: #FFFFFF;
            padding: 3px 10px;
            border-radius: 20px;
        }

            .product-summary .detail .uk-badge i {
                color: #FFFFFF;
            }

            .product-summary .detail .uk-badge.complete, .product-summary .detail .uk-badge.complete i {
                background-color: #def0e0 !important;
                color: #249733 !important;
            }

            .product-summary .detail .uk-badge.notComplete, .product-summary .detail .uk-badge.notComplete i {
                background-color: #ffeded !important;
                color: #ff5050 !important;
            }

.tms-md-card-toolbar {
    z-index: 1005;
    position: inherit;
}

.uk-modal-page .tms-md-card-toolbar {
    /*    z-index: 1;
    position: absolute;*/
}

.uk-modal-page .tms-layout-detail {
    width: 100%;
    position: absolute;
    z-index: 1303;
    background: #fff;
}

.uk-modal-page .tms-product-medium-layout {
    position: relative;
    z-index: auto;
}


.tms-detail-remark-tripClose {
    margin-top: 10px;
    height: 55px;
    overflow-y: auto;  position: relative;
    overflow-x: hidden;
    word-break: break-all;
    font-size: 12px;
}

.md-fab-wrapper-jc400-tracksolid-pro {
    /*    position: relative !important;
    display: block;
    top: 10px;
    right: 10px;
    bottom: 0px;
    text-align: right;*/

    position: absolute !important;
    display: block;
    top: 10px;
    left: auto;
    right: 50px;
    bottom: auto;
}

    .md-fab-wrapper-jc400-tracksolid-pro a.md-fab {
        float: right;
        /*background: transparent;*/
        box-shadow: none;
    }


    .md-fab-wrapper-jc400-tracksolid-pro div.md-fab-wrapper-small {
        margin-bottom: 0px !important;
        top: 180px;
    }

.jc400_new_menu {
    padding: 10px 0px;
    text-align: right;
    height: 30px;
    white-space: nowrap;
}

    .jc400_new_menu.fullScreen {
        margin-right: 20px;
    }

.jc400_new_menu_small {
    display: flex;
    text-align: right;
    float: right;
    padding: 0px 10px;
}

    .jc400_new_menu_small a {
        margin-left: 10px;
    }

.md-fab.md-fab-smaller {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

    .md-fab.md-fab-smaller > i {
        line-height: 30px;
        height: inherit;
        width: inherit;
        font-size: 15px;
    }

.geo_iconName.not-background .geo_inIconName {
    padding: 0px 0px 0px 0px !important;
    border: 0px;
    display: flex;
    margin: 0px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: calc(100% - 4px);
    background: #fff;
    border-radius: var(--mainBorderRadius);
}

.package-other,
.md-list.mainHeaderList .uk-nestable-list > li > .md-list-content .uk-badge, .md-list > li > .md-list-content .uk-badge.package-other {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-size: 13px !important;
    border: 1px solid #b5b4b4;
    cursor: default;
}

.package-platinum,
.md-list.mainHeaderList .uk-nestable-list > li > .md-list-content .uk-badge, .md-list > li > .md-list-content .uk-badge.package-platinum {
    background-color: #183f88 !important;
    color: #FFFFFF !important;
    border: 1px solid #183f88 !important;
}

.package-gold,
.md-list.mainHeaderList .uk-nestable-list > li > .md-list-content .uk-badge, .md-list > li > .md-list-content .uk-badge.package-gold {
    background-color: #dfc800 !important;
    color: #FFFFFF !important;
    border: 1px solid #dfc800 !important;
}

.package-silver,
.md-list.mainHeaderList .uk-nestable-list > li > .md-list-content .uk-badge, .md-list > li > .md-list-content .uk-badge.package-silver {
    background-color: #757575 !important;
    color: #FFFFFF !important;
    border: 1px solid #757575 !important;
}

.uk-badge-inputDisplay {
    position: relative;
    top: 12px;
    left: 10px;
}


/*tpms*/
.bt-flex-row-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

.bt-flex-row-container-setting {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    cursor: default;
}

    .bt-flex-row-container-setting .cardSetting {
        background: #f9f9f9;
        width: 445px;
        height: 20px;
        margin: 2px 0px;
        border: 2px solid #cecece;
        border-radius: 20pc;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
    }

        .bt-flex-row-container-setting .cardSetting i {
            font-size: 18px;
            cursor: pointer;
        }

.bt-flex-row-container > .bt-flex-row-item {
    /*flex: 1 1 30%; */
    /*grow | shrink | basis */
    width: 110px;
    height: 90px;
    width: calc(33.3% - 10px);
}

.bt-flex-row-item {
    /*background-color: #FFFFFF;*/
    position: relative;
    z-index: 2;
    padding-bottom: 2px;
}

.bt-flex-container-gridX {
    position: relative;
    padding: 0px 5px 0px 0px;
    display: flex;
    align-items: center;
}

    .bt-flex-container-gridX:last-child {
        padding: 0px !important;
    }

.tpms-wheel {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
    width: 100px !important;
    /* min-height: 20px;*/
    align-content: center;
    justify-content: center;
    align-items: center;
    min-height: 30px;
}

.tpms-wheel-content {
    background-color: #fff !important;
    width: 92px !important;
    padding: 4px;
    border-radius: 6px !important;
    border: 1px solid #bfbfbf !important;
}

.tpms-axis-hidden {
    width: 20px !important;
    visibility: hidden !important;
}

.tpms-hidden {
    visibility: hidden !important;
}

div.wheel-card.wheel-card-setting {
    width: 120px;
    padding: 5px;
}

div.wheel-card div.wheel-icon, div.wheel-card div.wheel-detail {
    display: inline-block;
}

div.wheel-card div.wheel-icon {
    width: 70px;
}

div.tpms-wheel-content div.wheel-detail {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.tpms-wheel-content.setID {
    min-height: 55px;
    padding-top: 12px;
    font-size: 12px;
}

    .tpms-wheel-content.setID .uk-form-label {
        width: 100%;
        color: #727272;
        position: absolute;
        right: 0;
        -webkit-transition: all 150ms ease-out;
        transition: all 150ms ease-out;
        top: 6px;
        font-size: 12px;
        text-align: center;
        z-index: 2
    }

    .tpms-wheel-content.setID .uk-form-help-block {
        font-size: 10px !important;
        position: absolute;
        width: 100%;
        text-align: center;
        padding: 0;
        left: 0;
        margin: 0;
    }

.tpmsIsContinental.tpms2w_grid .tpms-hr-gridX {
    display: none !important;
}

.tpmsIsContinental.tpms2w_grid .grid05, .tpmsIsContinental.tpms2w_grid .grid25, .tpmsIsContinental.tpms2w_grid .grid35 {
    left: calc(100% - 35px);
}

.tpms-disable-tire i, .tpms-disable-tire input[type=text], .tpms-disable-tire span {
    opacity: 0.3;
}

.tpms-disable-tire .input_onCheck_tpms {
    opacity: 1;
}

.tpms-hr-gridX {
    background: #ddd;
    width: 100%;
    height: 10px;
    position: absolute;
    top: calc(50% - 5px);
}

.tpms-hr-gridY {
    margin: 0px 5px;
    background: #ddd;
    width: 10px;
    height: 100%;
}

    .tpms-hr-gridY.r0, div.tpmsIsContinental.first .tpms-hr-gridY {
        height: calc(100%);
        position: relative;
        top: 50%;
    }

    .tpms-hr-gridY.r7, div.tpmsIsContinental.last .tpms-hr-gridY {
        height: calc(100%);
        position: relative;
        bottom: 50%;
    }

div.tpms-wheel-content div.wheel-detail div i {
    font-size: 12px !important;
    top: 0px;
    width: 12px;
    padding-right: 1px;
}

div.tpms-wheel-content div.wheel-detail div label.detail {
    width: 14px;
    display: inline-block;
}


.tpms-wheel-data, .tpms-wheel-pressure, .tpms-wheel-temp {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 5px;
    justify-content: center;
    font-size: 16px;
    height: 20px;
    margin-bottom: 5px;
}


    .tpms-wheel-data .icon {
        width: 20px;
        text-align: center;
        margin-right: 5px;
    }

    .tpms-wheel-data .iconStatus {
        width: 20px;
        text-align: center;
    }

    .tpms-wheel-data .value {
        max-width: 80px;
        display: flex;
        justify-content: flex-start;
        white-space: nowrap;
        overflow: hidden;
        align-items: center;
    }

        .tpms-wheel-data .value i {
            margin-left: 5px;
            font-size: 14px
        }

textarea.md-input {
    overflow-y: auto;  position: relative;
}

i.icon_top_TPMS_grid {
    height: 0px;
    display: flex !important;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: #ddd !important;
    font-size: 22px !important;
}

    i.icon_top_TPMS_grid.tpms2w_grid {
        height: 20px !important;
    }

.tooltip-tpms {
    min-width: 225px;
}

.tpms-header-row {
    font-size: 12px;
    min-width: 40px;
    display: flex;
    /* justify-content: flex-end;
    padding: 0px 3px 0px 5px;*/
    align-content: center;
    align-items: center;
    font-weight: 600;
}




.size-adjust {
    -webkit-text-size-adjust: auto !important;
}

.irs-with-grid {
    cursor: pointer;
}

.md-list-addon-element.tracking-icon i {
    font-size: 30px;
    margin-top: 0px !important;
}

.md-list-addon-element.tracking-icon.smallIcon i {
    font-size: 24px;
}

.asset-matching-time {
    font-size: 10px !important;
    text-align: left;
}

.tracking-detail-header i.fas {
    font-size: 20px;
    position: relative;
    top: 0px;
    color: #9c9c9c;
    cursor: pointer;
}

.estimate-node {
    padding: 5px 10px;
    margin-bottom: 0px;
    margin-top: 5px;
    position: relative;
    border: none;
    color: #757575;
    background-color: #eee !important;
    border-radius: 4px;
}

.icon-markerSmall-number span.marker-estimate-node {
    top: 2px;
    font-size: 10px;
}

.estimate-record {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #a8a8a8;
    padding: 5px 10px;
    border-radius: 12px;
    background: #fbfbfb;
    cursor: pointer;
}

    .estimate-record.active,
    .estimate-record.active div div i,
    .estimate-record.active div i {
        background: #1e88e5;
        color: #ffffff;
    }

    .estimate-record:hover,
    .estimate-record:hover div div i,
    .estimate-record:hover div i {
        background: #b2dbfb;
    }

    .estimate-record .info {
        width: calc(100% - 41px);
        margin: 0px;
        left: -25px;
        position: relative;
    }

        .estimate-record .info div {
            line-height: 24px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    .estimate-record .action {
        width: 40px;
        text-align: end;
    }

.li-estimate-record {
    border-bottom: 0px !important;
    padding: 0px !important;
    padding-bottom: 10px !important;
}

.estimate-detail {
    padding: 5px 10px;
    background: #f5f8ff;
    color: #007aff;
}

    .estimate-detail div div i,
    .estimate-detail div i {
        color: #007aff;
    }

    .estimate-detail .info {
        width: calc(100% - 41px);
        margin: 0px;
        position: relative;
    }

        .estimate-detail .info div {
            line-height: 24px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    .estimate-detail .action {
        width: 40px;
        text-align: end;
    }

.timeline_item-estimate-detail-node {
    padding: 0px 10px 8px;
    margin-top: -10px;
}

.estimate-detail-node {
    background: #f5f8ff;
    color: #007aff;
    padding: 5px 10px;
}

    .estimate-detail-node div {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.disable-element {
    pointer-events: none;
    opacity: 0.5;
}

.noti-detail-link i {
    font-size: 18px;
    color: #1e88e5;
    height: 10px;
    position: relative;
    top: 3px;
}

a.noti-detail-link:active, a.noti-detail-link:hover,
a.noti-detail-link:active i, a.noti-detail-link:hover i {
    color: #0d47a1;
    text-decoration: none;
}

.noti-detail-link {
    font-size: 12px;
    display: flex;
    align-content: space-around;
    align-items: center;
    flex-direction: row;
    word-break: break-word;
    white-space: normal !important;
    word-break: break-all;
    line-height: 1.5em !important;
    max-height: 3em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #1e88e5;
}

.uk-modal-dialog-lightbox > .uk-close:first-child {
    z-index: 2;
}


.modal-button-close-2 {
    position: absolute !important;
    width: 30px !important;
    height: 30px !important;
    top: -10px !important;
    right: -10px !important;
    z-index: 2 !important;
    background: #b1b1b1;
    color: #ffffff;
    border-radius: 50%;
}

    .modal-button-close-2::after {
        color: var(--mainFont) !important;
    }

@media only screen and (max-width: 767px) {
    .uk-modal-dialog {
        width: auto;
        margin: 20px auto;
    }
}

.modal-padding-small {
    padding: 10px 5px;
}

.speed-tracking-chart, .epc_chart {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 16px;
}

/******** Map bottom Detail ********/

.vehicle-map-bottom-detail {
    background-color: #fff;
    position: absolute;
    z-index: 5;
    margin-left: 10px;
    line-height: 20px;
    bottom: 10px
}

/*.detail-vehicle-map label {
        font-size: var(--fontSmall);
        line-height: 22px;
    }

    .detail-vehicle-map i, .detail-vehicle-map span, .vehicle-list-of-status-icon i {
        font-size: 18px;
        cursor: default;
    }

    .detail-vehicle-map div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 0px;
    }*/



.tracking-detail-row > div {
    line-height: 19px;
}

.inline-2-col {
    width: calc(50% - 4px);
    display: inline-block !important;
}

.card-mdvr-vss.notSafari {
    margin-bottom: -10px !important;
}

    .card-mdvr-vss.notSafari .md-card {
        height: calc(100% - 20px);
        box-shadow: 0 1px 3px var(--mainBorderColor), 0 1px 2px rgba(0,0,0,.24) !important;
    }
        .card-mdvr-vss.notSafari .md-card .gallery_grid_item .gallery_grid_image_caption,
        .card-mdvr-vss.notSafari .md-card .gallery_grid_image_caption {
            position: relative;
            top: -20px;
        }
        
        .vss_videoDiv {
            width: 100%;
            aspect-ratio: 16 / 9;
            display: flex;
        }

.md-card.not_shadow.md-card-hover:hover {
    box-shadow: 0 1px 3px var(--mainBorderColor), 0 1px 2px rgba(0,0,0,.24) !important;
}

.jc400Playback_icon a {
    width: 32px;
    width: 32px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.padding0 {
    padding: 0px !important;
}
.padding10 {
    padding: 10px !important;
}
.padding-bottom10 {
    padding-bottom: 10px !important;
}
.padding-vertical10 {
    padding: 10px 0px !important;
}
.padding-horizontal10 {
    padding: 0px 10px !important;
}


.tracking-card {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 10px;
}
div.md-list-addon-group {
    margin-left: 64px;
    position: relative;
    min-height: 48px;
    padding: 8px 4px;
    box-sizing: border-box;
    position: relative;
}

div.tracking-status-group {
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    border-top: 1px solid #ddd;
    padding-top: 5px;
}
    div.tracking-status-group i {
        min-width: 22px;
        height: 22px;
        display: flex;
        align-content: center;
        align-items: center;
        box-sizing: border-box;
        justify-content: center;
        font-size: 18px !important;
    }
        div.tracking-status-group i.material-icons.icon-small,
        div.tracking-status-group i.fas {
            font-size: 20px !important;
        }
        div.tracking-status-group i.icomoon-locationGPS:before {
            top: 0px;
        }
        div.tracking-status-group i.icomoon-engine:before {
            top: 2px;
            position: relative;
        }

        div.tracking-status-group i.icomoon-tpms {
            font-size: 18px !important;
            top: 0px;
        }

.uk-grid-in-grid {
    margin: 0px;
    padding-left: 0px;
}

.uk-tooltip.long-text .uk-tooltip-inner {
    white-space: pre;
}

/*tpms2*/
div.wheel-detail div {
    font-size: 14px;
}

div.tpms-wheel-content.tpmsWheelItem2 {
    border-radius: 20px !important;
    min-height: 130px;
    width: 80px !important;
}

    div.tpms-wheel-content.tpmsWheelItem2 .tpms-header-row {
        font-size: 15px;
        min-width: auto;
    }

    div.tpms-wheel-content.tpmsWheelItem2 div.wheel-detail div i {
        font-size: 14px !important;
        width: 16px !important;
    }

    div.tpms-wheel-content.tpmsWheelItem2 .tpms-detail-row {
        margin-top: 5px;
    }

    div.tpms-wheel-content.tpmsWheelItem2 .tpms-detail-row-value {
        font-size: 20px;
        font-weight: 600;
        line-height: 22px;
    }

    div.tpms-wheel-content.tpmsWheelItem2 .tpms-detail-row-unit {
        font-size: 13px;
        position: relative;
        top: -3px;
        line-height: 22px;
    }

    div.tpms-wheel-content.tpmsWheelItem2 .tpms-detail-row2 {
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

        div.tpms-wheel-content.tpmsWheelItem2 .tpms-detail-row2 .tpms-detail-row-unit {
            padding-left: 3px;
            top: 3px;
        }

    div.tpms-wheel-content.tpmsWheelItem2 .tpms-detail-border {
        width: 60%;
        border-bottom: 1px solid #ddd;
        margin: auto;
        padding-top: 5px;
    }

div.debarkingMachine .gridY1 .bt-flex-row-container .bt-flex-container-gridX .tpms-wheel,
div.debarkingMachine .gridY5 .bt-flex-row-container .bt-flex-container-gridX .tpms-wheel {
    /*padding-bottom*/: 20px;
}

div.debarkingMachine .bt-flex-row-item {
    padding-bottom: 5PX
}
/*tpms-color0*/
/*div.tpms-wheel-content i {
    color: #727272;
}*/
div.tpms-wheel-content.tpmsWheelItemV1.wheel_main_danger,
div.tpms-wheel-content.tpmsWheelItem2.wheel_main_danger {
    background: #ffcccc !important;
    border: 1px solid #f58c8c !important;
}

div.tpms-wheel-content.tpmsWheelItemV1.wheel_animation,
div.tpms-wheel-content.tpmsWheelItem2.wheel_animation {
    border: 1px solid #f58c8c !important;
    animation: myfirst 1s infinite;
    -moz-animation: myfirst 1s infinite; /* Firefox */
    -webkit-animation: myfirst 1s infinite; /* Safari and Chrome */
    -o-animation: myfirst 1s infinite; /* Opera */
}
/*tpms-color1*/
div.tpms-wheel-content.tpms-color1 i {
    color: #FFfffF;
}
div.tpms-wheel-content.tpms-color1 {
    background: linear-gradient( to left, #2c2c2c 17%, #4c4c4c 17% 20%,#2c2c2c 20% 37%,#4c4c4c 37% 40%,#2c2c2c 40% 60%,#4c4c4c 60% 63%,#2c2c2c 63% 80%,#4c4c4c 80% 83%,#2c2c2c 83%) !important;
    color: #FFfffF;
}

    div.tpms-wheel-content.tpms-color1 .md-color-green-600,
    div.tpms-wheel-content.tpms-color1 div.wheel_status_normal,
    div.tpms-wheel-content.tpms-color1 div.wheel_status_normal i {
        color: #90ff95 !important;
    }

    div.tpms-wheel-content.tpms-color1 .md-color-yellow-A400,
    div.tpms-wheel-content.tpms-color1 div.wheel_status_warning,
    div.tpms-wheel-content.tpms-color1 div.wheel_status_warning i {
        color: #ffea00 !important;
    }

    div.tpms-wheel-content.tpms-color1 .md-color-red-A400,
    div.tpms-wheel-content.tpms-color1 div.wheel_status_danger,
    div.tpms-wheel-content.tpms-color1 div.wheel_status_danger i {
        color: #ff7f7f !important;
    }

    div.tpms-wheel-content.tpms-color1 .md-color-grey-600 {
        color: #f5f5f5 !important;
    }
    /*tpms-color1 .wheel_main_danger*/
    div.tpms-wheel-content.tpms-color1.wheel_main_danger {
        background: linear-gradient( to left, #ffb8b8 17%, #ffcfcf 17% 20%,#ffb8b8 20% 37%,#ffcfcf 37% 40%,#ffb8b8 40% 60%,#ffcfcf 60% 63%,#ffb8b8 63% 80%,#ffcfcf 80% 83%,#ffb8b8 83%) !important;
    }

        div.tpms-wheel-content.tpms-color1.wheel_main_danger .md-color-green-600,
        div.tpms-wheel-content.tpms-color1.wheel_main_danger div.wheel_status_normal,
        div.tpms-wheel-content.tpms-color1.wheel_main_danger div.wheel_status_normal i {
            color: #43a047 !important;
        }

        div.tpms-wheel-content.tpms-color1.wheel_main_danger .md-color-yellow-A400,
        div.tpms-wheel-content.tpms-color1.wheel_main_danger div.wheel_status_warning,
        div.tpms-wheel-content.tpms-color1.wheel_main_danger div.wheel_status_warning i {
            color: #ffea00 !important;
        }

        div.tpms-wheel-content.tpms-color1.wheel_main_danger .md-color-red-A400,
        div.tpms-wheel-content.tpms-color1.wheel_main_danger div.wheel_status_danger,
        div.tpms-wheel-content.tpms-color1.wheel_main_danger div.wheel_status_danger i {
            color: #e53935 !important;
        }

        div.tpms-wheel-content.tpms-color1.wheel_main_danger .md-color-grey-600 {
            color: #f5f5f5 !important;
        }
/*tpms-color2*/
div.tpms-wheel-content.tpms-color2 i {
    color: #FFfffF;
}
div.tpms-wheel-content.tpms-color2 {
    background: linear-gradient( to left, #434343 17%, #686868 17% 20%,#434343 20% 37%,#686868 37% 40%,#434343 40% 60%,#686868 60% 63%,#434343 63% 80%,#686868 80% 83%,#434343 83%) !important;
    color: #FFfffF;
}

    div.tpms-wheel-content.tpms-color2 .md-color-green-600,
    div.tpms-wheel-content.tpms-color2 div.wheel_status_normal,
    div.tpms-wheel-content.tpms-color2 div.wheel_status_normal i {
        color: #90ff95 !important;
    }

    div.tpms-wheel-content.tpms-color2 .md-color-yellow-A400,
    div.tpms-wheel-content.tpms-color2 div.wheel_status_warning,
    div.tpms-wheel-content.tpms-color2 div.wheel_status_warning i {
        color: #ffea00 !important;
    }

    div.tpms-wheel-content.tpms-color2 .md-color-red-A400,
    div.tpms-wheel-content.tpms-color2 div.wheel_status_danger,
    div.tpms-wheel-content.tpms-color2 div.wheel_status_danger i {
        color: #ff7f7f !important;
    }

    div.tpms-wheel-content.tpms-color2 .md-color-grey-600 {
        color: #f5f5f5 !important;
    }
    /*tpms-color2 .wheel_main_danger*/
    div.tpms-wheel-content.tpms-color2.wheel_main_danger {
        background: linear-gradient( to left, #ffb8b8 17%, #ffcfcf 17% 20%,#ffb8b8 20% 37%,#ffcfcf 37% 40%,#ffb8b8 40% 60%,#ffcfcf 60% 63%,#ffb8b8 63% 80%,#ffcfcf 80% 83%,#ffb8b8 83%) !important;
    }

        div.tpms-wheel-content.tpms-color2.wheel_main_danger .md-color-green-600,
        div.tpms-wheel-content.tpms-color2.wheel_main_danger div.wheel_status_normal,
        div.tpms-wheel-content.tpms-color2.wheel_main_danger div.wheel_status_normal i {
            color: #43a047 !important;
        }

        div.tpms-wheel-content.tpms-color2.wheel_main_danger .md-color-yellow-A400,
        div.tpms-wheel-content.tpms-color2.wheel_main_danger div.wheel_status_warning,
        div.tpms-wheel-content.tpms-color2.wheel_main_danger div.wheel_status_warning i {
            color: #ffea00 !important;
        }

        div.tpms-wheel-content.tpms-color2.wheel_main_danger .md-color-red-A400,
        div.tpms-wheel-content.tpms-color2.wheel_main_danger div.wheel_status_danger,
        div.tpms-wheel-content.tpms-color2.wheel_main_danger div.wheel_status_danger i {
            color: #e53935 !important;
        }

        div.tpms-wheel-content.tpms-color2.wheel_main_danger .md-color-grey-600 {
            color: #f5f5f5 !important;
        }
/*tpms-color3*/
div.tpms-wheel-content.tpms-color3 i {
    color: #FFfffF;
}
div.tpms-wheel-content.tpms-color3 {
    background: linear-gradient( to left, #717171 17%, #686868 17% 20%,#717171 20% 37%,#686868 37% 40%,#717171 40% 60%,#686868 60% 63%,#717171 63% 80%,#686868 80% 83%,#717171 83%) !important;
    color: #FFfffF;
}

    div.tpms-wheel-content.tpms-color3 .md-color-green-600,
    div.tpms-wheel-content.tpms-color3 div.wheel_status_normal,
    div.tpms-wheel-content.tpms-color3 div.wheel_status_normal i {
        color: #7ce381 !important;
    }

    div.tpms-wheel-content.tpms-color3 .md-color-yellow-A400,
    div.tpms-wheel-content.tpms-color3 div.wheel_status_warning,
    div.tpms-wheel-content.tpms-color3 div.wheel_status_warning i {
        color: #ffea00 !important;
    }

    div.tpms-wheel-content.tpms-color3 .md-color-red-A400,
    div.tpms-wheel-content.tpms-color3 div.wheel_status_danger,
    div.tpms-wheel-content.tpms-color3 div.wheel_status_danger i {
        color: #ffb6b6 !important;
    }

    div.tpms-wheel-content.tpms-color3 .md-color-grey-600 {
        color: #f5f5f5 !important;
    }
    /*tpms-color3 .wheel_main_danger*/
    div.tpms-wheel-content.tpms-color3.wheel_main_danger {
        background: linear-gradient( to left, #ffb8b8 17%, #ffcfcf 17% 20%,#ffb8b8 20% 37%,#ffcfcf 37% 40%,#ffb8b8 40% 60%,#ffcfcf 60% 63%,#ffb8b8 63% 80%,#ffcfcf 80% 83%,#ffb8b8 83%) !important;
    }

        div.tpms-wheel-content.tpms-color3.wheel_main_danger .md-color-green-600,
        div.tpms-wheel-content.tpms-color3.wheel_main_danger div.wheel_status_normal,
        div.tpms-wheel-content.tpms-color3.wheel_main_danger div.wheel_status_normal i {
            color: #43a047 !important;
        }

        div.tpms-wheel-content.tpms-color3.wheel_main_danger .md-color-yellow-A400,
        div.tpms-wheel-content.tpms-color3.wheel_main_danger div.wheel_status_warning,
        div.tpms-wheel-content.tpms-color3.wheel_main_danger div.wheel_status_warning i {
            color: #ffea00 !important;
        }

        div.tpms-wheel-content.tpms-color3.wheel_main_danger .md-color-red-A400,
        div.tpms-wheel-content.tpms-color3.wheel_main_danger div.wheel_status_danger,
        div.tpms-wheel-content.tpms-color3.wheel_main_danger div.wheel_status_danger i {
            color: #e53935 !important;
        }

        div.tpms-wheel-content.tpms-color3.wheel_main_danger .md-color-grey-600 {
            color: #f5f5f5 !important;
        }

@keyframes myfirst {
    /*    0% { box-shadow: inset 0 0 5px 2px #ddd;}
    25% { box-shadow: inset 0 0 5px 2px    #f58c8c; }
    50% { box-shadow: inset 0 0 5px 2px    #ddd; }
    100% { box-shadow: inset 0 0 5px 2px    #f58c8c; }*/
    0% {
        box-shadow: inset 0 0 5px 2px #ddd;
        stroke: #000;
    }

    50% {
        box-shadow: inset 0 0 5px 2px #f58c8c;
        stroke: #f58c8c;
    }
}

@-moz-keyframes myfirst /* Firefox */
{
    /*    0% { box-shadow: inset 0 0 5px 2px #ddd;}
    25% { box-shadow: inset 0 0 5px 2px    #f58c8c; }
    50% { box-shadow: inset 0 0 5px 2px    #ddd; }
    100% { box-shadow: inset 0 0 5px 2px    #f58c8c; }*/
    0% {
        box-shadow: inset 0 0 5px 2px #ddd;
        stroke: #000;
    }

    50% {
        box-shadow: inset 0 0 5px 2px #f58c8c;
        stroke: #f58c8c;
    }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    /*    0% { box-shadow: inset 0 0 5px 2px #ddd;}
    25% { box-shadow: inset 0 0 5px 2px    #f58c8c; }
    50% { box-shadow: inset 0 0 5px 2px    #ddd; }
    100% { box-shadow: inset 0 0 5px 2px    #f58c8c; }*/
    0% {
        box-shadow: inset 0 0 5px 2px #ddd;
        stroke: #000;
    }

    50% {
        box-shadow: inset 0 0 5px 2px #f58c8c;
        stroke: #f58c8c;
    }
}

@-o-keyframes myfirst /* Opera */
{
    /*    0% { box-shadow: inset 0 0 5px 2px #ddd;}
    25% { box-shadow: inset 0 0 5px 2px    #f58c8c; }
    50% { box-shadow: inset 0 0 5px 2px    #ddd; }
    100% { box-shadow: inset 0 0 5px 2px    #f58c8c; }*/
    0% {
        box-shadow: inset 0 0 5px 2px #ddd;
        stroke: #000;
    }

    50% {
        box-shadow: inset 0 0 5px 2px #f58c8c;
        stroke: #f58c8c;
    }
}

@keyframes svg_warning {
    0% {
        box-shadow: inset 0 0 5px 2px #ddd;
        stroke: #000;
    }

    50% {
        box-shadow: inset 0 0 5px 2px #f58c8c;
        stroke: #848484;
    }
}

@-moz-keyframes svg_warning /* Firefox */
{
    0% {
        box-shadow: inset 0 0 5px 2px #ddd;
        stroke: #000;
    }

    50% {
        box-shadow: inset 0 0 5px 2px #f58c8c;
        stroke: #848484;
    }
}

@-webkit-keyframes svg_warning /* Safari and Chrome */
{
    0% {
        box-shadow: inset 0 0 5px 2px #ddd;
        stroke: #000;
    }

    50% {
        box-shadow: inset 0 0 5px 2px #f58c8c;
        stroke: #848484;
    }
}

@-o-keyframes svg_warning /* Opera */
{
    0% {
        box-shadow: inset 0 0 5px 2px #ddd;
        stroke: #000;
    }

    50% {
        box-shadow: inset 0 0 5px 2px #f58c8c;
        stroke: #848484;
    }
}


.tpms_switcher_themes {
    width: 25%;
    height: 24px;
    display: inline-flex;
    margin: 4px;
    border: 1px solid #ddd;
    position: relative;
    cursor: pointer;
}
    .tpms_switcher_themes.selection {
        border-color: #43a047;
    }
    .tpms_switcher_themes.selection:after {
        content: '\e5ca';
        font-family: "Material Icons";
        font-size: 18px;
        display: block;
        color: #43a047;
        background: #ffffff59;
        position: absolute;
        width: 100%;
        text-align: center;
    }

.tpms_switcher_themes span {
    display: block;
    padding: 0 4px;
    height: 24px;
    line-height: 24px;
    box-sizing: border-box;
    width: 50%;
    float: left;
}
/*debarkingMachine svg*/
.wheel_svg .wheel_main {
    cursor: pointer;
}
.wheel_svg .wheel_main .path1_item,
.wheel_svg .wheel_main .path2_item {
    stroke: #000;
}
.wheel_svg .wheel_main .path1_item,
.wheel_svg .wheel_main .path2_item {
    stroke: #000;
    fill: #d7d7d7;
}

/*.wheel_svg .wheel_main_normal .path1_item {
    fill: #595959;
}

.wheel_svg .wheel_main_normal .path2_item {
    fill: #9b9b9a;
}*/

.wheel_svg .wheel_main_normal .path1_item {
    fill: #43a047;
}
.wheel_svg .wheel_main_normal .path2_item {
    fill: #43a047;
}

.wheel_svg .wheel_main_danger .path1_item {
    fill: red;
}
.wheel_svg .wheel_main_danger .path2_item {
    fill: red;
}

.wheel_svg .wheel_main_warning .path1_item {
    fill: #f2e124;
}

.wheel_svg .wheel_main_warning .path2_item {
    fill: #f2e124;
}

.wheel_svg .wheel_main_warning.wheel_animation .path1_item,
.wheel_svg .wheel_main_warning.wheel_animation .path2_item {
    border: 1px solid #f2e124 !important;
    animation: svg_warning 1s infinite;
    -moz-animation: svg_warning 1s infinite; /* Firefox */
    -webkit-animation: svg_warning 1s infinite; /* Safari and Chrome */
    -o-animation: svg_warning 1s infinite; /* Opera */
}

.wheel_svg .wheel_main_danger.wheel_animation .path1_item,
.wheel_svg .wheel_main_danger.wheel_animation .path2_item {
    border: 1px solid #f58c8c !important;
    animation: myfirst 1s infinite;
    -moz-animation: myfirst 1s infinite; /* Firefox */
    -webkit-animation: myfirst 1s infinite; /* Safari and Chrome */
    -o-animation: myfirst 1s infinite; /* Opera */
}

.webui-popover.webui-popover-tpmsWheelSvg {
    z-index: auto;
    border: 0px !important;
    padding: 0px !important;
    background: transparent;
    background-color: transparent;
}

    .webui-popover.webui-popover-tpmsWheelSvg .webui-popover-content,
    .webui-popover.webui-popover-tpmsWheelSvg .webui-popover-content div {
        border: 0px !important;
        padding: 0px !important;
        background: transparent;
        background-color: transparent;
    }


        .webui-popover.webui-popover-tpmsWheelSvg .webui-popover-content .tpms-wheel-content {
            border-radius: 10px !important;
            padding: 2px 10px !important;
        }

        .webui-popover.webui-popover-tpmsWheelSvg .webui-popover-content .wheel-detail {
            padding-top: 5px !important;
        }
.wheelConfigTitle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.wheelConfigTitle.hasName input {
    margin: 0px 4px 0px 0px;
    position: relative;
    left: 5px;
}

.dropdown_fix_position .uk-dropdown {
    top: unset !important;
    left: unset !important;
    margin-left: -160px;
}


.md-btn.md-btn-icon {
    display: inline-flex;
    align-items: center;
    align-content: center;
    /*justify-content: space-between;*/
}
    .md-btn.md-btn-icon i {
        margin-right: 5px;
    }

.tpms-header-groupicon {
    display: flex;
    align-content: center;
    align-items: center;
}
    .tpms-header-groupicon i {
        width: 25px;
        height: 25px;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-end;
    }

.tpms-header-group {
    display: flex;
    justify-content: space-between;
    padding: 8px;
}

    .tpms-header-group .title {
        width: calc(100% - 50px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.uk-accordion.debarkingMachine.btn100041,
.uk-accordion.debarkingMachine.btn100043 {
    padding-right: 10px !important;
}

.uk-accordion.debarkingMachine.btn100042,
.uk-accordion.debarkingMachine.btn100044 {
    padding-left: 10px !important;
}

@media only screen and (max-width: 767px) {
    .debarkingMachine.btn100041,
    .debarkingMachine.btn100043,
    .debarkingMachine.btn100042,
    .debarkingMachine.btn100044 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

.debarkingMachine .tpms-hr-gridY {
    opacity: 0 !important;
}

.debarkingMachine .tpmsIsContinental.tpmsother_grid.gridY2,
.debarkingMachine .tpmsIsContinental.tpmsother_grid.gridY6 {
    margin-top: 50px;
}

.debarkingMachine .tpms-hr-gridY-axle {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -7.5px;
    left: -5.5px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    border-radius: 50%;
    background: #ddd;
}

.uk-close {
    font-size: 22px;
}

.uk-switcher.notHidden>:not(.uk-active) {
    display: block;
    height: 0px;
    opacity: 0;
    z-index: -1;
    position: relative;
}

/*.bus-stop-container {
    background-color: #fff;
    position: fixed;
    z-index: 5;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    margin-left: 10px;
    padding: 5px 5px;
    border-radius: 5px;
    right: 30px;
    top: 190px;
    width: 300px;
    max-width: calc(100% - 30%);
}
*/
.bus-stop-container.hide {
    height: fit-content;
}
.bus-stop-container-notList {
    min-height: 40px;
    display: flex;
    align-items: center;
    align-content: center;
}
    .bus-stop-container-notList .md-preloader {
        display: flex;
        justify-content: center;
        width: 100%;
    }


    .bus-stop-container.show .bus-stop-detail-toggle {
        max-height: calc(100vh - 460px);max-height: calc(100svh - 460px);
        min-height: 140px;
        overflow-y: auto;  position: relative;
        scroll-behavior: smooth;
        padding: 10px 0px;
    }

.bus-stop-list-header {
    height: 30px;
    position: sticky;
    z-index: 2;
}

.bus-stop-list-container {

}
    .bus-stop-list-container.has-header {
         margin-top: 10px;
    }
.bus-stop-list-container-uk-badge {
    padding: 3px 5px;
    font-size: 13px;
    min-width: 110px;
    display: flex;
    line-height: 20px;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: fit-content;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    position: relative;
}
    .bus-stop-list-container-uk-badge svg {
        width: 30px;
    }

.bus-stop-list {
    margin-left: 0px;
    scroll-snap-align: start;
    width: 100%; /*calc(100% - 20px);*/
    padding: 0px 5px;
    box-sizing: border-box;
    position: relative;
    height: 63px;
}
    .bus-stop-list .uk-badge_text {
        height: 63px;
    }
    .bus-stop-list-svgbox > svg {
        height: 75px;
    }
        .bus-stop-list .bus-stop-list-svgbox > svg rect.point_group_line {
            width: 35px;
        }

    .bus-stop-list .bus-stop-list-svgbox > svg .point_group_line.line_up {
        x: 0;
    }
    .bus-stop-list .bus-stop-list-svgbox > svg .point_group_line.line_down {
        x: 35;
    }
    .bus-stop-list.estimate .bus-stop-list-svgbox > svg .point_group_line.line_up {
        x: 0;
    }
    .bus-stop-list.estimate .bus-stop-list-svgbox > svg .point_group_line.line_down {
        x: 35;
    }
    .bus-stop-list.estimate,
    .bus-stop-list.estimate .uk-badge_text {
        height: 75px;
    }
    .bus-stop-list.estimate .bus-stop-list-svgbox > svg {
            height: 86px;
    }
    .bus-stop-list.estimate .bus-stop-list-svgbox > svg .bus_point {

    }
        .bus-stop-list.estimate .bus-stop-list-svgbox > svg rect.point_group_line {
            width: 43px;
        }

.bus-stop-list:last-child {
    height: 50px;
    overflow: hidden;
}
.bus-stop-list-sub {
    width: 100%;
    word-break: break-word;
    /*max-width: 260px;*/
}

.bus-stop-list-svgbox {
    display: flex;
}


.bus-stop-list-focus {
    height: 38px;
    margin-left: 0px;
    scroll-snap-align: start;
    width: fit-content;
    padding: 3px;
}
.uk-badge-bus {
    background-color: #183f88;
    border-radius: 25px;
    color: #fff;
}

.uk-badge-orange-bus {
    background-color: #FF6723;
    color: #fff;
}

.uk-badge-green-bus {
    background-color: #146e43;
    color: #fff;
}

.uk-badge-purple-bus {
    background-color: #69329b;
    color: #fff;
}

.uk-badge-pink-bus {
    background-color: #DB1A5D;
    color: #fff;
}

.two_line_overflow {
    white-space: normal !important;
    word-break: break-word;
    line-height: 15px !important;
    max-height: 2em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#style_switcher.busStopMain {
    z-index: 5;
    margin-left: 10px;
    padding: 5px 5px;
    border-radius: 5px;
    top: 200px;
    width: 300px;
/*    max-width: calc(100% - 30%);*/
    margin-right: -305px;
}
#style_switcher.switcher_active.busStopMain {
    margin-right: 0 !important;
}

#style_switcher_toggle > i {
    display: flex;
    align-items: center;
    justify-content: center;
/*    color: #212121 !important;*/
    font-size: 24px;
    height: 30px;
}

#toggle-show-bus-list {
    position:absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    transform: translate(0, -10%);
}

@media only screen and (max-height: 375px) {
    #style_switcher.busStopMain {
        z-index: 5;
        top: 95px;
        right: 0;
        width: 100vw; width: 100svw;
        max-width: unset;
        height: calc(100vh - 95px);
        height: calc(100svh - 95px);
        border-radius: unset;
        margin-right: calc(-100vw); margin-right: calc(-100svw);
    }

    #style_switcher.switcher_active.busStopMain #style_switcher_toggle {
        top: 0px;
        right: 0px;
        left: unset;
        box-shadow: unset;
    }

    #style_switcher.busStopMain #style_switcher_toggle {
        top: 100px;
        right: unset;
        left: -44px;
        box-shadow: unset;
    }

    #toggle-show-bus-list {
        top: 50px;
    }
}

/*@media only screen and (max-width: 767px) {
 
    .bus-stop-container.show .bus-stop-detail-toggle {
        /* max-height: calc(100svh - 160px)*/
        /* max-height: calc(100svh - 420px);*/
/*}

    #style_switcher.busStopMain {
        margin-left: unset !important;
        padding: 5px 5px !important;
        border-radius: 5px !important;
        top: 95px !important;
        width: 100vw !important; width: 100svw !important;
        max-width: unset !important;
        margin-right: calc(-100vw) !important; margin-right: calc(-100svw) !important;
        height: calc(100vh - 95px) !important; height: calc(100svh - 95px) !important;
    }

    #style_switcher.switcher_active.busStopMain #style_switcher_toggle {
        top: 0px;
        right: 0px;
        left: unset;
        box-shadow: unset;
    }

    #style_switcher.busStopMain #style_switcher_toggle {
        top: 100px;
        right: unset;
        left: -44px;
        box-shadow: unset;
    }

    #toggle-show-bus-list {
        top: 50px;
    }
}*/

/*svg-bus*/
.svg-bus-element-vw {
    width: calc(100vw - 120px); width: calc(100svw - 120px);
}

.uk-badge_text {
    width: 100%;
    height: 50px;
}

.point_padding_left {
    padding-left: 20px;
}

.point_group {
    display: flex;
    align-content: center;
    align-items: center;
    padding-top: 3px;
    padding-left: 10px;
    /*padding-right: 20px;*/
    color: #444;
    max-width: fit-content;
}

.point_group_focus {
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    color: #FFF;
}

.point_group_number {
    width: 40px;
    height: 30px;
}

    .point_group_number > svg {
        position: relative;
        top: 0px;
        left: 0px;
    }

.point_group_text {
    position: relative;
    min-height: 30px;
    display: flex;
    align-items: center;
    align-content: center;
    top: -2px;
/*    left: -5px;
    padding: 2px 12px;*/
    max-width: fit-content;
    max-height: fit-content;
    padding-right: 10px;
}
.point_group_text_estimate {
    /*display: none;*/
    margin-left: 50px;
    font-size: 12px;
    border-radius: 5px;
    padding: 0px 8px;
    background: var(--mainBackground);
    line-height: normal;
/*    margin-top: 2px;*/
}
.bus-stop-list.estimate .point_group_text_estimate {
    display: block;
}
.point_group_text_estimate.last {
    position: relative;
    top: -1px;
    line-height: 12px;
}
    .point_group_text_estimate i {
        font-size: 16px;
        color: inherit !important;
        margin-right: 2px;
    }

    .bus_two_line_overflow {
        white-space: normal !important;
        word-break: break-word;
        line-height: 18.5px !important;
        /*max-height: 2em;*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 13.5px;
    }

.bus-blue {
    fill: #183f88;
    stroke: #183f88;
    color: #183f88;
}

    .bus-blue .point_group_focus {
        background: #183f88;
    }

.bus-green {
    fill: #056E40;
    stroke: #056E40;
    color: #056E40;
}

    .bus-green .point_group_focus {
        background: #056E40;
    }

.bus-orange {
    fill: #FF6723;
    stroke: #FF6723;
    color: #FF6723;
}

    .bus-orange .point_group_focus {
        background: #FF6723;
    }

.bus-purple {
    fill: #6A349E;
    stroke: #6A349E;
    color: #6A349E;
}

    .bus-purple .point_group_focus {
        background: #6A349E;
    }

.bus-pink {
    fill: #DB1A5D;
    stroke: #DB1A5D;
    color: #DB1A5D;
}

    .bus-pink .point_group_focus {
        background: #DB1A5D;
    }

.bus-yellow {
    fill: var(--yellowBus);
    stroke: var(--yellowBus);
    color: var(--yellowBus);
}

    .bus-yellow .point_group_focus {
        background: var(--yellowBus);
    }

.point_group_normal {
    fill: #727272;
    stroke: #727272;
}

/******** Bus Layout ********/

.bus_actionbutton_tab {
    height: 40px;
    width: 100%;
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid var(--mainBorderColor);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 20px;
    box-sizing: border-box;
    gap: 10px;
}
    .bus_actionbutton_tab button {
        border-color: #ffffff;
    }
.bus_filter_tab {
    min-height: 40px;
    background-color: var(--mainBackgroundGray);
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid var(--mainBorderColor);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 10px 0px 20px;
}

/******** Bus Data List ********/
.bus-line-group-name {
    font-size: var(--fontMediemBB);
    font-weight: bold;
}

    .bus-line-group-name.yellow {
        color: var(--yellowBus);
    }

    .bus-line-group-name.pink {
        color: var(--pinkBus);
    }

    .bus-line-group-name.light-blue {
        color: var(--lightBlueBus);
    }

.dot-between {
    font-size: 30px;
    vertical-align: sub;
}

/******** Bus List ********/

#main-vehicle-list {
    position: relative;
    z-index: 5;
}

.MEA-card .vehicle-list-title {
    background-color: #fff;
    border-radius: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    position: relative;
}

    .MEA-card .vehicle-list-title .toggle-search-button,
    .MEA-card .vehicle-list-title .toggle-mode-button {
        margin-left: 15px;
    }

.MEA-card .vehicle-list-title .title-vehicle-seach-tab.tms-searching-tab {
    background-color: #fff;
    height: 42px;
}

.MEA-card .md-card-toolbar.vehicle-list-search-header {
    background-color: #fff;
    border-radius: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    flex: 1;
}

.md-card-toolbar.vehicle-list-search-header .header-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.overflow-y-vehicle-search .header-passing-car {
    margin: 20px 16px 10px;
}

.overflow-y-vehicle-search .list-passing-car {
    overflow-y: auto;  position: relative;
    height: calc(100% - 50px);
}

.overflow-y-vehicle-search .list-passing-car > ul {
    padding-bottom: 10px;
}

.overflow-y-vehicle-search .header-font {
    font-weight: bold;
    font-size: var(--fontLarge);
}

.MEA-card .vehicle-list-search-content {
    background-color: #fff;
    border-radius: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 150px;
    padding: 0px 10px;
}

    .MEA-card .vehicle-list-search-content .search-bus-stop {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: calc(100% - 20px);
    }

    .MEA-card .md-card-toolbar.vehicle-list-search-content .switch-bus-stop {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin-left: 10px;
        margin-bottom: 40px;
    }

.vehicle-list-search-selectize {
    position: relative;
    width: 100%;
}

    .vehicle-list-search-selectize .MEA_selectize .selectize-control.single .selectize-input {
        min-height: 38px;
        border-color: var(--mainBorderColor) !important;
        border-width: 1px;
        border-radius: 6px;
        padding-left: 35px !important;
    }

    .vehicle-list-search-selectize .icon {
        position: absolute;
        z-index: 2;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 5px;
    }

.title-vehicle-seach-tab.tms-searching-tab span.k-picker-wrap {
    background-color: #fff;
    border-color: #ccc;
}

.title-vehicle-seach-tab.tms-searching-tab span input {
    background-color: #fff;
    width: calc(100% - 10px);
    height: 100%;
    box-sizing:border-box;
}

    .title-vehicle-seach-tab.tms-searching-tab span input::placeholder {
        font-family: "Sarabun", "Roboto", sans-serif;
        font-size: var(--fontMediemBB);
    }

.tracking_block .main-vehicle-summary {
    position: absolute;
    top: 10px;
    left: 10px;
    /*padding: 10px 10px 10px 0px;*/
    z-index: 5;
    display: flex;
    flex-direction: row;
    height: auto;
}

.main-vehicle-summary .vehicle-summary-content {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 44px;
    margin-right: 10px;
    border-radius: 10px;
    border: 1px solid var(--mainBorderColor);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

    .main-vehicle-summary .vehicle-summary-content .summary-content-row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .main-vehicle-summary .vehicle-summary-content .summary-content-row label{
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

.mainTableVehicleList thead tr th {
    background-color: var(--mainColorBackground);
    color: var(--mainForm)
}

div#overflow-y-vehicle-list {
    border-radius: 0px;
}

.background-main {
    background-color: var(--mainBackgroundGray) !important;
}
.MEA_datatable tbody tr.background-main,
.MEA_datatable tbody tr.background-main td {
    background: var(--mainBackgroundGray) !important;
}

.bus-list-table-header {
    font-size: var(--fontMediemBB);
    padding: 10px 18px 10px 18px;
    margin: 0px;
    padding: 7px 0px;
    line-height: 24px;
}

/******** Bus Data Detail ********/
.detail-bus-map {
    background-color: #fff;
    position: absolute;
    z-index: 10;
    top: 10px;
    max-height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid var(--mainBorderColor);
    min-width: 320px;
}
html.uk-modal-page .detail-bus-map.fullOpen {
    z-index: 1205;
}

    .detail-bus-map.addition {
        left: 0px;
        margin-left: 10px;
    }

@media only screen and (min-width: 691px) {
    .detail-bus-map {
       /* width: 75%;*/
    }

        .detail-bus-map.addition {
            left: 0px;
            margin-left: 10px;
        }
}

@media only screen and (min-width: 1220px) {
    .detail-bus-map {
       /* width: 30%;*/
    }

        .detail-bus-map.addition {
            left: 30%;
            margin-left: 20px;
        }
}

    .detail-bus-map.addition .detail-body {
        overflow: auto;
    }

    .detail-bus-map .detail-header {
        padding: 10px 30px;
        border-radius: 20px 20px 0px 0px;
        max-width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: var(--fontMediemBB);
        line-height: normal;
        position: relative;
        min-height: 32px;
        line-height: inherit;
    }

        .detail-bus-map .detail-header .header-title {
            display: flex;
            width: 100%;
            justify-content: center;
        }

        .detail-bus-map .detail-header.left {
            justify-content: flex-start;
            padding: 10px 40px 10px 40px;
        }

        .detail-bus-map .detail-header .close-button {
            position: absolute;
            right: 10px;
            color: var(--mainFont);
            cursor: pointer;
            top: calc(50% - 12px);
        }

            .detail-bus-map .detail-header .close-button span {
                padding: 2px;
            }

        .header-busline-container {
            max-width: 50%;
            display: flex;
            justify-content: flex-end;
        }

        .header-busline-plateno {
            max-width: 50%;
            display: flex;
            justify-content: flex-start;
        }

            .header-busline-plateno .header-plateno {
                margin-left: 5px;
                display: inline-flex;
                justify-content: flex-start;
                align-items: center;
            }

        .header-busline {
            border-radius: 40px;
            max-width: 100%;
            color: var(--mainBorderColor);
            border: 2px var(--mainBorderColor) solid;
            display: inline-flex;
            align-items: center;
        }

            .header-busline .busline-name {
                padding: 2px 10px;
            }

            .header-busline .busline-id {
                background-color: var(--mainBorderColor);
                border-radius: 40px;
                padding: 2px 10px;
                color: #fff;
            }

            .header-busline.pink {
                color: var(--pinkBus);
                border: solid 1px var(--pinkBus);
            }

                .header-busline.pink .busline-id {
                    background-color: var(--pinkBus);
                    color: #fff;
                }

            .header-busline.yellow {
                color: var(--yellowBus);
                border: solid 1px var(--yellowBus);
            }

                .header-busline.yellow .busline-id {
                    background-color: var(--yellowBus);
                    color: #fff;
                }

            .header-busline.light-blue {
                color: var(--lightBlueBus);
                border: solid 1px var(--lightBlueBus);
            }

                .header-busline.light-blue .busline-id {
                    background-color: var(--lightBlueBus);
                    color: #fff;
                }

    .detail-bus-map .detail-body {
        font-size: var(--fontMediemBB);
        line-height: normal;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 50px;
    }

        .detail-bus-map .detail-body .detail-card {
            padding: 10px 15px;
            display: flex;
            border-bottom: 1px solid var(--mainBorderColor);
            position: relative;
            flex-direction: column;
        }
            .detail-bus-map .detail-body .detail-card:last-child {
                border-width: 0px;
            }

            .detail-bus-map .detail-body .detail-card .route-header,
            .usageInformation-detail{
                display: flex;
                justify-content: space-between;
                white-space: nowrap;
                gap: 10px;
            }

            .detail-bus-map .detail-body .detail-card .route-additional {
                display: flex;
                flex: 1;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                background: var(--mainColorBackground);
                border-radius: 8px;
                font-size: var(--fontMediem);
                padding: 5px 10px;
                margin-top: 10px;
            }

            .detail-bus-map .detail-body .detail-card .route-detail {
                display: flex;
                overflow-y: hidden;
                flex-direction: column;
            }

                .detail-bus-map .detail-body .detail-card .route-detail .route-detail-content {
                    overflow-y: auto;  position: relative;
                    padding-bottom: 10px;
                }

            .detail-bus-map .detail-body .detail-card .route-list {
                display: flex;
                flex: 1;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                background: var(--mainSub2);
                border: 1px solid var(--main);
                border-radius: 8px;
                font-size: var(--fontMediem);
                padding: 5px 10px;
            }

                .detail-bus-map .detail-body .detail-card .route-list i {
                    color: var(--main);
                }

            .detail-bus-map .detail-body .detail-card.no-border {
                border: none;
            }

            .detail-bus-map .detail-body .detail-card .camera-button {
                display: flex;
                flex-direction: row;
                flex: 1;
                width: 100%;
            }

                .detail-bus-map .detail-body .detail-card .camera-button button {
                    display: flex;
                    flex: 1;
                }

            .detail-card .camera-data {
                margin: 10px 0px;
            }

                .detail-card .camera-data .camera-data-row {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 10px;
                }

                .detail-card .camera-data .list-label {
                    font-size: var(--fontMediem);
                    color: var(--mainFontSub);
                    display: flex;
                    flex-direction: column;
                }

                .detail-card .camera-data .title {
                    font-size: var(--fontMediemBB);

                    font-weight: bold;
                    color: var(--mainFont);
                }

            .detail-bus-map .detail-body .detail-card .detail-link {
                display: flex;
                flex-direction: row;
                justify-content: center;
                gap: 10px;
                flex: 1;
                width: 100%;
                flex-wrap: wrap;
                /*margin-bottom: 15px;*/
            }
            .tracking_detail_row_scroll {
                    display: flex;
                    overflow-x: auto;
                    align-items: stretch;
                    justify-content: center;
                    align-content: center;
            }
                .tracking_detail_etc_icon {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    min-width: 60px;
                    max-width: 60px;
                    margin-right: 10px;
                }

                    .tracking_detail_etc_icon .icon-link {
                        border-radius: 50%;
                        width: 48px;
                        height: 48px;
                        background-color: var(--mainColorBackground);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                        .tracking_detail_etc_icon:hover .icon-link {
                            background-color: var(--mainSub2)
                        }
    
                        .tracking_detail_etc_icon .icon-link span {
                            color: var(--main);
                            font-size: var(--fontLargeXX);
                        }

                    .tracking_detail_etc_icon .name-link {
                        font-size: var(--fontSmallB);
                        line-height: 20px;
                        text-align: center;
                        white-space: normal !important;
                        word-break: break-word;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    .detail-card-etc {
                        padding: 0px 0px 0px 0px;
                        min-height: 150px;
                    }

                        .detail-card-etc > div {
                            padding: 0px 15px 10px 15px;
                        }

                        .detail-card-etc .header,
                        .bus-overflow-header {
                            position: sticky;
                            top: 0px;
                            z-index: 2;
                            padding: 10px 0px;
                            background: #FFFFFF;
                            font-size: var(--fontLarge);
                        }

                    .tracking_detail_etc_icon {
                        cursor: pointer;
                    }

                    .tracking_detail_etc_icon.active .icon-link {
                        border: solid 1px var(--main);
                        font-weight: bold;
                    }

                    .tracking_detail_etc_icon.active .name-link {
                        color: var(--main);
                        font-weight: bold;
                    }

                    .detail-bus-map .detail-body .detail-card .speed {
                        width: 30%;
                        margin-right: 5px;
                        max-width: 70px;
                        min-width: 70px;
                    }
                        .detail-bus-map .detail-body .detail-card .speed > div.speed-block-svg {
                            min-height: 70px;
                        }

            .detail-bus-map .detail-body .detail-card .short-detail {
                display: flex;
                flex-direction: column;
                flex: 1;
                margin-bottom: 5px;
                overflow: hidden;
            }

                .detail-bus-map .detail-body .detail-card .short-detail:last-child {
                    margin-bottom: 0px;
                }

                .detail-bus-map .detail-body .detail-card .short-detail .short-detail-header {
                    font-weight: bold;
                }

            .detail-bus-map .detail-body .detail-card .list-detail {
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .detail-bus-map .detail-body .detail-card .detail-card-header {
                font-size: var(--fontMediemB);
                line-height: normal;
                font-weight: bold;
                margin-bottom: 10px;
            }

.additional-accordion-title {
    border-radius: 8px;
    border: 1px solid var(--mainBorderColor);
    background: white;
}

.uk-tab.bus_detail_tab > li {
    margin-bottom: 0;
    margin-top: 0;
    z-index: 1;
    border: none;
    flex: 1;
}

.uk-tab.bus_detail_tab {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--mainBorderColor);
    border-bottom: 1px solid var(--mainBorderColor);
}

.uk-sticky-placeholder .uk-tab.bus_detail_tab {
    background: #fff;
    padding-top: 8px;
}

.uk-tab.bus_detail_tab > li > a {
    font-size: 13px;
    text-transform: uppercase;
    color: #212121;
    border: none;
    /*border-bottom: 2px solid transparent;*/
    border-radius: 0 !important;
    font-weight: 500;
    min-width: max-content;
    max-width: 100%;
    text-align: center;
    -webkit-transition: all 60ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 60ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 4px !important;
    margin: 0 !important;
    box-sizing: border-box;
    position: relative;
    top: 1px;
}

    .uk-tab.bus_detail_tab > li > a:hover,
    .uk-tab.bus_detail_tab > li > a:focus {
        background: none;
        color: var(--mainSub1);
        /*border-bottom-color: #b2dbfb;*/
    }

.uk-tab.bus_detail_tab > li.uk-active > a {
    background: transparent !important;
    color: var(--main);
    /*border-bottom-color: #2196f3;*/
}

.uk-tab.bus_detail_tab > li.uk-disabled > a,
.uk-tab.bus_detail_tab > li.uk-disabled > a:hover,
.uk-tab.bus_detail_tab > li.uk-disabled > a:focus {
    color: #aaa;
}

.short-detail .vehicle-list-of-status {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.vehicle-list-of-status .bus-list-icon-status {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

    .vehicle-list-of-status .bus-list-icon-status > * {
        margin-right: 3px;
        align-items: center;
    }

        .vehicle-list-of-status .bus-list-icon-status > *:last-child {
            margin-right: 0px !important;
        }

    .vehicle-list-of-status .bus-list-icon-status.left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex: 0 1 auto;
    }

    .vehicle-list-of-status .bus-list-icon-status.right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        flex: 1 1 auto;
        margin-right: 3px;
    }

.text-vehicle-other {
    font-size: var(--fontMediem);
}

.bus-timeline {
    padding: 10px;
}

    .bus-timeline .bus-timeline-selectdate .sub-header {
        font-size: var(--fontSmallB);
        color: var(--mainFontSub);
    }

    .bus-timeline .bus-timeline-list {
        overflow-y: auto;  position: relative;
        height: calc(100vh - 400px);
    }

.detail-bus-map .detail-header .close-button span:hover {
    background: var(--mainBorder2);
    border-radius: 50%;
}

.detail-bus-map .detail-body .bus-timeline-list .bus-stop-list-container {
    width: auto;
}

.vehicle-shortdetail {
    display: flex;
    flex: 1;
    gap: 10px;
}

.vehicle-shortdetail-tempbatt {
    display: inline-block;
    width: auto;
    line-height: normal;
    white-space: nowrap;
}

.layout-back-list {
    position: absolute;
    /*left: 10px;
    top: 80px;*/
}


.busCurrent-table-main .dt-uikit-footer {
    display: none !important;
}

.busCurrent-table-main th td:first-child,
.busCurrent-table-main tr td:first-child {
    padding-left: 10px;
}

.busCurrent-table-main th td:last-child,
.busCurrent-table-main tr td:last-child {
    padding-right: 10px;
}
/*listVehicle_table*/
.busCurrent-table-main tr td {
    cursor: pointer !important;
}

.busCurrent-table-main tr.tracking-tr-vehicle-selected,
.busCurrent-table-main tr.tracking-tr-vehicle-selected td {
    background-color: var(--mainColorBackground) !important;
}

.tracking-tr-vehicle tr {
    min-height: 56px;
}

.dataTables_scrollBody .uk-table thead {
    opacity: 0;
}

/*vehicle-search-block*/
.tracking-li-vehicle-search-group {
    background: #FFFFFF;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px
}
    .tracking-li-vehicle-search-group .tracking-li-vehicle-search {
        height: 40px;
        padding: 10px 15px;
        display: flex;
        cursor: pointer;
        border-bottom: 1px solid var(--mainBorder2);
    }
        .tracking-li-vehicle-search-group .tracking-li-vehicle-search:hover {
            background-color: rgba(60, 64, 67, 0.04);
        }
        .tracking-li-vehicle-search-group .tracking-li-vehicle-search:last-child {
            margin-bottom: 0px !important;
        }
        .tracking-li-vehicle-search-group .tracking-li-vehicle-search .header-busline-container {
            width: 80px;
            justify-content: flex-start;
        }
        .tracking-li-vehicle-search-group .tracking-li-vehicle-search .header-busline-container > div {
            width: 100%;
        }
    .tracking-li-vehicle-search-group .uk-pagination {
        border-top: 1px solid var(--mainBorder2);
        margin: 0px !important;
        padding: 2px 5px;
    }
}

.tracking-li-vehicle-search .icon-block {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin-right: 8px;
}
.tracking-li-vehicle-search > div {
    width: 100%;
    display: flex;
}
    .tracking-li-vehicle-search .icon-block i {
        font-size: 24px !important;
    }

.vehicle-search-block > .title-vehicle-seach-tab {
    width: 100%;
    border: 0px;
    border-radius: 24px;
}
    .vehicle-search-block > .title-vehicle-seach-tab > span {
        border: 0px;
    }

.vehicle-search-block.onFocus > span.title-vehicle-seach-tab {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 1px solid var(--mainBorder2);
}

.tracking-li-vehicle-search-group .vehicle-list-summary {
    border-top: 1px solid var(--mainBorder2);
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.tracking_block_overview .detail-bus-map {
    top: 60px;
    max-height: calc(100vh - 160px);
}

    .tracking_block_overview .vehicle-detail-block.fullOpen .detail-body {
        max-height: calc(100vh - 110px - 90px - 50px);
    }

.search-close {
    cursor: pointer
}

/*MDVR_monitoring*/
.report-accordion-tree .uk-accordion-content {
    margin: 0px 20px;
    border-left: 2px dashed var(--mainSub2);
    padding: 4px 10px;
}
    .report-accordion-tree .uk-accordion-content > div {
        margin-bottom: 10px;
    }
.report-accordion-tree .uk-accordion-title {
    padding: 4px 24px 4px 34px;
    background: #e9f8f066;
    min-height: 20px;
    display: flex;
}
    .report-accordion-tree .uk-accordion-title input {
        margin-right: 10px;
    }
    .report-accordion-tree .uk-accordion-title:after {
        top: 5px;
/*        content: '\f0fe';
        font-family: "FontAwesome";*/
/*        top: 4px !important;
        left: 8px !important;
        right: unset !important;*/
    }

    .report-accordion-tree .uk-accordion-title.uk-active:after {
        /* content: '\f146';
        font-family: "FontAwesome";*/
    }

.filter-title {
    font-size: var(--fontMediem);
    margin-bottom: 10px;
    font-weight: bold;
}

.vehicleIconByType {
    background: var(--mainSub2);
}

.vehicleIconByType i {
    color: var(--mainSub1)
}
.dataTables_scrollBody tbody {
    /*border-top: 1px solid var(--mainBorderColor);*/
}

.mea_wizard wizard a {
    cursor: pointer
}
.specifyTime_display_block {
    min-height: 30px;
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    color: #1976d2;
    border-radius: 20px;
    margin-bottom: 5px;
}

.daily-running-trip-list {
    padding: 10px 10px 10px;
    border-radius: 10px;
    column-gap: 10px;
    border: solid 1px var(--mainBorder);
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
    .daily-running-trip-list.selected {
        border: solid 1px var(--main);
        background-color: var(--mainColorBackground);
    }
    .daily-running-trip-list .round_number {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: solid 1px var(--mainBorder);
        border-radius: 50px;
        line-height: 20px;
        font-size: 16px;
        margin-right: 5px;
    }
    .daily-running-trip-list.selected .round_number {
        border-color: var(--main);
        color: var(--main);
    }

    .daily-running-trip-list .round_summary {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
    }
    .daily-running-trip-list .round_point {
        min-width: 50px;
        display: flex;
        justify-content: flex-end;
        font-size: 20px;
        font-weight: bold;
        color: var(--mainCancel);
    }
        .daily-running-trip-list .round_point i {
            color: var(--mainCancel);
        }

    .daily-running-trip-list.selected .round_point,
    .daily-running-trip-list.selected .round_point i {
        color: var(--main);
    }

.detailOfBusStop {
    background: #FFFFFF;
}
    .detailOfBusStop .no {
        max-width: 50px;
    }
    .detailOfBusStop .arriveTime,
    .detailOfBusStop .departTime {
        max-width: 75px;
    }
    .detailOfBusStop .busStop {

    }
    .detailOfBusStop .direction {
        min-width: 65px;
    }

    .detailOfBusStop.tableFixHead thead th {
        position: sticky;
        top: 0;
        background: #FFFFFF;
    }
    .bus_detail_tab_content .detailOfBusStop.tableFixHead thead th {
        background: var(--mainBackground);
    }

/*vehicleRelease*/
.uk-accordion-vehicleRelease {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--mainBorder);
    min-height: 40px;
    margin-top: 10px;
}
    .uk-accordion-vehicleRelease:first-child {
      /*  margin-top: 0px;*/
    }
    .uk-accordion-vehicleRelease .uk-accordion-title {
        background: inherit;
        padding: 0px;
        border-radius: inherit;
        margin: 0px;
    }
        .uk-accordion-vehicleRelease .uk-accordion-title::after {
            display: none !important;
        }
        .uk-accordion-vehicleRelease .uk-accordion-title .header,
        .uk-accordion-vehicleRelease .uk-accordion-title > .hasGroup > .header,
        .uk-accordion-vehicleRelease .uk-accordion-title > .footer {
            align-items: center;
            min-height: 30px;
            box-sizing: border-box;
            padding: 7px 20px;
            display: grid;
            grid-template-columns: 27% 46% 27%;
            align-items: center;
        }
        .uk-accordion-vehicleRelease .uk-accordion-title > .footer {
            padding: 0px 20px 0px;
            position: relative;
        }

        .uk-accordion-vehicleRelease .uk-accordion-title .header,
        .uk-accordion-vehicleRelease .uk-accordion-title > .hasGroup > .header{
            background: var(--mainBackgroundGray);
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            font-size: var(--fontLargeB)
        }
            .uk-accordion-vehicleRelease .uk-accordion-title .header.not_oneLine {
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
            }
        .uk-accordion-vehicleRelease .uk-accordion-title > .footer {
            border-bottom-left-radius: inherit;
            border-bottom-right-radius: inherit;
            font-size: var(--fontLargeB)
        }
            .uk-accordion-vehicleRelease .uk-accordion-title .title {
                display: flex;
                justify-content: flex-start;
                align-items: center;
/*                font-weight: bold;*/
            }
            .uk-accordion-vehicleRelease .uk-accordion-title  .info {
                display: flex;
                align-items: center;
                align-content: center;
                justify-content: center;
            }
                .uk-accordion-vehicleRelease .uk-accordion-title .info > span {
                    display: flex;
                    align-items: center;
                    align-content: center;
                    justify-content: center;
                    min-width: 40px;
                    margin: 0px 5px;
                }
                    .uk-accordion-vehicleRelease .uk-accordion-title .info > span.onClick_accordion {
                        position: absolute;
                        width: 30px;
                        height: 30px;
                    }
                    .uk-accordion-vehicleRelease .uk-accordion-title .info > span.block-row {
                        margin: 0px 10px;
                        border-left: 2px solid var(--mainFontSub);
                        height: 30px;
                        min-width: 2px;
                    }              
                    .uk-accordion-vehicleRelease .uk-accordion-title .info > span i {
                        color: var(--mainFontSub);
                        width: 30px;
                    }
        .uk-accordion-vehicleRelease .uk-accordion-title .header .detail,
        .uk-accordion-vehicleRelease .uk-accordion-title > .hasGroup > .header .detail {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .uk-accordion-vehicleRelease .uk-accordion-title .body {
            min-height: 105px;
            width: 100%;
            padding: 0px 20px;
            box-sizing: border-box;
            overflow-x: auto;
            position: relative;
            overflow-y: hidden;
            max-width: 1700px;
            margin: auto;
            /*            aspect-ratio: 1283 / 214;*/
        }
        @media screen and (min-width: 1600px) {
            .not_showView .uk-accordion-vehicleRelease .uk-accordion-title  .body {
                padding: 0px 60px;
            }
        }
        .uk-accordion-vehicleRelease .uk-accordion-title  .body > div {
            position: relative;
            top: 0px;
        }
                .uk-accordion-vehicleRelease .uk-accordion-title  .body svg {
                    /*min-width: 1283px;*/
                    min-width: 1000px;
                    width: 100%;
                    height: 100%;
                }
    .uk-accordion-vehicleRelease .uk-accordion-title .header .info > span .icon-going-forward,
    .uk-accordion-vehicleRelease .uk-accordion-title > .hasGroup > .header .info > span .icon-going-forward,
    i.icon-going-forward,
    .uk-tab.bus_detail_tab > li.text-trip-way-up > a {
        color: #5576EB;
    }
    .uk-accordion-vehicleRelease .uk-accordion-title .header .info > span .icon-going-back,
    .uk-accordion-vehicleRelease .uk-accordion-title > .hasGroup > .header .info > span .icon-going-back,
    i.icon-going-back,
    .uk-tab.bus_detail_tab > li.text-trip-way-down > a  {
        color: #FF9E46;
    }
    i.icon-u_turn_right {
        color: var(--main);
    }

    .uk-tab.bus_detail_tab.tripTypeTwoWay > li.uk-active > a{
        background: var(--mainColorBackground) !important;
        font-weight: bolder;
    }
    .trip-way-up {
        background-color: #5576EB;
    }
    .trip-way-down {
        background-color: #FF9E46;
    }

.uk-accordion-vehicleRelease .accordion-event {
    display: none !important;
    width: 0px;
    height: 0px;
    visibility: hidden;
    opacity: 0;
}
.uk-accordion-vehicleRelease .uk-accordion-content {
    background: inherit;
    padding: 0px;
}


#tooltip_svg {
    background: #848484;
    font-size: 12px;
    padding: 4px 8px;
    line-height: 18px;
    text-shadow: none;
    min-width: 20px;
    text-align: center;
    z-index: 1554;
    opacity: 0.7;
    color: #FFFFFF;
}

.vehicleRelease-block-detail {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .vehicleRelease-block-detail .detail-header {
        min-height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        padding: 10px 10px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--mainBorderColor);
    }
    .vehicleRelease-block-detail .detail-body {
        position: relative;
        height: 100%;
    }
    .vehicleRelease-block-detail .detail-body > div {
        
    }
        .vehicleRelease-block-detail .detail-body .listVehicle {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            max-height: 52px;
            min-height: 52px;
            display: inline-flex;
            gap: 10px;
            white-space: nowrap;
            padding: 10px;
            box-sizing: border-box;
            border-bottom: 1px solid var(--mainBorderColor);
        }

            .vehicleRelease-block-detail .detail-body .listVehicle .listVehicle_item {
                padding: 5px 10px;
                border: 1px solid;
                border-radius: 20px;
                display: flex;
                align-items: center;
                min-height: 30px;
                box-sizing: border-box;
            }
                .vehicleRelease-block-detail .detail-body .listVehicle .listVehicle_item.active {
                    border-color: var(--main);
                    color: var(--main);
                    font-weight: bold;
                    background: var(--mainSub2)
                }

        .vehicleRelease-block-detail .detail-body .detailVehicle {
            position: relative;
            height: 100%;
            width: 100%
        }
            .vehicleRelease-block-detail .detail-body .detailVehicle div.detail-bus-map {
                position: relative;
                height: 100%;
                border: 0px;
                width: 100%;
                max-width: 100%;
                top: 0px;
                left: 0px;
            }
            .vehicleRelease-block-detail .detail-body .detailVehicle div.vehicle-detail-block .detail-body {
                max-height: calc(100vh - 88px - 50px - 52px - 38px);
                overflow-y: auto;  position: relative;
            }
    .vehicleRelease-block-detail.overlay .detail-body .detailVehicle div.vehicle-detail-block .detail-body {
        max-height: calc(100vh - 88px - 50px - 52px - 38px);
        overflow-y: auto;  position: relative;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .vehicleRelease-block-detail-main.hasPadding .vehicleRelease-block-detail.overlay .detail-body .detailVehicle div.vehicle-detail-block .detail-body {
        max-height: calc(100vh - 88px - 50px - 52px - 38px - 40px);
    }
        .vehicleRelease-block-detail.overlay .detail-body .detailVehicle div.vehicle-detail-block .detail-body .detail-card:last-child {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

        .vehicleRelease-block-detail .detail-body .detailVehicle .notData {
            font-size: var(--fontLarge);
            margin-top: 20px;
        }
        
.vehicleRelease-block-detail-main {
    border-left: 1px solid var(--mainBorderColor);
}
    .vehicleRelease-block-detail-main.tracking_block_overlay {
        position: absolute !important;
        top: 20px;
        right: 20px;
        height: calc(100% - 40px) !important;
        border-radius: 20px;
        border: 1px solid var(--mainBorderColor);
        width: 360px !important;
        z-index: 21;
        overflow: hidden;
    }
        .vehicleRelease-block-detail-main.tracking_block_overlay.smallScreen {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            width: 100% !important;
            height: 100% !important;
            max-width: 100%;
            max-height: 100%;
            border-radius: 0px;
            box-sizing: border-box;
        }
.uk-accordion-vehicleRelease-detail {
   
}

    .uk-accordion-vehicleRelease-detail > .header {
        border-top: 1px solid var(--mainBorderColor);
        border-bottom: 1px solid var(--mainBorderColor);
        background: var(--mainBackgroundGray);
        height: 35px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
        .uk-accordion-vehicleRelease-detail > .header > div,
        .uk-accordion-vehicleRelease-detail > .body > div {
            padding: 0px;
            border-left: 1px solid var(--mainBorderColor);
        }
            .uk-accordion-vehicleRelease-detail > .header  div:first-child,
            .uk-accordion-vehicleRelease-detail > .body  div:first-child {
                border-left: 0px;
            }

        .uk-accordion-vehicleRelease-detail > .header > div {
            padding: 0px 5px;
            height: 100%;
            display: flex;
            align-items: center;
        }

    .uk-accordion-vehicleRelease-detail > .header.istab {
        background: #FFFFFF;
    }
        .uk-accordion-vehicleRelease-detail > .header.istab > div {
            display: flex;
            justify-content: center;
            align-items: center;
        }
            .uk-accordion-vehicleRelease-detail > .header.istab > div.active {
                color: var(--main);
                font-weight: bold;
            }
    .uk-accordion-vehicleRelease-detail > .body {
        min-height: 320px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        overflow: hidden;
    }
    .uk-accordion-vehicleRelease-detail > .body .dataTables_wrapper .uk-overflow-container {
        min-height: 200px;
    }
        .uk-accordion-vehicleRelease-detail > .body .vehicleReleaseTable {
            overflow-y: auto;  position: relative;
        }

.vehicleReleaseTable .dt-uikit-footer {
    border-top: 1px solid var(--mainBorderColor);
}

.vehicleRelease_time_fast {
    color: var(--mainRequest) !important;
}
.vehicleRelease_time_normal {
    color: var(--mainSuccess) !important;
}
.vehicleRelease_time_slow {
    color: var(--mainDanger) !important;
}
.busDetailStartEndTrip {

}
    .busDetailStartEndTrip > div {
        align-content: center;
        align-items: center;
        color: var(--mainDanger);
    }
    .busDetailStartEndTrip .time {
        font-size: 22px;
        font-weight: bold;
    }
    .busDetailStartEndTrip .icon {
    }
    .busDetailStartEndTrip .text {
        font-size: var(--fontSmall);
        color: var(--mainFont);
    }

.overviewBlock_main {
    margin: 0px;
    display: inline-flex;
    width: 100%;
    gap: 20px;
    padding: 0px 10px;
    box-sizing: border-box;
}
    .overviewBlock_main .overviewBlock {
        border-radius: 20px;
        border: 1px solid var(--mainBorder);
        padding: 5px 15px;
        box-sizing: border-box;
        height: 70px;
    }
        .overviewBlock_main .overviewBlock .header {
            font-size: var(--fontLarge);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-weight: bolder;
            line-height: 22px;
        }
        .overviewBlock_main .overviewBlock .value {
            font-size: var(--fontMediem);
        }
            .overviewBlock_main .overviewBlock .value.isNumber {

            }
        .overviewBlock_main .overviewBlock .value .unit {
            margin-left: 20px;
        }

.vehicle-release-setting {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: calc(100% - 40px);
}
    .vehicle-release-setting .header {
        font-size: var(--fontLargeX);
    }
.vehicleRelease_subDetail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 2px 20px;
    border-bottom: 1px solid var(--mainBorder);
    height: 30px;
    box-sizing: border-box;
}
    .vehicleRelease_subDetail > div {
        width: 100%;
        font-size: var(--fontMediem);
    }

.datatable_scrollY .dataTables_wrapper .dt-uikit-footer div:has(> div.dataTables_info) {
    width: 100%;
}
    .datatable_scrollY .dataTables_wrapper .dt-uikit-footer div:has(> div.simple_numbers) {
    display: none;
}

.header-container label {
    line-height: normal;
}


.next-station-box .two_line_overflow {
    line-height: 1.5em !important;
}

.data-row-list-item-tracking {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 10px;
}

    .data-row-list-item-tracking:first-child {
        margin-top: 0px;
    }

    .data-row-list-item-tracking .list-data {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .data-row-list-item-tracking .list-icon {
        width: 20px;
        margin-right: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

        .data-row-list-item-tracking .list-icon span {
            color: var(--main);
            font-size: var(--fontLargeX);
        }

    .data-row-list-item-tracking .list-label {
        font-size: var(--fontMediem);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: var(--mainFontSub);
    }

        .data-row-list-item-tracking .list-label.title {
            font-size: var(--fontMediemBB);
            font-weight: bold;
            color: var(--mainFont);
        }

.vehicle-list-block-search {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vehicle-list-block-search #searchBusroute {
    height: 100%;
}

    .vehicle-list-block-search #searchBusroute > li {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    /*trackingFindBusLines*/
    .vehicle-list-block-search #searchBusroute .trackingFindBusLines {

    }
        .vehicle-list-block-search #searchBusroute .trackingFindBusLines .search-list-item,
        .vehicle-list-block-search #searchBusroute .trackingFindBusesNearTheStop .search-list-item {
            height: calc(100% - 140px - 35px - 50px);
            overflow-y: auto;
        }

    .vehicle-list-block-search ul.uk-tab.bus_detail_tab > li {
        height: 36px;
        max-height: 36px;
    }
    .vehicle-list-block-search ul.uk-tab.bus_detail_tab > li > a {
        padding: 5px !important;
    }

.overviewSettingLayerControl_map-filter-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.overviewSettingLayerControl_map-filter-icon i {
    font-size: 22px;
}

#modal_notification_image .uk-modal-dialog {
    top: auto !important;
    margin-top: 50px;
}

@media only screen and (max-width: 767px) {
    #modal_notification_image .uk-modal-dialog {
        width: auto;
        margin: 20px auto;
        padding: 0px;
    }
}

table.tableData_list_bus_vehicle tbody > tr,
table.tableData_list_bus_vehicle tbody > tr > td {
    height: 36px !important;
    max-height: 36px !important;
    overflow: hidden;
}

table.tableData_list_bus_vehicle tbody > tr.table-tracking-tr-vehicle td.address {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 300px;
    max-width: 300px;
}

/*#modal_busDailyRunningTripDetail*/
#modal_busDailyRunningTripDetail .main-body {
    width: 100%;
    height: 100%;
    display: contents;
}

#modal_busDailyRunningTripDetail .uk-modal-dialog.modePlaybackShow {
    width: 100%;
    max-width: 100%;
}
    #modal_busDailyRunningTripDetail .uk-modal-dialog.modePlaybackShow .main-body {
        min-width: 1280px;
        min-height: 600px;
    }
#modal_busDailyRunningTripDetail .uk-modal-body {
    position: relative;
}
#modal_busDailyRunningTripDetail .modePlaybackShow .uk-modal-body {
    overflow: auto !important;
    width: 100vw;
    height: 100vh;
}
#modal_busDailyRunningTripDetail .modePlaybackShow .uk-modal-body > div {
    min-width: 1280px;
    min-height: 600px;
}

#modal_busDailyRunningTripDetail .modePlaybackShow .uk-modal-body .list-bus-stop {
    width: 500px;
    min-width: 500px;
    position: relative;
    display: inline-flex;
}

#modal_busDailyRunningTripDetail .modePlaybackDetail {
    display: none;
    position: relative;
}
#modal_busDailyRunningTripDetail .modePlaybackShow .modePlaybackDetail {
    display: flex;
    width: 100%;
    height: 100%;
}

#modal_busDailyRunningTripDetail .modePlaybackShow .modePlaybackDetail .playbackTrack {
    width: 380px;
}
    #modal_busDailyRunningTripDetail .modePlaybackShow .modePlaybackDetail .playbackTrack .detail {
        width: calc(380px - 130px) !important;
    }