body {
    font-size: 14px;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}

*::-webkit-scrollbar-track { 
    background: #f5f5f7;
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb {
    background-color: #dedee0;
    border-radius: 6px;
    border: 1px solid #d5d5d9;
}

.main-header {
    margin-left: 0px !important;
    padding-left: 4px;
    border-bottom: 1px solid #f5f5f7;
}
.sidebar-mini.sidebar-collapse .main-header {
    margin-left: 0px !important;
}
.main-sidebar{
    margin-top: 57px !important;
}
.main-sidebar nav{
    margin-bottom: 57px;
}

.sidebar-mini.sidebar-collapse .sidebar .nav-link {
    padding-left: 6px;
    width: 41px !important;
}
.sidebar-mini.sidebar-collapse .sidebar:hover .nav-link {
    width: 132px !important;
}
.sidebar-mini.sidebar-collapse .sidebar .nav-link.push-menu {
    margin-left: 5px;
}
.sidebar-mini.sidebar-collapse .user-panel {
    padding-left: 2px;
}

.input-group-prepend > .input-group-text {
    background: #f5f5f7;
    user-select: none;
}

.input-group-prepend > .input-group-text > label{
    margin-bottom: 0px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: inherit !important;
}

.input-group-prepend > .input-group-text > label > input{
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

#modalTaskContent .input-group-text.mw {
    min-width: 100px
}
#modalTask .modal-full .modal-body {
    min-height: 580px;
}

.mb-10 {
    margin-bottom: 10px;
}

.card {
    box-shadow: none;
    border: 1px solid #dee2e6;
    border-radius: 0.8rem;
}
.info-box {
    box-shadow: none;
    border: 1px solid #dee2e6;
}

.info-box .info-tools{
    position: absolute;
    right: 5px;
    top: 3px;
    display: none;
}
.info-box .info-tools i{
    margin-left: 5px;
}
.info-box .info-tools i:hover{
    color: #dc3545;
}
.info-box:hover .info-tools{
    display: block;
}
.badge {
    font-weight: 400;
    font-size: 12px;
    min-width: 18px;
    border-radius: .5rem;
}
.badge-md{
    font-size: 100%;
}
.modal-title .badge {
    vertical-align: middle;
    margin-top: -3px;
    margin-left: 5px;
}

.dropdown-item {
    padding: .21rem 1rem;
    font-size: 14px;
}
.dropdown-footer, .dropdown-header {
    text-align: left;
    background: #e5e5e5;
    color: #232323;
    font-size: 13px;
    padding: 5px 15px;
    margin-bottom: 5px;
}

.table .thead-light th {
    background-color: #f5f5f7;
    border-color: #e0e3e7;
}

.sidebar .nav-tools {
    position: absolute;
    bottom: 57px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 149px;
    text-align: center;
    background: #f5f5f7;
    left: 0px;
}
.sidebar .nav-tools i{
    vertical-align: middle;
    font-size: 13px;
    color: #777780;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
}
.sidebar .nav-tools i:hover {
    background: #e3e3e3;
}

.dropdown-menu {
    border-radius: .8rem;
}
.btn-sm, .btn-group-sm > .btn {
    border-radius: .5rem;
}
.modal-footer .btn i {
    padding-right: 5px;
}
.custom-select {
    border-radius: .5rem;
}
.pagination {
    border-radius: .5rem;
}
.daterangepicker {
    border-radius: .5rem;
}
.form-control {
    border-radius: .5rem;
}
.form-control-sm {
    border-radius: .5rem;
}
.page-item:first-child .page-link {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}
.btn-xs {
    border-radius: .4rem;
}
.input-group-sm > .form-control, .input-group-sm > .custom-select, .input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, 
.input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn {
    border-radius: .5rem;
}
.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
.input-group > .hide-native-select:not(:last-child) button.multiselect {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child),
.input-group > .hide-native-select:not(:first-child) button.multiselect {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.layout-navbar-fixed.layout-fixed .wrapper .sidebar {
    margin-top: 0px !important;
}

body > .wrapper {
    background: #f5f5f7;
}

.brand-logo {
    margin-top: 0px;
    margin-right: 10px;
    height: 40px;
}

.jq-toast-wrap {
    width: 400px;
}
.jq-toast-single h2 {
    font-size: 16px;
    margin: 8px 0px 8px 0px;
}
.jq-toast-wrap.top-right {
    top: 60px;
    right: 8px;
}

.nav-flat > .nav-item > .nav-link.active > .nav-icon {
    color: #efefef;
}

.main-sidebar .sidebar .user-panel a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 2px;
    font-weight: 400;
    font-size: 14px;
}

.user-panel .image {
    padding-left: 0.1rem;
}
.user-panel .info {
    font-size: 14px;
    line-height: 25px;
    padding-left: 5px;
}

.user-panel a {
    color: #777780;
    font-weight: 400;
}

.label-switch > span {
    vertical-align: top;
    font-size: 14px;
    line-height: 22px;
}

.nav-flat > .nav-item > .nav-link > .nav-icon {
    margin-left: 0.1rem;
    color: #6e6e76;
    height: 25px;
    width: 25px;
    padding-top: 5px;
    font-size: 14px;
    margin-right: 5px;
    vertical-align: middle;
}

.nav-link > .spinner-border {
    margin-right: 5px;
    margin-top: 2px;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
    font-size: 14px;
}

[class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active {
    box-shadow: none;
}

.main-sidebar .nav-treeview > .nav-item > .nav-link.active, .main-sidebar .nav-treeview > .nav-item > .nav-link.active:hover {
    color: #ffffff;
    background-color: #28a745;
}

.sidebar-dark-green .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-green .nav-sidebar > .nav-item > .nav-link.active {
    border-radius: 10px;
}

.nav-sidebar > .nav-item.menu-open > .nav-link, .nav-sidebar > .nav-item:hover > .nav-link {
    border-radius: 10px;
}

.sidebar-collapse.sidebar-mini .main-sidebar .nav-sidebar.nav-flat .nav-link, .sidebar-collapse.sidebar-mini .main-sidebar .nav-sidebar.nav-legacy .nav-link, .sidebar-collapse.sidebar-mini-md .main-sidebar .nav-sidebar.nav-flat .nav-link, .sidebar-collapse.sidebar-mini-md .main-sidebar .nav-sidebar.nav-legacy .nav-link, .sidebar-collapse.sidebar-mini-xs .main-sidebar .nav-sidebar.nav-flat .nav-link, .sidebar-collapse.sidebar-mini-xs .main-sidebar .nav-sidebar.nav-legacy .nav-link {
    border-radius: 10px;
}

.nav-flat.nav-sidebar > .nav-item .nav-treeview .nav-item > .nav-link, .nav-flat.nav-sidebar > .nav-item > .nav-treeview .nav-item > .nav-link {
    border-radius: 8px;
}

.sidebar-collapse.sidebar-mini .nav-flat.nav-sidebar > .nav-item .nav-treeview .nav-item > .nav-link, .sidebar-collapse.sidebar-mini .nav-flat.nav-sidebar > .nav-item > .nav-treeview .nav-item > .nav-link {
    border-radius: 8px;
}

.nav-treeview .nav-link {
    padding: 0.4rem 0.5rem;
    font-size: 11px;
}

.nav-flat.nav-sidebar > .nav-item .nav-treeview .nav-item > .nav-link, .nav-flat.nav-sidebar > .nav-item > .nav-treeview .nav-item > .nav-link {
    border-left: none;
}

.nav-treeview .dropdown-divider {
    margin: .3rem 0.5rem;
}

.nav-flat:not(.nav-child-indent) .nav-treeview .nav-item > .nav-link > .nav-icon {
    margin-left: .1rem !important;
    vertical-align: middle;
}

.sidebar-collapse .nav-flat:not(.nav-child-indent) .nav-treeview .nav-item > .nav-link > .nav-icon {
    margin-left: auto;
}

.main-sidebar .user-panel.active {
    border-bottom: 2px solid #28a745;
}

.content-wrapper {
    padding-top: 10px;
    padding-left: 3px;
    background: #fff;
    border-top-left-radius: 15px;
}
.content-wrapper > .content.fit-center {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 500;
    color: #515151;
}

.widget-user .widget-user-desc {
    margin-top: 5px;
}

.table th {
    padding: 0.4rem 0.5rem 0.3rem 0.5rem;
}
.table td {
    padding: 0.5rem;
    font-size: 13px;
    vertical-align: middle;
}
.table-sm th, .table-sm td {
    padding: .25rem !important;
}
.table td > .tsec {
    font-size: 12px;
    display: block !important;
    color: #656565;
    margin-top: 2px;
}

.card-body {
    padding: 0.6rem;
}

.card-title {
    font-size: 14px;
    font-weight: 500;
    color: #484848;
    vertical-align: middle;
    line-height: 1.6rem;
}

.card-details .row {
    border-bottom: 1px solid #e9eaea;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.card-details .row:last-of-type{
    border-bottom: none;
}
.card-details .row > div {
    padding-left: 2px;
    padding-bottom: 10px;
}
.card-details .row > div:first-of-type {
    opacity: 0.8;
}
.card-details .row > div .tip-icon{
    margin-left: 10px;
    float: right;
    opacity: 0.6;
    cursor: pointer;
}
.card-details .row > div .tip-icon:hover{
    opacity: 1;
}
.card-details .row > div .fa-exclamation-triangle {
    float: right;
}
.card-details .row > div .desc{
    font-size: 12px;
    opacity: 0.8;
    margin-top: 10px;
    padding-right: 20px;
}
.card-details .row > div.notes{
    border-left: 5px solid #edf1f2;
    padding-left: 10px;
    font-size: 13px;
    opacity: 0.9;
}
.card-details .row > div.pic{
    border-left: 5px solid #edf1f2;
    padding-left: 10px;
    margin-bottom: 10px;
}
.card-details .card-tools > span{
    vertical-align: top;
    font-size: 13px;
    line-height: 22px; 
    opacity: 0.9;
}

.view-img {
    cursor: pointer;
    border-radius: 5px;
}

.ribbon-box {
    min-height: 215px;
    margin-bottom: 15px;
    border-radius: .8rem;
}

.ribbon-box-footer {
    position: absolute;
    bottom: 0px;
    width:95%;
    margin-right: 20px;
}

.ribbon-box-footer .btn-light{
    color: #6c757d;
}

.k-datetimepicker {
    display: block !important;
}

.pac-container {
    z-index: 1051 !important;
}

.btn-default {
    background-color: #ffffff;
}

.btn-default.active {
    background-color: #28a745;
    border: 1px solid #28a745;
    color: #fff;
}

.btn-light.active {
    background-color: #28a745 !important;
    border: 1px solid #28a745;
    color: #fff !important;
}

table.badge {
    font-size: 90%;
}

.k-event-template{
    font-size:13px;
    color: #fff;
}

.multiselect-container{
    min-width: 220px;
}

.multiselect-container > li > a > label {
    padding: 3px 5px 3px 10px;
    display: block;
}

.multiselect-container > li:hover {
    background: #28a745;
}

.multiselect-container > li:hover label {
    color: #fff !important;
}

.navbar-nav .nav-link i {
    font-size: 15px;
    padding-top: 1px;
}
.navbar-nav .nav-link {
    font-weight: 500;
    white-space: nowrap;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.navbar-nav .nav-link:hover {
    border-radius: 10px;
}
.navbar-light .navbar-nav .nav-link {
    color: #6e6e76;
    transition: all 0.5s ease;
}
.navbar-light .navbar-nav .nav-link:hover{
    background-color: #e9ecef;
    color: #000;
}

.navbar-nav #navCntNewTask {
    padding: 2px 5px;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 12px;
    line-height: 20px;
    background-color: #dc3545;
    color: #fff;
}

.main-footer {
    padding: 10px;
}

#btnRefresh{
    margin-left: 0px;
    border-radius: 0px;
    border: 1px solid #ddd;
    border-left: none;
}

