.bg-style-header {
    background-color: var(--danger) !important;
}
.bg-style-header h6, .bg-style-header .left, 
.bg-style-header .right {
    color:  var(--white) !important;
}
.bg-style-header .left a {
    color:  var(--white) !important;
} 
.bg-style-header .right a {
    color:  var(--white) !important;
} 
.bg-style-header .inner-right a {
    color:  var(--white) !important;
} 



.box-ip {
  position: relative;
}
.box-ip input {
  padding-right: 114px;
}
.box-ip .text-right {
  position: absolute;
  top: 16px;
  right: 20px;
  color: #7980ff;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
}

.drop-select-access {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #f8fafc;
  padding: 12px;
  border-radius: 12px;
}
.drop-select-access img {
  border-radius: 6px;
  width: 36px;
  height: 36px;
}
.drop-select-access.dropdown-item {
  padding: 0;
  background-color: #fff;
}
.drop-select-access.dropdown-item:not(:last-child) {
  padding-bottom: 20px;
}
.drop-select-access.select {
  position: relative;
}
.drop-select-access.select::after {
 content: "\e977";
  position: absolute;
  font-family: "icomoon";
  top: 18px;
  right: 18px;
  border: 0;
  /*font-size: 22px;
  font-weight: 600;*/
}
.drop-select-access.select .right {
  top: 18px;
  right: 18px;
  position: absolute;
  /*font-size: 22px;
  font-weight: 600;*/
}

.box-select-calendar {
  width: 53px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgb(226, 232, 240);
}
.box-select-calendar .day {
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: rgba(49, 57, 79, 0.92);
}
.box-select-calendar.active {
  background-color: rgba(121, 128, 255, 0.1);
  border-color: #7980ff;
  position: relative;
}
.box-select-calendar.active::after {
  position: absolute;
  content: "";
  bottom: 6px;
  width: 4px;
  height: 4px;
  background-color: #7980ff;
  border-radius: 100px;
}

.timeline-item-date {
  display: flex;
  gap: 12px;
  align-items: center;
}
.timeline-item-date .box-icon {
  background-color: rgba(49, 57, 79, 0.06);
}
.timeline-item-date .box-icon .icon {
  font-size: 20px;
}

