* {
    outline: none;
}

.sync-data-modal {
    width: 400px;
}

body {
    background-color: #fff;
}

treecontrol.tree-classic li .tree-selected {
    background-color: beige
}
#abimap-ctn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
.leaflet-div-icon {
    background-color: transparent;
    border: none;
}
.leaflet-popup-content {
    margin: 13px; /* Điều chỉnh giá trị padding theo nhu cầu của bạn */
}

.back-group {
    position: absolute;
    top: 10px;
    left: 5px;
}
.router-content {
    overflow-y: hidden;
    overflow-x: hidden;
    width: 100%;
}

.router-content .panel-body {
    position: relative;
    height: calc(100vh - 53px);
    padding: 0;               /*for mapview react*/
}

.router-content .panel {
    margin: 0;
    position: relative;
}

.router-content .panel .panel-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    padding-bottom: 5px;
}
.route-creating {
    position: absolute;
    background: #fff;
    top: 10px;
    left: 5px;
}
.route-creating.useColdChain {
    left: 185px;
}
.filter-driver {
    position: absolute;
    background: #fff;
    right: 5px;
    top: 5px
}
.router-content .panel-footer .driver-list.has-missing-order {
    /*top: 80px;*/
}
.router-content .panel-footer .driver-list {
    position: absolute;
    top: 0;
    background: #ececec;
    z-index: 10;
    box-shadow: 3px 1px 1px 0 rgba(0, 0, 0, 0.1)
}

.router-content .route-top {
    padding: 15px 15px 0;
    font-weight: 700;
    display: block;
    position: relative;
}
#route-creating-modal {
    width: 400px;
}
#reason-modal {
    width: calc(100vw-100px);
}
#driver-filter-modal {
    width: 1200px;
}
.filter-container {
    display: flex;
    justify-content: space-between;
}
.filter-container > *:first-child {
    flex: 1;
}
.filter-container > *:nth-child(2) {
    flex: 2;
    margin-left: 2em;
}
md-content {
    background-color: #fff;
}
.btn-grp {
    float: right;
    text-align: center;
}
.btn-grp .btn {
    font-size: 9px;
    padding: 4px 7px 3px;
}
.router-content .route-top .route-top-menu {
    display: inline-block;
    float: left;
    width: 160px;
    height: 25px;
    overflow: hidden;
}

.router-content .times {
    white-space: nowrap;
    margin-left: 210px;
    position: relative;
    font-size: 0;
}
.gray-line {
}

.router-content .time-item {
    display: inline-block;
    width: 60px;
    font-size: 14px;
}

.router-content .times-small {
    white-space: nowrap;
    font-size: 10px;
    height: 15px;
    margin-left: 210px;
    position: relative;
}

.router-content .missing-orders {
    height: 50px;
    position: absolute;
    left: 226px;
}

[draggable] {
    /*z-index: 10;*/
}
.ui-draggable-dragging {
    z-index: 1000000;
}

.time-line.active {
    border-top: 1px dashed #57a9e8;
    border-bottom: 1px dashed #57a9e8;
}

.time-line.active .gray-item {
    height: 56px;
}
.time-line.hover .gray-item {
    border-left-color: #f7b066;
    opacity: .6;
}
.time-line.active .gray-line {
    /*background: rgba(0,0,0,.1);*/
}

.router-content .missing-order {
    float: left;
    background-color: #eee;
    box-shadow: 1px 2px 0 #BBB;
    height: 28px;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    padding: 0px 5px;
    cursor: pointer;
    z-index: 1;
    margin-right: 10px;
    text-decoration: none;
    border-top: 2px solid #a70a0a;
    position: relative;
    display: inline-block;
    font-weight: 300;
    color: #000;
}

.live-time-value {
    position: absolute;
}
.driver-list {
    width: 226px;
}

.driver {
    cursor: pointer;
    /*overflow: hidden;*/
    width: 226px;
    white-space: nowrap;
    padding: 12px 20px;
    position: relative;
    height: 58px;
    color: #ee6f23;
}
.driver.highlight {
    color: #57a9e8;
}

.driver .on-off {
    width: 31px;
    height: 33px;
    background: url("/images/btn-off.png");
    display: inline-block;
}
.driver.highlight .on-off {
    background: url("/images/btn-on.png");
}

.driver .driver-name {
    position:relative;
    width:0;
    height:0;
    overflow:visible;
    top:20px;
    left:43px;
}

.driver .driver-username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
    padding-left: 20px;
    margin-left: 10px;
    background: url(/images/user-orange.png) left center no-repeat;
    color: #ee6f23;
}
.driver.highlight .driver-username {
    color: #57a9e8;
    background: url(/images/user-blue.png) left center no-repeat;
}

