@charset "utf-8";

@font-face {
  font-family: 'segoe_uiregular';
  src: url('../fonts/segoeui-webfont.woff2') format('woff2'),
    url('../fonts/segoeui-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'segoe_uisemibold';
  src: url('../fonts/segoe-ui-semibold-webfont.woff2') format('woff2'),
    url('../fonts/segoe-ui-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* CSS Document */
*,
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video,
a {
  margin: 0;
  padding: 0;
  font-family: 'segoe_uiregular', sans-serif;
  color: #252525;
  font-size: 14px;
  color: #000;
  line-height: normal;
  font-weight: 300;
  text-align: left;
}

img {
  max-width: 100%;
}

ul:after {
  content: '';
  display: block;
  clear: both;
}

ul,
li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

a,
a:hover {
  text-decoration: none;
}

.wrap {
  max-width: 1252px;
  display: block;
  margin: 0 auto;
  width: 95%;
}

::-webkit-scrollbar {
  width: .5em;
  height: .5em;
  background-color: #a0deff;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 1);
}

::-webkit-scrollbar-thumb {
  background-color: #026399;
  outline: 1px solid #a0deff;
}

body .mat-mdc-card-header {
  padding: 15px;
}

body .mat-mdc-card-header .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix svg {
  left: 0;
  width: 14px;
}

.clear {
  clear: both;
}

body {
  overflow-x: hidden;
  margin: 0 auto;
  /* max-width: 1366px; */
  background: #f6f6f7;
  padding-top: 95px;
}

.lftn {
  float: left;
}

.lf {
  float: left;
  width: 65%;
  /* margin-bottom: 23px; */
}

.lft {
  float: left;
}

.rgt {
  float: right;
}

.rgtpn {
  float: right;
}

.rg {
  float: right;
}

.btn.wicn:after {
  display: none;
}

.btn.wicn {
  padding: 10px;
  margin-bottom: 5px;
}

.btn.wicn:last-child {
  margin-bottom: 0px;
}

.btn {
  display: block;
  background: #0089d4;
  padding: 9.5px 14px;
  padding-bottom: 12px;
  padding-left: 33px;
  line-height: normal;
  color: #fff !important;
  width: fit-content;
  border: 0;
  font-size: 15px;
  border-radius: 5px;
  position: relative;
  height: auto;
  line-height: 1em;
  min-height: initial;
  text-shadow: 0 1px 0 #005685;
  background-color: #0089d4;
  background-image: linear-gradient(#0089d4, #2aa6eb);
}

.btn:hover,
input.btn:hover,
button.btn:hover {
  color: #fff;
  background: black;
}

.btn:after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  background: url(../images/icons/btn-plus-icon.png) no-repeat;
  position: absolute;
  left: 15px;
  top: 50%;
  margin-top: -6.5px;
}

.btn.t {
  padding-left: 14px;
}

.btn.t:after {
  display: none
}

.btn.view:after {
  background: url(../images/icons/view-icon.png) no-repeat center;
  width: 20px;
  left: 12px;
  background-size: 16px;
}

.btn.downloads {
  background: #4CAF50;
}

.btn.ppCls {
  position: absolute;
  top: 8px;
  right: 25px;
  background: black;
  padding: 10px 15px;
}

.btn.ppCls:after {
  background-image: url(../images/icons/btn-close-icon.png);
  display: none;
}

.btnGrp .btn {
  float: right;
  margin-left: 10px;
  margin-bottom: 5px;
}

.btnGrp .btn.sb {
  padding: 5px 10px 7px;
  background-color: #6d6d6d;
  background-image: linear-gradient(#a0a0a0, #6d6d6d);
}

.btnGrp .btn.sb:after {
  display: none;
}

.btn.download:after {
  background: url(../images/icons/download-icon.png) no-repeat center #4CAF50;
  border-radius: 5px 0px 0px 5px;
  width: 26px;
  height: 35px;
  top: 6px;
  left: 0px;
  background-size: 20px;
}

.btn.uploads {
  background: #3F51B5;
}

.btn.upload:after {
  background: url(../images/icons/upload-icon.png) no-repeat center #E91E63;
  border-radius: 5px 0px 0px 5px;
  width: 26px;
  height: 35px;
  top: 6px;
  left: 0px;
  background-size: 20px;
}

.container {
  max-width: 1291px;
  max-width: 97%;
}

.white h2 {
  font-size: 18px;
  font-weight: 600;
  margin-left: 13px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebebeb;
  margin-right: 13px;
}

.trlBalance {
  margin: 0;
}

.trlBalance .lstng,
.trlBalance .ttl h2 {
  display: block;
  margin: 15px 0% 0;
  width: 50%;
  float: left;
}

.trlBalance h2 {
  display: block;
  font-size: 15px;
  line-height: normal;
  padding: 0;
  border: 0;
  margin: 0;
}

.trlBalance h2 span {
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  float: right;
}

.trlBalance li h2 {
  background: #d7ebff;
  padding: 5px 15px;
}

.trlBalance .lstng ul {
  display: block;
  margin-left: 0px;
}

.trlBalance .lstng ul li {
  display: block;
}

.trlBalance .lstng ul li h3 {
  font-size: 14px;
  background: #e9e9e9;
  padding: 5px 15px;
  font-weight: bold;
  text-transform: uppercase;
}

.trlBalance .lstng ul li h3 span {
  font-weight: bold;
}

.trlBalance .lstng ul li h4 {
  font-size: 14px;
  padding: 5px 0px 5px 15px;
  font-weight: bold;
  text-transform: uppercase;
}

.trlBalance .lstng ul li h4 span {
  font-weight: bold;
}

.trlBalance .lstng ul li ul {
  margin: 0 15px;
}

.trlBalance .lstng ul li ul ul {
  margin-right: 0;
  margin-left: 30px;
}

.trlBalance .lstng ul li span {
  float: right;
  font-size: inherit;
}

.trlBalance .ttl {
  display: block;
  margin-top: 15px;
  margin-bottom: 15px;
  border-top: 1px solid #ccc;
  background: #0089d4;
}

.trlBalance .ttl h2 {
  color: #fff;
  padding: 5px 15px;
  margin: 0px;
}

.trlBalance .res {
  display: none;
}

.tlTip {
  position: relative;
  display: inline-block;
}

.tlTip .tipText {
  visibility: hidden;
  font-size: 12px;
  line-height: 14px;
  width: 80px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 3px 0;
  position: absolute;
  z-index: 1002;
  top: 135%;
  left: 50%;
  margin-left: -40px;

}

/* Scoped vehicle autocomplete overrides (no ::ng-deep) */
app-job-details .table-filter-left app-vehicle-autocomplete .fldWrp>label:empty {
  display: none;
}

app-tyre-issue-to-vehicles .vehicle-filter-field app-vehicle-autocomplete .fldWrp,
app-tyre-master .vehicle-filter-field app-vehicle-autocomplete .fldWrp,
app-tyre-receipt-from-vehicles .vehicle-filter-field app-vehicle-autocomplete .fldWrp,
app-tyre-movements-status .vehicle-filter-field app-vehicle-autocomplete .fldWrp,
app-tyre-job-sheets .tyre-job-sheet-vehicle-filter app-vehicle-autocomplete .fldWrp {
  width: 100% !important;
}

app-tyre-issue-to-vehicles .vehicle-filter-field app-vehicle-autocomplete .fldWrp>label:empty,
app-tyre-master .vehicle-filter-field app-vehicle-autocomplete .fldWrp>label:empty,
app-tyre-receipt-from-vehicles .vehicle-filter-field app-vehicle-autocomplete .fldWrp>label:empty,
app-tyre-movements-status .vehicle-filter-field app-vehicle-autocomplete .fldWrp>label:empty,
app-tyre-job-sheets .tyre-job-sheet-vehicle-filter app-vehicle-autocomplete .fldWrp>label:empty {
  display: none;
}

.tlTip .tipText::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}


.tlTip:hover .tipText {
  visibility: visible;
}



header {
  display: block;
  background: #fbfdff;
  padding: 3px 13px;
  padding-right: 18px;
  position: fixed;
  width: -webkit-fill-available;
  left: 0;
  top: 0;
  z-index: 6;
  box-shadow: rgba(0, 0, 0, .15) 0 2px 2px -1px;
  padding-left: 63px;
}

header .hmbr {
  display: inline-block;
  padding: 10px;
  border-radius: 50%;
  background: #0089d447;
  ;
  cursor: pointer;
  margin-right: 50px;
}

header .hmbr svg {
  display: block;
  width: 25px;
}

header .hmbr svg path {
  fill: #0089d4;
}

header .FlxHd {
  display: flex;
  align-items: center;
}

header .pnl {
  display: block;
  width: fit-content;
  display: flex;
  float: right;
  align-items: center;
  margin-top: 0px;
  padding: 5px 0px;
}

header .pnl .lft {
  display: flex;
  margin-right: 8px;
  width: 22px;
  height: 22px;
  background: #a6cffa;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

header .pnl .lft svg {
  display: block;
  margin-left: 0px;
}

header .pnl .lft img {
  display: block;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  object-fit: cover;
}

header .pnl .rgt {
  display: block;
  position: relative;
}

header .pnl .rgt h2 {
  display: inline-block;
  font-size: 14px;
  color: #000;
  line-height: 1.2em;
  padding-top: 0px;
  position: relative;
  font-family: 'segoe_uisemibold';
  font-weight: bold;
}

header .pnl .rgt h2 span {
  display: inline;
  font-size: inherit;
  color: inherit;
  margin-left: 4px;
}

header .pnl .rgt p {
  display: inline-block;
  margin-left: 20px;
  padding: 7px 0px;
}

header .pnl .rgt .AdmMnu {
  display: none;
  background: #fff;
  position: absolute;
  width: 170px;
  right: 0;
  z-index: 2;
  -webkit-box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
  box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
}

header .pnl .rgt:hover .AdmMnu {
  display: block;
}

header .pnl .rgt .AdmMnu li {
  display: block;
  border-bottom: 1px dashed #efefef;
}

header .pnl .rgt .AdmMnu li:last-child {
  border-bottom: 0px;
}

header .pnl .rgt .AdmMnu li a {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: #000;
  background: url(../images/icons/role-icon.png) no-repeat;
  background-size: 16px;
  background-position: 12px center;
  padding-left: 33px;
}

header .pnl .rgt .AdmMnu li a:hover,
header .pnl .rgt .AdmMnu li button:hover {
  background-color: #e3f1ff;
}

header .pnl .rgt .AdmMnu li .logout {
  background-image: url(../images/icons/logout-icon.png);
  background-size: 12px;
}

header .pnl .rgt .AdmMnu li a.role {
  background-image: url(../images/icons/role-icon.png);
  background-size: 14px;
}

header .pnl .rgt .AdmMnu li a.company {
  background-image: url(../images/icons/company-icon.png);
  background-size: 15px;
}

header .pnl .rgt .AdmMnu li a.password {
  background-image: url(../images/icons/password-icon.png);
  background-size: 12px;
}

header .pnl .rgt .AdmMnu li button {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: #000;
  background: url(../images/icons/user-role-master.png) no-repeat;
  background-size: 10px;
  background-position: 12px center;
  padding-left: 33px;
  width: -webkit-fill-available;
  border: 0;
}

.RowJustify {
  justify-content: space-between;
}

body .text-danger {
  background: #ffe5e7;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  display: block;
  width: fit-content;
}

.sidenav.active {
  width: 50px;
  transition: 0.3s ease;
  overflow: visible;
}

.sidenav.active ul li a span {
  display: none;
  /* width: 0; */
  overflow: hidden;
  /* height: 0; */
  transition: 0.3s ease;
  margin-left: 22px;
}

.sidenav.active ul li a i {
  width: 40px;
  margin-right: 0;
  /* background-size: 54%; */
}

.sidenav.active ul li a {
  padding: 22px 10px;
  position: relative;
  width: calc(260px);
  /* display: block; */
  padding: 9px 11px;
  padding-left: 50px;
  padding-right: 31px;
  min-height: 43px;
}

.sidenav.active ul li a.sub:after {
  opacity: 0;
}

.sidenav.active ul li a:hover {
  position: relative;
  /* width: calc(260px); */
  /* display: block; */
  /* padding: 9px 11px; */
  /* padding-left: 50px; */
  /* padding-right: 31px; */
}

.sidenav.active ul li a:hover span {
  display: block;
}

.sidenav.active ul li a:hover:after {
  opacity: 10;
}

.sidenav.active ul li a.openItem span {
  display: block;
}

.sidenav.active ul li a.openItem:after {
  opacity: 10;
}

.sidenav.active ul li ul {
  background: #e3f1ff;
  position: absolute;
  margin-left: 60px;
}

.sidenav.active ul li ul li a {
  width: 198px;
  padding: 10px 20px;
}

.sidenav .mat-expansion-panel-header:hover,
.sidenav .mat-expansion-panel-header.mat-expanded,
.sidenav .mat-expansion-panel a.Single:hover {
  background: #e5f6ff !important;
}

.sidenav .mat-expansion-panel-header {
  padding: 3px 13px;
  height: auto;
  box-shadow: initial;
}

.sidenav .mat-accordion .mat-expansion-panel:first-of-type,
.sidenav .mat-accordion .mat-expansion-panel:last-of-type {
  border-radius: 0px;
  margin: 0;
  box-shadow: initial;
  background: transparent;
}

.sidenav .mat-expansion-panel-header.mat-expanded {
  height: initial;
}

.sidenav .mat-accordion a.sub {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 11px;
  position: relative;
  padding-left: 27px;
  display: flex;
}

.sidenav .mat-accordion a.sub span {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-weight: bold;
  font-family: 'segoe_uisemibold';
}

.sidenav .mat-accordion a.sub i {
  width: 32px;
  height: -webkit-fill-available;
  background-repeat: no-repeat;
  margin-right: 7px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
}

.sidenav .mat-accordion a.sub i svg {
  display: block;
  max-height: 19px;
  max-width: 17px;
}

.sidenav .mat-expansion-panel-header-description,
.sidenav .mat-expansion-indicator::after {
  color: #000;
  border-width: 0 1px 1px 0;
  transform: rotate(-45deg);
}

.sidenav .mat-expansion-indicator {
  transform: initial !important;
}

.sidenav .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-content .mat-expansion-panel-body ul a:hover {
  background: #ebebeb;
}

.sidenav .mat-accordion a.sub i.operations {
  background-image: url(../images/icons/operations.png);
}

.sidenav .mat-accordion a.sub i.fleetOpr {
  background-image: url(../images/icons/fleet-operations.png);
}

.sidenav .mat-accordion a.sub i.trip {
  background-image: url(../images/icons/trip-managment.png);
}

.sidenav .mat-accordion a.sub i.fleet {
  background-image: url(../images/icons/operations.png);
}

.sidenav .mat-accordion a.sub i.vehicle {
  background-image: url(../images/icons/operations.png);
}

.sidenav .mat-accordion a.sub i.operationsBillling {
  background-image: url(../images/icons/billing.png);
}

.sidenav .mat-accordion a.sub i.vehicleStatus {
  background-image: url(../images/icons/vehicle-status.png);
}

.sidenav .mat-accordion a.sub i.shipment {
  background-image: url(../images/icons/shipment-tracking.png);
}

.sidenav .mat-accordion a.sub i.customer {
  background-image: url(../images/icons/customer-portal.png);
}

.sidenav .mat-accordion a.sub i.billing {
  background-image: url(../images/icons/billing.png);
}

.sidenav .mat-accordion a.sub i.credit {
  background-image: url(../images/icons/credit-control.png);
}

.sidenav .mat-accordion a.sub i.procurement {
  background-image: url(../images/icons/procurement.png);
}

.sidenav .mat-accordion a.sub i.accounts {
  background-image: url(../images/icons/accountant.png);
}

.sidenav .mat-accordion a.sub i.store {
  background-image: url(../images/icons/store-management.png);
}

.sidenav .mat-accordion a.sub i.support {
  background-image: url(../images/icons/support.png);
}

.sidenav .mat-expansion-panel {
  background: transparent;
  margin: 0px;
  box-shadow: initial !important;
}

.sidenav .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-header {
  border-radius: 7px;
  padding: 8px 17px;
  color: #fff;
}

.sidenav .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-header a.subInr {
  color: #000;
}

.sidenav .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-header a.subInr span {
  color: inherit;
  font-weight: bold;
  font-size: 14px;
  font-family: 'segoe_uisemibold';
}

.sidenav .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-content .mat-expansion-panel-body {
  padding: 0px;
}

.sidenav .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-content .mat-expansion-panel-body ul {
  padding: 0px;
  border: 0px;
  background: #f9f9f9;
  border-radius: 7px;
  margin: 0;
}

.sidenav .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-content .mat-expansion-panel-body ul a {
  padding: 8px 10px;
  line-height: normal;
  border-radius: 7px;
  padding-left: 17px;
}

.sidenav .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-content .mat-expansion-panel-body ul a:before {
  content: '';
  display: block;
  position: absolute;
  left: 15px;
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 50%;
  top: 50%;
  margin-top: -2px;
  display: none;
}

.sidenav .mat-expansion-panel a.Single span {
  color: #000;
  line-height: 1.5em;
  display: block;
}

.sidenav .mat-expansion-panel a.Single {
  padding: 8px 10px;
  line-height: normal;
  border-radius: 7px;
  padding-left: 17px;
  position: relative;
  display: block;
  z-index: 2;
}

.sidenav .mat-expansion-panel a.Single:before {
  content: '';
  display: none;
  position: absolute;
  left: 15px;
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 50%;
  top: 50%;
  margin-top: -2px;
}


.sidenav .mat-expansion-panel-content {
  position: fixed;
  left: 200px;
  width: 224px;
  background: #ffff;
  z-index: 99999999;
  top: 54px;
  height: 100vh;
  visibility: hidden;
  box-shadow: 0px 0px 12px #00000012;
}

.sidenav .mat-expanded>.mat-expansion-panel-content {
  visibility: visible;
}

.sidenav .mat-expansion-panel-content .mat-expansion-panel-body {
  padding: 0px 16px 0px;
}

.sidenav .mat-expansion-panel-content .mat-expansion-indicator {
  display: flex;
}

.sidenav .mat-expansion-panel-content .mat-expansion-indicator:after {
  transform: rotate(45deg);
}

.sidenav .mat-expansion-panel-content .mat-expansion-indicator {}

.sidenav .mat-expansion-panel-content .mat-expansion-panel-content {
  position: initial;
  width: -webkit-fill-available;
  height: auto;
  background: transparent;
  visibility: inherit;
  box-shadow: none;
}

.sidenav .mat-expansion-panel-content {
  max-height: calc(100vh - 54px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.sidenav .mat-expansion-panel-content .mat-expansion-panel-content {
  max-height: none;
  overflow: visible;
}

.sidenav .mat-expansion-panel-content .mat-expansion-panel-body {
  padding-bottom: 12px;
}

.sidenav.active .mat-expansion-panel-content {
  left: 43px;
}

.sidenav.active .hmbr span {
  display: none;
}

.sidenav.active .mat-expansion-panel {
  overflow: visible;
}

.sidenav.active .mat-expanded .mat-expansion-indicator {
  display: block;
}

.sidenav.active .mat-accordion a.sub span {
  display: none;
}

.sidenav.active .mat-expansion-indicator {
  display: none;
  right: -210px;
  position: absolute;
  z-index: 3;
  top: 18px;
  height: auto;
  display: none;
  align-items: center;
}

.sidenav.active .mat-content {
  display: block;
  overflow: visible;
}

.sidenav.active .mat-accordion a.sub i {
  height: 32px;
}

.sidenav.active .mat-expansion-panel .mat-expansion-panel .mat-expansion-indicator {
  position: initial;
  display: block;
}

.sidenav.active .mat-accordion a.sub {
  padding: 0;
  height: 32px;
}

.sidenav.active .mat-expansion-panel-content .mat-expansion-panel-content {
  position: initial;
  width: -webkit-fill-available;
  box-shadow: initial;
}

.sidenav.active .mat-expanded .mat-expansion-panel-body {
  padding: 0 9px 16px;
}

.sidenav.active .mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-content .mat-expansion-panel-body ul a {
  width: -webkit-fill-available;
}

.sidenav.active .mat-expansion-panel a.Single span {
  width: -webkit-fill-available;
  max-width: 90%;
  display: block;
  white-space: break-spaces;
}

body .mdc-linear-progress__bar-inner {
  border-color: #0089d461;
}

body .mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-bar {
  background-color: rgb(215 241 255);
}

body .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
  min-height: initial;
  padding: 5px 0px;
  align-items: center;
  display: flex;
  line-height: normal;
  padding-left: 20px;
}

body .mat-mdc-text-field-wrapper {
  border-radius: 0px;
}

body .mdc-line-ripple {
  display: none;
}

body .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix svg {
  display: inline-block;
  left: 0px;
  margin-right: 6px;
}

body .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix svg path {
  stroke: #728196;
}

body .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix svg circle {
  stroke: #728196;
}

body .mdc-text-field--filled:not(.mdc-text-field--disabled),
body .mat-mdc-text-field-wrapper {
  background: transparent;
  border: 1px solid #cdcdcd;
  border-radius: 6px;
  padding-left: 14px;
}

body .mdc-text-field--outlined .mdc-notched-outline {
  display: none;
}

body .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
  color: #000;
}

body .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
body .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
  color: #000;
}

body .mat-mdc-form-field {
  margin-right: 10px;
  width: 27%;
}

body .mat-sort-header-content,
body .mat-sort-header-container {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
}

body .mat-sort-header-pointer-middle,
body .mat-sort-header-pointer-left,
body .mat-sort-header-pointer-right,
body .mat-sort-header-stem {
  color: #000;
}

body .mat-mdc-slide-toggle .mdc-switch .mdc-switch__ripple {
  display: none;
}

body .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after,
body .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track::after,
body .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after,
body .mat-mdc-slide-toggle .mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after {
  background: #0089d4 !important;
}

body .mat-mdc-slide-toggle .mdc-switch {
  outline: 0 !important;
}

body .mdc-switch__handle::before,
body .mdc-switch__handle::after {
  background: #0089d4 !important;
}

body .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before,
body .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after {
  background: transparent;
}

body .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
body .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
body .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: #000;
}

body .mdc-list-item--selected .mdc-list-item__primary-text,
body .mdc-list-item--activated .mdc-list-item__primary-text {
  color: #0089d4;
}

body .mat-mdc-card {
  box-shadow: initial;
}

body .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
  background: #000;
}

body .TblScrl .no-data-content {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.white.add .mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mdc-floating-label--float-above {
  display: none;
}

.white.add .mat-mdc-form-field {
  display: block;
  margin: 0px;
}

.white.add .fldWrp .mat-mdc-form-field {
  width: -webkit-fill-available;
}

/* .white.add .mat-mdc-form-field-subscript-wrapper{    position: absolute;} */
.white.add .mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mat-mdc-floating-label {
  top: 19px;
}

.white.add .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
  transform: initial;
}

.white.add .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
  padding: 5px 0px 5px 20px;
  min-height: initial;
}