button.multiselect {
    border-radius: 0px 3px 3px 0px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.main-header button.multiselect {
    border-radius: 0px;
}

.row-highlighed {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 3px;
    background: #f9ecc6;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    border-radius: .5rem;
}

.row-highlighed label{
    line-height: 26px;
}

.card-header {
    border-bottom: none;
    padding: .35rem .56rem .35rem .56rem;
}

.card-header .card-title h4 {
    margin-bottom: 0px;
}

.card-header .btn-primary{
    color: #fff;
}

.card-header .btn-success {
    color: #fff;
}

.modal-header {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: none;
}

.modal-header .btn-vt {
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    top: 15px;
    right: 55px;
}

.modal-header .btn-act {
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    top: 14px;
    right: 55px;
}

.close, .mailbox-attachment-close {
    font-size: 2.0rem;
    user-select: none;
}

.modal-title {
    font-size: 20px;
    color: #2f2f2f;
    line-height: 35px;
}

.modal-mdx {
    max-width: 700px;
}

.modal-full {
    max-width: 1280px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
}
.modal-full .modal-body{
    max-height: 100% !important;
}

.modal-xl {
    max-width: 1150px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 95vh;
    display: flex;
}
.modal-xl .modal-body{
    max-height: 100% !important;
}

.modal-xxl {
    max-width: 1280px;
    min-height: 760px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
}

p.nav-sm-text {
    display: block;
    color: #fff;
    margin-left: 0px;
    visibility: visible;
    width: auto;
    font-size: 11px;
    opacity: 1;
}

.user-panel .info {
    font-weight: 600;
}

.card.card-tabs.card-outline .nav-item .nav-link {
    color: #555555;
    font-weight: 600;
}

.nav-tabs .nav-link {
    color: #666666;
    font-weight: 500;
    border-top: none;
    border-left: none;
    border-right: none;
}
.nav-tabs .nav-link:hover {
    border-bottom: 3px solid #dee2e6;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #28a745;
    border-bottom: 3px solid #28a745;
}

.hdr-title {
    font-weight: 400;
    color: #131313;
    font-size: 16px;
    margin-left: auto;
    user-select: none;
    transition: color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.company-logo-div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 312px;
    text-align: center;
    font-size: 16px;
    color: #d4d4d4;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dee2e6;
    border-bottom: none;
    padding: 20px;
}

.company-logo-div img {
    max-width: 100%;
    max-height: 180px;
}

.company-logo-footer {
    padding: 10px;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0px 0px 8px 8px;
    text-align: center;
}

@media (min-width: 800px) {
    #tblTaskList_filter, #tblUserList_filter, #tblMerchantList_filter, #tblTeamList_filter, #tblCustomerList_filter, #tblProductList_filter,
    #tblLogList_filter, #tblRecurringTaskList_filter, #tblRecurringHistoryList_filter, #tblPriceTemplateList_filter, #tblActiveAcct_filter,
    #tblAPIKeyList_filter, #tblVehicleList_filter, #tblReminderList_filter, #tblInspectionList_filter {
        margin-top: -30px;
    }
    .pnl-data-table .dataTables_filter {
        margin-top: -30px;
    }
    #tblDriverEarningList_filter, #tblFeedbackList_filter {
        margin-top: -25px;
    }
    .card .hidden-sm-up {
        display: none;
    }
}

@media (min-width: 800px) and (max-width: 1200px) {
    #tblTaskList_filter input {
        display: block;
        margin-left: auto;
        margin-top: 10px;
    }
}

#tblTaskList tbody tr.urgent {
    background: #ffeff0;
}

.dataTable tbody td {
    font-size: 13px;
}
.dataTable tbody td span {
    font-size: 13px;
}

#tblTaskList tbody td span {
    font-size: 12px;
}

#tblTaskList tbody tr.urgent {
    font-size: 14px;
}
.dataTable tbody td.fsm {
    font-size: 12px;
}
#tblTaskList tbody td.dt-chk {
    border-left: 5px solid #777780;
}
#tblTaskList tbody td.action {
    height: 28px;
}

#tblTaskList tbody td.dtfc-fixed-right {
    padding-right: 2px !important;
    background: #f5f5f7;
    border-left: 1px solid #dee2e6;
}
.dataTables_scrollHead table th.dtfc-fixed-right {
    padding-left: 12px;
    background: #f5f5f7;
}
#tblTaskList tbody td.dtfc-fixed-left {
    min-width: 58px;
    background: #fff;
    border-right: 1px solid #f5f5f7;
}

/* Fixed group row drop-down menu overlap issue */
.dataTable td.dt-chk.dtfc-fixed-left {
    overflow: visible !important;
    z-index: 30 !important;
}

.dropdown-menu {
    position: absolute !important;
    z-index: 9999 !important;
}

.user-panel {
    cursor: pointer;
}

.user-panel:hover {

}
.user-panel:hover .info a {
    color: #28a745;
}

.nav-link {
    padding: 0.6rem 0.7rem;
}
.sidebar .nav-link {
    padding: 0.3rem 0.2rem;
    margin-bottom: 0.3rem !important;
    width: 132px !important;
    margin-left: 8px;
}

.nav-sidebar .nav-link > .right, .nav-sidebar .nav-link > p > .right {
    top: 1rem;
    right: .8rem;
}

.user-panel img {
    height: 2.1rem;
    width: 2.1rem;
    object-fit: cover;
}

.data-box {
    max-height: 300px;
    width: 100%;
    overflow-y: auto;
    font-size: 12px;
    border: 1px solid #a2a2a2;
    margin-top: 20px;
}

.bootstrap-dialog .bootstrap-dialog-title {
    font-size: 18px;
    padding-top: 5px;
}

.view-task-img{
    text-align:center;
}
.view-task-img img {
    width: 100%;
    cursor: pointer;
    border-radius: 5px;
}
.view-task-img small {
    color: #7d7d7d;
}
.view-task-img .task-file-tools{
    position: absolute;
    right: 8px;
    top: 0px;
    padding: 5px;
    border-radius: 5px 0px 5px 5px;
    background: rgba(236, 236, 236, 0.9);
    display: none;
}
.view-task-img:hover .task-file-tools{
    display: inline-block;
}

.view-task-file{
    text-align:center;
}
.view-task-file small {
    color: #495057;
}
.view-task-file .task-file-tools{
    position: absolute;
    right: 8px;
    top: 0px;
    padding: 5px;
    border-radius: 5px 0px 5px 5px;
    background: rgba(236, 236, 236, 0.9);
    display: none;
}
.view-task-file:hover .task-file-tools{
    display: inline-block;
}


.view-task-pnl-title {
    background: #28a745;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
    border-bottom: 3px solid #1b8433;
    margin-bottom: 10px;
    padding-left: 10px;
    margin-top: 0px;
}

.view-task-pnl-title.failed{
    background: #dc3545;
    border-bottom: 3px solid #9a0e1b;
}
.view-task-pnl-title .utc-datetime{
    float: right;
    margin-right: 10px;
}
.view-task-pnl-title i{
    margin-right: 10px;
}

.modal {
    overflow: auto !important;
}

.dt-buttons .buttons-html5 {
    border-color: #fff;
    color: #6e6e76;
    padding: 3px 8px;
}

.buttons-html5-text {
    padding: .15rem .5rem;
    font-size: 13px;
}

.dt-button small {
    font-size: 13px;
}

#pnlTaskList .dt-buttons .dt-button small {
    display: none;
}
#pnlTaskList.row-selected .dt-buttons .dt-button small {
    display: inline-block;
}
#pnlTaskList.row-selected .dt-buttons .pnl-manage-linked {
    display: none;
}
#pnlTaskList.row-selected .task-count-badge {
    display: none;
}
#pnlTaskList.row-selected .task-fee-badge {
    display: none;
}
#pnlTaskList td.addr > p {
    cursor: pointer;
    margin-bottom: 0px;
    display: inline-block;
}
#pnlTaskList td.addr>p:hover{
    border-bottom: 1px dashed #ccc;
}

#pnlCustomerList .dt-buttons .dt-button small {
    display: none;
}
#pnlCustomerList.row-selected .dt-buttons .dt-button small {
    display: inline-block;
    padding-left: 3px;
}
#pnlProductList .dt-buttons .dt-button small {
    display: none;
}
#pnlProductList.row-selected .dt-buttons .dt-button small {
    display: inline-block;
}
#pnlVehicleList .dt-buttons .dt-button small {
    display: none;
}
#pnlVehicleList.row-selected .dt-buttons .dt-button small {
    display: inline-block;
}
#pnlReminderList .dt-buttons .dt-button small {
    display: none;
}
#pnlReminderList.row-selected .dt-buttons .dt-button small {
    display: inline-block;
}
#pnlInspectionList .dt-buttons .dt-button small {
    display: none;
}
#pnlInspectionList.row-selected .dt-buttons .dt-button small {
    display: inline-block;
}
#pnlFileList .dt-buttons .dt-button small {
    display: none;
}
#pnlFileList.row-selected .dt-buttons .dt-button small {
    display: inline-block;
}
.pnl-data-table .dt-buttons .dt-button small {
    display: none;
}
.pnl-data-table.row-selected .dt-buttons .dt-button small {
    display: inline-block;
}


table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control:before {
    background-color: #28a745 !important;
    box-shadow: none !important;
    border: 2px solid #28a745 !important;
    display: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control {
    padding-left: 8px;
}

.btn-link {
    color: #189835;
    font-weight: 500;
}

.btn-link:hover {
  color: #36d259;
}

.user-img-map {
    height: 4.1rem;
    width: 4.1rem;
    display: block;
    margin-bottom: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #dbdbdb;
    object-fit: cover;
}

.task-map {
    line-height: 25px;
    min-width: 300px;
}

.task-map > i{
    color: #777780;
    min-width: 20px;
    text-align: center;
    padding-right: 5px;
}

.main-header .nav-item .dropdown-menu > a > i {
    width: 20px;
    color: #505050;
    font-size: 14px;
}

.dropdown-menu {
    max-height: 650px;
    overflow-y: auto;
}

.profile-panel img {
    height: 35px;
    width: 35px;
    object-fit: cover;
}

.td-icon {
    font-size: 22px;
    padding-left: 20px;
}

.td-icon i {
    width: 32px;
    font-size: 20px;
}

.nav-sidebar .nav-item > .nav-link .right {
    opacity: 0.5;
    font-size: 12px;
    margin-top: -4px;
}

.k-draghandle.k-state-selected:hover, .k-ghost-splitbar-horizontal, .k-ghost-splitbar-vertical, .k-list > .k-state-highlight, .k-list > .k-state-selected, .k-marquee-color, .k-panel > .k-state-selected, .k-scheduler .k-scheduler-toolbar .k-state-selected, .k-scheduler .k-today.k-state-selected, .k-state-selected, .k-state-selected:link, .k-state-selected:visited, .k-tool.k-state-selected {
    background-color: #28a745 !important;
    border-color: #2d9645 !important;
}
.k-scheduler th.k-today {
    background: #28a745 !important;
    font-weight: 500;
}

.k-scheduler {
    border-radius: 10px;
    margin-top: 8px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #28a745;
}

.drp-buttons .btn-primary {
    background-color: #28a745;
    border-color: #21943b;
}
.drp-buttons .btn-primary:hover {
    background-color: #2eb74d;
}

.tox .tox-statusbar {
    display: none !important;
}

.table input[type='checkbox'] {
    font-size: 14px;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

.large-check .form-check-label {
    vertical-align: middle;
    font-size: 13px;
    line-height: 12px;
}

.large-check input[type='checkbox'] {
    width: 1em;
    height: 1em;
}

.task-count-badge, .task-fee-badge {
    margin-left: 5px;
    line-height: 18px;
    font-size: 13px;
    color: #5b5959;
    font-weight: 400;
}
.task-count-badge, .task-fee-badge strong{
    color: #515151;
    margin-left: 3px;
}

#dateFilter {
    background: #fff;
    cursor: pointer;
    padding: 6px 10px 7px 10px;
    border: 1px solid #ddd;
    width: 100%;
    display: inline;
    vertical-align: middle;
    margin-left: 6px;
    border-radius: .5rem;
    font-size: 13px;
}

#datetimeFilter.time-shown {
    border-left: 5px solid #dc3545 !important;
}

