/* Global Styling Component */

:root{
    --vh: 0;
}

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

::-webkit-scrollbar-track {
    background-color: #f2f6f9;
}

::-webkit-scrollbar-thumb {
    background-color: #dce2e6;
    border-radius: 10px;
}

.light-panel {
    background: #fff;
    margin-top: 30px;
    /* top: -20px; */
}

.beacon-filter {
    width: 280px;
    position: fixed;
    z-index: 2;
    box-shadow: 2px 8px 5px 2px rgb(226 226 226);
    transition: 0.3s;
}

.beacon-filter::-webkit-scrollbar {
    width: 0.6em;
}

.beacon-container {
    width: calc(100% - 280px);
    margin-left: 280px;
    transition: 0.3s;
}

.beacon-container>.card {
    margin-bottom: 0;
    /* margin-top: 1rem; */
    border-radius: 0;
}

.tracking-date {
    position: absolute;
    z-index: 2;
    background-color: #fff;
    padding: 5px 0px;
    border-radius: 8px;
    top: 8px;
    box-shadow: 1px 1px 8px 3px rgb(0 0 0 / 8%);
    margin-left: auto;
    margin-right: auto;
    left: calc(50% - 135px);
    text-align: center;
    border: 1px solid #d0d0d0;
}

#mapid {
    z-index: 1;
    outline: none;
}

.tracking-overlay {
    position: absolute;
    display: flex;
    /* padding: 25px 35px; */
    bottom: 0;
    z-index: 1;
    background-color: #fff;
    width: 100%;
    flex-direction: column;
    height: auto;
    transition: 0.3s;
    margin-bottom: -200px;
    /* box-shadow: 10px 0px 9px 4px rgb(1 1 1 / 16%); */
}

.tracking-overlay.show {
    transition: 0.3s;
    margin-bottom: 0;
}

.tracking-overlay .device-info {
    position: absolute;
    top: -100px;
    right: 0;
    background-color: #fff;
    width: 500px;
    height: 100px;
    z-index: 0;
    padding: 25px 15px 15px 60px;
    border-radius: 120px 0 0 0;
}

.tracking-overlay .device-info>.item {
    display: block;
    padding: 4px;
    padding-left: 16px;
    position: relative;
}

.tracking-overlay .device-info>.item.inline {
    display: inline-block;
}

.tracking-overlay .device-info>.item>:not(.inline)i {
    position: absolute;
    left: 0;
}

.history-information {
    display: flex;
    padding: 15px 35px;
    z-index: 1;
    box-shadow: 10px 0px 9px 4px rgb(1 1 1 / 16%);
    /* height: 130px; */
}

.history-information .info {
    flex: 1;
    /* padding: 15px; */
}

.history-information .history-control {
    max-width: 180px;
    flex: 0 0 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.history-information .history-control .btn {
    margin-left: 2px;
    margin-right: 2px;
}

.tracking-profile {
    max-width: 250px;
    flex: 0 0 250px;
}

.tracking-profile-container {
    display: flex;
    flex-direction: row;
    padding-top: 15px;
}

.tracking-profile-container .avatar {
    flex: 0 0 60px;
    max-width: 60px;
}

.tracking-profile .user-info {
    width: 98%;
    float: left;
    font-size: 14px;
}

.tracking-profile .user-info h5 {
    font-size: 14px;
}

.tracking-profile .speed-info {
    width: 98%;
}

.info .datestart {
    font-size: 10px;
}

.info .location-info {
    height: 44px;
    font-size: 11px;
}

.slider-info {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slider-info .datestart {
    width: 140px;
    text-align: center;
    background-color: #f1f1f1;
    border-radius: 20px;
    padding: 6px 15px;
    line-height: 1;
    font-weight: 500;
    box-shadow: 0 0 7px 2px #00000000;
}

.slider-info .dateend {
    float: right;
    width: 140px;
    text-align: center;
    background-color: #f1f1f1;
    border-radius: 20px;
    padding: 6px 15px;
    line-height: 1;
    font-weight: 500;
    box-shadow: 0 0 7px 2px #00000000;
}

/* TIMELINE FOR TRACKING */
.timeline-container {
    padding: 15px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
}
.timeline-header {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}
.timeline {
    list-style-type: none;
    padding-left: 0;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: #e0e0e0;
}
.timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 30px;
}
.timeline-marker {
    position: absolute;
    left: 0;
    top: 5px;
    height: 16px;
    width: 16px;
    background: #fff;
    border: 2px solid #007bff;
    border-radius: 50%;
}
.timeline-item:first-child .timeline-marker {
    background: #007bff;
}
.timeline-content {
    background: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}
.timeline-date {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 5px;
}
.timeline-desc {
    font-weight: 600;
    color: #212529;
}
.timeline-location {
    font-size: 0.9rem;
    color: #495057;
    margin-top: 3px;
}

/*Chrome*/

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /* input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #fff;
    } */
    /* input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    } */
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        background: #095d86;
    }
}

/** FF*/

input[type="range"]::-moz-range-progress {
    background-color: #095d86;
}

input[type="range"]::-moz-range-track {
    background-color: #9a905d;
}

/* IE*/

input[type="range"]::-ms-fill-lower {
    background-color: #095d86;
}

input[type="range"]::-ms-fill-upper {
    background-color: #9a905d;
}

/* end IE */

.beacon-filter .search input {
    min-width: 0;
}

.tracking-btn-play {
    width: 35px;
    height: 35px;
    padding: 10px;
    font-size: 10px;
}

.tracking-btn-side {
    width: 25px;
    height: 25px;
}

.list {
    padding: 0;
    list-style-type: none;
}

.list>li {
    padding: 8px 15px;
    border-bottom: 1px solid #ececec;
}

.list>li>i {
    position: absolute;
    left: 15px;
    margin-top: 4px
}

.list>li.selected {
    background-color: #3d94d2;
    color: #fff;
}

.list.with-icon li {
    position: relative;
    padding-left: 35px;
}

.list.with-icon>li>i {
    position: absolute;
    left: 12px;
    top: 10px;
}

.tracking-btn-play {
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    padding: 15px;
    background-color: #0375fb !important;
}

.tracking-btn-side {
    width: 38px;
    height: 38px;
    font-size: 11px;
    padding: 5px;
    border-radius: 50%;
    text-align: center;
    background-color: #eaeaea;
}

.main .container-fluid {
    padding: 0 15px;
}

.header-fixed .app-body {
    width: 100%;
}

.aside-menu-fixed .aside-menu {
    position: fixed;
    right: 0;
    height: 100%;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    border: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.08);
    padding: 15px;
}

.aside-menu-fixed.aside-menu-hidden .main {
    max-width: 1920px;
    margin: 0 auto;
}

.form-control::-webkit-input-placeholder {
    color: #999 !important;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #999 !important;
    opacity: 1
}

.form-control::-ms-input-placeholder {
    color: #999 !important;
    opacity: 1
}

.form-control::placeholder {
    color: #999 !important;
    opacity: 1
}

.breadcrumb-container {
    background-color: white;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    border: 0;
    padding: 10px;
    color: #55576b;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1), 0 0px 6px rgba(0, 0, 0, 0.08);
}

.breadcrumb-item {
    display: inline-block;
}

.valign-top {
    vertical-align: top !important;
}

.strong {
    font-weight: bold;
}

small.required {
    color: red;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: #c0c7cb;
    background-clip: content-box;
    border-color: transparent;
    border-style: solid;
    border-width: 1px 2px;
}

.sidebar .sidebar-nav::-webkit-scrollbar-track {
    background-color: #f2f6f9;
    border-right: 1px solid #f2f6f9;
    border-left: 1px solid #f2f6f9;
}

.o-hide {
    overflow: hidden;
}

body {
    background-color: #f9f9f9;
    font-family: 'Heebo', sans-serif;
    /* overflow: hidden; */
    font-size: 10pt;
}

a {
    cursor: pointer;
}

#rightPane #container {
    max-width: 1600px;
    margin: 0;
}

.form-group {
    margin-bottom: 0;
    min-height: 75px;
}

.form-group textarea {
    margin-bottom: 10px;
}

.form-control {
    padding: 4px 10px;
    border: 1px solid #aaaaaa;
    border-radius: 0;
}

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

.dropdown.open .dropdown-menu {
    display: block;
}

button.btn-transparent {
    background-color: transparent !important;
}

.input-group-append .btn, .input-group-prepend .btn {
    z-index: 1;
}

.h-100p {
    height: 100%;
}

.invalid-feedback {
    transition: all linear 0.2s;
    opacity: 1;
    display: block;
    min-height: 20px;
    color: #da0402;
}

.invalid-feedback.ng-hide {
    opacity: 0;
}

.ng-hide {
    opacity: 0;
    transition: none 0;
}

fieldset {
    display: block;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 15px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: 1px solid #c2cfd6;
    width: 100%;
}

legend {
    width: auto;
    padding: 10px;
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    border-radius: 3px;
    border: 0;
    /* border-bottom: 3px solid #1787af; */
}

.btn-secondary {
    border-radius: 3px;
    border: 0;
    /* border-bottom: 3px solid #899ba5; */
}

.btn-warning {
    border-radius: 3px;
    border: 0;
    /* border-bottom: 3px solid #e4ad07; */
}

.btn-danger {
    border-radius: 3px;
    border: 0;
    /* border-bottom: 3px solid #dc5857; */
}

.btn-success {
    border-radius: 3px;
    border: 0;
    background-color: #2B5A85;
    /* border-bottom: 3px solid #41a965; */
}

.btn-success:hover {
    background-color: #1B395E;
}

.btn-grey {
    background-color: #f2f2f2;
    color: #000 !important;
}

.input-button input {
    border-radius: 3px 0 0 3px;
}

