.layout-footer-fixed .wrapper .content-wrapper {
    margin-bottom:0;
    padding-bottom: 0;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    margin-right: 0px;
    margin-left: 0px;
    padding-top: 7.5px;
    padding-bottom: 7.5px;
    margin-top: 0px;
    margin-bottom: 30px;
}

/* Change aside color here*/
[class*=sidebar-dark-] {
    color: var(--aside-color);
    background-color: var(--aside-bg-color);
}

.control-sidebar{
    color: var(--aside-color);
    background-color: white;
    padding:5px;
    top: 57px !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)!important;
}

/* START: Nav search bar*/
[class*=sidebar-dark] .btn-sidebar{
    color: var(--aside-bg-color);
    background-color: var(--aside-color);
    border: 1px solid var(--aside-color);
}

[class*=sidebar-dark-] .user-panel a:hover {
    color: var(--aside-color);
}

[class*=sidebar-dark] .user-panel {
    border-bottom: 0px solid var(--aside-color);
}

.user-panel img {
    height: auto;
    width: 2.2rem;
}

[class*=sidebar-dark] .form-control-sidebar:focus,
[class*=sidebar-dark] .form-control-sidebar:hover,
[class*=sidebar-dark] .form-control-sidebar:active {
    color: var(--aside-color);
    background-color: var(--aside-bg-color);
    border: 1px solid var(--aside-color);
}

[class*=sidebar-dark] .form-control-sidebar {
    color: var(--aside-color);
    background-color: var(--aside-bg-color);
    border: 1px solid var(--aside-color);
}

[class*=sidebar-dark] .btn-sidebar:focus,
[class*=sidebar-dark] .btn-sidebar:hover,
[class*=sidebar-dark] .btn-sidebar:active {
    color: var(--aside-bg-color);
    background-color: var(--aside-color);
    border: 1px solid var(--aside-color);
}

[class*=sidebar-dark] .list-group-item {
    background-color: var(--aside-color);
    border-color: var(--aside-color);
    color: var(--aside-bg-color);
}

[class*=sidebar-dark] .list-group-item:hover {
    background-color: var(--aside-color);
}

.sidebar-search-results .list-group {
    border-top: 1px solid white;
    position: absolute;
    width: 100%;
    z-index: 1039;
}
/* END: Nav search bar*/

[class*=sidebar-dark-] .sidebar a ,[class*=sidebar-dark-] .nav-header, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link{
    color: var(--aside-color);
    background-color: var(--aside-bg-color);
}

/*outer nav on open,active*/
[class*=sidebar-dark-] .nav-sidebar>.nav-item >.nav-link.active,
[class*=sidebar-dark-] .nav-sidebar>.nav-item >.nav-link.active:focus,
[class*=sidebar-dark-] .nav-sidebar>.nav-item >.nav-link.active:hover,
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open >.nav-link,
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-is-opening >.nav-link,
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-is-opening.menu-open >.nav-link{
   color: var(--aside-active-color);
   background-color: var(--aside-active-bg-color);
}

/*outer nav on focus*/
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus{
    color: var(--aside-color);
    background-color: var(--aside-bg-color);
}

/*outer nav on hover*/
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:hover{
    color: var(--aside-hover-color);
    background-color: var(--aside-hover-bg-color);
}

/*inner nav on active,hover,focus*/
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
    color: var(--aside-hover-color);
    background-color: var(--aside-hover-bg-color);
}

/* [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:focus{
    color: var(--aside-color);
    background-color: var(--aside-bg-color);
} */

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:hover{
    color: var(--aside-hover-color);
    background-color: var(--aside-hover-bg-color);
    opacity: .5;
}

[class*=sidebar-dark-] .nav-treeview>.nav-item.menu-open>.nav-link {
    color: var(--aside-active-color);
    background-color: var(--aside-active-bg-color);
}

/* data table css */
table.dataTable {
    clear: both;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
}

.dataTables_wrapper {
    background: white;
    border: 1px solid #dee2e6;
}