.white.add .mdc-text-field--filled:not(.mdc-text-field--disabled),
.white.add .mat-mdc-text-field-wrapper {
  border: 1px solid #ababab;
  height: 34px !important;
}

.TabsGrp {
  display: block;
}

.TabsGrp .mat-mdc-tab-labels {
  background: #f3f3f39e;
  padding: 10px;
  border-radius: 7px;
}

.TabsGrp .mat-mdc-tab.mdc-tab {
  height: auto;
  padding: 13px;
  font-size: 30px;
  letter-spacing: initial;
  text-align: center;
  color: #000;
  border-radius: 4px;
}

.TabsGrp .mat-mdc-tab-header {
  margin: 0px 15px;
}

.TabsGrp .mat-mdc-tab-body-wrapper {
  margin-top: 25px;
}

.TabsGrp .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label,
.mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label {
  color: #fff;
}

.TabsGrp .mat-mdc-tab.mdc-tab.mdc-tab--active {
  background: #0089d4;
}

.TabsGrp .mdc-tab__content,
.mat-mdc-tab .mdc-tab__text-label,
.TabsGrp .mat-mdc-tab .mdc-tab__text-label,
.TabsGrp .mat-mdc-tab-link .mdc-tab__text-label {
  color: inherit;
}

.TabsGrp .mdc-tab-indicator {
  display: none;
}