.date-range-filter {
    background: #fff;
    cursor: pointer;
    padding: 6px 10px 7px 10px;
    border: 1px solid #ddd;
    width: 100%;
    display: inline;
    vertical-align: middle;
    margin-left: 6px;
    border-radius: .5rem;
    font-size: 13px;
}

.daterangepicker .ranges li.active {
    background-color: #28a745;
    color: #fff;
}

/**** Spinner **/
.lds{
    width: 100%;
    text-align: center;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ripple div {
        position: absolute;
        border: 4px solid #6c757d;
        opacity: 1;
        border-radius: 50%;
        animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .lds-ripple div:nth-child(2) {
            animation-delay: -0.5s;
        }

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

/**** End Spinner **/

/* New Spinner */
.spr{
    width: 100%;
    text-align: center;
    margin-bottom:20px;
}
.spr > .spinner-grow{
    margin-right: 10px;
}
.spr .spinner-grow.text-success{
  -webkit-animation: 1s linear infinite spinner-grow;
  animation: 1s linear infinite spinner-grow;
}
#pnlGridStack .card-body > .spr {
    position: absolute;
    top: 50%;
    bottom: 50%;
}
/* End New Spinner */

table.table-hover tbody tr:hover {
    background-color: #f5f5f7;
}

table.table-hover tbody tr.checked {
    background-color: #ecfff0 !important;
}

#modalTaskContent .input-group-text, #modalCustomerContent .input-group-text, #modalMerchantContent .input-group-text {
    min-width: 32px;
    color: #505050;
    text-align: center;
    font-size: 13px;
}

#modalTaskContent .input-group-text i, #modalCustomerContent .input-group-text i, #modalMerchantContent .input-group-text i {
    font-size: 14px;
}

.modal-content .input-group-text i.fa-question-circle {
    font-size: 12px !important;
    opacity: 0.8;
}

#modalTaskContent .card-header .switch {
    margin-top: 4px;
}

#modalTaskContent .card-header .switch-label {
    vertical-align: top;
    line-height: 30px;
    font-weight: 400;
    margin-left: 0px;
}

#modalTaskContent .task-eta {
    float: right;
    margin-left: 20px;
    opacity: 0.8;
    font-size: 13px;
    cursor: help;
}
#modalTaskContent .bg-status {
    font-size: 13px;
    float: right;
    margin-top: -50px;
}
#modalTaskContent #pnlTaskZoneName {
    font-size: 0.75rem;
}
#modalTaskContent .form-group {
    margin-bottom: 0.5rem;
}
#modalTask .hide-after-time {
    display: none;
}
#modalTask.linked-task .hide-after-time {
    display: inline-block;
}

.group-connect-top {
    margin-bottom: 0px !important;
}
.group-connect-top .input-group-text {
   border-bottom-left-radius: 0px !important;
}
.group-connect-top input, .group-connect-top textarea {
   border-bottom-right-radius: 0px !important;
}
.group-connect-middle {
    margin-top: -1px;
    margin-bottom: 0px !important;
}
.group-connect-middle .input-group-text {
    border-radius: 0px !important;
}
.group-connect-middle input, .group-connect-middle textarea {
    border-radius: 0px !important;
}
.group-connect-middle .input-group-append .btn {
    border-radius: 0px !important;
}
.group-connect-bottom {
    margin-top: -1px;
}
.group-connect-bottom .input-group-text {
    border-top-left-radius: 0 !important;
}
.group-connect-bottom input, .group-connect-bottom textarea {
    border-top-right-radius: 0px !important;
}

textarea.form-control.textarea-sl {
    height: 50px;
}

.ribbon-box .logo {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 20px;
}
.ribbon-box h3 {
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    margin-bottom:10px;
}
.ribbon-box h3 i{
    margin-right: 10px;
    opacity: 0.9;
}
.ribbon-box:hover h3 i {
    opacity: 1;
}
.ribbon-box p {
    text-align: center;
    font-size: 14px;
}
.ribbon-box .logo img {
   width: 80%;
}

.app-box {
    cursor: pointer;
    min-height: 220px;
    border-radius: 10px;
    background-color: #f5f5f7;
}

.app-box:hover{
    background-color: #fbf7eb;
}

.switch-label {
    margin-right: 5px;
    font-size: 13px;
    line-height: 23px;
}

tr.dtrg-start .badge{
    font-size: 15px;
}

.card-body > .nav.btn-group {
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

.modal-body > .nav.btn-group {
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

.pnl-screenshot img {
    width: 100%;
}

.info-box {
    border-radius: 0.8rem;
}
.home .info-box {
    cursor: pointer;
}
.info-box .info-box-number {
    font-size: 25px;
    line-height: 25px;
    margin-top: 5px;
}
.info-box .info-box-text {
    font-size: 14px;
}
.info-box .info-box-content {
    padding: 0 15px;
}
.info-box .info-box-icon {
    min-width: 70px;
    border-radius: .8rem;
}
.info-box .info-box-icon > i {
    font-size: 32px;
    -webkit-transition: font-size 0.6s;
    -moz-transition: font-size 0.6s;
    -o-transition: font-size 0.6s;
    transition: font-size 0.6s;
}
.home .info-box:hover .info-box-icon > i {
    font-size: 45px;
}
#pnlTemplateList .info-box:hover .info-box-icon > i {
    font-size: 45px;
}
#pnlCustomTemplateList .info-box:hover .info-box-icon > i {
    font-size: 45px;
}
.info-box .badge {
    font-size: 12px;
    float: right;
    margin-top: 3px;
}

.browser-warning {
    margin-left: 10px;
    margin-bottom: 10px;
    background: #e6d6a4;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 3px;
}

.card-footer {
    background-color: #fff;
    border-radius: 0px 0px 10px 10px;
}

.card-footer .description-block > .description-header {
    font-size: 22px;
    margin-top: 5px;
}
.card-footer .description-block > .description-text {
    text-transform: initial;
}

.progress {
    border-radius: 5px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #28a745;
    background-color: #28a745;
}

.home .progress {
    margin-top: 5px;
    margin-bottom: 10px;
}

.home .progress span {
    position: absolute;
    right: 25px;
    line-height: 16px;
}

.progress-xl {
    height: 25px;
}

.progress-group {
    margin-right: 0.8rem;
}

.group-tranport i {
    font-size: 22px;
}

.navbar-white {
    background-color: #f5f5f7;
}

[class*='sidebar-light-'] {
    background-color: #f5f5f7;
}

.form-checkbox label {
    font-size: 14px;
    padding-left: 5px;
    padding-right: 10px;
    vertical-align: middle;
}

.form-checkbox label span {
    vertical-align: middle;
}

.form-checkbox label input[type='checkbox'] {
    vertical-align: middle;
    height: 18px;
    width: 18px;
    margin-right: 3px;
}

.modal-body .card {
    border: 1px solid #e9eaea;
    box-shadow: none;
}

.modal-body .card-header {
    height: 45px;
    padding-top: 5px;
    padding-bottom: 2px;
    padding-left: 10px;
    border-bottom: none;
}
.modal-body .card-header .card-tools{
    margin-top: 10px;
}
.modal-body .card-outline .card-header label.switch {
    float: left;
    margin-top: 3px;
    margin-right: 10px;
}
.card-header > .card-tools.nav-tools {
    margin-top: -42px;
}

.modal-body .card-details .card-header {
    height: 40px;
    padding-top: 10px;
    padding-left: 15px;
}

.modal-body .card-title {
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a;
}

#modalUser .modal-body .card-header, #modalMerchant .modal-body .card-header {
    height: 40px;
    padding-top: 8px;
}

#modalPriceTemplate .modal-body .card-header {
    padding-top: 10px;
}

.grid-hdr-chk {
    width: 25px !important;
    padding-left: 12px !important;
    font-size: 15px
}

.set-label img {
    max-width: 300px;
    max-height: 150px;
}

.tblTaskPackageList .thead-light th {
    font-size: 13px;
    padding: 5px;
}

.tblTaskPackageList tr td {
    font-size: 13px;
    line-height: 20px;
    padding: 5px;
}

.tblTaskPackageList tfoot {
    background: #f5f5f7;
    font-size: 13px;
}

.tblTaskPackageList tfoot td{
    border-bottom: 3px solid #e0e3e7;
    font-weight:500;
}

#modalTaskContent label {
    margin-bottom: .2rem;
    margin-left: 3px;
}

#modalTaskContent .form-check label {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0px;
    line-height: 15px;
}

#modalTaskPackageContent label {
    margin-bottom: .3rem;
    font-size: 13px;
}

#modalTaskContent .modal-header small {
    margin-left: 20px;
    margin-top: 5px;
}

#modalTaskContent .btn-group-sm i {
    font-size: 15px;
    margin-right: 5px;
    opacity: 0.9;
}

.timeline > div {
    margin-bottom: 10px;
    margin-right: 0px;
}
.timeline > div > i.fas {
    color: #fff;
    background-color: #adb5bd;
    margin-left: -15px;
    margin-top: 3px;
    line-height: 28px;
    height: 28px;
    width: 28px;
    left: 19px;
}

.timeline.sm .timeline-item {
    margin-left: 40px;
}

.timeline::before {
    border-radius: 0.25rem;
    background: #dee2e6;
    bottom: 0;
    content: '';
    left: 16px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 4px;
}

.timeline > div > .timeline-item {
    background: #fff;
    color: #495057;
    margin-left: 10px;
    margin-right: 15px;
    margin-top: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    width: 90%;
    font-size: 13px;
    box-shadow: none;
    border-radius: 0px;
    border-bottom: 1px solid #e9ecef;
}
.timeline > div > .timeline-item span.time {
    font-size: 13px;
    float: none;
    display: block;
    padding-top: 0px;
    padding-bottom: 5px;
}

.timeline i.fa-external-link-alt{
    margin-left: 5px;
}

.modal-body .timeline > div > .timeline-item > .timeline-body {
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.i-tooltip {
    margin-left: 5px;
}

#tblTaskList td .d-sm-none .btn-action {
    float: right;
    margin-top: -5px;
    margin-right: 5px;
}

#tblTaskList td .d-sm-none .btn-icon {
    float: right;
    margin-top: -5px;
}


.nav-link.push-menu {
    padding-top: 9px;
    margin-left: 4px;
    margin-right: 2px;
}

.form-group-status .input-group-text {
    min-width: 125px;
}

.form-group-fields .input-group-text {
    min-width: 125px;
}

#custom-tabs-account .input-group-text {
    min-width: 125px;
}

.form-group-status input {
    max-width: 400px;
}

.form-group-status select {
    max-width: 400px;
}

.form-group-status button.multiselect {
    height: 31px;
}

#custom-tabs-bill h4 {
    font-size: 18px;
    color: #545252;
    background: #efefef;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
    padding-left: 10px;
    margin-top: 20px;
}
#custom-tabs-bill h5 {
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
}
#custom-tabs-bill span {
    font-size: 16px;
}
#custom-tabs-bill .title {
    font-size: 30px;
    color: #28a745;
    font-weight: 600;
    margin-bottom: 10px;
}