.list-desc-project-style2 {
  display: flex;
  align-items: center;
}
.list-desc-project-style2 .left {
  width: 40%;
}
.list-desc-project-style2 .right {
  width: 60%;
}
.list-desc-project-style2 .right input {
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
.list-desc-project-style2 .right input:focus {
  border: none;
}

.enter-task {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.enter-task .box-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.enter-task .box-left svg {
  opacity: 0.6;
}
.enter-task input {
  padding: 20px;
  padding-left: 50px;
  padding-right: 60px;
}
.enter-task input:focus {
  border: 0;
  background-color: #fff;
}
.enter-task .list-stacked {
  margin-right: 8px;
}



.dropdown .drop-select-visibility {
  position: relative;
  padding: 14px;
  padding-left: 48px;
  padding-right: 20px;
  background-color: #f8fafc;
  border-radius: 12px;
}
.dropdown .drop-select-visibility .icon {
  position: absolute;
  left: 20px;
  top: 10px;
}
.dropdown .drop-select-visibility::after {
  content: "\e91d";
  position: absolute;
  font-family: "icomoon";
  transform: rotate(270deg);
  font-size: 12px;
  right: 20px;
  top: 12px;
  color: rgba(49, 57, 79, 0.6);
  border: 0;
}
.dropdown .title-visibility {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: rgba(49, 57, 79, 0.8);
}
.dropdown .dropdown-visibility {
  padding: 0;
}
.dropdown .dropdown-visibility .dropdown-item {
  padding: 15px;
}
.dropdown .dropdown-visibility .dropdown-item.active {
  background-color: transparent;
}
.dropdown .dropdown-visibility .dropdown-item.active .title-visibility {
  color: #7980ff;
}






.dropdown-calendar {
  padding: 10px;
}
.dropdown-calendar .fc-direction-ltr {
  width: 290px;
}
.dropdown-calendar .fc-direction-ltr .fc-col-header {
  width: 100% !important;
}
.dropdown-calendar .fc-direction-ltr .fc-daygrid-body,
.dropdown-calendar .fc-direction-ltr .fc-scrollgrid-sync-table {
  width: 100% !important;
}
.dropdown-calendar .fc-view-harness {
  height: 200px !important;
}
.dropdown-calendar .btn-close-drop {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: -15px;
  right: -15px;
  background-color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(49, 57, 79, 0.7);
}
.dropdown-calendar .btn-close-drop.st2 {
  left: -15px;
  right: unset;
}

.box-description-task {
  position: relative;
}
.box-description-task .area-message {
  height: 60px;
}
.box-description-task .btn-see-desc {
  position: absolute;
  right: 0;
  bottom: 5px;
}

.dropdown .drop-select-visibility {
  position: relative;
  padding: 14px;
  padding-left: 48px;
  padding-right: 20px;
  background-color: #f8fafc;
  border-radius: 12px;
}
.dropdown .drop-select-visibility .icon {
  position: absolute;
  left: 20px;
  top: 10px;
}
.dropdown .drop-select-visibility::after {
  content: "\e91d";
  position: absolute;
  font-family: "icomoon";
  transform: rotate(270deg);
  font-size: 12px;
  right: 20px;
  top: 12px;
  color: rgba(49, 57, 79, 0.6);
  border: 0;
}
.dropdown .title-visibility {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: rgba(49, 57, 79, 0.8);
}
.dropdown .dropdown-visibility {
  padding: 0;
}
.dropdown .dropdown-visibility .dropdown-item {
  padding: 15px;
}
.dropdown .dropdown-visibility .dropdown-item.active {
  background-color: transparent;
}
.dropdown .dropdown-visibility .dropdown-item.active .title-visibility {
  color: #7980ff;
}

/*Drpdow */
.box-select-role {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  padding-left: 16px;
  background-color: #f8fafc;
  border-radius: 12px;
  border: 1px solid transparent;
}
.box-select-role .box-icon {
  border-radius: 8px;
  background-color: rgba(121, 128, 255, 0.06);
}
.box-select-role .content p {
  margin-top: 2px;
}
.box-select-role.active {
  border-color: #7980ff;
  position: relative;
}
.box-select-role.active .box-icon {
  background-color: #7980ff;
}
.box-select-role.active .box-icon svg path {
  stroke: #fff;
}
.box-select-role.active::after {
  position: absolute;
  content: "\e976";
  font-family: "icomoon";
  top: 20px;
  right: 20px;
  color: #7980ff;
  font-size: 15px;
}

.box-service {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 12px;
}
.box-service li a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}
.box-service li .icon-box {
  font-size: 20px; 
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*--------------- widget ---------------- */

.tf-list-item {
  font-size: 14px;
  line-height: 18px;
}
.tf-list-item .box-round {
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.tf-list-item .icon {
  color: var(--white);
  font-size: 32px;
}

.tf-list-item-v2 {
  padding: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tf-list-item-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tf-list-item-v3 .icon {
  font-size: 40px;
  color: var(--white);
}
.tf-list-item-v3 .icon-key {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 1px solid var(--white);
  color: var(--white);
  font-size: 26px;
}
.tf-list-item-v3 .text {
  padding-right: 70px;
}


/* ----- Pages------------*/
a.jj-box-store {
  display: flex;
}
.jj-box-store {
  display: flex;
  align-items: center;
  color: #de0000;
}

.jj-box-store .box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
  padding: 5px 2px auto;
  height: auto;
  width: auto;
  margin: 0 auto;
  border-radius: 50%;
  transition: all 0.2s;
  filter: grayscale(1);
}
.jj-box-storea.active .icon {
 
}
.jj-box-store .content {
  flex-grow: 1;
  margin-left: 12px;
}
.jj-box-store .desc {
  display: flex;
  gap: 8px;
}
.jj-box-store .desc li:first-child {
  padding-right: 8px;
  border-right: 1px solid var(--line);
}
.jj-box-store .tf-btn {
  width: auto;
  padding: 7px 24px;
}
.jj-box-store.style-1 {
  border: 1px solid transparent;
  padding: 12px;
  padding-left: 16px;
  background-color: #f8fafc;
  border-radius: 12px;
}
.jj-box-store.style-1.active {
    border-color: var(--surface);
    position: relative;
}

jj-box-store.style-1.active svg path {
  fill: #de0000;
  stroke: #de0000;
}
jj-box-store.style-1.active i {
  color: #de0000;
}



.jj-box-store.style-2 {
  border: 1px solid transparent;
  padding: 12px;
  padding-left: 16px;
  background-color: #f8fafc;
  border-radius: 12px;
}
.jj-box-store.style-2.active {
    border-color: var(--surface);
    position: relative;
}
jj-box-store.style-2.active svg path {
  fill: #de0000;
  stroke: #de0000;
}
jj-box-store.style-2.active i {
  color: #de0000;
}

.jj-box-store.style-2.select {
    border-color: var(--surface);
    position: relative;
}
jj-box-store.style-2.select svg path {
  fill: #de0000;
  stroke: #de0000;
}
jj-box-store.style-2.select i {
  color: #de0000;
}
.jj-box-store.style-2.select::after {
  position: absolute;
  content: "\e977";
  font-family: "icomoon";
  top: 20px;
  right: 20px;
  color: #7980ff;
  font-size: 22px;
}
.jj-box-store.style-2.selected {
    position: relative;
    border-color: var(--menuDark);
    border-radius: 12px;
}

.jj-box-store.style-2.selected::after {
  position: absolute;
  content: "\e976";
  font-family: "icomoon";
  top: 20px;
  right: 20px;
  color: #7980ff;
  font-size: 15px;
}


.layout-project {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  background-color: #f8fafc;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 500;
  color: rgba(49, 57, 79, 0.8);
}
.layout-project.active {
  border-color: #7980ff;
  color: #7980ff;
  background-color: rgba(121, 128, 255, 0.1);
}
.layout-project.active svg path {
  stroke: #7980ff;
}
.select-driver {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px;
  background-color: #f8fafc;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 500;
  color: rgba(49, 57, 79, 0.8);
}
.select-driver.active {
  border-color: #7980ff;
  color: #7980ff;
  background-color: rgba(121, 128, 255, 0.1);
}
.select-driver.selectedh::after {
  position: absolute;
  content: "\e976";
  font-family: "icomoon";
  top: 20px;
  right: 20px;
  font-size: 15px;
  color: #7980ff;
}
.select-driver.active svg path {
  stroke: #7980ff;
}

.menu-tab-swiper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px;
  background-color: #f8fafc;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 500;
  color: rgba(49, 57, 79, 0.8);
}
.menu-tab-swiper.active {
  border-color: #7980ff;
  color: #7980ff;
  background-color: rgba(121, 128, 255, 0.1);
}
.menu-tab-swiper.selectedh::after {
  position: absolute;
  content: "\e976";
  font-family: "icomoon";
  top: 20px;
  right: 20px;
  font-size: 15px;
  color: #7980ff;
}
.menu-tab-swiper.active svg path {
  stroke: #7980ff;
}
/*------------ dropdown ---------------- */
.dropdown-menu {
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.06);
  border-color: transparent;
  min-width: 114px;
  z-index: 1010;
}
.dropdown-menu .dropdown-item {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--onSurface);
}
.dropdown-menu .dropdown-item .icon {
  color: var(--text-4);
  font-size: 20px;
}
.dropdown-menu .dropdown-item:active {
  background-color: #fff;
}
.dropdown-menu .dropdown-item:hover {
  background-color: transparent;
}