.SimpleTabs {
  display: block;
}

.SimpleTabs .mat-mdc-tab-header {
  margin: 0 15px;
}

.SimpleTabs .mat-mdc-tab-labels {
  background: #e6f7ff;
  border-radius: 6px;
}

.SimpleTabs .mat-mdc-tab.mdc-tab {
  height: auto;
  min-height: 44px;
  color: #000;
  background: transparent;
}

.SimpleTabs .mat-mdc-tab .mdc-tab__text-label,
.SimpleTabs .mat-mdc-tab-link .mdc-tab__text-label {
  font-weight: 700;
}

.SimpleTabs .mat-mdc-tab.mdc-tab.mdc-tab--active {
  background: transparent;
}

ul.ChkLst {
  display: block;
  clear: both;
  margin-bottom: 22px;
}

ul.ChkLst li {
  display: block;
  line-height: normal;
  margin-bottom: 10px;
  border-bottom: 1px dashed #d9d9d9;
  padding-bottom: 10px;
}

ul.ChkLst li:last-child {
  border: 0;
  margin: 0;
  padding: 0;
}

ul.ChkLst li input {
  display: none;
}

ul.ChkLst li label {
  display: block;
  margin-bottom: 11px;
}

ul.ChkLst li label span {
  display: block;
  position: relative;
  font-size: 16px;
  padding-left: 23px;
  line-height: normal;
  text-transform: capitalize;
}

ul.ChkLst li label span:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  float: left;
  border-radius: 50%;
  margin-top: 8px;
  border: 1px solid #000;
  position: absolute;
  left: 0;
}

ul.ChkLst li label span:before {
  border-radius: 6px;
}

ul.ChkLst li [type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+span:before {
  background: #0089d4;
  border-color: #0089d4;
}

ul.ChkLst li [type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+span:after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  transition: all .2s;
  background: url(../images/tick.png) no-repeat center center;
  width: 17px;
  height: 18px;
  background-size: 9px;
}

.white.add .fldWrp label.flxLbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.white.add .fldWrp a.imgVw {
  display: inline-flex;
  align-items: center;
  line-height: normal;
  color: #0089d4;
  cursor: pointer;
}

.white.add .fldWrp a.imgVw:before {
  content: '';
  display: inline-flex;
  width: 20px;
  height: 20px;
  background: url(../images/icons/view-icon.png) no-repeat center #0089d4;
  background-size: 14px;
  margin-right: 4px;
  border-radius: 50%;
}

.white.add ul.data {
  display: block;
}

.white.add ul.data li {
  display: block;
  float: left;
  width: 50%;
  line-height: normal;
  font-size: 14px;
}

.white.add ul.data li b {
  display: block;
  font-weight: bold;
  line-height: 1.5em;
  font-size: 107%;
}

.white.add ul.data.auto {
  display: block;
}

.white.add ul.data.auto li {
  width: 18.5%;
  margin-right: 1.5%;
  margin-bottom: 5px;
}

.white.add ul.data.auto li:last-child {
  margin-right: 0px;
}

.white.add ul.data.hghlt {
  background: #dff3ff;
}

.white.add ul.data.hghlt li {
  color: #0089d4;
  padding: 0px 10px;
}

.white.add ul.data.hghlt li b {
  color: #0089d4;
}

.white.add .fldWrp .Cmra {
  display: block;
  position: relative;
  width: fit-content;
}

.white.add .fldWrp .Cmra .ImgPnl {
  display: block;
  width: 350px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px dashed #dadada;
  padding: 10px;
}

.white.add .fldWrp .Cmra .ImgPnl .NoImg {
  display: block;
}

.white.add .fldWrp .Cmra .ImgPnl .NoImg img {
  display: block;
}

.white.add .fldWrp .Cmra .cmraBtn {
  display: block;
  width: 50px;
  height: 50px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/icons/camera-icon.svg) center no-repeat #fff;
  position: absolute;
  cursor: pointer;
  background-size: 30px;
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  bottom: -20px;
  left: 50%;
  margin-left: -25px;
}

.CmraPop {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #0000009e;
  left: 0;
  top: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}

.CmraPop::-webkit-scrollbar {
  display: none;
}

.CmraPop .InrPnl {
  display: block;
  width: fit-content;
  margin: 0 auto;
  background: #fff;
  padding: 34px;
  position: relative;
  z-index: 9;
}

.CmraPop .InrPnl .close {
  background: red;
  opacity: 10;
  border: 0;
  outline: 0;
  color: #fff;
  font-weight: normal;
  font-size: 17px;
  line-height: normal;
  height: 35px;
  width: 35px;
  text-align: center;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
}

.CmraPop .InrPnl webcam {
  display: block;
  width: 100%;
}

.CmraPop .InrPnl webcam .webcam-wrapper {
  display: block;
  width: 100%;
}

.CmraPop .InrPnl webcam .webcam-wrapper video {
  display: block;
  width: 100%;
  height: 376px;
  object-fit: contain;
  width: 500px;
}

.CmraPop .InrPnl .btnShoot {
  display: block;
  width: 60px;
  height: 60px;
  border: 1px solid #dedede;
  background: url(../images/icons/camera-icon.svg) center no-repeat;
  background-color: #fff;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 50%;
  background-size: 39px;
  margin: 0 auto;
  margin-top: 40px;
  box-shadow: 0px 0px 6px #dadadaba;
  cursor: pointer;
}

.CmraPop .InrPnl .snapshot {
  display: block;
  max-width: 190px;
  margin-top: 20px;
}

.CmraPop .InrPnl .snapshot h2 {
  margin-bottom: 5px;
  display: block;
}

.CmraPop .closeBg {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: transparent;
  outline: 0;
  border: 0;
}

.pd0 {
  padding-top: 0;
}

.driverInfo {
  display: block;
}

.driverInfo .logo {
  background: #2273c9;
  display: block;
  padding: 10px 10px;
  margin-bottom: 10px;
}

.driverInfo .profile {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 20px;
  margin-bottom: 20px;
  margin-top: 30px;
}

.driverInfo .profile .imgPnl {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}

.driverInfo .profile .imgPnl img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.driverInfo .profile .txtPnl {
  display: block;
  margin-left: 26px;
}

.driverInfo h1 {
  font-size: 30px;
  font-weight: bold;
  margin-top: 0px;
  padding: 0;
}

.driverInfo .profile .txtPnl h2 {
  display: block;
  font-size: 24px;
  font-weight: bold;
}

.driverInfo .profile .txtPnl p {
  display: block;
  font-size: 16px;
}

.driverInfo ul {
  display: block;
}

.driverInfo ul li {
  display: block;
  margin-bottom: 10px;
}

.driverInfo .btn {
  padding-left: 14px;
  font-size: 16px;
  background-image: none;
  background-color: green;
  float: left;
  margin-right: 20px;
}

.driverInfo .btn.rjc {
  background-color: red;
}

.driverInfo .btn::after {
  display: none;
}

.driverInfo .row {
  margin: 30px 0;
  padding: 0px;
}

body .tblContainer {
  height: auto;
  min-height: 320px;
  width: 100%;
  padding: 0 0px;
  margin-top: -8px;
  box-shadow: initial;
  overflow-y: hidden;
}

body .mat-mdc-paginator-container {
  justify-content: space-between;
  padding: 0px 15px;
}

body .mat-mdc-icon-button svg {
  display: block;
}

.Scrll {
  display: block;
  overflow-y: scroll;
  height: 92vh;
  width: 10px;
  position: fixed;
  width: -webkit-fill-available;
  overflow-y: scroll;
  z-index: 5;
  pointer-events: none;
  margin-top: -43px;
}

.Scrll::-webkit-scrollbar {
  display: none;
}

.sidenav::-webkit-scrollbar {
  display: none;
}

.sidenav .hmbr:hover {
  background: #f3f3f3;
}

.hmbr.active svg {
  transform: rotate(-180deg);
}

.hmbr {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  top: 0;
  z-index: 99999;
}

.hmbr svg {
  display: inline-block;
  width: 51px;
  height: 51px;
}

.hmbr svg path {
  fill: #000;
}

.sidenav .hmbr span {
  display: inline-block;
}

/* Smart search styles scoped to navigation component only */
app-navigation .smart-search {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 8px 10px 10px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

app-navigation .smart-search__input-wrapper {
  position: relative;
}

app-navigation .smart-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  line-height: 0;
}

app-navigation .smart-search__input {
  width: 100%;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 34px 0 32px;
  font-size: 13px;
  color: #1e293b;
  outline: none;
}

app-navigation .smart-search__input:focus {
  border-color: #0089d4;
  box-shadow: 0 0 0 2px rgba(0, 137, 212, .14);
}

app-navigation .smart-search__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
}

app-navigation .smart-search__suggestions {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  max-height: 260px;
  overflow-y: auto;
}

app-navigation .sidenav ul.smart-search__suggestions {
  padding-left: 0;
  border-left: 0;
}

app-navigation .smart-search__suggestion {
  width: 100%;
  border: 0;
  background: #fff;
  cursor: pointer;
  text-align: left;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}

app-navigation .smart-search__suggestion:hover {
  background: #f1f7ff;
}

app-navigation .smart-search__name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

app-navigation .smart-search__path {
  font-size: 11px;
  color: #64748b;
}

app-navigation .smart-search__empty {
  margin: 8px 0 0;
  font-size: 12px;
  color: #64748b;
}

app-navigation .sidenav.active .smart-search {
  display: none;
}


.sidenav {
  display: block;
  background: #fff;
  max-width: 200px;
  height: auto;
  /* overflow-y: scroll; */
  z-index: 9999;
  position: absolute;
  /* max-width: 88%; */
  pointer-events: all;
  height: -webkit-fill-available;
  overflow-y: scroll;
  padding: 0px;
}

.sidenav ul {
  display: block;
  z-index: 999;
  position: relative;
  padding-left: 32px;
  border-left: 2px solid #ffffff3b;
}

.sidenav ul li {
  display: block;
}

.sidenav ul li ul {
  display: none;
  padding: 0;
  margin-left: 52px;
  position: relative;
  border-left: 1px solid #b9d1e9;
  overflow: hidden;
}

.sidenav ul li:hover ul {
  display: block;
}

.sidenav ul li ul li {
  display: block;
}

.sidenav ul li ul li a {
  display: block;
  font-size: 14px;
  color: #ffffff;
  padding: 9px 14px;
  line-height: normal;
}

.sidenav ul li ul li a:hover {
  background: transparent;
  color: #fff;
}


.sidenav ul li a.sub:after {
  content: '';
  width: 12px;
  height: 8px;
  background: url(../images/icons/down.png) no-repeat center;
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -4px;
}

.sidenav ul li a {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  padding: 13px 0px;
  position: relative;
  display: flex;
}

.sidenav ul li a span {
  font-size: inherit;
  font-weight: inherit;
  color: #fff;
}

.sidenav ul li .toggler {
  display: none !important;
}