#custom-tabs-bill .desc {
    font-size: 16px;
    line-height: 32px;
}

#custom-tabs-bill .description-block {
    background: #f5f5f7;
    width: 110px;
    padding-top: 1px;
    padding-bottom: 5px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 15px;
}

#custom-tabs-bill .description-block .description-text {
    font-size: 14px;
}

#custom-tabs-bill .description-block .description-header {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}


.task-edit-coordinates {
    padding-left: 0px;
    font-size: 0.75rem;
    margin-left: 10px;
    font-weight: 400;
}

.autocomplete-suggestions {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    overflow: auto;
    font-size: 14px;
    line-height: 25px;
    min-width: 735px;
    opacity: 1;
    padding: 5px;
    border-radius: 0px 0px .6rem .6rem;
    -webkit-box-shadow: 1px 2px 2px rgba(50, 50, 50, 0.34);
    -moz-box-shadow: 1px 2px 2px rgba(50, 50, 50, 0.34);
    box-shadow: 1px 2px 2px rgba(50, 50, 50, 0.34);
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-no-suggestion {
    padding: 2px 5px;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #000;
}

.autocomplete-group {
    padding: 2px 5px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    display: block;
    border-bottom: 1px solid #000;
}

.btn-search-customer {
    border: 1px solid #ced4da;
    border-right: none;
    border-left: none;
    color: #ccc;
    cursor: initial !important;
}

.btn-save-customer {
    border: 1px solid #ced4da;
    border-right: none;
    border-left: none;
    color: #ccc;
    cursor: pointer;
}

.btn-save-product {
    border: 1px solid #ced4da;
    border-left: none;
    color: #ccc;
    cursor: pointer;
}

.btn-map-view, .btn-map-delete {
    border: 1px solid #ced4da;
    border-left: none;
    color: #ccc;
    cursor: pointer;
}
.btn-map-view.btn-readonly, .btn-map-delete.btn-readonly{
    background: #f5f5f7;
}
.btn-map-point {
    border: 1px solid #ced4da;
    border-right: none;
    border-left: none;
    color: #ccc;
    cursor: pointer;
}
input#inp-dispatch-address {
    border-right: none;
}
input#inp-destination-address {
    border-right: none;
}

.progress-xxl {
    box-shadow: none;
    border-radius: 1px;
    height: 2.5rem;
    font-size: 16px;
    font-weight: 600;
    margin-right: 0px;
    margin-top: 30px;
    margin-bottom: 20px;
}


.progress-xxl span {
    text-align: center;
    line-height: 2.5rem;
    font-size: 16px;
}

.page-link {
    color: #262626;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
}
.page-link:hover {
    color: #28a745;
}

.page-item .page-link {
    border-color: #ced4da;
}
.page-item.disabled .page-link {
    border-color: #ced4da;
}
.page-item.active .page-link {
    background-color: #28a745;
    border-color: #28a745;
}

table.dataTable{
    margin-bottom: 10px !important;
}
div.dataTables_paginate ul.pagination {
    margin-bottom: 12px !important;
    font-size: 13px;
}
div.dataTables_wrapper div.dataTables_info {
    float: left;
    font-size: 13px;
    padding-top: 0em;
}
.card-body div.dataTables_length {
    margin-bottom: -30px;
}
.card-body .dataTables_length label {
    margin-bottom: -5px;
    margin-top: 8px;
    font-size: 13px;
}
.dataTables_length label select{
    height: calc(1.355rem + 2px);
    font-size: 100%;
    padding: 0.065rem 1.55rem 0.125rem 0.55rem;
}

#tblTaskList tbody > tr:last-of-type>td {
    border-bottom: 1px solid #dee2e6;
}
#tblTaskList tbody > tr:first-of-type > td {
    border-bottom: none;
}

#tblTaskList tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

#tblTaskList tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

#tblTaskList tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #fdfdfd;
    padding: 0px;
    padding-left: 6px;
    padding-right: 5px;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
}

.dataTables_scrollHead tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

.dataTables_scrollHead tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

.dataTables_scrollHead tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #f8f9fa;
    padding: 0px;
    padding-left: 2px;
    padding-right: 2px;
    border: 1px solid #eaeaea;
    border-radius: 5px;
}



#tblCustomerList tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

#tblCustomerList tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

#tblCustomerList tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #ffffff;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #eaeaea;
}

#tblProductList tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

#tblProductList tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

#tblProductList tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #ffffff;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #eaeaea;
}

#tblVehicleList tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

#tblVehicleList tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

#tblVehicleList tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #ffffff;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #eaeaea;
}

#tblReminderList tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

#tblReminderList tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

#tblReminderList tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #ffffff;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #eaeaea;
}

#tblInspectionList tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

#tblInspectionList tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

#tblInspectionList tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #ffffff;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #eaeaea;
}

#tblActiveAcct tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

#tblActiveAcct tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

#tblActiveAcct tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #ffffff;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #eaeaea;
}

.pnl-data-table tfoot {
    display: table-row-group;
    background: #f5f5f7;
}

.pnl-data-table tfoot th{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #777780;
}

.pnl-data-table tfoot .form-control{
    line-height: 1.2;
    height: 25px;
    font-size: 13px;
    background-color: #ffffff;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #eaeaea;
}

.btn-task-clear-filter {
    float: right;
    margin-right: 10px;
    display: none;
}
.icon-clear-filter {
    float: right;
    margin-right: 10px;
}

.btn-task-show-settings {
    float: right;
    margin-right: 10px;
}

.btn-customer-clear-filter {
    float: right;
    margin-right: 10px;
}

.btn-product-clear-filter {
    float: right;
    margin-right: 10px;
}

.btn-action .btn {
    padding: 2px 5px;
}

#pnlTaskList {
    min-height: 600px;
    padding-top: 5px;
}

#tblTaskList .badge-secondary, #tblTaskList .badge-success, #tblTaskList .badge-danger {
    min-width: 80px;
}

#pnlTaskList .utc-datetime{
    font-size:12px;
}

.b-d {
    background: #6c757d;
    padding: 1px 5px;
    color: #fff;
    cursor: default;
    border-radius: .5rem;
}
.b-p {
    background: #28a745;
    padding: 1px 5px;
    color: #fff;
    cursor: default;
    border-radius: .5rem;
}
.b-a {
    background: #007bff;
    padding: 1px 5px;
    color: #fff;
    cursor: default;
    border-radius: .5rem;
}
.b-f {
    background: #fd7e14;
    padding: 1px 3px;
    color: #fff;
    cursor: default;
    border-radius: .5rem;
}
.b-c {
    background: #9249ff;
    padding: 1px 5px;
    color: #fff;
    cursor: default;
    border-radius: .5rem;
}
.b-c5 {
    background: #9249ff;
    padding: 1px 5px;
    color: #fff;
    cursor: default;
    border-radius: .5rem;
}
.b-c6 {
    background: #996633;
    padding: 1px 5px;
    color: #fff;
    cursor: default;
    border-radius: .5rem;
}
.b-c7 {
    background: #dc3545;
    padding: 1px 5px;
    color: #fff;
    cursor: default;
    border-radius: .5rem;
}

.btn-da {
    color: #6c757d;
    font-size: 16px;
    min-width: 60px;
    display: inline-block;
}
.btn-da:hover{
    color: #fd7e14;
}
.btn-da>b{
    display: inline-block;
    font-weight: 400;
    font-size: 11px;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 8px;
    margin-bottom: -3px;
}
.da>b{
    display: block !important;
    margin-left: 28px !important;
    margin-bottom: -10px !important;
}
.da {
    color: #6c757d;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px !important;
}
.dc {
    font-weight: 600;
    cursor: pointer;
    font-size: 12px !important;
}
.dc:hover {
    color: #fd7e14;
}
.dc i{
    font-size: 14px;
    margin-right: 8px;
}
.da .fa-user-check {
    font-size: 16px;
    margin-right: 8px;
}
.da.rn .fa-user-check {
    float: left;
    margin-top: 7px;
}
.dn {
    color: #ecd6c4;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px !important;
}
.dn:hover{
    color: #fd7e14;
}
.dn .fa-user-clock {
    color: #fd7e14;
    font-size: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

.btn-st{
    cursor: pointer;
}
.btn-st:hover{
    opacity: 0.9;
    border: 1px dashed #ccc;
}

.input-group-text {
    background-color: transparent;
}

.chk-task-radio {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#modalBulkTaskAssignContent {
    max-height: 350px;
    padding-right: 10px;
    overflow-y: auto;
}
#modalBulkTaskAssignContent .sec-desc {
    font-size: 12px;
    opacity: 0.7;
    padding-top: 2px;
}
#modalBulkTaskAssignContent h2 {
    font-size: 14px;
    margin-top: 10px;
    margin-left: 2px;
    color: #535353;
}

#modalBulkTaskAssign .label-task-driver, #modalRoute .label-task-driver {
    color: #3e3e3e;
    cursor: pointer;
    user-select: none;
    padding-left: 5px;
    vertical-align: middle;
}

#modalBulkTaskAssign .count-label, #modalRoute .count-label, #pnlRoutePlanList .count-label {
    display: inline-block;
    float: right;
    font-size: 12px;
    z-index: 999990;
    min-width: 50px;
    text-align: right;
    padding-left: 5px;
}

#modalBulkTaskAssign table tr td, #modalRoute table tr td {
    padding-top: 5px;
    padding-bottom: 5px;
}

#modalBulkTaskAssign table tr:hover {
    background: #ecfff0;
}

.modal-content .sm-title {
    font-size: 14px;
    opacity: 0.8;
    display: block;
    margin-top: -5px;
    margin-bottom: 10px;
    overflow-y: hidden;
}
.modal-content .form-group label {
    font-size: 13px;
}

#modalRoute .pnl-driver-list {
    max-height: 228px;
    overflow-y: auto;
    padding-top: 5px;
    padding-left: 3px;
    padding-right: 10px;
}

#modalRoute .chk-task-driver{
    height: 16px;
    width: 16px;
    vertical-align: middle;
}

.b-st {
    position: absolute;
    right: 15px;
    line-height: 16px;
    font-size: 13px;
    margin-top: 3px;
}

.h-body {
    border: 1px solid #ced4da;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    overflow: auto;
    min-height: 75px;
    background-color: #f5f5f7;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #f5f5f7;
}

#modalBulkTaskStatusContent .input-group-text {
    min-width: 125px;
}

.input-group .plain {
    border: 1px solid #ced4da;
    border-left: none;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
}

#frameRefresh{
    display: none;
    height:10px;
    width:10px;
}

.red-sm {
    color: #ab1422;
    line-height: 15px;
    display: inline-block;
    margin-bottom: 15px;
}

.accordion > .card {
    margin-bottom: 0px;
    border-left: none;
    border-right: 0px;
    border-radius: 0px;
}

.accordion .card-body {
    padding-left: 20px;
}

.accordion .btn-link {
    color: #383838;
    font-size: 14px;
    font-weight: 400;
    padding-left: 0px;
}

.accordion > .card > .card-header {
    background: #fff;
}

.form-group-link {
    margin-bottom: 20px;
    display: block;
    font-size: 14px;
    text-align: right;
    margin-top: 5px;
}

.tbl-sm {
    margin: 10px;
    font-size: 13px;
}

.tbl-sm tr td{
    padding-right: 30px;
}

.btn-icon {
    margin-right: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 16px;
}

.task-fb-rate .fas {
    font-size: 25px;
    color: #ccc;
}

.task-fb-rate .fas.active {
    color: #EDB867;
}