.table td, .table th {
    padding: .2rem 1rem;
    text-align: left;
    vertical-align: middle;
}

.table thead th.text-al, .table td.text-al, .table th.text-al {
    text-align: left;
}

.table-bordered thead td, .table-bordered thead th {
    font-weight: 500;
    padding: .40rem 1rem;
    text-align: center;
    vertical-align: middle;
    border-top: 0px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    background: var(--header-bg-color);
    color: var(--header-color);
}

table.dataTable>thead .sorting:after, table.dataTable>thead .sorting:before{
    bottom: .5em;
    opacity: 1;

}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
    margin-top: 0.25rem!important;
}

tbody tr.even{
    background: #8d817d21;
}

tbody tr:hover {
    cursor: pointer;
    color: #212529;
    background: rgb(193 187 187);
}

tbody tr.selected-row, tbody tr.selected-row:hover{
    background: rgb(0 0 0 / 25%);
}

.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.5em;
    padding-left: 0.5em;
    vertical-align: middle;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--main-color);
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.page-link:hover {
    z-index: 2;
    color: var(--main-color);;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-link:focus {
    outline: 0;
    box-shadow: none;
}


.page-item.active .page-link {
    z-index: 3;
    color: var(--header-color);
    background-color: var(--header-bg-color);
    border-color: var(--header-bg-color);
}

.badge-All{
    color: #fff;
    background-color: var(--main-color);
}
.badge-Stopped{
    color: #fff;
    background-color: #eb1511;
    padding-left: 16px;
    padding-right: 16px;
}

.badge-Overspeed{
    color: #fff;
    background-color: #fc7d3c;
    padding-left: 9px;
    padding-right: 9px;
}
.badge-Running{
    color: #fff;
    background-color: #4dc048;
    padding-left: 16px;
    padding-right: 16px;
}
.badge-Idle {
    color: #fff;
    background-color: #d7be1f;
    padding-left: 27px;
    padding-right: 27px;
}

.badge-Unreachable{
    color: #fff;
    background-color: #886ab5;
}
.badge-New{
    color: #fff;
    background-color: #4e6170;
    padding-left: 25px;
    padding-right: 25px;
}

.badge-Inactive {
    color: #fff;
    background-color: #1f2d3d;
    padding-left: 17px;
    padding-right: 17px;
}

input[type='checkbox'] {
    accent-color: var(--main-color);
}

.custom-control-input-primary:checked ~ .custom-control-label::before {
  border-color: var(--main-color);;
  background-color: var(--main-color);;
}

.custom-control-input-primary.custom-control-input-outline:checked[type="checkbox"] ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23dc3545' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !important;
  accent-color: var(--main-color);
}

.custom-control-input-primary.custom-control-input-outline:checked[type="radio"] ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23dc3545'/%3E%3C/svg%3E") !important;
  accent-color: var(--main-color);
}

.custom-control-input-primary:focus ~ .custom-control-label::before {
  box-shadow: none
}

.custom-control-input-primary:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--main-color);
}

.custom-control-input-primary:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.btn-primary {
    color: var(--header-color);
    background-color: var(--header-bg-color);
    border-color: var(--header-bg-color);
    box-shadow: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: var(--header-color);
    background-color: var(--header-bg-color);
    border-color: var(--header-bg-color);
}

.btn-outline-primary {
    color: var(--main-color);
    border-color: var(--main-color);
}

.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    color: var(--header-color);
    background-color: var(--header-bg-color);
    border-color: var(--header-bg-color);
}

.btn-xs, .btn-group-xs > .btn {
    padding: 1px 0.844rem;
    font-size: .7rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.5rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
    background-color: var(--header-bg-color);
    color: var(--header-color);
}

.modal-header .close, .modal-header .mailbox-attachment-close{
    padding: 1.3rem 1.6rem;
    margin: -1rem -1rem -1rem auto;
}