.sidenav ul li a i {
  display: inline-block;
  width: 32px;
  height: -webkit-fill-available;
  background-image: url(../images/icons/dashboard.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 7px;
  position: absolute;
  left: 0;
  top: 0;
}

.sidenav ul li a i {
  display: inline-block;
  width: 32px;
  height: -webkit-fill-available;
  background-image: url(../images/icons/dashboard.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 7px;
  position: absolute;
  left: 10px;
  top: 0;
}

.sidenav ul li a i.emply {
  background-image: url(../images/icons/employee-master.png);
}

.sidenav ul li a i.drive {
  background-image: url(../images/icons/drive-master.png);
}

.sidenav ul li a i.cus {
  background-image: url(../images/icons/custom-master.png);
}

.sidenav ul li a i.contract {
  background-image: url(../images/icons/contract-master.png);
}

.sidenav ul li a i.vendor {
  background-image: url(../images/icons/vendor-master.png);
}

.sidenav ul li a i.vech {
  background-image: url(../images/icons/vechicle-master.png);
}

.sidenav ul li a i.book {
  background-image: url(../images/icons/booking-master.png);
}

.sidenav ul li a i.trip {
  background-image: url(../images/icons/trip-managment.png);
}

.sidenav ul li a i.item {
  background-image: url(../images/icons/item-master.png);
}

.sidenav ul li a i.billi {
  background-image: url(../images/icons/billing-master.png);
}

.sidenav ul li a i.coun {
  background-image: url(../images/icons/counselling-master.png);
}

.sidenav ul li a i.ins {
  background-image: url(../images/icons/insurance-master.png);
}

.sidenav ul li a i.vechi {
  background-image: url(../images/icons/vechicle-accident-managment.png);
}

.sidenav ul li a i.ticke {
  background-image: url(../images/icons/ticket-managment.png);
}

.sidenav ul li a i.fuel {
  background-image: url(../images/icons/fuel-rated.png);
}

.sidenav ul li a i.locat {
  background-image: url(../images/icons/location-master.png);
}

.sidenav ul li a i.geo {
  background-image: url(../images/icons/geo-master.png);
}

.sidenav ul li a i.use {
  background-image: url(../images/icons/user-role-master.png);
}

.sidenav ul li a i.mis {
  background-image: url(../images/icons/mis-reports.png);
}

.sidenav ul li a i.manag {
  background-image: url(../images/icons/manage-admin.png);
}

.sidenav ul li a i.admin {
  background-image: url(../images/icons/admin-login.png);
}

h1 .brdrcrm {
  display: block;
  font-size: inherit;
  line-height: normal;
  display: flex;
  align-items: center;
  position: fixed;
  top: 10px;
  z-index: 10;
}

h1 .brdrcrm img {
  display: inline-block;
  margin: 0px 6px;
  margin-top: 4px;
}

.active h1 .brdrcrm {
  margin-left: 140px;
}

.sidenav .closeNav {
  position: fixed;
  display: block;
  width: -webkit-fill-available;
  height: 100%;
  top: 0;
  z-index: -999999999;
}

h1 {
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  margin-top: 4px;
}

h1 br {
  display: none;
}

h1 span {
  display: inline-block;
  font-size: inherit;
  font-weight: 500;
  color: #000;
  font-size: inherit;
  font-family: 'segoe_uisemibold';
}

.mrgTp {
  margin-top: -10px;
  margin-bottom: 50px;
}

ul.brdcrmb {
  display: inline-block;
  float: right;
  /* margin-top: 13px; */
  margin-right: 31px;
}

ul.brdcrmb li {
  display: block;
  float: left;
  margin-right: 19px;
  position: relative;
  padding-right: 19px;
}

ul.brdcrmb li:after {
  content: '';
  display: block;
  background: url(../images/icons/side-light.png) no-repeat center;
  height: 13px;
  width: 8px;
  position: absolute;
  right: -2px;
  top: 5px;
  background-size: 6px;
  transform: rotate(180deg);
}

ul.brdcrmb li:last-child:after {
  display: none;
}

ul.brdcrmb li:last-child {
  margin-right: 0px;
  padding-right: 0;
}

ul.brdcrmb li a {
  display: block;
  /* color: #000; */
}

ul.brdcrmb li a.active {
  color: #0089d4;
}

.ChngRt {
  transition: 0.3s ease;
  margin-left: 199px;
  width: -webkit-fill-available;
}

.active .ChngRt {
  transition: 0.3s ease;
  margin-left: 50px;
}

body .mat-mdc-table {
  min-width: 100%;
  overflow-y: hidden;
}

.hmbr .hamburger-mobile {
  display: none;
  /* Hide mobile icon on desktop */
}

@media (max-width: 768px) {

  .ChngRt,
  .active .ChngRt {
    margin-left: 0;
  }

  .sidenav.active {
    width: 0;
    overflow: hidden;
    /* Hide any overflowing content */
  }

  h1 span {
    display: block;
  }

  h1 .brdrcrm+span::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 13px;
    background: url(../images/icons/brdcrm-arw.png) no-repeat center;
    margin: 0 6px;
  }

  .hmbr {
    padding-top: 10px;
    padding-left: 15px;
  }

  .hmbr>svg:not(.hamburger-mobile) {
    display: none;
    /* Hide desktop icon on mobile */
  }

  .hmbr .hamburger-mobile {
    display: block;
    /* Show mobile icon */
    width: 24px;
    height: 24px;
  }

  /* Mobile Drill-down Menu Styles */
  .sidenav {
    overflow-x: hidden;
    /* Prevent horizontal scroll */
  }

  .sidenav .mat-accordion {
    transition: transform 0.3s ease-in-out;
  }

  /* Reset submenu positioning for mobile drill-down */
  .sidenav .mat-expansion-panel-content {
    position: static;
    height: auto;
    visibility: visible;
  }

  .role-dropdown-panel {
    max-height: 250px !important;
  }

  .mrgTp {
    margin-top: -50px;
  }
}

.search-select-panel {
  max-height: 250px !important;
}

.search-select-panel .mat-option[aria-disabled='true'].contains-mat-select-search,
.search-select-panel .mat-mdc-option[aria-disabled='true'].contains-mat-select-search {
  position: sticky;
  top: 0;
  z-index: 5;
  opacity: 1;
  pointer-events: all;
  background: var(--mat-select-panel-background-color, #fff);
  margin-top: 0;
}

.search-select-panel .mat-option[aria-disabled='true'].contains-mat-select-search {
  height: auto;
  line-height: normal;
}

.search-select-panel .mat-option[aria-disabled='true'].contains-mat-select-search .mat-option-text,
.search-select-panel .mat-mdc-option[aria-disabled='true'].contains-mat-select-search .mdc-list-item__primary-text {
  white-space: normal;
}

body .mat-mdc-table thead {
  position: sticky;
  /* top: 53px; */
  z-index: 4;
}

body .mdc-text-field--no-label:not(.mdc-text-field--textarea) .mat-mdc-form-field-input-control.mdc-text-field__input,
.mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control {
  font-size: 14px;
  letter-spacing: initial;
  line-height: normal;
}

.whtnav {
  margin-top: -20px;
}

.flx {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0px;
  flex-wrap: wrap;
}

.flx .shuffle {
  color: #000000;
  display: inline-block;
}

.flx .shuffle .arw {
  display: inline-block;
  line-height: 0;
  margin-left: 23px;
  margin-right: 16px;
}

.flx .shuffle .arw a {
  display: inline-block;
  width: 8px;
  height: 13px;
  background: url(../images/icons/side-light.png) no-repeat center;
  cursor: pointer;
  transition: 0.3s ease;
}

.flx .shuffle .arw a.rgArw {
  transform: rotate(180deg);
  margin-left: 22px;
}

.flx .shuffle .arw a:hover {
  background: url(../images/icons/side-dark.png) no-repeat center;
}

.flx .btn {
  display: inline-block;
  margin-left: 10px;
}

.white .grey {
  background: #0089d40f;
  margin: -20px -20px;
  margin-bottom: 0;
  padding: 20px 20px;
  margin-bottom: 10px;
}

.white {
  display: block;
  background: #fff;
  padding: 0px;
  border-radius: 5px;
  margin-top: 12px;
  border: 1px solid #e9ebec;
  -webkit-box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
  box-shadow: 0 2px 11px rgb(93 93 93 / 8%);
  padding-top: 0px;
  padding-bottom: 12px;
}

.white .TblScrl {
  display: block;
}

.fldWrp {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
}

.Chk {
  display: block;
}

.Chk li {
  display: flex;
  float: left;
  margin-right: 12px;
}

.Chk li input {
  display: inline-block;
  width: fit-content;
  margin-right: 6px;
}

.white.add .fldWrp .Chk li label {
  display: inline-block;
  width: fit-content;
  margin: 0;
}

.fldWrp select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 98% center !important;
}

.fldWrp input,
.fldWrp select {
  display: block;
  width: -webkit-fill-available;
  border: 0px;
  background: #fff;
  font-size: 15px;
  color: #636363;
  outline: 0;
  padding: 3px 13px;
  border-radius: 5px;
  border: 1px solid #ababab;
}

.fldWrp input:hover,
.fldWrp select:hover {
  border-color: black;
}

.fldWrp .btn.srch,
.fldWrp .btn.cFltr {
  background: url(../images/icons/search.png) no-repeat #0089d4 center;
  outline: 0;
  width: 47px;
  display: inline-block;
  border-color: #0089d4;
  text-indent: -99999px;
  margin-right: 5px;
}

.fldWrp .btn.srch:after,
.fldWrp .btn.cFltr:after,
.fldWrp .download:after {
  display: none;
}

.fldWrp .btn.cFltr {
  background-image: url(../images/icons/clear-filter.png);
}

.fldWrp .download:before {
  content: '';
  display: block;
  background: url(../images/icons/download-icon.png) no-repeat center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 20px;
  top: 0;
}

.fldWrp .download {
  /* background: url(../images/icons/download-icon.png) no-repeat center #0089d4; */
  outline: 0;
  background-size: 20px;
  width: 47px;
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
  padding: 10.51px 0px;
  margin-left: 12px;
}

.fldWrp textarea {
  display: block;
  width: -webkit-fill-available;
  border: 0px;
  font-size: 15px;
  color: #636363;
  outline: 0;
  padding: 5px 13px;
  border-radius: 7px;
  border: 1px solid #ababab;
}

.loading-spinner {
  margin-left: 10px;
  /* Adjust spacing as needed */
}

.ConTbl {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-color: #fff;
}

.ConTbl .tbody {
  width: 100%;
}

.ConTbl {
  border-collapse: separate;
  border-spacing: 2px !important;
}

/*.ConTbl tr:last-child{border-bottom:0px;}*/
body .mat-mdc-table .mdc-data-table__row {
  height: 40px;
}

body .mat-mdc-table .mdc-data-table__header-row {
  height: 45px;
}

.ConTbl tr:nth-child(odd):hover,
.ConTbl tr:hover {
  background: #efefef !important;
}

.ConTbl tr:nth-child(odd) {
  background: #f7f7f799 !important;
}

.ConTbl tr {
  /* display:block; */
  width: 100%;
  border-bottom: 1px solid #ebebeb;
}

.ConTbl tr th {
  font-weight: 500;
}

.ConTbl tr th.SrNo,
.ConTbl tr td.SrNo {
  width: 75px;
  min-width: initial;
  text-align: center;
}

.ConTbl tr th.Code,
.ConTbl tr td.Code {
  width: 136px;
  min-width: initial;
}

.ConTbl tr th.sort {
  cursor: pointer;
  background: url(../images/icons/sort-icon.png) no-repeat;
  background-size: 7px;
  background-position: 95% center;
  padding-right: 21px;
}

.ConTbl tr th.sr,
.ConTbl tr td.sr {
  width: 6%;
  min-width: 60px;
  text-align: center;
}

.ConTbl tr th {
  /* border: 1px solid #c9ecff !important; */
}

.ConTbl tr th,
.ConTbl tr td {
  padding: 6px 10px;
  font-size: 14px;
  color: #212529;
  text-align: left;
  vertical-align: middle;
  width: fit-content;
  min-width: 70px;
  line-height: 1.3em;
  /* border: 1px solid #00000012; */
  overflow: initial;
}

.ConTbl tr th {
  background-color: #e5f6ff !important;
  color: #000;
  padding: 0px 10px;
  font-family: 'segoe_uisemibold';
}

.ConTbl tr:nth-child(1) {
  border-bottom: 0px;
}

.ConTbl tr th.TxtLft,
.ConTbl tr td.TxtLft {
  text-align: left;
  width: 25%;
}

.ConTbl tr td .user {
  display: block;
  margin-right: 0px;
}

.ConTbl tr td .user img {
  display: inline-block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 7px;
  overflow: hidden;
}

.ConTbl tr td h4 {
  display: inline-block;
  font-size: 15px;
  text-align: left;
  font-weight: 500;
  color: #000000;
}

.ConTbl tr td h4 span {
  display: block;
  font-size: inherit;
  color: #667580;
  text-align: inherit;
  font-weight: 300;
}

.ConTbl tr td .align {
  display: flex;
  align-items: center;
  width: fit-content;
}


/*.ConTbl tr td button{
  background: url(../images/icons/view-icon-blck.png) no-repeat 13px center;
  background-size: 12px;
  width: fit-content;
  padding: 5px 12px;
  font-size: 15px;
  text-align: center;
  border: 0;
  outline: 0;
  cursor: pointer;
  background-color: #0089d4;
  border-radius: 10px;
  padding-left: 30px;
  text-shadow: 0 1px 0 #005685;
  color: #fff;
  }*/

.ConTbl tr td .edt {
  background: url(../images/icons/edit-icon-hover.png) no-repeat 13px center;
  background-size: 12px;
  width: fit-content;
  padding: 5px 12px;
  font-size: 15px;
  text-align: center;
  border: 0;
  outline: 0;
  cursor: pointer;
  background-color: #0089d4;
  border-radius: 10px;
  padding-left: 30px;
  text-shadow: 0 1px 0 #005685;
  color: #fff;
}

body .mat-mdc-paginator-page-size-label {
  font-family: 'segoe_uisemibold';
  margin-right: 9px;
}

.ConTbl tr td .edt:hover {
  background-color: #026399;
  color: #fff;
  background-image: url(../images/icons/edit-icon-hover.png);
}

/* ============================================================
   Row action menu — shared by every listing table (.Extra > .drop)
   Opens on hover (mouse), on click/tap (.is-open, toggled by
   assets/js/custom.js) and stays open while focus is inside it.
   The !important flags neutralise the standalone `.edt` / `.btn`
   pill styles, which otherwise leak into the menu rows and render
   an action as a floating blue button instead of a menu item.
   ============================================================ */

.ConTbl tr td .Extra {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0;
  background: url(../images/icons/dots-white.png) no-repeat #0089d4 center;
  background-size: 16px;
  border-radius: 6px;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.ConTbl tr td .Extra:hover,
.ConTbl tr td .Extra.is-open {
  background-color: #0273b1;
  box-shadow: 0 2px 6px rgba(0, 87, 137, .3);
}

.ConTbl tr td .Extra:focus-visible {
  outline: 2px solid #0273b1;
  outline-offset: 2px;
}

/* Panel: plain display toggling - the most reliable way to keep every item
   clickable (a hidden-but-present panel can swallow clicks). */
.ConTbl tr td .Extra .drop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 3px);
  z-index: 999999;
  min-width: 158px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e2ebf3;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(16, 42, 67, .14);
  text-align: left;
}

