@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --primary: #FD550C!important;
  --secondary: #207575!important
}

html {
  height: -webkit-fill-available;
  font-size: 12px !important;
}

body {
  background: #f0f4f8 !important;
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  scrollbar-width: thin;
}

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

body::-webkit-scrollbar-track {
  background: #fff;
}

body::-webkit-scrollbar-thumb {
  background-color: #90BABA;
  border-radius: 1px;
  border: none;
}

h1,
h2 {
  /* color: #333111; */
  font-family: "Inter", sans-serif;
  /* bottom: 5px; */
}

h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", sans-serif!important;
}

/* .close-white {
  display: none;
} */

.minified nav ul li.active>a:before {
  content: "\f0d9";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  display: block;
  height: 27px;
  line-height: normal;
  width: 27px;
  position: absolute;
  right: -21px;
  font-size: 20px;
  color: #000;
  display: none;
}

.minified .account {
  /* right: 74px; */
  right: 87px;
}

.minified .account .lang-switch {
    clear: both;
}

.form-control,
#status {
  display: block;
  width: 100%;
  height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #555;
  background-color: #eaeef2 !important;
  background-image: none;
  border: 0px !important;
  border-radius: 5px !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eaeef2;
  border: 0px;
  border-radius: 5px !important;
}

/* .form-control[name^='filter'] {
  padding-left: 5px; 
  border: 1.3px solid #6e98da !important;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 3px !important;
} */

.smart-form .input input,
.smart-form .select select,
.smart-form .textarea textarea {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding: 5px 10px;
  outline: 0;
  border-width: 1px;
  border: 0px !important;
  border-radius: 3px;
  background: #eaeef2;
  font: 13px/16px "Inter", sans-serif;
  color: #404040;
  appearance: normal;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.select2-container--default .select2-selection--single {
  background-color: #eaeef2;
  border: 0px;
  border-radius: 5px;
  height: 40px;
}

.select2-container .select2-selection--single {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  --webkit-user-select: none;
}

.dataTables_filter .input-group-addon+.form-control {
  float: left;
  border-radius: 0px 5px 5px 0px !important;
  background: white;
}

.dataTables_filter .input-group-addon {
  width: 32px;
  margin-top: 0;
  float: left;
  height: 32px;
  padding-top: 8px;
  margin-left: 15px;
}

.btn-warning {
  background: #ff9412 !important;
  color: white;
  border-radius: 5px !important;
  border: 0px;
  padding: 6px;
}

.btn-success {
  background: var(--primary) !important;
  color: white;
  border-radius: 5px !important;
  border: 0px;
  padding: 6px;
  min-width: 23px;
}

.btn-success.disabled, .btn-success:disabled {
  background: var(--primary) !important;
}

.btn.focus,
.btn:active,
.btn:hover {
  /* color: #fff !important; */
  text-decoration: none;
}

header button.btn.btn-white:hover,
header button.btn.btn-white:focus,
header button.btn.btn-white:active {
  color: #4e5155 !important;
}

.MessageBoxContainer .btn-sm {
  line-height: 1.1;
}

.minified nav>ul>li>a>.menu-item-parent {
  border: 0px !important;
  border-radius: 5px 5px 0px 0px !important;
  position: absolute;
  left: 48px;
  top: -10px;
  width: 186px;
  height: 38px;
  line-height: 38px;
  background-color: #fafafa;
  color: #207575 !important;
  z-index: 1000 !important;
  -webkit-box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: none !important;
  padding-left: 12px;
}

.minified nav>ul>li>ul {
  color: black !important;
  display: none !important;
  position: absolute;
  left: 48px;
  width: 199px;
  z-index: 1000 !important;
  border: 0px !important;
  min-height: 180px;
  -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
  background: #207575 !important;
  margin-top: -3px;
  overflow: hidden;
}

.minified nav>ul>li>ul>li {
  background-color: #207575;
}

.minified nav>ul>li>ul>li>ul>li {
  background-color: #207575;
}

.alertify .ajs-footer .ajs-buttons .ajs-ok {
  border-radius: 5px !important;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  color: #fff;
  background-color: #1e70cd !important;
  border: 0px important;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.alertify .ajs-footer .ajs-buttons .ajs-cancel {
  border-radius: 5px !important;
  display: inline-block;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  color: #fff;
  background-color: #9fafbe !important;
  border: 0px !important;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.alertify .ajs-header {
  color: #333;
  border-bottom: 1px solid #e5e5e5;
  border-radius: 6px 6px 0 0;
  font-family: Inter !important;
  font-size: 18px;
}

.alertify .ajs-body {
  font-family: Inter !important;
  color: #000;
}

.btn-primary {
  background: #1e70cd !important;
  color: white;
  border-radius: 5px !important;
  border: 0px;
  padding: 6px;
}

.btn-danger {
  background: #e24343 !important;
  color: white;
  border-radius: 5px !important;
  border: 0px;
  /* padding: 6px !important; */
}

.fa-sign-out {
  display: none;
}

.MessageBoxContainer {
  top: 35%;
  color: #212121;
  position: relative;
  width: 50%;
  background-color: #fafafa;
  margin: auto;
  border-radius: 10px !important;
  font-family: Inter !important;
}

.txt-color-orangeDark {
  color: #212121 !important;
}

.button-pos {
  position: relative;
  top: 10px;
  left: 50px;
}

.widget-toolbar {
  display: none;
  float: right;
  width: auto;
  height: 32px;
  line-height: 32px;
  position: relative;
  border-left: 1px solid rgba(0, 0, 0, 0.09);
  cursor: pointer;
  padding: 0 8px;
  text-align: center;
}

/* .form-control,
.input-lg,
.input-sm,
.input-xs {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
} */

.dt-toolbar-footer {
  background: #fafafa;
  font-size: 11px;
  overflow: hidden;
  padding: 5px 10px;
  border-top: 0px !important;
  -webkit-box-shadow: inset 0 1px #fff;
  -ms-box-shadow: inset 0 1px #fff;
  box-shadow: inset 0 1px #fff;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* .modal {
  z-index: 1100;
} */

.modal-body-scroll {
  position: relative;
  padding: 30px !important;
  font-family: Inter !important;
  overflow-y: auto;
  max-height: 67vh;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  /* min-height: 50vh !important; */
}

.modal-content {
  position: relative;
  background-color: #fff;
  border: 0px !important;
  border-radius: 11px !important;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}

.modal-title {
  margin: 0;
  line-height: 1.42857143;
  font-family: "Inter";
  color: #ffffff;
  margin-right: auto;
}

.bggreen {
  background-color: #1e70cd !important;
  color: #212121 !important;
  border-radius: 10px 10px 0px 0px !important;
}

.btn-success.active,
.btn-success:active,
.btn-success:hover,
.open>.dropdown-toggle.btn-success {
  color: #fff;
  background-color: var(--primary) !important;
  border-color: rgba(0, 0, 0, 0.1);
}

.btn-success {
  color: #fff;
  background-color: var(--primary);
  border: 0px !important;
  border-radius: 5px !important;
}

.btn-cancel {
  color: #fff;
  background-color: #9fafbe rgba(150, 111, 29);
  border: 0px !important;
  border-radius: 5px;
}

.smart-form footer .btn {
  float: right;
  height: 31px;
  margin: 10px 0 0 5px;
  padding: 0 22px;
  font-family: Inter;
  font-size: 1rem;
  cursor: pointer;
}

.border-photo {
  background: #ffffff;
  border: 3px solid #d0dce7;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 0px 18px;
}

.smart-form .icon-append,
.smart-form .icon-prepend {
  color: #a2a2a2;
  /* display: none; */
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(24, 28, 33, 0.05);
}

.dropdown-item {
  line-height: 1.54;
  cursor: pointer;
}

.dropdown-item:not(.disabled).active, .dropdown-item:not(.disabled):active {
  background-color: #207575!important;
  color: #fff !important;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.438rem 1.25rem;
  clear: both;
  font-weight: 400;
  color: #4e5155;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  font-size: 11px !important;
}

.dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.357em;
  vertical-align: 0.357em;
  content: "";
  margin-top: -0.28em;
  width: 0.42em;
  height: 0.42em;
  border: 1px solid;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-white {
  border-color: transparent;
  background: #fff;
  color: #4e5155;
  font-size: 11px !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group>.btn,
.btn-group-vertical>.btn {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

button.dt-button.buttons-copy,
div.dt-button,
a.dt-button {
  background: #758798 !important;
  color: white !important;
  border-radius: 5px !important;
  border: 0px !important;
}

button.dt-button.buttons-csv,
div.dt-button,
a.dt-button {
  background: #ffb62e !important;
  color: white !important;
  border-radius: 5px !important;
  border: 0px !important;
}

button.dt-button.buttons-excel,
div.dt-button,
a.dt-button {
  background: #358e62 !important;
  color: white !important;
  border-radius: 5px !important;
  border: 0px !important;
}

button.dt-button.buttons-pdf,
div.dt-button,
a.dt-button {
  background: #ff4c45 !important;
  color: white !important;
  border-radius: 5px !important;
  border: 0px !important;
}

button.dt-button.buttons-print,
div.dt-button,
a.dt-button {
  background: #2e6c8e !important;
  color: white !important;
  border-radius: 5px !important;
  border: 0px !important;
}

.form-actions {
  display: block;
  padding: 13px 14px 15px;
  border-top: 0px solid rgba(0, 0, 0, 0.1) !important;
  background: transparent !important;
  margin-top: 10px;
  margin-left: -5px !important;
  margin-right: -13px;
  margin-bottom: -13px;
  text-align: right;
  width: 100% !important;
}

.btn-default {
  font-family: Inter;
  background: #9fafbe !important;
  color: white;
  border-radius: 5px;
  border: 0px !important;
  /*width: 100px !important; */
  height: 31px !important;
  padding: 8px !important;
  margin-top: 0px !important;
}

.btn-default.active,
.btn-default:active,
.btn-default:hover,
.btn-default:focus,
.open>.dropdown-toggle.btn-default {
  color: #fff!important;
  background-color: #e6e6e6;
  border-color: #adadad;
}

button#btnSearch_form1 {
  font-family: Inter;
  background: #207575!important;
  color: white;
  border-radius: 5px;
  border: 0px;
  /*height: 35px !important;  */
  padding: 8px !important;
}

button#btnExportPdf_form1 {
  background: #ff4c45 !important;
  color: white;
  border-radius: 5px;
  width: 100px !important;
  border: 0px;
  height: 35px !important;
  font-size: 1rem;
}

button#btnExportExcel_form1 {
  background: #358e62 !important;
  color: white;
  border-radius: 5px;
  width: 110px !important;
  border: 0px;
  height: 35px !important;
  font-size: 1rem;
}

button#btnExportCsv_form1 {
  background: #ffb62e !important;
  color: white;
  border-radius: 5px;
  width: 110px !important;
  border: 0px;
  height: 35px !important;
  font-size: 1rem;
}

.jarviswidget {
  border: 0px !important;
  width: calc(100% - 5px) !important;
  /* top: -14px !important; */
  left: 7px !important;
  padding: 10px;
  background: #ffffff !important;
  border-radius: 10px;
  /* box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1); */
  margin-bottom: 15px;
}

.jarviswidget>div {
  font-family: Inter;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
  padding: 13px 13px 0;
  border-radius: 0;
  border: 0px !important;
  border-width: 1px 1px 2px;
  border-style: solid;
  border-top: none;
  border-right-color: #ccc !important;
  border-bottom-color: #ccc !important;
  border-left-color: #ccc !important;
  font-size: 13px;
  overflow: visible;
  -moz-border-radius: 0;
  -khtml-border-radius: 0;
  -webkit-border-radius: 0;
}

.jarviswidget>header>.widget-icon {
  display: none;
  width: 30px;
  height: 32px;
  position: relative;
  float: left;
  font-size: 111%;
  line-height: 32px;
  text-align: center;
  margin-right: -10px;
}

.jarviswidget>header {
  background: #207575 !important;
  border-radius: 5px 5px 0px 0px !important;
  width: calc(100% + 20px);
  height: 40px;
  border: 0px;
  margin-top: -15px;
  margin-left: -10px;
  padding: 0px 10px 0px;
}

.jarviswidget>header h2 {
  color: #fff;
  padding-top: 3px;
}

.jarviswidget-ctrls a {
  color: #fff;
}

/* .jarviswidget-ctrls .button-icon {
  min-width: 30px;
  height: 32px;
  float: left;
  position: relative;
  font-family: Inter;
  border-left: 1px solid rgba(0, 0, 0, 0.09);
  color: #ffffff;
} */

.input-group-addon .fa {
  font-size: 14px;
  display: contents;
}

.input-group-addon {
  display: table-cell;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  background-color: #8b9bad;
  border: 0;
  border-radius: 0 5px 5px 0 !important;
}

#modal_panel_vehicle .input-group-addon {
  width: auto;
}

.input-group>.form-control:not(:last-child),
.input-group>.custom-select:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

div.dataTables_info {
  padding-top: 9px;
  font-size: 11px !important;
  font-weight: 700;
  font-style: normal !important;
  color: #212121 !important;
}

label input[type="checkbox"].checkbox+span:before,
label input[type="radio"].radiobox+span:before {
  font-family: "Font Awesome 5 Pro";
  font-size: 12px;
  border-radius: 0;
  content: "\a0";
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 1px;
  height: 12px;
  line-height: 12px;
  min-width: 12px;
  margin-right: 5px;
  border: 1px solid #eaeef2 !important;
  background-color: #eaeef2;
  font-weight: 400;
  margin-top: -1px;
  border-radius: 3px !important;
}

td label input[type="checkbox"].checkbox+span:before,
label input[type="radio"].radiobox+span:before {
  border: 1px solid #ccc !important;
}

.select2-container-multi .select2-choices .select2-search-choice,
.select2-selection__choice {
  padding: 1px 28px 1px 8px !important;
  margin: 7.5px 0 3px 5px !important;
  position: relative;
  line-height: 20px;
  color: #fff;
  cursor: default;
  border: 0px !important;
  border-radius: 3px !important;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #207575 !important;
}

.select2-container .select2-selection--multiple {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  /* display: block; */
  display: table;
  min-height: 32px;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  background: #eaeef2 !important;
  border-radius: 5px !important;
  border: 0px !important;
  width: 100%;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: contents;
}

.entries-table {
  margin-top: 10px;
}

div.dataTables_length select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 1.3rem + 2px);
  padding: 0.65rem 2rem 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #3f4254;
  vertical-align: middle;
  background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%233F4254' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 1rem center/8px 10px;
  border: 1px solid #e4e6ef;
  border-radius: 5px !important;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: #69b3ff;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(54, 153, 255, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(54, 153, 255, 0.25);
}

.custom-select:focus::-ms-value {
  color: #3f4254;
  background-color: #ffffff;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 1rem;
  background-image: none;
}

.custom-select:disabled {
  color: #7e8299;
  background-color: #ebedf3;
}

.custom-select::-ms-expand {
  display: none;
}

.custom-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #3f4254;
}

.form-actions {
  display: block;
  padding: 13px 14px 15px;
  border-top: 0px solid rgba(0, 0, 0, 0.1) !important;
  background: rgba(249, 249, 249, 0.9);
  margin-top: 10px;
  margin-left: -13px;
  margin-right: -13px;
  margin-bottom: -13px;
  text-align: right;
}

.dt-toolbar {
  /* display: block; */
  /* position: relative; */
  /* padding: 14px 7px 1px; */
  /* width: 100%; */
  /* float: left; */
  border-bottom: 0 !important;
  /* background: #fafafa; */
  /* margin-bottom: 10px; */
}

.dataTables_scroll .dataTables_scrollBody,
.dataTables_scroll .dataTables_scrollHead {
  float: left;
  width: 100% !important;
  /* overflow-x: hidden scroll !important; */
  border-radius: 5px 5px 0px 0px !important;
  -webkit-border-radius: 5px 5px 0px 0px !important;
  -moz-border-radius: 5px 5px 0px 0px !important;
  -ms-border-radius: 5px 5px 0px 0px !important;
  -o-border-radius: 5px 5px 0px 0px !important;
}

/* disko */

.dataTables_scroll .dataTables_scrollBody {
  overflow-x: scroll !important;
}

.dataTables_scroll+.dt-toolbar-footer {
  float: left;
  width: 100% !important;
  border-radius: 5px 5px 0px 0px !important;
  -webkit-border-radius: 5px 5px 0px 0px !important;
  -moz-border-radius: 5px 5px 0px 0px !important;
  -ms-border-radius: 5px 5px 0px 0px !important;
  -o-border-radius: 5px 5px 0px 0px !important;
}

/* 
    .dataTables_scroll .dataTables_scrollHead {
      background: #f4f4f4;
      border-radius: 5px 5px 0px 0px !important;
      border: 1px solid black !important;
      width: 100% !important;
      overflow: hidden !important;
    }  */

.btn-excel-report {
  background: #358e62 !important;
  color: white !important;
  border-radius: 5px;
  width: 110px !important;
  border: 0px;
  height: 35px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
}

.btn-pdf-report {
  background: #ff4c45 !important;
  color: white;
  border-radius: 5px;
  width: 100px !important;
  border: 0px;
  height: 35px !important;
}

.btn-add-item,
#btnAddNew_DataGrid1 {
  background: var(--primary) !important;
  color: white;
  border-radius: 5px;
  min-width: 150px !important;
  border: 0px;
  height: 32px !important;
  padding: 7px 12px;
}

.btn-custom-report,
/* button#btnSave_form1, */

button#btnGenerate_formShare,
.modal button[type="submit"] {
  background: #1e70cd !important;
  color: white;
  border-radius: 5px;
  width: 120px !important;
  border: 0px;
  height: 35px !important;
  font-size: 1rem;
}

.btn-custom-report,
button[id^="btnSave"],
button#btnSave_form1,
button#btnGenerate_formShare,
.modal button[type="submit"] {
  background: #207575 !important;
  color: white;
  border-radius: 5px;
  min-width: 120px !important;
  border: 0px;
  height: 35px !important;
  padding: 0px 10px;
  font-size: 1rem;
}

button#btnCancel_form1 {
  font-size: 1rem;
}

.btn-reset-report,
.modal button[type="reset"],
.modal button[data-dismiss="modal"],
#btnCancelDummy {
  background: #9fafbe !important;
  color: white;
  border-radius: 5px;
  border: 0px;
  width: 100px !important;
  height: 35px !important;
  font-size: 1rem;
  display: block;
}

.btn-reset-report:hover,
.modal button[type="reset"]:hover,
.modal button[data-dismiss="modal"]:hover {
  color: white !important;
}

.modal .modal-header button[data-dismiss="modal"] {
  background: transparent !important;
  width: 35px !important;
  font-size: 2rem;
  opacity: 1;
}

.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  background: #eaeef2;
  border: 0px;
  border-radius: 5px !important;
  /* height: 33px; */
}

.select2-container .select2-choice .select2-arrow,
.select2-selection__arrow {
  display: inline-block;
  width: 34px;
  height: 100%;
  position: absolute;
  margin-right: 1 0px;
  top: 0;
  border-left: 0px solid #ccc;
  background: #eaeef2;
}

.jarviswidget-ctrls {
  /* width: auto;
  float: right;
  padding: 0; */
  margin-top: 5px;
  color: #fff !important;
}

.jarviswidget>header {
  color: #333;
  border: 0px;
  background: #fafafa;
}

.btn-info-vehicle {
  border-color: transparent;
  width: 25px;
  background: var(--primary);
  color: #fff;
  border-radius: 4px !important;
  padding: 3px 2px !important;
}

.check svg {
  position: relative;
  z-index: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #c8ccd4;
  stroke-width: 1.5;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.popupLegend .check:hover svg {
  stroke: transparent !important;
}

.popupLegend .cbx:checked+.check svg {
  stroke: #fff !important;
  filter: brightness(10);
}

.check {
  cursor: pointer;
  position: relative;
  margin: auto;
  width: 18px;
  height: 18px;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  margin: 0 13px 0 0;
}

/* .check:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34, 50, 84, 0.03);
  opacity: 0;
  transition: opacity 0.2s ease;
} */

.check svg {
  position: relative;
  z-index: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #c8ccd4;
  stroke-width: 1.5;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.check svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}

.check svg polyline {
  stroke-dasharray: 22;
  stroke-dashoffset: 66;
}

/* .check:hover:before {
  opacity: 1;
} */

.check:hover svg {
  stroke: #4285f4;
}

.cbx:checked+.check svg {
  stroke: #4285f4;
}

.cbx:checked+.check svg path {
  stroke-dashoffset: 60;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.cbx:checked+.check svg polyline {
  stroke-dashoffset: 42;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

#popupl-polyline {
  position: absolute !important;
  top: 70px !important;
  right: 116px !important;
  z-index: 1020 !important;
}

/* popupLegend */

.popupLegend {
  position: absolute;
  background: #fff;
  width: 164px;
  padding: 10px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  -webkit-transition: all ease-out 0.2s;
  -o-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s;
  -webkit-clip-path: circle(12px at 148px 16px);
  clip-path: circle(12px at 148px 16px);
  z-index: 1020;
  margin-top: 13px !important;
  top: 55px;
}

#popupl-indicator,
#popupl-indicator+.pltooltip {
  right: 102px;
}

#popupl-maptools,
#popupl-maptools+.pltooltip {
  right: 73px;
}

#popupl-geofence,
#popupl-geofence+.pltooltip {
  right: 44px;
}

#popupl-legend,
#popupl-legend+.pltooltip {
  right: 16px;
}

.popupLegend.pl-open {
  border-radius: 2px;
  -webkit-clip-path: circle(130% at 90% 10%);
  clip-path: circle(130% at 90% 10%);
  background: #fff;
}

.popupLegend .pl-icon {
  position: absolute;
  top: -3px;
  right: 3px;
  padding: 10px;
  color: #fe6c2c;
  cursor: pointer;
}

.popupLegend .pl-icon i {
  position: relative;
  right: -2px;
}

.popupLegend .pl-icon svg {
  position: relative;
  right: -6px;
  top: -1px;
}

.popupLegend#popupl-indicator .pl-icon svg {
  right: -4px;
}

.popupLegend#popupl-maptools .pl-icon i {
  display: none;
}

.popupLegend.pl-open#popupl-maptools .pl-icon i {
  display: block;
}

.popupLegend.pl-open#popupl-maptools .pl-icon svg {
  display: none;
}

.popupLegend.pl-open#popupl-indicator .pl-icon svg {
  display: none;
}

.popupLegend#popupl-legend .pl-icon i {
  right: 0;
}

.popupLegend.pl-open .pl-icon {
  color: #d9534f;
}

.popupLegend nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.popupLegend nav h5 {
  margin: 0 5px 8px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.popupLegend nav h5.pl-nav-active {
  border-bottom: 2px solid #1e70cd;
}

.popupLegend section {
  display: none;
}

.popupLegend section.pl-section-active {
  display: block;
}

/* .popupLegend .pl-row {
  display: flex;
  align-items: center;
  line-height: 1.1;
  padding: 4px 0;
} */

.popupLegend .pl-row {
  display: grid;
  align-items: center;
  line-height: 1.1;
  padding: 4px 0;
  grid-template-columns: 32px 1fr;
}

.pl-row>i {
  margin-right: 10px;
  padding: 6px 3px 3px 6px;
  border-radius: 50%;
  color: #fff;
  width: 24px;
  height: 24px;
}

.pl-row i.darkgreen,
.check.darkgreen {
  background: darkgreen!important;
}

.pl-row i.green,
.check.green {
  background: green!important;
}

.pl-row i.lightgreen {
  background: lightgreen!important;
  color: inherit;
}

.pl-row i.yellow {
  background: yellow!important;
  color: inherit;
}

.pl-row i.orange,
.popupLegend .check.orange {
  background: orange!important;
  color: inherit;
}

.pl-row i.red,
.check.red {
  background: red!important;
}

.pl-row i.skyblue,
.check.skyblue {
  background: skyblue!important;
  color: inherit;
}

.pl-row i.blue,
.check.blue {
  background: #2196f3!important;
}

.pl-row i.purple,
.check.purple {
  background: #673ab7!important;
}

.pl-row i.gray,
.check.gray {
  background: gray!important;
}

.pl-row small {
  display: block;
  font-size: 80%;
}

.popupLegend .check {
  margin: 0;
  border-radius: 50%;
  background: #999;
  margin-right: 8px;
  stroke: #eee;
  width: 24px;
  height: 24px;
}

/* .ccv .popupLegend .check {
  background: #999;
} */

.popupLegend .check svg {
  position: relative;
  left: 3px;
  top: 3px;
  stroke: #eee;
  /* opacity: 0; */
}

.history-monitoring .popupLegend .check svg {
  opacity: 0;
}

.vehicle-monitoring .popupLegend .check svg {
  transform: scale(1.6);
}

.popupLegend .check:hover svg {
  stroke: #fff;
}

.popupLegend .cbx:checked+.check svg {
  stroke: #fff;
}

.history-monitoring .popupLegend .cbx:checked+.check svg {
  opacity: 1;
}

/* tooltip for popup legend */

.pltooltip {
  position: absolute;
  z-index: 10000;
  margin-right: 40px;
  top: 70px;
  display: block;
  background-color: #000;
  color: #fff;
  border-radius: 3px;
  padding: 5px 8px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  text-align: right;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

#widget-grid .pltooltip {
  top: auto;
  right: 75px;
  margin-top: 14px;
}

.tabs-top .pltooltip {
  top: auto;
  right: 16px;
  margin-top: 15px;
  font-size: 132%;
}

.popupLegend:hover+.pltooltip {
  visibility: visible;
  opacity: 1;
  margin-right: 36px;
  letter-spacing: 0;
}

.popupLegend.pl-open:hover+.pltooltip {
  visibility: hidden;
  opacity: 0;
}

.pltooltip:after {
  color: #000;
  border-left: 5px solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -5px;
  top: 8px;
}

.cbx {
  display: none;
}

.cbx[disabled]+label,
.cbx[disabled]+label+span {
  pointer-events: none;
  opacity: .4;
}

#ribbon img {
  width: 13px;
  height: 13px;
}

.content-map {
  position: relative;
  width: calc(100% - 55px);
  height: clac(100% + 10px);
  left: 40px;
  background: #ffffff;
  -webkit-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}

#content {
  padding: 58px 11px 10px;
  margin-left: 2px;
  margin-top: -7px;
}

/* #content {
  position: relative;
  width: calc(100% - 55px);
  left: 40px;
   background: #FFFFFF;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin-top: 25px;

} */

.container-footer {
  font-family: Inter !important;
  border: 0px !important;
  border-radius: 0px 0px 10px 10px !important;
  background: #e9f1f1;
}

.card-monitoring.full .container-footer {
  border-radius: 0 !important;
  background: #fff;
}

.container-search {
  padding: 8px;
  border: 0px !important;
  background: #ffffff;
  border-radius: 10px 10px 0px 0px !important;
}

#nv_aside {
  color: #273146;
}

#nv_aside .container-search {
  border-bottom: 1px solid #edeff3 !important;
  position: sticky;
  top: 0;
  z-index: 10;
}

#nv_aside .container-header {
  border-bottom: none !important;
}

#nv_range {
  padding: 0 !important;
  margin: 4px 0 8px;
}

.nv-list .container-header {
  padding-top: 9px !important;
}

.container-search input {
  font-family: Inter;
  border: 0px !important;
  border-radius: 5px !important;
  background: #e9f1f1;
}

.card-monitoring {
  font-family: Inter;
  width: calc(100% - 19px);
  margin-top: 62px;
  margin-left: 29px;
  right: 15px;
  background: #fff !important;
  border-radius: 8px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 10px;
}

.card-monitoring.full {
  padding: 0 0 0 315px;
  overflow: hidden;
  margin-top: 16px;
  -webkit-transition: .1s;
  -o-transition: .1s;
  transition: .1s;
  background: #e5e3df !important;
}

.card-monitoring.full.no-aside {
  padding-left: 0;
}

.card-monitoring.full .map-monitoring,
.card-monitoring.full .live-video-container {
  height: calc(100vh - 122px);
}

.card-monitoring .input-search+i {
  right: 20px;
  top: 20px;
}

.card-monitoring.full .container-search input {
  background: #EBEFF7 !important;
  color: #4A597A;
  font-weight: 500;
  font-size: 12px;
  padding: 18px 12px;
}

.card-monitoring.full .container-search input::-webkit-input-placeholder {
  color: #a6b4d1;
}

.card-monitoring.full .container-search input::-moz-placeholder {
  color: #a6b4d1;
}

.card-monitoring.full .container-search input:-ms-input-placeholder {
  color: #a6b4d1;
}

.card-monitoring.full .container-search input::-ms-input-placeholder {
  color: #a6b4d1;
}

.card-monitoring.full .container-search input::placeholder {
  color: #4A597A;
}

.card-monitoring .input-search+i {
  color: #4A597A;
  -webkit-transition: .3s .15s;
  -o-transition: .3s .15s;
  transition: .3s .15s;
}

.card-monitoring.full .input-search+i {
  top: 21px;
}

.card-monitoring.full .input-search~svg {
  position: absolute;
  z-index: 10;
  -webkit-transition: .3s 1s;
  -o-transition: .3s 1s;
  transition: .3s 1s;
  right: 18px;
  top: 20px;
  pointer-events: none;
}

.card-monitoring.full .input-search:focus~svg {
  opacity: 0;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.card-monitoring .dataTables_scroll {
  max-width: calc(100vw - 252px);
}

.minified .card-monitoring .dataTables_scroll {
  max-width: calc(100vw - 77px);
}

.hidden-menu .card-monitoring .dataTables_scroll {
  max-width: calc(100vw - 25px);
}

.card-list {
  font-family: Inter;
  margin-top: 10px;
  margin-left: 10px;
  background: #ffffff !important;
  border-radius: 10px 10px 10px 10px !important;
  /* box-shadow: none !important; */
}

.card-monitoring.full .card-list {
  -webkit-transition: .1s;
  -o-transition: .1s;
  transition: .1s;
  margin: 0;
  border-radius: 0 !important;
  letter-spacing: -.3px;
}

.card-monitoring.full.no-aside .card-list {
  left: -315px;
  pointer-events: none;
}

.card-monitoring .card-list .card-header p,
.card-monitoring .card-list .card-header-history p {
  margin: 0;
}

.card-monitoring.full .card-list .card-header h5 {
  margin: 4px 0 2px;
  font-weight: 600;
  font-size: 14px;
}

.card-monitoring.full .card-list .card-header span.select2-selection__rendered {
  color: #4A597A !important;
}

.card-list>.card-header {
  font-family: Inter !important;
  border-radius: 10px 10px 0px 0px !important;
}

.card-monitoring.full .card-list>.card-header {
  border-radius: 0 !important;
  padding: 12px 9px 10px .875rem;
  border-bottom: 2px solid #EDEFF3;
}

.card-monitoring.full .container-search {
  padding: 10px 9px 0 .875rem;
}

.card-monitoring.full .card-list>.card-header>div:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.card-monitoring.full .card-list>.card-header>div:first-child {
  margin-bottom: 8px;
}

.card-monitoring.full .card-list>.card-header>div:first-child .select2 {
  width: 244px !important;
}

/* .card-monitoring.full .card-list>.card-header>div:first-child {
  width: 44px;
  padding-right: 8px;
} */

/* .card-monitoring.full .card-list>.card-header>div:first-child>svg {
  display: block;
  margin: auto;
} */

.card-list-toggle {
  position: absolute;
  top: 50%;
  left: 315px;
  z-index: 1000;
  background: #fff;
  width: 16px;
  height: 50px;
  margin-top: -25px;
  border-radius: 0 10px 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: .1s;
  -o-transition: .1s;
  transition: .1s;
  box-shadow: 2px 0 4px rgba(0, 0, 0, .1);
}

.card-monitoring.full.no-aside .card-list-toggle {
  left: 0;
}

.card-list-toggle>i {
  -webkit-transition: margin .2s ease-in, -webkit-transform .2s ease-in .15s;
  transition: margin .2s ease-in, -webkit-transform .2s ease-in .15s;
  -o-transition: margin .2s ease-in, transform .2s ease-in .15s;
  transition: margin .2s ease-in, transform .2s ease-in .15s;
  transition: margin .2s ease-in, transform .2s ease-in .15s, -webkit-transform .2s ease-in .15s;
}

.card-monitoring.full.no-aside .card-list-toggle>i {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* .card-list-toggle:hover>i {
  margin: 0 2px 0 0;
}

.card-monitoring.full.no-aside .card-list-toggle:hover>i {
  margin: 0 0 0 2px;
} */

.card-monitoring.full .list-group-item {
  border: none;
}

.card-monitoring.full [id^="collapse"] {
  padding-left: 10px;
}

.card-monitoring.full [id^="collapse"] .check {
  margin-right: 14px;
}

.bg-header-monitoring {
  background: #1e70cd !important;
}

.content {
  height: 1000px !important;
}

.minified #left-panel {
  width: 45px;
  top: 71px;
}

.button-icon {
  border: 0px !important;
}

q.smart-form footer {
  display: block;
  padding: 7px 14px 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: none !important;
}

.bg-cancel {
  background: #9fafbe;
}

.smart-form .input-file .button {
  height: 25px !important;
  background: #f7692b;
  border-radius: 3px;
  font-family: Inter;
  margin: 0px 5px;
}

.upload-photo {
  position: relative;
  background: #ffffff;
  border: 3px solid #d0dce7;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
}

.upload-photo img {
  position: relative;
  width: 90px;
  right: 0px;
  margin-left: 90px;
}

.text-header {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  padding-left: 10px;
}

.text-header-color {
  background: #1e70cd;
  border-radius: 5px 5px 0px 0px;
  width: calc(100% + 28px);
  height: 40px;
  border: 0px;
  margin-top: -10px;
  margin-left: -10px;
  padding-left: 20px;
  padding-top: 10px;
}

.text-header-color h2 {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: white;
}

.field {
  top: 10px !important;
  padding: 20px;
  border: 0px !important;
}

.smart-form fieldset {
  border: 0px !important;
  font-family: Inter;
}

.smart-form input {
  border: 0px !important;
  background: #eaeef2 !important;
  border-radius: 5px !important;
  /* height: 40px !important; */
  font-family: Inter !important;
}

.smart-form textarea {
  border: 0px !important;
  background: #eaeef2 !important;
  border-radius: 5px !important;
  font-family: Inter !important;
}

.smart-form footer {
  border: 0px !important;
}

.widget-body {
  border: 0px !important;
  margin-top: 20px;
}

.container-content-fx {
  position: relative;
  width: calc(100% - 25px);
  left: 24px;
  background: #ffffff;
  -webkit-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 140px;
}

.container-content-fx2 {
  position: relative;
  width: calc(100% - 55px);
  left: 40px;
  background: #ffffff;
  -webkit-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin-top: 25px;
}

.container-content-fx3 {
  position: relative;
  width: calc(100% - 25px);
  left: 24px;
  background: #ffffff;
  -webkit-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 20px;
  font-family: Inter;
}

.container-content-fx4 {
  position: relative;
  width: calc(100% + 40px);
  top: -9px;
  left: -20px;
  font-family: Inter;
}

.container-content-fx5 {
  position: relative;
  width: calc(100% + 12px);
  top: -12px;
  left: -6px;
  font-family: Inter;
}

.container-content-fx6 {
  position: relative;
  width: calc(100% + 2px);
  background: #fff;
  -webkit-box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  border-radius: 10px;
  padding: 20px;
  top: 8px;
  left: 3px;
}

.jarviswidget {
  border: 0px !important;
  top: 10px;
  left: 10px;
  width: calc(100% - 28px);
}

.jarviswidget-color-blueDark>header {
  border-color: #ffffff !important;
  background: var(--primary) !important;
  height: 40px !important;
}

#ribbon {
  background: var(--primary) !important;
  width: calc(100% - 21px);
  min-height: 10px !important;
  top: 4px;
  left: 15px;
  border-radius: 8px;
  margin-bottom: -5px;
  font-family: Inter;
  z-index: 1;
}

.hidden-menu #ribbon {
  position: fixed;
  left: 0;
  width: calc(100% - 13px);
  top: 65px;
  margin-left: 8px;
}

.hidden-menu #content {
  margin-top: 99px;
}

.account {
  /* position: relative;
  top: -30px; 
  right: 111px; */
  position: fixed;
  top: 17px;
  right: 123px;
  /* font-family: Inter; */
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 35px;
  z-index: 1;
  -webkit-transition: 250ms cubic-bezier(0.1, .57, .1, 1);
  transition: 250ms cubic-bezier(0.1, .57, .1, 1);
}

.account .btn.name {
  max-width: calc(100vw - 226px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* fixed-left-panel */

#main {
  padding-bottom: 0px !important;
  margin-top: 15px;
  -webkit-transition: 250ms cubic-bezier(0.1, .57, .1, 1);
  transition: 250ms cubic-bezier(0.1, .57, .1, 1);
}

/* #main {
  margin-left: 220px;
  padding: 0;
  padding-bottom: 52px;
  min-height: 500px;
  position: relative;
  padding-top: 60px;
} */

.bg-total {
  background: -o-radial-gradient(50% 50%, 49.5% 171.43%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #651fd6, #651fd6);
  background: radial-gradient(49.5% 171.43% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#651fd6), to(#651fd6));
  background: radial-gradient(49.5% 171.43% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #651fd6, #651fd6);
}

.bg-online {
  background: -o-radial-gradient(50.04% 49.35%, 49.83% 122.08%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #ff9412, #ff9412);
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#ff9412), to(#ff9412));
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #ff9412, #ff9412);
}

.bg-offline {
  background: -o-radial-gradient(50.04% 49.35%, 49.83% 122.08%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #acaeb0, #acaeb0);
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#acaeb0), to(#acaeb0));
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #acaeb0, #acaeb0);
}

.bg-idle {
  background: -o-radial-gradient(50.04% 49.35%, 49.83% 122.08%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #fbd44c, #fbd44c);
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#fbd44c), to(#fbd44c));
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #fbd44c, #fbd44c);
}

.bg-tracking {
  background: -o-radial-gradient(50.04% 49.35%, 37.28% 102.6%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #0ae393, #0ae393);
  background: radial-gradient(37.28% 102.6% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#0ae393), to(#0ae393));
  background: radial-gradient(37.28% 102.6% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #0ae393, #0ae393);
}

.bg-expiring {
  background: -o-radial-gradient(50.04% 49.35%, 49.83% 122.08%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #b46969, #b46969);
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#b46969), to(#b46969));
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #b46969, #b46969);
}

.bg-expired {
  background: -o-radial-gradient(50.04% 49.35%, 49.83% 122.08%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #4d4d4d, #4d4d4d);
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#4d4d4d), to(#4d4d4d));
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #4d4d4d, #4d4d4d);
}

.bg-alert {
  background: -o-radial-gradient(50.04% 49.35%, 49.83% 122.08%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #52969a, #52969a);
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#52969a), to(#52969a));
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #52969a, #52969a);
}

.bg-reminder {
  background: -o-radial-gradient(50.04% 49.35%, 49.83% 122.08%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #eb684b, #eb684b);
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#eb684b), to(#eb684b));
  background: radial-gradient(49.83% 122.08% at 50.04% 49.35%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #eb684b, #eb684b);
}

.bg-monitoring {
  background: -o-radial-gradient(50% 50%, 50% 118.6%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #1e70cd, #1e70cd);
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#1e70cd), to(#1e70cd));
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #1e70cd, #1e70cd);
}

.bg-geo {
  background: -o-radial-gradient(50% 50%, 50% 118.6%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #6610f2, #6610f2);
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#6610f2), to(#6610f2));
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #6610f2, #6610f2);
}

.bg-account {
  background: -o-radial-gradient(50% 50%, 50% 118.6%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #6f42c1, #6f42c1);
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#6f42c1), to(#6f42c1));
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #6f42c1, #6f42c1);
}

.bg-vehicle {
  background: -o-radial-gradient(50% 50%, 50% 118.6%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #407d6b, #407d6b);
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#407d6b), to(#407d6b));
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #407d6b, #407d6b);
}

.bg-poi {
  background: -o-radial-gradient(50% 50%, 50% 118.6%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #b89677, #b89677);
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#b89677), to(#b89677));
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #b89677, #b89677);
}

.bg-alerts {
  background: -o-radial-gradient(50% 50%, 50% 118.6%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #b42b75, #b42b75);
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#b42b75), to(#b42b75));
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #b42b75, #b42b75);
}

.bg-breakdown {
  background: -o-radial-gradient(50% 50%, 50% 118.6%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #d34c50, #d34c50);
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#d34c50), to(#d34c50));
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #d34c50, #d34c50);
}

.bg-operational {
  background: -o-radial-gradient(50% 50%, 50% 118.6%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -o-linear-gradient(bottom, #4972bf, #4972bf);
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), -webkit-gradient(linear, left bottom, left top, from(#4972bf), to(#4972bf));
  background: radial-gradient(50% 118.6% at 50% 50%, rgba(255, 255, 255, 0.25) 9.35%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #4972bf, #4972bf);
}

.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(24, 28, 33, 0.06);
  border-radius: 5px !important;
}

.banner img {
  position: absolute;
  width: 320px;
  right: 14px;
  top: -5px;
  z-index: 1;
}

.container-banner {
  position: relative;
  width: calc(100% + 10px);
  top: -12px;
  left: 0px;
  padding: 15px 30px 0px;
  background: rgba(253, 85, 12, 0.85);
  /* background: var(--primary); */
  /* background: linear-gradient(267.69deg, #FFD4C1 -50.22%, rgba(255, 242, 236, 0.078125) 122.04%, rgba(255, 255, 255, 0) 122.06%), var(--primary); */
  border-radius: 10px;
  margin-bottom: -28px;
}

.media-body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-family: Inter;
  font-weight: 500;
  font-size: 28px;
  color: #ffffff;
}

.media-body p {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-top: 1px;
  margin-top: -24px;
  margin-left: 40px;
  font-family: Inter;
  font-weight: 500;
  font-size: 13px;
  color: #ffffff;
}

.font-weight-normal {
  font-weight: 500 !important;
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 22px;
  color: #ffffff;
}

.container-content {
  position: relative;
  width: calc(100% + 5px);
  top: 10px;
  left: 0px;
  padding: 15px;
  padding-bottom: 0.5px;
  background: #ffffff;
  -webkit-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 18px;
}

.text-content {
  font-family: Inter;
  word-wrap: break-word;
  font-size: 30px;
  line-height: 10px;
  padding: 5px;
  margin-bottom: 15px;
}

.text-content-small {
  font-family: Inter;
  word-wrap: break-word;
  font-size: 15px;
  padding-left: 5px;
  line-height: 5px;
}

.text-content2 {
  font-family: Inter;
  word-wrap: break-word;
  font-size: 20px;
  line-height: 10px;
  padding: 5px;
  margin-bottom: 5px;
}

.text-content-small2 {
  font-family: Inter;
  font-size: 10px;
  padding-left: 5px;
  line-height: 10px;
  margin-bottom: -5px;
  white-space: pre-wrap;
}

.text-content-medium {
  font-family: Inter;
  word-wrap: break-word;
  font-size: 15px;
  padding: 5px;
  line-height: 5px;
  white-space: pre !important;
}

.text-content-special {
  font-family: Inter;
  word-wrap: break-word;
  font-size: 12px;
  padding: 5px;
  line-height: 5px;
  white-space: pre !important;
}

nav ul li a {
  line-height: normal;
  font-size: 12.5px;
  padding: 10px 10px 10px 11px;
  color: #c8feff;
  display: block;
  font-weight: 400;
  text-decoration: none !important;
  position: relative;
}

nav ul ul li>a {
  padding-left: 42px;
  font-size: 12px;
  font-weight: 400;
  outline: 0;
}

/* nav ul li a {
      line-height: normal;
      font-size: 14px;
      padding: 10px 10px 10px 11px;
      color: #C8FEFF;
      display: block;
      font-weight: 400;
      text-decoration: none!important;
      position: relative
    } */

nav ul ul {
  margin: 0;
  display: none;
  background: transparent !important;
  padding: 7px 0;
}

nav>ul>li>ul::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 23px;
  top: 0;
  bottom: 0;
  border-left: 0px;
}

nav>ul ul li::before {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  left: 23px;
  top: 16px;
  border-top: 0px;
}

/*  fixed-left-panel */

#left-panel {
  position: fixed;
  top: 65px;
  left: 7px;
  min-height: calc(100vh - 78px);
  z-index: 904;
  padding-top: 0px !important;
  margin-bottom: 10px;
}

.hidden-menu #left-panel {
  left: -220px;
}

.hidden-menu #main {
  margin-left: -7px;
}

/* #left-panel {
    top: 63px;
    left: 7px;
    min-height: calc(100% - 18vh);
    z-index: 904;
    padding-top: 0px !important;
    margin-bottom: 10px;
    position: fixed;
  }  */

aside {
  display: block;
  background: #207575;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiMzYTM2MzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMmEyNzI1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
  background: -o-linear-gradient(left, #3a3633 93%, #2a2725 100%);
  background: -o-linear-gradient(left, #207575 93%, #207575 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(93%, #207575), to(#207575));
  background: linear-gradient(to right, #207575 93%, #207575 100%);
  /* min-height: 100%; */
  border-radius: 8px;
}

/*  fixed-left-panel */

aside nav {
  position: relative;
  width: 100%;
  height: calc(100vh - 163px);
  overflow: hidden scroll;
  /* scrollbar-width: none; */
}

/* aside nav {
  position: relative;
  width: 100%;
  height: calc(100vh - 165px);
  overflow: hidden scroll;
  scrollbar-width: none;
  overscroll-behavior: contain;
} */

.minified aside nav {
  overflow: hidden;
  width: auto;
  height: calc(100vh - 154px);
}

.minified aside nav:hover {
  overflow: hidden;
  width: 245px;
}

.minified aside nav::-webkit-scrollbar {
  width: 0px;
  /* width of the entire scrollbar */
  padding: 50px;
}

.minified aside nav::-webkit-scrollbar-track {
  background: none;
  /* color of the tracking area */
}

/* .minified aside nav {
  scrollbar-width: thin;
} */

/* .minified aside nav::-webkit-scrollbar-thumb {
  background-color: #f0f4f8;
  border-radius: 10px;
  border: none;
} */

aside nav::-webkit-scrollbar {
  width: 10px;
}

aside nav::-webkit-scrollbar-track {
  background: none;
}

aside nav::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 1px;
  border: none;
}

/* aside nav {
  scrollbar-width: thin;
} */

.login-info {
  display: block;
  font-size: 12px;
  height: 39px;
  color: #fff;
  border: 0px !important;
  border-width: 0px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  width: 100%;
  margin: 0 !important;
  border-bottom: 0px !important;
}

.login-info>span {
  font-family: Inter;
  height: 38px;
  display: block;
  padding: 0 10px;
  border-bottom: 0px !important;
}

.minified .login-info {
  height: 38px;
  border-bottom: 0px !important;
}

.minifyme {
  border-bottom: 0px !important;
  background: #207575 !important;
  top: -7px;
  text-align: center;
  padding: 0;
  width: 36px;
  height: 28px;
  display: block;
  position: absolute;
  right: 0;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 7px;
  font-size: 19px;
  -webkit-transition: .1s;
  -o-transition: .1s;
  transition: .1s;
}

.minifyme img {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 15px;
  height: 15px;
  transition: all 0.2s ease-in 0.15s;
  -webkit-transition: all 0.2s ease-in 0.15s;
  -moz-transition: all 0.2s ease-in 0.15s;
  -ms-transition: all 0.2s ease-in 0.15s;
  -o-transition: all 0.2s ease-in 0.15s;
}

.minified .minifyme img {
  top: 10px !important;
  left: 15px !important;
  transform: rotate(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}

.minifyme:hover {
  /* background: #FFFFFF !important; */
  right: 0;
  width: 40px;
  padding-right: 5px;
}

.minified .minifyme:hover>img {
  margin-left: 5px;
}

.minified .login-info {
  height: 38px;
  border-bottom: 0px !important;
}

.btn.btn-ribbon {
  background-color: #ffffff !important;
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  background-repeat: repeat-x;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff777777', endColorstr='#ff666666', GradientType=0);
  color: #fff;
  padding: 0 5px;
  line-height: 20px;
  -vertical-align: middle;
  height: 20px;
  display: block;
  border: none;
  float: left;
  margin: 0 8px 0 0;
  cursor: pointer;
}

.refresh {
  z-index: 1;
}

.refresh img {
  width: 13px;
  height: 13px;
}

.refresh p {
  position: relative;
  font-family: Inter;
  color: #ffffff;
  top: -20px;
  left: 10px;
}

#login #header {
  background: #0079cd !important;
}

#header {
  position: fixed;
  width: calc(100% - 12px);
  height: 50px;
  left: 7px;
  top: 7px;
  background: -o-linear-gradient(bottom, rgba(22, 112, 112, 0.95), rgba(22, 112, 112, 0.95));
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(22, 112, 112, 0.95)), to(rgba(22, 112, 112, 0.95)));
  background: linear-gradient(0deg, rgba(22, 112, 112, 0.95), rgba(22, 112, 112, 0.95));
  -webkit-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 0px 10px 10px 10px;
  -webkit-box-shadow: 0 -8px 0 #f0f4f8;
  box-shadow: 0 -8px 0 #f0f4f8;
  z-index: 1050;
}

.hidden-menu #header {
  position: fixed;
  top: 8px;
}

.hidden-menu #main {
  margin-top: 62px;
}

/* #header {
  width: calc(100% - 12px);
  height: 50px;
  left: 7px;
  top: 7px;
  background: linear-gradient( 0deg, rgba(22, 112, 112, 0.95), rgba(22, 112, 112, 0.95));
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 0px 10px 10px 10px;
  position: fixed;
  
} */

#header #logo-group img {
  position: absolute;
  width: 80px;
  height: 35.67px;
  top: 8px;
  left: 50px;
}

@media screen and (max-width: 600px) {
  #header {
    /* width: calc(100% - 20px); */
    background: -o-linear-gradient(bottom, rgba(22, 112, 112, 0.95), rgba(22, 112, 112, 0.95));
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(22, 112, 112, 0.95)), to(rgba(22, 112, 112, 0.95)));
    background: linear-gradient(0deg, rgba(22, 112, 112, 0.95), rgba(22, 112, 112, 0.95));
    background-size: 150%;
    background-position: left 5%;
  }
}

#logo img {
  position: relative;
  top: -6px;
  width: 76px;
  /* filter: drop-shadow(0px 0px 0px rgba(255,255,255,1)); */
  -webkit-filter: invert(1) hue-rotate(180deg);
  filter: invert(1) hue-rotate(180deg);
}

#ribbon {
  position: sticky;
  top: 65px;
  /* top: 0; */
  margin-left: 16px;
  z-index: 1010;
  -webkit-box-shadow: 0 -8px 0 #f0f4f8;
  box-shadow: 0 -8px 0 #f0f4f8;
}

#ribbon .breadcrumb,
#ribbon .breadcrumb a {
  color: #fff !important;
}

#ribbon .breadcrumb li:last-child,
#ribbon .breadcrumb>.active {
  color: #fff !important;
}

.breadcrumb>li+li:before {
  color: rgba(255, 255, 255, .5);
}

.txt-color-blueDark {
  color: #353d4b !important;
}

.txt-color-green {
  color: #4a7eac !important;
}

.txt-color-light-green {
  color: #a4c536 !important;
}

.nolink a {
  cursor: default;
}

#project-context> :first-child {
  text-shadow: none;
}

a:link,
.btn,
button {
  -webkit-tap-highlight-color: rgba(0, 217, 255, 0.5);
}

.btn-success.active,
.btn-success:active,
.btn-success:hover,
.open>.dropdown-toggle.btn-success {
  color: #fff;
  background-color: #4d7c20;
  border-color: rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
  .btn-header> :first-child>a:hover {
    color: #fff;
  }

  .btn-header> :first-child>a {
    color: #a4c536;
  }
}

.ui-datepicker td .ui-state-highlight {
  background-color: #0074c4;
}

.jarviswidget-color-greenLight>header {
  background: #a4c536;
}

.btn-file {
  margin: 1px 16px 0 0 !important;
}

.cell-link:hover {
  cursor: pointer;
}

.close-white {
  color: #fff;
  text-shadow: 0 1px 0 #002d16;
  opacity: 0.6;
}

.close-white:hover {
  color: #fff;
  text-shadow: 0 1px 0 #002d16;
  opacity: 0.8;
}

@media (min-width: 768px) {
  .label-check {
    float: left;
  }
}

@media only screen and (max-width: 768px) and (min-width: 479px) {
  .sparks-info {
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  #main {
    margin-left: 220px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .hidden-menu #main {
    left: inherit;
  }
}

.h5-filter {
  margin: -14px 0 4px 0;
  font-size: 14px;
  color: #333;
}

.h5-result {
  margin: 3px 0 0 0;
  font-size: 14px;
  color: #333;
}

.widget-body.no-padding .alert {
  margin: 0;
}

.colvis-margin {
  margin-right: 165px;
}

.nowrap {
  white-space: nowrap;
}

/* .DTFC_LeftHeadWrapper {
  margin-top: -6px;
} */

.menu-level-0 {
  margin-left: 0px;
}

.split {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gutter {
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50%;
}

.split.split-horizontal,
.gutter.gutter-horizontal {
  height: 100%;
  float: left;
}

.gutter.gutter-vertical {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=");
  cursor: ns-resize;
}

.gutter.gutter-horizontal {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
  cursor: ew-resize;
}

a.org-link {
  color: black;
  cursor: pointer;
}

a.org-link:hover {
  color: #607d8b;
}

.login-info a span {
  top: 5px;
  position: relative;
  color: #ffffff !important;
}

.filter-menu {
  padding: 0 10px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.filter-menu .input-group {
  top: 15px;
  position: relative;
  display: table;
  border-collapse: separate;
  margin-bottom: 20px;
}

.filter-menu span.input-group-addon {
  border-radius: 10px 0 0 10px !important;
}

.filter-menu .input-group .text-filter:first-child,
.filter-menu .input-group .input-group-addon:first-child {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.filter-menu .input-group .input-group-addon:first-child {
  border-right: 0;
}

.filter-menu .input-group .text-filter {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}

.filter-menu .input-group-addon {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  background-color: #ffffff;
  border: transparent;
  border-radius: 10px 10px 10px 10px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  color: inherit;
}

/* .filter-menu .input-group-addon {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: rgb(255, 255, 255);
  border: 1px solid #ccc;
  border-radius: 10px 10px 10px 10px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
} */

.input-group .text-filter,
.filter-menu .input-group-addon {
  display: table-cell;
}

.input-group .text-filter {
  display: block;
  padding: 0px 10px;
  width: 100%;
  height: 32px;
  min-height: 32px !important;
  color: #555;
  font-size: 13px;
  border: transparent;
  border-radius: 0px 10px 10px 0px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

/* .input-group .text-filter {
  display: block;
  padding: 0px 10px;
  width: 100%;
  height: 32px;
  min-height: 32px !important;
  color: #555;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
} */

.filter-menu .input-group .text-filter:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.filter-menu input {
  background: #ffffff;
  color: #fff;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

/* .filter-menu input {
  background: #1B1E24;
  color: #fff;
  transition: .3s;
} */

/* .filter-menu input:focus {
  background: #0e3030;
  color: white;
} */

/* .filter-menu input:focus {
  background: #22262e;
  color: white;
} */

.filter-menu .fa-times {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #fff;
  z-index: 10;
  display: none;
  cursor: pointer;
}

.minified .filter-menu {
  position: relative;
  left: -200%;
  opacity: 0;
  pointer-events: none;
  height: 0;
}

table .btn {
  margin: 1px;
}

table td .btn {
  font-size: .9rem;
}

.menu-level-0 {
  margin-left: 0px;
}

.menu-level-1 {
  color: #468847;
  margin-left: 20px;
}

.menu-level-2 {
  margin-left: 40px;
  color: #3276b1;
}

.menu-level-3 {
  margin-left: 60px;
  font-style: italic;
  color: #b94a48;
}

nav {
  font-family: "Inter", sans-serif;
}

nav ul li a {
  font-weight: 300;
  top: 5px;
}

nav ul ul ul li a {
  color: #ffffff;
  padding: 8px 10px 8px 60px;
  font-size: 12px;
}

/* font menu sub ke 2 */

nav ul ul li>a:hover {
  background-color: rgba(41, 212, 198, 0.8);
  color: #fff;
}

nav ul li a:active {
  background: rgba(41, 212, 198, 0.8) !important;
}

nav ul li a:focus {
  color: #c8feff;
}

/* nav ul li a {
  font-weight: 300;
} */

.minified nav>ul>li {
  border-bottom: 0px !important;
  border-top: 0px !important;
}

.minified .minifyme {
  right: 0;
  color: #ffffff;
  position: relative;
  width: 100%;
  border-radius: 10px 10px 0px 0px;
  margin: 0;
  height: 34px;
  font-size: 23px;
}

nav ul ul li>a i {
  float: left;
  margin: 3px 6px 3px 0;
}

nav ul b {
  position: absolute;
  right: 16px;
  top: 6px;
}

label.has-error {
  position: absolute;
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
  background-color: #a90329;
}

div.labelInfo {
  display: block;
  font-size: 8pt;
  background-color: White;
  border: 1px solid #333;
  color: #333;
  height: 20px;
  padding: 2px 4px 2px 4px;
  white-space: nowrap;
  margin-left: -50%;
  margin-right: 50%;
  position: relative;
  font-weight: normal !important;
}

/*select 2*/

.select2-container {
  margin: 0;
  position: relative;
  display: inline-block;
  zoom: 1;
  vertical-align: middle;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* width: 100% !important; */
}

.select2-container .select2-choice {
  display: block;
  height: 32px;
  padding: 0 0 0 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
  white-space: nowrap;
  line-height: 32px;
  color: #444;
  text-decoration: none;
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
}

.select2-container.select2-drop-above .select2-choice {
  border-bottom-color: #ccc;
}

.select2-container.select2-allowclear .select2-choice .select2-chosen {
  margin-right: 42px;
}

.select2-container .select2-choice>.select2-chosen {
  margin-right: 26px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.select2-container .select2-choice abbr {
  display: none;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 24px;
  top: 8px;
  font-size: 1px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  outline: 0;
}

.select2-container.select2-allowclear .select2-choice abbr {
  display: inline-block;
}

.select2-container .select2-choice abbr:hover {
  cursor: pointer;
}

.select2-drop-mask {
  border: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 9998;
  background: #fff;
  filter: alpha(opacity=0);
}

.select2-drop {
  margin-top: -1px;
  width: 100%;
  position: absolute;
  z-index: 9999;
  top: 100%;
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-top: 0;
  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}

.select2-drop-auto-width {
  border-top: 1px solid #ccc;
  width: auto;
}

.select2-drop-auto-width .select2-search {
  padding-top: 4px;
}

.select2-drop.select2-drop-above {
  margin-bottom: 0;
  border-top: 1px solid #5d98cc;
  border-top-width: 3px;
  border-bottom: 0;
  -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
}

.select2-drop-active {
  border: 1px solid #5d98cc;
  border-top: none;
  border-bottom-width: 3px;
}

.select2-drop.select2-drop-above.select2-drop-active {
  border-top-width: 3px;
}

.select2-container .select2-choice .select2-arrow {
  display: inline-block;
  width: 34px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #ccc;
  background: #eee;
}

.select2-container .select2-choice .select2-arrow b {
  width: 100%;
  height: 100%;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  font-size: 14px;
}

.select2-container .select2-choice .select2-arrow b:before {
  content: "\f107";
  width: 100%;
  height: 100%;
  text-align: center;
  display: block;
}

.select2-search {
  display: inline-block;
  width: 100%;
  min-height: 26px;
  margin: 0;
  padding-left: 4px;
  padding-right: 4px;
  position: relative;
  z-index: 10000;
  white-space: nowrap;
}

.select2-search input {
  width: 100%;
  height: auto !important;
  min-height: 29px;
  padding: 6px 20px 5px 10px;
  margin: 0;
  outline: 0;
  font-family: sans-serif;
  font-size: 1em;
  border: 1px solid #aaa;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff;
  background: -o-linear-gradient(top, #fff 85%, #eee 99%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(85%, #fff), color-stop(99%, #eee));
  background: linear-gradient(top, #fff 85%, #eee 99%);
}

.select2-search:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  content: "\f002";
  top: 25%;
  right: 10px;
  color: #686868 !important;
}

.select2-drop.select2-drop-above .select2-search input {
  margin-top: 4px;
}

.select2-drop.select2-drop-above .select2-search:before {
  top: 34%;
}

.select2-search input.select2-active {
  background: #fff url(../img/select2-spinner.gif) no-repeat 100%;
  background: url(../img/select2-spinner.gif) no-repeat 100%, -o-linear-gradient(top, #fff 85%, #eee 99%);
  background: url(../img/select2-spinner.gif) no-repeat 100%, -webkit-gradient(linear, left top, left bottom, color-stop(85%, #fff), color-stop(99%, #eee));
  background: url(../img/select2-spinner.gif) no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%);
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border: 1px solid #5d98cc;
  outline: 0;
}

.select2-dropdown-open .select2-choice {
  border-bottom-color: transparent;
  -webkit-box-shadow: 0 1px 0 #fff inset;
  box-shadow: 0 1px 0 #fff inset;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #fff;
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
  border: 1px solid #5d98cc;
  border-top-color: transparent;
}

.select2-dropdown-open .select2-choice .select2-arrow {
  background: 0 0;
  border-left: none;
  -webkit-filter: none;
  filter: none;
}

.select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 1px;
}

.select2-results {
  max-height: 200px;
  padding: 0 0 0 4px;
  margin: 4px 4px 4px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.select2-results ul.select2-result-sub {
  margin: 0;
  padding-left: 0;
}

.select2-results ul.select2-result-sub>li .select2-result-label {
  padding-left: 20px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
  padding-left: 40px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
  padding-left: 60px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
  padding-left: 80px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
  padding-left: 100px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
  padding-left: 110px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
  padding-left: 120px;
}

.select2-results li {
  list-style: none;
  display: list-item;
  background-image: none;
}

.select2-results li.select2-result-with-children>.select2-result-label {
  font-weight: 700;
}

.select2-results .select2-result-label {
  padding: 3px 7px 4px;
  margin: 0;
  cursor: pointer;
  min-height: 1em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.select2-results .select2-highlighted {
  background: #3276b1;
  color: #fff;
}

.select2-results li em {
  background: #feffde;
  font-style: normal;
}

.select2-results .select2-highlighted em {
  background: 0 0;
}

.select2-results .select2-highlighted ul {
  background: #fff;
  color: #000;
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
  background: #f4f4f4;
  display: list-item;
  padding: 3px 5px;
}

.select2-no-results {
  padding-left: 20px;
}

.select2-no-results:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f05a";
  margin-right: 5px;
}

.select2-results .select2-disabled.select2-highlighted {
  color: #666;
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-selected {
  display: none;
}

.select2-more-results.select2-active {
  background: #f4f4f4 url(../img/select2-spinner.gif) no-repeat 100%;
}

.select2-more-results {
  background: #f4f4f4;
  display: list-item;
}

.select2-container.select2-container-disabled .select2-choice {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default;
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
  background-color: #f4f4f4;
  background-image: none;
  border-left: 0;
}

.select2-container.select2-container-disabled .select2-choice abbr {
  display: none;
}

.select2-container-multi .select2-choices {
  height: auto !important;
  height: 1%;
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid #ccc;
  cursor: text;
  overflow: hidden;
  background-color: #fff;
}

.select2-locked {
  padding: 3px 5px !important;
}

.select2-container-multi .select2-choices {
  min-height: 26px;
}

.select2-container-multi.select2-container-active .select2-choices {
  border: 1px solid #5d98cc;
  outline: 0;
}

.select2-container-multi .select2-choices li {
  float: left;
  list-style: none;
}

.select2-container-multi .select2-choices .select2-search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.select2-container-multi .select2-choices .select2-search-field input {
  padding: 5px;
  margin: 1px 0;
  font-family: sans-serif;
  font-size: 100%;
  color: #666;
  outline: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent !important;
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
  background: #fff url(../img/select2-spinner.gif) no-repeat 100% !important;
}

.select2-default {
  color: #999 !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
  padding: 1px 28px 1px 8px;
  margin: 4px 0 3px 5px;
  position: relative;
  line-height: 18px;
  color: #fff;
  cursor: default;
  border: 1px solid #2a6395;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #3276b1;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
  cursor: default;
}

.select2-container-multi .select2-choices .select2-search-choice-focus {
  opacity: 0.8;
}

.select2-search-choice-close {
  display: block;
  min-width: 21px;
  min-height: 20px;
  position: absolute;
  right: 3px;
  top: 3px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  text-decoration: none !important;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.select2-search-choice-close:before {
  color: #fff;
  content: "\f057";
}

.select2-container-multi .select2-search-choice-close {
  display: block;
  top: 0;
  right: 0;
  padding: 3px 4px 3px 6px;
}

.select2-container-multi .select2-search-choice-close:hover {
  background: rgba(0, 0, 0, 0.3);
}

.select2-container-multi.select2-container-disabled .select2-choices {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
  padding: 3px 5px;
  border: 1px solid #4a90cc;
  background-image: none;
  background-color: #86b4dd;
  cursor: not-allowed;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
  display: none;
  background: 0 0;
}

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
  text-decoration: underline;
}

.select2-offscreen,
.select2-offscreen:focus {
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  outline: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

.select2-display-none {
  display: none;
}

.select2-measure-scrollbar {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

#vehicle_id_form1+.select2-container,
#driver_id_form1+.select2-container {
  max-height: 100px;
  overflow: auto;
}

.has-error .select2-choice,
.has-error .select2-container .select2-choice .select2-arrow,
.has-error .select2-container-multi .select2-choices {
  border-color: #b94a48;
}

.has-error .select2-container .select2-choice .select2-arrow {
  background: #f2dede;
  color: #b94a48;
}

.has-error .select2-dropdown-open .select2-choice {
  border-color: #5d98cc !important;
}

.select2-drop.select2-drop-above.select2-drop-active {
  margin-top: 2px;
}

/*error access denied */

.error-text-2 {
  text-align: center;
  font-size: 400%;
  font-weight: bold;
  font-weight: 100;
  color: #333;
  line-height: 1;
  letter-spacing: -0.05em;
  background-image: -webkit-linear-gradient(92deg, #333, #ed1c24);
  --webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: #ed1c24;
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 0 1px 1px rgba(131, 105, 105, 0.25);
  box-shadow: inset 0 0 1px 1px rgba(131, 105, 105, 0.25);
}

.particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: #ed1c24;
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0));
}

.particle--a {
  -webkit-animation: particle-a 1.4s infinite linear;
  animation: particle-a 1.4s infinite linear;
}

.particle--b {
  -webkit-animation: particle-b 1.3s infinite linear;
  animation: particle-b 1.3s infinite linear;
  background-color: #00a300;
}

.particle--c {
  -webkit-animation: particle-c 1.5s infinite linear;
  animation: particle-c 1.5s infinite linear;
  background-color: #57889c;
}

@-webkit-keyframes particle-a {
  0% {
    -webkit-transform: translate3D(-3rem, -3rem, 0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }

  25% {
    width: 1.5rem;
    height: 1.5rem;
  }

  50% {
    -webkit-transform: translate3D(4rem, 3rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }

  55% {
    z-index: -1;
  }

  75% {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.5;
  }

  100% {
    -webkit-transform: translate3D(-3rem, -3rem, 0);
    z-index: -1;
  }
}

@keyframes particle-a {
  0% {
    -webkit-transform: translate3D(-3rem, -3rem, 0);
    transform: translate3D(-3rem, -3rem, 0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  25% {
    width: 1.5rem;
    height: 1.5rem;
  }

  50% {
    -webkit-transform: translate3D(4rem, 3rem, 0);
    transform: translate3D(4rem, 3rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  55% {
    z-index: -1;
  }

  75% {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.5;
  }

  100% {
    -webkit-transform: translate3D(-3rem, -3rem, 0);
    transform: translate3D(-3rem, -3rem, 0);
    z-index: -1;
  }
}

@-webkit-keyframes particle-b {
  0% {
    -webkit-transform: translate3D(3rem, -3rem, 0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }

  25% {
    width: 1.5rem;
    height: 1.5rem;
  }

  50% {
    -webkit-transform: translate3D(-3rem, 3.5rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }

  55% {
    z-index: -1;
  }

  75% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 0.5;
  }

  100% {
    -webkit-transform: translate3D(3rem, -3rem, 0);
    z-index: -1;
  }
}

@keyframes particle-b {
  0% {
    -webkit-transform: translate3D(3rem, -3rem, 0);
    transform: translate3D(3rem, -3rem, 0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  25% {
    width: 1.5rem;
    height: 1.5rem;
  }

  50% {
    -webkit-transform: translate3D(-3rem, 3.5rem, 0);
    transform: translate3D(-3rem, 3.5rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  55% {
    z-index: -1;
  }

  75% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 0.5;
  }

  100% {
    -webkit-transform: translate3D(3rem, -3rem, 0);
    transform: translate3D(3rem, -3rem, 0);
    z-index: -1;
  }
}

@-webkit-keyframes particle-c {
  0% {
    -webkit-transform: translate3D(-1rem, -3rem, 0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }

  25% {
    width: 1.3rem;
    height: 1.3rem;
  }

  50% {
    -webkit-transform: translate3D(2rem, 2.5rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }

  55% {
    z-index: -1;
  }

  75% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 0.5;
  }

  100% {
    -webkit-transform: translate3D(-1rem, -3rem, 0);
    z-index: -1;
  }
}

@keyframes particle-c {
  0% {
    -webkit-transform: translate3D(-1rem, -3rem, 0);
    transform: translate3D(-1rem, -3rem, 0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  25% {
    width: 1.3rem;
    height: 1.3rem;
  }

  50% {
    -webkit-transform: translate3D(2rem, 2.5rem, 0);
    transform: translate3D(2rem, 2.5rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  55% {
    z-index: -1;
  }

  75% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 0.5;
  }

  100% {
    -webkit-transform: translate3D(-1rem, -3rem, 0);
    transform: translate3D(-1rem, -3rem, 0);
    z-index: -1;
  }
}

/*error access denied */

/* select2 search icon position */

.select2-search:before {
  top: 50%;
}

.layout-streetview {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 0;
  border-left: 2px solid white;
  opacity: 0;
}

.sv-show {
  opacity: 1;
  width: 50%;
}

div#btn-sv-close {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
  background: var(--blue);
  color: #fff;
  padding: 6px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

#cameraModal .modal-title {
  margin-right: auto;
}

#cameraModal .input-group-addon {
  width: auto;
}

#cameraModal .select2 {
  margin-bottom: 10px;
}

button {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

button:hover {
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

button#btnSearch_form1 {
  background: #5cb85c;
  border-color: #4d984d;
  font-size: 1rem;
}

button#btnReset_form1 {
  font-size: 1rem;
}

/* button#btnSearch_form1:hover {
            background: #4d984d;
        } */

button#btnExportPdf_form1 {
  background: #f0ad4e;
  border-color: #d29846;
}

button#btnExportPdf_form1:hover {
  background: #d29846;
}

button#btnExportExcel_form1 {
  background: #898989;
  border-color: #777777;
}

button#btnExportExcel_form1:hover {
  background: #777777;
}

.dataTables_wrapper .table thead tr:first-child {
  background: #1e70cd;
  /* bottom: 10px !important; */
  color: #fff !important;
}

/* Jarak */

/* Table Font Fix */

.dataTables_wrapper .table thead tr:first-child th,
.dataTable.fixedHeader-floating thead:first-child tr:first-child th {
  /* text-align: center !important; */
  vertical-align: middle;
  /* font-size: 1.25rem; */
  font-size: 90%;
  line-height: 1.3;
  border: 0px !important;
  height: 46px;
  padding: 7px 33px 0 10px;
  color: #fff;
  /* background-color: #1e70cd; */
  background: #207575;
}

.dataTable.fixedHeader-floating thead:first-child th {
  padding: 0 33px 0 10px;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
  top: 50% !important;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_disabled,
table.dataTable thead .sorting,
table.dataTable thead .sorting_desc,
th .sorting-asc {
  background-color: #207575;
  color: #fff;
  border: none;
}

/* table.dataTable thead .sorting {
  background: url("../img/sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
  background:url("../img/sort_asc.png") no-repeat center right;
}
table.dataTable thead .sorting_desc {
  background:url("../img/sort_desc.png") no-repeat center right
}
table.dataTable thead .sorting_asc_disabled {
  background:url("../img/sort_asc_disabled.png") no-repeat center right
}
table.dataTable thead .sorting_desc_disabled {
  background:url("../img/sort_desc_disabled.png") no-repeat center right
} */

.dataTables_wrapper .table tbody td .btn-xs {
  /* font-size: 1.1rem;
  margin: 0 2px;
  padding: 8px 6px !important; */
  line-height: 1;
  padding: 6px;
}

.dt-toolbar-buttons {
  margin-top: -48px;
  background: 0 0;
  width: 175px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 8px !important;
}

.dt-toolbar-buttons-top {
  top: 52px;
  background: transparent;
  width: 175px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 8px !important;
  z-index: 1;
  margin-top: -52px;
}

.dt-toolbar> :first-child .dataTables_filter> :only-child {
  float: left !important;
  margin-left: 36%;
}

.widget-body>div.dt-toolbar-footer:first-child {
  position: absolute;
  z-index: 1;
  bottom: 36px;
  background: transparent;
}

.btn-custom-datatable {
  padding: 5px !important;
  margin: 5px !important;
  height: calc(1.5em + 1.3rem + 2px);
}

/* .card-datatable.table-responsive {
  padding-top: 30px !important;
} */

table.dataTable {
  table-layout: fixed;
}

table.dataTable td {
  word-wrap: break-word;
  /* max-width: 180px; */
}

table.dataTable td {
  white-space: inherit;
}

table.datatable-default {
  table-layout: unset !important;
}

.bootstrap-tagsinput {
  background-color: #eaeef2 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
}

.bootstrap-tagsinput .tag {
  border-radius: 4px !important;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
  font-family: monospace;
  position: relative;
  top: -3px;
}

@media (max-width: 880px) {
  .body {
    background: #f0f4f8 !important;
  }

  div.dataTables_filter input {
    width: 12em !important;
  }

  #btnAddNew_DataGrid1,
  .btn-add-item {
    min-width: 100px !important;
  }

  .hidden-menu #header {
    position: fixed;
    top: 2px;
  }

  .hidden-menu #content {
    margin-top: 94px;
  }

  .container-content-fx5 {
    position: relative;
    width: calc(100% - 5px);
    top: -54px;
    left: -2px;
    font-family: Inter;
  }

  .container-content-fx4 {
    position: relative;
    width: 100%;
    top: -64px;
    left: -5px;
    font-family: Inter;
  }

  /* .card-monitoring {
    font-family: Inter;
    margin-top: 1px !important;
    margin-left: 25px !important;
    right: 15px;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 10px;
  } */
  .card-monitoring .dataTables_scroll {
    max-width: calc(100vw - 33px);
  }

  .popupLegend {
    top: 59px;
    margin-top: 90px;
    margin-right: 0;
    -webkit-clip-path: circle(12px at 148px 16px);
    clip-path: circle(12px at 148px 16px);
  }

  .pltooltip {
    top: 80px;
  }

  .popupLegend+.pltooltip {
    margin-right: 50px;
  }

  .popupLegend:hover+.pltooltip {
    margin-right: 46px;
  }

  .card-monitoring {
    margin-left: 27px;
    margin-top: 58px;
    width: calc(100% - 23px);
  }

  .content-map {
    position: relative;
    width: calc(100% - 25px);
    height: clac(100% + 100px);
    left: 15px;
    background: #ffffff;
    -webkit-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
  }

  #ribbon .breadcrumb {
    display: inline-block;
    /* width: 100%; */
    margin-top: 16px;
    margin-left: -8px;
    padding: 0 3px !important;
    background: 0 0;
    vertical-align: top;
    /* width: 80px; */
    white-space: nowrap;
    font-size: 80%;
  }

  #ribbon {
    width: calc(100% - 12px);
    height: 45px;
    margin-bottom: 10px;
    top: 63px;
    left: -10px;
    position: fixed;
  }

  .ribbon-button-alignment {
    padding-top: 12px;
    margin-left: 2%;
    display: inline-block;
  }

  #content {
    margin: 54px 0 0 -5px;
    width: calc(100% + 10px);
  }

  body.fixed-header #content {
    margin-top: 16px;
  }

  #logo-group img {
    margin-left: -30px;
  }

  .account {
    top: 22px;
    right: 120px;
  }

  .profile-pic>img {
    width: 100px;
  }

  .banner img {
    position: absolute;
    width: 335px;
    height: 170px;
    left: 600px;
    top: 10px;
    z-index: 1;
  }

  #main {
    margin-left: 0;
    overflow-x: hidden;
    margin-top: -2px;
  }

  #left-panel {
    left: -220px;
    min-height: calc(100vh - 140px);
  }

  aside nav {
    height: calc(100vh - 229px);
  }

  .show-stat-microcharts>div {
    margin-top: 0 !important;
    border-right: none !important;
  }

  .show-stat-buttons {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #content,
  #ribbon {
    padding-left: 5px;
    padding-right: 5px;
  }

  #header {
    /* margin-left: 3px; */
    margin-top: 5px;
    /* padding-right: 5px; */
    left: 6px;
  }

  #logo {
    margin-left: 4px;
  }

  .no-content-padding {
    margin: 0 -5px !important;
  }

  .inbox-nav-bar.no-content-padding {
    margin-top: -10px !important;
  }

  .minified #left-panel {
    left: 10px;
  }

  .btn-header.transparent a {
    border: none !important;
    background: 0 0;
    margin-left: 0;
    width: 25px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  .btn-header.transparent a:hover {
    color: #a90329;
  }

  #hide-menu> :first-child>a,
  .btn-header a {
    margin-top: 5px !important;
    width: 40px !important;
    height: 39px !important;
    line-height: 38px !important;
  }

  #hide-menu> :first-child>a {
    width: 50px !important;
  }

  #logo {
    margin-top: 10px;
  }

  #logo img {
    width: 127px;
  }

  #hide-menu i {
    color: #6D6A69;
    font-size: 121%;
  }

  .hidden-menu #hide-menu i {
    color: #fff;
  }

  #hide-menu i::before {
    content: "\f0c9";
  }

  #left-panel {
    top: 64px;
  }

  .hidden-menu #left-panel:hover {
    left: 6px;
  }

  .hidden-menu #left-panel {
    left: 6px;
    top: 64px;
  }

  .hidden-menu #main {
    position: relative;
    left: 235px;
    margin-top: 26px;
  }

  .hidden-menu #ribbon {
    left: 226px;
  }

  .hidden-menu.fixed-ribbon #ribbon {
    left: 220px;
    width: 100%;
  }

  .fixed-ribbon #ribbon {
    left: 0;
  }

  body.fixed-navigation.hidden-menu {
    overflow: hidden !important;
  }

  .fixed-ribbon #content {
    padding-top: 52px;
  }

  .header-search {
    display: none;
  }

  #search-mobile {
    display: block;
  }

  .search-mobile .header-search {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 49px;
    background: #333;
    padding: 0 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
  }

  .search-mobile .header-search>input[type="text"] {
    margin-top: 2px;
    height: 45px;
    border-color: #333;
    padding-right: 75px;
  }

  .search-mobile .header-search>button {
    height: 29px;
    line-height: 29px;
    background: #ddd;
    right: 44px;
  }

  .search-mobile #search-mobile {
    display: none;
  }

  .search-mobile #cancel-search-js {
    display: block;
  }

  .jarviswidget header h2 {
    /* width: 250px; */
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .jarviswidget {
    border: 0px !important;
    width: calc(100% - 20px) !important;
    top: -8px !important;
    left: 10px !important;
    padding: 10px;
    background: #ffffff !important;
    border-radius: 10px;
    -webkit-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
    margin-bottom: 11px;
  }

  .container-content-fx6 {
    position: relative;
    width: calc(100% - 10px);
    background: #ffffff;
    -webkit-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    top: -5px;
    left: 5px;
  }

  div#popupl-polyline {
    position: absolute !important;
    top: 74px !important;
    right: 114px !important;
    /* z-index: 1!important; */
  }

  /* Menu Group Project Mobile */
  .container-content-fx-group-project {
    width: calc(100vw - 16px) !important;
    margin: auto !important;
  }

  .gp-header {
    flex-wrap: wrap;
  }

  .gp-select-fleet {
    flex-basis: 100% !important;
    margin: 0 0 16px !important;
    max-width: none !important;
  }

  .btn-group-project {
    width: calc(50vw - 42px) !important;
    height: 65px;
    /* background: #fff;
    -webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.06); */
  }

  #gpCarousel .carousel-control .glyphicon-chevron-left,
  #gpCarousel .carousel-control .icon-prev {
    margin-left: 0;
  }

  #gpCarousel .carousel-control .glyphicon-chevron-right,
  #gpCarousel .carousel-control .icon-next {
    margin-right: 0;
  }

  /* .btn-group-project img {
    position: relative;
  }

  button span.icon {
    position: relative;
    display: none !important;
    width: 48px;
    left: -12px;
  } */

  /* button div.text {
    float: right;
    position: relative;
    text-align: left;
    width: 100%;
    font-size: 12px;
    line-height: 1.05;
    white-space: normal;
  } */

  #gpCarousel .carousel .carousel-indicators .active {
    background-color: #3F68F8 !important;
  }

  #gpCarousel .carousel-indicators {
    bottom: -35px !important;
  }

  .card-list {
    font-family: Inter;
    width: 270px !important;
    margin-top: 20px;
    margin-left: 5px;
    background: #ffffff !important;
    border-radius: 10px 10px 10px 10px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  .card-monitoring.full {
    margin-top: -2px;
  }

  .card-monitoring.full .card-list {
    width: 315px !important;
  }

  .hidden-menu .popupLegend,
  .hidden-menu #popupl-polyline {
    display: none;
  }
}

table tbody#tableBody tr td {
  cursor: pointer;
}

table tbody#tableBody tr td.active {
  background-color: #9ceafd !important;
}

/* .card-list {
  width: 27.5% !important;
} */

/* Datatable Vehicle Monitoring */

/* .dt-vehicle-monitoring th {
  max-width: 150px !important;
} */

/* .dt-vehicle-monitoring .dataTables_wrapper .table thead tr:first-child th {
  padding-top: 6px;
} */

/* .dt-vehicle-monitoring td {
  text-align: center;
  line-height: 20px;
  word-wrap: break-word;
}

.dt-vehicle-monitoring th:nth-child(1) {
  width: 1px !important;
}

.dt-vehicle-monitoring th:nth-child(2) {
  width: 5px !important;
}

.dt-vehicle-monitoring th:nth-child(3) {
  width: 7px !important;
}

.dt-vehicle-monitoring th:nth-child(4) {
  width: 8px !important;
}

.dt-vehicle-monitoring th:nth-child(5) {
  width: 10px !important;
}

.dt-vehicle-monitoring th:nth-child(6) {
  width: 5px !important;
}

.dt-vehicle-monitoring th:nth-child(7) {
  width: 5px !important;
}

.dt-vehicle-monitoring th:nth-child(8) {
  width: 2px !important;
}

.dt-vehicle-monitoring th:nth-child(9) {
  width: 5px !important;
}

.dt-vehicle-monitoring th:nth-child(10) {
  width: 40px !important;
  text-align: left !important;
}

.dt-vehicle-monitoring th:nth-child(11) {
  width: 2px !important;
}

.dt-vehicle-monitoring th:nth-child(12) {
  width: 2px !important;
}

.dt-vehicle-monitoring th:nth-child(13) {
  width: 2px !important;
}

.dt-vehicle-monitoring th:nth-child(14) {
  width: 10px !important;
}

.dt-vehicle-monitoring th:nth-child(15) {
  width: 10px !important;
}

.dt-vehicle-monitoring th:nth-child(16) {
  width: 10px !important;
}

.dt-vehicle-monitoring th:nth-child(17) {
  width: 5px !important;
}

.dt-vehicle-monitoring th:nth-child(18) {
  width: 5px !important;
}

.dt-vehicle-monitoring th:nth-child(19) {
  width: 5px !important;
} */

/* Datatable History Monitoring */

/* .dt-history-monitoring td {
  text-align: center !important;
  line-height: 20px;
}

.dt-history-monitoring th:nth-child(1) {
  width: 25px !important;
}

.dt-history-monitoring th:nth-child(2) {
  width: 28px !important;
}

.dt-history-monitoring th:nth-child(3) {
  width: 65px !important;
}

.dt-history-monitoring th:nth-child(4) {
  width: 65px !important;
}

.dt-history-monitoring th:nth-child(5) {
  width: 70px !important;
}

.dt-history-monitoring th:nth-child(6) {
  width: 65px !important;
}

.dt-history-monitoring th:nth-child(7) {
  width: 150px !important;
}

.dt-history-monitoring th:nth-child(8) {
  width: 55px !important;
}

.dt-history-monitoring th:nth-child(9) {
  width: 40px !important;
}

.dt-history-monitoring th:nth-child(10) {
  width: 75px !important;
}

.dt-history-monitoring th:nth-child(11) {
  width: 60px !important;
}

.dt-history-monitoring th:nth-child(12) {
  width: 69px !important;
  word-wrap: break-word;
}

.dt-history-monitoring th:nth-child(13) {
  width: 30px !important;
}

.dt-history-monitoring th:nth-child(14) {
  width: 20px !important;
}

.dt-history-monitoring th:nth-child(15) {
  width: 25px !important;
}

.dt-history-monitoring th:nth-child(16) {
  width: 65px !important;
}

.dt-history-monitoring th:nth-child(17) {
  width: 65px !important;
}

.dt-history-monitoring th:nth-child(18) {
  width: 35px !important;
}

.dt-history-monitoring th:nth-child(19) {
  width: 45px !important;
}

.dt-history-monitoring th:nth-child(20) {
  width: 55px !important;
}

.dt-history-monitoring th:nth-child(21) {
  width: 55px !important;
}

.dt-history-monitoring th:nth-child(22) {
  width: 55px !important;
}

.dt-history-monitoring th:nth-child(23) {
  width: 55px !important;
}

.dt-history-monitoring th:nth-child(24) {
  width: 55px !important;
}

.dt-history-monitoring th:nth-child(25) {
  width: 55px !important;
}

.dt-history-monitoring th:nth-child(26) {
  width: 55px !important;
}

.dt-history-monitoring th:nth-child(27) {
  width: 55px !important;
} */

/*  Header Kolom saat scroll lebih dari 15 baris*/

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_disabled,
table.dataTable thead .sorting,
table.dataTable thead .sorting_desc,
th .sorting-asc {
  background-color: #207575;
  color: #fff;
  border: none;
}

/* table.dataTable thead .sorting_asc,
    table.dataTable thead .sorting_desc {
      background-color: #207575;
    } */

/* Border dataTables */

/* Left Panel Text dan icon */

nav ul ul li>a {
  padding-left: 30px;
  font-size: 12px;
  font-weight: 400;
  outline: 0;
}

/* Animasi dan icon vehicle */

.color {
  background: var(--primary);
}

.circle-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
}

.circle {
  width: 35px;
  height: 35px;
  border-radius: 50% !important;
  -webkit-box-shadow: 0px 0px 1px 1px #0000001a;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

.pulse {
  -webkit-animation: pulse-animation 2s infinite;
  animation: pulse-animation 2s infinite;
}

@-webkit-keyframes pulse-animation {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(251, 100, 35, 0.2);
    box-shadow: 0 0 0 0px rgba(251, 100, 35, 0.2);
  }

  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(251, 100, 35, 0);
    box-shadow: 0 0 0 20px rgba(251, 100, 35, 0);
  }
}

@keyframes pulse-animation {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(251, 100, 35, 0.2);
    box-shadow: 0 0 0 0px rgba(251, 100, 35, 0.2);
  }

  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(251, 100, 35, 0);
    box-shadow: 0 0 0 20px rgba(251, 100, 35, 0);
  }
}

@media (max-width: 900px) {
  .master {
    display: none;
  }
}

/* .card-list {
  width: 27.5% !important;
} */

/* Size card di vehicle monitoring */

.card-draggable .container-accordion {
  max-height: 240px !important;
  overflow-y: auto;
  font-size: 1rem;
}

.card-monitoring.full .card-draggable .container-accordion {
  height: calc(100vh - 381px) !important;
  max-height: unset !important;
}

/* for live video */
.card-monitoring.full .card-draggable.live-video .container-accordion {
  height: calc(100vh - 354px) !important;
  max-height: unset !important;
}

/* Modal Logout */

/* container putih logout */

.content-logout,
.content-logout:before,
.content-clear-ls,
.content-clear-ls:before {
  position: fixed;
  margin: auto;
  width: 400px;
  left: 50%;
  border-radius: 10px 10px 0px 0px;
  margin-left: -200px;
}

.content-logout,
.content-clear-ls {
  background-color: #fff !important;
  top: 130px;
  height: 230px;
}

.content-logout:before,
.content-clear-ls:before {
  content: "";
}

.content-logout:before,
.content-clear-ls:before {
  background-size: 250px !important;
  top: 100px;
  height: 258px;
  position: fixed;
}

.content-logout:before {
  background: url(../img/illustrations-logout.svg) no-repeat center;
}

.content-clear-ls:before {
  background: url(../img/illustrations-reset.svg) no-repeat center;
}

/* container hijau logout */

.MessageBoxContainer {
  top: 360px;
  color: #212121;
  position: relative;
  width: 400px;
  height: 150px;
  background-color: #207575;
  margin: auto;
  border-radius: 0px 0px 10px 10px !important;
  font-family: Inter !important;
  z-index: 1000;
}

.divMessageBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
  /* overflow-y: hidden !important; */
}

/* text putih */

.MessageBoxContainer {
  color: #fff !important;
}

/* text putih */

.txt-color-orangeDark {
  color: #fff !important;
}

.MessageBoxMiddle {
  position: relative;
  left: auto;
  width: 100% !important;
  /* align-items: center !important; */
  text-align: center;
}

.MessageBoxButtonSection {
  width: 100%;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/* button yes logout */

.MessageBoxButtonSection button:nth-of-type(1),
.btn-logout-yes {
  background: #f37d3f !important;
  color: #fff !important;
  border-radius: 3px !important;
  border: 0px;
  padding: 10px !important;
  min-width: 80px !important;
  height: 35px !important;
  /* margin-right: 2px;
  margin-top: -5px !important; */
}

/* button no logout */

.MessageBoxButtonSection button:nth-of-type(2),
.btn-logout-no {
  background: #b5bbc3 !important;
  color: #fff !important;
  height: 35px !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  min-width: 80px !important;
  -moz-box-shadow: none;
  /* margin-right: 90px;
  margin-top: -35px !important; */
}

@media screen and (max-width: 880px) {
  .MessageBoxContainer {
    width: 300px;
  }

  .content-logout,
  .content-logout:before,
  .content-clear-ls,
  .content-clear-ls:before {
    width: 300px;
    margin-left: -150px;
  }
}

/* Datatable Position Log Detail */

.dt-pos-log .dataTables_wrapper .table thead tr:first-child th {
  /* padding: 10px; */
  text-align: center;
}

.dt-pos-log td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
}

.dt-pos-log th:nth-child(1) {
  width: 15px !important;
}

.dt-pos-log th:nth-child(2) {
  width: 60px !important;
}

.dt-pos-log th:nth-child(3) {
  width: 65px !important;
}

.dt-pos-log th:nth-child(4) {
  width: 65px !important;
}

.dt-pos-log th:nth-child(5) {
  width: 60px !important;
}

.dt-pos-log th:nth-child(6) {
  width: 60px !important;
}

.dt-pos-log th:nth-child(8) {
  width: 75px !important;
}

.dt-pos-log th:nth-child(9) {
  width: 45px !important;
}

.dt-pos-log th:nth-child(10) {
  width: 70px !important;
}

.dt-pos-log th:nth-child(11) {
  width: 70px !important;
}

.dt-pos-log th:nth-child(12) {
  width: 70px !important;
}

.dt-pos-log th:nth-child(13) {
  width: 55px !important;
}

.dt-pos-log th:nth-child(14) {
  width: 30px !important;
}

.dt-pos-log th:nth-child(15) {
  width: 30px !important;
}

.dt-pos-log th:nth-child(16) {
  width: 50px !important;
}

.dt-pos-log th:nth-child(17) {
  width: 50px !important;
}

.dt-pos-log th:nth-child(18) {
  width: 50px !important;
}

.dt-pos-log th:nth-child(19) {
  width: 50px !important;
}

/* Datatable Position Log Detail Driver */

/* .dt-pos-log-driver .dataTables_wrapper .table thead tr:first-child th {
  padding: 10px;
} */

.dt-pos-log-driver td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
}

.dt-pos-log-driver th:nth-child(1) {
  width: 5px !important;
}

.dt-pos-log-driver th:nth-child(2) {
  width: 30px !important;
}

.dt-pos-log-driver th:nth-child(3) {
  width: 40px !important;
}

.dt-pos-log-driver th:nth-child(4) {
  width: 20px !important;
}

.dt-pos-log-driver th:nth-child(5) {
  width: 140px !important;
}

.dt-pos-log-driver th:nth-child(6) {
  width: 10px !important;
}

.dt-pos-log-driver th:nth-child(7) {
  width: 25px !important;
}

.dt-pos-log-driver th:nth-child(8) {
  width: 15px !important;
}

.dt-pos-log-driver th:nth-child(9) {
  width: 10px !important;
  word-wrap: break-word;
}

.dt-pos-log-driver th:nth-child(10) {
  width: 10px !important;
}

.dt-pos-log-driver th:nth-child(11) {
  width: 10px !important;
}

/* Datatable Device List */

/* .dt-device-list .dataTables_wrapper .table thead tr:first-child th {
  padding: 10px;
} */

.dt-device-list td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-device-list th:nth-child(1) {
  width: 90px !important;
}

.dt-device-list th:nth-child(2) {
  width: 120px !important;
}

.dt-device-list th:nth-child(3) {
  width: 105px !important;
}

.dt-device-list th:nth-child(4) {
  width: 150px !important;
}

/* Datatable History Detail */

/* .dt-history-detail .dataTables_wrapper .table thead tr:first-child th {
  padding: 10px;
} */

.dt-history-detail td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-history-detail th:nth-child(1) {
  width: 10px !important;
}

.dt-history-detail th:nth-child(2) {
  width: 50px !important;
}

.dt-history-detail th:nth-child(3) {
  width: 50px !important;
}

.dt-history-detail th:nth-child(4) {
  width: 60px !important;
}

.dt-history-detail th:nth-child(5) {
  width: 35px !important;
}

.dt-history-detail th:nth-child(6) {
  width: 150px !important;
}

.dt-history-detail th:nth-child(7) {
  width: 35px !important;
}

.dt-history-detail th:nth-child(8) {
  width: 50px !important;
}

.dt-history-detail th:nth-child(9) {
  width: 45px !important;
}

.dt-history-detail th:nth-child(10) {
  width: 50px !important;
}

.dt-history-detail th:nth-child(11) {
  width: 25px !important;
}

.dt-history-detail th:nth-child(12) {
  width: 25px !important;
}

/* Datatable Trip Detail */

/* .dt-trip-detail .dataTables_wrapper .table thead tr:first-child th {
  padding: 10px;
} */

.dt-trip-detail td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-trip-detail th:nth-child(1) {
  width: 15px !important;
}

.dt-trip-detail th:nth-child(2) {
  width: 60px !important;
}

.dt-trip-detail th:nth-child(3) {
  width: 70px !important;
}

.dt-trip-detail th:nth-child(4) {
  width: 50px !important;
}

.dt-trip-detail th:nth-child(5) {
  width: 30px !important;
}

.dt-trip-detail th:nth-child(6) {
  width: 45px !important;
}

.dt-trip-detail th:nth-child(7) {
  width: 60px !important;
}

.dt-trip-detail th:nth-child(8) {
  width: 150px !important;
}

.dt-trip-detail th:nth-child(9) {
  width: 55px !important;
}

.dt-trip-detail th:nth-child(10) {
  width: 150px !important;
}

.dt-trip-detail th:nth-child(11) {
  width: 60px !important;
}

.dt-trip-detail th:nth-child(12) {
  width: 50px !important;
}

.dt-trip-detail th:nth-child(13) {
  width: 60px !important;
}

.dt-trip-detail th:nth-child(14) {
  width: 50px !important;
}

.dt-trip-detail th:nth-child(15) {
  width: 50px !important;
}

.dt-trip-detail th:nth-child(16) {
  width: 50px !important;
}

.dt-trip-detail th:nth-child(17) {
  width: 50px !important;
}

.dt-trip-detail th:nth-child(18) {
  width: 50px !important;
}

.dt-trip-detail th:nth-child(19) {
  width: 50px !important;
}

/* Datatable Trip Detail Driver */

/* .dt-trip-detail-driver .dataTables_wrapper .table thead tr:first-child th {
  padding: 10px;
} */

.dt-trip-detail-driver td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-trip-detail-driver th:nth-child(1) {
  width: 15px !important;
}

.dt-trip-detail-driver th:nth-child(2) {
  width: 60px !important;
}

.dt-trip-detail-driver th:nth-child(3) {
  width: 60px !important;
}

.dt-trip-detail-driver th:nth-child(4) {
  width: 50px !important;
}

.dt-trip-detail-driver th:nth-child(5) {
  width: 30px !important;
}

.dt-trip-detail-driver th:nth-child(6) {
  width: 45px !important;
}

.dt-trip-detail-driver th:nth-child(7) {
  width: 60px !important;
}

.dt-trip-detail-driver th:nth-child(8) {
  width: 150px !important;
}

.dt-trip-detail-driver th:nth-child(9) {
  width: 55px !important;
}

.dt-trip-detail-driver th:nth-child(10) {
  width: 150px !important;
}

.dt-trip-detail-driver th:nth-child(11) {
  width: 60px !important;
}

.dt-trip-detail-driver th:nth-child(12) {
  width: 50px !important;
}

.dt-trip-detail-driver th:nth-child(13) {
  width: 60px !important;
}

.dt-trip-detail-driver th:nth-child(14) {
  width: 50px !important;
}

.dt-trip-detail-driver th:nth-child(15) {
  width: 50px !important;
}

.dt-trip-detail-driver th:nth-child(16) {
  width: 50px !important;
}

.dt-trip-detail-driver th:nth-child(17) {
  width: 50px !important;
}

.dt-trip-detail-driver th:nth-child(18) {
  width: 50px !important;
}

.dt-trip-detail-driver th:nth-child(19) {
  width: 50px !important;
}

/* Datatable Trip Mileage */

/* .dt-trip-mileage .dataTables_wrapper .table thead tr:first-child th {
  padding: 10px;
} */

.dt-trip-mileage td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-trip-mileage th:nth-child(1) {
  width: 15px !important;
}

.dt-trip-mileage th:nth-child(2) {
  width: 30px !important;
}

.dt-trip-mileage th:nth-child(3) {
  width: 40px !important;
}

.dt-trip-mileage th:nth-child(4) {
  width: 35px !important;
}

.dt-trip-mileage th:nth-child(5) {
  width: 10px !important;
}

.dt-trip-mileage th:nth-child(6) {
  width: 35px !important;
}

.dt-trip-mileage th:nth-child(7) {
  width: 35px !important;
}

.dt-trip-mileage th:nth-child(8) {
  width: 25px !important;
}

.dt-trip-mileage th:nth-child(9) {
  width: 20px !important;
}

.dt-trip-mileage th:nth-child(10) {
  width: 20px !important;
}

.dt-trip-mileage th:nth-child(11) {
  width: 20px !important;
}

.dt-trip-mileage th:nth-child(12) {
  width: 80px !important;
}

.dt-trip-mileage th:nth-child(13) {
  width: 80px !important;
}

/* Datatable History Monitoring - Event Summary */

/* .dt-history-monitoring-eventsummary
  .dataTables_wrapper
  .table
  thead
  tr:first-child
  th {
  padding: 10px;
} */

.dt-history-monitoring-eventsummary td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-history-monitoring-eventsummary th:nth-child(1) {
  width: 15px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(2) {
  width: 60px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(3) {
  width: 50px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(4) {
  width: 180px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(5) {
  width: 50px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(6) {
  width: 70px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(7) {
  width: 50px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(8) {
  width: 150px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(9) {
  width: 40px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(10) {
  width: 40px !important;
  word-wrap: break-word;
}

.dt-history-monitoring-eventsummary th:nth-child(11) {
  width: 25px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(12) {
  width: 25px !important;
}

.dt-history-monitoring-eventsummary th:nth-child(13) {
  width: 65px !important;
}

/* Datatable History Monitoring - Over Speeding */

/* .dt-history-monitoring-overspeeding
  .dataTables_wrapper
  .table
  thead
  tr:first-child
  th {
  padding: 10px;
} */

.dt-history-monitoring-overspeeding td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-history-monitoring-overspeeding th:nth-child(1) {
  width: 15px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(2) {
  width: 45px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(3) {
  width: 175px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(4) {
  width: 45px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(5) {
  width: 40px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(6) {
  width: 150px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(7) {
  width: 45px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(8) {
  width: 55px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(9) {
  width: 60px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(10) {
  width: 30px !important;
}

.dt-history-monitoring-overspeeding th:nth-child(11) {
  width: 20px !important;
}

/* Datatable History Monitoring - Deceleration */

/* .dt-history-monitoring-overspeeding
  .dataTables_wrapper
  .table
  thead
  tr:first-child
  th {
  padding: 10px;
} */

.dt-history-monitoring-deceleration td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-history-monitoring-deceleration th:nth-child(1) {
  width: 5px !important;
}

.dt-history-monitoring-deceleration th:nth-child(2) {
  width: 15px !important;
}

.dt-history-monitoring-deceleration th:nth-child(3) {
  width: 70px !important;
}

.dt-history-monitoring-deceleration th:nth-child(4) {
  width: 15px !important;
}

.dt-history-monitoring-deceleration th:nth-child(5) {
  width: 20px !important;
}

.dt-history-monitoring-deceleration th:nth-child(6) {
  width: 15px !important;
}

.dt-history-monitoring-deceleration th:nth-child(7) {
  width: 15px !important;
}

.dt-history-monitoring-deceleration th:nth-child(8) {
  width: 15px !important;
}

.dt-history-monitoring-deceleration th:nth-child(9) {
  width: 80px !important;
}

.dt-history-monitoring-deceleration th:nth-child(10) {
  width: 5px !important;
}

/* Datatable History Monitoring - Harsh */

/* .dt-history-monitoring-harsh
  .dataTables_wrapper
  .table
  thead
  tr:first-child
  th {
  padding: 10px;
} */

/* Datatable History Monitoring - Acceleration */

.dt-history-monitoring-acceleration td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-history-monitoring-acceleration th:nth-child(1) {
  width: 15px !important;
}

.dt-history-monitoring-acceleration th:nth-child(2) {
  width: 60px !important;
}

.dt-history-monitoring-acceleration th:nth-child(3) {
  width: 50px !important;
}

.dt-history-monitoring-acceleration th:nth-child(4) {
  width: 180px !important;
}

.dt-history-monitoring-acceleration th:nth-child(5) {
  width: 50px !important;
}

.dt-history-monitoring-acceleration th:nth-child(6) {
  width: 70px !important;
}

.dt-history-monitoring-acceleration th:nth-child(7) {
  width: 50px !important;
}

.dt-history-monitoring-acceleration th:nth-child(8) {
  width: 150px !important;
}

.dt-history-monitoring-acceleration th:nth-child(9) {
  width: 90px !important;
}

.dt-history-monitoring-acceleration th:nth-child(10) {
  width: 40px !important;
  word-wrap: break-word;
}

/* Animasi Gelombang Chart */

.header {
  position: relative;
  text-align: center;
  background-color: #ffffff;
  background-image: -o-linear-gradient(bottom, #ffffff 0%, #a2a9f5 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#a2a9f5));
  background-image: linear-gradient(0deg, #ffffff 0%, #a2a9f5 100%);
  /* background: url(./icon-group.svg); */
  width: 100%;
  z-index: 100;
}

.inner-header {
  height: 65vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.flex {
  /*Flexbox for containers*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.waves {
  position: relative;
  top: 0px;
  /* bottom: 70.5px; */
  width: 100%;
  height: 25vh;
  /* margin-bottom: -7px; */
  /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}

.content {
  position: relative;
  height: 20vh;
  text-align: center;
  background-color: white;
}

/* Animation */

.parallax>use {
  -webkit-animation: move-forever 5s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  animation: move-forever 5s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax>use:nth-child(1) {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}

.parallax>use:nth-child(2) {
  -webkit-animation-delay: -3s;
  animation-delay: -3s;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}

.parallax>use:nth-child(3) {
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}

.parallax>use:nth-child(4) {
  -webkit-animation-delay: -5s;
  animation-delay: -5s;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}

@-webkit-keyframes move-forever {
  0% {
    -webkit-transform: translate3d(-90px, 0, 0);
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(85px, 0, 0);
    transform: translate3d(85px, 0, 0);
  }
}

@keyframes move-forever {
  0% {
    -webkit-transform: translate3d(-90px, 0, 0);
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(85px, 0, 0);
    transform: translate3d(85px, 0, 0);
  }
}

/*Shrinking for mobile*/

@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }

  .content {
    height: 30vh;
  }

  h1 {
    font-size: 24px;
  }
}

.waves {
  position: relative;
  top: 0px;
  /* bottom: 70.5px; */
  width: 100%;
  height: 25vh;
  /* margin-bottom: -7px; */
  /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}

.waves {
  position: relative;
  top: 0px;
  width: 100%;
  height: 25vh;
  margin-bottom: -7px;
}

/* Modal Form */

.modal fieldset {
  margin-bottom: 24px;
}

.modal fieldset legend {
  margin-bottom: 16px;
}

.modal .form-actions .btn-sm {
  font-size: 12px;
}

/* Scroll Vehicle Monitoring */

.container-accordion::-webkit-scrollbar {
  width: 10px !important;
}

.container-accordion::-webkit-scrollbar-track {
  background: #f5f5f7;
}

.container-accordion::-webkit-scrollbar-thumb {
  background-color: #c2c2c7 !important;
  border-radius: 2px;
  height: 50px !important;
  border: none;
  padding: 10px !important;
}

.card-monitoring.full .container-accordion::-webkit-scrollbar {
  width: 16px !important;
}

.card-monitoring.full .container-accordion::-webkit-scrollbar-track {
  background: #fff !important;
}

.card-monitoring.full .container-accordion::-webkit-scrollbar-thumb {
  background-color: #DAE0EC !important;
  border: 5px solid #fff;
  border-radius: 8px !important;
}

/* Scroll History Monitoring */

.card-body-history {
  height: calc(100vh - 270px);
}

.card-body-history::-webkit-scrollbar {
  width: 10px !important;
}

.card-body-history::-webkit-scrollbar-track {
  background: #f5f5f7 !important;
}

.card-body-history::-webkit-scrollbar-thumb {
  background-color: #c2c2c7 !important;
  border-radius: 2px;
  height: 20px !important;
  border: none;
  padding: 10px !important;
}

.card-body-history {
  scrollbar-width: thin;
}

.card-body-history #alertMessage {
  margin: 7px 0 0 7px;
  width: calc(100% - 42px);
}

.card-body-history #alertMessage.animate {
  -webkit-animation: blink-1 0.6s 0.4s 2 both;
  animation: blink-1 0.6s 0.4s 2 both;
}

/* Menu Group Project */

.container-content-fx-group-project {
  width: 100%;
  background: #FAFAFA;
  -webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-top: 1%;
  padding: 16px;
  margin-left: 3px;
}

.gp-header {
  display: flex;
  justify-content: space-between;
  padding: 0 .75rem .75rem;
  margin-top: 16px;
}

.gp-select-fleet {
  display: flex;
  align-items: center;
  font-size: 1rem;
  margin-right: 32px;
  flex-basis: 75%;
  max-width: 540px;
}

.gp-select-fleet #btnSelect {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0 5px 5px 0 !important;
  padding: 7px;
  font-size: 12px;
  min-width: 52px;
}

.gp-select-fleet .select2-container--default .select2-selection--single {
  border-radius: 5px 0 0 5px;
}

.gp-header.dashboard-header-buttons .gp-select-fleet .select2-container--default .select2-selection--single {
    border-radius: 5px;
}

.gp-info {
  display: flex;
  width: 240px;
  margin-right: auto;
}

.gp-info>div {
  margin-right: 32px;
}

.gp-info>div>p {
  margin: 0;
  line-height: 1.2;
}

.gp-info>div>p>strong {
  font-size: 16px;
}

.gp-carousel-control {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.gp-carousel-control>a {
  background: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #DDE3F0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

.gp-carousel-control>a>i {
  color: #4A597A;
}

.btn-group-project {
  width: 18.5%;
  height: 65px;
  background: #fff;
  -webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}

#gpCarousel button div.text>strong {
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding-bottom: 1px;
  margin-bottom: 1px;
  word-break: break-word;
}

/* button div.text>small {
  font-size: 100%;
} */

#gpCarousel .btn-group-project img {
  position: relative;
  width: 24px;
  margin-right: 6px;
}

#gpCarousel button span.icon {
  position: relative;
  display: none !important;
  width: 48px;
  left: -12px;
  display: inline-block;
  padding: 18px 16px;
  background: rgba(0, 0, 0, .15);
  border-radius: 3px 0 0 3px;
}

#gpCarousel button div.text {
  float: right;
  position: relative;
  text-align: left;
  width: 100%;
  font-size: 11.5px;
  line-height: 1.05;
  white-space: normal;
}

#gpCarousel .carousel-inner>.item>div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#gpCarousel .carousel .carousel-indicators .active {
  background-color: var(--primary) !important;
}

#gpCarousel .carousel-indicators {
  bottom: -3px !important;
  width: 90%;
  margin-left: -45%;
  display: flex;
  justify-content: center;
}

#gpCarousel .carousel-indicators li {
  background-color: rgba(70, 70, 70, .25);
  margin: 0 2px;
  border: none;
  border-radius: 4px;
  width: 12px;
  height: 4px;
}

#gpCarousel .carousel-indicators li:only-child {
  display: none;
}

#gpCarousel .carousel-indicators .active {
  background: var(--primary);
}

#gpCarousel .carousel-control {
  width: 5% !important;
}

#gpCarousel .carousel-control.right {
  background: none !important;
}

#gpCarousel .carousel-control.left {
  background: none !important;
}

/* Datatable Group Project */

.dt-group-project td {
  text-align: center !important;
  line-height: 20px;
}

/* Fleet Group Column */

.dt-group-project th:nth-last-child(15) {
  width: 65px !important;
}

.dt-group-project th:first-child {
  width: 15px !important;
}

.dt-group-project th:nth-last-child(14) {
  width: 65px !important;
}

.dt-group-project td:nth-last-child(13) {
  text-align: left !important;
}

.dt-group-project th:nth-last-child(12) {
  width: 95px !important;
}

.dt-group-project th:nth-last-child(11) {
  width: 55px !important;
}

.dt-group-project th:nth-last-child(10) {
  width: 30px !important;
}

.dt-group-project th:nth-last-child(9) {
  width: 40px !important;
}

.dt-group-project th:nth-last-child(8) {
  width: 110px !important;
}

.dt-group-project th:nth-last-child(7) {
  width: 45px !important;
  word-wrap: break-word;
}

.dt-group-project th:nth-last-child(6) {
  width: 30px !important;
  word-wrap: break-word;
}

.dt-group-project th:nth-last-child(5) {
  width: 25px !important;
}

.dt-group-project th:nth-last-child(4) {
  width: 35px !important;
}

.dt-group-project th:nth-last-child(3) {
  width: 20px !important;
}

.dt-group-project th:nth-last-child(2) {
  width: 40px !important;
}

.dt-group-project th:last-child {
  width: 40px !important;
}

/* Custom Data Table */

/* Warna Font */

.dataTables_wrapper .table tbody td {
  vertical-align: middle;
  font-size: 1;
  line-height: 1.2;
  color: #000 !important;
  /* border: 0px !important; */
}

/* Table Striped */

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #d8f2ee !important;
}

/* Table Hover */

.table-hover>tbody>tr:hover {
  background-color: #bde0da !important;
}

/* Table Border */

.no-padding .dataTables_wrapper table,
.no-padding>table {
  border: 1px !important;
  margin-bottom: 0 !important;
  border-bottom-width: 0 !important;
}

.table-bordered>tbody>tr>td {
  border: 0px solid #D8E4FF;
}

.btn-group-project:active {
  left: 5px;
  top: 0;
}

/* Table Font Size */

.dataTables_wrapper .table tbody td {
  vertical-align: middle;
  font-size: 11.5px;
  line-height: 1.2;
  color: #333333;
  /* border: 0px !important; */
}

/* Bug checkbox di event report */

.checkbox-inline,
.radio-inline {
  z-index: 0;
}

/* Left Panel  FIXED*/

body:before {
  content: "";
  background: #f0f4f8;
  top: 0;
  left: 0;
  height: 65px;
  width: 100vw;
  position: fixed;
  z-index: 10;
}

body.fixed-header:before {
  display: none;
}

table.dataTable.fixedHeader-floating {
  top: 105px !important;
  border-width: 10px 0 0 10px;
  border-color: #fff;
  margin-left: -10px;
}

/* .fixedHeader-floating>thead>tr>th:first-child {
  border-top-left-radius: 5px;
} */

/* .fixedHeader-floating>thead>tr>th:last-child {
  border-top-right-radius: 5px;
} */

.fixed-header .table.dataTable.fixedHeader-floating {
  top: 0 !important;
}

/* 
header#header:before {
  content: "";
  background: #F6F9F9;
  top: 0;
  left: 0;
  height: 7px;
  width: 100vw;
  position: fixed;
  z-index: 0;
} */

/* style button vehicle monitoring */

.gm-style-mtc>button {
  font-family: Inter !important;
  font-size: 1.1rem !important;
  background: #1E70CD !important;
  color: #fff !important;
  transition: none;
}

.gm-style-mtc:first-child button {
  border-radius: 5px 0 0 5px !important;
}

.gm-style-mtc:last-child button {
  border-radius: 0px 5px 5px 0px !important;
}

button.gm-control-active.gm-fullscreen-control {
  background: #1E70CD !important;
}

button.gm-control-active.gm-fullscreen-control img {
  -webkit-filter: invert(1) brightness(1.3);
  filter: invert(1) brightness(1.3);
}

button.gm-control-active {
  background: #1E70CD !important;
}

button.gm-control-active img {
  -webkit-filter: invert(1) brightness(1.3);
  filter: invert(1) brightness(1.3);
}

/* size arrow */

#gpCarousel .carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 10px 0 20px 0;
}

#gpCarousel .carousel-control {
  width: 1% !important;
}

#gpCarousel .carousel-control.right {
  background: none !important;
  color: #3F68F8;
  right: -5px;
}

#gpCarousel .carousel-control.left {
  background: none !important;
  color: #3F68F8;
  left: -5px;
}

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent !important;
  border: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: textfield;
  appearance: none;
}

#container_wave {
  background: #FFF0F0;
}

/* Menu Single Tracking */

.container-single-tracking {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #FFF;
}

.container-single-tracking .pltooltip {
  top: 7px;
}

.container-single-tracking>section.layout {
  position: relative;
}

.content-left-single-tracking {
  position: absolute;
  background: #fff;
  width: 290px;
  left: 0;
  z-index: 904;
  -webkit-box-shadow: 10px 0 0 #fff;
  box-shadow: 10px 0 0 #fff;
  border-radius: 0;
  height: 100vh;
  padding: 0 0 0 16px;
}

.container-single-tracking #main {
  margin-top: 0;
  z-index: 10;
}

.container-single-tracking label.toggle {
  line-height: 1;
}

.st-map-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 20;
  /* margin-left: 300px; */
}

.st-map-container #map {
  width: 100%;
  height: 100vh;
}

@media screen and (max-width: 768px) {
  .content-left-single-tracking {
    height: 256px;
    bottom: 0;
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100vw;
    padding: 0 10px;
  }

  .content-left-single-tracking .smart-form fieldset {
    display: block;
    padding: 16px 14px 5px;
  }

  .container-single-tracking label.toggle {
    line-height: 2.3;
  }

  .st-map-container {
    margin-left: 0;
  }

  .st-map-container #map {
    height: calc(100vh - 256px);
  }
}

/* Scroll Vehicle Monitoring */

.card-draggable .container-accordion::-webkit-scrollbar {
  width: 10px !important;
}

.card-draggable .container-accordion::-webkit-scrollbar-track {
  background: #f5f5f7 !important;
}

.card-draggable .container-accordion::-webkit-scrollbar-thumb {
  background-color: #c2c2c7 !important;
  border-radius: 2px;
  height: 50px !important;
  border: none;
  padding: 10px !important;
}

.card-draggable .container-accordion {
  scrollbar-width: thin;
}

/* Datatable Set Group Members*/

.dt-set-group-members td {
  text-align: center !important;
  line-height: 20px;
  word-wrap: break-word;
  padding: 5px !important;
  height: 30px;
}

.dt-set-group-members th:nth-child(1) {
  width: 20px !important;
}

.dt-set-group-members th:nth-child(2) {
  width: 100px !important;
}

.dt-set-group-members th:nth-child(3) {
  width: 150px !important;
}

.dt-set-group-members th:nth-child(4) {
  width: 100px !important;
}

/* set padding keseluruhan table */

/* top right bottom left */

.table.dataTable th {
  padding: 0px 5px 0px 5px !important;
}

.table.dataTable td {
  padding: 10px 5px 10px 5px !important;
}

/* datatables container */

.card.card-datatable-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100vh - 117px);
  font-size: 80%;
  z-index: 1040;
}

/* .card.card-datatable-container.tabs {
  min-height: calc(100vh - 122px);
  height: auto;
} */

.card.card-datatable-container.tabs.hide {
  height: 0;
  padding: 0;
  display: none;
}

.card.card-datatable-container div.card-datatable {
  padding: 0;
  overflow-y: hidden;
}

.card.card-datatable-container div.card-datatable .dt-toolbar {
  margin-top: -15px;
}

.card.card-datatable-container .dtheader {
  margin-bottom: -6px !important;
  height: 35px;
}

.card.card-datatable-container .table>thead:first-child>tr:first-child>th {
  vertical-align: middle;
  font-size: 80%;
  text-align: center !important;
}

.card.card-datatable-container table.dataTable thead>tr>th {
  padding-right: 10px;
  font-weight: bold;
  background: var(--blue);
  color: #fff;
}

.card-datatable-btn {
  color: #fff;
  padding: 2px 8px;
  background: var(--primary);
  cursor: pointer;
  position: absolute;
  z-index: 1080;
  border-radius: 0 0 4px 4px;
  margin-bottom: 0;
  left: 50%;
  margin-left: -17.5px;
  bottom: 0;
}

.layout-content.monitoring2.monitoring21 {
  margin-top: 50px;
}

.monitoring2 .card-datatable-btn.hide {
  display: block !important;
  opacity: 0;
  bottom: -60px;
}

.monitoring2 .card-datatable-btn {
  padding: 10px;
  background: var(--primary);
  z-index: 1080;
  border-radius: 20px;
  margin-bottom: 10px;
  margin-left: -75px;
  bottom: 0;
  width: 130px;
  height: 34px;
  font-size: 11px;
  text-align: center;
  user-select: none;
  -webkit-transition: transform .2s linear, all .3s ease-out;
  -o-transition: transform .2s linear, all .3s ease-out;
  transition: transform .2s linear, all .3s ease-out;
}

.card-datatable-btn.up {
  bottom: calc(100vh - 132px);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* .monitoring2 .card-draggable {
  z-index: 1090;
}

.monitoring2 .card-datatable-btn.up + .card-monitoring>.card-draggable {
  z-index: 500;
} */

.monitoring2 .card-datatable-btn.up {
  bottom: 0;
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.monitoring2 .card-datatable-btn>span {
  display: block;
  position: relative;
}

.monitoring2 .card-datatable-btn.up>span {
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(180deg);
  bottom: 2px;
}

.vehicle-monitoring .select2-container--open .select2-dropdown--below {
  width: 500px !important;
}

@media screen and (max-width: 540px) {
  .vehicle-monitoring .select2-container--open .select2-dropdown--below {
    width: calc(100vw - 40px) !important;
  }
}

.card-datatable-btn.up+.card-monitoring.full #map {
  opacity: 0;
  pointer-events: none;
}

.card.card-datatable-container table.dataTable td,
.card.card-datatable-container table.dataTable th {
  font-size: 11px;
}

.card-datatable-btn i {
  cursor: pointer;
}

.card.card-datatable-container #datagrid_actionButton_DataGrid1 {
  border: none;
}

/* fix history monitoring dt height */
.card.card-datatable-container .dataTables_scrollBody {
  /* max-height: calc(100vh - 290px) !important; */
  max-height: calc(100vh - 464px)!important;
}

.card-datatable-container.hide {
  height: 0;
  opacity: 0;
}

.monitoring2 [aria-expanded="true"]:not(.collapsed).fa-plus-square:before {
  content: "\f146";
}

@media screen and (max-width: 880px) {
  .card-datatable-btn.up {
    bottom: calc(100vh - 220px);
  }

  /* .monitoring2 .card-datatable-btn.up {
    bottom: calc(100vh - 150px);
  } */
}

/* nearest vehicle */

/* #nv_aside {
  position: absolute;
  top: 0;
  left: 0;
  width: 315px;
  height: 100%;
  background: #fff;
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  -webkit-box-shadow: 1px 0 10px 0 rgb(0 0 0 / 12%), 2px 0 4px -1px rgb(0 0 0 / 20%);
  box-shadow: 1px 0 10px 0 rgb(0 0 0 / 12%), 2px 0 4px -1px rgb(0 0 0 / 20%);
  -webkit-transition: .3s ease-in;
  -o-transition: .3s ease-in;
  transition: .3s ease-in
} */

/* #nv_aside.nv-aside-close {
  left: -315px;
  -webkit-box-shadow: none;
  box-shadow: none
} */

/* #toggle-nv-aside {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 315px;
  background: #f86323;
  padding: 14px 7px;
  color: #fff;
  border-radius: 0 8px 8px 0;
  font-size: 1.5rem;
  -webkit-box-shadow: 1px 0 10px 0 rgb(0 0 0 / 12%), 2px 0 4px -1px rgb(0 0 0 / 20%);
  box-shadow: 1px 0 10px 0 rgb(0 0 0 / 12%), 2px 0 4px -1px rgb(0 0 0 / 20%);
  -webkit-transition: .3s ease-in;
  -o-transition: .3s ease-in;
  transition: .3s ease-in
} */

/* #toggle-nv-aside>i {
  font-weight: 500;
  -webkit-transition: .5s .1s;
  -o-transition: .5s .1s;
  transition: .5s .1s
} */

/* #nv_aside.nv-aside-close+#toggle-nv-aside {
  left: 0
} */

/* #nv_aside.nv-aside-close+#toggle-nv-aside i {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg)
} */

/* #nv_aside #location-input {
  border-radius: 5px !important;
  background: #e9f1f1
} */

/* #nv_aside .checkbox label {
  margin-right: 12px
}

#nv_aside input[type=checkbox] {
  margin: 2px 0 0 -20px
} */

#nv_aside #location .check svg {
  left: -12px;
}

#nv_aside label.check+span {
  font-weight: 600;
  margin-right: 6px;
  color: #273146;
}

#nv_aside .container-search .btn {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 5px !important;
  padding: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
}

#nv_aside .container-search .btn.btn-clear {
  background: #ebeff7;
  margin: 0;
  width: 36px;
}

#nv_aside .container-search .btn.btn-clear:active {
  left: auto;
}

#nv_aside .nav-tabs {
  display: flex;
  justify-content: center;
}

#nv_aside .nav-tabs>li.active>a,
#nv_aside .nav-tabs>li.active>a:focus,
#nv_aside .nav-tabs>li.active>a:hover {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  pointer-events: none;
}

#nv_aside .nav-tabs>li>a {
  -webkit-transition: color .3s;
  -o-transition: color .3s;
  transition: color .3s
}

#nv_aside .nav-tabs>li.active>a {
  color: var(--primary)
}

#nv_aside .nav-tabs>li {
  padding: 8px 10px 6px;
  font-size: 14px
}

#nv_aside .tab-pane {
  /* padding: 0 6px; */
  overflow-x: hidden;
  /* padding: 16px; */
  height: calc(100vh - 177px) !important;
}

.nav-tabs>li>a:hover {
  border-color: transparent;
  background: 0 0;
  color: var(--primary)
}

#nv_tab.no-location a[href="#nearest_vehicle"] {
  pointer-events: none;
  opacity: .4;
}

#nv_tab:not(.no-location) a[href="#nearest_vehicle"] {
  -webkit-animation: blink-1 0.6s 0.4s 2 both;
  animation: blink-1 0.6s 0.4s 2 both;
}

/* #nv_aside .tab-pane::-webkit-scrollbar {
  width: 10px
}

#nv_aside .tab-pane::-webkit-scrollbar-track {
  background: #f5f5f7;
}

#nv_aside .tab-pane::-webkit-scrollbar-thumb {
  background-color: #c2c2c7;
}

#nv_aside .tab-pane {
  scrollbar-width: thin;
} */

#nv_no_location.blink,
#nv_no_unit.blink {
  -webkit-animation: blink-1 .6s both;
  animation: blink-1 .6s both;
}

#nv_no_location,
#nv_no_unit,
#nv_no_location_loading,
#nv_no_unit_loading {
  display: none;
}

#nv_no_location.show,
#nv_no_unit.show,
#nv_no_location_loading.show,
#nv_no_unit_loading.show {
  display: flex !important;
  text-align: center;
  height: calc(100vh - 340px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#nv_no_location.show~div,
#nv_no_unit.show~div,
#nv_no_location_loading.show~div,
#nv_no_unit_loading.show~div {
  display: none;
}

#nv_no_location>img,
#nv_no_unit>img,
#nv_no_location_loading>img,
#nv_no_unit_loading>img {
  height: 120px;
  margin-bottom: 14px;
  transform: scale(0);
  -webkit-animation: scale-in-center .12s .1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center .12s .1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

#nv_no_location>h5,
#nv_no_unit>h5,
#nv_no_location_loading>h5,
#nv_no_unit_loading>h5 {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  transform: scale(0);
  -webkit-animation: scale-in-center .2s .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center .2s .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

#nv_no_location>p,
#nv_no_unit>p,
#nv_no_location_loading>p,
#nv_no_unit_loading>p {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  transform: scale(0);
  -webkit-animation: scale-in-center .25s .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center .25s .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  max-width: 90%;
}

#nv_no_location_loading>h5,
#nv_no_unit_loading>h5 {
  transform: scale(1);
  -webkit-animation: blink-1 .6s both infinite;
  animation: blink-1 .6s both infinite;
}

#nv_no_location_loading.show+#nv_no_location,
#nv_no_unit_loading.show+#nv_no_unit {
  display: none !important;
}

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

.nv-list ul>li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 12px;
  padding: 8px 4px;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  cursor: pointer;
  /* border-bottom: 1px solid #eee */
}

.nv-list ul>li.active,
.nv-list ul>li.active:hover {
  background: #FEE0D3;
  pointer-events: none;
}

/* .nv-list>ul>li:first-child {
  border-top: 1px solid #eee
} */

.nv-list ul>li:hover {
  background: #EBEFF7
}

/* .nv-list ul>li>i {
  width: 46px;
  text-align: center;
  font-size: 24px
} */

.nv-list ul>li>img {
  width: 24px;
  margin: 0 8px;
}

.nv-list ul>li>span {
  font-weight: 600
}

.nv-list ul>li>span>small {
  display: block;
  font-weight: 500;
  color: #4A597A;
  margin-top: 2px;
}

#nv_location_result .container-header strong {
  margin-top: 6px;
  display: block;
}

#nearest_vehicle .container-search ul>li {
  cursor: default;
}

#nearest_vehicle li {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 16px 12px 150px 12px 75px;
  grid-template-columns: 16px 150px 75px;
  grid-gap: 0 12px;
  padding: 8px 12px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 600;
  line-height: 1.1;
  font-size: 90%;
}

#nv_list_container>ul>li:active {
  cursor: ew-resize;
}

/* #nearest_vehicle .container-search ul {
  margin: 5px -8px -9px;
} */

#nv_list_header {
  padding: 10px 9px 0 0.875rem;
  position: sticky;
  top: 123px;
  background: #fff;
  z-index: 10;
}

#nv_list_header ul>li:first-child {
  border-radius: 5px 5px 0 0;
  background: var(--primary);
  color: #fff;
  font-size: 100%;
}

#nv_list_header ul>li:first-child .check svg {
  stroke: #fff;
}

/* #nearest_vehicle li .btn {
  line-height: 1;
  padding: 9px 8px 7px;
} */

/* #nv_list_container,
#nv_list_header {
  width: 500px;
  margin-left: -90px;
} */

/* #nearest_vehicle ul {
  width: 410px;
} */

#nv_list_container {
  padding: 10px 9px 0 0.875rem;
}

#nv_list_container .ic-status {
  margin: 0px 6px 0 -2px;
}

#nv_list_container .ic-status+span {
  margin-top: 2px;
}

#nv_list_header section {
  /* border-top: 1px solid #edeff3 !important; */
  margin: 0 0 10px;
}

#nv_aside .container-search section {
  position: relative;
  display: grid;
  grid-gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

#nv_aside .container-search section.location {
  grid-template-columns: 1fr 36px;
}

#nv_list .container-search section.radius {
  grid-template-columns: 1fr 72px 36px;
}

#nv_radius_unit {
  color: #4a597a;
  pointer-events: none;
  position: absolute;
  right: 62px;
  top: 9px;
}

#nv_list #nv_range_value {
  padding-right: 0;
}

/* #nearest_vehicle .container-search #nv_list_header section>span {
  display: block;
  line-height: 1.1;
} */

.slider::-webkit-slider-thumb {
  background: var(--primary) !important;
}

/* send text function */

.st-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
  width: 100%;
  height: calc(100vh - 121px);
  overflow: hidden;
  margin: 5px 0 -2px 4px;
  border-radius: 8px;
}

.st-container p {
  margin: 0;
}

.st-aside {
  width: 300px;
  border-right: 1px solid #eee;
  background: #fff;
}

.st-aside>section {
  padding: 16px 28px 16px 16px;
}

.st-aside h4 {
  margin-top: -4px;
}

.st-list {
  margin-top: 16px;
  padding-right: 4px;
  overflow: auto;
  height: calc(100vh - 326px);
}

.st-aside .select {
  margin-bottom: 8px;
}

.st-aside .select .select2-container {
  width: 100% !important;
}

.st-list>div {
  font-weight: 600;
  display: -ms-inline-grid;
  display: inline-grid;
  -ms-grid-columns: auto auto;
  grid-template-columns: auto auto;
  width: calc(100% - 16px);
  padding: 10px 8px;
  border-radius: 3px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.st-list>div:hover,
.st-list>div.active {
  background: #CFDEDB;
}

.st-list>div:first-child {
  border-top: 1px solid #eee;
}

.st-list small {
  font-size: 85%;
  font-weight: 400;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.st-list small:empty {
  display: none;
}

.st-list small img {
  opacity: .6;
}

.st-list>div>span:first-child {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.st-list>div>span:last-child {
  text-align: right;
  opacity: .6;
}

.st-list>div>span:last-child small {
  margin-left: 10px;
}

#list_vehicle::-webkit-scrollbar,
#list_message::-webkit-scrollbar {
  width: 10px;
}

#list_vehicle::-webkit-scrollbar-thumb,
#list_message::-webkit-scrollbar-thumb {
  background-color: #537c7c;
  border-radius: 2px;
}

#list_message::-webkit-scrollbar-track {
  background: #b8c9c5;
}

#list_vehicle,
#list_message {
  scrollbar-width: thin;
}

.st-chatbox.bg-chat {
  background: #CFDEDB url('../../assets/img/chat-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.st-chatbox {
  width: 100%;
  height: calc(100vh - 121px);
  background: #FFF;
  background-size: cover;
  background-repeat: no-repeat;
}

.st-header {
  min-height: 55px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  font-size: 120%;
  font-weight: 600;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  pointer-events: none;
}

.st-header:empty,
.st-header:empty~.st-input {
  display: none;
}

.st-header .fa-refresh {
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  padding: 8px;
  pointer-events: all;
}

.fa-refresh.rotate,
.btn i.rotate {
  -webkit-animation: rotate .6s linear infinite;
  animation: rotate .6s linear infinite;
}

.st-header .gtooltip {
  margin: 0 52px 0 0;
  font-size: 12px;
  font-weight: normal;
}

.st-header>i:hover+.gtooltip {
  margin-right: 46px !important;
  visibility: visible;
  opacity: 1;
}

/* .st-header>i.rotate:hover+.gtooltip {
  visibility: hidden;
  opacity: 0;
} */

.card-draggable .btn-reload:hover,
.card-draggable .btn-reload:active,
.card-draggable .btn-reload:focus {
  color: #fff;
}

.full .card-draggable .btn-reload:hover,
.full .card-draggable .btn-reload:active,
.full .card-draggable .btn-reload:focus {
  color: #4A597A;
}

.full .card-draggable .btn-reload {
  color: #4A597A;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 10px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background: #EBEFF7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 15px;
  margin-top: -1px;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.st-date {
  display: table;
  background: #fff;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 3px;
  margin: 10px auto;
  position: sticky;
  top: 10px;
  -webkit-box-shadow: 0 3px 7px rgb(0 0 0 / 10%);
  box-shadow: 0 3px 7px rgb(0 0 0 / 10%);
  background: var(--primary);
  color: #fff;
  opacity: .86;
}

.st-chatbox time {
  display: block;
  text-align: right;
  font-size: 85%;
  margin: 4px 0px -14px 0;
  opacity: .6;
}

.st-chatbox time>img {
  position: relative;
  top: -5px;
  opacity: .6;
  margin: 0 -10px -6px -2px;
}

#list_message {
  min-height: calc(100vh - 257px);
  height: calc(100vh - 238px);
  overflow-x: auto;
  margin-top: -18px;
  padding-bottom: 10px;
}

.st-header:empty~#list_message {
  background: url(../../assets/img/command-text.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 400px;
}

.st-l,
.st-r {
  padding: 10px 10px 20px;
  display: table;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 500px;
  margin: 10px;
  border-radius: 3px;
  line-height: 1.4;
  -webkit-box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
  box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}

.st-l {
  background: #fff;
}

.st-r {
  margin-left: auto;
  background: #207575;
  color: #fff;
}

.st-r time img {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.st-input {
  padding: 16px;
  background: #fff;
  border-top: 1px solid #eee;
  position: sticky;
  bottom: 0;
}

.st-input .input-group-btn {
  width: 1% !important;
}

.st-input .btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 6px 14px;
}

.st-input .btn>svg {
  margin-left: 6px;
}

.ui-resizable-e {
  width: 15px;
  right: -1px;
  background: #207575;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.ui-resizable-e:hover {
  background: #559595;
} 

.ui-resizable-e:before,
.ui-resizable-e:after {
  content: "";
  background: #CFDEDB;
  position: absolute;
  height: 40px;
  margin-top: -20px;
  width: 2px;
  border-radius: 2px;
  right: 9px;
  top: 50%;
}

.ui-resizable-e:after {
  right: 4px;
}

.ui-resizable-e:hover:before,
.ui-resizable-e:hover:after {
  background: #fff;
}

.st-toggle {
  position: fixed;
  font-size: 18px;
  z-index: 150;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  padding: 8px 9px;
  width: 32px;
  height: 32px;
  margin: 12px 8px;
  display: none;
}

.st-toggle.right {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* .ui-resizable-e:before {
  content: "";
  background: #207575;
  position: absolute;
  height: 20px;
  margin-top: -10px;
  width: 20px;
  border-radius: 10px;
  right: -5px;
  top: 50%;
  border: 7px solid #cfdedb;
  box-shadow: 1px 1px 0 rgba(32, 117, 117, .3), 1px -1px 0 rgba(32, 117, 117, .3), -1px 1px 0 rgba(32, 117, 117, .3), -1px -1px 0 rgba(32, 117, 117, .3);
  opacity: .3;
  transition: .3s;
}

.ui-resizable-e:hover:before {
  opacity: 1;
} */

@media screen and (max-width: 767px) {

  /* send text function */
  .st-container {
    display: block;
    width: calc(100% - 13px);
    margin: -10px 6px 0;
    height: calc(100vh - 193px);
  }

  .st-aside {
    position: fixed;
    z-index: 100;
    height: calc(100vh - 193px);
    border-radius: 8px;
    overflow: hidden;
    left: -330px;
    -webkit-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    transition: .2s ease-out;
  }

  .st-aside h4 {
    margin: -1px 0 0 25px;
  }

  .st-aside.open {
    left: 6px;
    -webkit-box-shadow: 0 0 7px rgb(0 0 0 / 15%);
    box-shadow: 0 0 7px rgb(0 0 0 / 15%);
  }

  .hidden-menu .st-aside.open {
    left: 231px;
  }

  .st-aside>section {
    padding: 16px 14px 16px 16px;
  }

  .st-l,
  .st-r {
    max-width: 300px;
  }

  .st-header {
    padding: 13px 18px 10px 40px;
  }

  .st-toggle {
    display: block;
  }

  .st-header:empty~#list_message {
    background-size: 310px;
  }
}

/* Map */

.map-monitoring,
.map-history,
.live-video-container {
  z-index: 0;
  height: calc(100vh - 138px);
}

#loader[style*='none']~.card-monitoring .btn-reload i {
  -webkit-animation: none !important;
  animation: none !important;
}

#loader.hide {
  opacity: 0 !important;
  pointer-events: none;
}

@media screen and (max-width: 880px) {

  .map-monitoring,
  .map-history,
  .card-monitoring.full .map-monitoring,
  .card-monitoring.full .live-video-container {
    height: calc(100vh - 212px);
  }

  .breadcrumb li:not(:last-child) {
    display: none !important;
  }

  .breadcrumb>li+li:before {
    display: none;
  }

  .gm-style-mtc>button {
    font-size: 10px !important;
    padding: 4px 6px !important;
    height: 28px !important;
  }

  .gm-style-mtc:first-child button {
    padding-left: 8px !important;
    border-radius: 2px 0 0 2px !important;
  }

  .gm-style-mtc:last-child button {
    padding-right: 8px !important;
    border-radius: 0px 2px 2px 0px !important;
  }

  .card-draggable .container-accordion {
    max-height: 190px !important;
  }

  .card-body-history {
    height: calc(100vh - 320px);
  }
}

/* History Monitoring */

.history-monitoring .account .dropdown-menu {
  left: auto !important;
}

.history-monitoring #containerChart1 .highcharts-background {
  fill: #E9FFF6;
}

/* Loader */

#loader {
  background: transparent !important;
  opacity: 1 !important;
}

.dataTables_processing {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

/* datepicker */

.drp-calendar,
.drp-buttons {
  background: #fff;
}

.daterangepicker .drp-buttons {
  padding: 4px 8px !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  height: 16px !important;
  line-height: 16px !important;
}

/* Toggle View */

#popupl-toggle-view {
  right: 12px;
  top: 0;
  background: var(--primary);
  font-size: 1rem;
  z-index: 1010;
}

#widget-grid #popupl-toggle-view {
  z-index: 1005;
}

#popupl-toggle-view.pl-open {
  background: #F0F4F8;
}

#popupl-toggle-view .pl-icon {
  right: 1px;
  color: #fff;
}

#popupl-toggle-view.pl-open .pl-icon {
  color: var(--primary);
}

#popupl-toggle-view.fuelspeed {
  background: #1E70CD;
  position: relative;
  margin: 0 49px -125px 0;
  float: right;
  font-size: inherit;
}

#popupl-toggle-view.fuelspeed.pl-open {
  background: #F0F4F8;
}

.gtooltip {
  position: absolute;
  right: 8px;
  margin: -20px 40px 0 0;
  display: table-cell;
  background-color: #000;
  color: #fff;
  border-radius: 3px;
  padding: 7px 8px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  text-align: right;
  -webkit-box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
  letter-spacing: 1px;
  line-height: 1;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}

*:hover>.gtooltip {
  visibility: visible;
  opacity: 1;
  margin-right: 36px !important;
  letter-spacing: 0;
}

*:active>.gtooltip,
*:focus>.gtooltip {
  display: none;
}

.gtooltip:after {
  color: #000;
  border-left: 5px solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -5px;
  top: 7px;
}

.card-datatable-btn .gtooltip {
  margin: -3px 46px 0 0;
}

.card-datatable-btn.up .gtooltip {
  display: none;
}

.full .gtooltip {
  margin: -2px 56px 0 0;
  font-size: 12px;
}

.full :hover>.gtooltip {
  margin-right: 44px !important;
}

@media screen and (max-width: 880px) {
  .tabs-top #popupl-toggle-view {
    right: 0;
  }
}

@media screen and (max-width: 600px) {
  .gtooltip {
    display: none;
  }
}

.modal-dialog-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: calc(100% - 10rem);
}

.modal-body-noscroll {
  overflow: hidden !important;
  height: auto !important;
}

.modal-body {
  max-width: calc(100vw - 32px);
}

/* draggable card */

.container-draggable {
  position: relative;
}

.card-draggable {
  position: absolute;
  z-index: 500;
  width: 300px;
  top: 55px;
  left: 10px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.card-monitoring.full .card-draggable {
  width: 315px;
  top: 0;
  left: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: calc(100vh - 122px);
}

.card-draggable .card-header,
.card-draggable .card-header-history {
  padding: .6rem .875rem;
  font-size: 1rem;
}

.card-draggable .card-header:hover,
.card-draggable .card-header-history:hover {
  cursor: move;
}

.card-monitoring.full .card-draggable .card-header:hover,
.card-monitoring.full .card-draggable .card-header-history:hover {
  cursor: default;
}

.card-draggable .card-body {
  padding: 0;
}

.card-draggable .container-search {
  position: relative;
}

.input-search,
.input-search:focus {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 1rem !important;
  height: calc(2.75rem + 2px) !important;
}

.input-search {
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  background-color: rgba(0, 0, 0, .05);
  margin-bottom: 8px;
}

.input-search:focus {
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.input-search+i {
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 10;
  opacity: 0;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  cursor: pointer;
}

.input-search:focus+i {
  opacity: 1;
}

.card-draggable .container-header {
  padding: 0 .875rem .5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

/* .full .card-draggable .container-search {
  margin-top: 6px;
} */

.full .card-draggable .container-header {
  padding-bottom: 8px;
}

.card-monitoring.full .card-draggable .container-header {
  border-bottom: 2px solid #edeff3;
  font-weight: 600;
}

.card-monitoring.full .card-draggable .container-header .check,
.card-monitoring.full .card-draggable .card-header .check {
  margin: 0 6px 0 -1px;
}

/* .card-monitoring.full .card-draggable .container-header span {
  letter-spacing: -.3px;
} */

/* .card-monitoring.full #cbxMarker+.check {
  margin-left: 14px;
} */

.card-monitoring.full .check {
  margin-right: 8px;
}

.card-monitoring.full .check:hover svg {
  stroke: #4A597A;
}

.card-monitoring.full .cbx:checked+.check svg {
  stroke: #4A597A;
}

.card-draggable .container-accordion {
  max-height: 284px;
  overflow-y: auto;
  font-size: 1rem;
}

.card-draggable .container-accordion::-webkit-scrollbar,
.card-body-history::-webkit-scrollbar {
  width: 10px;
}

.card-draggable .container-accordion::-webkit-scrollbar-thumb,
.card-body-history::-webkit-scrollbar-thumb {
  background-color: rgba(30, 112, 205, .5);
}

.card-draggable .container-footer {
  padding: 0.5rem .875rem;
  border-top: 1px solid rgba(0, 0, 0, .2);
}

.card-monitoring.full .card-draggable .container-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 44px;
  position: absolute;
  width: 100%;
  bottom: 0;
}

.card-monitoring.full .card-draggable .container-footer {
  border-top: 2px solid #EDEFF3 !important;
}

.card-monitoring.full .card-draggable .container-footer #reloadCounter {
  color: #4A597A;
  font-size: 12px;
  font-weight: 500;
  margin-top: -1px;
}


/* .card-draggable .list-group {
  margin-bottom: -5px;
} */

.card-draggable .btn-group {
  margin: 0 5px 0 0;
}

.card-draggable .btn-group:last-child {
  margin: 0;
}

.card-draggable .btn-group .btn {
  border-radius: 0;
}

.card-draggable .fa-minus-square,
.card-draggable .fa-plus-square,
.card-draggable .dropdown-toggle {
  cursor: pointer;
}

.full .card-draggable .fa-minus-square,
.full .card-draggable .fa-plus-square,
.full .card-draggable .dropdown-toggle {
  color: #4A597A;
  z-index: -1;
}

.card-draggable .fa-minus-square,
.card-draggable .fa-plus-square {
  /* position: relative;
  top: 4px; */
  position: absolute;
  top: -5px;
  z-index: 1000;
  padding: 16px 24px;
  right: 0px;
}

.card-draggable .collapse .fa-circle,
.card-draggable .collapsing .fa-circle {
  position: relative;
  margin-top: -14.5px;
}

.card-draggable ul {
  padding: 0;
  margin: 0;
}

/* .card-draggable .container-accordion .dropdown {
  top: -16px;
} */

.card-draggable .container-header .dropdown {
  top: 2px;
}

.card-draggable .check svg {
  position: relative;
}

/* .card-draggable .check svg {
  top: -2px;
} */

.card-draggable .container-header .check svg {
  top: 0;
  left: 1px;
}

.card-draggable .dropdown-toggle::after {
  display: none;
}

.card-draggable .container-header .dropdown-toggle {
  top: -1px;
}

/* .card-draggable .fa-ellipsis-v::before {
  display: none;
} */

.card-draggable .container-header .dropdown-menu {
  font-size: 0.9rem;
}

.card-draggable .container-accordion .dropdown-menu {
  font-size: 0.9rem;
}

.card-monitoring.full .card-draggable .container-accordion .dropdown-menu {
  margin-left: -6px;
  z-index: 2000;
}

.card-draggable .container-accordion .dropdown-item {
  padding: .3rem .6rem;
}

.container-header .dropdown-item {
  padding: .3rem .3rem .3rem 1.25rem;
}

.container-header .dropdown .check {
  width: auto;
}

.card-draggable .container-header .dropdown .check svg {
  top: -1px;
  left: -6px;
}

.card-draggable .container-accordion ul.collapse,
.card-draggable .container-accordion ul.collapse.show {
  margin-bottom: -4px;
}

.card-draggable .container-accordion ul.collapsing {
  -webkit-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  transition: .2s ease-out;
}

.card-draggable .container-accordion .collapse .list-group-item:last-child,
.card-draggable .container-accordion .collapsing .list-group-item:last-child {
  border-bottom: 0;
  padding-bottom: 12px;
}

.card-draggable .container-header .btn {
  color: #4E5155
}

.card-draggable #dataVehicles>div>ul:not([class*="collaps"])>li.list-group-item.context-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

/* .card-monitoring.full .card-draggable #dataVehicles>div>ul:not(.collapse)>li.list-group-item.context-menu {
  letter-spacing: -.3px;
} */

.card-draggable #dataVehicles>div>ul:not(.collapse)>li.list-group-item.context-menu strong {
  width: 241px;
  padding-right: 16px;
  font-weight: 600;
  color: #273146;
}

.card-draggable .list-group-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.card-draggable .list-group-item span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  position: relative;
}

.card-draggable .list-group-item .vehicle-row {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-left: 5px;
}

.full .card-draggable .list-group-item .vehicle-row span:first-child {
  line-height: 1.1;
  white-space: normal;
  padding-right: 6px;
  max-width: 130px;
  margin-top: 1px;
}

.card-draggable .list-group-item .vehicle {
  max-width: 130px;
  font-size: 90%;
  top: 2px;
  font-weight: 600;
}

.card-draggable .list-group-item .duration {
  max-width: 58px;
  font-size: 80%;
  float: right;
  margin-right: 10px;
  top: 2px;
}

.full .card-draggable .list-group-item .duration {
  max-width: 64px;
}

.card-draggable .list-group-item .vehicle,
.card-draggable .list-group-item .duration {
  display: block;
}

.full .card-draggable .list-group-item .vehicle,
.full .card-draggable .list-group-item .duration {
  font-weight: 600;
  color: #273146;
}

.full .card-draggable .list-group-item .duration {
  font-size: 9px;
}

/* if no value on monitoring meter then hide */
.card-draggable .list-group-item meter[value="NaN"],
.card-draggable .list-group-item meter[value="NaN"]+span,
.card-draggable .list-group-item meter[value=""],
.card-draggable .list-group-item meter[value=""]+span {
  display: none;
}

.card-draggable .list-group-item meter,
.popinfo meter {
  position: relative;
  height: 16px;
  width: 18px;
  margin-right: 4px;
}

.popinfo meter {
  margin-right: 0;
  width: 12px;
}

/* @-moz-document url-prefix() {
  .card-draggable .list-group-item meter {
    border: 1px solid #333;
  }
} */

.card-draggable .list-group-item meter::-webkit-meter-bar,
.popinfo meter::-webkit-meter-bar {
  border: 1px solid #273146;
  border-radius: 2px;
  padding: 1px;
}


.popinfo meter::-webkit-meter-optimum-value,
.popinfo meter::-webkit-meter-suboptimum-value,
.popinfo meter::-webkit-meter-even-less-good-value {
  background: #273146;
}

.popinfo meter::-webkit-meter-bar {
  border: 1px solid #313e33;
  background: transparent;
}

.card-draggable .list-group-item meter::-webkit-meter-suboptimum-value,
.popinfo meter::-webkit-meter-suboptimum-value {
  background: #FB8C00;
}

.card-draggable .list-group-item meter:before,
.popinfo meter:before {
  content: "";
  background: #273146;
  position: absolute;
  right: -1px;
  width: 2px;
  height: 4px;
  top: 6px;
  border-radius: 0 1px 1px 0;
}

.popinfo meter:before {
  background: #313e33;
}

.card-draggable .list-group-item meter[value="0"]::-webkit-meter-bar {
  background: #aaa;
  opacity: .4;
}

.card-draggable .list-group-item meter[value="0"]:before {
  background: #aaa;
}

.card-draggable .list-group-item meter+span {
  font-size: 80%;
  font-weight: 600;
}

.card-draggable .list-group-item meter+span {
  font-size: 80%;
}

.card-draggable .list-group-item .battery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.full .card-draggable .list-group-item .battery {
  margin: 1px 0 -2px;
}

#dataVehicles_tab {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 7px 10px 6px;
  border: none;
}

#dataVehicles_tab.nav-tabs>li {
  width: 33.333%;
  text-align: center;
}

#dataVehicles_tab.nav-tabs>li>a {
  background: #EBEFF7;
  color: #4A597A;
  font-weight: 600 !important;
  padding: 8px 0;
  margin: 0;
  font-size: 12px;
}

#dataVehicles_tab.nav-tabs>li:first-child>a {
  border-radius: 5px 0 0 5px;
}

#dataVehicles_tab.nav-tabs>li:last-child>a {
  border-radius: 0 5px 5px 0;
}

#dataVehicles_tab.nav-tabs>li.active>a,
#dataVehicles_tab.nav-tabs>li.active>a:hover,
#dataVehicles_tab.nav-tabs>li.active>a:focus {
  box-shadow: none;
  border: none;
  background: var(--primary);
  color: #fff;
}

.card-monitoring.full .select2-container--default .select2-selection--single {
  background-color: #EBEFF7;
  font-weight: 500;
  height: 36px !important;
  /* border-radius: 5px; */
  border-radius: 5px 0 0 5px;
}

.card-monitoring.full .select2-container .select2-selection--single .select2-selection__rendered {
  padding-top: 4px;
}

.card-monitoring.full .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}

.card-monitoring.full .cbx~span {
  font-size: 12px;
}

.card-monitoring.full .card-header .cbx~span,
.card-monitoring.full .container-header .cbx~span {
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
  color: #273146;
}

.card-monitoring.full .card-header .cbx~span:first-of-type,
.card-monitoring.full .container-header .cbx~span:first-of-type {
  width: 134px;
}

.card-monitoring.full .select2+.btn {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0 5px 5px 0 !important;
  padding: 9px;
  font-size: 12px;
  font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  background: #EBEFF7;
}

.card-monitoring.full select#fleetGroups {
  height: 36px;
  border: none;
  background: linear-gradient(110deg, #ebeff7 8%, #f0f5fe 18%, #ebeff7 33%);
  background-size: 200% 100%;
  animation: 1s shine linear infinite;
  border-radius: 5px 0 0 5px;
  appearance: none;
  pointer-events: none;
}

/* tambahan */

.hide {
  display: none;
}

.ic-status {
  padding: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 2px -2px -5px;
}

.ic-status>i {
  font-size: 80%;
  color: #fff;
}

.ic-status.bg-warning>i {
  color: inherit;
}

.popinfo {
  font-family: Inter;
  width: 280px;
  height: 226px;
  /* height: 158px; */
  background-color: rgba(255, 255, 255, .6);
  backdrop-filter: blur(10px);
  /* -webkit-box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
  box-shadow: 0 4px 10px rgb(0 0 0 / 10%); */
  z-index: 9999999;
  position: relative;
  border-radius: 10px;
  left: -140px;
  -webkit-transform: translateY(-260px);
  -ms-transform: translateY(-260px);
  transform: translateY(-260px);
}

.popinfo_v5 {
  width: 380px;
  height: 210px;
  left: -175px;
  -webkit-transform: translateY(-240px);
  -ms-transform: translateY(-240px);
  transform: translateY(-240px);
}

.popinfo>.list-group>.list-group-item:first-child {
  padding-top: 7px;
  padding-bottom: 7px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  color: #313E33;
  border: none;
}

.popinfo_v5 p {
  margin: 0;
}

.popinfo_v5>.list-group>.list-group-item:first-child {
  font-weight: 600;
}

.popinfo_v5>.list-group>.list-group-item:first-child>div>div>p {
  white-space: nowrap;
}

.popinfo_v5>.list-group>.list-group-item:first-child>div>div>p:first-child {
  display: flex;
  align-items: center;
}

.popinfo_v5>.list-group>.list-group-item:first-child>div>div>p:last-child {
  transform: scale(.95);
  transform-origin: left;
}

.popinfo_v5>.list-group>.list-group-item:first-child>div>div>p:first-child>span {
  font-size: 15px;
}

.popinfo_v5>.list-group>.list-group-item:first-child>div>div>p:first-child>span:first-child {
  max-width: 216px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.popinfo .list-group-item:first-child>div>p:first-child {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.popinfo .list-group-item:first-child>div>p:nth-child(2) {
  position: absolute;
  right: 40px;
}

.popinfo_v5 .list-group-item:first-child>div>div>p>span>i {
  font-size: 11px;
}

.popinfo_v5 .list-group-item:first-child>div>div>p>span:nth-child(even) {
  opacity: .5;
  font-weight: 300;
}

.popinfo_v5 .list-group-item:first-child>div>div>p:first-child>span:nth-child(even) {
  margin: 0 4px;
}


/* .popinfo .list-group-item:first-child>div>p:nth-child(2) {
  position: absolute;
  right: 40px;
} */

.popinfo .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.popinfo .list-group-item-action {
  color: #333;
}

.popinfo .popinfo-body {
  height: 160px;
  overflow-x: auto;
}

.popinfo_v5 .popinfo-body {
  height: 130px;
  display: grid;
  grid-template-columns: 1fr 96px 96px;
  grid-template-rows: 48px 48px;
  padding-top: 10px;
}

.popinfo_v5 .popinfo-body .list-group-item {
  border: none;
}

.popinfo_v5 .popinfo-body .list-group-item>div>small:first-child {
  font-size: 11.5px;
  font-weight: 400;
  margin-bottom: -2px;
}

.popinfo .popinfo-body .list-group-item>div>small:nth-child(2) {
  font-size: 12.5px;
  white-space: nowrap;
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popinfo_v5 .popinfo-body .list-group-item small>a {
  background: #DCE3EB;
  font-size: 9px;
  padding: 2px 4px;
  color: inherit;
  border-radius: 3px;
  transition: .15s;
}

.popinfo_v5 .popinfo-body .list-group-item small>a:hover {
  background: rgba(220, 227, 235, 0.8);
}

.popinfo_v5 .popinfo-body .list-group-item-action:hover,
.popinfo_v5 .popinfo-body .list-group-item-action:focus {
  background: transparent;
}

.popinfo .popinfo-body::-webkit-scrollbar {
  width: 10px;
}

.popinfo .popinfo-body::-webkit-scrollbar-thumb {
  background-color: rgba(252, 90, 92, 0.5);
}

.popinfo::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -20px;
  left: 122px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, .8) transparent;
  backdrop-filter: blur(10px);
  display: block;
  width: 0;
}

.popinfo_v5::after {
  left: 157.5px;
}

.popinfo-close {
  cursor: pointer;
  font-size: 18px !important;
  font-weight: bold;
  width: 16px;
  height: 16px;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px;
  position: relative;
  bottom: -3px;
  -webkit-transition: .15s;
  -o-transition: .15s;
  transition: .15s;
}

.popinfo_v5 .popinfo-close {
  width: 20px;
  height: 20px;
  background: rgba(51, 57, 63, .2);
  position: absolute;
  right: 6px;
  top: 6px;
}

.popinfo-close:hover {
  background: rgba(0, 0, 0, .1);
}

.text-orange {
  color: darkorange !important;
}

.popinfo .list-group-item {
  font-size: 1rem;
  padding-top: 3px;
  padding-bottom: 3px;
  /* padding-top: 2px;
  padding-bottom: 2px; */
  font-weight: bold;
}

.popinfo .list-group-item small {
  font-weight: 600;
  font-size: 12px;
}

.popinfo .list-group-item>div>small:first-child {
  color: #4C4C4F;
}

.popinfo .list-group-item>div>small:last-child {
  color: #1F1F23;
}

.popinfo .list-group-item-action:hover,
.popinfo .list-group-item-action:focus {
  color: #333;
}

.popinfo span {
  font-size: 13px;
}

.popinfo_v5 span {
  font-size: 12.5px;
}

.popinfo-footer .list-group-item {
  border-radius: 0 0 10px 10px;
}

/* .popinfo_v5 .fa-location-arrow.ne {
  transform: rotate(0);
} */

.popinfo_v5 .fa-location-arrow {
  position: relative;
  font-size: 11px;
}

.popinfo_v5 .fa-location-arrow.e {
  transform: rotate(45deg);
}

.popinfo_v5 .fa-location-arrow.se {
  transform: rotate(90deg);
}

.popinfo_v5 .fa-location-arrow.s {
  transform: rotate(135deg);
  top: -1px;
}

.popinfo_v5 .fa-location-arrow.sw {
  transform: rotate(180deg);
}

.popinfo_v5 .fa-location-arrow.w {
  transform: rotate(225deg);
  left: 3px;
}

.popinfo_v5 .fa-location-arrow.nw {
  transform: rotate(270deg);
}

.popinfo_v5 .fa-location-arrow.n {
  transform: rotate(315deg);
  bottom: -1px;
}

.popinfo-footer {
  position: absolute;
  bottom: 0;
  /* background: #fff; */
  width: 100%;
  border-radius: 0 0 10px 10px;
}

.popinfo_v5 .popinfo-footer {
  padding-bottom: 3px;
}

.popinfo-footer .list-group-item:last-child {
  border-radius: 0 0 10px 10px;
  padding: 6px 10px !important;
  border: none;
}

.popinfo-footer .icon-btn {
  width: calc(1.5rem + 2px) !important;
  padding: 0;
  line-height: 1.5rem;
  margin: 0 8px;
}

.popinfo-footer .icon-btn i {
  font-size: 15px;
}

/* .popinfo-footer .btn-outline-secondary:hover,
.popinfo-footer .btn-outline-secondary:active {
  background: transparent;
  color: #333;
} */

.popinfo .btn-outline-secondary {
  color: #4C4C4F !important;
  line-height: 1 !important;
  height: 32px;
  padding: 0px 1px;
  margin: 0 1px;
}

.popinfo_v5 .btn-outline-secondary {
  width: 32px !important;
  margin: 0 4px;
  background: #DCE3EB;
  border-radius: 16px;
  transform: scale(.9);
}

.popinfo .btn-outline-secondary:hover {
  color: #1F1F23;
  background: rgba(220, 227, 235, 0.8);
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* popinfo video */
.popinfo.popinfo_v5.video {
  height: 350px;
}

.popinfo_v5.video .popinfo-body {
  display: block;
  height: auto;
}

.popinfo_v5.video video {
  border-radius: 4px;
}

.popinfo_v5.video .list-group-item>div small {
  font-weight: 500;
}

.popinfo_v5.video .list-group-item>div small:first-child {
  font-size: 11.5px;
  font-weight: 400;
  margin-bottom: -2px;
}

.popinfo_v5.video .list-group-item>div small:last-child {
  line-height: 1.2;
  margin-top: 2px;
  white-space: normal;
}

.popinfo_v5.video .no-video {
  background: #262626;
  color: #B8B7B7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  height: 186px;
}

.popinfo_v5.video .no-video i {
  font-size: 36px;
  margin-bottom: 8px;
  -webkit-animation: blink-1 0.6s 0.4s 2 both;
  animation: blink-1 0.6s 0.4s 2 both;
}

.popinfo_v5.video .no-video p {
  font-size: 14px;
  font-weight: 500;
}

@media screen and (max-width: 400px) {
  .popinfo_v5 {
    transform: scale(.9) translateY(-252px);
  }

  .popinfo_v5::after {
    left: 155.5px;
    bottom: -19px;
  }
}

.popinfo_v5 small#DurationContainerTooltip.loading a {
  display: none;
}

.popinfo_v5 small#DurationContainerTooltip.loading:before {
  content: "Loading...";
  animation: blink-1 0.6s 0.4s infinite both;
  background: #dce3eb;
  font-size: 9px;
  padding: 2px 4px;
  color: inherit;
  border-radius: 3px;
  transition: .15s;
}

.popinfo.popinfo-alert-video {
  width: 380px;
  height: 300px;
}

.popinfo.popinfo-alert-video .popinfo-body {
  height: 230px;
  overflow-x: auto;
}

/* .popinfo .popinfo-body .list-group-item>div>small:nth-child(2) {
  max-width: none;
} */

.popinfo .popinfo-body .list-group-item {
  border: none;
  margin-top: 3px;
}

.leaflet-tooltip {
  background-color: transparent!important;
  box-shadow: none!important;
  border: none !important;
}

.leaflet-tooltip-bottom, .leaflet-tooltip-center, .leaflet-tooltip-right, .leaflet-tooltip-left {
  background-color: #fff !important;
}

.leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before {
  z-index: 10;
  /* backdrop-filter: blur(10px); */
  display: none;
}

.leaflet-tooltip-bottom:before {
    border-bottom-color: rgba(255, 255, 255, .8)!important;
}

.leaflet-tooltip-top:before {
    border-top-color: rgba(255, 255, 255, .8)!important;
}

.bg-orange {
  background-color: darkorange !important;
}

section.tabs-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

ul#tabs {
  padding: 0;
  margin: 10px;
}

ul#tabs-sub {
  padding: 10px 18px;
  margin: -12px 0 -40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  height: 94px;
}

ul#tabs>li,
ul#tabs-sub>li {
  list-style: none;
  display: inline-block;
  position: relative;
}

ul#tabs>li>span,
ul#tabs-sub>li>span.notify {
  position: absolute;
  top: -8px;
  right: 0;
  background: #2196f3;
  color: #fff;
  padding: 4px;
  min-width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #fff;
}

ul#tabs-sub>li>span {
  right: 8px;
}

ul#tabs>li>span:empty,
ul#tabs-sub>li>span:empty {
  display: none;
}

ul#tabs>li>a,
ul#tabs-sub>li>a {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid #FA6423;
  width: 42px;
  height: 42px;
  margin-right: 8px;
  background: #FA6423;
  color: #fff;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

ul#tabs-sub>li>a {
  width: 36px;
  height: 36px;
  margin-left: 20px;
  margin-right: 16px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul#tabs-sub>li:first-child>a {
  margin-left: 0px !important;
}

ul#tabs>li>a.inactive,
ul#tabs-sub>li>a.inactive {
  border: 1px solid #ccc;
  background: #fff;
  color: #ccc;
}

ul#tabs>li>a.inactive+span,
ul#tabs-sub>li>a.inactive+span {
  background: #64b5f6;
}

ul#tabs>li>a>i {
  font-size: 24px;
}

ul#tabs-sub>li>a>i {
  font-size: 18px;
}

ul#tabs-sub>li>a>i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.tab-container,
.tab-sub-container {
  padding: 10px;
}

section.stats {
  margin-left: 16px;
}

section.stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 0;
}

section.stats>div {
  margin-right: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

section.stats>div>div:first-child {
  font-size: 200%;
  font-weight: bold;
}

section.stats>div>div:last-child {
  font-size: 120%;
}

.toolbar {
  width: 100%;
  height: 36px;
  position: absolute;
  bottom: 0;
  background: #2F3337;
  padding: 6px 20px;
  color: rgba(255, 255, 255, .6);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.toolbar section {
  position: relative;
}

.toolbar .icon-btn {
  width: calc(1.5rem + 2px) !important;
  padding: 0;
  line-height: 1.5rem;
  border-radius: 50%;
  margin: 0 4px;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 4px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  -webkit-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
  margin: 0 4px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FC5A5C;
  cursor: pointer;
}

.search-address {
  width: 160px;
  padding-right: 20px;
}

/* chevron icon search*/

.search-address+i {
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 7px;
  color: #FC5A5C;
}

/* add shadow to sidenav */

.layout-sidenav {
  -webkit-box-shadow: 1px 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.3);
}

.bg-devicestatus0 {
  background-color: #00c100 !important;
}

.bg-devicestatus1 {
  background-color: #ff0000 !important;
}

.bg-devicestatus2 {
  background-color: #fee500 !important;
  color: #333 !important;
}

.bg-devicestatus2>i {
  color: #333;
}

.bg-devicestatus3 {
  background-color: #dcdcdc !important;
  color: #333 !important;
}

.bg-devicestatus3>i {
  color: #333;
}

.bg-devicestatus4 {
  background-color: #555555 !important;
}

.bg-devicestatus5 {
  background-color: #0063ff !important;
}

.vehicle-icon {
  width: 16px;
  -webkit-filter: invert(1);
  filter: invert(1);
}

.bg-devicestatus2>.vehicle-icon,
.bg-devicestatus3>.vehicle-icon {
  -webkit-filter: invert(.1);
  filter: invert(.1);
}

.bg-acc-off {
  background-color: #aaaaaa !important;
}

.bg-speed-S1,
.bg-speed-S1:hover {
  background-color: #71e600 !important;
  color: white;
}

.bg-speed-1,
.bg-speed-1:hover {
  background-color: #71e600 !important;
  color: white;
}

.bg-speed-S2,
.bg-speed-S2:hover {
  background-color: #00c200 !important;
  color: white;
}

.bg-speed-2,
.bg-speed-2:hover {
  background-color: #00c200 !important;
  color: white;
}

.bg-speed-S3,
.bg-speed-S3:hover {
  background-color: #ff7e00 !important;
  color: white;
}

.bg-speed-3,
.bg-speed-3:hover {
  background-color: #ff7e00 !important;
  color: white;
}

.bg-speed-S4,
.bg-speed-S4:hover {
  background-color: #ff0000 !important;
  color: white;
}

.bg-speed-4,
.bg-speed-4:hover {
  background-color: #ff0000 !important;
  color: white;
}

.bg-speed-idle,
.bg-speed-idle:hover {
  background-color: #ffe600 !important;
  color: white;
}

.bg-speed-stop,
.bg-speed-stop:hover {
  background-color: #dddddd !important;
  color: black;
}

/* .input-group-addon, .input-group-btn {
  width: auto!important; 
}*/

#formShare .form-control:focus,
.custom-select:focus {
  border-bottom-width: 1px;
}

#divTooltipMapForOtotraceMap {
  display: block;
}

.smart-form#popupl-polyline .toggle i {
  background: #fff;
}

ul#tabs>li>span,
ul#tabs-sub>li>span.info {
  position: absolute;
  width: 52px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  background-color: transparent !important;
  line-height: 1.1;
}

.tab-sub-container {
  /* margin-top: 60px; */
  margin-top: 34px;
  padding: 0px !important;
}

a.btnShowMap {
  color: #fff !important;
}

.btn-outline-default {
  color: rgba(24, 28, 33, 1.0) !important;
}

@media screen and (max-width: 880px) {
  .tab-sub-container {
    margin: 60px -24px 0;
    text-align: center;
  }

  .tab-sub-container header {
    text-align: left;
  }

  section.stats>div>div:first-child {
    font-size: 150%;
  }

  section.stats>div>div:last-child {
    font-size: 100%;
  }
}

@media screen and (max-width: 380px) {
  .history-monitoring .breadcrumb li:last-child {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 22vw;
    overflow: hidden;
  }
}

.btn-sm {
  font-size: .75rem;
}

.btn-sm,
.btn-group-sm>.btn {
  padding: .188rem .6875rem;
}

.dataTables_scroll .dataTables_scrollHeadInner {
  margin-top: 0;
}

div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0 !important;
}

.modal .smart-form {
  padding: 0 4px;
}

.modal .smart-form footer {
  border-radius: 0 0 10px 10px;
}

.modal .smart-form .toggle {
  font-size: inherit;
}

#modalLoadingInfo {
  border-radius: 10px;
}

#DataGrid1_filter .input-group-addon {
  border-radius: 5px 0 0 5px !important;
}

/* .modal-backdrop {
  z-index: 1050;
} */

#shareFieldset .input-group-addon {
  width: auto;
}

/* switch */
.smart-form .checkbox input:checked+i,
.smart-form .radio input:checked+i,
.smart-form .toggle input:checked+i {
  border-color: #fc5a5c;
}

.smart-form .toggle input+i:before {
  background-color: #999;
}

.smart-form .toggle input:checked+i:before {
  background-color: #fc5a5c;
}

.smart-form .checkbox:hover i,
.smart-form .input:hover input,
.smart-form .radio:hover i,
.smart-form .select:hover select,
.smart-form .textarea:hover textarea,
.smart-form .toggle:hover i {
  border-color: #fc5a5c;
}

.smart-form .radio input:focus+i,
.smart-form .select select:focus,
.smart-form .textarea textarea:focus,
.smart-form .toggle input:focus+i {
  border-color: #fc5a5c;
}


/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

#wikiModal {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .6);
  display: none;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

#wikiModal.in {
  display: block;
}

#wikiModal .modal-content {
  width: 100%;
  padding: 30px;
}

#wikiModal .wiki-input {
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  -webkit-transition: .15s;
  -o-transition: .15s;
  transition: .15s;
}

#wikiModal .wiki-input.strong {
  font-weight: 700;
  color: var(--primary);
}

#wikiModal .modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

#wikiModal .modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  border: none;
}

#wikiModal .modal-footer button {
  width: 100px !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  height: 31px !important;
  border-radius: 5px !important;
}

#wikiModal .modal-footer .btn-wiki {
  background: var(--primary) !important;
}

#wikiModal .modal-footer .btn-wiki:focus {
  border: none;
}

#wikiModal .modal-footer .btn-wiki-close,
#wikiModal .modal-footer .btn-wiki-close:hover {
  background: #EEE8E5 !important;
  color: var(--primary) !important;
}

#wikiModal h5 {
  margin-top: 0;
  letter-spacing: -.3px;
  font-size: 19px;
  font-weight: 700;
}

#wikiModal p {
  margin: 0 0 26px;
  letter-spacing: -.3px;
  font-weight: 500;
  font-size: 14px;

}

#wikiModal .row {
  margin-left: -8px;
  margin-right: -8px;
}

#wikiModal .input-group-addon {
  cursor: pointer;
  width: auto;
}

#wikiModal .help-block span {
  color: #468847;
  -webkit-animation: blink-1 0.6s both;
  animation: blink-1 0.6s both;
}

#wikiModal .help-block {
  font-size: 12px !important;
  height: 17px;
}

#wikiModal .modal-footer {
  padding-top: 0;
}

@media screen and (max-width: 767px) {

  /* #wikiModal .row .col-sm-6:last-child {
    margin-top: 16px;
  } */
  #wikiModal .modal-content {
    width: 100%;
    padding: 10px;
  }
}

/* dashboard */

.dashboard .text-content {
  font-size: 26px;
}

.dashboard .text-content-small {
  line-height: 1;
  margin: -6px 0;
  font-size: 13px;
}

.dashboard .text-content-tiny {
  line-height: 1;
  margin: -6px 0 -8px;
  font-size: 11px;
}

.dashboard .container-content {
  margin-bottom: 12px;
}

.dashboard .text-content.small {
  line-height: 1;
  font-size: 26px;
  margin: -10px 0 2px -4px;
}

.dashboard .card-body.d-flex {
  min-height: 72px;
  grid-gap: 6px;
}

.fa,
.fab,
.fal,
.far,
.fas {
  user-select: none;
}

@media screen and (max-width: 1199px) {
  .dashboard .text-content.small {
    margin: -8px 0 2px 0;
  }

  .dashboard .text-content-tiny {
    margin: -4px 0 -4px 6px;
    font-size: 13px;
  }
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

/* select 2 modal */

.modal .modal-lg .col-sm-12 .select2-container .select2-selection--single .select2-selection__rendered {
  max-width: 797px !important;
}

.modal .col-sm-12 .select2-container .select2-selection--single .select2-selection__rendered {
  max-width: 534px !important;
}

.modal .modal-lg .col-sm-6 .select2-container .select2-selection--single .select2-selection__rendered {
  max-width: 380px !important;
}

.modal .col-sm-6 .select2-container .select2-selection--single .select2-selection__rendered {
  max-width: 500px !important;
}

@media screen and (max-width: 991px) {

  .modal .modal-lg .col-sm-12 .select2-container .select2-selection--single .select2-selection__rendered,
  .modal .col-sm-12 .select2-container .select2-selection--single .select2-selection__rendered,
  .modal .modal-lg .col-sm-6 .select2-container .select2-selection--single .select2-selection__rendered,
  .modal .col-sm-6 .select2-container .select2-selection--single .select2-selection__rendered {
    max-width: 534px !important;
  }
}

@media screen and (max-width: 767px) {

  .modal .modal-lg .col-sm-12 .select2-container .select2-selection--single .select2-selection__rendered,
  .modal .col-sm-12 .select2-container .select2-selection--single .select2-selection__rendered,
  .modal .modal-lg .col-sm-6 .select2-container .select2-selection--single .select2-selection__rendered,
  .modal .col-sm-6 .select2-container .select2-selection--single .select2-selection__rendered {
    max-width: calc(100vw - 86px) !important;
  }
}

/* select 2 modal */

/* #fleet_group_id_form1+.select2-container--default .select2-selection--single .select2-selection__rendered {
  max-width: 30vw;
}

.col-sm-4 #fleet_group_id_form1+.select2-container--default .select2-selection--single .select2-selection__rendered {
  max-width: 24vw;
}

@media screen and (max-width: 880px) {
  #fleet_group_id_form1+.select2-container--default .select2-selection--single .select2-selection__rendered {
    max-width: 35vw;
  }
}

.modal #fleet_group_id_form1+.select2-container--default .select2-selection--single .select2-selection__rendered {
  width: 240px;
}

.modal.device #fleet_group_id_form1+.select2-container--default .select2-selection--single .select2-selection__rendered {
  width: 800px;
  max-width: 800px;
} */

/* @media screen and (max-width: 991px) {
  .modal #fleet_group_id_form1+.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 150px;
  }

  .modal.device #fleet_group_id_form1+.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 500px;
    max-width: 500px;
  }
}

@media screen and (max-width: 767px) {
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    max-width: 80vw;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 74vw;
  }
} */

/* select2 .col-sm-6 */
.col-sm-6 .select2-container--default .select2-selection--single .select2-selection__rendered {
  max-width: calc(50vw - 180px);
}

.minified .col-sm-6 .select2-container--default .select2-selection--single .select2-selection__rendered {
  max-width: calc(50vw - 90px);
}

/* select2 .col-sm-5 */
.col-sm-5 .select2-container--default .select2-selection--single .select2-selection__rendered {
  max-width: calc(50vw - 260px);
}

.minified .col-sm-5 .select2-container--default .select2-selection--single .select2-selection__rendered {
  max-width: calc(50vw - 174px);
}

/* select2 .col-sm-4 */

.col-sm-4 .select2-container--default .select2-selection--single .select2-selection__rendered {
  max-width: calc(33vw - 132px);
}

.minified .col-sm-4 .select2-container--default .select2-selection--single .select2-selection__rendered {
  max-width: calc(33vw - 70px);
}

@media screen and (max-width: 767px) {

  .col-sm-4 .select2-container--default .select2-selection--single .select2-selection__rendered,
  .col-sm-5 .select2-container--default .select2-selection--single .select2-selection__rendered,
  .col-sm-6 .select2-container--default .select2-selection--single .select2-selection__rendered,
  .minified .col-sm-4 .select2-container--default .select2-selection--single .select2-selection__rendered,
  .minified .col-sm-5 .select2-container--default .select2-selection--single .select2-selection__rendered,
  .minified .col-sm-6 .select2-container--default .select2-selection--single .select2-selection__rendered {
    max-width: calc(100vw - 67px);
  }
}


/* alert */

.gtrack-alert {
  position: relative;
  z-index: 100;
  background: #ECECEC;
  padding: 16px;
  height: 100vh;
  user-select: none;
}

.gtrack-alert header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}


.gtrack-alert header h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 3px;
  letter-spacing: 0;
}

.gtrack-alert header p {
  font-size: 14px;
  margin: 0 !important;
}

.gtrack-alert header svg {
  background: #fff;
  padding: 3px;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 6px;
}

.gtrack-alert .panel-group .panel {
  border-radius: 10px;
  padding: 0 16px;
}

.gtrack-alert .panel-default>.panel-heading {
  background-color: #fff;
  padding: 10px 0;
  border-color: #eee !important;
  user-select: none;
}

.gtrack-alert .panel-title {
  font-weight: 600;
}

.gtrack-alert .panel-title>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
}

.gtrack-alert .panel-title>a>i {
  transition: .15s;
}

.gtrack-alert .panel-title>a:not(.collapsed)>i {
  transform: rotateX(180deg);
}

.gtrack-alert .panel-body {
  max-height: 310px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 10px 0;
}

.gtrack-alert .panel-body::-webkit-scrollbar {
  width: 5px;
}

.gtrack-alert .panel-body::-webkit-scrollbar-track {
  background: #fff;
}

.gtrack-alert .panel-body::-webkit-scrollbar-thumb {
  background-color: #ECECEC;
  border-radius: 1px;
  border: none;
}

.gtrack-alert .panel-group h5 {
  font-weight: 500;
  margin: 0 0 10px;
  font-size: 14px;
}

.gtrack-alert .panel-group ol {
  padding: 0;
  border-bottom: 1px solid #eee;
}

.gtrack-alert .panel-group ol:last-child {
  border-bottom: none;
}

.gtrack-alert .panel-group li {
  display: grid;
  grid-template-columns: 28px 1fr 92px;
  margin-bottom: 10px;
}

.gtrack-alert .panel-group li a {
  color: var(--primary);
  margin: auto 0 auto auto;
}

.gtrack-alert .panel-group li a {
  text-decoration: none;
}

.gtrack-alert .panel-group ol li {
  counter-increment: muffins;
  font-weight: 500;
}

.gtrack-alert .panel-group ol li:before {
  content: counter(muffins) ". ";
}

.gtrack-alert .panel-group ol {
  list-style: none;
  counter-reset: muffins;
}

.gtrack-alert a.view-all {
  display: block;
  text-align: center;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.gtrack-alert #accordion,
.gtrack-alert #cardlist {
  height: calc(100vh - 186px);
  overflow-y: scroll;
  padding-right: 16px;
}

.gtrack-alert .tab-content {
  padding: 16px 0 0;
}

.gtrack-alert #cardlist .panel {
  padding: 10px 16px;
}

.gtrack-alert #cardlist .panel>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}

.gtrack-alert #cardlist .panel>div:first-child {
  margin-bottom: 4px;
}

.gtrack-alert #cardlist .panel>div a {
  color: var(--primary);
  text-decoration: none;
}

.gtrack-alert .nav-tabs {
  border: none;
  display: flex;
}

.gtrack-alert .nav-tabs>li {
  flex-basis: 50%;
  text-align: center;
}

.gtrack-alert .nav-tabs>li>a {
  background: #fff;
  width: 100%;
  transition: .15s;
}

.gtrack-alert .nav-tabs>li:first-child>a {
  border-radius: 5px 0 0 5px;
}

.gtrack-alert .nav-tabs>li:last-child>a {
  border-radius: 0 5px 5px 0;
}

.gtrack-alert .nav-tabs>li.active>a {
  color: #fff;
  background: var(--primary);
  border: none;
  box-shadow: none;
}

/* map view */
.mapview {
  display: grid;
  grid-template-columns: 600px 1fr;
  grid-gap: 16px;
}

.mapview>div:last-child {
  border: 1px solid #E8EAED;
  padding: 6px;
  border-radius: 5px;
  max-height: 400px;
  overflow-y: auto;
}

.mapview table td {
  padding: 6px;
}

.mapview-footer {
  display: flex;
}

.mapview-footer button:first-child {
  margin-right: 16px;
  width: 150px;
}

.mapview-menu {
  top: auto;
  bottom: 0;
  margin: 0 0 60px 20px;
  padding: 0 16px;
  border-radius: 5px;
  border: none;
}

.mapview-menu li {
  margin: 16px 0;
  font-size: 12px;
}

.mapview-menu li label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.mapview-menu li label input[type="checkbox"] {
  margin: 0 6px 0 0;
  transform: scale(1.2);
  cursor: pointer;
}

.mapview-footer .dropdown-toggle::after {
  transform: rotate(225deg) translateY(-24px) translateY(18px);
  margin-left: 10px;
}

@media screen and (max-width: 992px) {
  .mapview {
    grid-template-columns: auto;
  }
}

/* map button container */

.map-button-container {
  border-radius: 50px;
  background-color: #FFF;
  padding: 5px 5px;
  position: absolute;
  top: 10px !important;
  left: auto !important;
  right: 60px;
  display: flex;
  align-items: center;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 15%);
}

.map-button-container .custom-map-control-button {
  font-family: Inter, sans-serif;
  border-radius: 50px;
  font-size: 13px;
  border: none;
  padding: 5px 10px;
  margin: 0 4px;
  background-color: #FFF;
}

.map-button-container .custom-map-control-button:hover {
  background-color: var(--primary);
  color: white;
}

.map-button-container button.active_map {
  background-color: var(--primary);
  color: white;
}

.map-button-container .btn-cancel-geofence {
  background: #B4BAC2;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
}

@media screen and (max-width: 1080px) {
  .map-button-container {
    top: 56px !important;
    left: 10px !important;
    right: auto;
  }

  .map-button-container .custom-map-control-button {
    font-size: 11px;
  }

  .banner img {
    display: none;
  }
}

.gtrack-tabs>li {
  font-weight: 500;
  cursor: pointer;
}

.gtrack-tabs>li.active>a {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-bottom: 2px solid #207575 !important;
}

.gt-ajax-dropdown .gtrack-tabs>li.active>a,
.gt-ajax-dropdown .gtrack-tabs>li.active>a,
.gt-ajax-dropdown .gtrack-tabs>li.active>a:focus,
.gt-ajax-dropdown .gtrack-tabs>li.active>a:hover {
  pointer-events: none;
  color: var(--primary);
  background-color: #FFF1EB;
  border: none;
  border-bottom-color: transparent;
  cursor: default;
}

.gt-ajax-dropdown .gtrack-tabs li>a.active,
.gt-ajax-dropdown .gtrack-tabs li>a.active,
.gt-ajax-dropdown .gtrack-tabs>li>a.active:focus,
.gt-ajax-dropdown .gtrack-tabs>li>a.active:hover {
  color: var(--primary);
  border: 0;
  border-bottom: 2px solid var(--primary);
  cursor: default;
  font-weight: 700;
  background: transparent;
}

.gtrack-tabs>li>a {
  border-radius: 8px 8px 0 0;
  padding: 10px 20px;
}

.gtrack-tabs.notifications>li>a {
  padding: 10px 4px;
}

.nav.nav-tabs.gtrack-tabs.notifications li a {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.gt-ajax-dropdown .tab-pane.active {
  opacity: 1;
}

.gtrack-sfg-row {
  margin: 16px 0;
}

.gtrack-sfg-row>div {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 100px 70px;
}

.gtrack-sfg-row>div>div {
  display: flex;
  align-items: center;
}

.gtrack-sfg-row p {
  margin: 0 0 4px;
  font-weight: 500;
}

.gtrack-sfg-row .check {
  position: relative;
  margin-right: 16px;
  left: 10px;
}

.gtrack-select {
  width: fit-content;
  border-radius: 5px !important;
  font-weight: 500;
}

.gtrack-select.exceldg {
  color: #358E62;
  position: relative;
  margin: 0 0 -38px 16px;
  z-index: 10;
  border: 2px solid #358E62 !important;
  padding: 4px 6px;
}

.gtrack-select.exceldg optgroup {
  color: #333;
}

@media screen and (max-width: 1200px) {
  .gtrack-select.exceldg {
    color: #358E62;
    position: relative;
    margin: -2px 0 16px 0;
  }
}

#datagrid_actionButton_DataGrid1 {
  max-width: 30vw;
  margin-bottom: 3px;
}

#datagrid_actionButton_DataGrid1 button {
  margin-bottom: 3px;
}

#DataGrid1_length {
  z-index: 100;
  position: relative;
}

@media screen and (max-width: 880px) {
  #datagrid_actionButton_DataGrid1 {
    max-width: none;
  }
}

@-webkit-keyframes shine {
  to {
    background-position-x: -200%;
  }
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}

#loading_vl {
  height: calc(100vh - 382px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#loading_vl img {
  display: block;
  margin-top: -30px;
  height: 120px;
  transform: scale(0);
  -webkit-animation: scale-in-center .12s 1s cubic-bezier(.25, .46, .45, .94) both;
  animation: scale-in-center .12s 1s cubic-bezier(.25, .46, .45, .94) both;
}

#loading_vl h5 {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  transform: scale(0);
  -webkit-animation: scale-in-center .2s 1.5s cubic-bezier(.25, .46, .45, .94) both, blink-1 2s 1.7s infinite;
  animation: scale-in-center .2s 1.5s cubic-bezier(.25, .46, .45, .94) both, blink-1 2s 1.7s infinite;
  text-align: center;
}

@media screen and (max-height: 530px) {
  #loading_vl img {
    display: none;
  }
}

/* adjust padding tabel ritase report */

.ritase-report .table.dataTable:first-of-type th {
  padding: 5px 5px 4px !important;
}

/* wizard tab */

.wizard.nav-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.wizard.nav-tabs,
.wizard.nav-tabs>li.active>a,
.wizard.nav-tabs>li.active>a:focus,
.wizard.nav-tabs>li.active>a:hover {
  border: none;
}

.wizard.nav-tabs>li:not(.active)>a {
  color: #ABB6BE;
}

.wizard.nav-tabs>li:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #DBE2E8;
  position: absolute;
  top: 28px;
}

.wizard.nav-tabs>li>a {
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: none;
  padding: 14px 10px 9px;
  margin-right: 32px;
  background: #fff;
  box-shadow: none;
}

.wizard.nav-tabs>li:last-child>a {
  margin-right: 0;
}

.wizard.nav-tabs>li>a:hover {
  background: #f0f3f6;
}

.wizard.nav-tabs>li>a>div>p {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 -1px;
  line-height: 1;
}

.wizard.nav-tabs>li>a>div>small {
  font-size: 10px;
}

.wizard.nav-tabs>li>a>div>p {
  font-size: 12px;
}

.wizard.nav-tabs>li>a>div>span {
  display: block;
  background-color: #1e70cd;
  font-size: 15px;
  color: #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -4px;
}

.wizard.nav-tabs>li:not(.active)>a>div>span {
  color: #ABB6BE;
  background-color: #E7EDF2;
}


/* history play control */

.track-control {
  display: flex;
  justify-content: space-between;
  margin: -10px 0 6px;
  align-items: center;
}

.track-control .btn:not(.speed) {
  background: #FFE0D2 !important;
  box-shadow: none;
  color: var(--primary);
}

.track-control .btn:hover {
  color: var(--primary);
}

.track-control .btn.clear {
  background: transparent !important;
}

.track-control .btn.track {
  margin-right: 8px
}

.track-control .btn.control {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .track-control .btn.control.large {
  width: 42px;
  height: 42px;
} */

.track-control .btn.speed {
  width: 24px;
  padding: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--primary);
}

.track-control #selectSpeed {
  padding: 8px;
  color: var(--primary);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.track-slider {
  margin-bottom: 16px;
}

.track-slider>div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

.btn.speed+.popover h5 {
  font-weight: 600;
}

.btn.speed+.popover a {
  display: block;
  text-decoration: none;
  color: var(--primary);
  padding: 4px 6px;
  margin: 0;
  border-radius: 4px;
}

.btn.speed+.popover a:hover {
  background: #FFE0D2;
}


/* input range */

.track-slider {
  margin-bottom: 16px;
}

.track-slider>div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

.track-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
}

.track-slider input[type="range"]:focus {
  outline: none;
}

.track-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 8px 0 32px
}

.track-slider input[type="range"]:focus {
  outline: none;
}

.track-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
}

.track-slider input[type="range"]::-moz-range-track {
  background: var(--primary);
  height: 5px;
}

.track-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  background: var(--primary);
  margin-top: -5px;
  border-radius: 50%;
}

.track-slider input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background: var(--primary);
  margin-top: -5px;
  border-radius: 50%;
}


/* irs-slider  */

.irs-slider {
  top: 19px;
  border: none;
  width: 17px;
  height: 17px;
  background: var(--primary);
  border-radius: 50%;
}

.irs-slider:hover {
  background: var(--primary);
}

.irs-bar {
  background: var(--primary);
  top: 25px;
  height: 8px;
  margin-left: -5px;
  height: 5px;
}

.irs-line {
  background: #FFE0D2;
  height: 5px;
}

.irs-max,
.irs-min,
.irs-from,
.irs-single,
.irs-to {
  color: var(--primary);
  background: transparent;
}

/* #input_track modal */

#input_track .modal-content {
  max-width: 240px;
}

#input_track .btn[data-dismiss="modal"] {
  padding: 0 !important;
  height: 29px !important;
  font-size: .894rem;
  width: 68px !important;
}


/* trip detail*/

section.gtrack-tabs-overflow-wrapper {
  display: flex;
  align-items: center;
}

section.gtrack-tabs-overflow-wrapper i {
  cursor: pointer;
  padding: 6px;
  font-size: 18px;
  opacity: .5;
}

.nav-tabs.gtrack-tabs-overflow {
  background: #F9FBFC;
  margin: 0 8px;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

.nav-tabs.gtrack-tabs-overflow::-webkit-scrollbar {
  display: none;
}

.gtrack-tabs-overflow>li {
  white-space: nowrap;
}

.route-info {
  margin: 16px 0;
  display: flex;
}

.route-info>div {
  margin-right: 48px;
}

.route-info>div>p {
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

.route-info>div>span {
  font-weight: regular;
  font-size: 95%;
}

/* card-route */

.card-route {
  padding: 16px;
  background: #f8f8f8;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  margin-bottom: 16px;
}

.card-route hr {
  margin: 8px 0;
  border-top: 1px solid #eef0f4;
}

.card-route .btn-route-detail {
  font-size: 90%;
  text-align: center;
  display: block;
  padding-left: 44px;
  position: relative;
  margin-bottom: 10px;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.card-route .route-detail {
  position: relative;
  transition: all .2s ease-in, opacity .1s ease-in;
  transform-origin: top;
  overflow: hidden;
  max-height: max-content;
  max-height: 5000px;
}

.card-route .btn-route-detail.hide-detail+.route-detail {
  transition: all .2s ease-out, opacity .1s ease-out;
  max-height: 0;
  opacity: 0;
  margin-top: -6px;
  pointer-events: none;
  transform: scaleY(0);
}

.card-route .btn-route-detail.hide-detail>p>i {
  transition: .2s;
}

.card-route .btn-route-detail.hide-detail>p>i {
  transform: rotateX(180deg);
}

.card-route .btn-route-detail p {
  background: #f8f8f8;
  width: fit-content;
  margin: auto;
  padding: 0 6px;
}


.card-route .btn-route-detail:before {
  content: "";
  position: absolute;
  left: 44px;
  right: 0;
  top: 8px;
  background: #eef0f4;
  height: 1px;
  z-index: -1;
}

.card-route .row-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.card-route .row-route {
  margin-bottom: 6px;
}

.card-route .row-route>div>p {
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

.card-route .row-route>div>span {
  font-weight: regular;
  font-size: 95%;
}

.card-route .row-route>div:last-child {
  text-align: right;
}

.card-route .row-info {
  display: grid;
  grid-template-columns: 44px 1fr 100px;
}

.card-route .row-info>.icon {
  width: 35px;
  object-fit: cover;
  position: relative;
  z-index: 10;
}

.card-route .row-info-detail {
  padding-left: 44px;
  margin-bottom: 24px;
}

.card-route .row-info-detail-time {
  grid-template-columns: 1fr;
}

.card-route .row-info-detail-time>div {
  text-align: right;
}

.card-route .route,
.card-route .route-detail {
  position: relative;
}

.card-route .route:before,
.card-route .route-detail:before {
  content: "";
  border-left: 2px dashed #504C60;
  height: calc(100% - 52px);
  width: 100%;
  position: absolute;
  left: 16px;
  top: 26px;
}

.card-route .route-detail:before {
  left: 60px;
}

.card-container>.row-top {
  cursor: pointer;
}

.card-route .btn-toggle-card {
  background: #B8B8B8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #585757;
  margin-right: 16px;
  cursor: pointer;
}

.card-route .btn-toggle-card::before {
  transition: .2s;
}

.card-route .btn-toggle-card.rotate::before {
  transform: rotateX(180deg);
}

.card-container>.row-top.hide-card {
  margin-bottom: -4px;
}

.card-route {
  transition: all .2s ease-in, opacity .1s ease-in;
  transform-origin: top;
}

/* .card-container {
  max-height: 5000px;
} */

.card-container.card-closed {
  max-height: 65px;
}

.card-container>.row-top.hide-card~.card-route {
  transition: all .2s ease-out, opacity .1s ease-out;
  opacity: 0;
  height: 0;
  margin-top: -6px;
  pointer-events: none;
  transform: scaleY(0);
}

.card-container>.row-top~hr {
  transition: .1s;
}

.card-container>.row-top.hide-card~hr {
  opacity: 0;
}

.gtrack-tabs-overflow>li.active>a,
.gtrack-tabs-overflow>li.active>a:focus,
.gtrack-tabs-overflow>li.active>a:active,
.gtrack-tabs-overflow>li>a:focus,
.gtrack-tabs-overflow>li>a:hover {
  background: transparent;
}

/* Checkbox Switch */

.cbswitch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
  margin-right: 5px;
}

.cbswitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cbswitch .cbslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #8B9BAD;
  border-radius: 16px;
  -webkit-transition: .2s;
  transition: .2s;
}

.cbswitch .cbslider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: .2s;
  transition: .2s;
}

.cbswitch input:checked+.cbslider {
  background-color: var(--primary);
}

.cbswitch input:focus+.cbslider {
  box-shadow: 0 0 1px #ff5d17; 
}

.cbswitch input:checked+.cbslider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
}

.input-disabled {
  opacity: .3;
  filter: saturate(.5);
  pointer-events: none;
}

/* Document Expiry Legend */

legend.document-expiry {
  border: none;
  margin: 0;
  font-size: 13px;
}

legend.document-expiry>label {
  position: relative;
  padding-left: 15px;
  margin: 0 6px 0;
}

legend.document-expiry>label>span {
  font-size: 32px;
  position: absolute;
  bottom: -12px;
  left: 0;
}

/* datepicker arrow */

.ui-datepicker-next,
.ui-datepicker-prev {
  font-family: 'Font Awesome 5 Pro';
  padding-top: 3px;
}

.ui-datepicker-prev:before {
  content: "\f053";
}

.ui-datepicker-next:before {
  content: "\f054";
}

.ui-icon.ui-icon-circle-triangle-e,
.ui-icon.ui-icon-circle-triangle-w {
  display: none !important;
}

/* Fleet Tree */

.fleet-tree-structure {
  position: relative;
  border: 1px solid #E6E9EE;
  margin-left: 4px;
  position: relative;
  width: calc(100% - 6px);
}

.fleet-tree-structure:before {
  content: "";
  background: #fafafa;
  z-index: 10;
  width: calc(100% + 4px);
  height: 16px;
  left: -2px;
  top: -8px;
  position: absolute;
}

.fleet-tree-structure a {
  color: inherit;
}

.fleet-tree-structure a:after {
  content: "";
  border-bottom: 1px solid #E6E9EE;
  position: absolute;
  left: 0px;
  width: 100%;
  margin: -8px 0 0;
}

.fleet-tree-structure a.text-success {
  color: #259F11;
}

.fleet-tree-structure ul {
  padding-left: 26px;
}

.fleet-tree-structure li {
  list-style-type: "- ";
  margin-top: 16px;
}

/* set margin .gp-header inside tab */

.tab-content .gp-header {
  margin-top: -43px;
}

/* Live Video */

.video-header {
  margin: 16px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.live-video-container {
  background: #fff;
  padding: 16px 16px 16px 20px
}

.live-video-container h3 {
  font-size: 13px;
  margin: 16px 0 0;
  font-weight: 700;
}

.live-video-container h3:first-of-type {
  margin-top: 20px;
}

.live-video-container h3+hr {
  margin-top: 3px;
}

.live-video-container .row.settings .form-control {
  border-radius: 5px !important;
  background: #EBEFF7 !important;
}

.live-video-container .row.settings {
  align-items: center;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
}

.card-monitoring.full .card-draggable.live-video {
  box-shadow: 2px 0 4px rgba(0, 0, 0, .1);
}

.card-monitoring.full.no-aside .card-draggable.live-video {
  box-shadow: none;
}

.video-controls {
  display: flex;
  grid-gap: 16px;
}

.video-controls svg {
  cursor: pointer;
  max-width: 24px;
  color: #4A597A;
  transition: .3s;
}

.video-controls svg:hover,
.video-controls svg.active {
  color: var(--primary);
}

.video-tab {
  background: #EBEFF7;
  border-radius: 6px;
  display: flex;
  grid-gap: 6px;
  padding: 4px;
}

.video-tab a {
  display: block;
  padding: 4px 6px;
  border-radius: 4px;
  color: #0F172A;
  transition: .2s;
}

.video-tab a:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, .5);
}

.video-tab a.active {
  background: #fff;
  pointer-events: none;
  user-select: none;
}

/* .videos {
  overflow: auto;
  height: calc(100vh - 224px);
} */

.videos-wrap .ui-resizable-handle.ui-resizable-e {
  width: 15px;
  right: -4px;
}

.videos-wrap {
  position: relative;
  width: 800px;
}

.without-map .videos-wrap {
  width: 100%!important;
}

.without-map .ui-resizable-handle.ui-resizable-e {
  display: none!important;
}

.gt-scroll-small::-webkit-scrollbar {
  width: 16px;
}

.gt-scroll-small::-webkit-scrollbar-track {
  background: transparent;
  /* background: #fff; */
}

.gt-scroll-small::-webkit-scrollbar-thumb {
  background-color: #DAE0EC;
  border: 5px solid #fff;
  border-radius: 8px;
}

.video-buttons .btn.btn-default {
  background: #fff !important;
  border: 1px solid #4E5155 !important;
  border-radius: 5px;
  padding: 5px 12px !important;
  height: 27px !important;
  color: #4E5155;
}

.videos-map {
  display: grid;
  grid-gap: 4px;
  grid-template-columns: auto 1fr;
}

.videos-map .map-live-video {
  width: 100%;
  /* left: 0!important; */
}

/* .videos-map .map-live-video>#map>div {
    left: 15px!important;
} */

/* .videos-map.without-map {
  grid-template-columns: 1fr;
} */

.videos-map.without-map .map-live-video {
  display: none;
}

.videos-map.without-map .videos {
  width: 100%!important;
}

.videos-map .map-live-video {
  background: #ccc;
  height: calc(100vh - 232px);
}

/* .map-live-video .ui-resizable-e {
  width: 16px;
  right: auto;
  left: 0;
} */

.videos {
  /* display: grid; 
  grid-gap: 8px; */
  overflow-x: hidden;
  height: calc(100vh - 224px);
  max-height: calc(100vh - 228px);

  /* width: 800px; */
  width: 100%;

  /* min-height: 509px; */
  min-width: 777px;
  /* padding-right: 15px; */
}

/* .without-map .videos {
  padding-right: 0;
} */

/* .videos video {
  width: 100%;
  max-height: calc(100vh - 232px);
} */

.videos div[id^=videoContainer] {
  background-size: cover !important;
  background-position: center;
  float: left;
}

.videos div[id^=videoContainer] .easy-player {
  margin: auto;
}

/* .videos div[id^=videoContainer] { */
/* width: 100%!important; */
/* display: block; */
/* } */

/* .videos.grid-full {
  grid-template-columns: 1fr;
} */

.videos.videos.grid-full div[id^=videoContainer] {
  /* width: 800px!important; */
  /* max-height: 450px!important; */
  width: 100% !important;
  height: calc(100vh - 338px) !important;
  min-width: 760px;
  /* min-height: 428px; */
}

/* @media screen and (min-width: 1367px) { */
/* .videos.grid-full div[id^=videoContainer] { */
  /* min-height: 510px; */
  /* height: calc(100vh - 338px) !important; */
/* } */

.videos.grid-full div[id^=videoContainer] .easy-player:not(.easy-player-fill-container) {
  max-width: 906px;
}

/* } */

/* .videos.videos.grid-full div[id^=videoContainer] .easy-player:not(.easy-player-fill-container) {
  max-width: calc(100vw - 640px);
  min-width: 726px;
} */

/* .videos.grid-2x2 {
  grid-template-columns: 1fr 1fr;
} */

.videos.grid-2x2 div[id^=videoContainer] {
  /* width: 383px!important; */
  /* max-height: 215px!important; */
  width: calc(50% - 10px) !important;
  height: calc(50vh - 129px) !important;
  margin: 5px;
  /* min-height: 196px;
  min-width: 348px; */
  /* min-height: 209px; */
  min-width: 370px;
  min-height: 208px;
}

/* @media screen and (min-width: 1367px) { */
.videos.grid-2x2 div[id^=videoContainer] {
  min-height: 245px;
}

.videos.grid-2x2 div[id^=videoContainer] .easy-player:not(.easy-player-fill-container) {
  max-width: 432px;
}

/* } */

/* .videos.grid-2x2 div[id^=videoContainer] .easy-player:not(.easy-player-fill-container) {
  max-width: calc(50vw - 335px);
  min-width: 348px;
} */

/* .videos.grid-3x3 {
  grid-template-columns: 1fr 1fr 1fr;
} */

.videos.grid-3x3 div[id^=videoContainer] {
  /* width: 256px!important; */
  /* max-height: 144px!important; */
  width: calc(33.333% - 10px) !important;
  height: calc(33.333vh - 89px) !important;
  margin: 5px;
  min-width: 243px;
  min-height: 137px;
}

/* @media screen and (min-width: 1367px) { */
.videos.grid-3x3 div[id^=videoContainer] {
  min-height: 160px;
}

.videos.grid-3x3 div[id^=videoContainer] .easy-player:not(.easy-player-fill-container) {
  max-width: 285px;
}

/* } */

/* .videos.grid-semi-full {
  grid-template-columns: 1fr 1fr 1fr;
}

.videos.grid-semi-full video:first-child {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2;
} */

.videos.grid-semi-full div[id^=videoContainer]:first-child {
  /* grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2; */
  /* width: 513px!important; */
  /* max-height: 289px!important; */
  width: calc(66.666% - 10px) !important;
  height: calc(66.666vh - 170px) !important;
  margin-bottom: 4px;
  min-width: 497px;
  min-height: 280px;
}

.videos.grid-semi-full div[id^=videoContainer] {
  /* width: 253px!important; */
  /* max-height: 142px!important; */
  width: calc(33.333% - 10px) !important;
  height: calc(33.333vh - 90px) !important;
  margin: 5px;
  min-width: 243px;
  min-height: 137px;
}

/* @media screen and (min-width: 1367px) { */
.videos.grid-semi-full div[id^=videoContainer]:first-child {
  min-height: 330px;
}

.videos.grid-semi-full div[id^=videoContainer]:first-child .easy-player:not(.easy-player-fill-container) {
  max-width: 582px;
}

.videos.grid-semi-full div[id^=videoContainer] {
  min-height: 160px;
}

.videos.grid-semi-full div[id^=videoContainer] .easy-player:not(.easy-player-fill-container) {
  max-width: 285px;
}

/* } */

.card-draggable .list-group-item.list-video {
  display: block;
}

.list-video .toggle-vidchannel i {
  padding: 4px;
  width: 20px;
  transition: .2s;
}

.list-video .toggle-vidchannel.rotate i {
  transform: rotateX(180deg);
}

.card-draggable .list-group-item.list-video>div:first-child {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-draggable.live-video .list-group-item.list-video>div:first-child {
  align-items: flex-start;
}

.card-draggable .list-group-item.list-video>div:nth-child(2) {
  width: 100%;
  padding: 0 0 0px 26px;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.card-draggable .list-group-item.list-video>div:nth-child(2) .checkbox {
  margin: 0 0 3px;
}

.card-draggable .list-group-item.list-video>div:nth-child(2) .checkbox label {
  font-size: 11px;
}

.card-draggable .list-group-item.list-video>div:nth-child(2) .checkbox input[type="checkbox"] {
  position: relative;
  top: 2px;
  margin-right: 2px;
}

.live-video-container.settings {
  overflow-x: auto;
}

/* Card Video History */

.list-vidhistory {
  height: calc(100vh - 396px);
  overflow-y: auto;
}

.card-vidhistory {
  background-color: #EEF0F6;
  padding: 16px 10px 0 10px;
  margin: 16px;
  border-radius: 6px;
}

.card-vidhistory h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
}

.card-vidhistory>div {
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  align-items: center;
}

.card-vidhistory div .checkbox {
  margin: 2px 0 0;
}

.card-vidhistory div .checkbox label {
  font-size: 11px;
}

.card-vidhistory div .checkbox label input[type="checkbox"] {
  position: relative;
  top: 2px;
}

.card-vidhistory .radio+.radio {
  margin-bottom: -5px;
}

.card-vidhistory .radio-channel {
  position: relative;
  top: -2px;
}

/* tambahan */

.card-monitoring.full .card-list.live-video.history>.card-header>div>div {
  border-radius: 6px;
  overflow: hidden;
  background: #EEF0F6;
}

.card-monitoring.full .card-list.live-video.history>.card-header>div>div>select {
  background: transparent !important;
}

.videos-map.without-map.history {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 160px;
}

.videos-map.without-map.history .video-control-time {
  height: 120px;
}

.videos-map.without-map.history .videos {
  height: calc(100vh - 332px);
  overflow-y: auto;
}

/* modal video download */

.modal-body.list-video h5,
.modal-body.list-video p {
  margin: 0;
}

.modal-body.list-video .list-video-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: inherit;
  background-color: #EAEEF2;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 6px;
  line-height: 1;
}

.modal-body.list-video th {
  background-color: #1e70cd;
  color: #fff;
  border: none;
}

.modal-body.list-video .btn-xs {
  line-height: 1;
  padding: 6px;
  font-size: .9rem;
}

.modal-body.list-video td {
  line-height: 1;
  vertical-align: middle;
}

/* tambahan coin di header */

#header .account .btn-coin {
  background: #fff;
  padding: 0 6px;
  font-weight: 600;
  color: #F6A303;
  display: flex;
  align-items: center;
  font-size: 12px;
  transition: .3s;
  width: fit-content !important;
  margin: 0 !important;
  line-height: 30px !important;
  height: 30px !important;
}

#header .account .btn.name,
#header .account .btn.lang {
  padding: 0 6px;
  font-size: 12px !important;
  pointer-events: none;
}

#header .account .lang-switch {
  margin-left: 8px !important;
}

.lang-switch img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  margin: -2px 5px 0 -5px;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .2));
  border-radius: 50%;
}

.lang-switch .lang img {
    margin: -2px 7px 0 1px;
}

#header .account .coin {
  width: 16.5px;
  height: 16.5px;
  position: initial;
  margin-right: 3px;
}

/* #header .btn-coin a>span {
  line-height: 27px;
  height: 27px;
} */

#header .btn-coin:hover {
  background: #F6A303 !important;
  color: #fff !important;
}

#header .dropdown-item.gtrack-coin {
  display: flex;
  align-items: center;
}

#header .account .gtrack-coin .coin {
  margin: 0 4px 0 16px;
}

#header .dropdown-item.gtrack-coin span {
  font-weight: 600;
  color: #f6a303;
  font-size: 12px;
}

/* fix display button with coin */

#header .account .btn-group.show {
  display: inline-flex !important;
}

/* tambahan popup detail information di History Monitoring */

.popinfo.popinfo-detail {
  height: 138px;
  transform: translateY(-172px);
  width: 300px;
  left: -150px;
}

.popinfo.popinfo-detail::after {
  left: 132px;
}

.popinfo.popinfo-detail>.list-group>.list-group-item:first-child {
  border-bottom: 1px solid #eee;
}

.popinfo.popinfo-detail .popinfo-body {
  height: 100px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 44px 44px;
  overflow: hidden;
}

/* tambahan custom modal */

.modal-open .modal {
  padding: 0 !important;
}

.modal-full {
  width: calc(100vw - 42px)!important;
  margin: 16px;
}

.modal-xl {
  width: calc(100vw - 32px)!important;
  max-width: 1140px;
}

@media screen and (max-width: 1140px) {
  .modal-xl {
    margin: 16px;
  }
}

/* .modal-fullscreen {
  width: 100vw !important;
  height: 100vh;
  max-width: none!important;
  max-height: none!important;
  margin: 0 !important;
  top: 0;
  left: 0;
  transform: none;
} */

.modal-fullscreen {
    width: calc(100vw - 32px) !important;
    height: calc(100vh - 32px);
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    top: 16px;
    left: 16px;
    transform: none;
}

.modal-fullscreen .modal-body-scroll {
  height: calc(100vh - 32px) !important;
  max-height: none !important;
  max-width: none !important;
  padding: 19px !important;
}

.modal-fullscreen .modal-body {
    height: calc(100vh - 148px);
}

/* .modal-fullscreen .modal-header {
  border-radius: 0 !important;
} */

.modal-fullscreen .modal-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  /* border-radius: 0 !important; */
}

.modal-fullscreen iframe {
  height: calc(100vh - 110px) !important;
}

.modal-fullscreen.modal-fullscreen-fixed-footer .modal-body-scroll {
  height: calc(100vh - 144px) !important;
}

.modal-fullscreen.modal-fullscreen-fixed-footer .modal-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  border-radius: 0 0 10px 10px;
}


/* setting video */

.card-monitoring.full .card-list.live-video.history>.card-header>div>div {
  border-radius: 6px;
  overflow: hidden;
  background: #EEF0F6;
}

.card-monitoring.full .card-list.live-video.history>.card-header>div>div>select {
  background: transparent !important;
}

.videos-map.without-map.history {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 160px;
}

.videos-map.without-map.history .video-control-time {
  height: 100px;
}

/* Video setting */

.live-video-container .row-settings {
  margin: 24px 0;
  display: flex;
  justify-content: end;
}

.live-video-container .row-settings .cbswitch {
  margin: 0 8px 1px 0;
}

.live-video-container .row-settings .cbswitch+span {
  position: relative;
  top: 1px;
}

.live-video-container .row-settings .btn {
  font-size: 13px;
}

.live-video-container .row-settings .btn-link {
  color: #677788;
  margin-right: 16px;
}

.card-monitoring.full .live-video.settings.card-list>.card-header>div:first-child .select2 {
  width: 100% !important;
}

.card-monitoring.full .live-video .select2-container--default .select2-selection--single {
  border-radius: 5px;
}

/* tambahan */

.card-monitoring.full .card-list>.card-header.vidset>div:first-child {
  display: block;
}

.live-video .form-control {
  border-radius: 5px !important;
  background-color: #EBEFF7 !important;
}

.card-monitoring.full .card-list>.card-header.vidset label {
  font-weight: 600;
  font-size: 13px;
}

.ch-config {
  margin: 16px 0 24px;
}

.ch-config .checkbox input[type="checkbox"] {
  position: relative;
  top: 2px;
  margin-right: 2px;
}

.ch-config .checkbox {
  margin: 0 2px 0 0;
}

.ch-config .checkbox label {
  font-size: 11px;
}

.ch-config .ch-list .checkbox label {
  width: 64px;
}

.ch-config .ch-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
}

.live-video-container.settings.no-data .no-data-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100vh - 160px);
  text-align: center;
}

.live-video-container.settings .no-data-img {
  display: none;
}

.live-video-container.settings.no-data .settings-container {
  display: none;
}

.live-video-container.settings .no-data-img img {
  height: calc(100vh - 280px);
}

.live-video-container.settings .no-data-img h3 {
  font-size: 15px;
  margin: 0 0 4px;
}

.live-video-container.settings .no-data-img p {
  font-size: 12px;
}

.card-monitoring.full .card-draggable .container-accordion.vidset {
  height: calc(100vh - 402px) !important;
}

#loading_vl.vidset {
  height: calc(100vh - 510px);
}

#loading_vl.vidset img {
  height: calc(100vh - 550px);
  max-height: 120px;
  margin: -8px 0 4px;
}

input[type="color"] {
  padding: 0;
}

div.popinfo-body small.blink {
  -webkit-animation: blink-1 1s infinite;
  animation: blink-1 1s infinite;
  color: red;
}

/* timeline video history */

/* .scale-drag .scale-view .scale-list-line {
    height: 100%;
    box-sizing: border-box;
    padding-top: 28px;
    white-space: nowrap;
    position: relative;
    transition: transform .3s;
} */

/* video history */
.card-monitoring.full .card-list.live-video.history>.card-header {
  border: none;
}

.scale-box {
  width: calc(100% - 60px);
  margin-left: 60px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 32px;
}

.scale-box::-webkit-scrollbar {
  display: none;
}

.scale-list-line li,
ul {
  list-style: none;
}

ul.scale-list-line {
  display: flex;
  position: relative;
  color: #fff;
  padding: 0;
  margin: 32px 0 28px;
}

.scale-drag .scale-view .scale-list-line .head-scale {
  display: inline-block;
  position: relative;
  width: .3472222222%;
  height: 10px;
  pointer-events: none;
}

.scale-drag .scale-view .scale-list-line .head-scale:before {
  position: absolute;
  left: 0;
  top: -3px;
  display: block;
  content: "";
  width: 1px;
  height: 10px;
  background: #c4c8d4;
}

.scale-drag .scale-view .scale-list-line .head-scale .number {
  position: absolute;
  left: 0;
  top: -20px;
  font-size: 14px;
  transform: translateX(-50%) scaleX(.95);
  transition: .2s;
}

.no-aside .scale-drag .scale-view .scale-list-line .head-scale .number {
  top: -21px;
  font-size: 15px;
  transform: translateX(-50%) scaleX(1);
}

/* .no-aside .scale-drag .scale-view .pointer .show-time {
  font-size: 14px;
} */

.scale-drag .scale-view .scale-list-line .head-scale:nth-child(even) .number {
  display: none;
}

.scale-drag .scale-view .head .line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  height: 1px;
  background: #c4c8d4;
  width: calc(100% - 62px);
  margin-left: 62px;
}

.scale-view {
  position: relative;
}

.ch-mark {
  /* display: flex; */
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  /* margin: 7px 0 8px;
  align-items: center; */
  line-height: 1;
  margin-bottom: 8px
}

.scale-box.ch-mark {
  width: calc(100% - 79px);
}

.ch-mark>div:first-child {
  /* width: 104px;
  padding-left: 8px; */
  position: absolute;
  left: 13px;
  top: 1px;
}

.ch-mark div:last-child {
  width: 100%;
  display: flex;
  height: 14px;
}

.ch-mark div:last-child div:not(.blank) {
  background: #fff;
}

.scale-drag .scale-view .pointer {
  position: absolute;
  left: 0;
  top: -32px;
  height: 46px;
  z-index: 99;
}

.scale-drag .scale-view .pointer .pointer-arrow {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  color: #ffbf68;
  font-size: 12px;
  transform: translateX(-50%);
  cursor: move;
  z-index: 2;
}

.scale-drag .scale-view .pointer .show-time {
  position: absolute;
  left: 50%;
  top: 120%;
  color: #ffbf68;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transform: translate(-50%, -50%);
  background: #4A597A;
  transition: .2s;
}

.scale-drag .scale-view .pointer .pointer-line {
  display: block;
  width: 1px;
  height: 200%;
  background: #ffbf68;
}

.scale-drag .scale-view .pointer .pointer-arrow {
  position: absolute;
  left: 50%;
  top: -9px;
  bottom: 0;
  color: #ffbf68;
  font-size: 24px;
  transform: translateX(-50%);
  cursor: move;
  z-index: 2;
}

.video-control-time {
  position: relative;
}

.video-control-time .period {
  position: absolute;
  color: #fff;
  font-weight: 600;
  top: 14px;
  left: 7px;
  z-index: 10;
  cursor: pointer;
  font-size: 13px;
  /* border: 1px solid #fff; */
  background: #42506E;
  border-radius: 4px;
  padding: 8px 6px;
  line-height: 1;
  z-index: 10;
}

.video-control-time .period+.dropdown-menu a {
  font-size: 13px!important;
  font-weight: 500!important;
}

.video-control-time .dropdown-toggle:after,
.video-control-time .dropleft .dropdown-toggle:before {
  font-family: 'Font Awesome 5 Free';
}

.video-control-time .dropup .dropdown-toggle::after {
  margin-top: 5px;
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.video-control-time .marks {
  height: 50px;
  overflow: auto;
  padding: 6px 0;
}

.video-control-time .marks.gt-scroll-small::-webkit-scrollbar-track {
  background: #4A597A;
}

.video-control-time .marks.gt-scroll-small::-webkit-scrollbar-thumb {
  background-color: #DAE0EC;
  border: 5px solid #4A597A;
}

.video-control-time .move {
  position: absolute;
  color: #fff;
  top: 37px;
  /*background: #4A597A;*/
  padding: 14px 5px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  z-index: 150;
}

/* .video-control-time .move::before {
  content: "";
  position: absolute;
  z-index: 20;
  width: 18px;
  height: 24px;
  bottom: 0;
  background: #4A597A;
} */

.video-control-time .move.to-left {
  left: 38px;
}

.video-control-time .move.to-left:before {
  left: 21px;
}

.video-control-time .move.to-right {
  right: 4px;
}

.video-control-time .move.to-right:before {
  left: -18px;
}

.video-control-time .marks .border-block {
  background: #4A597A;
  width: 36px;
  height: 54px;
  position: absolute;
  bottom: 0px;
  z-index: 10;
}

.video-control-time .marks .border-block:first-child {
  left: 68px;
}

.video-control-time .marks .border-block:last-child {
  right: 19px;
}

/* dasboard v2 */

.dashboard.dashboard2 {
  height: calc(100vh - 78px);
  position: relative;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  margin-bottom: 6px;
}

.dashboard-header-buttons {
  display: flex;
  align-items: center;
  grid-gap: 6px;
}

.dashboard-header-buttons .btn {
  height: 32px;
}

.dashboard-header-buttons .select2-selection,
.dashboard-header-buttons .select2-selection__arrow {
  background: #207575 !important;
}

.dashboard-header-buttons .select2-selection__placeholder,
.dashboard-header-buttons .select2-selection__rendered {
  color: #fff !important;
}

.dashboard-header-buttons .select2-selection__arrow b {
  border-color: #fff transparent transparent transparent !important;
  border-width: 5px 4px 0 4px
}

.dashboard-header-buttons .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #fff transparent !important;
    border-width: 0 4px 5px 4px;
}

.dashboard-header-buttons .select2-container--default .select2-selection--single .select2-selection__rendered {
  min-width: 260px;
}

.dashboard-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  line-height: 1;
}

.dashboard .container-content h2 {
  color: #000;
  font-weight: 600;
  font-size: 20px;
  position: relative;
  margin: 4px 0 12px;
}

.dashboard .container-content h2:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #E5E5EF;
  position: absolute;
  left: 0;
  bottom: -6px;
}

.dashboard2 .page {
  padding-right: 5px;
}

.dashboard2 .dashinfo {
  height: calc(50vh - 125px);
}

.dashboard2 .dashinfo.full {
  height: calc(100vh - 186px);
}

.dashboard2 .dashinfo.gt-scroll-small {
  overflow-y: auto;
  overflow-x: hidden;
  width: calc(100% + 15px);
}

.dashboard2 .container-content {
  box-shadow: none;
}

.dashboard2 .dashinfo .card-body {
  border: 1px solid #E5E7EB;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.btn-primary.green {
  background: #207575 !important;
}

.btn.btn-primary.white {
  background: #fff !important;
  color: inherit;
}

/* .dashboard2 .dashboard-pagination {
  position: fixed;
  right: 16px;
  bottom: 8px;
} */

.dashboard2 .dashboard-pagination .pagination {
  position: relative;
  top: -5px;
  margin-left: 16px;
}

.dashboard2 .pagination>li>a:not(.page-link):hover {
  background: #207575;
  color: #fff;
}

.dashboard2 .pagination>li>a:not(.page-link):focus {
  background: #fff;
  color: #000;
}

.dashboard2 .pagination li.active>a:not(.page-link),
.dashboard2 .pagination li.active>a:not(.page-link):hover,
.dashboard2 .pagination li.active>a:not(.page-link):focus {
  background: #207575 !important;
  border-color: #207575 !important;
}

.dashboard2 .pagination>li>a:not(.page-link) {
  background: #fff;
  margin: 0 0 0 -1px;
  color: #000;
  border-color: #CBD5E1;
  border-radius: 0;
  font-weight: 500;
}

.pagination>li>a[aria-label="Previous"]:hover,
.pagination>li>a[aria-label="Next"]:hover,
.pagination>li>a[aria-label="Previous"]:focus,
.pagination>li>a[aria-label="Next"]:focus {
  background: #fff !important;
  color: #000 !important;
}

.dashboard2:not(.dashboard-mining) nav ul li.active>a:before {
  display: none;
}

.dashboard2:not(.dashboard-mining) .nav.nav-tabs {
  margin-top: -48px;
  justify-content: flex-end;
  border: none;
  position: relative;
  bottom: -4px;
  height: 20px;
}

.dashboard2:not(.dashboard-mining) .nav-tabs>li>a {
  font-size: 12px;
  border: 1px solid #E5E5EF;
  border-right: none;
  border-left: none;
  color: #000;
  padding: 4px 8px;
  margin: 0 0 21px -1px;
}

.dashboard2:not(.dashboard-mining) .nav-tabs>li.active>a {
  font-weight: normal;
  background: #207575;
  color: #fff;
  box-shadow: none;
}

.dashboard2:not(.dashboard-mining) .nav-tabs>li:first-child a {
  border-left: 1px solid #E5E5EF;
  border-radius: 4px 0 0 4px;
}

.dashboard2:not(.dashboard-mining) .nav-tabs>li:last-child a {
  border-right: 1px solid #E5E5EF;
  border-radius: 0 4px 4px 0;
}


/* dashboard2 status */

.dashboard2 .text-content-small {
  margin: 0 0 8px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -.5px;
}

.dashboard2 .text-content {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -1px;
}

.dashboard2 .dashicon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.dashboard2 .dashinfo a {
  color: inherit;
}

.dashboard2 .bg-total {
  background: #DCFCE7
}

.dashboard2 .bg-group-project {
  background: #F4E8FF;
}

.dashboard2 .bg-expiry-reminder {
  background: #FFDBC7;
}

.dashboard2 .bg-maintenance-reminder {
  background: #CBD4F4;
}

.dashboard2 .bg-device-expiring {
  background: #FFF4DE;
}

.dashboard2 .bg-device-expired {
  background: #FFE2E6;
}

/* benerin bug DataGrid */

@media screen and (max-width: 767px) {
  #DataGrid1_length {
    top: -23px;
  }

  .dt-toolbar {
    border-bottom: 0 !important;
    padding-top: 30px;
  }

  .form-actions .btn {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 992px) {
  .wizard.nav-tabs {
    display: block;
    margin-top: -20px;
  }

  .wizard.nav-tabs>li:before {
    display: none;
  }

  .wizard.nav-tabs>li {
    float: none;
  }
}

/* fix jarviswidget-fullscreen-mode */

#jarviswidget-fullscreen-mode .jarviswidget {
  width: 100% !important;
  left: 0 !important;
  top: 15px !important;
  padding: 0 !important;
}

/* tambahan cblist */


.gt-checkbox-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 10px;
  background: #eee;
  padding: 0 8px 3px;
}

.gt-checkbox-list .checkbox {
  margin: 1px 16px 0 0;
}

.gt-checkbox-list .checkbox+.checkbox {
  margin: 1px 16px 0 0;
}

.gt-checkbox-list input[type="checkbox"] {
  position: relative;
  top: 2px
}


/* adjust dt-history-monitoring-eventsummary */

.dt-history-monitoring-eventsummary .dt-toolbar {
  padding: 0 7px 10px;
  margin: 0px 0 -20px 0;
  background: transparent;
}

.dt-history-monitoring-eventsummary select.form-control.custom-select {
  position: relative;
  top: -5px;
  height: 28px;
}

/* navtab custom input */

.nav-tabs .input-tab,
.nav-tabs .select-tab {
  width: 63px;
  font-size: 12px;
  border: 1px solid #e5e5ef;
  border-left: none;
  color: #000;
  padding: 4px 8px;
  margin: 0 0 21px -1px;
  border-radius: 0 4px 4px 0;
  cursor: default;
}

.nav-tabs .active>.input-tab 
.nav-tabs .active>.select-tab {
  font-weight: 400;
  background: #207575;
  color: #fff;
  box-shadow: none;
}

.nav-tabs .select-tab {
  width: auto;
  height: 27px;
}

.dashboard2.withscroll .dashinfo {
  height: 280px;
}

/* activity / notification */

.gt-ajax-dropdown {
  border-radius: 8px;
  border-color: #E5E5EF;
  width: 360px;
}

.gt-ajax-dropdown:before,
.gt-ajax-dropdown:after {
  left: auto;
  right: 88px;
}

.gt-ajax-dropdown:before {
  border-bottom-color: #E5E5EF;
}

.nav-tabs.gtrack-tabs {
  border: none;
}

.ajax-dropdown.gt-ajax-dropdown {
  padding: 0;
}

.ajax-dropdown.gt-ajax-dropdown {
  left: auto;
  right: 0px;
}

.gt-ajax-dropdown .fade:not(.show) {
  opacity: 1;
}

.ajax-dropdown.gt-ajax-dropdown>:first-child {
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid #E7E8EA;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.gt-ajax-dropdown .gtrack-tabs.notifications+.tab-content {
  padding: 0 0 0 10px;
  height: 304px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #FFF1EB;
}

.gt-ajax-dropdown .gtrack-tabs.notifications+.tab-content::-webkit-scrollbar {
  width: 10px;
}

/* .gt-ajax-dropdown .gtrack-tabs.notifications+.tab-content::-webkit-scrollbar-thumb {
  border-width: 4px;
  border-color: #FFF1EB;
} */

.gt-ajax-dropdown .gtrack-tabs.notifications+.tab-content.gt-scroll-small::-webkit-scrollbar-thumb {
  /* background-color: #DAE0EC; */
  border: 4px solid #FFF1EB;
}

.gt-ajax-dropdown .gtrack-tabs>li {
  font-weight: 500;
  text-align: center;
  overflow: hidden;
}

.gtrack-tabs.notifications {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-columns: 35% 1fr 27%;
}

.gtrack-tabs.notifications:before {
  display: none;
}

/* 
.gt-ajax-dropdown .gtrack-tabs>li:first-child {
  width: 33%;
}

.gt-ajax-dropdown .gtrack-tabs>li:nth-child(2) {
  width: 39%;
}

.gt-ajax-dropdown .gtrack-tabs>li:last-child {
  width: 28%;
} */


.gt-ajax-dropdown .gtrack-tabs>li.active>a, 
.gt-ajax-dropdown .gtrack-tabs>li.active>a, 
.gt-ajax-dropdown .gtrack-tabs>li.active>a:focus, 
.gt-ajax-dropdown .gtrack-tabs>li.active>a:hover {
  background-color: transparent;
}

.gt-ajax-dropdown .notif-card {
  position: relative;
  /* background: #F6F6F6;
  border: 1px solid #E5E5EF; */
  border-radius: 8px;
  padding: 8px;
  margin: 10px 0;
  font-weight: 500;
}

.gt-ajax-dropdown .notif-card h3 {
  margin: 0;
  font-size: 14px;
}

.gt-ajax-dropdown .notif-card h5 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.gt-ajax-dropdown .notif-card .btn {
  font-size: 12px;
  color: #fff;
  display: block;
  width: fit-content;
  margin: 10px 0 0 auto;
  padding: 6px 12px;
}

.gt-ajax-dropdown .notif-card .btn:hover {
  color: #fff;
}

.gt-ajax-dropdown .notif-card .btn i {
  margin-left: 3px;
}

.gt-ajax-dropdown i.fa-spin {
  font-size: 20px;
  color: #333;
  animation-duration: 1s;
}

/* .gt-ajax-dropdown .notif-card hr {
  margin: 7px 0;
} */

.gt-ajax-dropdown .tab-content>.tab-pane hr:last-of-type {
  display: none;
}

.gt-ajax-dropdown hr {
  margin: 6px 0;
  border-color: #e3e3e3;
}

.gt-ajax-dropdown .notif-card h4 {
  margin: 10px 0 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.gt-ajax-dropdown .notif-card .event {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gt-ajax-dropdown .notif-card .event time {
  /* color: var(--primary); */
  font-size: 12px;
}

.gt-ajax-dropdown .notif-details {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  /* color: var(--primary); */
  font-size: 12px;
  letter-spacing: -.5px;
  line-height: 1;
  grid-gap: 6px;
}

.gt-ajax-dropdown .notif-card .event~.notif-details h4 {
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.notif-footer {
  margin: 0px;
  text-align: right;
  font-weight: 600 !important;
  padding: 10px 17px!important;
  border-top: 1px solid #E5E5EF;
}

.gt-ajax-dropdown a {
  color: var(--primary);
}

.gt-ajax-dropdown i.fa-spin {
  font-size: 20px;
  color: var(--primary);
}

.gt-ajax-dropdown .loader {
  text-align: center;
  padding: 16px 0;
}

/* notif btn */

.btn-header.notification-menu {
  margin-left: 14px;
  position: relative;
  z-index: 1000;
}

.btn-header.notification-menu a,
.btn-header.notification-menu a:hover {
  color: #6D6A69;
}

.btn-header.unread.notification-menu:before {
  content: "";
  width: 8px;
  height: 8px;
  background: #ED2C2C;
  position: absolute;
  top: 16px;
  right: 5px;
  border-radius: 50%;
}

.btn-header.active.notification-menu>:first-child>a {
  background-color:#e8e8e8;
  background-image:-moz-linear-gradient(top,#5a5a5a 0,#686868 100%);
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5a5a5a),color-stop(100%,#686868));
  background-image:-webkit-linear-gradient(to bottom,#5a5a5a 0,#686868 100%);
  background-image:-o-linear-gradient(to bottom,#5a5a5a 0,#686868 100%);
  background-image:-ms-linear-gradient(to bottom,#5a5a5a 0,#686868 100%);
  background-image:linear-gradient(to bottom,#5a5a5a 0,#686868 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5A5A5A', endColorstr='#686868', GradientType=0);
  -webkit-box-shadow:inset 0 0 3px 1px rgba(0,0,0,.15);
  box-shadow:inset 0 0 3px 1px rgba(0,0,0,.15);
  color:#fff;
  border-color:#494949;
}

/* mining dashboard / dashboard 3 */

.chart-content {
    padding: 32px 0 16px;
}

.dashboard2.scroll .dashboard-header {
  margin-bottom: 10px;
}

.dashboard2 .container-content .chart-header h2:after {
  display: none;
}

.dashboard2 .chart-header {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 24px;
  margin-bottom: -20px;
  padding-top: 4px
}

.dashboard2 .chart-header .btn-white {  
  box-shadow: none;
  margin-top: -4px;
}

.dashboard2 .chart-header .dropdown-menu {
  left: auto;
  right: -1px;
  margin-top: 6px !important;
}

.dashboard2 .gtpanel-header .dropdown-menu {
  left: auto;
  right: -1px;
  margin-top: -14px !important;
}

.dashboard2 .chart-header .aufilter,
.dashboard2 .gtpanel-header .aufilter {
  width: 186px;
}

.dashboard2 .chart-header .aufilter .btn-set,
.dashboard2 .gtpanel-header .aufilter .btn-set {
  /* background: #fc5a5c !important; */
  width: calc(100% - 32px) !important;
  margin: 6px auto;
}

.dashboard2 .chart-header .aufilter li>div,
.dashboard2 .gt-panel-header .aufilter li>div {
  display: grid;
  grid-template-columns: 18px 1fr 18px 1fr;
  grid-gap: 5px;
  padding: 3px 16px;
  align-items: center;
  line-height: 1;
}

.dashboard2 .chart-header .aufilter li>div>label,
.dashboard2 .gtpanel-header .aufilter li>div>label {
  margin: 0 0 0 4px;
}

.dashboard2 .chart-header .aufilter li>div>.form-control,
.dashboard2 .gtpanel-header .aufilter li>div>.form-control {
  border-radius: 4px !important;
  padding: 8px;
}

.dashboard2 .chart-header li>div,
.dashboard2 .gtpanel-header li>div {
  display: grid;
  grid-template-columns: 15px 1fr 15px 1fr;
  grid-gap: 5px;
  padding: 3px 10px 3px 22px;
  align-items: center;
  line-height: 1;
}

.dashboard2 .chart-header li>div,
.dashboard2 .gtpanel-header li>div {
  margin: 0;
}

.dashboard2 .container-content .chart-header h2 {
  color: #fff;
}

.dashboard2.scroll .page {
  padding-right: 0;
}

.dashboard2.scroll .dashinfo,
.dashboard.dashboard2.scroll {
  height: auto;
}

.dashboard2.scroll .container-content {
  padding: 8px 8px 0;
  background: #207575;
  width: 100%;
}

.dashboard2 .container-content .table thead tr {
  background: #BAE9D3;
}

.dashboard2 .container-content .table-success {
  background-color: #BAE9D3;
}

.dashboard2 .container-content .table-striped-columns th:nth-child(odd),
.dashboard2 .container-content .table-striped-columns td:nth-child(odd) {
  background-color: #F5FEF9;
}

.dashboard2.scroll .availability-unit .chart-widget {
  height: 250px;
}

.dashboard2.scroll .chart-widget {
  width: 100%;
  max-width: 100%;
  height: 201px;
  background: #fff;
}

.dashboard2.scroll .text-content-small {
  margin: 4px 0 0 0;
}

.dashboard2.scroll .card-body {
  box-shadow: none!important;
  border: 1px solid #207575 !important;
}

.dashboard2.scroll .equipment-overview .table img {
  max-width: 56px;
  display: block;
  margin: auto;
}

.dashboard2.scroll .equipment-overview .table>thead>tr>th,
.dashboard2.scroll .equipment-overview .table>tbody>tr>td {
  border-bottom: 1px solid rgba(32, 117, 117, .2);
}

/* modal header */

.modal-header {
  background: #207575;
  border-radius: 10px 10px 0 0!important;
}

.dashboard2.scroll .availability-unit h4 {
  margin: 12px 0 3px;
}

.dashboard2.scroll .availability-unit>.chart-content>.row {
  background: #fff;
  margin: 0;
}

.availability-unit .dropdown-menu>.active>a, 
.availability-unit .dropdown-menu>.active>a:focus, 
.availability-unit .dropdown-menu>.active>a:hover {
  background: #3276b1 !important;
  color: #fff !important;
}

.availability-unit h4 {
  letter-spacing: -.5px;
}

.modal-footer .btn+.btn {
  height: 35px;
}

.dashboard2.scroll .bg-total {
  background: #A8CCCA;
}

.dashboard2.scroll .bg-group-project {
  background: #3CA6DE;
}

.dashboard2.scroll .bg-device-expired {
  background: #FAD09A;
}

.dashboard2.scroll .dashicon {
  display: none;
}

.vehicle-row .icons-row {
    display: flex;
    align-items: center;
    grid-gap: 4px;
}

.vehicle-row .icons-row .fa-video {
  position: relative;
  bottom: -2px;
}

.vehicle-row .video {
  height: 17px;
}

.vehicle-row .video a {
  color: #00C100;
  transition: .2s;
}

.vehicle-row .video a:hover {
  color: #00b500;
}

.skeleton-box {  
  position: relative;
  overflow: hidden;
  background-color: #DDDBDD !important;
  color: #DDDBDD !important;
  pointer-events: none;
  width: fit-content;
  border-radius: 3px;
  box-shadow: none !important;
}
.skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  -webkit-animation: shimmer 2s infinite;
          animation: shimmer 2s infinite;
  content: "";
}
@-webkit-keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* fix monitoring page -> minus icon on collapsed */

.card-monitoring .tab-pane .fa-minus-square.collapsed:before {
  content: "\f0fe";
}

/* fix select2 user Fleet Group Access */

.user-fleet-group-access + .select2 {
  width: calc(100vw - 305px) !important;
}

.minified .user-fleet-group-access + .select2 {
  width: calc(100vw - 130px) !important;
}

@media screen and (max-width: 880px) {
.user-fleet-group-access + .select2 {
    width: calc(100vw - 77px) !important;
  }
}

/* mining monitoring */
.icons-row.mining {
  margin: 4px 8px 0 0;
}

.icons-row.mining.bullet {
  margin-top: 5px;
}

.mining-icon {
  height: 17px;
  padding: 0 2px;
  background: #b6b6b6;
  border: 1px solid #a6a6a6;
  color: #fff;
  border-radius: 4px;
  min-width: 16px;
  font-weight: 600;
  cursor: pointer;
  text-overflow: unset!important;
  display: flex!important;
  align-items: center;
}

.mining-icon.fuel {
  background: #ebeff7;
  border: 1px solid #d2d9e8;
  color: #B6B6B6;
}

.mining-icon.fuel svg path {
  fill: #B6B6B6;
}

.mining-icon.fuel.green {
  color: #00C100;
}

.mining-icon.fuel.green svg path {
  fill: #00C100;
}

.mining-icon.fuel.orange {
  color: #ff8126;
}

.mining-icon.fuel.orange svg path {
  fill: #ff8126;
}

.mining-icon.fuel.red {
  color: #ff4040; 
}

.mining-icon.fuel.red svg path {
  fill: #ff4040; 
}

.mining-icon.loaded.active {
  background: #2dd72d;
  border: 1px solid #00c100;
}

.mining-icon.breakdown.active {
  background: #ff4040;
  border: 1px solid #c91717;
} 

.mining-icon.engine.active {
  background: #ff8126;
  border: 1px solid #e06811;
}

.mining-icon img {
  height: 10px;
  /* filter: invert(1); */
}

.mining-icon span {
  font-size: 8px;
  line-height: 1;
  margin: 0 -3px -1px 3px;
  transition: .2s;
}

.mining-icon.expand span {
  max-width: 0;
  opacity: 0;
}

.mining-icon.expand:hover span {
  margin: 0 2px -1px 3px;
  max-width: 100px;
  opacity: 1;
}

.icons-row.mining .bullet-icon {
  width: 9px;
  height: 9px;
  background: #D2D9E8;
  border-radius: 50%;
  margin: 0 0 2px !important;
  line-height: 1 !important;
  cursor: pointer;
}

.icons-row.mining .bullet-icon.active {
  background: #24BA21;
}

/* bullet tooltips */

.icons-row.mining .bullet-icon {
  overflow: visible!important;
}

.icons-row.mining .bullet-icon[tooltip]:hover:before {
  content: attr(tooltip);
  position: absolute;
  display: block;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  text-align: center;
  background: #000;
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 10px;
}

.icons-row.mining .bullet-icon[tooltip]:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -11px;
    transform: translateX(-50%);
    border: 10px solid #000;
    border-color: black transparent transparent transparent;
    display: none;
}

.icons-row.mining .bullet-icon[tooltip]:hover:after {
  display:block;
}

.mining-icon.icon-l i,
.mining-icon.icon-q i,
.mining-icon.icon-d i {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  position: relative;
  line-height: 1;
}

.mining-icon.icon-l {
  border-color: #996527;
  background-color: #D29E60;
}

.mining-icon.icon-l i {
    right: -2px;
}

.mining-icon.icon-q {
  border-color: #CA5C5C;
  background-color: #FD9B9B;
}

.mining-icon.icon-d {
  border-color: #3778C1;
  background-color: #8CBBF1;
}

.mining-icon.icon-d i {
  right: -1px;
}

.full .card-draggable .list-group-item .vehicle-row .mining span:not(.fuel):first-child {
  padding-right: 0;
}

/* dashboard 4 */

.dashboard4 .nav.nav-tabs {
  justify-content: start;
  margin: 0 0 18px;
  border-bottom: 1px solid #e5e5ef;
}

.dashboard4>.nav.nav-tabs {
  margin: -16px 0 16px 0;
}

.dashboard4 .dashboard-header-buttons .form-control {
  background: #fff !important;
  height: 32px;
}

.dashboard4 .input-group .form-control {
  height: 32px;
}
.dashboard4 fieldset .input-group-addon {
  padding: 6px 20px 10px 10px;
}

.dashboard4 .nav-tabs>li.active>a {
  background: #fff;
  color: var(--primary);
  font-weight: 500;
  border-bottom: 2px solid var(--primary) !important;
}

.dashboard4 .nav-tabs>li>a {
  border: 1px solid #e5e5ef !important;
  padding: 10px 20px;
  background: #fff;
  margin: 0;
  border-radius: 8px 8px  0 0!important;
}

.dashboard4 .nav-tabs>li:not(.active)>a {
  position: relative;
  bottom: -1px;
}

.dashboard4 .container-content {
  height: calc(100% - 12px);
}

.dashboard4 .container-content {
  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.07),0px 4px 5px 0px rgba(0,0,0,0.05),0px 1px 10px 0px rgba(0,0,0,0.03);
}

.dash-top {
  min-height: 106px;
}

.dash-top .color {
  background: transparent;
  color: #ea3616;
}

.dash-top .info span {
  font-size: 22px;
  font-weight: 600;
  color: #ea3616;
}

.utilisasi-unit section {
  display: grid;
  grid-gap: 10px;
}

.utilisasi-unit section h2:after {
  display: none;
}

.utilisasi-unit section div.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding-bottom: 16px;
}

.utilisasi-unit table tr td:last-child {
  font-weight: 600;
  text-align: right;
}

.dashboard4 .utilisasi-unit section h2 {
  margin: 8px 0 4px;
}

.utilisasi-unit .bg {
  padding: 10px;
  border-radius: 6px;
}

.utilisasi-unit .bg.orange {
  background: #FFE0D2;
}

.utilisasi-unit .bg.yellow {
  background: #FFE185;
}

.utilisasi-unit .bg.blue {
  background: #95E3FF;
}

.container-content.aspek-safety {
  padding-bottom: 16px;
}

.aspek-safety table,
.utilisasi-unit table {
  width: 100%;
}

.aspek-safety table tr td:last-child {
  text-align: right;
}

.aspek-safety table tr td:first-child {
  font-weight: 600;
}

.tab-gtrack1 {
  width: fit-content;
  margin: 0 0 16px auto;
  background: #ECEEF2;
  padding: 12px 10px 10px;
  border-radius: 8px;
}

.tab-gtrack1 a {
  padding: 4px 10px;
}

.tab-gtrack1 a {
  color: inherit;
  padding: 4px 10px;
  font-weight: 500;
  transition: .2s;
}

.tab-gtrack1 a:hover {
  color: var(--primary);
}

.tab-gtrack1 a.active {
  background: #fff;
  border-radius: 4px;
  color: var(--primary);
}

.dashboard4 .container-content table td {
  padding: 4px 0;
}

.dashboard4 .container-content:not(.dash-top) {
  min-height: 250px;
}

.dashboard4 .row.half .container-content:not(.dash-top) {
  min-height: 157px;
}

.skeleton {
  background: linear-gradient(110deg, #ebeff7 8%, #f0f5fe 18%, #ebeff7 33%);
  background-size: 200% 100%!important;
  animation: 1s shine linear infinite!important;
  appearance: none;
  pointer-events: none!important;
}

.utilisasi-unit .bg.skeleton {
  background: linear-gradient(110deg, #ebeff7 8%, #f0f5fe 18%, #ebeff7 33%);
}

span.skeleton {
  color: transparent!important;
}

.skeleton * {
  opacity: 0!important;
}

.skeleton.text {
  border-radius: 4px;
}

.dashboard4 .tab-content .table.dataTable td {
  white-space: nowrap;
}

/* Display Flex Utilities Helper */
.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

/* Flex Direction */
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

/* Flex Wrapping */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Justify Content */
.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

/* Align Items */
.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

/* Align Self */
.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

/* Align Content */
.align-content-start {
  align-content: flex-start;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-center {
  align-content: center;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-stretch {
  align-content: stretch;
}

/* Order */
.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-first {
  order: -1;
}

.order-last {
  order: 9999;
}

/* Flex Grow and Shrink */
.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

/* Auto Margins */
.m-auto {
  margin: auto;
}

/* General Gap */
.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-4 {
  gap: 1.5rem;
}

.gap-5 {
  gap: 3rem;
}

/* Row Gap */
.row-gap-0 {
  row-gap: 0;
}

.row-gap-1 {
  row-gap: 0.25rem;
}

.row-gap-2 {
  row-gap: 0.5rem;
}

.row-gap-3 {
  row-gap: 1rem;
}

.row-gap-4 {
  row-gap: 1.5rem;
}

.row-gap-5 {
  row-gap: 3rem;
}

/* Column Gap */
.column-gap-0 {
  column-gap: 0;
}

.column-gap-1 {
  column-gap: 0.25rem;
}

.column-gap-2 {
  column-gap: 0.5rem;
}

.column-gap-3 {
  column-gap: 1rem;
}

.column-gap-4 {
  column-gap: 1.5rem;
}

.column-gap-5 {
  column-gap: 3rem;
}

/* Margin - All Sides */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: 0.25rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-3 {
  margin: 1rem;
}
.m-4 {
  margin: 1.5rem;
}
.m-5 {
  margin: 3rem;
}
.m-auto {
  margin: auto;
}

/* Margin - Top */
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 1.5rem;
}
.mt-5 {
  margin-top: 3rem;
}
.mt-auto {
  margin-top: auto;
}

/* Margin - End (Right or LTR/RTL end) */
.me-0 {
  margin-right: 0;
}
.me-1 {
  margin-right: 0.25rem;
}
.me-2 {
  margin-right: 0.5rem;
}
.me-3 {
  margin-right: 1rem;
}
.me-4 {
  margin-right: 1.5rem;
}
.me-5 {
  margin-right: 3rem;
}
.me-auto {
  margin-right: auto;
}

/* Margin - Bottom */
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 1rem;
}
.mb-4 {
  margin-bottom: 1.5rem;
}
.mb-5 {
  margin-bottom: 3rem;
}
.mb-auto {
  margin-bottom: auto;
}

/* Margin - Start (Left or LTR/RTL start) */
.ms-0 {
  margin-left: 0;
}
.ms-1 {
  margin-left: 0.25rem;
}
.ms-2 {
  margin-left: 0.5rem;
}
.ms-3 {
  margin-left: 1rem;
}
.ms-4 {
  margin-left: 1.5rem;
}
.ms-5 {
  margin-left: 3rem;
}
.ms-auto {
  margin-left: auto;
}

/* Margin - Horizontal (Left and Right) */
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-4 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-5 {
  margin-left: 3rem;
  margin-right: 3rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Margin - Vertical (Top and Bottom) */
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* General Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Top Padding */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

/* Bottom Padding */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

/* Left Padding (Start in LTR) */
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

/* Right Padding (End in LTR) */
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

/* Horizontal Padding (Left and Right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

/* Vertical Padding (Top and Bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }


/* line-height */

.lh-1 {
  line-height: 1!important;
}

.lh-2 {
  line-height: 1.25!important;
}

.lh-3 {
  line-height: 1.5!important;
}

/* gtrack-tabs2 */

.gtrack-tabs2>li.active>a, 
.gtrack-tabs2>li.active>a:hover, 
.gtrack-tabs2>li.active>a:active,
.gtrack-tabs2>li.active>a:focus {
  border-color: transparent;
  border-bottom-color: #71717A !important;
  background: transparent;
}

.nav-tabs.gtrack-tabs.gtrack-tabs2 {
  border-bottom: 1px solid #E4E4E7;
}

.gtrack-tabs2>li:active {
  background: transparent;
}

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

/* group project panel */

.group-project-panels {
  display: grid;
  grid-template-columns: 23.8% 23.8% 23.8% 23.8%;;
  gap: 16px;
  justify-content: center;
}

.group-project-panels .gt-panel.with-checkbox {
  width: calc(100% - 18px);
}

.group-project-panels input[type="checkbox"].for-panel {
  margin-right: 6px;
}

input.for-panel:checked+.gt-panel {
  border: 1px solid #fff;
  box-shadow: 0 0 0px 1px #fff, 0 0 0px 3px #005cc8;
}

@media screen and (max-width: 1280px) {
  .group-project-panels {
    grid-template-columns: 32% 32% 32%;
  }
}

@media screen and (max-width: 1080px) {
  .group-project-panels {
    grid-template-columns: 50% 50%;
  }
}

@media screen and (max-width: 980px) {
  .group-project-panels {
    grid-template-columns: 100%;
  }
}

.group-project-panels .panel-heading p {
  margin: 0;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.group-project-panels .panel-heading>div:nth-child(1) {
  overflow: hidden;
  max-width: 50%;
}

.group-project-panels .panel-heading>div:only-child {
  max-width: none;
}

.group-project-panels .panel-heading>div:nth-child(1) small {
  display: block;
  line-height: 1.1;
}

.group-project-panels .panel-heading>div:nth-child(2) {
  min-width: 54px;
  text-align: center;
  background: #fff;
  padding: 4px 8px;
  /* white-space: nowrap; */
  border-radius: 8px;
  line-height: 1.1;
}

.group-project-panels .panel-body>section {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 12px;
}

.group-project-panels .panel-body>section>div {
  display: flex;
  gap: 8px;
}

.group-project-panels .panel-body>section i {
  position: relative;
  bottom: -2px;
}

.group-project-panels .panel-body>section p {
  line-height: 1.25;
  font-size: 12px;
  margin: 0;
}

.group-project-panels .panel-footer .label {
  font-size: 12px;
  font-weight: 600;
}

/* grid */

.d-grid {
  display: grid;
}

.grid-col-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-col-2-s33 {
  grid-template-columns: 1fr 66%;
}

/* cb */

label.gt-check {
  font-weight: 600;
  cursor: pointer;
}

label.gt-check input {
  position: relative;
  top: 2px;
}

input[type="checkbox"] {
  cursor: pointer;
}

/* button */

.gt-btn {
  padding: 8px 12px !important;
  border-radius: 5px !important;
  font-family: "Inter", sans-serif;
  line-height: 1;
  min-width: auto;
  height: auto!important;
}

.gt-btn.btn-primary {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* Font Inter */

.font-inter {
  font-family: "Inter", sans-serif;
}

.font-inter.btn {
  line-height: 1;
}

/* custom gt-panel */

.gt-panel {
  border-radius: 10px;
  border-color: #D3D3D3;
  margin: 0;
}

.gt-panel>.panel-body {
  font-size: 12px;
}

.gt-panel>.panel-heading {
  border-radius: 8px 8px 0 0;
  color: #fff;
}

.gt-panel>.panel-footer {
  border-radius: 0 0 8px 8px;
  background-color: transparent;
  font-size: 12px;
}

/* gt-panel danger */

.gt-panel.panel-danger>.panel-heading {
  background: #E02C25;
  border-color: #E02C25;
}

.gt-panel.panel-danger>.panel-heading>div:nth-child(2) {
  color: #E02C25;
}

/* .gt-panel.panel-danger>.panel-footer {
  color: #E02C25;
} */

.gt-btn.btn-danger {
  background-color: #FFD1CF !important;
  color: #E02C25 !important;
  border: 1px solid #E02C25 !important;
}

/* gt-panel warning */

.gt-panel.panel-warning>.panel-heading {
  background: #E8AA00;
  border-color: #E8AA00;
}

.gt-panel.panel-warning>.panel-heading>div:nth-child(2) {
  color: #E8AA00;
}

/* .gt-panel.panel-warning>.panel-footer {
  color: #E8AA00;
} */

.gt-btn.btn-warning {
  background-color: #FFF5D5 !important;
  color: #E8AA00 !important;
  border: 1px solid #E8AA00 !important;
}

/* gt-panel success */

.gt-panel.panel-success>.panel-heading {
  background: #199217;
  border-color: #199217;
}

.gt-panel.panel-success>.panel-heading>div:nth-child(2) {
  color: #199217;
}

/* .gt-panel.panel-success>.panel-footer {
  color: #199217;
} */

.gt-btn.btn-success {
  background-color: #C2FFC2 !important;
  color: #199217 !important;
  border: 1px solid #199217 !important;
}

/* gt-panel default */

.gt-panel.panel-default>.panel-heading {
  background: #686868;
  border-color: #686868;
}

.gt-panel.panel-default>.panel-heading>div:nth-child(2) {
  color: #686868;
}

/* .gt-panel.panel-default>.panel-footer {
  color: #686868;
} */

.gt-btn.btn-default {
  background-color: #ebeff7 !important;
  color: #686868 !important;
  border: 1px solid #686868 !important;
}

/* gt-panel light */

.gt-panel.panel-light>.panel-heading {
  background: #9D9D9D;
  border-color: #9D9D9D;
}

.gt-panel.panel-light>.panel-heading>div:nth-child(2) {
  color: #9D9D9D;
}

/* .gt-panel.panel-light>.panel-footer {
  color: #9D9D9D;
} */

.gt-btn.btn-light {
  background-color: #f4f7fc !important;
  color: #9D9D9D !important;
  border: 1px solid #9D9D9D !important;
}

/* gt panel status */

.gt-panel .panel-body section i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
}

.gt-panel .panel-body section .online i {
    color: #00C100;
    background: #C2FFC2;
}

.gt-panel .panel-body section .offline i {
  color: #979BA3;
  background: #EAEAEA;
}

.gt-panel .panel-body section .longtime-offline i {
  color: #457DA8;
  background: #D7EDFF;
}

.gt-panel .panel-body section .breakdown i {
  color: #FF861D;
  background: #FFD2AB;
}

/* gp color info */

.gp-info-dropdown {
  min-width: 500px;
  padding: 12px 0 14px;
}

.gp-info-dropdown>div {
  display: grid;
  grid-template-columns: 18px 1fr;
  margin-bottom: 12px;
  padding: 0 8px
}

.gp-info-dropdown>div:last-child {
  margin-bottom: 0;
}

.gp-info-dropdown>div>i {
  margin: 4px 0;
  font-size: 10px;
}

.gp-info-dropdown>div h5 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
}

.gp-info-dropdown>div p {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  font-family: "Inter", sans-serif;
}

.gp-info-dropdown>div.success i,
.gp-info-dropdown>div.success h5,
.gp-info-dropdown>div.success span {
  color: #199217;
}

.gp-info-dropdown>div.warning i,
.gp-info-dropdown>div.warning h5,
.gp-info-dropdown>div.warning span {
  color: #E8AA00;
}

.gp-info-dropdown>div.danger i,
.gp-info-dropdown>div.danger h5,
.gp-info-dropdown>div.danger span {
  color: #E02C25;
}

.gp-info-dropdown>div.default i,
.gp-info-dropdown>div.default h5,
.gp-info-dropdown>div.default span {
  color: #686868;
}
 /* badge */

 .badge {
  background-color: #71717A;
}

.nav-tabs.gtrack-tabs>li>a .badge {
  opacity: 1;
}

/* label */

.label-success {
  background-color: #199217
}

.label-success[href]:focus,.label-success[href]:hover {
  background-color: #188c16
}

.label-warning {
  background-color: #E8AA00
}

.label-warning[href]:focus,.label-warning[href]:hover {
  background-color: #dca202
}

.label-danger {
  background-color: #E02C25
}

.label-danger[href]:focus,.label-danger[href]:hover {
  background-color: #d22923
}

.dashboard4 .tab-content>.active {
  z-index: 100;
  position: relative;
  background: #F0F4F8;
}

.dashboard4 .aspek-safety table td {
  background: #fff;
}

.nav.nav-tabs.gtrack-tabs-square {
  justify-content: end;
  border: none;
}

.nav-tabs.gtrack-tabs.gtrack-tabs-square>li {
  background: #ECEEF2;
  padding: 4px 8px;
  height: 35px;
}

.nav-tabs.gtrack-tabs.gtrack-tabs-square>li:first-child {
  border-radius: 8px 0 0 8px!important;
}

.nav-tabs.gtrack-tabs.gtrack-tabs-square>li:last-child {
  border-radius: 0 8px 8px 0!important;
}

.nav-tabs.gtrack-tabs.gtrack-tabs-square>li>a {
  border: none !important;
  border-bottom: none;
  padding: 4px 16px;
  border-radius: 4px !important;
  background: transparent;
}

/* .nav-tabs.gtrack-tabs.gtrack-tabs-square>li.active>a {
  background: #fff;
} */

/* Dashboard Hauling */

.dashboard-hauling {
  padding: 16px 6px 16px 16px;
}

.dashboard-hauling .dashboard-header-buttons {
  margin-bottom: 16px;
  justify-content: space-between;
}

.dashboard-hauling .dashboard-header-buttons select {
  min-width: 50%!important;
}

.dashboard-hauling .btn-layout {
  padding: 6px 12px 10px;
}

.dashboard-hauling .btn-layout svg {
  position: relative;
  bottom: -4px;
}

.gtpanel {
  background: #F0F4F8;
  width: 100%;
  border: 1px solid #C1D0DA;
  border-radius: 8px;
  position: relative;
  /* padding: 8px; */
}

.gtpanel.min .gtpanel-body {
  display: none;
}

.gtpanel-inside.min .gtpanel-body {
  display: none;
}

.gtpanel-inside.min .gtpanel-footer {
  display: none;
}

.gtpanel.min .fa-minus:before {
  content: "\f067";
}

.gtpanel {
  animation: bounce2 0.3s ease-out;
}

.gtpanel-header {
  background: #C2E8E8;
  padding: 8px;
  border-radius: 8px 8px 0 0;
  color: #094C4C;
  display: flex;
  justify-content: space-between;
}

.gtpanel-header>div:last-child {
  display: flex;
  gap: 16px;
  padding: 4px;
}

.gtpanel-header>div:last-child>i,
.gtpanel-header>div:last-child>div>i {
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  height: fit-content;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  transition: .2s;
}

.gtpanel-header>div:last-child>i:hover,
.gtpanel-header>div:last-child>div>i:hover {
  background: #ccf5f5;
  z-index: 10;
}

.gtpanel-header>div:last-child div {
    margin-top: -2px;
}

.gtpanel-header h3 {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.gtpanel-header p {
  margin: 0;
}

.gtpanel-body {
  padding: 8px;
  border-radius: 0 0 8px 8px;
}

.gtpanel.white {
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  padding: 16px;
}

.text-white {
  color: #fff;
}

/* -------- */

.bg-cover {
  background-size: cover;
}

.bg-unit-info1 {
  background-size: 580px;
  background-position: 50% 15%;
}

.bg-unit-info2 {
  background-size: 580px;
  background-position: 67% 73%;
}

.bg-orange-gradient {
  background: url('../../assets/img/pattern/road-pattern.svg'), linear-gradient(180deg, #FF6F31 0%, #ED2F05 100%);
}

.bg-red-gradient {
  background: url('../../assets/img/pattern/road-pattern.svg'), linear-gradient(180deg, #FD4C51 0%, #840204 100%);
}

.bg-teal-gradient {
  background: url('../../assets/img/pattern/road-pattern.svg'), linear-gradient(180deg, #09A19F 0%, #0A5555 100%);
}

.bg-gray-gradient {
  background: url('../../assets/img/pattern/road-pattern.svg'), linear-gradient(180deg, #797A7C 0%, #4B4A4A 100%);
}

.bg-green-gradient {
  background: url('../../assets/img/pattern/road-pattern.svg'), linear-gradient(180deg, #1BCE59 0%, #0F9A3F 100%);
}

.bg-yellow-gradient {
  background: url('../../assets/img/pattern/road-pattern.svg'), linear-gradient(180deg, #FFD321 0%, #ED8F01 100%);
}


/* -------- */

.bg-green {
  background: url('../../assets/img/pattern/green.svg') #27b357;
}

.bg-mediumgreen {
  background: url('../../assets/img/pattern/light-green.svg') #0ebb75
}

.bg-lightgreen {
  background-color: #dcfce7;
}

.text-green {
  color: #3E6C18;
}

.bg-red {
  background: url('../../assets/img/pattern/red.svg') #ff2f2f;
}

.bg-lightred {
  background-color: #ffc5c6;
}

.bg-blue {
  background: url('../../assets/img/pattern/blue.svg') #516aff;
}

.bg-orange2 {
  background: url('../../assets/img/pattern/orange.svg') #f98d03;
}


.bg-lightblue {
  background-color: #c6ddff;
}

.text-blue {
  color: #21547D;
}

.bg-darkorange {
  background: url('../../assets/img/pattern/orange.svg') #ff5c1c;
}

.bg-lightorange {
  background-color: #ffc898;
}

.text-paleorange {
  color: #C06C22;
}

.bg-lightgray {
  background-color: #e9e9e9;
}

.bg-gray {
  background: url('../../assets/img/pattern/gray.svg') #676767;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.gtpanel.white .gtpanel-header {
  color: inherit;
  background: transparent;
  border-bottom: 1px solid #C1D0DB;
  padding: 0 0 8px;
}

.gtpanel.white .gtpanel-body {
  padding: 8px 0;
}

.gt-card {
  border: 1px solid #c1d0da;
  border-radius: 8px;
  padding: 6px;
}

.gt-card.default {
  background-color: #edf0f3;
}

.gt-card.success {
  background-color: #159334;
  color: #fff;
}

.gt-card.warning {
  background-color: #ff7912;
  color: #fff;
}

.gt-card.danger {
  background-color: #f84949;
  color: #fff;
}

.gt-card.white {
  background-color: #fff;
}

.gt-card .text-default {
  color: #707E88;
}

.gt-card .text-success {
  color: #117E3C;
}

.gt-card .text-warning {
  color: #FF7912;
}

.gt-card .text-danger {
  color: #F84949;
}

.gtpanel.bgmap {
  cursor: pointer;
  display: flex;
  flex-basis: 380px;
  flex-direction: column;
  justify-content: end;
  color: #fff;
  background: url('../img/btn-map.jpg');
  background-size: cover;
  background-position: bottom center;
}

.gtpanel.bgmap2 {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: #fff!important;
  background: url('../img/btn-map.jpg');
  background-size: cover;
  background-position: bottom center;
}

.fit-content {
  width: fit-content;
  height: fit-content;
}

/* .density-header-cards {
  grid-template-columns: 23% 23% 23% 1fr;
} */

.density-line {
  background: #207575;
  height: 30px;
  width: 7px;
}

.density-line span {
  height: 1px;
  width: 100%;
  border: 1px dashed #fff;
  display: block;
  top: 14px;
  position: relative;
  opacity: .5;
}

/* .density-cards>div:last-child {
  margin-right: auto;
} */

.density-cards .gt-card>span {
  font-weight: 600;
}

.density-cards .gt-card>span>i {
  border-radius: 50%;
  /* width: 22px;
  height: 22px; */
}

.density-cards .gt-card .text-default>i {
  border: 2px solid #C7C7C7;
}

.density-cards .gt-card .text-success>i {
  border: 2px solid #BAF7D2;
}

.density-cards .gt-card .text-warning>i {
  border: 2px solid #F7D7BA;
}

.density-cards .gt-card .text-danger>i {
  border: 2px solid #FFB6B6;
}

.density-cards .gt-card {
  /* width: 120px; */
  width: calc(12.5vw - 32px);
  padding: 6px!important;
}

.minified .density-cards .gt-card {
  width: calc(12.5vw - 28px);
}

.gtpanel.fullscreen .density-cards .gt-card {
  width: calc(10vw - 17px);
}

.gtpanel .density-cards h5 {
  justify-content: space-between;
  width: 100%;
  margin: 6px auto;
}

.gtpanel.fullscreen .density-cards h5 {
  width: calc(100% - 10px);
}

.gtpanel .density-cards h5>.text-muted {
  font-weight: 200;
  transform: scaleX(1.5);
}

.density-cards h5>span:nth-child(2) {
  font-size: 13px;
  font-weight: 600;
}

/* .gtpanel.fullscreen .density-cards h5>span:nth-child(2) {
  font-size: 14px;
} */

.density-cards .gt-card>span {
  font-size: 17px;
  border-radius: 6px;
  padding: 6px 8px;
  display: flex!important;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}

.density-cards .gt-card>span.text-default {
  background-color: #e0e3e5;
  border: 1px solid #C7CDD0;
}

.density-cards .gt-card>span.text-success {
  background-color: #cfe5d8;
  border: 1px solid #a9d0b9;
}

.density-cards .gt-card>span.text-warning {
  background-color: #ffe4d0;
  border: 1px solid #ffcfaa;
}

.density-cards .gt-card>span.text-danger {
  background-color: #fedbdb;
  border: 1px solid #fdbebe;
}

.density-cards>div:first-child>.density-line:first-child,
.density-cards>div:last-child>.density-line:last-child {
  /* display: none; */
  opacity: 0;
}

.btn-lightgreen {
  color: #207575;
  background-color: #E6F2F2;
  border: 1px solid #5DA7A7;
  border-radius: 5px;
  font-weight: 500;
}

.btn-lightgreen:hover, .btn-lightgreen:active, .btn-lightgreen:focus {
  color: #207575;
}

.btn-green {
  color: #e6f2f2;
  background-color: #207575;
  border: 1px solid #5da7a7;
  border-radius: 5px!important;
  font-weight: 500;
}

.btn-green:hover, .btn-green:active, .btn-green:focus {
  color: #e6f2f2;
}

.btn-orange {
  color: #fff;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 5px!important;
  font-weight: 500;
}

.btn-orange:hover, .btn-orange:active, .btn-orange:focus {
  color: #fff;
}

.btn-orange:active {
  left: initial;
  top: initial;
  margin-right: -1px;
  margin-bottom: -1px;
}

.btn-orange:focus {
  box-shadow: none!important;
}

.btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:hover {
  box-shadow: none!important;
}

.btn-outline-primary {
  border-radius: 5px !important;
}

.gtpanel:not(.fullscreen) .gtpanel-body.with-fixed-footer {
  padding-bottom: 48px!important;
}

.gtpanel:not(.fullscreen) .gtpanel-body.with-fixed-footer+.gtpanel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

.gtpanel-body.with-fixed-footer+.gtpanel-footer {
    width: 100%;
    padding: 8px;
}

.gtpanel.fullscreen {
  position: fixed;
  z-index: 9000;
  top: 6px;
  left: 6px;
  height: calc(100vh - 13px);
  width: calc(100vw - 11px);
  margin: 0;
  animation: bounce1 0.3s ease-out;
}

.gtpanel.gtpanel-inside.expanded {
  animation: bounce1 0.3s ease-out;
}

.gtpanel.fullscreen:not(.white)>.gtpanel-body {
  overflow: auto;
  height: calc(100vh - 73px);
}

body.noscroll-withbg {
  overflow: hidden;
}

body.noscroll-withbg:before {
  height: 100vh;
}

.gtpanel.fullscreen .gtpanel.white .gtpanel-body.with-fixed-footer {
  overflow: auto;
  height: calc(100vh - 215px);
}

.gtpanel.fullscreen .gtpanel.white .gtpanel-body.with-fixed-footer::-webkit-scrollbar {
  width: 16px;
}

.gtpanel.fullscreen .gtpanel.white .gtpanel-body.with-fixed-footer::-webkit-scrollbar-track {
  background: transparent;
}

.gtpanel.fullscreen .gtpanel.white .gtpanel-body.with-fixed-footer::-webkit-scrollbar-thumb {
  background-color: #DAE0EC;
  border: 5px solid #fff;
  border-radius: 8px;
}

.gtpanel.fullscreen>div>div>.fa-expand:before {
  content: "\f066";
}

.gtpanel-inside.expanded>div>div>.fa-expand:before {
  content: "\f066";
}

.w-100 {
  width: 100%;
}

.table-green thead tr {
  background: #207575;
  color: #e6f2f2;
}

.table-green>tbody>tr>td, .table-green>thead>tr>th {
  vertical-align: middle;
  text-align: center;
}

.table-green>tbody>tr>td {
  padding: 4px;
}

.table-green>thead>tr>th {
  padding: 10px 4px;
}

.table-green.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #D8F2EE !important;
}

.table-green.table-striped>tbody>tr:nth-of-type(even) {
  background-color: #ECF9F7 !important;
}

.table-green>thead>tr>th:first-child {
  border-radius: 5px 0 0 0;
}

.table-green>thead>tr>th:last-child {
  border-radius: 0 5px 0 0;
}

.table-green>thead>tr>th {
  border: none;
}

.pagination-green li.active>a:not(.page-link),
.pagination-green li.active>a:hover:not(.page-link) {
  background: #207575 !important;
  border-color: #207575 !important;
}

.pagination-green>li>a[aria-label="Previous"]:hover, .pagination-green>li>a[aria-label="Next"]:hover, .pagination-green>li>a[aria-label="Previous"]:focus, .pagination-green>li>a[aria-label="Next"]:focus,
.pagination-green>li>a:focus, .pagination-green>li>a:hover, .pagination-green>li>span:focus, .pagination-green>li>span:hover {
  color: #207575 !important;
  background-color: #D8F2EE !important;
  border-color: #207575;
}

.pagination-green>li>a, .pagination-green>li>span {
  transition: .2s;
  color: #207575 !important;
  border-color: #207575;
  border-radius: 5px !important;
  margin: 0 2px;
}

.pagination-green {
  margin: 0;
}

@keyframes bounce1 {
  0% {
    transform: scale(.8);
  }
  20% {
    transform: scale(1.01);
    filter:brightness(1.05) contrast(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce2 {
  0% {
    transform: scale(1.05);
  }
  20% {
    transform: scale(.99);
    filter:brightness(1.05) contrast(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Datatable Green */

.dt-green .dataTables_wrapper .table thead tr:first-child th,
.dt-green .dataTable.fixedHeader-floating thead:first-child tr:first-child th {
  background: #207575;
}

.dt-green .table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #D8F2EE !important;
}

.dt-green .table-striped>tbody>tr:nth-of-type(even) {
  background-color: #ECF9F7 !important;
}

/* change padding for popup layout */

.popup #content {
  padding-top: 16px;
}

/* form ritase */

.dashboard-hauling .form-ritase span.select2 {
  width: 100% !important;
}

.dashboard-hauling .form-ritase {
  grid-template-columns: 1fr 100px 1fr 100px 1fr;
}

/* monitoring v1 dataTables_scrollBody */
.vehicle-monitoring .card.card-datatable-container .dataTables_scrollBody {
  max-height: calc(100vh - 274px) !important;
}

.popinfo_v5 span img {
  margin-right: 3px;
}

.popinfo_v5 .popinfo meter {
  position: relative;
  bottom: -2px;
}

/* Personal Monitoring */

.personal-monitoring .dashboard-header-buttons span {
  white-space: nowrap;
}

.no-min-height {
  min-height: unset !important;
  height: auto !important;
}

.r45 {
  transform: rotate(45deg);
}

.personnel-monitoring .container-content.map {
  min-height: 144px;
  position: relative;
}

.personnel-monitoring .container-content.map a {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.personnel-monitoring .map2 {
  min-height: 236px;
  height: 236px;
}

.personnel-data {
  display: grid;
  /* grid-template-columns: 164px 16px 1fr; */
  grid-template-columns: 28% 2% 70%;
  align-items: center;
}


.personnel-data img {
  /* max-width: 100%;
  width: 164px;
  height: 164px;
  object-fit: cover;
  border-radius: 8px; */
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
}

.personnel-data p {
  margin: 0;
  font-size: 12px;
}

.personnel-data h5 {
  font-weight: 600;
  font-size: 14px;
}

.personnel-data .detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 8px;
}

.personnel-data .detail-type {
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  gap: 6px;
  padding: 6px 0;
}

.personnel-monitoring .dataTables_wrapper .table thead tr:first-child th, 
.personnel-monitoring .dataTable.fixedHeader-floating thead:first-child tr:first-child th {
  height: auto;
}

.personnel-monitoring .table.dataTable th {
  padding: 10px 4px !important;
}

.personnel-monitoring .table.dataTable td {
  padding: 10px 4px!important;
  white-space: break-spaces !important;
}

.personnel-monitoring .table.dataTable th.input {
  padding: 4px 0 0 !important;
}

.gt-badge {
  background: #e6f4ff;
  padding: 2px 10px;
  border-radius: 16px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.gt-badge .badge {
  border-radius: 16px;
  background: #0091ff;
  margin-left: 4px;
}

.gt-badge.active {
  background: #0091ff;
  color: #fff;
  padding: 2px 6px;
  border-radius: 16px;
  font-size: 12px;
  white-space: nowrap;
}

.gt-badge.active .badge {
  background: #fff;
  color: #0091ff;
}

.nodata {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

.personnel-monitoring .movement-activity {
  position: fixed;
  z-index: 1000;
  background: #f0f4f8;
  top: 65px;
  width: calc(100% - 243px);
  border-radius: 8px;
  height: calc(100vh - 71px);
  right: 6px;
  padding: 0 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

.personnel-monitoring .movement-activity::-webkit-scrollbar {
  width: 6px;
}

.personnel-monitoring .movement-activity::-webkit-scrollbar-track {
  background: transparent;
}

.personnel-monitoring .movement-activity::-webkit-scrollbar-thumb {
  background-color: #DAE0EC;
  border-radius: 8px;
}

.minified .personnel-monitoring .movement-activity {
  width: calc(100% - 68px);
}

.personnel-monitoring .movement-activity .btn-back {
  height: 38px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  box-shadow: none;
  font-size: 14px;
}

.personnel-monitoring .movement-activity .personnel-data {
  grid-template-columns: 164px 16px 360px;
  align-items: center;
}

.personnel-monitoring .movement-activity .map3 {
  height: 100px;
  margin-bottom: 24px;
}

.personnel-monitoring .movement-activity .tab-content>.active {
  background: #fff;
}

#TablePersonnelEvent_filter.dataTables_filter {
  display: flex;
}

.personnel-monitoring .table.dataTable tr[style="height: 0px;"] th {
  padding: 0!important;
}

.gt-btn-group {
  border-radius: 7px !important;
  border: 1px solid #ebebeb;
}

.gt-btn-group .btn {
  padding: 6px 12px;
  font-size: 12px;
  background: #fff;
  border-right: 1px solid #ebebeb;
  border-left: 1px solid #ebebeb;
  border-radius: 4px;
  box-shadow: none;
  font-weight: 500;
}

.gt-btn-group .btn.active, .gt-btn-group .btn:hover, .gt-btn-group .btn:active, .gt-btn-group .btn:focus {
  background: #207575;
  color: #fff;
}

.gt-btn-group .btn:first-child, .gt-btn-group .btn:last-child {
  /* border: none; */
  margin-left: 0;
}

.nav-tabs.no-border>li>a {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

.hide1 {
  display: none;
}

.dashboard-hauling button.btn.btn-layout.btn-primary.white.mb-1 {
  display: none;
}

.nav.nav-tabs.gtrack-tabs li a {
  opacity: .7;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav.nav-tabs.gtrack-tabs li.active a {
    opacity: 1;
}

.dashinfo.top h4 {
  font-weight: 500;
  font-size: 14px;
}

meter.mtr-mining1 {
  --background: #207575;
  --optimum: #ff8426;
  --sub-optimum: #ff8426;
  --sub-sub-optimum: #ff8426;
  display: block;
  width: 100%;
  height: 32px;
    border-radius: 0;
}

/* The gray background in Chrome, etc. */
meter.mtr-mining1::-webkit-meter-bar {
  background: var(--background);
}

/* The green (optimum) bar in Firefox */
meter.mtr-mining1:-moz-meter-optimum::-moz-meter-bar {
  background: var(--optimum);
}

/* The green (optimum) bar in Chrome etc. */
meter.mtr-mining1::-webkit-meter-optimum-value {
  background: var(--optimum);
}

/* The yellow (sub-optimum) bar in Firefox */
meter.mtr-mining1:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--sub-optimum);
}

/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
  background: var(--sub-optimum);
}

/* The red (even less good) bar in Firefox */
meter.mtr-mining1:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter.mtr-mining1::-webkit-meter-even-less-good-value {
  background: var(--sub-sub-optimum);
}

.gtpanel.green .gtpanel-header {
  background: #207575;
  color: #fff;
}

.gtpanel.green .gtpanel-header>div:last-child>i:hover {
  color: #207575;
}

.gtpanel.green .gtpanel-body {
  background: #fff;
}

.btn-sumdat {
  font-size: 16px;
  line-height: 1;
  padding: 8px 14px !important;
  height: 39px;
}

.bggreen,
.modal-footer .btn-primary {
  background-color: #207575 !important;
}

button#btnSumData {
  font-size: 15px;
  padding: 7px 16px !important;
}

.label.gt-label {
  padding: 4px 6px;
}

.label.gt-label.label-success {
  background: #d8f2ee;
  color: #006454;
}

.label.gt-label.label-danger {
  background: #ffd3d0;
  color: #cd2011;
}

.dashboard-mining .gtpanel-body h2 {
    font-weight: 700;
}

.dashboard-mining .table-striped-columns th:nth-child(even), 
.dashboard-mining .table-striped-columns td:nth-child(even) {
    background: #D8F2EE;
}

.dashboard-mining .table-striped-columns th:nth-child(odd), 
.dashboard-mining .table-striped-columns td:nth-child(odd) {
    background: #f0f4f8;
}


i.btn-modal {
  color: #fff;
  top: 27px;
  position: absolute;
  cursor: pointer;
  right: 60px;
}

.dropdown-menu.dropdown-menu-modal {
  right: 15px;
  width: 154px;
  left: auto;
  top: 45px;
}

.modal-body .sumheader {
  grid-template-columns: 78px 10px 1fr;
}

.block-equipment>div:first-child .gtpanel.white {
  height: 90px;
} 

/* @media screen and (max-height: 700px) {
  .block-equipment>div:first-child .gtpanel.white {
    height: 61px;
    padding: 10px 16px;
  }
  .block-equipment>div:first-child .gtpanel.white h4 {
    line-height: .5;
  }
  .block-equipment>div:first-child .gtpanel.white h2 {
    font-size: 20px;
  }
  .dashboard-mining .table-striped-columns.table>tbody>tr>td, 
  .dashboard-mining .table-striped-columns.table>tbody>tr>th, 
  .dashboard-mining .table-striped-columns.table>tfoot>tr>td, 
  .dashboard-mining .table-striped-columns.table>tfoot>tr>th, 
  .dashboard-mining .table-striped-columns.table>thead>tr>td, 
  .dashboard-mining .table-striped-columns.table>thead>tr>th {
      padding: 4px 10px;
  }
} */

.dashboard-mining .btn.input-group-validation.input-group.reportrange.active {
  background: #fff;
}

body.noscroll-withbg .fullscreen .overlay-datagrid-fixedheader {
  opacity: 0;
  pointer-events: none;
}

.dashboard-mining .gtpanel {
  animation: none;
}

.dashboard-mining .btn.reportrange:hover {
  background: #fff;
}

.dashboard-hauling .gt-card {
  padding: 12px;
}

/* .dashboard-hauling .gtpanel-inside .d-grid.grid-col-3.gap-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  width: 100%;
} */

/* hauling zone info */

.panel-zi .gtpanel-header p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panels-zi .cards {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(6, 1fr);
}

/* 4 Panels */
.panels-zi:has(.panel-zi:nth-child(4)) .panel-zi .cards {
  grid-template-columns: repeat(2, 1fr);
}

.panels-zi:has(.panel-zi:nth-child(4)) .panel-zi .gtpanel-header p {
  max-width: calc(25vw - 156px);
}

.minified .panels-zi:has(.panel-zi:nth-child(4)) .panel-zi .gtpanel-header p {
  max-width: calc(25vw - 114px);
}

/* 3 Panels */

.panels-zi:has(.panel-zi:nth-child(3)):not(:has(.panel-zi:nth-child(4))) .panel-zi .cards {
  grid-template-columns: repeat(3, 1fr);
}

.panels-zi:has(.panel-zi:nth-child(3)):not(:has(.panel-zi:nth-child(4))) .panel-zi .gtpanel-header p {
  max-width: calc(33.3vw - 180px);
}

.minified .panels-zi:has(.panel-zi:nth-child(3)):not(:has(.panel-zi:nth-child(4))) .panel-zi .gtpanel-header p {
  max-width: calc(33.3vw - 122px);
}

/* 2 Panels */

.panels-zi:has(.panel-zi:nth-child(2)):not(:has(.panel-zi:nth-child(3))) .panel-zi .cards {
  grid-template-columns: repeat(4, 1fr);
}

.panels-zi:has(.panel-zi:nth-child(2)):not(:has(.panel-zi:nth-child(3))) .panel-zi .gtpanel-header p {
  max-width: calc(50vw - 228px);
}

.minified .panels-zi:has(.panel-zi:nth-child(2)):not(:has(.panel-zi:nth-child(3))) .panel-zi .gtpanel-header p {
  max-width: calc(50vw - 140px);
}

/* Fullscreen Panel */

.panels-zi .panel-zi.expanded .cards {
	grid-template-columns: repeat(8, 1fr)!important;
}

.panels-zi .panel-zi.expanded .gtpanel-header p {
  max-width: none!important;
}

.dashboard-mining  .reportrange {
  display: contents;
}

.dashboard-mining #reportrange {
 width: 154px;
 height: 33px;
}

.dashboard-mining .reportrange .input-group-addon i {
position: relative;
top: 2px;
}

/* .modal-backdrop.in+.modal-backdrop.in {
  z-index: 1091!important;
} */

.jarviswidget-loader {
  color: #fff;
  line-height: 40px;
}

.card-draggable .list-group-item .vehicle-row .d-flex {
  align-items: center;
  margin-top: 1px;
  /* height: 21px; */
}

.card-draggable.live-video .list-group-item .vehicle-row .d-flex {
  margin: 3px 0 5px;
}

.card-draggable .list-group-item .call {
    color: var(--secondary);
    font-weight: 700;
    margin: 2px 0 0 5px;
    cursor: pointer;
    height: 16px;
}

.card-draggable .list-group-item .fuel span {
  font-size: 80%;
  font-weight: 600;
  position: relative;
  margin: 0 4px 0 2px;
  top: 2px;
}

.card-draggable .list-group-item .fuel i {
  position: relative;
  top: 1px;
}

.card-draggable .list-group-item .fuel .text-success {
  color: #107c10!important;
}

.card-draggable .list-group-item .fuel .text-warning {
  color: #fb8c00!important;
}

.card-draggable .list-group-item .fuel .text-danger {
  color: #d83b01!important;
}

.modal.talk .modal-dialog {
  width: 800px;
}

.modal.talk .talk-ui {
  display: grid;
  grid-template-columns: 1fr 50%;
  align-items: center;
  margin-top: 16px;
}

.modal.talk .talk-ui>div:last-child {
  text-align: center;
  padding: 16px;
}

.modal.talk .talk-ui h4 {
  margin: 8px 0;
  font-weight: 700;
  line-height: 1.3;
}

.modal.talk .video-container {
  width: 400px;
  height: 300px;
  background-image: url(../img/novideo.png);
  background-size: cover;
  background-position: center;
}

.modal.talk .msfx {
  margin: 0;
  padding: 0;
  min-width: 100%;
  min-height: 60px;
  font-family: sans-serif;
  color: #000;
  background: #fff;
  margin-bottom: 16px;
}

.modal.talk .msfx button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5em;
  height: 2em;
  margin-left: -2.5em;
  margin-top: -1em;
  z-index: 100;
  padding: 0.25em 0.5em;
  color: #fff;
  background: #000;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.15em;
  font-weight: 200;
  box-shadow: 0 0 10px rgba(255, 255, 255, .5);
  transition: box-shadow 0.5s;
}
.modal.talk .msfx button:hover {
  box-shadow: 0 0 30px 5px rgba(255, 255, 255, .75);
}
.modal.talk .msfx .msfx {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal.talk .msfx .msfx > div {
  display: inline-block;
  width: 3px;
  height: 100px;
  margin: 0 7px;
  background: currentColor;
  transform: scaleY(0.5);
  opacity: 0.25;
}
.modal.talk .msfx .msfx.error {
  color: #f7451d;
  min-width: 20em;
  max-width: 30em;
  margin: 0 auto;
  white-space: pre-line;
}

.talk-ui .alert {
  padding: 6px 12px;
}

.talk-ui .alert.alert-warning {
  color: #B38600;
}

.talk-ui .alert.alert-success {
  color: #1DAA3E;
}

.tmh-map {
  position: relative;
  /* background: #ccc; */
  width: calc(100% - 19px);
  height: calc(100vh - 120px);
  margin: 64px 0 0 14px;
  border-radius: 8px;
}

.tmh-map#map {
  width: calc(100% - 19px);
}

.tmh-map small#err-msg-area {
    margin-top: 3px;
    position: absolute;
}

.tmh-map button#btnShowTraffic {
    margin-right: -16px;
}

.tmh-map h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 3px 0;
}

.tmh-sfleet {
  overflow: hidden;
  padding: 16px 32px 16px 16px;
  background: #fff;
  width: 390px;
  height: auto;
  position: absolute;
  left: 16px;
  top: 16px;
  border-radius: 6px;
  transition: .2s;
  max-height: 200px;
}

.tmh-sfleet label {
    white-space: nowrap;
}

.tmh-sfleet.closed {
  padding: 8px 16px;
  max-height: 37px;
  /* border-radius: 6px 6px 0 0; */
}

.tmh-sfleet .toggle,
.tmh-btn-settings .toggle {
  cursor: pointer;
  transition: .2s .2s;
  position: absolute;
  right: 6px;
  top: 5px;
  padding: 8px 0px;
  /* background: #ebeff7; */
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.tmh-sfleet .toggle:active,
.tmh-btn-settings .toggle:active {
  background: #ebeff7;
  transition: 0s;
}

.tmh-sfleet.closed .toggle,
.tmh-btn-settings.closed .toggle {
  transform: rotateX(180deg);
}

.tmh-btn-settings {
  padding: 8px 16px;
  background: #fff;
  position: absolute;
  right: 16px;
  top: 16px;
  border-radius: 6px 6px 0 0;
  width: 144px;
  transition: all .2s, border-radius 0s;
  transform-origin: top right;
  z-index: 5;
}

.tmh-btn-settings.closed {
  border-radius: 6px;
  transition: border-radius .2s .2s;
}

.tmh-btn-settings .fa-cog {
  font-size: 16px;
}

.tmh-settings {
  overflow: hidden;
  padding: 16px;
  background: #fff;
  width: 450px;
  max-width: 450px;
  /* height: 392px; */
  max-height: 400px;
  position: absolute;
  right: 16px;
  top: 52px;
  border-radius: 6px 0 6px 6px;
  transition: .2s, border-radius .1s, max-width .2s .1s;
}

.tmh-settings .tabStatus {
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .438rem 0;
}

@media screen and (max-height: 630px) {
  .tmh-settings {
      max-height: calc(100vh - 240px);
      overflow-y: auto;
  }
  .tmh-settings::-webkit-scrollbar {
  width: 16px;
  }
  .tmh-settings::-webkit-scrollbar-track {
    background: transparent;
  }
  .tmh-settings::-webkit-scrollbar-thumb {
    background-color: #DAE0EC;
    border: 5px solid #fff;
    border-radius: 8px;
  }
}

.tmh-settings.multiple-monitoring {
  max-height: 292px;
}

.tmh-btn-settings.closed+.tmh-settings  {
  max-height: 1px;
  max-width: 144px;
  pointer-events: none;
  margin-top: -36px;
  border-radius: 6px;
  transition: .2s, margin .2s .2s, border-radius .2s .2s;
}

.tmh-settings .gt-btn-group-orange  {
  opacity: 1;
  transition: .2s .2s;
}

.tmh-btn-settings.closed+.tmh-settings .gt-btn-group-orange  {
  opacity: 0;
  transition: .1s;
}

.tmh-btn-settings.closed+.tmh-settings h4 {
  opacity: 0;
  transition: .2s;
}

.tmh-settings .legend-grid {
  display: grid;
  grid-template-columns: 126px 1fr;
  margin-top: 6px;
  margin-bottom: -3px;
  align-items: center;
  gap: 10px;
  position: relative;
}

.tmh-map .tmh-settings .legend-grid i {
    position: absolute;
    left: 10px;
    z-index: 10;
    top: 9px;
    transform: scale(1, .5);
}

.tmh-settings .legend.sangat-padat {
  background: #ccc;
  border-radius: 4px;
  height: 12px;
}

.tmh-map .legend {
  background: #A7AAAF;
  border-radius: 4px;
  height: 12px;
}

.tmh-map .gray {
  background: #A7AAAF;
}

.tmh-map .legend.darkred {
  background: #B20F0F;
}

.tmh-map .legend.red {
  background: #FE1616;
}

.tmh-map .legend.yellow {
  background: #EBB000;
}

.tmh-map .legend.green {
  background: #28A745;
}

.tmh-map .legend.blue {
  background: #0091FF;
}

.tmh-map .legend-grid>div {
  position: relative;
}

.tmh-settings .legend-grid>div>span {
  position: absolute;
  top: 6px;
  right: 34px;
  opacity: .5;
}

.tmh-settings .legend-grid>div>i {
    position: absolute;
    left: 12px;
    top: 9px;
    font-weight: 400;
    transform: scale(1, .5);
}

.tmh-legends-info {
  padding: 8px 16px;
  background: #fff;
  position: absolute;
  right: 16px;
  bottom: 16px;
  border-radius: 6px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.tmh-legends-info .legend {
  width: 20px;
}

.tmh-legends-info span {
  margin-right: 12px;
}

.tmh-legends-info span:last-child {
  margin: 0;
}

.tmh-map .no-tracking-data {
  /* background: transparent; */
  display: flex;
  flex-direction: column;
  width: calc(100% + 2px);
  height: calc(100vh - 122px);
  margin: 8px 0 0 4px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

.tmh-map .no-tracking-data h6 {
  font-weight: 700;
  font-size: 12px;
}

.no-tracking-data img {
  margin-top: -48px;
}

.tmh-map .add-right-margin {
  right: 74px;
}

.gt-btn-group-orange {
  display: flex;
}

.gt-btn-group-orange .btn {
  width: 100%;
  box-shadow: none;
  background: #ebeff7;
  border-radius: 0;
  transition: .1s;
}

.gt-btn-group-orange .btn:first-child {
  border-radius: 4px 0 0 4px;
}

.gt-btn-group-orange .btn:last-child {
  border-radius: 0 4px 4px 0;
}

.gt-btn-group-orange .btn.active {
  background: var(--primary);
  color: #fff;
  pointer-events: none;
}

.gt-btn-group-orange .btn:hover {
  background-color: #fd6929;
  color: #fff;
}

.gt-btn-group-orange .btn:active {
  background-color: #ea4c07;
  color: #fff;
  top: 0;
  left: 0;
  transform: scaleY(.95);
}

.text-primary {
  color: var(--primary)!important;
}

.tmh-map .btn,
.tmh-map input,
.tmh-map select {
  font-size: 13px;
}

.tmh-map .legend-grid input {
  padding-left: 26px;
}

.snswitch-container {
  position: relative;
}

.snswitch {
  display: block;
  margin: 16px 0 0 auto;
  width: fit-content;
}

.modal button.btn.btn-default.btn-cancel {
  width: auto !important;
}

.snswitch+.pltooltip {
  position: absolute;
  top: -19px !important;
  margin-right: -3px;
  right: 50px !important;
}

.snswitch+.pltooltip.show {
  opacity: 1;
  visibility: visible;
  letter-spacing: 0;
  margin-right: -7px;
}

.full .card-draggable .list-group-item .call {
  position: relative;
  top: 5px;
  left: -5px;
  font-weight: 600;
}

.full .card-draggable .list-group-item .call i {
  transform: rotatey(180deg);
  margin-right: -2px;
}

/* command center video */

.ccv .nodata img {
  max-height: 300px;
  height: 80%;
  margin: 16px 16px 0;
}

.card-cc-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 16px 0 0;
}

.card-cc {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #9eb5ce;
  overflow: hidden;
}

.card-cc>div:first-child {
  padding: 5px 10px;
  font-size: 27px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: url(../../assets/img/pattern.svg) #207575;
}

.card-cc.danger>div:first-child {
  background: url(../../assets/img/pattern.svg) #d12922;
}

.card-cc.warning>div:first-child {
  background: url(../../assets/img/pattern.svg) #f29807;
}

.card-cc.success>div:first-child {
  background: url(../../assets/img/pattern.svg) #199217;
}

.card-cc .badge {
  color: #1F1F23;
  background: #fff;
  font-weight: 600;
}

.card-cc>div:last-child {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
  font-weight: 600;
  font-size: 14px;
}

/* .ccsettings+.dropdown-menu {
  left: auto;
  right: 0;
} */

.no-click {
  pointer-events: none;
}

.text-purple {
  color: #7B47E9;
}

.text-red {
  color: #E02C25;
}

.btn-gt {
  color: #fff;
  border-radius: 5px;
  box-shadow: none;
  padding: 6px;
  min-width: 28px;
  box-shadow: none;
  background: #ebeff7;
}

.btn-gt:hover, .btn-gt:active, .btn-gt:focus {
  color: #fff;
}

.btn-red {
  background: #E02C25;
}

.btn-yellow {
  background: #FFBF00;
}

.btn-brightgreen {
  background: #1DAA3E;
}

.btn-teal {
  background: #207575;
}

.btn-purple {
  background: #4300AF;
}

.btn-gray {
  background: #A7AAAF;
}

.btn-darkgray {
  background: #4A597A;
}

.btn-blue {
  background: #24A1DE;
}

.alert-video-container {
  display: grid;
  grid-template-columns: 26% 1fr;
  gap: 16px;
}

/* .alert-video-container.live {
  grid-template-columns: 26% 37% 37%;
} */

.alert-video-container>div {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
}

.alert-video-container>div:first-child {
  overflow-x: auto;
  height: calc(100vh - 220px);
}

.alert-video-container.live .videos2 h5 {
  font-size: 13px;
}

.alert-video-container.live .videos2>div>div h4 {
  font-size: 12px;
}

.alert-video-container.live .videos2>div>div i {
  font-size: 28px;
  margin-bottom: 6px;
}

.ccv .unit-info {
  background: url(../../assets/img/car.svg), linear-gradient(90deg, #FB6E34 0%, #FF5A13 44%, #DF4504 100%);
  border-radius: 4px;
  color: #fff;
  padding: 16px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: right;
}

.ccv .unit-info h2, .ccv .unit-info h4 {
  margin: 0;
}

.ccv .unit-info h2 {
  font-weight: 600;
  font-size: 24px;
}

.ccv .unit-info h4 {
  font-weight: 500;
  font-size: 13.5px;
  max-width: 170px;
}

.ccv .alert-name {
  background: url(../../assets/img/pattern.svg) #d12922;
  border-radius: 4px;
  color: #fff;
  padding: 16px;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 32px 1fr;
}

.ccv .alert-name>div:first-child {
  font-size: 18px;
  display: flex;
  align-items: center;
}

.ccv .alert-name p, .ccv .alert-name h4 {
  margin: 0;
}

.ccv .alert-name h4 {
  font-weight: 500;
  font-size: 13.5px;
}

.ccv .alert-name p {
  font-size: 12px;
}

.card-av {
  min-height: 100px;
  border: 1px solid #E6EBFF;
  border-radius: 4px;
  margin-top: 1rem;
  padding: 16px;
}

.card-av.d-flex {
  flex-wrap: wrap;
  gap: 8px 24px;
}

.card-av p {
  font-weight: 600;
  line-height: 1.1;
}

.card-av p:last-child {
  margin-bottom: 0;
}

.card-av p small {
  font-weight: 500;
  display: block;
  margin-bottom: 3px;
}

.card-av.small {
  margin: 0;
  background: #f7fafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: unset;
  padding: 6px 12px 6px 16px;
}

.modal .card-av.d-flex p {
  min-width: 148px;
}

.modal-header.white {
  background: #fff;
}

.modal-header.white .modal-title {
  color: #333;
}

.modal-header.white button {
  color: #000;
}

.modal-header.white button:hover {
  color: #000 !important;
}

.modal .modal-fullscreen .modal-footer button {
  min-width: 110px;
}

.modal-header small {
    color: #fff;
}

/* .modal.alert-video .modal-body {
  background: #f0f4f8;
  padding: 16px;
  max-width: none;
} */

.modal.alert-video .modal-body {
    background: #f0f4f8;
    padding: 16px;
    max-width: none;
    border-radius: 0 0 10px 10px;
}


.ccv .map-tools {
  height: 40px;
  width: 100%;
  background: var(--primary);
  margin: -6px 0 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 0 16px;
}

.ccv .map-tools>span:last-child {
  display: flex;
  gap: 6px;
}

.ccv .map-tools .pl-icon {
  background: #fff;
  width: 24px;
  height: 24px;
  display: flex;
  color: var(--primary);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.ccv .map-tools ul.dropdown-menu h5 {
  color: #333;
  font-size: 15px;
  margin: 4px 0 6px 14px;
}

.ccv .map-tools ul.dropdown-menu h5 .active {
  border-bottom: 2px solid #1e70cd;
}

.ccv .map-tools .pl-icon.dropdown-toggle:after {
    display: none;
}

.ccv .map-tools .dropdown-menu.checkbox-menu>li>label {
  position: relative;
}

.ccv .map-tools .tab-btn {
  cursor: pointer;
}

.ccv .map-tools .pl-section.pl-section-active {
    display: block;
}

.ccv .map-tools .pl-section {
    display: none;
}

/* .ccv .map-tools .dropdown-menu.checkbox-menu>li>label>span {
  background: #999;
  display: block;
  width: 26px;
  height: 26px;
  position: absolute;
  left: 8px;
  border-radius: 50%;
  top: 0px;
} */

.ccv .map-tools .dropdown-menu.checkbox-menu>li>label>input[type="checkbox"] {
  accent-color: #fff;
}

.ccv .map-tools .dropdown-toggle::after {
  display: none;
}

.ccv .pl-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  color: #333;
  padding: 0 12px;
  margin: 10px 0px;
  align-items: center;
  line-height: 1;
}

.ccv .map-tools .pl-icon {
  cursor: pointer;
}

.ccv .map-tools .check {
  margin: 0;
  border-radius: 50%;
  /* background: #999; */
  margin-right: 8px;
  stroke: #eee;
  width: 24px;
  height: 24px;
}

.ccv .map-tools .check svg {
  position: relative;
  left: 3px;
  top: 3px;
  stroke: #fff;
  transform: scale(.8);
  opacity: 0;
}
.ccv .map-tools .check svg {
  position: relative;
  left: 3px;
  top: 3px;
  stroke: #fff;
  transform: scale(.8);
  opacity: 0;
}

.ccv .map-tools .check svg:hover {
  stroke: #fff;
}

.ccv .map-tools .cbx:checked+.check svg {
opacity: 1;
}

.ccv .map-tools .cbx:checked+.check svg {
  stroke: #fff;
}

/* video grid v2 */

.videos2 {
  max-height: calc(100vh - 183px);
  overflow-x: auto;
  display: grid;
  gap: 8px 16px;
}

.videos2>div>div {
  background: #000;
  color: #fff;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.videos2>div>div i {
  font-size: 32px;
  margin-bottom: 12px;
}

.videos2>div>div h4 {
  font-weight: 500;
  text-align: center;
  font-size: 16px;
}

.videos2.v2grid-full {
  grid-template-columns: 1fr;
}

.videos2.v2grid-2x2 {
  grid-template-columns: 1fr 1fr;
}

.videos2.v2grid-3x3,
.videos2.v2grid-semifull {
  grid-template-columns: 1fr 1fr 1fr;
}

.videos2.v2grid-semifull>div:first-child {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-end: 3;
  grid-row-start: 1;
}

.videos2.v2grid-semifull>div:first-child>div {
  aspect-ratio: 16 / 10;
}

.video-alert .videos2.v2grid-semifull>div:first-child>div {
  aspect-ratio: 16 / 9.65;
}

.videos2 h5 {
  margin: 0px 0 3px;
  font-size: 16px;
}

/* .alert-video-container.live section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content;
  gap: 16px;
  height: calc(100vh - 131px);
  overflow: auto;
} */

.alert-video-container.live section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content;
    gap: 16px;
    height: calc(100vh - 162px);
    overflow: auto;
    padding-bottom: 16px;
}

.alert-video-container.live section.gt-scroll-small::-webkit-scrollbar-thumb {
  border-color: #f0f4f8;
}

.alert-video-container.live section>div {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
}

.alert-video-container.live section>div.vmap {
  padding: 0;
  grid-column-start: 1;
  grid-column-end: 3;
  background: #8ad8ec;
  min-height: 400px;
}

.alert-video-container.live .video-controls {
    transform: scale(.8);
    transform-origin: left;
}

/* .personnel-monitoring */

.personnel-monitoring .nav.nav-tabs {
  bottom: 0 !important;
  margin: 0 0 16px;
  top: -13px;
  justify-content: flex-start !important;
}

.personnel-monitoring .nav.nav-tabs>li {
  opacity: .6;
}

.personnel-monitoring .nav.nav-tabs>li.active {
  opacity: 1;
}

.personnel-monitoring .nav.nav-tabs>li.active>a {
  background: #fff;
  color: var(--primary);
}

/* .personnel-monitoring .dashboard-header-buttons .select2-selection,
.personnel-monitoring .dashboard-header-buttons .select2-selection__arrow {
  background: var(--primary)!important;
} */

.personnel-monitoring #cboFleetGroups + span {
    width: unset !important;
}

.personnel-monitoring .btn-refresh {
  background: transparent !important;
  box-shadow: none;
  color: var(--primary);
  font-size: 16px;
  padding: 0;
}

.noscroll {
  overflow: hidden !important;
}

.modal-footer.slim {
  padding: 6px 24px;
}

hr.dotted {
  margin: 0;
  border-top: 1.5px dotted #DBE2E8;
}

.modal-footer .btn {
  min-width: 100px;
}

/* select berwarna */
.select-danger {
  color: #FF4C45;
  /* background-color: #f2dede!important; */
  border-color: #ebccd1!important;
}

.select-warning {
  color: #D7A500;
  /* background-color: #fcf8e3!important; */
  border-color: #faebcc!important;
}

.select-success {
  color: #00C100;
  /* background-color: #dff0d8!important; */
  border-color: #d6e9c6!important;
}

/* Ganti warna teks untuk option */
option[data-class="select-danger"] {
  color: #FF4C45;
}

option[data-class="select-warning"] {
  color: #D7A500;
}

option[data-class="select-success"] {
  color: #00C100;
}

select.alert-select[disabled] {
  filter: saturate(0);
}

select.alert-select[disabled] {
  background-color: #EAEEF2 !important;
  color: #8B9BAD !important;
  border-color: #EAEEF2 !important;
}

.modal-body.view-video.modal-body-scroll, .modal-body.list-video.modal-body-scroll {
    max-height: calc(100vh - 110px);
}

.modal.talk.audio-broadcast .talk-ui {
    grid-template-columns: 300px 1fr;
    align-items: flex-start;
}

.modal.talk.audio-broadcast .talk-ui>div:first-child {
    padding: 16px 16px 0;
}

.input-group-btn .btn {
    border-radius: 0 5px 5px 0 !important;
    box-shadow: none;
}

.audio-broadcast .input-group select, .audio-broadcast .input-group button {
    font-size: 12px;
}

.audio-broadcast .fleetlist {
    height: 186px;
    overflow-y: scroll;
}

.audio-broadcast .fleetlist i {
  cursor: pointer;
}

.audio-broadcast .fleetlist .fa-minus-square.collapsed:before {
  content: "\f0fe";
}

.audio-broadcast .fleetlist>.checkbox:first-child {
  margin-top: 0;
}

.audio-broadcast .fleetlist>.checkbox {
  margin-top: 12px;
  margin-bottom: -6px;
}

.audio-broadcast .talk-ui>div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary);
}

.btn-video-features {
  box-shadow: none;
  font-size: 13px!important;
  background: #ebeff7;
}

.btn-video-features+.dropdown-menu {
  font-size: 13px;
}

.audio-broadcast.talk .talk-ui {
  margin-top: 0;
}

.audio-broadcast .container-search2 {
  position: relative;
}

.audio-broadcast .container-search2>svg {
    position: absolute;
    right: 12px;
    top: 9px;
}

.audio-broadcast .btn-broadcast {
    min-width: 130px;
    margin: 0 auto;
}

.audio-broadcast .btn-broadcast.active {
    background: #fff;
    color: #207575;
    border-color: #207575;
    box-shadow: inset 0 0 0 1px #207575;
}

.density-cards .gt-card {
  position: relative;
}

.overstayed-alert {
    position: absolute;
    width: 100%;
    background: #F84949;
    padding: 0 8px;
    left: 0;
    top: -32px;
    color: #fff;
    border-radius: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: none;
    height: 27px;
}

.overstayed-alert:before {
  content: '';
  height: 0;
  position: absolute;
  width: 0;
  left: calc(50% - 6px);
  border: 6px solid transparent;
  border-top-color: #F84949;
  top: 25px;
}

.overstayed .overstayed-alert {
    display: block;
}

.overstayed-alert i {
    background: #fff;
    width: 13px;
    height: 13px;
    color: #F84949;
    font-size: 7px;
    border-radius: 50%;
    position: relative;
    top: -4px;
    animation: blink-1 2s ease-in-out infinite;
}

.overstayed-alert i:before {
    position: relative;
    top: 3px;
}

.overstayed-alert span {
margin-left: 3px;
    position: relative;
    top: 5px;
    font-weight: 500;
    width: calc(100% - 20px);
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}

.overstayed-alert span strong {
    font-weight: 500;
}

.gt-card.overstayed {
    border-color: #F84949;
}

.gt-card.overstayed .overstayed-alert {
    display: block;
}

@media screen and (max-height: 640px) {
  .vehicle-monitoring .drp-calendar.left,
  .vehicle-monitoring .drp-calendar.right {
    margin-top: -80px;
  }
}

/* density dropdown setting */

.gtpanel-header .dropdown-menu {
    margin: -12px -10px 0 0;
}

.dropdown-menu {
    border-radius: 8px;
    border-color: #E5E5EF;
}

.dropdown.density-value {
    color: #333;
}

.dropdown-menu .set-density-grid {
    display: grid;
    grid-template-columns: 92px 48px 16px 48px 42px;
    align-items: center;
}

.set-density-grid input {
    width: 48px;
    border: 1px solid #EAEEF2;
    border-radius: 4px;
    padding: 3px 6px;
}

.set-density-grid input[disabled] {
    background: #EAEEF2;
    color: #AAB1B7;
}

.text-success {
  color: #107c10!important;
}

.text-warning {
  color: #fb8c00!important;
}

.text-danger {
  color: #d83b01!important;
}

.dropdown.toggle-vidchannel {
    position: relative;
    top: -1px;
}

.live-video .ic-status {
    margin-top: -4px;
}


/* detail history redesign */

.card-datatable-btn.history {
    height: 35px;
    display: flex;
    align-items: center;
    gap: 8px;
    bottom: -7px;
    margin-left: -63px;
    border-radius: 6px 6px 0 0;
    padding: 2px 12px;
    transition: .3s ease;
}

.card-datatable-btn.history.up {
    transform: translate(0, 40px);
}

.card.card-datatable-container.history {
    width: 100vw;
    /* left: 0; */
    position: fixed;
    height: 100vh;
    /* top: 0; */
    z-index: 1080;
    /* box-shadow: 0 0 6px rgba(0, 0, 0, .2); */
    border-radius: 0 !important;
    border: none;
}

.card-datatable-container-header {
    background: var(--secondary);
    color: #fff;
    font-size: 16px;
    padding: 12px 18px;
    /* border-radius: 6px 6px 0 0; */
    display: flex;
    justify-content: space-between;
}

.card-datatable-container-header span:last-child {
    cursor: pointer;
}

.card-datatable-container.history #popupl-toggle-view {
    top: 42px;
}

.card-datatable-container-overlay {
    content: "";
    background: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1070;
}

.history .tabs-top {
    border-bottom: 1px solid #E4E4E7;
    margin: 0 8px 12px;
    display: block;
    /* justify-content: space-between; */
    /* padding-right: 42px; */
}

.history ul#tabs {
    padding: 0;
    margin: 4px 0 0 0;
}

.history ul#tabs>li>a {
    border: none;
    width: auto;
    color: var(--secondary);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 2px solid var(--secondary);
    border-radius: 0;
    padding: 4px 12px 10px;
    transition: none;
    user-select: none;
    position: relative;
    bottom: -1px;
    background: none;
}

.history ul#tabs>li>a.inactive {
    border: none;
}

.history .tabs-top .pltooltip {
    margin-top: 10px;
}

.history .tab-container {
    overflow-y: auto;
}

.gt-container-gray {
    padding: 10px;
    background: #F6F8FB;
    border-radius: 8px;
}

.section-fuelr {
    display: grid;
    grid-template-columns: 1fr 33%;
    grid-gap: 12px;
    margin-bottom: 16px;
}

.section-fuelr>div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
}

.section-fuelr>div:last-child {
    display: grid;
    grid-template-columns: 1fr;
}

.fuelr-white {
    background: #fff;
    border: 1px solid #D6D9E1;
    padding: 6px 12px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    align-items: center;
    background: #fff;
}

.fuelr-gray {
    background: #EBEFF7;
    border: 1px solid #D6D9E1;
    padding: 12px;
    border-radius: 8px;
}

.section-fuelr p {
    margin: 0;
}

.section-fuelr h5 {
    margin: 0;
    font-weight: 700;
    /* margin-bottom: 3px; */
}

.section-fuelr h3 {
    font-weight: 700;
    margin: 0 0 3px;
}

.fuelr-white>div:last-child>span {
    font-size: 18px;
    font-weight: 700;
}

.fuelr-white>div:last-child {
    display: flex;
    align-items: center;
    justify-content: end;
    grid-gap: 4px;
}

.fuelr-gray>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.fuelr-gray h5 {
    margin: 3px 0 4px;
}

.fuelr-gray>div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.fuelsav {
    padding: 6px 10px 5px;
    border-radius: 12px;
    line-height: 1;
    color: #fff;
    font-weight: 500;
}

.fuelsav.danger {
    background: red;
}

.fuelsav.success {
    background: green;
}

.fuelsav:empty {
    display: none;
}


.popinfo_v5_main{
  width: 280px;
  min-height: calc(150px + 30px);
  height: auto;
}
.popinfo_v5_main .popinfo-body {
  min-height: calc(112px + 35px);
  height: auto;
  display: block;
  overflow: hidden;
}
.popinfo_v5_main .popinfo-footer{
  position: relative;
}

.popinfo_v5_main .popinfo-body .list-group-item {
  border: 0;
  margin-top: 0px;     
}
.popinfo_v5_main>.list-group>.list-group-item:first-child>div>div>p:first-child>span {
  font-size: 12px;
}
.popinfo_v5_main .info-speed{
  padding: 0 8px;
  border-radius: 50px;
  background: #ffffff94;
}
.popinfo_v5_main .info-speed i{
  font-size: 11px !important;
  margin-right: 6px;
}
.popinfo_v5_main .popinfo-close {
  background: none;
}
.popinfo_v5_main .popinfo-minimize {
  width: 20px;
  height: 20px;
  background: none;
  position: absolute;
  right: 30px;
  top: 6px;
  cursor: pointer;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px;
  font-size: 18px !important;
}
.popinfo_v5_main .btn-outline-secondary {
  height: 23px;
  background: #fff;
}
.popinfo_v5_main .icon-btn i {
  font-size: 12px;
}
.popinfo_v5_main .popinfo-body .list-group-item>div>small:first-child {
  font-weight: 500;
}
.popinfo_v5_main.minimize{
  min-height: 0;
  height: 0;
}
.popinfo_v5_main.minimize>.list-group>.list-group-item:first-child {
  border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.popinfo_v5_main .popinfo-body,
.popinfo_v5_main .popinfo-footer {
  transition: all 0.25s ease;
  transform-origin: top center;
}

.popinfo_v5_main.minimize .popinfo-body,
.popinfo_v5_main.minimize .popinfo-footer{
  opacity: 0;
  transform: scaleY(0);
  height: 0;
  overflow: hidden;
}

.popinfo_v5_main .driver_name.normal-text {
  white-space: normal !important;
  word-break: normal;       
  overflow-wrap: break-word;
  overflow: visible !important;
  text-overflow: unset !important;
  text-align: end;
}		
.popinfo_v5_main .driver_name.email-text {
  white-space: normal !important;
  word-break: break-all;
  overflow-wrap: anywhere; 
  overflow: visible !important;
  text-overflow: unset !important;
  text-align: end;
}		
.popinfo_v5_main>.list-group>.list-group-item:first-child>div>div>p:first-child>span:first-child {
  max-width: 150px;
}


#modal_panel_find_vehicle_by_area .modal-body{
  background: #f0f4f8;
}
/* Slider Find by Area */
.ucs-container {
  width: 100%;
  margin: 0 auto;
}

.ucs-header {
  margin-bottom: 15px;
  border-bottom: 1px solid lightgray;
}
.ucs-header-text {
  font-size: 13px;
  font-weight: bold;
}

.ucs-wrapper {
  overflow: hidden;
  position: relative;
}

.ucs-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.ucs-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 15px;
  padding: 10px 0;
  box-sizing: border-box;
}

.ucs-unit {
    display: flex;
    align-items: center;
    gap: 15px;
  }

.ucs-img-wrapper {
  width: 40px;
  height: 40px;
  background-color: #e4e8ef;
  border-radius: 50%;
  padding: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ucs-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.2);
}

  .ucs-unit-count {
    color: #4a5568;
    font-size: 13px;
  font-weight: bold;
  }

  .ucs-dots{
    position: absolute;
    width: 100%;
    bottom: 40px;
    text-align: center; 
    margin-top: 15px;
  }

  .ucs-nav {
    width: 100%;
    display: flex;
    justify-content: end;
    pointer-events: none;
    gap: 10px;
    position: absolute;
    bottom: 30px;
    right: 25px;
  }

  .ucs-nav-btn {
  background: #fff;
  color: #207575 !important;
  border: 1px solid #207575;      
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  pointer-events: auto;
  opacity: 0.7;
  transition: opacity 0.3s;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  }

  .ucs-nav-btn:hover { opacity: 1; }
  .ucs-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

	.text-devicestatus0{
		color: #00c100;
	}
	.text-devicestatus1{
		color: #ff0000;
	}
	.text-devicestatus2{
		color: #e69a07;
	}
	.text-devicestatus3{
		color: #9a9a9a;
	}
	.text-devicestatus5{
		color: #5194ff;
	}

/* batasi panjang .select2-selection__rendered */
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    max-width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* popup info in map tracking & alert video */
.track-detail-label,
.track-detail-value {
  font-size: 12px !important;
}

@media (max-width: 767.98px) {
    .track-card-container {
        bottom: 10vh !important;
    }
    .track-address {
        font-size: 12px !important;
    }
}          
@media (min-width: 768px) and (max-width: 992px) {
    .track-card-container {                
        bottom: 110px !important;
    }
    .track-address {
        font-size: 12px !important;
    }
}
.track-card-container.minimized .track-header-bar{
    height: 60px !important;
}