.modal-title {
    margin-bottom: 0;
    line-height: 2;
    font-family: -webkit-body;
    font-size: 1rem;
    font-weight: 600;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-top: 1px solid #e9ecef;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

form .form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #9e9e9e99;
    border-radius: .2rem !important;
    box-shadow: inset 0 0 0 transparent;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #9e9e9e;
    outline: 0;
    box-shadow: inset 0 0 0 transparent;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: var(--header-bg-color);
    color: var(--header-color);
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #9e9e9e;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #9e9e9e99;
    border-radius: .2rem !important;
}

.select2-container--default .select2-dropdown {
    border: 1px solid #ced4da;
    border-top-left-radius: .1rem !important;
    border-top-right-radius: .1rem !important;

}

.select2-container--default .select2-dropdown .select2-search__field, .select2-container--default .select2-search--inline .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: .2rem;
}

.select2-container--default .select2-selection--multiple  {
    background-color: #fff;
    border: 1px solid #9e9e9e99;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--header-bg-color);
    border-color: var(--header-bg-color);
    color: var(--header-color);
    padding: 0 10px;
    margin-top: 0.31rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover{
    border-radius: .1rem !important;
}

.is-invalid + * .select2-selection.select2-selection--single{
    border-color: #dc3545;
    padding-right: 2.25rem!important;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.hide{
    display: none !important;
}

.vehicle-status-icon{
    height: 60px;
}

.form-group {
    margin-bottom: 1rem;
    text-align: justify;
}

.text-center{
    text-align: center
}

.text-left{
    text-align: left
}

.text-right{
    text-align: right
}
.no-padding {
    padding: 0px !important
}

.no-margin {
    margin: 0px !important
}

.no-margin-bottom{
    margin-bottom: 0 !important;
}

.mtp-0{
    margin-top: 0px;
}
.mtp-1{
    margin-top: 1px;
}
.mtp-2{
    margin-top: 2px;
}
.mtp-3{
    margin-top: 3px;
}
.mbp-0{
    margin-bottom: 0px;
}
.mbp-1{
    margin-bottom: 1px;
}
.mbp-2{
    margin-bottom: 2px;
}
.mbp-3{
    margin-bottom: 3px;
}

.map{
    width:100%;
    height: calc(100vh - 87px);
}

.map.map-bordered{
    border: 0px solid #dee2e6;
}

.leaflet-bottom.leaflet-right{
    z-index: 999;
}


.leaflet-custom-div-icon img{
    height: 50px;
    width: 30px !important;
/*    -webkit-transform:rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);*/
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: white;
    color: black;
    box-shadow: 0 3px 14px rgb(0 0 0 / 40%);
}

.leaflet-popup-content-wrapper, .leaflet-popup-content{
    padding: 0px;
    margin: 0px;
    text-align: left;
    border-radius: 12px;
}

.leaflet-popup-header{
    font-size: 20px;
    font-weight: bold;
    padding: 5px 10px;
    color : var(--header-color);
    background : var(--header-bg-color);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.leaflet-popup-body {
    color: #161615;
    padding: 2px 10px;
}

.leaflet-popup-body {
    font-size: 12px;
    padding: 5px;
    border-radius: 50%;
}

.leaflet-popup-body-row{
    width: 100%;
    display:inline-flex;
}

.dashboard-popup-body .leaflet-popup-body-row{
    display: inline-grid;
    margin: 2px 3px 2px 3px
}

.leaflet-content-key{
    display: inline-flex;
    align-items: end;
}

.leaflet-content-value{
    font-size: 13px;
    font-weight: 600;
    color: #384040;
}

.leaflet-popup-body-row img{
    height: 20px;
    margin-right: 10px;
}

.leaflet-popup-body-row div{
    margin-top: 3px;
}

.leaflet-container a.leaflet-popup-close-button {
    font-size: 25px;
    padding-top: 5px;
    padding-right: 5px;
    color: var(--header-color);
}

.leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus {
    font-size: 26px;
    padding-top: 5px;
    padding-right: 5px;
    color: var(--header-color);
 }

 .leaflet-row-bottom-separator{
    border-bottom: 1px solid #c5aeae;
 }

 .leaflet-row-right-separator{
     border-right: 1px solid #c5aeae;
  }

.map-layer{
    top: 10px;
    right:0;
    z-index: 999;
}

.map-layer button{
    background: white;
}

#map-settings-ctr{
    top: 46px;
    right: 20px;
    padding: 10px;
    background: white;
    border: 1px solid #cfcfc5;
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)!important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--header-bg-color);;
    border-color: transparent;
    color: var(--header-color);
}