/* Opens on hover, and stays pinned once the trigger is clicked or tapped
   (.is-open is set by assets/js/custom.js). */
.ConTbl tr td .Extra:hover .drop,
.ConTbl tr td .Extra.is-open .drop {
  display: block;
}

/* Invisible bridge across the gap between trigger and panel, so walking the
   pointer down to an item does not close the menu. It covers the gap only -
   never the items themselves, which would eat their clicks. */
.ConTbl tr td .Extra .drop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

.ConTbl tr:last-child td .Extra .drop::before,
.ConTbl tr:nth-last-child(2) td .Extra .drop::before,
.ConTbl tr:nth-last-child(3) td .Extra .drop::before {
  top: auto;
  bottom: -8px;
}

.ConTbl tr:first-child td .Extra .drop::before,
.ConTbl tr:nth-child(2) td .Extra .drop::before,
.ConTbl tr:nth-child(3) td .Extra .drop::before {
  top: -8px;
  bottom: auto;
}

/* Flip upwards on the last rows so the menu is never cut off … */
.ConTbl tr:last-child td .Extra .drop,
.ConTbl tr:nth-last-child(2) td .Extra .drop,
.ConTbl tr:nth-last-child(3) td .Extra .drop {
  top: auto;
  bottom: calc(100% + 3px);
}

/* … and always downwards on the first rows (wins for short tables) */
.ConTbl tr:first-child td .Extra .drop,
.ConTbl tr:nth-child(2) td .Extra .drop,
.ConTbl tr:nth-child(3) td .Extra .drop {
  top: calc(100% + 3px);
  bottom: auto;
}

/* Menu rows */
.ConTbl tr td .Extra .drop a,
.ConTbl tr td .Extra .drop button {
  display: block;
  width: auto !important;
  margin: 0;
  padding: 6px 12px 6px 32px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  background-size: 13px !important;
  box-shadow: none !important;
  color: #17293b !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left !important;
  text-decoration: none;
  text-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.ConTbl tr td .Extra .drop a:hover,
.ConTbl tr td .Extra .drop button:hover {
  background-color: #e8f4fd !important;
  color: #0273b1 !important;
}

.ConTbl tr td .Extra .drop a:focus-visible,
.ConTbl tr td .Extra .drop button:focus-visible {
  background-color: #e8f4fd !important;
  color: #0273b1 !important;
  outline: 2px solid #0089d4;
  outline-offset: -2px;
}

.ConTbl tr td .Extra .drop a:after {
  display: none;
}

/* Rows that carry their own inline icon (<i>/<mat-icon>) keep a tight gutter */
.ConTbl tr td .Extra .drop a:has(> i),
.ConTbl tr td .Extra .drop a:has(> .fa),
.ConTbl tr td .Extra .drop a:has(> mat-icon) {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 11px !important;
}

/* Row icons — coloured, never black */
.ConTbl tr td .Extra .drop a.vw,
.ConTbl tr td .Extra .drop .vw {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230089d4'%3E%3Cpath d='M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7Zm0 11.5A4.5 4.5 0 1 1 16.5 12 4.5 4.5 0 0 1 12 16.5Zm0-7A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5Z'/%3E%3C/svg%3E") !important;
}

.ConTbl tr td .Extra .drop a.edt,
.ConTbl tr td .Extra .drop .edt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230089d4'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z'/%3E%3C/svg%3E") !important;
}

.ConTbl tr td .Extra .drop a.dsp,
.ConTbl tr td .Extra .drop .dsp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230089d4'%3E%3Cpath d='M20 8h-3V4H3a2 2 0 0 0-2 2v11h2a3 3 0 0 0 6 0h6a3 3 0 0 0 6 0h2v-5l-3-4ZM6 18.5A1.5 1.5 0 1 1 7.5 17 1.5 1.5 0 0 1 6 18.5Zm13.5-9 1.96 2.5H17V9.5h2.5ZM18 18.5A1.5 1.5 0 1 1 19.5 17 1.5 1.5 0 0 1 18 18.5Z'/%3E%3C/svg%3E") !important;
}

.ConTbl tr td .Extra .drop a.download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23138f5b'%3E%3Cpath d='M5 20h14v-2H5v2Zm14-9h-4V3H9v8H5l7 7 7-7Z'/%3E%3C/svg%3E") !important;
}

.ConTbl tr td .Extra .drop a.dlt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d64545'%3E%3Cpath d='M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6v12ZM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4Z'/%3E%3C/svg%3E") !important;
  color: #b23434 !important;
}

.ConTbl tr td .Extra .drop a.dlt:hover {
  background-color: #fdeceb !important;
  color: #a12121 !important;
}

/* Rows without an icon class keep the same text alignment as the rest */
.ConTbl tr td .Extra .drop a:not([class]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394aec2'%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E") !important;
  background-size: 9px !important;
}


.FormPnl {
  display: block;
}

.FormPnl .fldWrp {
  display: block;
  margin-bottom: 15px;
}

.FormPnl .fldWrp label {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  margin-bottom: 5px;
}

.FormPnl .fldWrp input.btn {
  color: #fff;
  background: #0089d4;
  width: fit-content;
  padding: 10px 30px;
  border-color: #0089d4;
}

.FormPnl .fldWrp button.btn {
  color: #fff;
  background: #0089d4;
  width: fit-content;
  padding: 10px 30px;
  border-color: #0089d4;
  display: inline-block;
  margin-right: 10px;
}

.FormPnl .fldWrp button.btn.cncl {
  background: #000000;
  color: #fff;
}

.FormPnl .fldWrp button.btn:last-child {
  margin-right: 0px;
}

.FormPnl .fldWrp button.btn:after {
  display: none;
}

body .FormPnl .fldWrp .mat-mdc-form-field {
  margin-right: 0;
  width: -webkit-fill-available;
}

body .FormPnl .fldWrp .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
  min-height: 31px;
  padding: 1px 0px;
}

body .FormPnl .fldWrp .mdc-text-field--filled:not(.mdc-text-field--disabled),
body .FormPnl .fldWrp .mat-mdc-text-field-wrapper {
  border-color: #ababab;
}

body .FormPnl .fldWrp .mat-mdc-form-field-bottom-align::before {
  height: auto;
}

body .FormPnl .fldWrp .mat-mdc-form-field-subscript-wrapper {
  line-height: 0px;
}

ul.summery {
  display: block;
}

ul.summery li {
  display: block;
  float: left;
  line-height: normal;
  font-size: 14px;
  width: 22.5%;
  margin-right: 2.5%;
  margin-bottom: 15px;
}

ul.summery li:last-child {
  margin-right: 0px;
}

ul.summery.clm5 li {
  width: 17.5%;
  margin-right: 2.5%;
}

ul.summery li b {
  display: block;
  font-weight: bold;
  line-height: 1.5em;
  font-size: 107%;
}

ul.dealSmry {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

ul.dealSmry li {
  border: 2px solid black;
  border-radius: 15px;
  width: 180px;
  height: 40px;
  background: #fff;
  align-items: center;
  text-align: center;
  font-size: 16px;
}

ul.dealSmry li b {
  font-size: 20px;
  font-weight: bold;
}


.white.add {
  padding: 12px;
}

.white.add .fldWrp {
  display: block;
  margin-bottom: 15px;
}

.white.add .fldWrp label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  margin-bottom: 5px;
}

.white.add .fldWrp input.btn {
  color: #fff;
  background: #0089d4;
  width: fit-content;
  padding: 10px 30px;
  border-color: #0089d4;
}

.white.add .fldWrp a.vwFile {
  color: #0089d4;
  font-weight: bold;
  float: right;
  cursor: pointer;
}

.white.add .fldWrp a.vwFile:hover {
  color: #000;
  text-decoration: underline;
}

.white.add .fldWrp button.btn {
  color: #fff;
  background: #0089d4;
  width: fit-content;
  padding: 10px 30px;
  border-color: #0089d4;
  display: inline-block;
  margin-right: 10px;
  min-width: 160px;
  font-weight: bold;
  font-size: 16px;
}

.white.add .fldWrp button.btn.cncl {
  background: #000000;
  color: #fff;
}

.white.add .fldWrp button.btn:hover,
.white.add .fldWrp input.btn:hover {
  background: #000000;
  color: #fff;
}

.white.add .fldWrp button.btn:last-child {
  margin-right: 0px;
}

.white.add .fldWrp button.btn:after {
  display: none;
}

body .cdk-overlay-container,
body .cdk-global-overlay-wrapper,
body .cdk-overlay-pane {
  z-index: 1000;
}

/*max-width: 640px !important;height: 600px !important; */
body .cdk-overlay-pane.mat-mdc-select-panel-above {
  height: auto !important;
}

body .cdk-overlay-pane .ChngRt {
  margin: 0px;
}

body .cdk-overlay-pane .container {
  max-width: initial;
}

body .cdk-overlay-pane .white {
  box-shadow: initial;
  border: 0;
  padding: 0;
  margin: 0;
}

body .cdk-overlay-pane .mat-mdc-dialog-container .mdc-dialog__title {
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 20px;
  padding: 14px 25px;
  line-height: normal;
  margin-bottom: 0px;
}

body .cdk-overlay-pane .mat-mdc-dialog-container .mdc-dialog__title:before {
  display: none;
}

body .cdk-overlay-pane .mat-mdc-dialog-container .mat-mdc-dialog-content .mat-mdc-card-header {
  padding: 0px;
}


body .mat-mdc-dialog-container .mdc-dialog__surface {
  position: relative;
}

body .mat-mdc-dialog-container .mdc-dialog__surface .close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  line-height: normal;
  opacity: 10;
  display: block;
  cursor: pointer;
  color: red;
}

body .mat-mdc-dialog-container .mdc-dialog__surface .close button {
  display: block;
  line-height: normal;
  outline: 0;
  border: 0;
  background: #0089d4;
  color: #fff;
  opacity: 10;
  padding: 0px 10px;
  margin: 0;
  cursor: pointer;
}

.card {
  margin-top: 50px;
}

.card-header {
  background-color: #0089d4;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.card-body button {
  width: -webkit-fill-available;
}

.card-body button:after {
  display: none;
}

.card-body .rest {
  display: block;
  text-align: center;
  text-decoration: underline;
  font-size: 17px;
  margin-top: 20px;
  color: #000;
}

.card-body h2 {
  font-size: 25px;
  font-weight: 600;
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 7px;
  margin-bottom: 24px;
}