.input-button button {
    border-radius: 0 3px 3px 0;
    border: 0;
    padding: 3px 10px;
    font-size: 9pt;
}

input.currency {
    text-align: right;
}

.group-left .input-group-addon {
    background-color: #f0f3f5;
    border: 1px solid #aaa;
    border-right: 0;
    padding: .375rem .75rem;
    border-radius: 3px 0 0 3px;
}

.group-left input {
    border-radius: 0 3px 3px 0;
}

.group-right .input-group-addon {
    background-color: #e0dede;
    border: 1px solid #aaa;
    border-left: 0;
    padding: 3px 10px;
    border-radius: 0 3px 3px 0;
}

.group-right input {
    border-radius: 3px 0 0 3px;
}

/* End of Global Styling */

/* Navbar Sytling */

.app-header.navbar .navbar-brand {
    background-image: url('../images/logo.png');
}

.profile-nav {
    display: table-cell;
    padding: 6px 0;
    text-align: left;
    min-width: 100px;
}

a.brand-name {
    font-size: 11pt;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    margin-left: 15px;
}

a.brand-name span {
    padding-left: 10px;
}

a.brand-name:hover {
    text-decoration: none;
}

.branch-name {
    display: block;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: table-row;
}

.navbar .img-avatar {
    height: 30px;
    margin: 0 10px 0 10px;
}

.nav .uname {
    display: table-row;
}

.nav .dropdown-toggle::after {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 16px;
}

.app-header.navbar .nav-item {
    margin-right: 5px !important;
}

.profile-img {
    display: inline-block;
    align-items: center;
    vertical-align: middle;
}

.navbar .sidebar .active.dropdown-toggle, .sidebar .nav-link.active, .sidebar .navbar .active.dropdown-toggle {
    background: #63A2C2;
    color: #fff;
}

.nav-link.ds.active {
    background: #5691af;
    color: #fff;
}

.navbar .sidebar .dropdown-toggle i, .sidebar .nav-link i, .sidebar .navbar .dropdown-toggle i {
    color: #fff;
}

.app-header.navbar, .app-header.navbar .navbar-brand {
    background-color: #0f3057;
}

.navbar .navbar-nav .dropdown-toggle, .navbar-nav .nav-link, .navbar-nav .navbar .dropdown-toggle, .navbar-nav .nav-link:hover {
    color: #000 !important;
}

.navbar .sidebar .dropdown-toggle:hover, .sidebar .nav-link:hover, .sidebar .navbar .dropdown-toggle:hover {
    background: #5691af;
}

.header-fixed .app-header {
    position: fixed;
    z-index: 999;
    padding: 0 10px 0 10px;
    box-shadow: none;
    top: 0;
}

.app-header.navbar .navbar-brand {
    border: 0;
}

.app-header.navbar {
    height: 56px;
    border-bottom: 1px solid #d2dbe0;
}

.app-header.navbar, .app-header.navbar .navbar-brand, .header-fixed .app-header {
    color: #fff;
}

.app-header.navbar .navbar-brand {
    width: 60px;
    margin-right: 0px;
    background-size: 35px auto;
    padding-right: 0px;
    padding-left: 15px;
}

.header-fixed .app-body {
    /* position: fixed;
    height: calc(100vh - 55px) !important; */
}

.breadcrumb {
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
    border-radius: 0;
}

.breadcrumb li {
    font-size: 11pt;
}

/* Delete this for unfixed Header */

/* .breadcrumb-container{
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 1;
}
.row.main-header{
    margin-top: 46px;
}
.row.main-body{
    margin-top: 50px;
}
.toolbar {
    border-bottom: 1px solid #ccc;
    padding: 5px 5px 10px 5px;
    position: fixed;
    background-color: #fff;
    width: 100%;
    z-index: 2;
} */

/* -- */

.profile-nav {
    display: table-cell;
    padding: 8px 0;
    text-align: left;
    min-width: 100px;
}

.branch-name {
    display: block;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: table-row;
}

.nav-toggle {
    color: #fff !important;
}

.navbar .img-avatar {
    height: 30px;
    margin: 0 10px 0 10px;
}

/* .navbar .dropdown-toggle::after {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 20px;
} */

/* End of Navbar Sytling */

/* Toolbar */

.toolbar {
    border-bottom: 0;
    padding: 0 15px;
    /* text-align: right; */
}

.toolbar .filter {
    color: #1d3b4a;
    /* padding: 2px 10px 2px 14px; */
    border: 0;
    border-width: 1px 1px 3px;
    float: right;
    margin: 0;
    display: flex;
    background: #f3f6f8;
    padding: 0 0 0 15px;
    line-height: 20px;
    border-radius: 20px;
}

.toolbar .filter-item {
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
}

.toolbar .filter-item:not(:last-child)::after {
    content: "";
    width: 1px;
    height: calc(100% - 14px);
    margin-top: 7px;
    margin-bottom: 7px;
    background-color: #9e9e9e;
    position: absolute;
    right: 0;
}

.toolbar .filter input, .toolbar .filter select {
    border: 0;
    padding: 7px 10px;
    vertical-align: middle;
    background-color: transparent;
    line-height: 22px;
}

.filter-radio {
    line-height: 28px;
    padding: 4px 8px;
    display: inline-block;
}

.toolbar .filter .search-container input {
    border: 1px solid #aaa;
    padding: 4px 20px 4px 5px;
}

.toolbar .filter .ui-select-bootstrap>.ui-select-match>.btn {
    background-color: transparent;
    border: 0;
    padding: 7px 10px;
}

.toolbar .filter .search, .toolbar .filter .date-range {
    display: inline-block;
}

.toolbar .filter .filter-label {
    display: inline-block;
}

.toolbar .filter .date-range input {
    width: 140px;
}

.toolbar button i {
    margin-right: 5px;
}

.toolbar .filter .select-filter {
    display: inline-block;
    width: 200px;
}

.toolbar .filter .select-filter select {
    width: 100%;
    border: 0;
}

.toolbar button.btn, .toolbar a.btn {
    border: 0;
    margin: 0;
    letter-spacing: 1px;
    margin-right: 0;
    margin-left: 10px;
    color: #fff;
    border-radius: 25px;
    padding: 8px 25px;
    font-size: 9pt;
    text-transform: uppercase;
}

.toolbar button.btn-primary {
    background-color: #4B9CD3;
    transition: all 0.4s;
}

.toolbar button.btn-default:hover {
    background-color: #f3f3f3;
    transition: all 0.4s;
}

.toolbar .title {
    font-size: 12pt;
    min-width: 100px;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding-right: 8px;
}

.search input {
    min-width: 300px;
}

/* End of Toolbar */

/* Sidebar Styling */

.sidebar-fixed .sidebar, .sidebar .sidebar-nav {
    width: 100%;
}

.sidebar-fixed .sidebar {
    position: relative;
}

.tree, .sidebar, ul.fancytree-container {
    padding-top: 0;
}

.row.main-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #fff;
}

.nav-head {
    text-align: center;
    margin: 0px;
    color: #fff;
    padding: 0;
    font-size: 10pt;
    background-image: url('../images/trucks.png');
    box-shadow: 0 0 6px 1px #e0dede;
    border-radius: 0;
    height: 95px;
    background-size: cover;
    background-position-y: center;
    margin-bottom: 15px;
}

.navbar-overlay .btn-primary, .navbar-overlay .btn-primary:not(:disabled):not(.disabled).active, .navbar-overlay .btn-primary:not(:disabled):not(.disabled):active, .navbar-overlay .show>.btn-primary.dropdown-toggle {
    border: 0;
    border-radius: inherit;
}

.navbar-overlay {
    background-color: rgba(255, 255, 255, 0.23);
    position: absolute;
    height: 95px;
    width: 100%;
}

.navbar-overlay button {
    background-color: #4B9CD3;
    border: 0;
    padding: 8px 16px;
    border: 0;
}

.navbar-overlay .btn-group {
    margin-top: 30px;
}

.navbar-overlay .btn-group button:last-child {
    border-radius: 0 10px 10px 0;
    margin-left: -1px;
    border-left: 1px solid #2c6994;
}

.navbar-overlay .btn-group button:first-child {
    border-radius: 10px 0 0 10px;
    margin-left: 0;
}

.sidebar-fixed .sidebar, .sidebar .sidebar-nav {
    width: 100%;
    background-color: #f3f3f3;
    color: #000;
}

.ui-layout-column>.ui-splitbar {
    background-color: #fff;
    background-image: none;
    border-right: 1px solid #ccc;
}

.ui-layout-column>.ui-splitbar>a {
    display: none !important;
}

.ui-splitbar-icon-left {
    border-top: 0.45em solid transparent;
    border-bottom: 0.45em solid transparent;
    border-right: 0.45em solid #4B9CD3;
    margin-top: 0.45em;
}

.tree {
    width: 100%;
    background-color: #63a2c2;
    padding-bottom: 50px;
}

ul.fancytree-container {
    background-color: transparent;
    color: #000;
}

span.fancytree-title {
    font-size: 10pt;
    white-space: pre-wrap;
    width: 75%;
    font-weight: 300;
    padding: 7px 7px 7px 26px;
}

.fancytree-active {
    background-color: #e2e1e6;
}

.fancytree-treefocus span.fancytree-active span.fancytree-title, .fancytree-treefocus span.fancytree-selected span.fancytree-title, span.fancytree-active span.fancytree-title, span.fancytree-selected span.fancytree-title {
    background-color: transparent;
}

span.fancytree-focused span.fancytree-title {
    outline: 0;
}

span.fancytree-node {
    padding: 0px 11px;
    height: 38px;
    position: relative;
}

ul.fancytree-container {
    padding: 0;
    border: 0;
}

span.fancytree-custom-icon {
    width: 24px;
    padding: 5px;
    font-size: 10pt;
    color: #5d5c67;
    height: 20px;
    display: inline-block;
    margin-left: 0px;
    background-position: 0 0;
    position: absolute;
    top: 5px;
}