.daterangepicker td.in-range {
    background-color: var(--header-bg-color);;
    border-color: transparent;
    color: var(--header-color);
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span{
    border: solid var(--header-bg-color);
    border-width:0 2px 2px 0;
}

.daterangepicker .calendar-table .next:hover span, .daterangepicker .calendar-table .prev:hover span{
    border: solid var(--header-color);
    border-width:0 2px 2px 0;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover{
    background: var(--header-bg-color);;
    color: var(--header-color);
}

.drp-buttons {
    background: var(--header-color);
    color: var(--header-bg-color);
}
.daterangepicker .drp-selected {
    background: var(--header-bg-color);
    color: var(--header-color);
    padding: 6px;
    border-radius: 0.3rem;
}

.daterangepicker .ranges li.active {
    background-color: var(--header-bg-color);
    color: var(--header-color);;
}

#toast-container>div {
    opacity: 1;
}

#toast-container .toast-error {
    background-color: red;
}

#toast-container .toast-info {
    background-color: var(--main-color);
}

.toast{
    font-weight: 600;
}

.swal2-styled.swal2-confirm:hover {
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.swal2-styled.swal2-confirm{
    background-color: var(--main-color) !important;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px var(--main-color) !important;
}

.download-icon{
   text-align: center;
   height: 25px;
   vertical-align: bottom;
}

*[hasRole] {
  display: none;
}

*[hasAnyRole] {
  display: none;
}



/*
 * Baseline styles
 */
h2 {
  color: #ccc;
  margin: 0;
  font: .8em verdana;
  text-transform: uppercase;
  letter-spacing: .1em;
}
/*
 * Loading Dots
 * Can we use pseudo elements here instead :after?
 */

#pageLoader {
     height: 100%;
     width: 100%;
     top: 0;
     padding-top: 50vh;
     position: fixed;
     font-size: 14px;
     text-align: center;
     background-color: rgba(0,0,0,0.8);
     z-index: 9999;
}

.loading span {
  display: inline-block;
  vertical-align: middle;
  width: .6em;
  height: .6em;
  margin: .19em;
  background: #007DB6;
  border-radius: .6em;
  animation: loading 1s infinite alternate;
}

/*
 * Dots Colors
 * Smarter targeting vs nth-of-type?
 */
.loading span:nth-of-type(2) {
  background: #008FB2;
  animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
  background: #009B9E;
  animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
  background: #00A77D;
  animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
  background: #00B247;
  animation-delay: 0.8s;
}
.loading span:nth-of-type(6) {
  background: #5AB027;
  animation-delay: 1.0s;
}
.loading span:nth-of-type(7) {
  background: #A0B61E;
  animation-delay: 1.2s;
}

/*
 * Animation keyframes
 * Use transition opacity instead of keyframes?
 */
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.status-filter-container {
    display: flex;
    align-items: center;
}

.status-btn {
    text-align: left;
    flex: 1;
    font-size:20px;
    min-width:100px;
    margin-left: 3px;
    padding: 4px 10px;
    cursor: pointer;
    position: relative;
}

.status-btn.btn-active {
    box-shadow: 0 5px 6px 0 rgb(0 0 0 / 30%) !important;
    border: 2px solid #ffffff !important;
}

.status-btn img{
    height: 45px;
    margin-right: 9px;
    position: relative;
}

.status-btn .status-txt{
    font-size: 12px;
    bottom: 0;
    right: 10px;
    position: absolute;
}