.driver .driver-vehicle {
    position: absolute;
    display: inline-block;
    right: 0
}
.driver .driver-vehicle .icon-truck-small-orange {
    background: url(/images/truck-small-orange.png) no-repeat;
    width: 23px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}
.driver .driver-vehicle .icon-truck-small-orange.bike {
    background: url(/images/bike-small-orange.png) no-repeat;
    width: 27px;
}

.driver.highlight .driver-vehicle .icon-truck-small-orange {
    background: url(/images/truck-small-blue.png) no-repeat;
}

.driver.highlight .driver-vehicle .icon-truck-small-orange.bike {
    width: 27px;
    background: url(/images/bike-small-blue.png) no-repeat;
}
.driver .driver-vehicle .btn{
    height: 32px;
    width: 50px;
    box-shadow: 0 2px 0 #BBB !important;
    background-color: #fff;
    border-radius: 45% 10px 10px 45%;
}

.route-list {
    margin-top: 0;
    height: 60px;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 100%;
    display: inline-block;
    position: relative;
}
.route-list.has-missing-order {
    margin-top: 35px;
}
.live-time {
    position: absolute;
    left: 500px;
    height: 100%;
    width: 3px;
    background: red;
    z-index: 1;
    top: 0;
}
.route-list .route {
    height: 58px;
}

.route-list .time-line {
    margin-left: 226px;
    height: 58px;
    white-space: nowrap;
    position: relative;
}
.route-list .gray-item {
    border-left: 20px solid #dcdcdc;
    height: 58px;
    display: inline-block;
    width: 40px;
}

.route-list .store-list {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 10px;
    /*z-index: 1;*/
}

.store-list .store {
    position: absolute;
    display: inline-block;
    margin-left: -50px;
    text-align: center;
    color: #ee6f23;
}
.highlight .store-list .store {
    color: #57a9e8;
}

.store-list .store-content-plan {
    background-color: #fff;
    box-shadow: 1px 2px 0 #BBB;
    height: 28px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    z-index: 2;
}

.store-list .store-content-plan .info {
    position: relative;
}

.xdock .info:after, .xdock .store-content-actual:after {
    position: absolute;
    content: "";
    bottom: 1px;
    left: 1px;
    right: 1px;
    height: 3px;
    background: blue;
    border-radius: 0 0 1px 1px;
}
.xdock .store-content-actual:after {
    bottom: 0;
}
.temperature {
    position: absolute;
    z-index: 0;
    top: 0px;
    left: 0;
    background: #E0E0DE;
    width: 33.333%;
    height: 6px;
}
.temperature img {
    display: none;
}
.temperature.box img {
    display: inline-block;
    width: 13px;
    height: 13px;
    position: relative;
    top: -13px;
}
.store-list .store-content-plan .box img {
    top: -18px;
}

.f {
    left: 0;
}
.f.active {
    background: #5CA6D5;
}
.c {
    left: 33.333%;
}
.a.active {
    background: #f7b066;
}
.a {
    left: 66.666%;
}
.c.active {
    background: #66BB6A;
}

.store-list .pickupStore .store-content-plan {
    background-color: #d0c6cf;
}
.store-content-plan .icon-marker-small-orange {
    pointer-events: none;
    background: url(/images/store-marker-orange.png) 0 0/100% no-repeat;
    width: 16px;
    height: 18px;
    display: inline-block;
    background-position-y: 5px;
}
.highlight .store-content-plan .icon-marker-small-orange {
    background: url(/images/store-marker-blue.png) 0 0/100% no-repeat;
    background-position-y: 5px;
}
.store-list .store-content-actual {
    width: 4px;
    height: 30px;
    position: absolute;
    box-shadow: 1px 2px 0 #BBB;
    left: 0;
    background: url("/images/store-marker-green.png") center center/12px 12px no-repeat #fff;
    display: inline-block;
    border-right: gray 1px solid;
    border-bottom: gray 1px solid;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}
.store-list .store-content-actual.task-on-depot {
    background-image: url("/images/depot-marker-green.png");
}
.store-list .pickupStore .store-content-actual {
    background-color: #d0c6cf;
}

.line {
    height: 8px;
    position: absolute;
    top: 23px;
    left: 0;
    right: 20%;
    background: #ee6f23;
}

.highlight .line {
    background: #57a9e8;
}
.not-started:before, .not-started:after {
    position: absolute;
    content: "";
    width: 15px;
    height: 30px;
    left: 0;
    top: -10px;
    background-color: #fff;
    box-shadow: 1px 2px 0 #BBB;
    cursor: pointer;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    z-index: 2;
}
.not-started:after {
    left: auto;
    right: 0;
}