.fancytree-container {
    border: none !important;
}

.fancytree-treefocus {
    outline: none;
}

.fancytree-plain span.fancytree-selected span.fancytree-title:hover, .fancytree-plain span.fancytree-active span.fancytree-title {
    background-color: transparent;
}

.fancytree-expander {
    position: absolute;
    right: 0;
    margin-top: 7px;
}

.fancytree-exp-c span.fancytree-expander, .fancytree-exp-cl span.fancytree-expander, .fancytree-exp-e span.fancytree-expander, .fancytree-exp-el span.fancytree-expander {
    right: 10px;
    position: absolute;
    background-image: url(../images/caret-right.png);
    background-size: contain;
    width: 18px;
    background-position: 0;
    margin: 0;
    height: 100%;
    transition: all 0.4s;
}

.fancytree-exp-e span.fancytree-expander, .fancytree-exp-el span.fancytree-expander {
    transform: rotate(90deg);
    transition: all 0.4s;
}

.sidebar {
    margin-left: 0;
}

/* End of Sidebar Styling */

/* Loading */

.loading {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.37);
    vertical-align: middle;
    line-height: 100vh;
    top: 0;
    display: none;
}

#inner-loading {
    width: 95%;
}

.loader {
    position: relative;
    margin: 0 auto;
    width: 75px;
    top: 40%;
}

.loader:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

.circular {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@-webkit-keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }

    40% {
        stroke: #0057e7;
    }

    66% {
        stroke: #008744;
    }

    80%, 90% {
        stroke: #ffa700;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }

    40% {
        stroke: #0057e7;
    }

    66% {
        stroke: #008744;
    }

    80%, 90% {
        stroke: #ffa700;
    }
}

/* End of Loading */

/* Login Styling */

.login-parent {
    background: rgb(93, 157, 189);
    background: linear-gradient(45deg, rgba(93, 157, 189, 1) 0%, rgba(91, 121, 161, 1) 35%);
}

.login-parent input.submit {
    width: 100%;
    background: rgb(93, 157, 189);
    background: linear-gradient(45deg, rgba(93, 157, 189, 1) 0%, rgba(91, 121, 161, 1) 35%);
    border: 0;
    text-transform: uppercase;
    font-size: 12pt;
}

.login-parent .card-group>.card {
    border-radius: 10px;
}

.login-parent .login-img {
    display: inline-block;
    width: 30px;
}

.login-parent .login-title {
    display: block;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
}

.login-parent .login-logo {
    width: 50px;
    float: right;
}

.login-parent .signin-title {
    color: #48626C;
    font-size: 18pt;
    font-weight: 500;
    display: inline-block;
}

/* End of Login Styling */

/* Dashboard Styling */

.dashboard {
    padding: 15px 10px;
}

.card.shadow {
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1), 0 0px 6px rgba(0, 0, 0, 0.08);
}

.card.square {
    border-radius: 0px;
}

.card.hoverable {
    padding: 15px;
}

.dashboard .card {
    margin-bottom: 1.8rem;
    padding: 24px 32px;
}

.card.dashboard-toolbar {
    position: sticky;
    top: 0;
    z-index: 99;
    padding: 5px 25px;
}

.the-icons {
    padding: 5px 5px;
    display: flex;
    align-items: center;
    height: 100%;
}

.card-link {
    width: 100%;
    display: block;
    padding: 10px 0px 0px 10px;
    font-size: 8pt;
}

.state-text h1 {
    height: 36px;
}

.state-text h5 {
    min-height: 45px;
}

.header-dashboard {
    /* margin-bottom: 15px; */
    float: left;
    width: 100%;
}

.month-pick {
    display: block;
    float: right;
}

.month-pick span {
    padding-right: 10px;
}

.header-dashboard select {
    width: 200px;
    padding: 6px;
    display: inline-block;
    background-color: transparent;
}

.state-text {
    text-align: right;
}

/* End of Dashboard Styling */

/*Datatables */

table.dataTable, table.dataTable.no-footer {
    margin: 0;
    border-top: 0;
    border-collapse: collapse;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border: 0;
}

table.dataTable thead {
    text-transform: uppercase;
    text-align: center;
}

table.dataTable td, table.dataTable th {
    border: 0;
    border-left: 0;
    border-top: 0;
}

table.dataTable tbody td, table.dataTable tbody th {
    padding: 6px 15px;
    line-height: 30px;
}

table.dataTable tbody tr:last-child td {
    border-bottom: 1px solid #ddd;
}

.dataTables_wrapper {
    padding: 0;
}

.in-tab .fixed-table .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    overflow: auto !important;
    height: calc(100vh - 328px) !important;
    max-height: calc(100vh - 328px) !important;
}

.fixed-table .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    overflow: auto !important;
    height: calc(100vh - 268px) !important;
    max-height: calc(100vh - 268px) !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-right: 15px;
}

table.dataTable td .btn {
    border-radius: 3px;
    width: 30px;
    height: 30px;
    font-size: 9pt;
    padding: 4px;
    background-color: transparent;
    border-color: #cecece;
    text-align: center;
    color: #797777;
}

table.dataTable td .btn:hover {
    background-color: rgba(1, 1, 1, 0.1);
}

table.dataTable .selected td button:hover {
    background-color: #79b4de;
}

th, td {
    white-space: nowrap;
}

tr.selected td .btn {
    color: #fff;
}

.dataTables_length {
    margin-top: 0;
    margin-left: 20px;
    padding-top: 4px;
}

tfoot td {
    padding: .75rem;
    border-bottom: 1px solid #a4b7c1;
}

table tr {
    background-color: #fff;
}

.DTFC_LeftHeadWrapper, .DTFC_RightWrapper {
    z-index: 1;
}

table.dataTable tbody tr.selected {
    background-color: #3d94d2 !important;
    color: #fff !important;
}

table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
    background-color: #77b9e4;
}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
    background-color: #ffffff;
}

.DTFC_ScrollWrapper {
    height: auto !important;
}

/* .DTFC_RightBodyLiner{
    overflow-x: hidden;
}
.DTFC_RightWrapper table.dataTable.row-border td, .DTFC_RightWrapper table.dataTable.row-border th{
    border-left: 1px solid #ccc;
    border-right: 0;
} */

.dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button.current:hover {
    background: #4B9CD3;
}

.page-link, .pagination li a, .pagination-datatables li a {
    border: 0;
    border-radius: 4px;
}

/* End of Datatables */

/* Select2 */

.select2-container {
    max-width: 100% !important;
    min-width: 100% !important;
}

.select2-container .select2-choice .select2-arrow, .select2-container .select2-choice {
    background-image: none;
    background-color: #fff;
}

.select2-container .select2-choice {
    height: 31px;
}

.select2-search {
    padding-left: 1px;
    padding-right: 1px;
}

.ui-select-choices-row:not():hover {
    background-color: #f0efef;
    color: #000;
}

.ui-select-no-choice {
    padding: 5px 10px;
}

.select2-container:focus {
    box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, .25);
}

.select2-results .select2-highlighted {
    background: #3875d7;
}

.select2-results .select2-highlighted:hover {
    color: #fff;
}

.select2-search input {
    width: 100% !important;
}

.input-group>.select2-container {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

.input-group>.select2-container {
    min-width: auto !important;
}

.input-group>.select2-container .select2-choice {
    border-radius: 4px 0 0 4px;
}

.btn-load-more {
    width: 100%;
    margin-top: 5px;
    font-size: 8pt;
    background-color: #8f8f8f;
    color: #fff;
}

.joborder-modal .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    height: calc(100vh - 285px) !important;
    max-height: calc(100vh - 285px) !important;
}

.xxl-modal .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    height: calc(100vh - 235px) !important;
    max-height: calc(100vh - 235px) !important;
}

/* .ui-select-choices-row-inner{
    padding: 0!important;
}

.ui-select-choices-row-inner > div:first-child{
    padding: 6px 20px;
} */

/* End of Select2 */

/* Checkbox and RadioButton */

.control-group {
    display: inline-block;
    vertical-align: top;
    background: #fff;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 200px;
    height: 210px;
    margin: 10px;
}