@media screen and (max-width: 950px){
    .status-btn {
        min-width:78px;
        font-size: 15px;
        text-align: center;
    }

    .status-btn img {
        display: none;
    }

    .status-btn .status-txt{
        text-align: center;
        font-size: 12px;
        position: initial;
    }

    #table-fullscreen,#table-settings, #map-fullscreen{
        display: none;
    }
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--main-color);
    background-color: var(--main-color);
}

label:not(.form-check-label):not(.custom-file-label) {
    padding-top:2px;
    font-weight: 700;
    font-size: 13px;
    font-family: sans-serif;
}

@media screen and (max-width: 767px) {
    .table-header-left {
        justify-content: center !important;
    }
}

.flex-1{
    flex:1 !important;
    text-align: -webkit-center;
}

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

::-webkit-scrollbar-track {
  background: white;
}

::-webkit-scrollbar-thumb {
  background: var(--main-color);
}

.MultiCarousel {
    display: flex;
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 30px;
    background: #f4f6f9;
    overflow: auto !important;
    transition: 1s ease all;
}

.MultiCarousel .item {
    min-width: 353px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 11px -2px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    margin: 7px;
    padding: 10px 15px;
    float: left;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
}

.MultiCarousel .item.summary-active {
    background: #000000;
    color: #FFFFFF;
}

.MultiCarousel .leftLst {
    height: 25px;
    left:0;
    top:calc(50% - 20px);
    position: absolute;
    cursor: pointer;
}

.MultiCarousel .rightLst {
    height: 25px;
    right:0;
    top:calc(50% - 20px);
    position: absolute;
    cursor: pointer;
}

.MultiCarousel .rightLst:hover, .MultiCarousel .leftLst:hover {
    background: var(--main-color);
    padding: 2px;
}

.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over {
    background:#ccc;
    pointer-events: none !important;
}

.start-ellipse{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #2CAC00;
}

.end-ellipse{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #D70000;
}

.idle-ellipse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: yellow;
}

.playback-start-date, .playback-end-date{
    font-weight: 700;
    margin-left: 10px;
    line-height: initial;
}

.playback-start-address{
    color: #686868;
    margin: 5px;
    padding-left: 15px;
    border-left: dotted;
    border-width: 2px;
    height: 42px;
    content-visibility: auto;
}

.playback-end-address{
    color: #686868;
    padding-left: 20px;
    height: 42px;
    content-visibility: auto;
}

.playback-summary-text{
    height: 14px;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
}

.playback-trip-info{
    height: 14px;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
}

.playback-duration-icon{
    width: 22px;
    height: 22px;
}

.playback-distance-icon{
    width: 22px;
    height: 24.5px;
}

.playback-average-speed-icon{
    width: 30px;
    height: 30px;
    margin-bottom: -5px;
}

.playback-max-speed-icon{
    width: 30px;
    height: 30px;
    margin-bottom: -5px;
}

.MultiCarousel .item.summary-active .playback-trip-info{
    color: #FFFFFF;
}

.MultiCarousel .item.stoppage-summary{
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-top: 7px solid #ed1808;
  border-radius: 10px;
}

.MultiCarousel .item.trip-summary{
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-top: 7px solid #6ecb03;
    border-radius: 10px;
}

.MultiCarousel .item.idle-summary{
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-top: 7px solid #ffc107;
    border-radius: 10px;
}

#dashboard-bottom-drawer {
    bottom: 0;
    display: none;
    z-index: 1000;
    position: fixed;
    width: calc(100% - 250px);
}

.sidebar-collapse #dashboard-bottom-drawer {
    /*width: calc(100% - 4.65rem);*/
    width: 100%
}

#dashboard-bottom-drawer .card {
    margin-bottom: 1.9rem;
}

#dashboard-bottom-drawer .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: 0.35rem 1.25rem;
    position: relative;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-top: 3px solid !important;
    border-color: var(--main-color) !important;
}