.dropdown .dropdown-toggle:after {
  content: none;
}
.dropdown .dropdown-menu .dropdown-item {
  padding: 0;
  color: var(--onSurface);
  font-weight: 500;
  font-size: 14px;
}
.dropdown .dropdown-menu .dropdown-item:not(:last-child) {
  padding-bottom: 10px;
}
.dropdown .dropdown-menu .dropdown-divider {
  margin: 0px 0px 10px;
  border-color: var(--line);
}
.dropdown .dropdown-menu.full {
  min-width: 100%;
}
.dropdown.style-2 .dropdown-menu .dropdown-header {
  font-size: 16px;
  font-weight: "Inter", sans-serif;
  color: var(--onSurface);
  font-weight: 700;
}
.dropdown.style-2 .dropdown-menu .top {
  padding-bottom: 10px;
}
.dropdown.style-2 .dropdown-menu .top .dropdown-header {
  padding: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.dropdown.style-2 .dropdown-menu .top .dropdown-item {
  padding-top: 10px;
}
.dropdown.style-2 .dropdown-menu .bottom .dropdown-header {
  padding: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.dropdown.style-2 .dropdown-menu .bottom .dropdown-item {
  padding-top: 10px;
}
.dropdown.style-3 .dropdown-menu {
  padding: 10px 0px;
  border: 0;
}
.dropdown.style-3 .dropdown-menu .dropdown-item {
  padding: 8px 20px;
}
.dropdown.style-3 .dropdown-menu .dropdown-item.active {
  background: var(--rgba-primary);
}
.dropdown.style-3 .dropdown-menu .dropdown-item.disable {
  color: var(--text);
}
.dropdown.dropup .dropdown-toggle:after {
  content: "\e919";
  font-family: "icomoon";
  border: 0;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}
.dropdown.dropend .dropdown-toggle:after {
  content: "\e91c";
  font-family: "icomoon";
  border: 0;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}
.dropdown.dropstart .dropdown-toggle::before {
  content: "\e91d";
  font-family: "icomoon";
  border: 0;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}
.dropdown .btn-dropdown:after {
  content: "\e91a";
  font-family: "icomoon";
  border: 0;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.btn-dropdown:after {
  content: "\e91a";
  font-family: "icomoon";
  border: 0;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.min-w-auto {
  min-width: auto;
}

.dropdown-backdrop.show:before {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(49, 57, 79, 0.12);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  content: "";
  z-index: 1;
}

.dropdown-menu.dropdown-setting-task {
  box-shadow: none;
  border-top-right-radius: 0;
  top: 20px !important;
}
.dropdown-menu.dropdown-setting-task .dropdown-item {
  padding: 16px 0px !important;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: rgb(49, 57, 79);
  opacity: 0.9;
}
.dropdown-menu.dropdown-setting-task .dropdown-item:not(:last-child) {
  border-bottom: 1px solid rgba(49, 57, 79, 0.1);
}
.dropdown-menu.dropdown-setting-task .dropdown-item:first-child {
  padding-top: 0px !important;
}
.dropdown-menu.dropdown-setting-task .dropdown-item:last-child {
  padding-bottom: 0px !important;
}

/*------------ off canvas ---------------- */
/*=====================
  2.8 Offcanvas CSS start
==========================*/

.addtohome-popup {
  height: 150px; 
position: pixed;
}

.addtohome-popup .install-app {

}
[dir="rtl"] .addtohome-popup .install-app {

}
  .addtohome-popup .app-info {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    
  }
  .app-info .icon {
    width: 100px;
  }
.addtohome-popup .app-info .content {
  flex-grow: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;

}
  
.addtohome-popup .app-info .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
  padding: 5px 2px auto;
  height: auto;
  width: auto;
  margin: 0 auto;
  border-radius: 50%;
  transition: all 0.2s;
  filter: grayscale(1);
}
.addtohome-popup .app-info .content h3 {
    font-weight: 600;
    color: #222222; 
}
.addtohome-popup .app-info .content a {
    color: #777777; 
}
.offcanvas {
  
}
.offcanvas.offcanvas-end {
  border: none;
  width: 250px;
}
.offcanvas.offcanvas-end.full {
  width: 100%;
   z-index: 999999 !important;
}
.offcanvas.offcanvas-bottom {
  z-index: 99999 !important;
  border-top: none;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  height: auto;
}
.offcanvas .offcanvas-header {
  padding: 24px;
}
.offcanvas .offcanvas-header.style-1 {
  padding-bottom: 19px;
}
.offcanvas .offcanvas-header .icon-close-popup {
  justify-content: flex-end;
  font-size: 12px;
}
.offcanvas .offcanvas-body {
  padding: 0px 24px;
}

.offcanvas-backdrop {
  background-color: rgba(49, 57, 79, 0.12);
}
.offcanvas-backdrop.show {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 1;
}

.icon-close-popup {
  width: 30px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(49, 57, 79, 0.6);
}

#closeAccount .offcanvas-body {
  padding: 32px 24px 34px;
}
#closeAccount .offcanvas-body h5 {
  padding-bottom: 12px;
  text-align: center;
}

.offcanvas#createProject {
  z-index: 1047;
}