.control {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    cursor: pointer;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control:hover input~.control__indicator, .control input:focus~.control__indicator {
    background: #ccc;
}

.control input:checked~.control__indicator {
    background: #2aa1c0;
}

.control:hover input:not([disabled]):checked~.control__indicator, .control input:checked:focus~.control__indicator {
    background: #0e647d;
}

.control input:disabled~.control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked~.control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    left: 7px;
    top: 5px;
    width: 6px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.control--checkbox input:disabled~.control__indicator:after {
    border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
    left: 7px;
    top: 7px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #fff;
}

.control--radio input:disabled~.control__indicator:after {
    background: #7b7b7b;
}

.input-group-append .control {
    margin: 0;
    margin-top: 5px;
    margin-left: 10px;
}

/* .select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
  }
  .select select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 10px 15px;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: #e6e6e6;
    color: #7b7b7b;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  .select select::-ms-expand {
    display: none;
  }
  .select select:hover,
  .select select:focus {
    color: #000;
    background: #ccc;
  }
  .select select:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .select__arrow {
    position: absolute;
    top: 16px;
    right: 15px;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #7b7b7b transparent transparent transparent;
  }
  .select select:hover ~ .select__arrow,
  .select select:focus ~ .select__arrow {
    border-top-color: #000;
  }
  .select select:disabled ~ .select__arrow {
    border-top-color: #ccc;
  } */

/* End of Checkbox and Radio Button */

/* Tabs Pane */

.nav-tabs .nav-link, .nav-tabs .navbar .dropdown-toggle, .navbar .nav-tabs .dropdown-toggle {
    border-bottom: 1px solid #ccc;
}

.nav-tabs .nav-item.active .nav-link {
    border: 1px solid #ccc;
    border-bottom: 1px solid #fff;
}

.tab-content {
    border: 1px solid #ccc;
}

.nav-tabs .nav-item.active .nav-link {
    color: #118cb7;
}

.nav-tabs .nav-item .nav-link i {
    margin-right: 5px;
}

/* End of Tabs */

/* Modal */

/* .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.43);
}
.modal-backdrop.fade, .modal.fade {
    opacity: 1;
}
.modal.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}
.modal .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    transform: translate(0,-25%);
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px auto;
} */

/* .modal-dialog {
    max-width: 100%;
    margin: 0;
} */

.modal-small .modal-dialog {
    max-width: 500px;
    margin: 0 auto;
    margin-top: 25vh;
}

.modal-xl {
    max-width: 1400px;
}

.modal-fitcontent {
    max-width: fit-content;
    max-width: -moz-fit-content;
    margin-top: 0;
    margin-bottom: 0;
}

.modal-content {
    border: none;
}

.modal-link .modal-dialog {
    max-width: 500px;
    margin: 0 auto;
    margin-top: 25vh;
}

.modal-link .modal-content {
    border-radius: 10px;
}

.modal table.dataTable thead th {
    border-top: 1px solid #ddd;
}

/* End of Modal */

/* Header Dropdown */

.app-header.navbar .dropdown-menu {
    top: 50px;
    font-size: 10pt;
    border: 0;
    border-radius: 5px;
    box-shadow: 2px 4px 9px rgba(132, 132, 132, 0.45);
}

/* .app-header.navbar .dropdown-menu:before {
    content: '';
    width: 0;
    height: 0;
    border-width: 10px;
    border-top-color: transparent;
    border-style: solid;
    border-right-color: transparent;
    border-bottom-color: #4B9CD3;
    border-left-color: transparent;
    display: block;
    position: absolute;
    top: -20px;
    left: 148px;
} */

.dropdown-header {
    padding: 16px 4px;
    background: #fff;
    border-bottom: 1px solid #c2cfd6;
    /* color: #fff; */
    font-size: 10pt;
}

.navbar .dropdown-toggle.profile-dropdown {
    padding: 8px 14px;
    color: #fff;
}

.profile-img {
    color: #fff;
}

.dropdown-header strong {
    font-weight: normal !important;
}

.dropdown-item i {
    color: #666a6c;
}

.dropdown-menu a.dropdown-item {
    border-bottom: 0 !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #eee;
}

.dropdown-menu {
    z-index: 1027;
}

.nav-menu>li {
    width: 120px;
    text-align: center;
}

/* End of Dropdown */

/* Alertify */

.alertify .ajs-header {
    text-transform: uppercase;
    background: #ffffff;
    border-bottom: 0;
}

.alertify .ajs-footer {
    background: #ffffff;
    border-top: 0;
}

.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
    background: #3593D2;
    color: #fff;
    border-radius: 3px;
}

.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel {
    border-radius: 3px;
    border: 1px solid #cecece;
}

.alertify-notifier .ajs-message.ajs-success {
    color: #000;
    height: auto;
    font-size: 10pt;
    background: rgb(255, 255, 255);
    text-shadow: none;
    text-align: left;
    border-left: 10px solid rgb(91, 189, 114);
    padding-left: 64px;
}

.alertify-notifier .ajs-message.ajs-error {
    background: rgb(255, 255, 255);
    text-shadow: none;
    padding: 10px 18px !important;
    border-left: 10px solid rgb(217, 92, 92);
    color: #000;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.alertify .ajs-body {
    min-height: 10px;
}

.alertify .ajs-body .ajs-content {
    padding: 5px 24px 5px 16px;
}

/* .alertify-notifier .ajs-success:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00c";
    display: block;
    position: absolute;
    color: #5bbd72;
    top: 32%;
    left: 22px;
    font-size: 15pt;
}

.alertify-notifier .ajs-error:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f071";
    display: block;
    position: absolute;
    color: #d95c5c;
    top: 6px;
    left: 22px;
    font-size: 15pt;
} */

.alertify-cover {
    position: fixed;
    z-index: 1981;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-color: #252525;
    opacity: .5;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-property: opacity, visibility;
    transition-property: opacity, visibility;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
}

.alertify {
    border: 0;
    border-radius: 2px;
}

.alertify-button {
    border-radius: 3px;
    border: 0;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
    font-weight: normal;
    font-family: 'Proxima Nova', sans-serif;
}

.alertify-button-ok {
    border-bottom: 3px solid #0f627f;
    color: #fff;
    background-color: #20a8d8;
}

.alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus {
    background-color: #20a8d8;
    border: 0;
}

.alertify-button-cancel {
    background-color: #c2d0d5;
    border: 0;
}

.alertify-button-cancel, .alertify-button-cancel:hover, .alertify-button-cancel:focus {
    background-color: #d6dbe1;
    border: 0;
}

.alertify-buttons {
    text-align: right;
}

.alertify-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, .25);
}

.alertify-log-success {
    background-color: #fff;
    border: 1px solid #5aba59;
    border-left: 10px solid #5aba59;
    color: #000;
    text-shadow: none;
}

.alertify {
    position: fixed;
    z-index: 99999;
    top: 50px;
    left: 37%;
    width: 400px;
    margin: 0 auto;
    opacity: 1;
}

.alertify, .alertify-log {
    font-family: 'Proxima Nova';
    font-size: 11pt;
}

/* End of Alertify */

/* table */

.table.no-border td, .table.no-border th {
    border: 0;
}

.wrapper-table {
    width: 100%;
    overflow: auto;
}

.table td, .table th {
    padding: 8px 16px;
    vertical-align: middle;
}

.table thead th {
    padding: 7px 10px;
    border-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
}

.table .select2-container .select2-choice {
    border: 1px solid transparent;
    border-radius: 0;
}

.table .select2-dropdown-open .select2-choice {
    border: 1px solid #5897fb;
}

.button-row {
    font-size: 7pt;
    padding: 5px 10px;
}

.ui-select-choices {
    top: auto;
    left: auto;
    width: inherit;
}

.btn-default-table {
    border: 0;
    padding: 8px;
    width: 100%;
    background-color: #20c997;
    border-radius: 0;
    color: #fff;
}

/* table */

.table-list th, .table-list td {
    border: 0;
}

.main-form {
    padding: 10px;
    min-height: calc(100vh - 107px);
}

#jo-tab .tab-content .tab-pane {
    max-height: 1000px;
    min-height: 1000px;
    overflow-y: auto;
    overflow-x: hidden;
}

.table-list td {
    padding: 0;
    border: 1px solid;
}

.circle-o {
    border-radius: 50%;
    border: 3px solid #ffb65c;
    height: 12px;
    width: 12px;
    background-color: #fff;
}

.line-o {
    background-color: #c6dacf;
    height: 15px;
    width: 2px;
    margin: 0 auto;
}

.line-t {
    background-color: #fff;
    height: 13px;
    width: 2px;
    margin: 0 auto;
}

.map-o {
    background-color: #fff;
}

.map-o i {
    font-size: 12pt;
    color: #dc605f;
    background-color: #fff;
}

.order-list {
    padding-left: 15px;
    border-left: 2px solid #c6dacf;
    margin-left: 0;
}

.order-list>li {
    display: block;
    position: relative;
}

.order-list .btn.remove {
    position: absolute;
    right: 20px;
    bottom: 8px;
    background-color: transparent;
    font-size: 10pt;
    padding: 2px 6px;
    color: #f86c6b;
}

.order-list .btn.calendar {
    position: absolute;
    right: -10px;
    bottom: 8px;
    background-color: transparent;
    font-size: 10pt;
    padding: 2px 6px;
    color: #859198;
}

.order-list li .ic1 {
    position: absolute;
    left: -22px;
    top: -4px;
}

.order-list li .ic2 {
    position: absolute;
    left: -22px;
    bottom: 10px;
}

.order-list li .ic3 {
    position: absolute;
    left: -22px;
    bottom: -3px;
}

.order-list li .select2-container[name=dGeofenceId] .select2-choice .select2-arrow:before {
    display: none;
}

.order-list li .trp .form-control {
    border: 1px solid transparent;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
}

/* .order-list li .select2-dropdown-open .select2-choice {
    border: 1px solid #5897fb;
} */

input.minified {
    font-size: 9pt;
    border: 0;
    border-radius: 0;
    margin: 5px;
    margin: 0 !important;
}

.lbl {
    font-size: 9pt;
    padding: 6px;
    padding-left: 20px;
    width: 120px;
}

.lbl i {
    color: #167187;
}

.rdate:first-child input.minified {
    border-bottom: 1px solid #ccc;
}

.rdate:last-child {
    border-bottom: 1px solid #ccc;
}

.btn-fluid {
    width: 100%;
    border: 0;
    padding: 8px;
    font-size: 9pt;
}

.drp-calendar.single~.drp-buttons {
    display: none !important;
}

.alertify-dialog {
    padding: 15px 10px 10px 10px;
}

.ui-widget.ui-widget-content {
    border-width: 2px;
    box-shadow: none;
    background-color: #000;
    color: #fff;
    padding: 3px 12px;
    font-size: 8pt;
    border-radius: 0;
    border: 0;
}

.ui-widget.ui-widget-content:before {
    content: '';
    width: 0;
    height: 0;
    border-width: 6px;
    border-top-color: transparent;
    border-style: solid;
    border-right-color: transparent;
    border-bottom-color: #000000;
    border-left-color: transparent;
    display: block;
    position: absolute;
    top: -12px;
    left: 40%;
}

input.error {
    border: 1px solid red;
}

.w-150 {
    width: 100px;
}

.w-300 {
    width: 300px;
}

.w-100p {
    width: 100px;
}