.card-body {
  padding: 20px;
  padding-bottom: 35px;
}

.rolePerm {}

.rolePerm .lvl2 {
  background: #eeeeeead;
}

.rolePerm .lvl1 {
  background: #0089d42b;
}

.btn-primary {
  background-color: #0089d4;
  border-color: #0089d4;
  font-size: 19px;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #0089d4;
  border-color: #0089d4;
}

label {
  font-size: 18px;
  font-weight: 400;
  width: -webkit-fill-available;
}

.form-control {
  display: block;
  padding: 14px 10px;
  margin-top: 7px;
  border-color: #5c5c5c;
}

.form-group {
  margin-bottom: 25px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {}

input:checked+.slider {
  background-color: #0089d4;
}

input:focus+.slider {
  box-shadow: 0 0 1px #0089d4;
}

input:checked+.slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}



.bnrimg {
  background: url("../images/login-img.jpg")no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
}

.bnrimg h1 {
  font-size: 71.96px;
  font-weight: 900;
  color: #fff;
  line-height: 71px;
  padding-bottom: 17px;
}

.bnrimg p {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  line-height: 28px;
}

.lgn {
  display: block;
  position: relative;
  margin-top: -95px;
}

.lgn .logoCtr {
  display: block;
  position: absolute;
  z-index: 2;
  background: #2273c9;
  width: 285px;
  height: 285px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  top: 50%;
  margin-left: -133px;
  margin-top: -133px;
  border: 20px solid #f3f3f9;
}

.lgn .logoCtr img {
  display: block;
}



.login-container {
  width: 300px;
  margin: 100px auto;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-container h2 {
  text-align: center;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input[type="text"],
.input-group input[type="password"] {
  width: 100%;
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.input-group button {
  width: 100%;
  padding: 8px;
  border-radius: 3px;
  border: none;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.btnlog {
  display: block;
  width: -webkit-fill-available;
  padding: 14px 10px 9px;
  border: 0px;
  outline: 0px;
  background-color: #2273c9;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  margin-bottom: 7px;
}

.input-group button:hover {
  background-color: #0056b3;
}

h6 {
  font-size: 33px;
  font-weight: 800;
  color: #000;
  padding-bottom: 29px;
}

a.rest {
  font-size: 17px;
  color: #252525;
  font-weight: 400;
  text-align: center;
}

body div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background: #0089d4;
}

.form {
  width: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0% 169px;
}

.form form {
  width: -webkit-fill-available;
  max-width: 477px;
}

.bnrimg.forget {
  background: url("../images/forgetbnr.jpg")no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
}

.whtnav.grey {
  background-color: #0089d40f;
  margin-top: 10px;
}

.whtnav.grey label {
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 5px;
}

.whtnav.srchPnl {
  background-color: #0089d40f;
  margin-top: 10px;
  padding: 15px;
}

.whtnav.srchPnl .fldWrp {
  display: block;
}

.whtnav.srchPnl .fldWrp label {
  display: block;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 5px;
  width: 100%;
}

.whtnav.srchPnl .fldWrp input {
  display: block;
  width: 100%;
}

.whtnav.srchPnl .fldWrp input.btn {
  width: 60px;
  display: inline-block;
}

.whtnav.srchPnl .fldWrp .btn.download {
  float: right;
  margin-right: 0px;
}

.whtnav.srchPnl .fldWrp select {
  display: block;
  width: 100%;
}

.whtnav.srchPnl .mdc-text-field--filled:not(.mdc-text-field--disabled),
bo.whtnav.srchPnl dy .mat-mdc-text-field-wrapper {
  background: white;
  border: 1px solid #cdcdcd;
  border-radius: 6px;
  padding-left: 14px;
}

.whtnav.srchPnl .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
  background: #000;
}

.whtnav.srchPnl .mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mdc-floating-label--float-above {
  display: none;
}

.whtnav.srchPnl .mat-mdc-form-field {
  display: block;
  margin: 0px;
}

.whtnav.srchPnl .fldWrp .mat-mdc-form-field {
  width: -webkit-fill-available;
}

.whtnav.srchPnl .mat-mdc-form-field-subscript-wrapper {
  position: absolute;
}

.whtnav.srchPnl .mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mat-mdc-floating-label {
  top: 19px;
}

.whtnav.srchPnl .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
  transform: initial;
}

.whtnav.srchPnl .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
  padding: 3px 0px;
  min-height: initial;
}

.whtnav.srchPnl .mdc-text-field--filled:not(.mdc-text-field--disabled),
.whtnav.srchPnl .mat-mdc-text-field-wrapper {
  border: 1px solid #ababab;
}

.whtnav.srchPnl .vehSummary {
  margin-top: 10px;
}

.whtnav.srchPnl .vehSummary b {
  font-weight: bold;
}

.whtnav.srchPnl .col-1 {
  padding-right: 0px;
}

.whtnav.srchPnl .col {
  padding-right: 0px;
}

.vhTrkData {}

.vhTrkData .title {
  font-weight: bold;
  font-size: 18px;
}

.vhTrkData .dtLst {
  margin-bottom: 10px;
}

.vhTrkData .dtLst li {
  color: #333;
  float: left;
  width: 50%;
  line-height: 14px;
  margin-top: 2px;
  font-size: 12px;
  min-height: 30px;
  display: flex;
}

.vhTrkData .dtLst li.fl {
  width: 100%;
}

.vhTrkData .dtLst li b {
  color: #000;
  font-weight: bold;
  display: inline;
  font-size: 13px;
}


/*******/

.small-text {
  font-size: 13px;
}

.clr-text {
  font-size: 14px;
  color: #7539ff;
}

.travel-history {
  height: 60vh;
  overflow: auto;
  position: relative;
  z-index: 1000;
  position: absolute;
  left: 419px;
  width: 100%;
}


@media only screen and (max-width: 1600px) {

  .ConTbl tr th,
  .ConTbl tr td {
    font-size: 13px;
  }

  .ConTbl tr td .edt {
    font-size: 13px;
    background-size: 11px;
  }

  .btn {
    font-size: 13px;
  }
}

@media only screen and (max-width: 1150px) {
  .lgn .logoCtr {
    top: 30px;
    border-radius: 0;
    background: transparent;
    padding: 0;
    width: auto;
    height: auto;
    border: 0;
    margin: 0;
    left: 0;
    margin-left: 40px;
  }

  .lgn .col-6 {
    max-width: 100%;
    flex: initial;
  }

  .bnrimg {
    height: auto;
    margin-bottom: 50px;
    padding: 70px 0px;
    padding-top: 108px;
  }

  .form {
    height: auto;
    padding: 0px;
  }
}

@media only screen and (max-width: 650px) {
  .bnrimg p br {
    display: none;
  }

  .bnrimg h1 {
    font-size: 51.96px;
    line-height: normal;
  }

  .form form {
    padding: 0px 30px;
  }
}

@media only screen and (max-width: 450px) {
  header .FlxHd {
    display: flex;
    align-items: center;
  }

  header .pnl {
    padding: 0px;
  }

  /* .Scrll{margin-top: -25px;} */
  h1 {
    margin-left: 0px;
    margin-bottom: 10px;
  }

  h1 .brdrcrm {
    display: block;
    font-size: inherit;
    line-height: normal;
    display: flex;
    align-items: center;
    position: relative;
    top: 0px;
    z-index: 0;
  }

  h1 span {
    display: inline;
  }

  .active h1 .brdrcrm {
    margin-left: 0px;
    display: inline;
    z-index: 0;
  }

  .whtnav {
    margin-top: 10px;
  }

  .flx {
    justify-content: flex-start;
  }

  .flx .btn {
    display: inline-block;
    margin-left: 0px;
    margin-right: 10px;
  }

  .col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 97%;
    max-width: 100%;
  }

  .whtnav .col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 97%;
    max-width: 100%;
  }

  .white {
    overflow-y: hidden;
  }
}

.TblScrl,
.tblContainer {
  overflow: visible;
  position: relative;
}