#dashboard-bottom-drawer .drawer-slider{
    height: 25px;
    cursor: pointer;
    background: var(--main-color);
    margin-top: -21px;
    border-radius: 50%;
    transition: width 2s, height 2s, transform 2s;
}

#dashboard-bottom-drawer.drawer-slider-open .drawer-slider{
    transform: rotate(180deg);
    transition: width 2s, height 2s, transform 2s;
}

#dashboard-bottom-drawer .card-body{
    height: 80px;
    overflow-y: auto;
    transition: height 0.7s linear;
}

#dashboard-bottom-drawer.drawer-slider-open .card-body{
    height: auto;
    transition: height 0.7s linear;
}

#dashboard-bottom-drawer .card-body img{
    height: 25px;
}

#dashboard-bottom-drawer .card-body .data-ctr-row{
    display:flex;
    padding-top: .45rem;
}

#dashboard-bottom-drawer .card-body .data-ctr-row .data-ctr{
    flex: 1;
    display: inline-grid;
    margin: 2px 3px 2px 3px;
    justify-content: center;
    justify-items: center;
}

#dashboard-bottom-drawer .card-body .data-ctr-row .address-data-ctr{
    padding-left: 2.8rem;
}

#dashboard-bottom-drawer .card-body .data-ctr-row .address-data-ctr img{
    padding-left: 30px;
}

#dashboard-bottom-drawer .card-body .data-ctr-row .address-data-ctr .data-key{
    padding-left: 25px;
}

#dashboard-bottom-drawer > div > div.card-body > div:nth-child(3) > div:nth-child(1){
    justify-content: flex-start;
    justify-items: flex-start;
}


#dashboard-bottom-drawer .card-body .data-key{
   font-size: 12px;
   font-weight: 500;
   color: #0000007a;
}

#dashboard-bottom-drawer .card-body .data-value{
    font-size: 13px;
    font-weight: 600;
    color: #384040;
}

@media screen and (max-width: 750px){
    #dashboard-bottom-drawer {
        width: 100%;
    }

    .sidebar-collapse #dashboard-bottom-drawer {
            width: 100%;
    }

    #dashboard-bottom-drawer .drawer-slider{
        display:  block;
    }

    #dashboard-bottom-drawer .card-body{
        height: 24vh;
        overflow-y: auto;
    }

    #dashboard-bottom-drawer.drawer-slider-open .card-body{
        height: 70vh;
        margin-top:5px;
        transition: height 0.7s linear;
    }

    #dashboard-bottom-drawer .card-body .data-ctr-row{
        display: block;
        text-align: center;
    }

    #dashboard-bottom-drawer .card-body .data-ctr-row .data-ctr{
        display: block;
        border-bottom: 1px solid rgba(0,0,0,.125);
    }

    #dashboard-bottom-drawer .card-body .data-ctr-row .address-data-ctr{
        padding-left: 0;
    }

    #dashboard-bottom-drawer .card-body .data-ctr-row .address-data-ctr img{
        padding-left: 0;
    }

    #dashboard-bottom-drawer .card-body .data-ctr-row .address-data-ctr .data-key{
        padding-left: 0;
    }

    #dashboard-bottom-drawer .card-body .data-key {
        font-size: 16px;
        font-weight: 500;
        color: #0000007a;
    }

    #dashboard-bottom-drawer .card-body .data-value {
        font-size: 16px;
        font-weight: bold;
        color: #384040;
    }
}

a {
    color: var(--main-color);
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: var(--main-color);
    text-decoration: none;
    background-color: transparent;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--header-color);
    background-color: var(--header-bg-color);
    border-color: #dee2e6 #dee2e6 #fff;
}

.refresh-container{
    align-items: center;
    justify-content: flex-start;
    display: flex;
}

.refresh-container img{
    height: 32px;
    margin-top: 10px;
    cursor: pointer;
}

.refresh-container img:active{
    height: 30px;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: #999;
    background: white;
    border: 1px solid #c5c5c5;
    border-radius: 1rem;
}