.w-70p {
    width: 50px;
}

.w-50p {
    width: 50px;
}

.group-label .icon {
    font-size: 12pt;
    color: #000;
    top: 0px;
}

.group-label {
    margin-bottom: 10px;
}

.group-label small {
    display: inline-block;
    font-size: 9pt;
    color: #007fae;
}

.group-label h4 {
    display: inline-block;
    color: #007fae;
}

.group-label label {
    font-size: 14px;
    margin: 0;
    display: block;
}

.alert-breakdown legend {
    padding: 0 5px 0 5px;
}

.badge.status {
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
    padding: 9px 14px;
    border-radius: 15px;
    font-size: 7pt;
    font-weight: bold;
    min-width: 95px;
    letter-spacing: 0.5px;
}

.badge-lg>span {
    font-size: 11pt !important;
    width: 90%;
    margin-top: 10px;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    display: inline-block;
}

.badge-lg>span.detail {
    margin-top: 10px;
    white-space: inherit;
    line-height: 1.5;
    font-size: 9pt !important;
}

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #007bff;
    color: #fff;
    text-shadow: none;
}

.order-list .select2-container {
    margin-bottom: 5px;
    min-width: calc(100% - 17px) !important;
}

.bg-light-blue {
    background-color: #63c2de !important;
    color: #fff !important;
}

.text-light-blue {
    color: #63c2de !important;
}

.bg-dark-blue {
    background-color: #1994bf !important;
    color: #fff !important;
}

.bg-extra-dark-blue {
    background-color: #3b7bac !important;
    color: #fff !important;
}

.text-dark-blue {
    color: #1994bf !important;
}

.text-extra-dark-blue {
    color: #3b7bac !important;
}

.bg-green {
    background-color: #4dbd74;
    color: #fff !important;
}

.bg-orange {
    background-color: #f8cb00;
    color: black !important;
}

.bg-light-orange {
    background-color: #ffe77b;
    color: black !important;
}

.bg-grey {
    background-color: #b9c5cc!important;;
    color: #fff !important;
}

.bg-mid-grey {
    background-color: #a8c3d1;
    color: #fff !important;
}

.bg-light-grey {
    background-color: #f9f9f9;
}

.bg-black {
    background-color: #000;
    color: #fff !important;
}

.bg-shade-1 {
    background-color: #13294B !important;
}

.bg-shade-2 {
    background-color: #234A72 !important;
}

.bg-shade-3 {
    background-color: #3B7BAC !important;
}

.bg-shade-4 {
    background-color: #4B9CD3 !important;
}

.red {
    color: #d62d20;
}

.label-info {
    color: #97969e;
    padding-left: 5px;
    font-style: italic;
}

ul.nav-menu {
    margin: 0;
}

.nav-menu li {
    display: inline-block;
    padding: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.nav-menu li a {
    padding: 16px 12px;
    font-size: 10pt;
    color: #ffffff;
    display: block;
    transition: 0.1s;
    border-bottom: 3px solid transparent;
    opacity: 0.9;
    text-transform: uppercase;
    position: relative;
}

.nav-menu li a i {
    font-size: 10pt;
    position: relative;
    top: 0;
}

.nav-menu li a span {
    margin-bottom: 0;
}

.nav-menu li .navbar-toggler {
    opacity: 1;
}

.nav-menu li .navbar-toggler i {
    font-size: 13pt;
    top: 2px;
}

.navbar-toggler {
    display: inline-block;
    color: red;
}

.nav-menu li a:hover {
    /* background-color: #f6f6f6; */
    text-decoration: none;
    /* border-bottom: 3px solid #4B9CD3; */
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    color: #ffffff;
    opacity: 1;
    font-weight: 600;
}

.nav-menu li.active a {
    color: #ffffff !important;
    font-weight: bold;
    opacity: 1;
}

.nav-menu li.active>a::before {
    font-size: 18pt;
    position: absolute;
    bottom: -8px;
    left: 43%;
    width: 25px;
    height: 25px;
    font-family: 'Font Awesome 5 Free';
    content: "\f0d8";
    color: #fff;
    font-weight: 600;
}

.nav-link, .navbar .dropdown-toggle {
    display: block;
    padding: 16px 16px;
}

.joborder-modal .modal-body {
    padding: 0;
}

.xxl-modal .modal-body {
    padding: 0;
}

.modal-header {
    padding: 0;
}

.modal-title {
    padding: 16px;
}

.joborder-modal .modal-dialog {
    max-width: 100%;
    margin: 0 auto;
}

.xxl-modal .modal-dialog {
    max-width: 90%;
    margin: 20px auto;
}

.close-modal {
    background-color: #fff;
    font-size: 11pt;
    padding: 17px 25px;
}

.close-modal:hover {
    background-color: #f3f6f8;
}

.alert-master {
    margin: 0;
    padding-bottom: 0;
}

.alert-master legend {
    margin-bottom: 0;
    padding-bottom: 4px;
    padding-top: 4px;
}

.card {
    padding: 15px 25px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    border: 0;
    box-shadow: -1px 4px 20px rgb(0 0 0 / 10%);
    margin-bottom: 1rem;
}

.card>h6 {
    padding-bottom: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    padding-left: 17px;
    color: #3b3b46;
}

.btn-collapse {
    position: absolute;
    right: 25px;
    top: 8px;
    background-color: transparent;
    color: #252525;
}

.jobordersorting .modal-dialog {
    max-width: 500px;
    margin: 0 auto;
    margin-top: 15px;
}

.list-sortable li .ic1, .list-sortable li .ic2, .list-sortable li .ic3 {
    position: absolute;
    left: -22px;
    top: -7px;
}

.list-sortable>li {
    list-style: none;
    display: block;
    position: relative;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin: 5px;
    width: 100%;
    cursor: move;
}

.list-sortable {
    width: 100%;
    padding-left: 0px;
    margin-left: 0;
}

.list-sortable i {
    font-size: 9pt;
    color: #6e7079;
}

.list-sortable li .icon {
    float: right;
    padding-right: 5px;
}

.list-sortable li .name {
    padding-left: 10px;
}

.sort-info td {
    padding-bottom: 10px;
    padding-top: 10px;
}

.sort-info tr:first-child td {
    border-bottom: 1px solid #ccc;
}

.label-sort {
    padding-left: 6px;
    padding-right: 20px;
    text-transform: uppercase;
    color: #4a4856;
    letter-spacing: 2px;
    font-size: 9pt;
    margin-bottom: 5px;
}

.not-sortable {
    background: #e8e2e2 !important;
    cursor: default !important;
}

.dt-buttons {
    display: none;
}

.nav-menu li .dropdown-menu a {
    padding: 8px 15px;
    font-weight: normal;
}

.nav-menu li .dropdown-menu li.active a {
    font-weight: bold;
}

.nav-menu li .dropdown-menu a span {
    color: #000;
    padding: 0;
}

.card-input-element {
    display: none;
}

.card-input {
    margin-top: 0;
    border-radius: 0;
    padding: 15px;
    margin-bottom: 0;
}

.card-input:hover {
    cursor: pointer;
}

.card-input .panel-heading {
    font-weight: 600;
    font-size: 10pt;
    min-height: 21px;
    color: #5f686b;
}

.card-input-element:checked+.card-input {
    background-color: #4B9CD3;
    color: #fff;
    box-shadow: 0 0 1px 1px #20a8d8;
}

/*.card-input-element:checked + .card-input::after {
        font-size: 9pt;
        position: absolute;
        bottom: -1px;
        right: -1px;
        width: 0;
        height: 0;
        border-radius: 0px 0px 7px 0px;
        font-family: 'Font Awesome 5 Free';
        content: "\f00c";
        transition: 0.25s;
        color: #fff;
        font-weight: 600;
        text-align: center;
        border-left: 20px solid white;
        border-right: 20px solid #20a8d8;
        border-bottom: 20px solid #20a8d8;
        border-top: 20px solid white;
    }*/

.card-input-element:checked+.card-input::after {
    font-size: 27pt;
    position: absolute;
    top: 25%;
    right: -17px;
    width: 25px;
    height: 25px;
    font-family: 'Font Awesome 5 Free';
    content: "\f0d8";
    color: #4B9CD3;
    font-weight: 600;
    transform: rotate(90deg);
    background: transparent;
}

.dataTables_scrollHead {
    z-index: 0;
    box-shadow: none;
}

.origin-destination::before {
    font-size: 14pt;
    position: absolute;
    top: -2px;
    left: 20px;
    width: 25px;
    height: 25px;
    font-family: 'Font Awesome 5 Free';
    content: "\f3c5";
    color: #ffd43b;
    font-weight: 600;
}

.card-input .panel-body {
    padding-left: 25px;
}

@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}

.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}

.toolbar button.back-button {
    color: #000;
    float: left;
    padding: 4px 5px;
    margin: 0;
    background-color: #fff;
    margin-right: 10px;
    font-size: 12pt;
}

.toolbar button.close-button {
    color: #000;
    padding: 5px 12px;
    background-color: #fff;
    font-size: 12pt;
}

.toolbar button i {
    margin: 0
}

.tabel-status-info thead th {
    font-weight: bold;
    text-align: center;
}

.tabel-status-info tbody td {
    padding: 10px;
    white-space: unset;
}

.button-info {
    margin-left: 5px;
    font-size: 12pt;
    color: #677379;
    cursor: pointer;
    vertical-align: middle;
}

.btn-radius {
    border: 0;
    margin: 0;
    letter-spacing: 1px;
    margin-right: 0;
    margin-left: 10px;
    color: #fff;
    border-radius: 25px;
    padding: 7px 25px;
    font-size: 9pt;
    text-transform: uppercase;
}