.route-bottom {
    padding: 0 10px 2px;
    text-transform: uppercase;
    /*height: 50px;*/
    font-size: 9px;
}
.route-bottom .info-item {
    padding-right: 10px;
}
.route-bottom .number {
    color: #676767;
    font-size: 9px;
    font-weight: 100;
    text-align: center;
}
#divStartOptimisation {
    z-index: 1000;
    position: absolute;
    top: 130px;
    width: 350px;
    height: 190px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
    padding-top: 35px;
    left: 50%;
    transform: translate(-50%);
}
#spnSoTitle {
    color: #c0392b;
    font-size: 23px;
}


.switch-mode {
    position: absolute;
    right: 0;
    background: #f5f5f5;
    z-index: 20;
    padding: 5px 10px;
    top: 2px;
}
.switch-mode > div {
    float: left;
}
.switch-mode .txt {
    line-height: 35px;
    font-size: 12px;
    margin-right: 5px;
}
.switch-mode .btn {
    outline: none;
    background: url("/images/btn-off.png");
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-size: cover;
}

.switch-mode.on .btn {
    background: url("/images/btn-on.png");
    background-size: cover;
}

.missing-stores {
    left: 226px;
    height: 30px;
    position: absolute;
    z-index: 3;
}

.missing-store {
    background-color: #eee;
    height: 20px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 20px;
    text-align: center;
    padding: 0px 5px;
    cursor: pointer;
    margin-right: 5px;
    text-decoration: none;
    border-top: 1px solid red;
    position: relative;
    display: inline-block;
    font-weight: 300;
    white-space: nowrap;
    /*float: left;*/
}

.missing-store--more {
    display: inline-block;
    line-height: 30px;
    height: 28px;
    width: 28px;
    background: #fff;
    color: #999;
    border-radius: 3px;
    /* vertical-align: middle; */
    text-align: center;
    vertical-align: 0px;
    border-top: 1px solid transparent;
}

.missing-store-reason {
    float: right;
    margin-right: 10px;
}

.missing-store--locked {
    /* background-color: #999; */
    background-color: #fff;
    border-top: none;
}
.missing-store .store-popover {
    position: absolute;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    padding: 1px;
    background: #fff;
    /*display: none;*/
    visibility: hidden;
    opacity: 0;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    z-index: 100;
    transition: all .2s ease-out;
    top: 28px;
    left: 0;
}
.arrow {
    top: -3px;
    left: 10px;
    position: absolute;
    border: 3px;
    border-color: rgba(0,0,0,.2) transparent transparent rgba(0,0,0,.2);
    border-style: solid;
    border-radius: 1px;
    z-index: 1000;
    transform: rotateZ(45deg);
}
.missing-store:hover .store-popover {
    /*display: block;*/
    visibility: visible;
    opacity: 1
}
.missing-store.ui-draggable-dragging .store-popover {
    visibility: hidden;
    opacity: 0
}
.popover-content {
    /* padding: .5em; */
    /* min-width: 180px; */
    /* font-size: 12px; */
  max-height: 100px;
  overflow-y: auto;
}


/*=======================================*/
.fca {
    color: #fff;
}

.btn-group.fca .btn {
    margin-right: 1px;
    padding-top: 4px;
    padding-bottom: 3px;
    border: 1px solid #ccc;
    box-shadow: none;
}
.table .btn-group.fca .btn.active {
    border-color: #1B64B0;
}

.fca > button {
    color: #ccc;
    background: #fff;
}
.fca > button.active {
    color: #fff;
    background: #1B64B0;
}

.fca > button:first-child {
    border-radius: 15px 0 0 15px;
}
.fca > button:last-child {
    border-radius: 0 15px 15px 0;
}

.update-driver-modal, .vehicle-detail {
    width: 800px;
}

.update-shipment-modal {
    width: 1500px;
}

.md-modal md-dialog-actions  button.btn {
    padding-left: 57px;
    padding-right: 57px;
}
.md-modal md-dialog-actions .cancel-btn {
    color: #1B64B0;
    background: #fff;
}

.md-modal md-dialog-actions .create-btn, .md-modal md-dialog-actions .create-btn:hover {
    margin-left: 96px;
    background: #1B64B0;
    border-radius: 3px;
    color: #fff;
}

.update-driver-modal .md-checkbox {
    margin-bottom: 20px;
}