.task-fb-comments {
    margin-bottom: 20px;
    margin-top: 10px;
}

.hdrDateFilter {
    font-size: 13px !important;
    text-align: center;
    background: none !important;
}

.main-header .input-group button.multiselect {
    background: #fff;
    border-left: none;
    font-size: 14px;
    line-height: 24px;
}

.multiselect-container label {
    font-weight: 500 !important;
    font-size: 13px !important;
}

.multiselect-container > li > a > label > input[type=checkbox] {
    margin-bottom: 3px;
    vertical-align: middle;
    margin-right: 5px;
}

.info-box-content input.chk {
    height: 20px;
    width: 20px;
    margin-top: 10px;
}

.report-list .info-box {
    margin-bottom: 0px;
    border-right: none;
    border-left: none;
    border-radius: 0px;
    border-top: none;
    cursor: pointer;
}

.report-list .info-box:hover {
    background: #f5f5f7;
}

.report-list .info-box .info-box-number{
    font-size: 15px;
}

.info-msg {
    font-size: 20px;
    color: #848484;
}

@media (max-width: 800px) {
    .main-header > .input-group {
        position: absolute;
        top: 65px;
    }
    .main-header #dateFilter {
        max-width: 120px;
        margin-left: 0px !important;
    }
    .main-header > .hdr-home{
        display: none;
    }
    .modal-lg {
        margin: 0px;
    }
}

.profile-user-box > span > img {
    width: 100px;
    height: 100px;
}

.profile-user-box > span {
    width: 100px;
    height: 100px;
    font-size: 50px !important;
    line-height: 100px;
}

.table > thead > tr > th {
    font-size: 13px;
}

.inp-num-sm {
    height: 25px;
    width: 70px;
    font-size: 14px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding-left: 5px;
}

.nav-sidebar ul.nav-treeview{
    margin-top: 10px;
    margin-bottom: 60px;
}

.mh-btn-group {
    margin-left: auto;
    margin-right: auto;
    margin-top: -15px;
    margin-bottom: 16px;
}

.icon-rnd {
    color: #777780;
    border: 2px solid #989898;
    height: 32px;
    border-radius: 50%;
    width: 32px;
    padding-top: 4px;
    font-size: 18px;
    margin-right: 5px;
    text-align: center;
}

.tr-task-driver .i-tooltip{
    float: right;
}

.nav-sidebar .nav-link p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 95px;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
}

.sidebar-mini .nav-sidebar .nav-link p {
    width: 85px;
}

.nav-treeview .nav-link p {
    font-size: 12px;
}

.localizer{
    display: none;
}

.nav-lang {
    padding-top: 6px;
    margin-top: 4px;
    height: 35px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}
.nav-lang span{
    vertical-align: top;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    padding-left: 3px;
}

.multiselect-selected-text {
    font-size: 14px;
    color: #495057;
}

.products-list.pl-sm .product-info {
    margin-left: 50px;
}

.products-list.pl-sm .product-title {
    font-size: 14px;
}

.products-list.pl-sm .product-description {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 90%;
}

div.dropdown-multicol {
    width: 30em;
}
div.dropdown-row {
    margin-bottom: 5px;
}
div.dropdown-row > a.dropdown-item {
    display: inline-block;
    width: 15%;
}

div.dropdown-row > a.dropdown-item img{
    height: 40px;
}

.img-bordered-sm {
    border-width: 1px;
    padding: 0px;
}

.p-user {
    background: #6c757d;
    color: #fff;
    border-radius: 50%;
    line-height: 35px;
    height: 35px;
    width: 35px;
    display: inline-block;
    text-align: center;
    font-size: 15px !important;
    font-weight: 400;
    vertical-align: middle;
    user-select: none;
    position:relative;
}

.p-user-lg {
    width: 90px;
    height: 90px;
    line-height: 85px;
    border: 2px solid #e0e0e0;
    font-size: 38px !important;
}

.p-user.p-online::after {
    content: "";
    height: 12px;
    width: 12px;
    position: absolute;
    margin-top: 23px;
    margin-left: 2px;
    font-size: 25px;
    background: #28a745;
    border: 2px solid #fff;
    border-radius: 50%;
}
.i-user {
    position: relative;
}
.i-user>img {
    object-fit: cover;
}
.i-user.p-online::after {
    content: "";
    height: 12px;
    width: 12px;
    position: absolute;
    margin-top: 24px;
    margin-left: -13px;
    font-size: 25px;
    background: #28a745;
    border: 2px solid #fff;
    border-radius: 50%;
}
#modalBulkTaskAssignContent .i-user.p-online::after {
    margin-left: -8px;
}
#modalRoute .i-user.p-online::after {
    margin-left: -8px;
}
#tblUserList .i-user.p-online::after {
    margin-left: -8px;
}

.pd-name {
    color: #3e3e3e;
    cursor: pointer;
    user-select: none;
    margin-left: 8px;
    vertical-align: middle;
}


.imageBox {
    position: relative;
    height: 400px;
    width: 400px;
    background: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    cursor: move;
}

    .imageBox .thumbBox {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        margin-top: -100px;
        margin-left: -100px;
        box-sizing: border-box;
        border: 1px solid #808080;
        box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5) !important;
        background: none repeat scroll 0% 0% transparent;
    }

    .imageBox .spinner {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        line-height: 400px;
        background: rgba(0,0,0,0.7);
    }

.widget-user-image .fa-camera-retro {
    position: absolute;
    text-align: center;
    font-size: 30px;
    color: #000000;
    opacity: 0.8;
    top: 32px;
    left: 32px;
    display: none;
    cursor: pointer;
}
.widget-user-image:hover .fa-camera-retro {
    display: inline-block;
}
.widget-user-image:hover .p-user {
    opacity: 0.9;
}
.widget-user-image:hover .img-circle {
    opacity: 0.9;
}
.widget-user .widget-user-image > img {
    height: 90px;
    width: 90px;
    object-fit: cover;
}

.img-demo {
    margin-top: 20px;
    margin-bottom: 30px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
    display: block;
}

.modal-height-700 {
    font-size: 15px;
    max-height: 700px;
    overflow-y: auto;
}

.modal-height-800 {
    font-size: 15px;
    max-height: 800px;
    overflow-y: auto;
}

.view-task-file img {
    width: 128px !important;
    margin-bottom: 5px;
    cursor: pointer !important;
}

.task-img-file-name {
    font-size: 12px;
    text-align: center;
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.btn-new-attach .badge {
    margin-left: 5px;
    font-size: 10px;
}

#custom-tabs-task-history {
    max-height: 650px;
    overflow-y: auto;
}
#custom-tabs-user-history {
    max-height: 650px;
    overflow-y: auto;
}

.modal-title-sm {
    font-size: 14px;
    line-height: 30px;
    margin-top: 5px;
    margin-right: 10px;
}

.modal-title .sub-title{
    opacity: 0.8;
}

.btn-view-dispatch {
    font-size: 0.75rem;
    display: block;
    text-align: right;
    padding-right: 3px;
}

.btn-pick2delivery {
    font-size: 0.75rem;
    position: absolute;
    right: 10px;
    z-index: 9999;
}

.inp-amount {
    text-align: right;
    font-weight: 500;
}

.ribbon-wrapper {
    opacity: 0.9;
}

.msg-template {
    height: 160px !important;
    max-width: 800px;
    font-size: 14px;
}

.pnl-msg-template .dropdown {
    display: inline-block;
    float: right;
}

.tooltip.show{
    opacity: 1;
    border-radius: .5rem;
}

.tooltip-inner {
    max-width: 300px !important;
    border-radius: .5rem;
}

.tooltip-inner img {
    max-width: 280px !important;
    margin-top: 8px;
    margin-bottom:8px;
}

.td-tag-new {
    color: #28a745;
    font-weight: bold;
    cursor: default;
}

.td-tag-overdue {
    color: #dc3545;
    font-weight: bold;
    cursor: default;
}

.alert-sm {
    padding: .25rem 0.75rem;
    font-size: 14px;
}

.addon-icon{
    float: right;
    width: 32px;
}

.todo-list > li {
    border-radius: 0px;
    border-left: none;
    padding: 7px;
    margin-bottom: 0px;
    background-color: transparent;
    border-bottom: 1px solid #e9ecef;
}
.todo-list > li.section{
    background: #f5f5f7;
}
.todo-list>li:last-of-type {
    border-bottom: none;
}
.todo-list .text {
    width: 30%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    margin-top: 6px;
    opacity: 0.9;
}
.todo-list .text .field-desc{
    display: block;
    font-weight: 400;
    font-size: 12px;
    margin-top: 5px;
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.todo-list .control {
    display: inline-block;
    width: 30%;
}
.todo-list > li .tools {
    color: #28a745;
    display: inline-block;
    float: right;
    font-size: 20px;
}

.todo-list .handle {
    vertical-align: top;
    margin-top: 6px;
    opacity: 0.9;
}
.todo-list > li .badge {
    font-weight: 500;
    margin-left: 0px;
    margin-right: 5px;
    vertical-align: middle;
}
.todo-list .form-control:disabled, .todo-list .form-control[readonly] {
    background-color: transparent;
    font-size: 13px;
    padding: 2px;
    height: 27px;
}

#pnlTemplateList .info-box {
    cursor: pointer;
}
#pnlCustomTemplateList .info-box {
    cursor: pointer;
}

#modalCustomFields .multiselect {
    line-height: 24px;
    min-width: 342px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    text-align: left;
}

.sort-highlight {
    background: #f4f4f4;
    border: 1px dashed #ddd;
    margin-bottom: 10px;
}
#pnlViewRoutePlanTaskList {
    min-height: 265px;
}
#pnlViewRoutePlanTaskList .sort-highlight {
    min-height: 59px;
}
#pnlViewRoutePlanTaskList .task input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    display: none;
}
#pnlViewRoutePlanTaskList .task input[type="checkbox"]:checked{
    display: inline-block;
}
#pnlViewRoutePlanTaskList .task:hover {
    background: #f5f5f7;
    cursor: pointer;
}
#pnlViewRoutePlanTaskList .task:hover input[type="checkbox"] {
    display: inline-block;
}
.tab-side-bar {
    margin-top: 42px;
    border-top: 1px solid #dee2e6;
    padding-top: 16px;
    padding-left: 15px;
}

.tbl-sort-highlight {
    background: #fff8e2;
    margin-top: 10px;
    margin-bottom: 10px;
}
.tbl-ui-sortable-handle {
    cursor: move;
    opacity: 0.8;
}
.tbl-sort-item {
    background: #f5f5f7;
}

.multiselect.dropdown-toggle::after {
    position: absolute;
    right: 6px;
    top: 45%;
    opacity: 0.9;
}

#custom-tabs-task-info .card-title, #custom-tabs-task-info .card-body {
    font-size: 13px;
}
#custom-tabs-task-info .card-title select {
    min-width: 345px;
}

.input-group-text.required::after {
    content: '*';
    color: #dc3545;
    margin-left: 5px;
}
.input-group-text.required-icon::after {
    content: '*';
    color: #dc3545;
    position: absolute;
    top: -1px;
    left: 24px;
}

#pnlTaskCustomFieldsList .input-group {
    margin-bottom: 10px;
    /*max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // causing issues */
}

.pnl-cust-template .dropdown-menu .dropdown-item i {
    min-width: 25px;
    text-align: center;
    font-size: 18px;
}

.badge-selected-cnt {
    margin-left: 12px;
    font-size: 13px;
    padding: 6px;
}
.badge-selected-cnt > i{
    margin-left: 5px;
    cursor: pointer;
}

.form-check-input {
    margin-top: .1rem;
}

.input-group-max-900 .input-group {
    max-width: 900px;
}