.btn-add {
    border: 0;
    margin: 0;
    letter-spacing: 1px;
    margin-right: 0;
    margin-left: 10px;
    color: #fff;
    border-radius: 25px;
    padding: 7px 25px;
    font-size: 9pt;
    text-transform: uppercase;
}

.btn-remove {
    position: absolute;
    right: 8px;
    top: -11px;
    border-radius: 25px;
    font-size: 10pt;
    padding: 0;
    color: #56555a;
    background: transparent;
}

.selected .btn-remove {
    color: #fff;
}

.dataTables_wrapper .dataTables_processing {
    z-index: 2;
    height: 75px;
    background: transparent;

    /* z-index: 2;
    background: #f1f1f1;
    padding: 8px;
    display: inline;
    border-radius: 8px;
    width: auto;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px; */
}

.oms-status {
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.badge-lg i.warning-exl {
    font-size: 28pt !important;
    color: red;
}

.badge.badge-primary {
    background-color: #fff !important;
    color: #dc5857;
    font-size: 9pt;
    border-radius: 2px;
}

.select2>.select2-choice.ui-select-match {
    /* Because of the inclusion of Bootstrap */
    height: 29px;
}

.selectize-control>.selectize-dropdown {
    top: 36px;
}

.full-height {
    min-height: calc(100vh - 138px) !important;
}

.asset-uiselect .select2-search-field {
    display: inline-block;
    width: 100px !important;
}

.fixed-table .full-height .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    overflow: overlay !important;
    height: calc(93vh - 278px) !important;
    max-height: calc(93vh - 278px) !important;
}

.fixed-height-table {
    height: calc(100vh - 175px);
}

.ui-select-100 .select2-choices {
    height: 100px !important;
}

.app-header.navbar .dropdown-menu {
    width: 250px;
    left: auto;
    padding: 15px;
    margin-top: 4px;
    position: fixed;
}

.app-header.navbar .dropdown-menu.lg-dropdown {
    width: 500px;
}

.app-header.navbar .dropdown-menu h4 {
    font-size: 8pt;
    padding: 15px 15px 5px 15px;
    text-transform: uppercase;
    color: #8e8e8e;
    letter-spacing: 1px;
    margin: 0;
}

.app-header.navbar .dropdown-menu li {
    width: 100%;
    padding-left: 25px;
    position: relative;
    display: block;
}

.app-header.navbar .dropdown-menu li::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f054";
    display: block;
    position: absolute;
    font-weight: 900;
    color: #000000;
    top: 10px;
    font-size: 8pt;
    left: 23px;
}

.lg-dropdown .chart-menu li::before {
    content: "\f080";
}

.lg-dropdown .chart-menu hr {
    margin: 5px 0;
}

.gantt-table tbody td, .gantt-table th {
    border: 0;
    position: relative;
}

.gantt-table td.bg-orange, .gantt-table td.bg-grey {
    background-color: inherit;
}

.gantt-table td.bg-orange {
    background-color: #f9f9f9 !important;
}

.gantt-table td.bg-green {
    background-color: #f9f9f9 !important;
}

.gantt-table td:nth-child(2n).bg-orange {
    background-color: #f3f3f3 !important;
}

.gantt-table td.bg-orange::before {
    display: block;
    width: 100%;
    height: 26px;
    background: #f8cb00;
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
}

.gantt-table td.bg-grey::before {
    display: block;
    width: 100%;
    height: 26px;
    background: #869fac;
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
}

.gantt-table td.bg-light-blue::before {
    display: block;
    width: 100%;
    height: 26px;
    background: #63c2de;
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
}

.gantt-table td.bg-dark-blue::before {
    display: block;
    width: 100%;
    height: 26px;
    background: #1994bf;
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
}

.gantt-table td.bg-green::before {
    display: block;
    width: 100%;
    height: 26px;
    background: #4dbd74;
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
}

.gantt-table tbody td.date {
    background-color: #f9f9f9;
}

.gantt-table tbody td.date:nth-child(2n) {
    background-color: #f3f3f3;
}

.gantt-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    color: #3c3c3c;
    text-transform: uppercase;
}

.gantt-table tr:not(:first-child) td.separator-top {
    border-top: 1px solid #d9d9d9 !important;
}

.status-in-tracking {
    position: absolute;
    right: 15px;
    top: 0;
}

.status-in-tracking .badge.status {
    border-radius: 0;
    height: 36px;
    padding: 14px;
}

.filter-row {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.filter-row button {
    border: 0;
    margin: 0;
    letter-spacing: 1px;
    color: #fff;
    border-radius: 25px;
    padding: 5px 25px;
    font-size: 9pt;
    text-transform: uppercase;
}

.select2-container-multi .select2-choices .select2-search-choice {
    background: #4dbd74;
    border: 0;
    color: #fff;
    padding: 5px 10px 5px 20px;
    box-shadow: none;
    margin: 4px;
}

.select2-search-choice-close {
    background: none;
}

.select2-search-choice-close:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f00d";
    color: #fff;
    display: block;
    position: absolute;
    font-size: 8pt;
    left: 3px;
    font-weight: 900;
}

.ui-select-bootstrap .ui-select-search-hidden {
    display: none;
}

.filter-chip {
    padding: 0;
    margin: 0;
}

.filter-chip li {
    display: inline-block;
    background-color: #f2f2f2;
    padding: 4px 25px;
    border-radius: 25px;
    margin-right: 15px;
    color: #4f4f4f;
}

.filter-chip li span, select {
    margin-right: 15px;
    font-weight: 500;
    color: #4f4f4f;
    padding: 4px 12px;
}

.filter-chip li select {
    border: none;
    background-color: inherit;
    text-transform: uppercase;
    color: #3b7bac;
}

.table.borderless th {
    font-weight: 600;
}

.table.borderless.ellipsis {
    table-layout: fixed;
}

.table.borderless.ellipsis tr td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.table.borderless th, .table.borderless td {
    padding: .5rem;
    vertical-align: top;
    border-top: 0;
}

.table .thead-light th {
    background-color: #dee1e3;
}

tspan {
    font-family: 'Proxima Nova', sans-serif, sans-serif;
    text-transform: uppercase;
    font-weight: 500;
}

.top-10 .card {
    min-height: 500px;
}

.top-5 .card {
    min-height: 300px;
}

.highcharts-credits {
    display: none;
}

.tooltip {
    z-index: 2030;
}

.f-l {
    float: left;
}

.f-r {
    float: right;
}

.icon-info {
    font-size: 11pt;
    vertical-align: top;
}

.dashboard-title span {
    display: inline-block;
    font-weight: 700;
    color: #3b3b46;
}

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

.dashboard-section-title .extra {
    font-weight: 500;
    background-color: #f2f2f2;
    font-size: 0.8rem;
    color: #3b7bac;
    padding: 8px 24px;
    border-radius: 22px;
    text-transform: uppercase;
}

.select-dashboard {
    width: 160px;
    padding-left: 24px;
    padding-right: 24px;
}

.modal-header.dark, .modal-header.dark .close-modal {
    background: #085D86;
    color: #fff
}

.iframe-stack-edit {
    width: 100%;
    height: calc(100vh - 60px) !important;
    border: none;
}

.iframe-tracking {
    width: 100%;
    /* padding-top: 10px; */
    height: calc(100vh - 60px);
    height: calc(var(--vh, 1vh) * 100 - 61px);
    border: none;
}

.dashboard .item-container .card {
    min-height: 125px;
}

.alertify {
    font-family: 'Heebo', sans-serif;
}

.tab {
    padding: 12px;
    cursor: pointer;
    display: inline-block;
    min-width: 200px;
    text-align: center;
    text-transform: uppercase;
}

.tab-left {
    /* border-top-left-radius: 10px; */
}

.tab-right {
    /* border-top-right-radius: 10px; */
}

.tab-single {
    /* border-top-left-radius: 10px;
    border-top-right-radius: 10px; */
}

.tab-active {
    z-index: 1;
    border-bottom: 3px solid #4B9CD3;
    color: #4b9cd3;
}

.tab-inactive {
    z-index: 0;
}

.on-tab .DTFC_ScrollWrapper {
    height: 191px !important;
    overflow: auto;
}

.table tbody tr.wrapped td {
    white-space: normal;
}

.alertify.ajs-resizable:not(.ajs-maximized) .ajs-dialog {
    min-width: 0px;
}

.alertify .ajs-dialog {
    min-height: 0px;
}

.btn-no-btn {
    cursor: default !important;
    background: transparent;
}

.icon {
    fill: black;
    width: 14px;
    vertical-align: middle;
}

tr.selected td svg.icon {
    fill: white;
}

/* css for timeline */

.title-timeline {
    font-size: .875rem;
}

.ps-timeline-sec {
    position: relative;
    background: #fff;
}

.ps-timeline-sec .container-sec {
    position: relative;
}

.ps-timeline-sec .container-sec ol:before {
    background: #4B9CD3;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    left: -3px;
    top: -3px;
}

.ps-timeline-sec .container-sec ol:after {
    background: #4B9CD3;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    right: -3px;
    top: -3px;
}

.ps-timeline-sec .container-sec ol.ps-timeline {
    margin: 85px 0;
    padding: 0;
    border-top: 2px solid #4B9CD3;
    list-style: none;
}

.ps-timeline-sec .container-sec option.ps-timeline {
    width: 90%;
    position: absolute;
    left: 62%;
    top: -2px;
    border-top: 2px solid #4B9CD3;
}

.ps-timeline-sec .container-sec option.ps-timeline.default {
    border-top: 2px solid #b6cac7;
}

.ps-timeline-sec .container-sec ol.ps-timeline li {
    float: left;
    width: 14.28%;
    padding-top: 30px;
    position: relative;
}