.btnn {
  background-color: #0089d4;
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btnn:focus {
  outline: none;
  box-shadow: none;
}

.btnn:hover {
  background-color: #006fa1;
}

.h-33 {
  height: 33px;
}

/**customer tracking start**/
.btn-left {
  float: left !important;
}

.cdk-overlay-pane {
  max-width: none !important;
}

::ng-deep .full-width-dialog .mat-dialog-container {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0;
}

/*customer-tracking routeLogs start*/
.timeline-item-routeLogs-css {
  position: relative;
  padding-left: 24px;
  margin-bottom: 20px;
  border-left: 2px solid #ccc;

  .circle {
    position: absolute;
    left: -6px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;

    &.move {
      background-color: #22c55e;
    }

    &.stop {
      background-color: #ef4444;
    }
  }

  .content {
    .location {
      font-weight: 500;
      font-size: 14px;
      color: #333;
      margin-bottom: 4px;
    }

    .details {
      font-size: 13px;
      color: #16a34a;
      margin-bottom: 4px;

      &.stop {
        color: #dc2626;
      }
    }

    .time {
      font-size: 12px;
      color: #666;
    }
  }
}

/*customer-tracking routeLogs  End*/
.pointer {
  cursor: pointer;
}

.border-top-none {
  border-top: none;
}

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

/*customer-tracking  start*/
.travel-history-details-box {
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  font-size: 10px;
  border: 1px solid rgb(183, 183, 183);
}

/*customer-tracking  End*/
.travel-history-form-control {
  padding: 5px 20px;
}

.modal-wrapper {
  width: 100vw;
  max-width: 100% !important;
}

/*customer-tracking  start*/
.me-3 {
  margin-right: 15px;
}

.table-scroll-69vh {
  height: 69vh;
  overflow: auto;
}

.fs-13 {
  font-size: 13px;
}

.text-red {
  color: red !important;
}

.rounded-tl-7 {
  border-top-left-radius: 7px !important;
}

.rounded-tr-7 {
  border-top-right-radius: 7px !important;
}

.rounded-bl-7 {
  border-bottom-left-radius: 7px !important;
}

.rounded-br-7 {
  border-bottom-right-radius: 7px !important;
}

.pos-relative {
  position: relative !important;
}

.max-h-28vh-scroll {
  max-height: 28vh !important;
  overflow: auto !important;
}

/*customer-tracking  End*/
.btn.no-icon:after {
  display: none !important;
}

.approve-btn {
  background-color: rgb(76, 175, 80) !important;
  background-image: none !important;
}

.reject-btn {
  background-color: rgb(220, 53, 69) !important;
  background-image: none !important;
}

.tblContainer {
  min-height: 500px;
}

/* Support Tickets - Action By and Date Cell Formatting */
/* .ConTbl tr td .action-by-cell {
  white-space: nowrap;
  line-height: 1.3em;
}

.ConTbl tr td .date-cell {
  white-space: nowrap;
} */


/* Link style for document/file "View" links in tables */
.doc-link {
  color: #007bff !important;
  /* hyperlink blue */
  text-decoration: underline !important;
  cursor: pointer !important;
  background: transparent !important;
  /* ensure no background from global .text-danger etc. */
}

.doc-link:hover {
  text-decoration: underline;
  opacity: 0.88;
}

/*file details Start*/


.dialog-container2 {
  height: 70% !important;
  width: 100% !important;
}



.dialog-header h4 {
  margin: 0;
  font-size: 16px;
}

.dialog-header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dialog-body {
  padding: 8px;
}

.resizer {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 4px;
  bottom: 4px;
  cursor: se-resize;
  background: transparent;
  border-bottom-right-radius: 4px;
}


.dialog-header {
  padding: 8px 12px;
  background: #f5f5f5;
  cursor: move;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-style {
  background-color: rgb(13, 110, 253) !important;
  color: #fff;
  border: 1px solid rgb(13, 110, 253);
  padding: 6px 12px;
  border-radius: 4px;
}

.btn-style:hover {
  background-color: rgb(11, 94, 215);
  border-color: rgb(11, 94, 215);
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.25s ease;
  outline: none;
}

.icon-btn mat-icon {
  font-size: 22px;
  color: white;
}

.download-btn-dialog {
  background: rgb(13, 110, 253);
  margin-right: 30px;
}

.download-btn-dialog:hover {
  background: rgb(11, 94, 215);
}

.close-btn-dialog {
  background: rgb(220, 53, 69);
  margin-right: 10px;
}

.close-btn-dialog:hover {
  background: rgb(200, 35, 51);
}

.resize-handle {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  cursor: se-resize;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgb(214, 216, 220);
  border: 1px solid #ccc;
  border-radius: 4px;
}

.resize-icon {
  width: 18px;
  height: 18px;
}

.file-preview-window .header-actions {
  display: flex;
  gap: 10px;
}

.file-preview-window .icon-btn {
  height: 40px;
  margin-right: 0;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  width: 40px;
}

.file-preview-window .header-action-btn,
.file-preview-window .page-rotate-btn {
  background: #fff;
  border: 1px solid #d9dee7;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  color: #344054;
}

.file-preview-window .header-action-btn mat-icon {
  color: currentColor !important;
  font-family: 'Material Icons' !important;
  font-size: 22px;
  height: 22px;
  line-height: 22px;
  width: 22px;
}

.file-preview-window .header-action-btn:hover,
.file-preview-window .page-rotate-btn:hover {
  background: #f8fafc;
  border-color: #b8c2d1;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12);
}

.file-preview-window .download-btn-dialog {
  color: #175cd3;
}

.file-preview-window .print-btn-dialog {
  color: #067647;
}

.file-preview-window .close-btn-dialog {
  color: #b42318;
}

.file-preview-window .close-btn-dialog:hover {
  background: #fff1f3;
  border-color: #fda29b;
}

.file-preview-window .page-rotate-btn {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  width: 34px;
  z-index: 4;
}

.file-preview-window .page-rotate-btn:hover {
  color: #175cd3;
}

.file-preview-window .page-rotate-btn .material-icons {
  color: currentColor;
  font-family: 'Material Icons' !important;
  font-size: 20px;
  line-height: 20px;
}




/*file details End*/

/*drop down globally fully expanded in every table */
.white .TblScrl .tblContainer {
  min-height: calc(100vh - 220px);
}

/* Prevent date from breaking across multiple lines in table cells */
.tbl-date-single-line {
  white-space: nowrap;
}

/* scrollable popup table */
.scrollVertical {
  max-height: 75vh;
  overflow: auto;
}

/* Make dialog header draggable cursor */
.dialog-drag-header {
  cursor: move;
}

.disabled-action-item {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* MR Note - equal control heights via global stylesheet */
app-mr-note {
  --mr-note-control-height: 34px;
  --mr-note-control-font-size: 12px;
  --mr-note-control-padding-x: 4px;
}

app-mr-note .white.add .fldWrp input {
  height: var(--mr-note-control-height);
  font-size: var(--mr-note-control-font-size);
  padding: 2px var(--mr-note-control-padding-x);
  box-sizing: border-box;
}

app-mr-note .white.add .fldWrp .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}

app-mr-note .white.add .fldWrp .mat-mdc-form-field {
  margin: 0 !important;
}

app-mr-note .white.add .fldWrp .mat-mdc-text-field-wrapper {
  height: var(--mr-note-control-height) !important;
  padding-left: var(--mr-note-control-padding-x) !important;
  padding-right: var(--mr-note-control-padding-x) !important;
}

app-mr-note .white.add .fldWrp .mat-mdc-form-field-infix {
  min-height: var(--mr-note-control-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

app-mr-note .white.add .fldWrp .mat-mdc-select-trigger {
  height: var(--mr-note-control-height) !important;
  font-size: var(--mr-note-control-font-size) !important;
}

app-mr-note .white.add .fldWrp .mat-mdc-select-value-text,
app-mr-note .white.add .fldWrp .mat-mdc-select-min-line {
  font-size: var(--mr-note-control-font-size) !important;
}

/* Tyre Receipt From Vehicle - table control sizing moved from component ::ng-deep */
app-tyre-receipt-from-vehicle {
  --tyre-receipt-control-height: 33px;
  --tyre-receipt-control-font-size: 12px;
  --tyre-receipt-control-padding-x: 3px;
}

app-tyre-receipt-from-vehicle .tyre-table-section .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}

app-tyre-receipt-from-vehicle .tyre-table-section .mat-mdc-text-field-wrapper {
  height: var(--tyre-receipt-control-height) !important;
  min-height: var(--tyre-receipt-control-height) !important;
  padding-left: var(--tyre-receipt-control-padding-x) !important;
  padding-right: var(--tyre-receipt-control-padding-x) !important;
}

app-tyre-receipt-from-vehicle .tyre-table-section .mat-mdc-form-field {
  margin: 0 !important;
  width: 100% !important;
}

app-tyre-receipt-from-vehicle .tyre-table-section .mat-mdc-form-field-infix {
  min-height: var(--tyre-receipt-control-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

app-tyre-receipt-from-vehicle .tyre-table-section .mat-mdc-select-trigger {
  height: var(--tyre-receipt-control-height) !important;
  font-size: var(--tyre-receipt-control-font-size) !important;
}

app-tyre-receipt-from-vehicle .tyre-table-section .mat-mdc-select-value-text,
app-tyre-receipt-from-vehicle .tyre-table-section .mat-mdc-select-min-line {
  font-size: var(--tyre-receipt-control-font-size) !important;
}

/* Material Issues - moved from component ::ng-deep */
app-material-issues .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}

app-material-issues .mat-mdc-form-field-infix {
  padding-left: 0 !important;
}

/* Reusable autocomplete panel + tooltip */
.dgfc-autocomplete-rich-panel:is(.mat-mdc-autocomplete-panel, .mat-autocomplete-panel) {
  max-height: 280px;
}

.dgfc-autocomplete-rich-panel :is(.mat-mdc-option, .mat-option) {
  position: relative;
  min-height: 34px;
  line-height: 1.35;
  font-size: 12px;
}

.dgfc-autocomplete-rich-panel :is(.mat-mdc-option, .mat-option):not(:last-child)::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1px;
  background: #cfd8e3;
}

.dgfc-autocomplete-rich-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),
.dgfc-autocomplete-rich-panel .mat-option:hover:not(.mat-option-disabled) {
  background: #8fd0f2;
}

.dgfc-autocomplete-rich-panel .mat-mdc-option.mat-mdc-option-active,
.dgfc-autocomplete-rich-panel .mat-option.mat-active {
  background: #8fd0f2 !important;
  box-shadow: inset 3px 0 0 #1f75cb;
}

.dgfc-option-tooltip.mat-mdc-tooltip .mdc-tooltip__surface {
  font-size: 12px;
  line-height: 1.3;
  max-width: 420px;
  padding: 6px 8px;
  white-space: normal;
}

/* GPS DASHBOARD GLOBAL STYLES START */
app-gps-dashboard {
  --gps-bg-app: #f0f2f5;
  --gps-bg-surface: #ffffff;
  --gps-bg-subtle: #f8fafc;
  --gps-border: #e2e6ea;
  --gps-border-strong: #c9d0d8;
  --gps-text-primary: #111827;
  --gps-text-secondary: #6b7280;
  --gps-primary: #1a56db;
  --gps-primary-light: #ebf5ff;
}

app-gps-dashboard .container {
  background: var(--gps-bg-app);
}

app-gps-dashboard .top-item {
  width: 100%;
  margin: 3px;
  background: var(--gps-bg-surface);
  border-radius: 16px !important;
  border: 1px solid var(--gps-border);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09), 0 3px 9px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  min-height: 84px;
  position: relative;
  overflow: hidden;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

app-gps-dashboard .top-item:hover {
  transform: translateY(-2px);
  border-color: var(--gps-border-strong);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12), 0 5px 14px rgba(15, 23, 42, 0.08);
}

app-gps-dashboard .top-item.active-card {
  border: 1px solid var(--gps-primary);
  background: linear-gradient(140deg, #ffffff 62%, rgba(26, 86, 219, 0.08) 100%);
  box-shadow: 0 0 0 2px var(--gps-primary-light), 0 2px 8px rgba(26, 86, 219, 0.12);
}

app-gps-dashboard .top-item.kpi-uploaded::before,
app-gps-dashboard .top-item.kpi-api::before,
app-gps-dashboard .top-item.kpi-calculated::before,
app-gps-dashboard .top-item.kpi-final::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0 0 10px 10px;
}

app-gps-dashboard .top-item.kpi-uploaded::before {
  background: #1a56db;
}

app-gps-dashboard .top-item.kpi-api::before {
  background: #7c3aed;
}

app-gps-dashboard .top-item.kpi-calculated::before {
  background: #047857;
}

app-gps-dashboard .top-item.kpi-final::before {
  background: #b45309;
}

app-gps-dashboard .top-item .card-head {
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

app-gps-dashboard .top-item .card-icon {
  width: 44px;
  height: 44px;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-radius: 10px;
}

app-gps-dashboard .top-item .card-icon.bg-blue {
  background-color: rgba(26, 86, 219, 0.1);
  color: rgba(26, 86, 219, 0.9);
}

app-gps-dashboard .top-item .card-icon.bg-green {
  background-color: rgba(124, 58, 237, 0.1);
  color: rgba(124, 58, 237, 0.95);
}

app-gps-dashboard .top-item .card-icon.bg-yellow {
  background-color: rgba(4, 120, 87, 0.12);
  color: rgba(4, 120, 87, 0.95);
}

app-gps-dashboard .top-item .card-icon.bg-orange {
  background-color: rgba(180, 83, 9, 0.12);
  color: rgba(180, 83, 9, 0.95);
}

app-gps-dashboard .top-item .card-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

app-gps-dashboard .top-item .card-title .title {
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gps-text-secondary);
  margin-bottom: 2px;
}

app-gps-dashboard .top-item .card-title .value {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.15;
  color: var(--gps-text-primary);
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

app-gps-dashboard .top-item .card-title small {
  font-size: 11px;
  color: var(--gps-text-secondary);
  font-weight: 500;
  display: block;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

app-gps-dashboard .top-item:focus-visible {
  outline: 2px solid var(--gps-primary);
  outline-offset: 1px;
}

app-gps-dashboard .graph-card {
  min-width: 340px;
  max-width: 340px;
  flex: 0 0 340px;
  padding: 2px 0 6px;
}

app-gps-dashboard .graph-card .card {
  background: #ffffff;
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
  margin: 0;
}

app-gps-dashboard .graph-card .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12), 0 6px 16px rgba(15, 23, 42, 0.07);
}

app-gps-dashboard .graph-card .card .card-body {
  padding: 0.9rem 0.95rem 1rem;
}

app-gps-dashboard .graph-card .card .card-body h5 {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

app-gps-dashboard .progress {
  margin-top: 10px;
  margin-bottom: 0;
  height: 2px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
}

app-gps-dashboard .progress .progress-bar {
  border-radius: 4px;
}

app-gps-dashboard .progress .progress-bar.bg-blue {
  background-color: rgba(66, 205, 255, 0.7);
}

app-gps-dashboard .progress .progress-bar.bg-success {
  background-color: rgba(34, 204, 98, 0.7) !important;
}

app-gps-dashboard .progress .progress-bar.bg-yellow {
  background-color: rgba(242, 183, 5, 0.7) !important;
}

app-gps-dashboard .progress .progress-bar.bg-orange {
  background-color: rgba(180, 83, 9, 0.75) !important;
}

app-gps-dashboard .filter-wrapper {
  height: auto;
  padding-bottom: 10px;
}

app-gps-dashboard .searchForm {
  display: flex;
  gap: 0 10px;
  flex-wrap: wrap;
}

app-gps-dashboard .fldWrp {
  display: block;
  width: 220px !important;
}

app-fleet-maintenance-dashboard .filter-field app-vehicle-autocomplete .fldWrp,
app-fleet-maintenance-dashboard .table-filter-item app-vehicle-autocomplete .fldWrp,
app-fleet-maintenance-dashboard .table-filter-item app-branch-autocomplete .fldWrp,
app-fleet-maintenance-table-dialog .table-filter-item app-vehicle-autocomplete .fldWrp,
app-fleet-maintenance-table-dialog .table-filter-item app-branch-autocomplete .fldWrp {
  display: block;
  width: 100% !important;
}

app-fleet-maintenance-dashboard .filter-field .fldWrp > label,
app-fleet-maintenance-dashboard .table-filter-item .fldWrp > label,
app-fleet-maintenance-table-dialog .table-filter-item .fldWrp > label {
  display: block;
  width: 100%;
  margin-bottom: 6px;
}
app-fleet-maintenance-dashboard .filter-field app-vehicle-autocomplete .fldWrp > input,
app-fleet-maintenance-dashboard .table-filter-item app-vehicle-autocomplete .fldWrp > input,
app-fleet-maintenance-dashboard .table-filter-item app-branch-autocomplete .fldWrp > input,
app-fleet-maintenance-table-dialog .table-filter-item app-vehicle-autocomplete .fldWrp > input,
app-fleet-maintenance-table-dialog .table-filter-item app-branch-autocomplete .fldWrp > input {
  box-sizing: border-box;
  width: 100% !important;
  height: var(--fleet-filter-control-height, 39px) !important;
  padding: 0 11px;
}
app-gps-dashboard .date-field {
  min-width: 220px;
}

app-gps-dashboard .vehicle-field>label {
  display: block;
  margin-bottom: 4px;
}

app-gps-dashboard label {
  font-size: 12px;
}

app-gps-dashboard .native-date-input {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
  color: #2d3748;
  background: #ffffff;
}

app-gps-dashboard .pointer {
  cursor: pointer;
  font-size: 17px;
}

app-gps-dashboard .action-icons {
  margin-top: 20px;
}

app-gps-dashboard .card-loader {
  width: 20px;
  height: 20px;
  border: 2px solid #7539FF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  margin-top: 5px;
}

app-gps-dashboard .card-scroll-wrapper,
app-gps-dashboard .chart-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto !important;
  will-change: scroll-position;
  contain: layout style;
  user-select: none;
  scrollbar-width: none;
  gap: 14px;
  padding: 10px 4px 16px;
  align-items: stretch;
}

app-gps-dashboard .card-scroll-wrapper {
  padding-bottom: 12px;
  overflow-y: hidden;
}

app-gps-dashboard .chart-scroll-wrapper {
  padding: 12px 10px 24px;
}

app-gps-dashboard .graph-section-container {
  overflow: hidden;
  padding: 2px 0 16px;
}

app-gps-dashboard .graph-scroll-viewport {
  margin: 0;
}

app-gps-dashboard .top-card-item {
  min-width: 300px;
  max-width: 300px;
  flex: 0 0 300px;
}

app-gps-dashboard .chart-canvas-wrap {
  position: relative;
  height: 205px;
  width: 100%;
  max-width: 308px;
  margin: 0 auto;
}

app-gps-dashboard .chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

app-gps-dashboard .card-scroll-wrapper::-webkit-scrollbar,
app-gps-dashboard .chart-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

app-gps-dashboard .chart-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: #5f6574;
  margin-bottom: 6px;
  text-align: center;
}