.bootstrap-select>.dropdown-toggle {
    background: white !important;
    color: #5d5d5d !important;
    border: 1px solid #c5c5c5 !important;
    border-radius: 1rem !important;
}

.bootstrap-select .bs-ok-default:after {
    content: '';
    display: block;
    width: 0.5em;
    height: 1em;
    border-style: solid;
    border-color: var(--main-color);
    border-width: 0 0.2em 0.2em 0;
}

.btn-light:hover {
    color: var(--header-color);
    background-color: var(--header-bg-color);
    border-color: var(--header-bg-color);
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--header-color);
    text-decoration: none;
    background-color: var(--header-bg-color);
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: unset !important;
    outline-offset: unset;
}


tr.selected-row td {
    background-color: rgb(193 187 187);
}

.gps-delete {
    background-image: url(/dist/img/curd/delete.svg),url(/dist/img/curd/delete.svg);
    background-color: var(--header-bg-color);
    background-position: center;
    background-size: 28px;
    width: 30px;
    height: 30px;
}

.gps-edit{
    background-image: url(/dist/img/curd/edit.svg),url(/dist/img/curd/edit.svg);
    background-color: var(--header-bg-color);
    background-position: center;
    background-size: 34px;
    width: 30px;
    height: 30px;
}

.gps-view{
    background-image: url(/dist/img/curd/view.svg),url(/dist/img/curd/view.svg);
    background-color: var(--header-bg-color);
    background-position: center;
    background-size: 38px;
    width: 30px;
    height: 30px;
}

.gps-add{
    background-image: url(/dist/img/curd/add.svg),url(/dist/img/curd/add.svg);
    background-color: var(--header-bg-color);
    background-position: center;
    background-size: 50px;
    width: 30px;
    height: 30px;
}

.gps-curd-sm{
    background-size: 22px;
    width: 20px;
    height: 20px;
}

.gps-tab-container{
    display: flex;
    width: 100%;
}

.gps-tab{
    color: rgba(52,58,64,.8);
    padding: 0px 15px;
    font-size: 14px;
    font-weight: 500;
}

.gps-tab.active{
    color: var(--header-bg-color);
    border-bottom: 3px solid var(--header-bg-color);
    font-size: 14px;
    font-weight: 600;
}

.share-card-header{
    justify-content: center !important;
    align-items: center !important;
    border-top: 2px solid var(--main-color) !important;
    padding: 0px !important;
}

.link{
    color: #007bff !important;
    text-decoration: none;
    background-color: transparent;
    font-weight: 700;
    cursor: pointer;
}

.copy-content{
    cursor: pointer;
}

.copied {
   animation: copy-animation 1s ease-in-out;
}

@keyframes copy-animation {
   0% { transform: scale(1); }
   10% { transform: scale(1.1); color: green; }
   20% { transform: scale(1.2); color: green; }
   50% { transform: scale(1.2); color: green; }
   90% { transform: scale(1.2); color: green; }
   90% { transform: scale(1.1); color: green; }
   100% { transform: scale(1); }
}

.f-large {
    font-size: large;
}
.f-small {
    font-size: small;
}

.f-x-small {
    font-size: x-small;
}

.f-xx-small {
    font-size: xx-small;
}

.sidebar-collapse .sidebar .user-panel{
    display: none;
}

.sidebar-collapse.sidebar-mini .main-sidebar:hover:not(.sidebar-no-expand) .user-panel{
    display: block;
}

.badge-service {
    min-width: 90px;
    color: var(--main-text-color);
    background-color: var(--main-color);
}

.resource-row {
    position: relative;
    padding: 1rem 0rem 1rem 2.5rem;
    border-left: 1px solid;
    margin-left: 7px;
    display: flex;
}

.resource-row::before {
    position: absolute;
    content: "";
    left: 0rem;
    width: 2.3rem;
    padding-top: 11px;
    border-bottom: 1px solid;
    transition: .2s ease-in-out;
}