.input-group > .i-tooltip {
    border: 1px solid #ced4da;
    margin-left: 0px;
    border-left: 0px;
    padding: 3px 6px 0 6px;
    line-height: 22px;
    border-radius: 0 .5rem .5rem 0;
}

.ribbon-box-footer .btn-sm {
    float: right;
    padding-top: 0px;
    padding-bottom: 0px;
    min-width: 32px;
    margin-right: 10px;
}

.target-highlight {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}
.jq-toast-wrap .p-user {
    position: absolute;
    background: #f5f5f7;
    color: #212529;
    left: 10px;
}
.jq-toast-wrap .p-user i{
    font-size: 18px;
    color: #5f5f5f;
}
.jq-toast-wrap .icon {
    position: absolute;
    left: 8px;
    background: #f5f5f7;
    padding: 8px;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    text-align: center;
    color: #545456;
    font-size: 20px;
}
.jq-toast-wrap .icon.fa-store {
    padding: 6px;
}
.jq-toast-wrap .s-icon {
    position: absolute;
    right: 25px;
    top: 6px;
    font-size: 10px;
    cursor: pointer;
}
.jq-toast-wrap a {
    cursor: pointer;
    padding-bottom: 0px;
    color: #f5f5f7;
}
.jq-toast-wrap a:hover{
    color: #fff;
}
.jq-icon-info {
    background-image: none;
    padding-top: 15px;
}
.jq-has-icon {
    padding: 10px 10px 10px 55px;
}
.jq-toast-wrap .jq-icon-warning{
    cursor: pointer;
}
.jq-toast-single {
    border-radius: 10px;
}

@-webkit-keyframes target-fade {
    0% {
        background-color: rgba(255,255,153,.8);
    }

    100% {
        background-color: rgba(255,255,153,0);
    }
}

@-moz-keyframes target-fade {
    0% {
        background-color: rgba(255,255,153,.8);
    }

    100% {
        background-color: rgba(255,255,153,0);
    }
}

.card-header-tall {
    background: #6c757d;
    height: 135px;
    color: #fff;
}
.card-header-tall h3{
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: 22px;
}
.card-header-tall span{
    width: 100%;
    text-align: center;
    display: block;
    font-size: 12px;
}


.ribbon-box-footer > .sm {
    font-size: 11px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    display: block;
    color: #ccc;
}

.inp-driver-earning{
    text-align:right;
}

.pnl-recurring-msg, #pnlInvoiceScheduleCycleMsg {
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
    background: #28a745;
    border-bottom: 3px solid #1b8433;
    padding: 5px;
    border-radius: 3px;
    padding-left: 10px;
}

.recur-badge > .badge {
    min-width: 80px;
    font-weight: 500;
}

th .i-tooltip {
    margin-left: 0px;
    font-size: 11px;
    color: #9e9e9e;
    right: 25px;
    top: 2px;
}

#tblRecurringTaskList .badge{
    cursor: pointer;
}

.stp.fa-question-circle {
    color: #585858;
    opacity: 0.8;
    font-size: 12px;
}

.card-recurring {
    margin-bottom: 0px;
}
.card-recurring .card-header{
    height: 32px;
}
.card-recurring .card-header .fr{
    float: right;
}

.dataTables_filter input {
    height: 27px;
    line-height: 27px;
}

.card .card-tools {
    margin-right: 2px;
}

#modalTaskContent .modal-title{
    position: absolute;
}

.pnl-requirements button.multiselect {
    height: 31px;
}
.pnl-requirements.nocod button.multiselect {
    border-right-width: 1px;
}
.pnl-requirements.readonly button.multiselect {
    background: #f5f5f7;
}

.input-group-alert label {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.input-group-alert label input {
    height: 15px !important;
    width: 15px !important;
    margin-right: 0px !important;
}

.mtask-info {
    display: none;
    font-size: 13px;
    margin-bottom: 15px;
    background: #ffc107;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    font-weight: 500;
}
table.dataTable tr.dtrg-group td {
    background-color: #e0e0e0 !important;
}
table.dataTable tr.dtrg-group td {
    border-top: none;
}

.pnl-manage-linked {
    display: inline-block;
    font-size: 13px;
    margin-left: 10px;
    vertical-align: middle;
}
.pnl-manage-linked>label {
    vertical-align: middle;
    margin-right: 7px;
    margin-bottom: 0px;
}
.pnl-manage-linked>span {
    vertical-align: middle;
}

.multiselect-filter:hover{
    background-color: transparent !important;
}
.multiselect-filter input {
    font-size: 14px;
    margin-left: 5px;
    margin-right: 15px;
    margin-bottom: 5px !important;
    border-top: none;
    border-left: none;
    border-right: none;
}
.multiselect-filter .input-group-btn{
    display: none;
}
.multiselect-container > li.multiselect-group label {
    padding: 5px 20px 5px 10px;
    background: #e5e5e5;
    margin-left: 0px !important;
}
.multiselect-container > li.multiselect-group label:hover{
    background: inherit;
}

.msg-task-geo-fence {
    vertical-align: top;
    margin-right: 10px;
    font-size: 12px;
}
.msg-task-geo-fence .badge {
    padding-left: 8px;
    padding-right: 8px;
}


.k-block, .k-draghandle, .k-grid-header, .k-grouping-header, .k-header, .k-pager-wrap, .k-toolbar, .k-treemap-tile, html .km-pane-wrapper .k-header {
    background-color: #f5f5f7;
}

.k-scheduler td.k-today.k-state-selected, td.k-state-selected {
    opacity: 0.3;
}
.k-scheduler th.k-today {
    color: #fff;
}

.k-scheduler-layout tr + tr .k-scheduler-table > tbody > tr:last-child > td, .k-scheduler-layout tr + tr .k-scheduler-times tr:last-child > th, .k-scheduler-table > tbody > tr > .k-last {
    border-bottom-width: 1px !important;
}

.k-scheduler-toolbar .k-nav-current {
    font-weight: 600;
    margin-left: 10px;
}
.k-scheduler-toolbar .k-nav-today{
    display: none;
}
.k-scheduler-toolbar .k-nav-prev {
    border-radius: 3px 0px 0px 3px !important;
}

.k-scheduler-fullday .k-icon {
    margin-right: 5px;
}
.k-scheduler-fullday .k-button-text {
    margin-bottom: -3px;
}

.ace-container {
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 5px;
}
.ace-container #inpFormContent {
    width: 100%;
    height: 100%;
    position: relative;
}
.ace-container.sm{
    height: auto;
    border-radius: 0px 0px 5px 5px;
}

select.msel-acct-setting{
    height: 30px;
}

.k-primary {
    color: #434548 !important;
    border-color: #c3c3c8 !important;
}

.sche-btn-info {
    position: absolute;
    right: 15px;
    top: 825px;
    font-size: 13px;
    user-select: none;
}

i.fas.text-light {
    color: #e3e3e3 !important;
}

.form-group-card-hdr {
    margin-bottom: 0px;
    width: 100%;
    background: #f5f5f7;
    padding: 4px;
    padding-left: 8px;
    border: 1px solid #ced4da;
    border-bottom: none;
    border-radius: .5rem .5rem 0px 0px;
    font-weight: 400;
    color: #4a4a4a;
}
.form-group-card-hdr .i-tooltip{
    float: right;
    margin-right: 2px;
    margin-top: 3px;
}

.input-group-text-145 {
    min-width: 145px;
}

.hide-native-select {
    padding: 0px;
    border: none;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 0.25rem;
    flex: 1 1 auto;
}

.hide-native-select button.multiselect{
    text-align: left;
    height: 31px;
    padding-right: 6px;
    border-radius: .5rem;
}
.hide-native-select button.multiselect:hover{
    background: none;
}

.msg-warn {
    font-size: 12px;
    float: left;
    color: #000;
    background: #ffc107;
    padding: 5px;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 2px;
    margin-bottom: 10px;
}

.modal-title span.badge-secondary {
    font-size: 12px;
    vertical-align: middle;
    margin-top: -4px;
    margin-left: 10px;
    font-weight: 500;
}

.menu-hover:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

#btnRecurringSetting {
    line-height: 16px;
    margin-right: 3px;
}

.ribbon-free {
    float: right;
    margin-top: -12px;
    margin-right: -8px;
    color: #ccc;
}

.route-sum .info-box {
    border: none;
    background: transparent;
    margin-bottom: 0px;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
}

.modal-content {
    border-radius: 1rem;
}

.pnl-download-app {
    float: right;
    margin-top: -25px;
}

.pnl-download-app a.btn{
    text-decoration: none;
}

.webgrid-table-hidden {
    display: none;
}

div.dataTables_wrapper div.dataTables_processing {
    border: none;
    margin-top: 110px;
    background: transparent;
}
.dataTables_wrapper .dataTables_empty{
    font-size: 15px;
}

.dtfc-right-top-blocker {
    background-color: #f5f5f7 !important;
    border-top: 1px solid #dee2e6;
    margin-top: 6px;
    height: 70px !important;
}

div.dataTables_scrollBody {
    background: none !important;
}

#tblTaskList.dtfc-has-right tfoot {
    display: none;
}

.dt-chk .act {
    margin-left: 5px;
    margin-right: -6px;
}

#tblTaskList tr .dtfc-fixed-left .btn {
    border-color: transparent;
    background: none;
    color: #5b5b5b;
}

#tblTaskList tr .dtfc-fixed-left .btn:hover{
    color: #000;
}

.dataTables_scrollHeadInner thead tr th.dt-chk {
    padding-right: 50px;
}

input.inp-search-driver {
    margin-bottom: 15px;
}

.small-box h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 8px;
}
.small-box p {
    margin-bottom: 0px;
}

.callout {
    border: 1px solid #dee2e6;
    box-shadow: none;
    background: #fff;
    border-radius: 0.8rem;
}
.callout a{
    color: inherit;
}
.callout a:hover{
    color: inherit;
}
.callout button.close{
    font-size: 22px;
}

.pnl-task-assigning-msg {
    font-size: 13px;
    background: #fdf3d6;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 25px;
    height: 26px;
    border-radius: 8px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
}
.pnl-task-assigning-msg .btn{
    font-size: 13px;
}

.map-dialog .modal-body{
    padding: 0px;
}

#taskOpenStreetMap {
    width: 100%;
    min-height: 500px;
}

#taskOpenStreetMapCoord {
    position: absolute;
    top: 10px;
    right: 70px;
    font-weight: 500;
    background: #ffffff;
    padding: 5px 8px;
    color: #515151;
    border-radius: 4px;
    z-index: 999;
    font-size: 13px;
    height: 46px;
    padding-top: 10px;
    border-radius: .5rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
.leaflet-control-attribution{
    display: none;
}
.btn-min-100{
    min-width: 100px;
}

#modalPriceTemplate .i-tooltip, #modalAPIKey .i-tooltip {
    font-size: 11px;
    opacity: 0.7;
}

.input-group-text.np {
    padding-left: 7px !important;
    padding-right: 5px !important;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
    background: #ffffff;
}

#datetimeFilter {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: .5rem;
    padding: 0px;
    padding-bottom: 1px;
    margin-left: 5px;
}
#datetimeFilter #dateFilter{
    border: none;
    font-size: 14px;
    margin-left: 0px;
    padding: 4px 10px 3px 10px;
    display: inline-block;
    width: fit-content;
}
#dateFilter .fa-caret-down {
    color: #6b6b6b;
}

.task-list-hdr label.btn{
    font-weight: 400;
}

.main-header #datetimeFilter {
    height: 31px;
}

.main-header #timeRangeFilter {
    padding: 1px;
}

#formTask #pnlTaskDistance {
    font-size: 13px;
    float: right;
    margin-right: 5px;
    font-weight: 500;
}