#sidebarInbox .offcanvas-header {
  justify-content: flex-end;
}
#sidebarInbox .offcanvas-header .icon-close-popup {
  font-size: 15px;
}

.content-sidebarRight {
  overflow: auto;
}

.menu-navlink-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px 14px 20px;
  gap: 20px;
}
.menu-navlink-item .icon {
  font-size: 24px;
  color: rgba(49, 57, 79, 0.6);
}
.menu-navlink-item .title {
  color: rgba(49, 57, 79, 0.92);
}
.menu-navlink-item.active {
  position: relative;
}
.menu-navlink-item.active .icon {
  color: #7980ff;
}
.menu-navlink-item.active .title {
  color: #7980ff;
}
.menu-navlink-item.active::after {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  content: "";
  width: 6px;
  background-color: #7980ff;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  transform: translateX(-50%);
}

.num-inbox {
  width: 32px;
  height: 22px;
  background-color: #f05a5a;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
}
.button-add {
  position: relative;
  cursor: pointer;
}
.button-add .icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(50% - 70px);
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--onSurface);
}
.button-add .btn-add {
  position: relative;
  overflow: hidden;
  height: 50px;
  width: 100%;
  border: 1px dashed var(--line-2);
  background-color: var(--white);
  border-radius: 14px;
}
.button-add .btn-add::before {
  position: absolute;
  width: 100%;
  height: 100%;
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
  content: "Tambahkan";
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -10px;
  border: none;
  background-color: var(--white);
  color: var(--onSurface);
}
.button-add.up-lg .btn-add {
  height: 60px;
}