app-gps-dashboard .graph-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

app-gps-dashboard .graph-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

app-gps-dashboard .vendor-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 360px;
}

app-gps-dashboard .top-vendor-filter-wrap {
  width: 360px;
  max-width: 100%;
}

app-gps-dashboard .vendor-filter-wrap label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--gps-text-secondary);
  letter-spacing: 0.02em;
}

app-gps-dashboard .vendor-filter-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

app-gps-dashboard .vendor-filter-controls app-vendor-autocomplete {
  flex: 1 1 auto;
  min-width: 240px;
}

app-gps-dashboard .vendor-filter-controls app-vendor-autocomplete .fldWrp {
  width: 100% !important;
  margin: 0;
}

app-gps-dashboard .vendor-filter-controls app-vendor-autocomplete .fldWrp>label:empty {
  display: none;
}

app-gps-dashboard .vendor-filter-controls app-vendor-autocomplete .fldWrp>input,
app-gps-dashboard .vendor-filter-controls app-vendor-autocomplete .fldWrp>input[matinput] {
  height: 36px;
}

app-gps-dashboard .vendor-search-input {
  height: 36px;
  width: 100%;
  min-width: 220px;
  border: 1px solid var(--gps-border);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--gps-text-primary);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

app-gps-dashboard .vendor-search-input:focus {
  border-color: var(--gps-primary);
  box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.12);
  outline: none;
}

app-gps-dashboard .vendor-action-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--gps-border);
  border-radius: 10px;
  background: #fff;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 120ms ease;
}

app-gps-dashboard .vendor-action-btn i {
  display: block;
  font-size: 14px;
}

app-gps-dashboard .vendor-action-btn:hover {
  border-color: var(--gps-border-strong);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

app-gps-dashboard .date-time-cell {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
}

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

app-gps-dashboard .table-loader-strip {
  margin-bottom: 8px;
  border: 1px solid var(--gps-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

app-gps-dashboard .one-to-one-badge {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1a56db;
  background: rgba(26, 86, 219, 0.12);
}

app-gps-dashboard .white mat-card {
  border: 1px solid var(--gps-border);
  border-radius: 8px !important;
  background: var(--gps-bg-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

app-gps-dashboard .white .mat-mdc-table {
  width: 100%;
}

app-gps-dashboard .white .mat-mdc-header-row {
  height: 44px;
  background: var(--gps-bg-subtle);
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 1px 0 var(--gps-border);
}

app-gps-dashboard .white .mat-mdc-row {
  height: 40px;
  transition: background-color 80ms ease;
}

app-gps-dashboard .white .mat-mdc-row:nth-child(even) {
  background: #fafbfc;
}

app-gps-dashboard .white .mat-mdc-row:hover {
  background: var(--gps-bg-subtle);
}

app-gps-dashboard .white .mat-mdc-header-cell {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gps-text-secondary);
  border-bottom: 2px solid var(--gps-border);
  padding: 0 12px;
  white-space: nowrap;
  background: var(--gps-bg-subtle);
}

app-gps-dashboard .white .mat-mdc-cell {
  font-size: 12px;
  color: var(--gps-text-primary);
  border-bottom: 1px solid var(--gps-border);
  padding: 0 12px;
}

app-gps-dashboard .white .tblContainer {
  margin-top: 0 !important;
  min-height: 0 !important;
  max-height: 62vh;
  overflow: auto !important;
  padding: 0 !important;
  position: relative;
}

app-gps-dashboard .white .mat-mdc-table {
  margin-top: 0 !important;
}

app-gps-dashboard .white .mat-mdc-paginator {
  border-top: 1px solid var(--gps-border);
  background: var(--gps-bg-subtle);
}

app-gps-dashboard .white .mat-sort-header-arrow {
  color: var(--gps-primary);
}

app-gps-dashboard :focus-visible {
  outline: 2px solid var(--gps-primary);
  outline-offset: 1px;
  border-radius: 4px;
}

app-gps-dashboard h4 {
  color: rgba(33, 37, 41, 0.7);
  font-weight: 600;
  font-size: 18px;
}

app-gps-dashboard h5 {
  color: rgba(33, 37, 41, 0.7);
  font-weight: 600;
  font-size: 15px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  app-gps-dashboard .top-item,
  app-gps-dashboard .graph-card .card,
  app-gps-dashboard .progress .progress-bar {
    transition: none !important;
  }

  app-gps-dashboard .card-scroll-wrapper,
  app-gps-dashboard .chart-scroll-wrapper {
    scroll-behavior: auto;
  }
}

@media (max-width: 992px) {

  app-gps-dashboard .fldWrp,
  app-gps-dashboard .date-field {
    width: 100% !important;
  }

  app-gps-dashboard .action-icons {
    margin-top: 0;
  }

  app-gps-dashboard .graph-header-left {
    width: 100%;
  }

  app-gps-dashboard .vendor-filter-wrap {
    min-width: 100%;
  }

  app-gps-dashboard .vendor-filter-controls app-vendor-autocomplete {
    min-width: 0;
  }

  app-gps-dashboard .vendor-search-input {
    min-width: 0;
  }
}

app-gps-dashboard .progress-bar-fixed {
  width: 75%;
}

/* GPS DASHBOARD GLOBAL STYLES END */

/* GPS DRILL DOWN POPUP GLOBAL STYLES START */
app-gps-drill-down {
  --gps-border: #e2e6ea;
  --gps-bg-subtle: #f8fafc;
  --gps-text-primary: #111827;
  --gps-text-secondary: #6b7280;
  --gps-primary: #1a56db;
}

app-gps-drill-down .drill-down-container {
  background: #fff;
  border-radius: 10px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gps-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

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

app-gps-drill-down .modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gps-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gps-bg-subtle);
  cursor: move;
  user-select: none;
}

app-gps-drill-down .modal-header .header-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

app-gps-drill-down .modal-header h5 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--gps-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

app-gps-drill-down .modal-header .header-meta {
  font-size: 11px;
  color: var(--gps-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

app-gps-drill-down .modal-header .close-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #666;
  cursor: pointer;
  padding: 0;
}

app-gps-drill-down .modal-header .close-btn:hover {
  color: #000;
}

app-gps-drill-down .modal-body {
  padding: 15px;
  overflow: hidden;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

app-gps-drill-down .popup-filter-form {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--gps-border);
  border-radius: 8px;
  background: #fff;
}

app-gps-drill-down .table-loader-strip {
  margin-bottom: 10px;
  border: 1px solid var(--gps-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

app-gps-drill-down .table-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

app-gps-drill-down .popup-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}

app-gps-drill-down .popup-filter-item {
  display: flex;
  flex-direction: column;
}

app-gps-drill-down .popup-filter-item label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gps-text-secondary);
  margin-bottom: 4px;
}

app-gps-drill-down .popup-filter-item input {
  height: 36px;
  border: 1px solid #c9d0d8;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--gps-text-primary);
  background: #fff;
}

app-gps-drill-down .popup-filter-item app-vehicle-autocomplete,
app-gps-drill-down .popup-filter-item app-vendor-autocomplete {
  display: block;
  width: 100%;
}

app-gps-drill-down .popup-filter-item app-vehicle-autocomplete .fldWrp,
app-gps-drill-down .popup-filter-item app-vendor-autocomplete .fldWrp {
  width: 100% !important;
  margin: 0;
}

app-gps-drill-down .popup-filter-item app-vehicle-autocomplete .fldWrp>label:empty,
app-gps-drill-down .popup-filter-item app-vendor-autocomplete .fldWrp>label:empty {
  display: none;
}

app-gps-drill-down .popup-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px;
  gap: 10px;
}

app-gps-drill-down .download-btn {
  height: 36px;
  border: 1px solid rgba(26, 86, 219, 0.35);
  border-radius: 6px;
  background: rgba(26, 86, 219, 0.08);
  color: #1a56db;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

app-gps-drill-down .download-btn:hover {
  background: rgba(26, 86, 219, 0.14);
}

app-gps-drill-down .pointer {
  cursor: pointer;
  font-size: 18px;
  color: #5f6574;
}

app-gps-drill-down .date-time-cell {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
}

app-gps-drill-down .one-to-one-badge {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1a56db;
  background: rgba(26, 86, 219, 0.12);
}

app-gps-drill-down .modal-body .mat-mdc-header-row {
  height: 36px;
  background: var(--gps-bg-subtle);
  position: sticky;
  top: 0;
  z-index: 2;
}

app-gps-drill-down .modal-body .mat-mdc-row {
  height: 40px;
}

app-gps-drill-down .modal-body .mat-mdc-row:nth-child(even) {
  background: #fafbfc;
}

app-gps-drill-down .modal-body .mat-mdc-row:hover {
  background: var(--gps-bg-subtle);
}

app-gps-drill-down .modal-body .mat-mdc-header-cell {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gps-text-secondary);
  border-bottom: 2px solid var(--gps-border);
  padding: 0 12px;
  white-space: nowrap;
}

app-gps-drill-down .modal-body .mat-mdc-cell {
  font-size: 12px;
  color: var(--gps-text-primary);
  border-bottom: 1px solid var(--gps-border);
  padding: 0 12px;
}

app-gps-drill-down .modal-body .mat-sort-header-arrow {
  color: var(--gps-primary);
}

app-gps-drill-down :focus-visible {
  outline: 2px solid var(--gps-primary);
  outline-offset: 1px;
  border-radius: 4px;
}

app-gps-drill-down .modal-footer {
  border-top: 1px solid var(--gps-border);
  background: var(--gps-bg-subtle);
}

/* GPS DRILL DOWN POPUP GLOBAL STYLES END */

.custom-autocomplete-option {
  font-size: 11px !important;
  line-height: 32px !important;
  height: 32px !important;
}