#formTask .t-icon {
    font-size: 15px;
    margin-left: 2px;
}

.alert {
    border-radius: 0.8rem;
}

.border-red {
    border-bottom: 2px solid #dc3545;
}

.info-box label.switch {
    margin-bottom: 0px;
    margin-top: 10px;
}

.open-time {
    vertical-align: top;
    display: none;
}
.enabled .open-time {
    display: inline-block;
}
.open-time input, .pnl-break-time input {
    border: none;
    border-bottom: 1px solid #ccc;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 12px;
}
.open-time-text {
    vertical-align: top;
    display: inline-block;
    min-width: 100px;
    font-size: 13px;
    margin-left: 5px;
    font-weight: 400;
}
#modalMerchantContent .card-header .switch {
    margin-bottom: 0px;
    margin-top: 5px;
}
#modalMerchantContent .card-header .switch-label {
    vertical-align: top;
    font-size: 14px;
    font-weight: 500;
    line-height: 31px;
    margin-left: 5px;
    opacity: 0.8;
}

.info-box .info-box-content .tools {
    display: block;
    position: absolute;
    right: 10px;
    top: 5px;
}

.br-0 {
    border-right: none;
}

.btn-update-pod {
    border: none;
    padding: 0px;
    background: transparent;
}
.btn-update-pod:disabled{
    color: #b8b7b7 !important;
}
.i-tooltip.fa-mobile-alt {
    font-size: 18px;
    opacity: 0.8;
    vertical-align: middle;
}

.btn-view-acct{
    cursor:pointer;
}

#spanSearchResult {
    font-size: 13px;
    line-height: 20px;
    margin-top: 3px;
    padding-left: 10px;
}
#spanSearchResult i{
    margin-left: 15px;
    margin-right: 5px;
    cursor:pointer;
}

.tox .tox-collection--list .tox-collection__item {
    padding: 2px 8px !important;
}

.inp-grey {
    background-color: #f5f5f7;
    border: none;
    border-radius: 10px;
}
.inp-grey:focus{
    background-color: #e9ecef;
}

div.dataTables_wrapper div.dataTables_filter input {
    background: #f5f5f7;
    border-color: #f5f5f7;
    border-radius: .5rem;
}

.form-group-arrow .input-group-prepend.arrow:after {
    content: "";
    width: 22px;
    height: 22px;
    border-color: #ced4da #c6d1dd transparent transparent;
    transform: rotate(45deg) translate(-6px, 10px);
    border-width: 1px;
    border-style: solid;
    background: #f5f5f7;
    display: block;
    z-index: 10;
    margin-top: 2px;
    margin-left: -10px;
}
.form-group-arrow .input-group-prepend.arrow > .input-group-text {
    padding-right: 30px;
}
.form-group-arrow select.arrow {
    margin-left: -22px;
    padding-left: 25px;
}

#modalBulkImportTask iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    border-width: 0;
    min-height: 700px;
    border-radius: 0px 0px 10px 10px;
}
#modalBulkImportTask .modal-body{
    padding: 0px;
}

.modal-banner {
    background: #ffc107;
    margin-bottom: 20px;
    padding: 10px;
    margin-left: -16px;
    margin-right: -16px;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}

.text-security {
    text-security: disc;
    -moz-text-security: disc;
    -webkit-text-security: disc;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-show-key {
    margin-right: 20px;
    cursor: pointer;
    opacity: 0.8;
}
.btn-show-key:hover{
    color: #28a745;
}
.td-switch {
    vertical-align: middle;
    margin-top: -2px;
    display: inline-block;
}
.td-switch label.switch{
    margin-bottom: 0px;
}
.td-switch > span{
    vertical-align: top;
    font-size: 13px;
    line-height: 22px;
    opacity: 0.8;
    margin-left: 3px;
}

.k-scrollbar-h tr + tr .k-scheduler-times {
    border-bottom-width: 0px;
}

.tab-table-btn {
    float: right;
    margin-left: 15px;
    margin-top: -5px;
    margin-bottom: 8px;
}

.dropdown-item i.mr-2 {
    min-width: 20px;
    color: #62626a;
    text-align: center;
}
.dropdown-toggle.no-arrow::after {
    display: none;
}
.card-no-board {
    border: none !important;
}
.card-no-board .card-header{
    padding-left: 0px;
    padding-right: 0px;
}
.card-no-board .card-body{
    padding: 0px;
}

span.switch-label {
    vertical-align: top;
    font-size: 13px;
    margin-left: 6px;
}
span.sort-no{
    opacity: 0.7;
}

img.img-square {
    border-radius: 10px;
    object-fit: cover;
    width: 80px;
    height: 80px;
}
img.img-square.sm {
    border-radius: 5px;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.card-nav > .card-header {
    padding: 0px;
    margin: 0.35rem 0.56rem 0.35rem 0.56rem;
    border-bottom: 1px solid #dee2e6;
}
.card-nav > .card-header > .card-tools {
    margin-top: -5px;
}
.card-nav > .card-header > .card-title{
    margin-bottom: 10px;
    font-weight: 400;
}
.btn-group-nav > .btn {
    padding-bottom: 8px;
    font-weight: 500;
    border: 0px;
    border-radius: 0px !important;
    border-bottom-color: #dee2e6;
}
.btn-group-nav > .btn:hover{
    background: none;
    border-bottom: 3px solid #dee2e6;
}
.btn-group-nav > .btn.active{
    background: none;
    border-bottom: 3px solid #28a745;
}
.btn-group-nav > .btn > span{
    font-weight: 500;
    color: #666666;
}
.btn-group-nav > .btn.active > span {
    color: #28a745;
}
.btn-group-nav.line {
    border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-link.disabled {
    opacity: 0.6;
}
.td-img-icon {
    cursor: pointer;
}
.td-img-icon .fa-edit{
    left: 102px;
    top: 10px;
    position: absolute;
    opacity: 0.5;
    font-size: 12px;
}
.td-img-icon:hover img{
    opacity: 0.7;
}
.td-img-icon:hover .fa-edit{
    opacity: 0.9;
}
.td-img-icon > .img-icon{
    border-radius: 50%;
    margin-left: 15px;
    object-fit: cover;
    width: 80px;
    height: 80px;
}
.td-img-icon > .p-camera {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 25px;
    border: 1px dashed;
    background: none;
    border-radius: 50%;
    display: block;
    text-align: center;
    opacity: 0.4;
}
.td-img-icon > .p-camera:hover{
    opacity: 0.8;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
    background-image: none;
}
.modal-dialog .description-block {
    margin: 0px;
}
.modal-dialog .description-block h5 {
    margin-bottom: 0px;
    font-size: 16px;
}
.modal-dialog .description-block h6 {
    font-size: 14px;
    opacity: 0.9;
}
.modal-dialog .description-block > .description-text {
    text-transform: none;
    margin-top: 0px;
    margin-bottom: 10px;
    display: block;
    opacity: 0.8;
}
.k-slot-cell .sche-group-title {
    font-weight: 400 !important;
    font-size: 13px !important;
}
.k-scrollbar-h tr + tr .k-scheduler-times {
    border-bottom-width: 0px !important;
}
.k-scheduler-toolbar .k-nav-current {
    font-size: 13px !important;
}
.k-scheduler-header th {
    font-weight: 400;
}
.k-scheduler-layout tr + tr .k-scheduler-times th strong {
    font-weight: 400;
    font-size: 13px;
}
.k-scheduler .k-scheduler-table th strong {
    font-weight: 400;
}
.k-scheduler-toolbar .k-nav-current .k-lg-date-format {
    font-weight: 500;
}
.k-toolbar {
    background-color: #f5f5f7 !important;
}
.k-scheduler-toolbar.k-toolbar {
    background: none !important;
    padding: 10px 10px;
}
.k-scheduler-footer.k-toolbar {
    background: none !important;
    padding: 10px 10px;
}
.k-button {
    background: none !important;
}
.k-scheduler-adgendagroup{
    font-weight: 400;
}
.k-scheduler-table .k-today, .k-today > .k-scheduler-datecolumn, .k-today > .k-scheduler-groupcolumn {
    background: none !important;
}
.k-tabstrip {
    background-color: #f5f5f7;
}
.k-scheduler-group-cell img {
    width: 32px !important;
    height: 32px !important;
    margin-right: 5px;
    object-fit: cover;
}
.k-calendar .k-today .k-link {
    box-shadow: inset 0 0 0 1px #28a745 !important;
}
.k-calendar td.k-state-selected .k-link {
    border-color: #28a745 !important;
    background-color: #28a745 !important;
}
.calender-hint {
    position: absolute;
    right: 10px;
    font-size: 12px;
}
.nav-tips.stat {
    position: absolute;
    right: 0px;
    top: -5px;
}
.table input[type='checkbox'].t2::after {
    content: "↑";
    font-size: 12px;
    opacity: 0.7;
    float: left;
    margin-left: -5px;
    margin-top: -16px;
}
.table input[type='checkbox'].t3::after {
    content: "\1F4C5";
    font-size: 9px;
    opacity: 0.7;
    float: left;
    margin-left: -5px;
    margin-top: -16px;
}
.table input[type='checkbox'].t4::after {
    content: "\2692";
    font-size: 9px;
    opacity: 0.8;
    float: left;
    margin-left: -5px;
    margin-top: -16px;
}
.table input[type='checkbox'].t5::after, .table input[type='checkbox'].t6::after, .table input[type='checkbox'].t7::after {
    content: "\1F6D2";
    font-size: 9px;
    opacity: 0.7;
    float: left;
    margin-left: -5px;
    margin-top: -16px;
}
.video-container {
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    border: 1px solid #dee2e6;
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.btn-group-act {
    position: absolute;
    height: 30px;
    line-height: 30px;
    margin-top: -6px;
    margin-left: 15px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.2s linear;
}
.btn-group-act > button{
    margin-right: 5px;
    opacity: 0.9;
}
.btn-group-act > button:hover{
    color: #28a745;
    opacity: 1;
}
tr.dtrg-start:hover .btn-group-act {
    visibility: visible;
    opacity: 1;
}

.megamenu {
    position: static;
    display: inline-block;
}

.megamenu .dropdown-menu {
    width: 100%;
    margin-top: 5px !important;
}
@media (min-width: 988px) {
    .megamenu .dropdown-menu {
        margin-left: 115px !important;
    }
}
.megamenu .dropdown-menu.size-2 {
    max-width: 600px;
}
.megamenu .dropdown-menu.size-3 {
    max-width: 860px;
}
.megamenu .dropdown-menu.size-4 {
    max-width: 1080px;
}
.megamenu .dropdown-menu > .container {
    margin: 0px;
    padding: 0px;
    padding-right: 10px;
}
.megamenu .dropdown-menu .row{
    width: 100%;
}
.megamenu .dropdown-menu .row h6{
    font-size: 14px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    padding-left: 1.25rem;
}
.dark-mode .megamenu .dropdown-menu .row h6 {
    border-bottom: 1px solid #6c757d;
}
.megamenu .dropdown-menu .form-check:hover{
    background-color: #e9ecef;
    border-radius: 5px;
}
.dark-mode .megamenu .dropdown-menu .form-check:hover {
    background-color: #575c60;
}
.megamenu .dropdown-menu .form-check label{
    margin-bottom: 0px;
    width: 100%;
}
.megamenu .dropdown-menu .form-check label > input {
    margin-top: 2px;
    margin-right: 5px;
}
.megamenu .dropdown-menu .form-check label > span {
    font-size: 13px;
    display: inline-block;
    vertical-align: top;
    user-select: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 80%;
}
.megamenu .dropdown-menu ul.list-unstyled {
    max-height: 300px;
    overflow-y: auto;
}
.megamenu .input-filter-search {
    height: 24px;
    font-size: 13px;
    margin-bottom: 10px;
    border-top: none;
    border-left: 0px;
    border-radius: 0px;
    border-right: none;
    padding-top: 0px;
    padding-left: 20px;
}
.radio-group {
    padding-left: 6px;
}
.radio-group > label{
    margin-bottom: 15px;
}
.radio-group .custom-radio {
    display: inline-block;
    margin-right: 10px;
}
.radio-group .custom-radio .custom-control-label{
    line-height: 26px;
}

.navbar-badge {
    right: 1px;
    top: 2px;
}
.modal-body .modal-form-title {
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: 500;
    opacity: 0.8;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 5px;
    padding-left: 5px;
}
.modal-body .modal-form-title i{
    margin-right: 20px;
    float: left;
    font-size: 55px;
    opacity: 0.7;
}
.modal-body .modal-form-title span{
    font-size: 13px;
    font-weight: 400;
    display: block;
    line-height: 18px;
    margin-bottom: 5px;
}
.border-left-success {
    border-left: 5px solid #28a745;
}
.border-left-grey {
    border-left: 5px solid #6c757d;
}
.op-7{
    opacity: 0.7;
}
.widget-user .custom-control.custom-radio {
    width: 60%;
}
.box-scr {
    max-height: 460px;
    overflow-y: auto;
}
#pnlPS label{
    font-weight: 600;
    opacity: 0.8;
}
.iframe-map {
    border-radius: 10px;
}
#modalViewSingleTask .iframe-map, #modalRoutePlan .iframe-map {
    margin-top: 10px;
}

.inv-title {
    font-size: 14px !important;
    font-weight: 500;
    margin-bottom: 10px;
}
.radio-txt-sub {
    display: block;
    margin-top: 5px;
    margin-bottom: 15px;
    opacity: 0.8;
    margin-left: 3px;
}
.curr-negative::before {
    content: "-";
}
#tblInvLines.table td {
    padding: 1rem 0.5rem;
}
.modal-header.grey {
    background: #f5f5f7;
    padding-left: 22px;
}
.card.grey {
    background: #f5f5f7;
    padding: 10px;
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0px;
    margin-top: -16px;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}
.card-email {
    border: 1px solid #ced4da;
    border-radius: 4px;
    max-height: 450px;
    overflow-y: auto;
}
.div-email-preview {
    user-select: none;
    padding: 0px 20px 20px 20px;
}
.div-email-preview a {
    pointer-events: none;
}
textarea.auto-grow {
    min-height: 100px;
    width: 100%;
    overflow-y: hidden;
    border: none;
    resize: none;
    font-size: 14px;
}
.card.card-hdr {
    border-top: 4px solid #ccc !important;
}
.card.card-hdr .card-header .badge {
    float: right;
    font-size: 13px;
    font-weight: 400;
    min-width: 100px;
}
.mce-editor-bottom-toobar {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-top: none;
    text-align: right;
}

.scroll-340 {
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}

.form-check-sort{
    padding-left: 0px;
}
.form-check-sort li {
    display: block;
    border-bottom: 1px solid #ced4da;
    padding-top: 5px;
    padding-left: 5px;
}
.form-check-sort li .handle{
    float: right;
    padding-right: 10px;
    opacity: 0.7;
    cursor: move;
}
.form-check-sort label {
    margin-bottom: 5px;
    font-weight: 400 !important;
}
.form-check-sort label input {
    margin-right: 5px;
    vertical-align: text-top;
}

#modalTask .modal-full>#modalTaskContent{
    padding-left: 33%;
}
#modalTask #pnlListLinkedTasksEdit {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 30%;
}
#modalTask #pnlListLinkedTasksEdit .hdr {
    font-size: 20px;
    line-height: 35px;
    font-weight: 500;
    padding-left: 5px;
    margin-bottom: 15px;
}
#modalTask #pnlListLinkedTasksEdit .cnt{
    max-height: 622px;
    overflow-y: auto;
    overflow-x: hidden;
}