treecontrol.tree-classic li.tree-expanded i.tree-branch-head {
    background: none;
    display: inline-block;
    width: 1.25em;
    text-align: center;
    font-family: Simple-Line-Icons;
    font-weight: bold;
    font-style: normal;
    margin-right: 3px;
    color: #1B64B0;
}
treecontrol.tree-classic li.tree-leaf i.tree-leaf-head {
    display: none;
}
treecontrol.tree-classic li.tree-expanded i.tree-branch-head:after {
    content: "\e069";
}

treecontrol.tree-dn li.tree-expanded i.tree-branch-head:after {
  content: "" !important;
}


.box-feature {
    color: #111;
    background: rgb(66, 239, 108);
    border-color: rgba(66, 239, 108, 0.22);
}
.time-label--featured {
    margin-left: 30px;
}


.missing-order-list {
    display: none;
    position: absolute;
    width: 100%;
    height: 30px;
    background: #1b64b0;
    padding-left: 215px;
    padding-top: 4px;
    border-top: 1px solid #333;
}

.has-missing-order .missing-order-list {
    display: block;
}

.has-missing-order .routes {
    margin-top: 30px;
}


.tab-header > ul {
    margin: 0;
    padding: 0;
    display: flex;
    text-align: center;
    justify-content: space-between;
}
.tab-header > ul > li {
    display: block;
    width: 100%;
}
.tab-header li a {
    display: block;
    height: 45px;
    line-height: 45px;
    border-bottom: 2px solid rgb(236, 174, 112);
    border-right: none;
    font-size: 15px;
    cursor: default;
}

.tab-header li a.in-active {
    border-bottom: 2px solid #d9d9d9;
    cursor: pointer;
    color: #999;
}
.details-content {
    padding: 0 25px;
}
.info-item {
    margin-top: 15px;
}


.info-item-label {
    font-size: 12px;
    color: #777;
}
.info-item-text {
    font-size: 15px;
    font-weight: 500;
    margin-top: 5px;
}
.info-item--feature {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

}

.info-item--feature button { height : 34px; }
.history-content {
    padding: 10px 13px;
}
.history-content .md-datepicker-input-container input {
    font-size: 15px;
    text-align: center;
}

.history {
    position: relative;
    height: 100%;
}
.history-item {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}
.history-item:not(.completed-shipment):after {
    content: "";
    position: absolute;
    left: 107px;
    height: calc(100% + 40px);
    border-right: 1px dashed rgb(210,210,210);

}
.completed-shipment {
    margin-bottom: 80px;
}
.history-content {
    position: relative;
}
/* .has-vertical-line {
    position: relative;
}
.has-vertical-line::after {
    position: absolute;
    content: "";
    border-left: 1px solid #000;
    top: 125px;
    left: 120px;
    bottom: 0;
} */
.history-right {
    margin-left: 20px;
    font-size: 14px;
    color: #777;
    width: 160px;
}
.history-left {
    width: 98px;
    font-size: 14px;
    color: #777;
}
.large-title {
    font-size: 15px;
    color: #000;
}

.custom-circle {
    z-index: 10;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid rgb(180, 207, 247);
    border-radius: 100%;
    position: relative;
}
.custom-circle.filled {
    background-color: rgb(180, 207, 247);
}
.custom-circle.filled::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: rgb(116,157,222);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.shipment-code {
    margin-bottom: 20px;
    position: relative;
}

.shipment-code strong {
    color: #999;
    font-size: 16px;
    text-indent: 22px;
    position: relative;
    font-weight: normal;
    z-index: 2;
    padding: 0 10px;
    margin-left: 30px;
    background-color: #fff;
}
.shipment-code::after {
    position: absolute;
    z-index: 1;
    top: 11px;
    left: 0;
    right: 0;
    content: "";
    border-top: 1px solid #999;
}
.history-title {
    font-size: 16px;
    margin-bottom: 15px;
}

.input-append {
    display: flex;
}
.input-append .btn {

}
input.search-query {
    padding-left: 31px;
    height: 34px;
    /* background: blue; */
    font-size: 16px;
    /* margin-right: -5px; */
    border: none;
    border: 1px solid #ccc;
}

form.form-search {
    position: relative;
}

form.form-search:before {
    content:'';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
    background-position: -48px 0;
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: .5;
    z-index: 1000;
}

form.form-search.has-text .clear-search
{
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
    background-position: -312px 0;
    position: absolute;
    top: 10px;
    left: 176px;
    opacity: .5;
    z-index: 1000;
}


.confirmQuestion {
    margin-top: 20px;
}
.confirmList {
    margin-top: 10px;
}
.confirmItem {
    line-height: 23px;
}