.ps-timeline-sec .container-sec ol.ps-timeline li span {
    width: 50px;
    height: 50px;
    margin-left: -25px;
    background: #fff;
    border: 4px solid #4B9CD3;
    border-radius: 50%;
    box-shadow: 0 0 0 0px #fff;
    text-align: center;
    line-height: 50px -10;
    color: #4B9CD3;
    font-size: 2em;
    font-style: normal;
    position: absolute;
    top: -26px;
    left: 50%;
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top.default, .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot.default {
    border-color: #b6cac7;
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top.progressed, .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot.progressed {
    background-color: #ffe77b
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top.delivery, .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot.delivery {
    background-color: #63c2de
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top.arrived, .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot.arrived {
    background-color: #20a8d8
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top:before {
    content: "";
    color: #4B9CD3;
    width: 2px;
    height: 30px;
    background: #4B9CD3;
    position: absolute;
    top: -30px;
    left: 50%;
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top.default:before, .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot.default:before {
    background: #b6cac7;
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top:after {
    content: "";
    color: #4B9CD3;
    width: 8px;
    height: 8px;
    background: #4B9CD3;
    position: absolute;
    bottom: 71px;
    left: 44%;
    border-radius: 100%;
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top.default:after, .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot.default:after {
    background: #b6cac7;
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot:before {
    content: "";
    color: #4B9CD3;
    width: 2px;
    height: 30px;
    background: #4B9CD3;
    position: absolute;
    bottom: -30px;
    left: 50%;
}

.ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot:after {
    content: "";
    color: #4B9CD3;
    width: 8px;
    height: 8px;
    background: #4B9CD3;
    position: absolute;
    top: 70px;
    left: 43%;
    border-radius: 100%;
}

.ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-top {
    position: absolute;
    bottom: 0;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 95px;
    width: 100%;
}

.ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-top.completed {
    color: #4dbd74;
}

.ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-top img {
    display: table;
    margin: 0 auto;
}

.ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-bot {
    position: absolute;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 35px;
    width: 100%;
}

.ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-bot img {
    display: table;
    margin: 0 auto;
}

.ps-timeline-sec .container-sec ol.ps-timeline li p {
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.ps-timeline-sec .container-sec ol.ps-timeline li .ps-top {
    position: absolute;
    bottom: -30px;
    width: 100%;
    margin-bottom: 100px;
}

.ps-timeline-sec .container-sec ol.ps-timeline li .ps-bot {
    position: absolute;
    margin-top: 15px;
    width: 100%;
}

label.progressed {
    color: #ffe77b;
}

label.delivery {
    color: #63c2de;
}

label.arrived {
    color: #20a8d8;
}

label.completed {
    color: #4dbd74;
}

.iframe-tracking #panel {
    display: none;
}

.border-radius-top {
    border-radius: 10px 10px 0 0 !important;
}

.border-radius-bottom {
    border-radius: 0 0 10px 10px !important;
}

.bottom-tracking {
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: #fff;
}

.bottom-tracking .btn-collapse {
    position: absolute;
    right: 0;
    top: -35px;
    background-color: #085d86;
    box-shadow: -3px -4px 6px 0px rgba(1, 1, 1, 0.15);
    z-index: 1;
    color: #fff;
}

.input-group .no-radius .select2-choice.ui-select-match.ng-scope {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.card-header .title {
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.5px;
    margin-right: 8px;
}

.badge.status>i {
    font-size: 12px;
    vertical-align: middle;
    margin-right: 4px;
}

table.dataTable tbody tr.deleted {
    background-color: #f86c6b !important;
    color: #fff !important;
}

table.dataTable tbody tr.deleted .btn {
    color: #fff !important;
    border-color: #fff !important;
}

table.dataTable tbody tr.deleted i {
    color: #fff !important;
}

.btn-cancel {
    background-color: transparent;
    border-radius: 3px;
    border: 1px solid #cecece;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.list-icon {
    padding-left: 0;
    list-style-type: none;
}

.list-icon li {
    padding-left: 25px;
    position: relative;
}

.list-icon li>i {
    position: absolute;
    left: 0;
    top: 2px
}

.profile-img-container {
    text-align: center;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    background-color: #d8d8d8;
}

.btn-primary-dark {
    border-radius: 3px;
    border: 0;
    background-color: #2B5A85;
}

.select-scroll .ui-select-match {
    width: 300px;
    overflow: auto;
    display: block;
    float: left;
    white-space: nowrap;
}

.select-scroll .select2-container-multi .select2-choices .select2-search-choice {
    float: none;
    display: inline-block;
}

.filter .select2-container:not(.open) .select2-choice .select2-arrow, .filter .select2-container:not(.open) .select2-choice {
    background-color: transparent;
    border-color: transparent;
}

.filter .select2-container-multi .select2-choices {
    background: transparent;
    border-color: transparent;
}

.filter .select2-container {
    padding: 3px;
}

.dropdown-menu li.item a {
    padding: 8px 15px;
    display: inline-block;
    width: 100%;
}

.dropdown-menu li.item:not(.link) a:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.1);
}

.dropdown-menu li.item:not(.link) a {
    color: #000;
}

.dropdown-menu li.item a i {
    margin-right: 4px;
}

.app-header.navbar .navbar-toggler-icon {
    height: 23px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.app-header.navbar .navbar-toggler:hover .navbar-toggler-icon {
    height: 23px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.export-pod {
    font-size: 11pt;
}

.export-pod table {
    width: 100%;
}

.export-pod th, .export-pod td {
    padding: 4px 8px;
    white-space: normal;
}

.pod-location-info td, .pod-location-info th {
    border: 1px solid #000;
    vertical-align: top;
}

.pod-location-info th.title {
    text-transform: uppercase;
    background-color: #f1f1f1;
}

.btn--floating-top-right {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    padding: 9px;
    border: 2px solid rgba(0, 0, 0, 0.2);
}

table.dataTable tbody td.trim {
    padding: 6px 15px;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 250px;
}

.vis-item {
    border: 0 !important;
    padding: 0px 12px;
    font-weight: 500;
}

.vis-item .content {
    display: flex;
    gap: 12px;
}

.vis-item .content>div {
    position: relative;
    padding-left: 12px;
}

.vis-item .content>div:not(:first-child)::before {
    content: '';
    display: block;
    width: 1px;
    height: 15px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 3px;
}

.vis-labelset .vis-label, .vis-foreground .vis-group, .vis-timeline, .vis-panel.vis-bottom, .vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top {
    border-color: #ebebeb !important;
}

.vis-labelset .vis-label {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    background-color: #f9f9f9;
}

.dropdown-menu input, .dropdown-menu select {
    border: 1px solid #c2cfd6 !important;
}

.dropdown-menu .dropdown-filter-item:not(:last-child) {
    border-bottom: 1px solid #c2cfd6;
}

.dropdown-menu .dropdown-filter-item {
    padding: 12px;
}

.no-caret.dropdown-toggle::after {
    display: none;
}

.dropdown-menu.action-menu {
    right: 0;
    left: auto;
    transform: none;
}

.dropdown-menu.action-menu a{
    display: block;
    padding: 8px 12px;
}

.dropdown-menu.action-menu a:hover{
    background-color: #f9f9f9;
}

.navbar-container{
    max-width: 1200px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.tracking-info__container{
    position: absolute;
    top: 64px;
    background-color: #fff;
    left: 10px;
    border-radius: 8px;
    box-shadow: 0 0 2px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 2%);
    width: 300px;
    transition: 0.3s;
}

.tracking-info__content{
    position: relative;
}

.tracking-info__container.hide{
    transform: translateX(-310px);
    transition: 0.3s;
}

.tracking-info__driver{
    display: flex;
    margin-bottom: 24px;
    align-items: center;
}

.tracking-info__driver-not-assigned{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.tracking-status-container{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.tracking-info__driver-pic{
    width: 42px;
}
.tracking-info__driver-pic .placeholder{
    font-size: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracking-info__driver-pic img{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.tracking-info__driver_info{
    flex-grow: 1;
    padding: 0 24px;
}

.tracking-info__order_info{
    flex-grow: 1;
    padding: 0 24px;
}

.tracking-info__driver-name{
    font-size: 16px;
    font-weight: 500;
}

.separator{
    border-bottom: 1px solid #f4f4f4;
}

.tracking-info__asset{
    padding: 12px 0;
}
.tracking-info__timeline{
    padding: 12px 0;
}
.tracking-info__timeline ul{
    list-style-type: none;
    position: relative;
    padding-left: 12px;
}
.tracking-info__timeline ul li {
    padding-left: 32px;
    padding-bottom: 13px;
    border-left: 2px solid transparent;
    color: #aeaeae;
}
.tracking-info__timeline ul li:not(:last-child){
    border-left: 2px solid #f4f4f4;
}
.tracking-info__timeline ul li .indicator{
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aeaeae;
    font-weight: 500;
    border: 1px solid #aeaeae;
}

.tracking-info__timeline ul li.active .indicator{
    background-color: #4b9cd3;
    border-color: #fff;
    color: #fff;
}

.tracking-info__timeline ul li.active{
    color: #000;
}

.tracking-info__driver .btn{
    background-color: transparent;
}

.timeline-title{
    font-weight: 700;
    padding-top: 4px;
}

/* .tracking-info__container .label-title{
    font-weight: 700;
} */


.tracking-link-expired{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    padding: 36px;
}

.tracking-link-expired h2{
    margin-bottom: 24px;
}

.tracking-link-expired h5{
    font-weight: 400;
}

.tracking-link-expired .icon-container{
    font-size: 34px;
    margin-bottom: 16px;
}

.tracking-info__order-info{
    display: flex;
    padding: 12px 0;
}

.tracking-info__order-info > div{
    width: 50%;
}

.tracking-image img{
    width: 100%;
}

.tracking-image__container{
    min-height: 200px;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracking-image {
    margin-bottom: 24px;
}

.tracking-image__label{
    font-weight: 500;
    margin-bottom: 12px;
}

.single-loading{
    width: 100%;
    height: 100%;
}

.tracking-navigation{
    position: absolute;
    top: 50%;
    right: -23px;
    border: 0;
    box-shadow: 1px 0px 2px rgb(60 64 67 / 30%), 2px 1px 6px 2px rgb(60 64 67 / 15%);
    width: 23px;
    height: 48px;
    cursor: pointer;
    border-left: 1px solid #dadce0;
    border-radius: 0 8px 8px 0;
    background: #fff 7px center/7px 10px no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracking-info__body{
    max-height: calc( 100vh - 160px );
    overflow: hidden;
    padding: 24px 24px;
}

.tracking-info__body:hover{
    overflow: overlay;
}


.tracking-info__detail, .tracking-info__detail.hide{
    display: block;
}

.tracking-info__driver_contact .dropdown-menu{
    left: auto;
    box-shadow: 0 0 4px rgb(0 0 0 / 20%), 1px -1px 7px 0px rgb(0 0 0 / 2%);
    right: 0px;
    border: 0;
    border-radius: 4px;
}

.tracking-info__driver_contact .dropdown-toggle::after{
    display: none;
}

.tracking-info__driver_contact a{
    padding: 8px 18px;
    display: block;
    color: #000;
}


.tracking-info__driver_contact a:hover{
    text-decoration: none;
    background-color: #f1f1f1;
}

.tracking-navigation__mobile{
    display: none;
}

.npt-grid {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    overflow: hidden;
    border: 1px solid #006699;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.npt-grid table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}

.npt-grid .title {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );
    background: -moz-linear-gradient( center top, #006699 5%, #00557F 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #006699;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #0070A8;
    padding: 3px 10px;
}

.npt-grid .value {
    color: #00496B;
    border-left: 1px solid #E1EEF4;
    font-size: 12px;
    font-weight: normal;
    vertical-align: top;
    padding: 5px;
    display: flex;
    align-items: center;
}

.npt-grid table th {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );
    background: -moz-linear-gradient( center top, #006699 5%, #00557F 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #006699;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #0070A8;
    padding: 3px 10px;
}

.npt-grid table td {
    color: #00496B;
    border-left: 1px solid #E1EEF4;
    font-size: 12px;
    font-weight: normal;
    vertical-align: top;
    padding: 5px;
}

.filter-container {
    width: 276px;
}

@media screen and (min-width: 1200px) and (max-width: 1480px) {
    .filter-container {
        width: 200px;
    }
    .toolbar.responsive .filter-item {
        padding: 0;
    }
    .responsive .range-text {
        display: none;
    }
}

@media screen and (min-width: 1900px) {
    .ps-timeline-sec .container-sec option.ps-timeline {
        width: 83%;
        left: 58%;
    }
}

@media screen and (max-width: 1600px) {
    .navbar-container{
        max-width: 1000px;
    }
}

@media screen and (max-width: 1440px) {
    .navbar-container{
        max-width: 850px;
    }
}

@media screen and (max-width: 1280px) {
    .ps-timeline-sec .container-sec option.ps-timeline {
        left: 67%;
    }
    .navbar-container{
        max-width: 750px;
    }
}

@media screen and (max-width: 950px) {
    .ps-timeline-sec .container-sec option.ps-timeline {
        left: 72%;
    }
}

@media screen and (max-width: 768px) {
    .ps-timeline-sec .container-sec option.ps-timeline {
        left: 77%;
        top: -2px;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-top {
        position: absolute !important;
        top: -10px !important;
        width: 100% !important;
        float: left !important;
        margin-left: 32px !important;
        margin-bottom: 0 !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li .ps-bot {
        left: 35px !important;
        top: 0px;
        margin-top: 5px;
    }

    .bottom-tracking {
        position: relative;
        margin-top: 300px;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-bot {
        width: 100%;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li {
        padding-top: 0;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-bot {
        margin-top: 0;
        margin-left: 35px !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li .ps-top {
        margin-left: 35px;
        bottom: -5px;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-top, .ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-bot {
        top: -20px !important;
    }

    .btn-collapse {
        display: none;
    }

    .ps-timeline-sec .container-sec ol:before {
        background: #4B9CD3;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 100%;
        position: absolute;
        top: -3px !important;
        left: 21px !important;
    }

    .ps-timeline-sec .container-sec ol:after {
        background: #4B9CD3;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 100%;
        position: absolute;
        top: inherit !important;
        left: 22px;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline {
        margin: 130px 0 !important;
        border-left: 2px solid #4B9CD3;
        padding-left: 0 !important;
        padding-top: 60px !important;
        border-top: 0 !important;
        margin-left: 25px !important;
    }

    .ps-timeline-sec .container-sec option.ps-timeline {
        margin: 24px 0 !important;
        border-left: 2px solid #4B9CD3;
        border-top: 0 !important;
        height: 165px;
        left: -2px !important;
    }

    .ps-timeline-sec .container-sec option.ps-timeline.default {
        border-left: 2px solid #b6cac7;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li {
        height: 120px;
        float: none !important;
        width: inherit !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li:nth-child(2) .img-handler-bot img {
        width: 70px;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li:last-child {
        margin: 0;
        bottom: 0 !important;
        height: 60px;
    }

    .ps-timeline-sec .container-sec option.ps-timeline li:last-child {
        margin: 0;
        bottom: 0 !important;
        height: 60px;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li:last-child .img-handler-bot {
        bottom: 40px !important;
        width: 40% !important;
        margin-left: 25px !important;
        margin-top: 0 !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li:last-child .img-handler-bot img {
        width: 100%;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li:last-child .ps-top {
        margin-bottom: 0 !important;
        top: 20px;
        width: 50% !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li span {
        left: 0 !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top:before {
        content: none !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-top:after {
        content: none !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot:before {
        content: none !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li span.ps-sp-bot:after {
        content: none !important;
    }

    /* .ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-top {
        position: absolute !important;
        bottom: 210px !important;
        top: -8px !important;
        float: left !important;
        margin-left: 35px !important;
        margin-bottom: 0 !important;
    } */
    .ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-top img {
        margin: 0 auto !important;
        width: 80% !important;
    }

    /* .ps-timeline-sec .container-sec ol.ps-timeline li .img-handler-bot {
        position: absolute !important;
        bottom: 115px !important;
        width: 30% !important;
        float: left !important;
        margin-left: 35px !important;
        margin-bottom: 0 !important;
    } */
    .ps-timeline-sec .container-sec ol.ps-timeline li p {
        text-align: left !important;
        width: 100% !important;
        margin: 0 auto !important;
        margin-top: 0px !important;
    }

    /* .ps-timeline-sec .container-sec ol.ps-timeline li .ps-top {
        width: 60% !important;
        float: right !important;
        right: 0;
        top: -40px;
    } */
    /* .ps-timeline-sec .container-sec ol.ps-timeline li .ps-bot {
        width: 60% !important;
        float: right !important;
        right: 0;
        top: -40px;
    } */
    /* .map-tracking {
        position: fixed;
        z-index: 2;
    } */

    .tracking-info__container{
        width: calc( 100% - 20px );
        top: auto;
        bottom: 16px;
    }

    .tracking-info__container.full{
        width: 100%;
        left: 0;
        top: 0;
        bottom: 0;
    }

    .tracking-navigation{
        display: none;
    }

    .tracking-navigation__mobile{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 12px;
        padding-bottom: 12px;
        position: sticky;
        bottom: 0;
        width: 100%;
        background-color: #fff;
    }

    .tracking-info__body{
        padding-bottom: 0;
        max-height: calc(100vh - 56px);
        max-height: calc(var(--vh, 1vh) * 100 - 56px);
    }

    .tracking-info__driver_contact .dropdown-menu{
        top: 30px;
    }

    .tracking-info__detail{
        display: block;
    }

    .tracking-info__detail.hide{
        display: none;
    }

    a.brand-name {
        margin-left: auto;
        margin-right: auto;
    }

    a.brand-name span {
        display: none;
    }

    .toolbar .filter {
        display: none;
    }

    .DTFC_RightBodyLiner, .DTFC_LeftBodyLiner, .DTFC_RightHeadWrapper, .DTFC_LeftHeadWrapper {
        display: none;
    }

    /* table.dataTable tr th{
        display: none;
    }
    table.dataTable tbody tr td:first-child{
        display: none;
    }
    table.dataTable tbody tr td{
        display: block;
        text-align: left!important;
        border: 0!important;
    }
    table.dataTable tbody tr td:last-child{
        border-bottom: 1px solid #ccc!important;
    } */
    #mainnav {
        z-index: 5;
        background-color: #fff;
        color: #000;
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
    }

    #mainnav .nav-menu>li {
        width: 100%;
        display: block;
    }

    #mainnav .nav-menu li a {
        color: #000;
        text-align: left;
    }

    #mainnav .nav-menu li.active a {
        color: #000 !important;
    }

    #mainnav ul.nav-menu {
        padding-left: 0;
    }

    .app-header.navbar .navbar-toggler {
        color: #536c79;
        width: 85px;
        text-align: left;
        padding-left: 15px;
    }
    #mainnav .dropdown-menu{
        position: unset;
        top: auto;
        left: auto;
        width: 100%;
        box-shadow: none;
        z-index: 0;
        float: none;
        padding: 0;
    }
}

@media screen and (max-width: 414px) {
    .card {
        padding: 15px 20px !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline {
        margin: 5px 0 !important;
        margin-left: 40px !important;
    }

    .ps-timeline-sec .container-sec ol::before {
        left: 36px !important;
    }

    .ps-timeline-sec .container-sec ol:after {
        left: 36px !important;
    }
}

@media screen and (max-width: 320px) {
    .card {
        padding: 8px 2px !important;
    }

    .ps-timeline-sec .container-sec ol.ps-timeline li .ps-bot {
        width: 100% !important;
    }
}