.image-radio {
    cursor: pointer;
}
.image-radio input {
    position: absolute;
    left: 20px;
    top: 5px;
}

img.buz-logo {
    max-width: 300px;
    max-height: 100px;
}

.pnl-msel-group span {
    font-size: 13px;
}

.drag-over {
    border: 2px dashed #9E9E9E !important;
    border-radius: 10px;
}
#modalTask .pnl-task-drop-attachment {
    border: 2px dashed transparent;
}
#modalTask .drag-over {
    padding-left: 5px;
    padding-right: 5px;
}

a.btn-break-time-remove {
    line-height: 35px;
    display: inline-block;
    margin-left: 15px;
    vertical-align: sub;
}

.pnl-time-break-text {
    padding: 4px 12px !important;
    overflow-y: auto;
    cursor: pointer;
}

#pnlNotifyRestrictedPeriodTxt span {
    cursor: pointer;
}
#pnlNotifyRestrictedPeriodTxt span:hover{
    background-color: #f7cc4c;
}

#driverTipOptionsContainer ul li {
    display: block;
    margin-bottom: 8px;
    margin-left: 5px;
    font-size: 13px;
    opacity: 0.8;
}
#driverTipOptionsContainer ul li strong{
    display: inline-block;
    min-width: 60px
}

.autocomplete-suggestions.mini {
    min-width: 100px;
}

#modalFormContent .form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
}
#modalFormContent .ui-sortable-helper {
    background: #ccc;
    border-radius: 10px;
}

/*** Image modal ***/
.img-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: #939393;
    width: 50px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}
.img-nav-left {
    left: 10px;
}
.img-nav-right {
    right: 10px;
}
.img-thumb-active {
    border: 1px solid #007bff;
    box-shadow: 0 0 6px rgba(0,123,255,0.6);
    transform: scale(1.05);
}
/*** End Image modal ***/

/*** Dashboard ***/
.grid-stack .card {
    margin-bottom: 0px;
    height: 100%;
}
.grid-stack .card .card-title{
    -moz-user-select: none;
    -webkit-user-select: none;
}
.grid-stack .card .card-header {
    cursor: move;
}
.grid-stack .card .card-body {
    height: 100%;
    overflow-y: auto;
}
.grid-stack .card .card-body::-webkit-scrollbar-thumb {
    display: none;
}
.grid-stack .card .card-body:hover::-webkit-scrollbar-thumb {
    display: block;
}
.grid-stack.read-mode .remove-widget {
    display: none;
}
.grid-stack.read-mode .card-header {
    cursor: default;
}
.stacked-bar {
    display: flex;
    height: 15px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}
.stacked-segment {
    height: 100%;
    transition: opacity 0.2s;
}
.stacked-segment:hover {
    opacity: 0.8;
}
.stacked-item{
    color: #484848;
    padding: 8px;
    cursor: pointer;
}
.stacked-item:hover{
    background: #f5f5f7;
    border-radius: 10px;
}
.stacked-item.fs{
    font-size: 13px;
}
.stacked-item > .text-secondary{
    display: block;
    font-size: 12px;
}
.stacked-item .box-icon{
    display: inline-block;
    min-width: 35px;
    height: 35px;
    line-height: 36px;
    border-radius: 50%;
    text-align: center;
    margin-right: 10px;
    font-size: 18px;
    margin-left: -5px;
}
.stacked-item .i-user.p-online::after{
    margin-left: -7px;
}
.stacked-item .drv-name{
    max-width: 40%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
#pnlGridStack .card-body > .msg-center {
    position: absolute;
    top: 50%;
    bottom: 50%;
    width: 100%;
    display: block;
    text-align: center;
}
#pnlGridStack .task-fb-rate .fa-star {
    font-size: 14px;
}
.dash-alert {
    margin: .8rem .6rem .5rem .6rem;
}
.demo-report-list .card-body {
    min-height: 260px;
}
.load-bar {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #afafaf, #d7d7d7);
    background-size: 200% 100%;
    animation: slide-bar 1s linear infinite;
    display: none;
}
@keyframes slide-bar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
/*** End Dashboard ***/

/*** Route ***/
.pnl-side-task-list .task {
    padding: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    font-size: 14px;
    border-left: 5px solid #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-bottom: 1px solid #e9ecef;
}
.pnl-side-task-list .task.checked {
    background-color: #ffeeee !important;
}
.pnl-side-task-list .task:last-of-type{
    border-bottom: none;
}
.pnl-side-task-list .task div {
    overflow: hidden;
    white-space: nowrap;
}
.pnl-side-task-list .task .desc {
    margin-top: 8px;
    color: #737373;
    font-size: 13px;
}
.pnl-side-task-list .task .desc i{
    font-style: normal;
    margin-right: 3px;
}
.pnl-side-task-list .task span {
    float: right;
}
.pnl-side-task-list .task span.chk{
    margin-left: 10px;
}
.pnl-side-task-list .task .num {
    font-size: 14px;
    line-height: 45px;
    float: left;
    color: #676767;
    display: block;
    min-width: 32px;
    text-align: center;
    font-weight: 500;
    cursor: move;
    margin-right: 5px;
}
.pnl-side-task-list .task.no-sort .num {
    cursor: default;
}
.pnl-side-task-list .task .num::after {
    content: "↑↓";
    font-size: 11px;
    opacity: 0.6;
    float: right;
    margin-top: -20px;
    margin-right: 4px;
}
.pnl-side-task-list .task.no-sort .num::after {
    display: none;
}
.pnl-side-task-list .task span.tools{
    margin-top: -3px;
    display: none;
}
.pnl-side-task-list .task span.tools a{
    padding: .2rem .2rem;
    font-size: 18px;
}
.pnl-side-task-list .task:hover span.tools {
    display: block;
}

#modalRoutePlan .modal-dialog.modal-full .modal-content {
    height: 95vh;
}
.modal-pnl-auto-height {
    min-height: 200px;
    max-height: calc(95vh - 220px);
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-pnl-auto-height.short {
    max-height: calc(95vh - 265px);
}
#modalRoutePlan .form-check-label {
    font-size: 14px;
    opacity: 0.7;
    margin-left: 5px;
    user-select: none;
    vertical-align: middle;
    min-width: 140px;
}
@media (max-width: 799px) {
    #modalRoutePlan .modal-dialog.modal-full .modal-content {
        height: auto;
    }
    #modalRoutePlan #pnlViewRoutePlanTaskList {
        height: auto;
        margin-top: 30px;
    }
}
#modalRoutePlan .map-controls {
    position: absolute;
    bottom: 85px;
    right: 10px;
    z-index: 5;
}
#modalRoutePlan .map-controls button {
    display: block;
    width: 40px;
    height: 40px;
    margin: 10px 0;
    font-size: 18px;
    line-height: 40px;
    cursor: pointer;
    border: 1px solid #f3f3f3;
    color: #515151;
    border-radius: 50%;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}
.inp-dropdown {
    height: 31px;
    font-size: 14px;
    border: 1px solid #ced4da;
    border-left: none;
    border-radius: 0 .5rem .5rem 0;
}
.inp-dropdown > a{
    padding: 4px 7px 4px 4px;
    font-size: 13px;
    color: #ccc;
}
.inp-dropdown > a:hover{
    color: #000;
}
.dark-mode .inp-dropdown {
    border-color: #6c757d;
}
.dark-mode .inp-dropdown > a {
    color: #6d6d6d;
}
.dark-mode .inp-dropdown > a:hover {
    color: #ffffff;
}
.inp-dropdown .dropdown-item{
    font-size: 13px;
}
.inp-dropdown .dropdown-item > strong {
    margin-right: 10px;
}
#pnlRouteTimeRestrictMsg, #pnlRoutePlanTimeRestrictMsg {
    font-size: 12px;
    padding-left: 40px;
}
/*** End Route ***/