/*maps*/

.box-container-map {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1;
  overflow-y: scroll;
}

.box-container-map .box-map {
   position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.box-container-map .time-control {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.4);
  font-size: 12px;
  background: #f3f3f3;
  transition: all 0.1s;
  filter: grayscale(1);
}
.box-container-map .map-group-control-kiri {
  position: absolute;
  top: 10%;
  left: 2%;
}
.content-bottom-main-scroll {
   width: 100%;
    position: absolute;
    top: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999999;
  
}
.map-popoverss {
   
}

.map-popover { 
    position: absolute;
    top: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999999999999;
    width: 100%;
    min-height: 320px;
    height: auto;
    
    font-size: 12px; 
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0px 16px 60px 0px rgba(0, 0, 0, 0.75);
    
    background-color: #fff;  
    font-family:"Helvetica Neue",Helvetica, arial, microsoft yahei,"\5B8B\4F53"; 
}

.map-popover .handle-slide {
    border-radius: 20px;
    background: #DDD;
    width: 61px;
    height: 6px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}




/*.popover-html { min-width: 200px; font-size: 14px; }*/
.popover-html .form-group { margin-bottom: 5px; }
.popover-btn { position: absolute; top: 50%; left: 50%; z-index: 3; width: 48px; height: 48px; overflow: hidden; display: block; }
.popover-html a { color: #666; margin-right: 10px; }
.popover-html a:hover { color: #0087d6; }

/*
.map-popover { position: absolute; top: 100px; left: 100px; z-index: 9; width: 270px; font-size: 12px; border: 1px solid #aaa; border-radius: 4px; box-shadow: 3px 3px 3px rgba(0,0,0,.2); background-color: #fff;  font-family:"Helvetica Neue",Helvetica, arial, microsoft yahei,"\5B8B\4F53"; }

.map-popover:before, .map-popover:after { content: ""; position: absolute; left: 50%; bottom: -20px; z-index: 2; width: 0; height: 0; margin-left: -5px; border-width: 10px 8px; border-style: solid; border-color: #f9f9f9 transparent transparent #f9f9f9; }
.map-popover:after { border-width: 11px 9px; bottom: -23px; z-index: 1; margin-left: -6px; border-color: rgba(0,0,0,.2) transparent transparent rgba(0,0,0,.2); }
*/

.popover-header {
    margin-top: 20px; 
    border-bottom: 1px solid #ddd; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.popover-header, .popover-body, .popover-footer { padding: 4px 15px; }
.popover-header h5 { margin: 0; }
.popover-close { color: #000; float: right; font-size: 21px; font-weight: 500; line-height: .8; color: #999; cursor: pointer; }
.popover-close:hover { color: #f40000; }
.popover-body table { table-layout: fixed; }
.popover-body table tr th {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.popover-body table th,.popover-body table td { padding: 2px; vertical-align: top; }
.popover-footer { border-top: 1px solid #ddd; background-color: #f9f9f9; border-radius: 0 0 4px 4px; box-shadow: inset 0 1px 0 #fff; }
.popover-footer a { display:inline-block; margin-right: 8px;  max-width:100px;  white-space: nowrap; text-overflow: ellipsis;  color: #0087d6; cursor:pointer;}







.map-popover:before, .map-popover:after { }
.map-popover:after { }
.popover-header {
position: relative;
box-shadow: inset 0 1px 0 #fff;
}

.popover-close:hover .map-popover{
background: #00d600;
}
.popover-header, .popover-body, .popover-footer {
padding: 4px 15px;
border-radius: 0;
}
.popover-header .title {
padding: 4px 0;
}
.popover-header .deviceName {
display: inline-block;
font-size: 16px;
color: #333;
margin-right: 10px;
width: 120px;
line-height: 24px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.popover-header .imei {
display: inline-block;
color: #808080;
font-size: 14px;
font-weight: 400;
padding-right: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 130px;
line-height: 24px;
}
.popover-body {
padding-top: 15px;
position: relative;
}

.popover-body .fa-circle-o-notch {
display: none;
position: absolute;
top: 0;
right: 10px;
font-size: 16px;
color: #cccccc;
}
.popover-body .fa-expiration {
position: absolute;
top: -5px;
right: 40px;
font-size: 12px;
color: red;
}
.popover-body-left{
border: 1px solid #ccc;
width: 52px;
height: 52px;
display: table-cell;
position: relative;
overflow: hidden;
vertical-align: middle;
left:10px;
bottom:5px;
}
.popover-body-left-tips {
position: absolute;
height: 18px;
width: 64px;
left: 55px;
top: 6px;
font-size: 10px;
text-align:  center;
line-height: 18px;
color: #fff;
background: #fe4650;
-moz-transform: rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform: rotate(45deg);
}
.popover-body-right {
padding-left: 40px;
display: table-cell;
vertical-align: middle;
}
.popover-body-right ul li {
margin-bottom: 8px;
}
.popover-body-right ul li:last-child {
margin-bottom: 0;
}
.popover-body-right ul li i {
text-align: center;
font-size: 18px;
width: 20px;
margin-right:10px;
}
.popover-body-right ul li .text{
display: inline-block;
line-height: 20px;
vertical-align: top;
}
.popover-body-top {
margin-bottom: 10px;
display: table;
}
.popover-body-top, .popover-body-bottom {
display: inline-block;
width: 100%;
position: relative;
}
.popover-body {
    background-color: #fff; 
}
.popover-body-bottom {
    background-color: #fff; 
}
.popover-body-bottom .item {
margin-bottom: 5px;
}
.popover-body-bottom .item:nth-child(n+2) {
display: none;
}
.popover-body-bottom .title {
width: 100px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.popover-body-bottom .text {
display: inline-block;
color: #808080;
width: 160px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.popover-body-bottom .more-wrapper {
position: absolute;
bottom: 4px;
right: -8px;
font-size: 20px;
cursor: pointer;
}
.popover-body-bottom .more-wrapper:hover {
color: #f40000;
}
.popover-body-bottom .more-wrapper i {
width: 20px;
height: 20px;
text-align: center;
}
.battery-wrapper {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
vertical-align: top;
}
.popover-body .battery{
position: relative;
border: 1px solid #9c9c9c;
padding: 1px;
width: 20px;
height: 10px;
display: inline-block;
vertical-align: sub;
}
.popover-body .battery::before {
content: "";
position: absolute;
right: -3px;
top: 50%;
height: 50%;
width: 2px;
background-color: #9c9c9c;
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.popover-body .border-color-moving {
display: table-cell;
text-align: center;
border: 1px solid #00d600;
}
.moving-box {
display: table-cell;
vertical-align: middle;
width: 52px;
height: 52px;
}
.popover-body .border-color-offline {
font-size: 18px;
line-height: 52px;
color: #666;
border: 1px solid #666;
}
.popover-body .border-color-static {
font-size: 18px;
line-height: 52px;
color: #de3b3b;
border: 1px solid #de3b3b;
}
.popover-body .border-color-idling {
font-size: 18px;
line-height: 52px;
color: #f7a023;
border: 1px solid #f7a023;
}
.popover-body .battery-line {
width: 100%;
height: 100%;
background-color: #1fd330;
display: block;
}
.popover-body .speed, .popover-body .unit, .popover-body .status {
text-align: center;
margin: 2px 0;
}
.border-color-moving .speed {
font-size: 18px;
color: #00d600;
}
.border-color-moving .status {
color: #00d600;
font-size: 18px;
}
.popover-footer {
display: inline-block;
text-align: center;
width: 100%;
padding: 8px 0 6px 0;
}
.popover-footer ul {
    color: #42aeed;
display: inline-block;
}
.popover-footer ul li {
float: left;
width: 22px;
height: 22px;
text-align: center;
margin-right: 12px;
}
.popover-footer ul li:last-child {
margin-right: 0
}
.popover-footer ul li a {
display: block;
width: 100%;
height: 100%;
}
.popover-footer ul li a i {
transition: 0.3s;
font-size: 18px;
color: #666
}
.popover-footer ul li a i:hover {
color: #42aeed;
}
.red {
color: #ff6d73;
}
.green {
color: #00d600;
}




.main-scroll-layer {
 
   position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: -9;
}
.box-container-map .map-group-control-right {
  position: absolute;
  top: 18%;
  right: 2%;
}

.map-group-control .right {
  
}

.map-group-control .left {
 
}
.box-container-map .map-group-control-bottom {
  position: absolute;
  bottom: 13%;
  right: 2%;
  z-index: 10;
}

.box-container-map .btn-control {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  height: 40px;
  width: 40px;
  margin: 0 auto;
  border-radius: 50%;
}
.box-container-map .btn-control.active {
  background-color: var(--menuDark);
  border-color: var(--white);
  color: var(--white);
}
.box-container-map .btn-control.border-icon{
  border: 2px solid rgba(0,0,0,0.4);
}
.box-container-map .map-group-control-bottom {
  position: absolute;
  bottom: 13%;
  right: 2%;
  z-index: 10;
}
.box-container-map .content-fixed-bottom {
   position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.75);*/
     z-index: 10;
     height: 100%;
    overflow-y: scroll;
   background:inherit;
  
}

.content-bottom-main-scroll .light-box-data {
  display: block;
  width: 100%;
  vertical-align: top;
  background: #fff;
}
.box-container-map .box-scroll {
  width: 100%;
  position: absolute;
  top: 63%;
  bottom: 5%;
  z-index: 10;
  /*overflow: hidden;*/
}
.box-container-map .map-popover1 {
 width: 100%;
    position: absolute;
    top: 53%;
    bottom: 5%;
    right: 0;
    left: 0;
    z-index: 9999999;
}
.box-container-map .light-box-data {
  display: block;
  width: 100%;
  vertical-align: top;
  background: #fff;
}
.box-container-map .light-box-data.style-1{
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  box-shadow: 0px 8px 15px 0px rgba(24, 25, 27, 0.05);
}





.appHome .current-home-1 a,
.appHome2 .current-home-2 a,
.appHome3 .current-home-3 a,
.appHome4 .current-home-4 a,
.appHome5 .current-home-5 a,
.appHome6 .current-home-6 a,
.appSearch .current-search a,
.appSearch2 .current-search2 a,
.appSearch3 .current-search3 a,
.appSearchResult .current-searchResult a,
.appSearchResult2 .current-searchResult2 a,
.appSearchResult3 .current-searchResult3 a,
.appSearchResult4 .current-searchResult4 a,
.appFilter .current-filter a,
.appDetails .current-details a,
.appDetails2 .current-details2 a,
.appDetails3 .current-details3 a,
.appDetails4 .current-details4 a,
.appDetails5 .current-details5 a,
.appDetails6 .current-details6 a,
.appDetails7 .current-details7 a,
.appDetails8 .current-details8 a,
.appDetails9 .current-details9 a,
.appDetails10 .current-details10 a,
.appDetails11 .current-details11 a,
.appFavorite .current-favorite a,
.appFavorite2 .current-favorite2 a,
.appFavorite3 .current-favorite3 a,
.appNearby .current-nearby a,
.appNearby2 .current-nearby2 a,
.appProfile .current-profile a,
.appProfile2 .current-profile2 a,
.appProfile3 .current-profile3 a,
.appDelivery .current-delivery a,
.appPayment .current-payment a,
.appPayment2 .current-payment2 a,
.appPayment3 .current-payment3 a,
.appRate .current-rate a,
.appTrack .current-track a,
.appTrack2 .current-track2 a,
.appTrack3 .current-track3 a,
.appTrack4 .current-track4 a {
  color: #033f38;
}
.mapboxgl-ctrl-attrib.mapboxgl-compact,
a.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib-inner {
  display: none !important;
}

.driver-onboarding .boarding-box .img-box {
  max-width: 289px;
  height: 319px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.driver-onboarding .boarding-box .tf-content h1 {
  padding: 0 43px;
}
.driver-onboarding .boarding-box .tf-content p {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.app h1 {
  padding-right: 50px;
}
.app .header-location p {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  opacity: 0.400000006;
}
.app .header-location span {
  margin-top: 6px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  display: flex;
  align-items: center;
  gap: 4px;
}
.app .wrap-swiper {
  margin-left: -20px;
  margin-right: -20px;
}
.app .header-home {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app .header-home .left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app .header-home .left .avt {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.app .header-home .left .avt img {
  width: 100%;
  height: 100%;
}
.app .header-home .left .content p {
  color: #a1a1a1;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
}
.app .header-home .left .content h5 {
  margin-top: 3px;
}
.app .header-home .left .content h5 a {
  color: #262626;
}
.app .header-home .right {
  padding: 6px 0px;
  padding-left: 15px;
}
.app .header-home .right .icon-filter-2 {
  font-size: 20px;
  color: #033f38;
}
.bottom-wrapper {
  position: fixed;
}
.bottom-wrapper.st1 {
  left: 20px;
  right: 20px;
  bottom: 20px;
}
.bottom-wrapper .bt-container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.bottom-wrapper .wrap-box {
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.06);
}
.bottom-wrapper .wrap-box .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bottom-wrapper .wrap-box .grid-2 .tf-btn {
  height: 46px;
}
.bottom-wrapper .wrap-box.bg-primary .box-driver {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bottom-wrapper .wrap-box.bg-primary .box-driver .info h3 a {
  color: #ffffff;
  font-weight: 500;
}
.bottom-wrapper .wrap-box.bg-primary .box-driver .info .list-star span {
  color: #ffffff;
  font-weight: 500;
}
.bottom-wrapper .wrap-box.bg-primary .box-driver .icon {
  background-color: #fff1d0;
}
.bottom-wrapper .wrap-box.bg-primary .box-driver .icon i {
  color: #033f38;
}
.bottom-wrapper .wrap-box.bg-primary .order-track-list .icon {
  background: rgba(255, 255, 255, 0.05);
}
.bottom-wrapper .wrap-box.bg-primary .order-track-list .icon i {
  color: #ffffff;
}
.bottom-wrapper .wrap-box.bg-primary .order-track-list .info p {
  color: #ffffff;
  opacity: 0.4;
}
.bottom-wrapper .wrap-box.bg-primary .order-track-list .info h5 {
  color: #ffffff;
  font-weight: 500;
}
.bottom-wrapper.full {
  left: 0;
  bottom: 0;
  width: 100%;
}
.bottom-wrapper.full .box-driver {
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.06);
}
.bottom-wrapper.full .wrap-box {
  border-radius: 0;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.bottom-wrapper.full .wrap-box.location {
  padding: 34px 20px;
}

.box-delivery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.box-delivery li {
  display: flex;
  gap: 6px;
}
.box-delivery li:first-child {
  border-right: 1px solid #f1f1f1;
}
.box-delivery li .icon {
  font-size: 16px;
  color: #cfcfcf;
}
.box-delivery li .content p {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 3px;
}
.box-delivery li .content h5 {
  color: #262626;
}

.m-direction {
  position: absolute;
  top: 22%;
  left: 45%;
}
.m-direction.st1 {
  top: 6%;
  left: 43%;
}
.m-direction.st2 {
  top: 15%;
}

.order-track-list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.order-track-list .icon {
  background: rgba(3, 63, 56, 0.05);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-track-list .icon i {
  font-size: 22px;
  color: #033f38;
}
.order-track-list .info p {
  color: #a1a1a1;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 3px;
}
.order-track-list .info h5 {
  color: #262626;
}

.order-track-box li:first-child {
  position: relative;
}
.order-track-box li:first-child svg {
  position: absolute;
  left: 44px;
  margin-top: 4px;
  transform: translateX(-23px);
}



.title-header-bar {
    width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.title-header-bar .search-box {
  flex-grow: 1;
}
.title-header-bar.st1 {
  gap: 12px;
  justify-content: space-between;
}
.title-header-bar.st1 .inner-title-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-grow: 1;
}
.title-header-bar.st1 .icon-box {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 16px;
  border: 1px solid #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.title-header-bar.st1 .icon-box i {
  font-size: 20px;
  color: #033f38;
}
.title-header-bar.st1 .icon-box svg {
  position: absolute;
  top: -2px;
  right: 0;
}
.title-header-bar.st1 .t-right {
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #033f38;
}
.title-header-bar.st2 {
  position: relative;
  z-index: 10;
}
.title-header-bar .b-home i {
  font-size: 20px;
  color: #033f38;
}
.title-header-bar h1 {
  flex-grow: 1;
}

.title-header-bar .search-box {
  position: relative;
}
.title-header-bar .search-box .icon {
  position: absolute;
  left: 14px;
  top: 18px;
  font-size: 20px;
  color: #cfcfcf;
}
.title-header-bar .search-box .icon-location {
  left: 0;
  top: 0;
  padding: 18px 10px 18px 14px;
}
.title-header-bar .search-box .icon-filter-2 {
  position: absolute;
  right: 14px;
  top: 18px;
  font-size: 20px;
  color: #033f38;
}
.title-header-bar .search-box input {
  padding-right: 42px;
  padding-left: 42px;
  height: 40px;
  
  border-radius: 10px;
  border: 1px solid var(--primary);
  background: rgba(246, 132, 68, 0.1);
}
.title-header-bar .search-box .t-ip {
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 14px;
  color: #033f38;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.title-header-bar .search-box.search-location input {
  padding-right: 55px;
}
.title-header-bar .search-box.search-location input::placeholder {
  
}
.title-header-bar .search-box input:valid ~ .icon-close {
  display: block;
}
.title-header-bar .search-box .icon-close {
  display: none;
  position: absolute;
  top: 18px;
  font-size: 18px;
  right: 14px;
  color: #cfcfcf;
}
.title-header-bar .btn-sidebar,
.btn-st2 {
  width: 34px;
  height: 34px;
  border: 1px solid #033f38;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-header-bar .btn-sidebar i,
.btn-st2 i {
  font-size: 18px;
  color: #033f38;
}
.title-header-bar .btn-sidebar.primary,
.btn-st2.primary {
  border-color: #ffffff;
}
.title-header-bar .btn-sidebar.primary i,
.btn-st2.primary i {
  color: #ffffff;
}