/* Set up some greys to use throughout the interface */

:root {
    --color-neutral-0: oklch(1 0 0);
    --color-neutral-50: oklch(0.985 0 0);
    --color-neutral-100: oklch(0.97 0 0);
    --color-neutral-200: oklch(0.922 0 0);
    --color-neutral-300: oklch(0.87 0 0);
    --color-neutral-400: oklch(0.708 0 0);
    --color-neutral-500: oklch(0.556 0 0);
    --color-neutral-600: oklch(0.439 0 0);
    --color-neutral-700: oklch(0.371 0 0);
    --color-neutral-800: oklch(0.269 0 0);
    --color-neutral-900: oklch(0.205 0 0);
    --color-neutral-950: oklch(0.145 0 0);
    --color-neutral-1000: oklch(0 0 0);

    --color-blue-0: #ffffff;
    --color-blue-50: #f1f8fa;
    --color-blue-100: #dbecf2;
    --color-blue-200: #bcd9e5;
    --color-blue-300: #8dbed3;
    --color-blue-400: #589ab8;
    --color-blue-500: #4289ad;
    --color-blue-600: #356785;
    --color-blue-700: #30556e;
    --color-blue-800: #2e485c;
    --color-blue-900: #2a3e4f;
    --color-blue-950: #182734;
    --color-blue-1000: #000000;

    --color-orange-50: #fff8eb;
    --color-orange-100: #ffecc6;
    --color-orange-200: #ffd788;
    --color-orange-300: #febc4b;
    --color-orange-400: #fea92f;
    --color-orange-500: #f87f08;
    --color-orange-600: #dc5a03;
    --color-orange-700: #b63c07;
    --color-orange-800: #942e0c;
    --color-orange-900: #79270e;
    --color-orange-950: #461102;

    --color-red-0: #fef3f2;
    --color-red-50: #fef3f2;
    --color-red-100: #ffe4e1;
    --color-red-200: #ffcdc8;
    --color-red-300: #ffa097;
    --color-red-400: #fd796c;
    --color-red-500: #f54e3e;
    --color-red-600: #e23120;
    --color-red-700: #be2517;
    --color-red-800: #9d2317;
    --color-red-900: #82231a;
    --color-red-950: #470d08;
    --color-red-1000: #000000;

    --theme-text-color: var(--color-neutral-800);
    --theme-text-color-muted: var(--color-neutral-600);
}
/* Utility class */
.text-wrap-auto {
    text-wrap: auto;
}
.text-color-normal {
    color: var(--theme-text-color);
}

.text-color-muted {
    color: var(--theme-text-color-muted);
}

.font-normal {
    font-weight: 700;
}
.font-emphasised {
    font-weight: 500;
}

.font-size-smaller {
    font-size:0.875em;
}

 

.font-size-h3, .font-size-l{
    font-size:18px;
}


.font-size-h2, .font-size-xl {
    font-size:21px;
}

.font-variant-cond {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    
}

#mainContainer {
    background-color: var(--color-neutral-200) !important;
}

/* START:This stuff is super specific but makes the topbar styled, as long as its a DIRECT decendant of the mainContainer */

#mainContainer > .dx-toolbar {
    background: var(--color-neutral-800);
    color: var(--color-neutral-100);
    margin-left:0px !important;
    padding-left:16px !important;
}

#radarToolBar .dx-toolbar-items-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px;
    height:auto;
}

#mainContainer > .dx-toolbar .dx-buttongroup-wrapper {
    background: var(--color-neutral-900);
    border-radius: 18px;
    padding: 2px;
    gap:4px;
}
#mainContainer > .dx-toolbar .dx-button.dx-button-default,
#mainContainer > .dx-toolbar .dx-button.dx-button-normal
{
    background: var(--color-neutral-900);
    color: var(--color-neutral-100);
    /* border-width: 0px; */
    border-radius: 16px;
    border: 1px solid transparent;
    padding-left: 4px;
    padding-right: 4px;
}

#mainContainer > .dx-toolbar .dx-button.dx-buttongroup-item {
    padding-left:0px;
    padding-right:0px;
}
#mainContainer > .dx-toolbar .dx-button.dx-button-normal.dx-state-hover,
#mainContainer > .dx-toolbar .dx-button.dx-button-default.dx-state-hover
{
    background: var(--color-neutral-600);
}

#mainContainer > .dx-toolbar .dx-button-has-icon .dx-icon {
    width: 16px;
    height: 16px;
    font-size:16px;
    color: var(--color-neutral-200) !important;
}

#radarViewBtns > .dx-button-mode-contained.dx-buttongroup-first-item.dx-button, .dx-button-mode-outlined.dx-buttongroup-first-item.dx-button {
    border-start-start-radius: 20px;
    border-end-start-radius: 20px;
}

#mainContradarViewBtnsainer > .dx-button-mode-contained.dx-buttongroup-last-item.dx-button, .dx-button-mode-outlined.dx-buttongroup-last-item.dx-button {
    border-start-end-radius: 20px;
    border-end-end-radius: 20px;
}

#radarViewBtns > .dx-button-mode-outlined.dx-state-focused {
    background-color: #b9aeae !important;
}
.dx-button-mode-outlined.dx-state-selected {
    background-color: var(--color-neutral-700) !important;
    border: 1px solid var(--color-neutral-600) !important;
}

#radarToolBar .dx-toolbar-center {
    background-color: var(--color-neutral-900);
    padding:2px 2px;
    border-radius: 18px;
    height:auto;

}

#radarToolBar .dx-toolbar-before {
    top:initial;
}

#radarToolBar .dx-toolbar-after {
    top:initial;
}
/* END: This stuff is super specific but makes the topbar styled, as long as its a DIRECT decendant of the mainContainer */

/* NEW CLASS BASED APPROACH FOR SIDE CARDS Instead, lets add some classes and start to target things properly */

/* This is dependant on the class 'toplogo' being applied to where the logo is displayed in index.js */
.topLogo {
    padding-left: 16px !important;
}

/* ID already in code */
#radarMapList {
    background: var(--color-neutral-200);
    padding-left:4px;
    padding-right:4px;
    /* padding-top:8px; */
}

#radarMapList .dx-datagrid-table tbody tr:first-child {
    display:block;
    /* margin-top:8px; */
}
#radarMapList .dx-datagrid > .dx-datagrid-rowsview {
    background-color: transparent !important;
}
 
.dx-freespace-row .radarCard {
    display:none;
}
.radarCard {
    display:block;
    background: var(--color-neutral-50) !important;
    font-size:0.875rem !important; /* 14px; */ 
    border-bottom: 0px solid transparent !important; /* ALI RESET BORDER AGAIN*/
    border-bottom-color: transparent !important;
    border-width:0px;
    color: var(--theme-text-color);
    margin-bottom: 8px;
    margin-right:4px;
    margin-left:4px;
    border-radius: 6px; 
    padding: 0px !important;
}

.radarCard:hover {
    box-shadow: 0px 0px 4px 0px var(--color-neutral-300);
}

.dx-selection .radarCard {
    background-color: var(--color-neutral-0) !important;
    box-shadow: 
    -1px 1px 4px 0px var(--color-neutral-500),
    inset 0px 0px 0px 2px var(--color-neutral-50),
    inset 0px 0px 0px 3px var(--color-neutral-100)
    ;
}

 
/* .radarCardInner {
  display: flex;
  align-items: stretch;
} */

.radarCardContents {
    flex:1;
    color: var(--color-neutral-800);
    /* padding:8px; */
}

.radarCardAccountName {
    background:var(--color-neutral-100);
    color: var(--color-neutral-800);
    padding:2px 6px;
    font-size:12px;
    font-weight:400;
    
}

.infoCardContents .radarCardAccountName {
    /* Extra border for InfoWindow */
    border-bottom: 1px solid var(--color-neutral-200);
}

.radarCardSmallContents {
    flex:1;
    display: flex;
    gap:6px;
    padding:6px;
}
.radarCardImageThumbWrapper {
    position: relative;
    /* background: var(--color-neutral-200); */
    border-radius: 4px;
    /* overflow: hidden; */
}

.radarCardImageThumb {
    width:80px;
    height:60px;
    aspect-ratio: 4/3; 
    background-color: var(--color-neutral-200);
}
/* CLASS NEEDS ADDING TO JS: This is for the colored strip that the radar card may have applied */
.radarCardIndicator {
    width: 6px;
    margin-right: 0px;
    border-radius: 0px;
    height: auto; /* Allows height to be determined by content */
    flex-shrink: 0; /* Prevents it from shrinking smaller than content height */
}

.radarCardSection {
    border-top:1px solid var(--color-neutral-200);
    margin-top:5px; 
    padding-top:5px; 
    border-bottom:1px solid var(--color-neutral-200);
    margin-bottom:5px; 
    padding-bottom:3px;
}

.radarCardTitle {
    width:100%;
    display:flex;
    justify-content: space-between;
}

.radarCardDetails {
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.radarCardSmallDetailsTop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.radarCardAction {
    cursor:pointer;
    background-color: var(--color-neutral-100);
    color:var(--color-neutral-700);
    border-radius:12px;
    margin:2px;
    /* padding:4px 4px; */
    width:24px;
    height:24px;
    display:flex;
    align-items: center;
    justify-content: center;
    position:relative;
}
.radarCardAction:hover {
    background: var(--color-neutral-300);
}
.alertIconWrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width:28px;
    height:28px;
    background:var(--color-neutral-0);
    border-width: 2px;
    border-style: solid;
    border-radius: 14px;
}
/* CLASS NEEDS ADDING TO JS: */
.tagPillSection {
    display:flex;
    padding-top: 3px;
    flex-wrap: wrap;
    gap:2px;
}

.tagPill {
    display:flex;
    align-items: center;
    gap: 2px;
    background-color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-100);
    color: var(--color-neutral-700);
    height: initial;
    font-size:inherit;
    font-weight:400;
    line-height:16px;
    border-radius: 16px;
    margin: 0px 0px 0px 0px;
    padding: 4px 4px;
    padding-right: 8px;

}

/* CLASS NEEDS ADDING TO JS: */
.tagPillColor {
    /* main-width:8px; */
    min-height:8px;
    aspect-ratio: 1/1;
    width:16px;
    height:16px;
    border-radius:8px;
}

.geozonePill {
    display:flex;
    align-items: center;
    gap: 4px;
    background-color: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    color: var(--color-neutral-600);
    height: initial;
    font-size:inherit;
    font-weight:400;
    line-height:16px;
    border-radius: 4px;
    margin: 0px 0px 0px 0px;
    padding: 4px 4px;
    padding-right: 8px;
}

.geozonePillColor {
    /* main-width:8px; */
    min-height:8px;
    aspect-ratio: 1/1;
    width:16px;
    height:16px;
    border-radius:4px;
}

.statusPill {
    display:inline-flex;
    font-size:13px;
    font-weight:400;
    padding:4px 8px;
    border-radius: 14px;
    line-height:16px;
    background: var(--color-neutral-0);
    color:  var(--color-neutral-700);
    border: 1px solid var(--color-neutral-200);
}

.statusPillRed {
    background: var(--color-red-100);
    color: var(--color-red-700);
    border-color: var(--color-red-200);
}

.statusPillStolen {
    background: var(--stolen-background);
    color: var(--stolen-color);
    border-color: var(--stolen-bordercolor);
}

.statusPillOffLot {
    background: var(--offLot-background);
    color: var(--offLot-color);
    border-color: var(--offLot-bordercolor);
}

.statusPillSold {
    background: var( --sold-background); 
    color: var( --sold-color);
    border-color: var(--sold-bordercolor);
}

.statusBanner {
    position:absolute;
    bottom:2px;
    left:2px;
    right:2px;
    display: flex;
    padding:1px;
    border-radius: 2px;
    font-size:11px;
    line-height:16px;
    font-weight:500;
    justify-content: center;
    text-align: center;
    cursor:pointer;
    opacity:0.9;
}

.infoWindowBanner {
    margin:6px 6px;
    border-radius: 4px;
}

.lowbatteryBanner {
    background:var(--color-orange-500); 
    color:white !important; 
}

.disconBanner {
    background:var(--discon); 
    color:white !important; 
}

.offlotBanner {
    background:var(--color-blue-500); 
    color:var(--color-blue-100) !important; 
}

.stolenBanner {
    background:var(--color-red-700); 
    color:white !important; 
}
 
.riskBanner {
    background:#7329B0B5; 
    color:white !important; 
}


.tagGeozoneSection {
    display:flex;
    flex-wrap:wrap;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.tagGeozone {
    display: flex;    
    padding: 4px 4px;
    background: #f5f5f5;
    border-radius:2px;
    border: 1px solid rgba(0,0,0,0.05);
    margin-top: 3px;
    place-content: center;
}

.tagGeozoneColor {
    width:15px;
    height:15px;
    border-radius:3px; 
}
.tagGeozoneLabel {
    /* position: relative; */
    font-size:0.875rem;
    color: #1520c6;
    font-weight: 600;
}

.radarCardActionSection {
    display:flex;
    justify-content:space-between;
    padding-top:8px;
}



/* Cluster markers */
.cluster-marker-wrapper {
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 
    0px 1px 1px rgba(0, 0, 0, 0.1),
    0px 4px 6px rgba(0, 0, 0, 0.4); /* Main drop shadow */
    transition: all 0.2s ease-in-out; /* Smooth transition */
    backdrop-filter: blur(1px);
  }

  .cluster-marker {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-neutral-800);
    color:white;
    min-width:24px;
    min-height:24px;
    padding:4px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    opacity: 0.85;
    font-size:13px;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 500;
  }

/* Fleet markers */

.fleet-marker-label-loc {
    /* background-color: #09485a; */
    /* border: 1px solid #f8f2f2; */
    padding: 6px 8px;
    border-radius: 20px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size:0.875rem;
    font-weight: 500;
    text-transform: initial;
    /* color: white; */
    background-color: var(--color-neutral-600);
    color: var(--color-neutral-100);
    border: 2px solid var(--color-neutral-100);
    box-shadow: 
    inset 0px 1px 2px rgba(0, 0, 0, 0.3),
    0px 1px 1px rgba(0, 0, 0, 0.1),  /* Subtle 1px shadow for a border effect */
    0px 4px 6px rgba(0, 0, 0, 0.4);   /* Main drop shadow */
    position: relative;
    display: inline-block;

    /* Set up for animation */
    opacity: 1;
    transition: all 0.2s ease-in-out; /* Smooth transition */
  }
  
  .fleet-marker-label-loc:hover {
    opacity: 1;
    /* transform: scale(1.1);*/
    background-color: var(--color-neutral-700);
    color: var(--color-neutral-0);
    border: 2px solid var(--color-neutral-0);
    box-shadow: 
    inset 0px 1px 2px rgba(0, 0, 0, 0.3),
    0px 1px 2px rgba(0, 0, 0, 0.05),  /* Subtle 1px shadow for a border effect */
    0px 12px 12px rgba(0, 0, 0, 0.2);   /* Main drop shadow */
  }

  .fleet-marker-label-flag {
    border-radius:50%; 
    border:2px solid white; 
    width:20px;
    height:20px;
  }

  .fleet-marker-label-arrow {
    background: var(--color-neutral-700);
    width:20px;
    height:20px;
    border-radius: 50%;
  }
  .fleet-marker-label-event {
    background-color: #c10e0e;
    /* background-color: aqua; */
    /* border: 1px solid #f8f2f2; */
    padding: 3px;
    border-radius: 5px;
    font-family: "IBM Plex Sans", sans-serif;
    color: white;
   
    position: relative;
    display: inline-block;
  }
  
  
  .fleet-marker-label-loc::before {
    content: "";
    position: absolute;
    /* z-index:10001; */
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px; 
    border-style: solid;
    border-color: var(--color-neutral-50) transparent transparent transparent; 
    z-index: 1;  
  }
  
  .fleet-marker-label-loc::after {
    content: "";
    display:block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom:-20px;
    z-index:10002;
    width: 12px;
    height: 12px;
    border-radius: 50%; /* More consistent for a perfect circle */
    background: var(--color-neutral-600);
    border: 2px solid var(--color-neutral-100);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Optional: Adds a subtle shadow */
  }
  
  .fleet-marker-label-event::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 5px 0 5px; 
    border-style: solid;
    /* border-color: #09485a transparent transparent transparent;  */
    border-color: #c10e0e transparent transparent transparent;     
    z-index: 1;  
  }
  
  .fleet-marker-min-wrapper {
    border: 1px solid var(--color-neutral-0);
    border-radius: 50%; 
    box-shadow: 
    0px 1px 1px rgba(0, 0, 0, 0.1),
    0px 4px 6px rgba(0, 0, 0, 0.4); /* Main drop shadow */
    transition: all 0.2s ease-in-out; /* Smooth transition */
  }

  .fleet-marker-min-wrapper:hover {
    box-shadow: 
    0px 1px 2px rgba(0, 0, 0, 0.05),
    0px 8px 12px rgba(0, 0, 0, 0.4); /* Main drop shadow grows */
  }

  .fleet-marker-min-wrapper::before {
    content: "";
    position: absolute;
    /* z-index:10001; */
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px; 
    border-style: solid;
    border-color: var(--color-neutral-0) transparent transparent transparent;
    border-radius: 2px;
    z-index: 1;  
  }

  .fleet-marker-min{ 
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .fleet-marker-min {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_233_2410)'%3E%3Cpath d='M2.5 4.5L3.25 2.25H8.75L9.5 4.5M8.75 7C8.55109 7 8.36032 6.92098 8.21967 6.78033C8.07902 6.63968 8 6.44891 8 6.25C8 6.05109 8.07902 5.86032 8.21967 5.71967C8.36032 5.57902 8.55109 5.5 8.75 5.5C8.94891 5.5 9.13968 5.57902 9.28033 5.71967C9.42098 5.86032 9.5 6.05109 9.5 6.25C9.5 6.44891 9.42098 6.63968 9.28033 6.78033C9.13968 6.92098 8.94891 7 8.75 7ZM3.25 7C3.05109 7 2.86032 6.92098 2.71967 6.78033C2.57902 6.63968 2.5 6.44891 2.5 6.25C2.5 6.05109 2.57902 5.86032 2.71967 5.71967C2.86032 5.57902 3.05109 5.5 3.25 5.5C3.44891 5.5 3.63968 5.57902 3.78033 5.71967C3.92098 5.86032 4 6.05109 4 6.25C4 6.44891 3.92098 6.63968 3.78033 6.78033C3.63968 6.92098 3.44891 7 3.25 7ZM9.46 2C9.36 1.71 9.08 1.5 8.75 1.5H3.25C2.92 1.5 2.64 1.71 2.54 2L1.5 5V9C1.5 9.13261 1.55268 9.25979 1.64645 9.35355C1.74021 9.44732 1.86739 9.5 2 9.5H2.5C2.63261 9.5 2.75979 9.44732 2.85355 9.35355C2.94732 9.25979 3 9.13261 3 9V8.5H9V9C9 9.13261 9.05268 9.25979 9.14645 9.35355C9.24021 9.44732 9.36739 9.5 9.5 9.5H10C10.1326 9.5 10.2598 9.44732 10.3536 9.35355C10.4473 9.25979 10.5 9.13261 10.5 9V5L9.46 2Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_233_2410'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }
  
  .fleet-marker-min-icon-lowBatt {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_235_5636)'%3E%3Cpath d='M2 1.5V3H0.5V10H11.5V3H10V1.5H7V3H5V1.5H2ZM1.5 4H10.5V9H1.5V4ZM7.5 5V6H6.5V7H7.5V8H8.5V7H9.5V6H8.5V5H7.5ZM2.5 6V7H5.5V6H2.5Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_235_5636'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }

  .fleet-marker-min-icon-offLot {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_235_5618)'%3E%3Cpath d='M3 4.5L3.5 2.5H8.5L9 4.5M9.46 2C9.355 1.7 9.07 1.5 8.75 1.5H3.25C2.93 1.5 2.645 1.7 2.54 2L1.5 5V9C1.5 9.13261 1.55268 9.25979 1.64645 9.35355C1.74021 9.44732 1.86739 9.5 2 9.5H2.5C2.63261 9.5 2.75979 9.44732 2.85355 9.35355C2.94732 9.25979 3 9.13261 3 9V8H9V9C9 9.13261 9.05268 9.25979 9.14645 9.35355C9.24021 9.44732 9.36739 9.5 9.5 9.5H10C10.1326 9.5 10.2598 9.44732 10.3536 9.35355C10.4473 9.25979 10.5 9.13261 10.5 9V5L9.46 2ZM3.5 7H2.5V6H3.5V7ZM9.5 7H8.5V6H9.5V7ZM7 7H5V6H7V7Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_235_5618'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }
  
  .fleet-marker-min-icon-disconn {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_235_5675)'%3E%3Cg clip-path='url(%23clip1_235_5675)'%3E%3Cpath d='M10.2502 9.92488L3.20518 2.87988L1.20518 0.879883L0.555176 1.49988L2.28518 3.22988L1.50018 5.49988V9.49988C1.50018 9.63249 1.55285 9.75967 1.64662 9.85344C1.74039 9.9472 1.86757 9.99988 2.00018 9.99988H2.50018C2.63278 9.99988 2.75996 9.9472 2.85373 9.85344C2.9475 9.75967 3.00018 9.63249 3.00018 9.49988V8.99988H8.05518L10.4202 11.3649L11.0552 10.7299L10.2502 9.92488ZM3.25018 7.49988C3.05126 7.49988 2.8605 7.42087 2.71985 7.28021C2.57919 7.13956 2.50018 6.9488 2.50018 6.74988C2.50018 6.55097 2.57919 6.3602 2.71985 6.21955C2.8605 6.0789 3.05126 5.99988 3.25018 5.99988C3.44909 5.99988 3.63985 6.0789 3.78051 6.21955C3.92116 6.3602 4.00018 6.55097 4.00018 6.74988C4.00018 6.9488 3.92116 7.13956 3.78051 7.28021C3.63985 7.42087 3.44909 7.49988 3.25018 7.49988ZM2.50018 4.99988L2.89018 3.83488L4.05518 4.99988H2.50018ZM8.75018 2.74988L9.50018 4.99988H6.60018L8.06018 6.45988C8.25018 6.08488 8.68518 5.92988 9.06018 6.10488C9.43518 6.28488 9.59018 6.73488 9.41518 7.10488C9.34018 7.24988 9.21518 7.38488 9.06018 7.45988L10.5002 8.89988V5.49988L9.46018 2.49988C9.35518 2.19988 9.07018 1.99988 8.75018 1.99988H3.60018L4.35018 2.74988H8.75018Z' fill='white'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_235_5675'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3CclipPath id='clip1_235_5675'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }

  .fleet-marker-min-icon-stolen {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0.5C5.73478 0.5 5.48043 0.605357 5.29289 0.792893C5.10536 0.98043 5 1.23478 5 1.5V2H3.25C2.92 2 2.64 2.21 2.54 2.5L1.5 5.5V9.5C1.5 9.63261 1.55268 9.75979 1.64645 9.85355C1.74021 9.94732 1.86739 10 2 10H2.5C2.63261 10 2.75979 9.94732 2.85355 9.85355C2.94732 9.75979 3 9.63261 3 9.5V9H9V9.5C9 9.63261 9.05268 9.75979 9.14645 9.85355C9.24021 9.94732 9.36739 10 9.5 10H10C10.1326 10 10.2598 9.94732 10.3536 9.85355C10.4473 9.75979 10.5 9.63261 10.5 9.5V5.5L9.46 2.5C9.36 2.21 9.08 2 8.75 2H7V1.5C7 1.23478 6.89464 0.98043 6.70711 0.792893C6.51957 0.605357 6.26522 0.5 6 0.5ZM3.25 2.75H8.75L9.5 5H2.5L3.25 2.75ZM3.25 6C3.44891 6 3.63968 6.07902 3.78033 6.21967C3.92098 6.36032 4 6.55109 4 6.75C4 6.94891 3.92098 7.13968 3.78033 7.28033C3.63968 7.42098 3.44891 7.5 3.25 7.5C3.05109 7.5 2.86032 7.42098 2.71967 7.28033C2.57902 7.13968 2.5 6.94891 2.5 6.75C2.5 6.55109 2.57902 6.36032 2.71967 6.21967C2.86032 6.07902 3.05109 6 3.25 6ZM8.75 6C8.94891 6 9.13968 6.07902 9.28033 6.21967C9.42098 6.36032 9.5 6.55109 9.5 6.75C9.5 6.94891 9.42098 7.13968 9.28033 7.28033C9.13968 7.42098 8.94891 7.5 8.75 7.5C8.55109 7.5 8.36032 7.42098 8.21967 7.28033C8.07902 7.13968 8 6.94891 8 6.75C8 6.55109 8.07902 6.36032 8.21967 6.21967C8.36032 6.07902 8.55109 6 8.75 6Z' fill='white'/%3E%3C/svg%3E");
  }
  
  .fleet-marker-min-icon-risk {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_235_5675)'%3E%3Cg clip-path='url(%23clip1_235_5675)'%3E%3Cpath d='M10.2502 9.92488L3.20518 2.87988L1.20518 0.879883L0.555176 1.49988L2.28518 3.22988L1.50018 5.49988V9.49988C1.50018 9.63249 1.55285 9.75967 1.64662 9.85344C1.74039 9.9472 1.86757 9.99988 2.00018 9.99988H2.50018C2.63278 9.99988 2.75996 9.9472 2.85373 9.85344C2.9475 9.75967 3.00018 9.63249 3.00018 9.49988V8.99988H8.05518L10.4202 11.3649L11.0552 10.7299L10.2502 9.92488ZM3.25018 7.49988C3.05126 7.49988 2.8605 7.42087 2.71985 7.28021C2.57919 7.13956 2.50018 6.9488 2.50018 6.74988C2.50018 6.55097 2.57919 6.3602 2.71985 6.21955C2.8605 6.0789 3.05126 5.99988 3.25018 5.99988C3.44909 5.99988 3.63985 6.0789 3.78051 6.21955C3.92116 6.3602 4.00018 6.55097 4.00018 6.74988C4.00018 6.9488 3.92116 7.13956 3.78051 7.28021C3.63985 7.42087 3.44909 7.49988 3.25018 7.49988ZM2.50018 4.99988L2.89018 3.83488L4.05518 4.99988H2.50018ZM8.75018 2.74988L9.50018 4.99988H6.60018L8.06018 6.45988C8.25018 6.08488 8.68518 5.92988 9.06018 6.10488C9.43518 6.28488 9.59018 6.73488 9.41518 7.10488C9.34018 7.24988 9.21518 7.38488 9.06018 7.45988L10.5002 8.89988V5.49988L9.46018 2.49988C9.35518 2.19988 9.07018 1.99988 8.75018 1.99988H3.60018L4.35018 2.74988H8.75018Z' fill='white'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_235_5675'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3CclipPath id='clip1_235_5675'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }

.fleet-marker-min-icon-sold {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_235_5618)'%3E%3Cpath d='M3 4.5L3.5 2.5H8.5L9 4.5M9.46 2C9.355 1.7 9.07 1.5 8.75 1.5H3.25C2.93 1.5 2.645 1.7 2.54 2L1.5 5V9C1.5 9.13261 1.55268 9.25979 1.64645 9.35355C1.74021 9.44732 1.86739 9.5 2 9.5H2.5C2.63261 9.5 2.75979 9.44732 2.85355 9.35355C2.94732 9.25979 3 9.13261 3 9V8H9V9C9 9.13261 9.05268 9.25979 9.14645 9.35355C9.24021 9.44732 9.36739 9.5 9.5 9.5H10C10.1326 9.5 10.2598 9.44732 10.3536 9.35355C10.4473 9.25979 10.5 9.13261 10.5 9V5L9.46 2ZM3.5 7H2.5V6H3.5V7ZM9.5 7H8.5V6H9.5V7ZM7 7H5V6H7V7Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_235_5618'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }
  
.clearFilters{
    background: #277b7e !important;
    border-width: 0px;
}

/* ALI DRIVER - TRY TO FIX THE TILES */

.dx-tileview-wrapper {
    width:100%;
    height:auto !important;
    display: grid;
    align-items: start; /* Prevents stretching of items in the rows */
    gap: 8px;
    padding:8px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Ensures that items fill available space */
    justify-items: stretch; /* Optional: Makes items fill the column's width */
}

.dx-tileview-wrapper::before {
    display:none; /* Remove radmon table view force which fills a slot in the grid */
}

.dx-tile {
    position:relative !important; /* reset to relative so it works in the grid */
    top: initial !important; /* reset top */
    left: initial !important; /* reset left */
    width: 100% !important; /* fill grid */
}

#flagsCard .dx-tile{
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#topToolbar .dx-button.dx-state-hover,
#topToolbar .dx-button.dx-state-hover .dx-icon {
  color: #191919 !important;
}

.inventoryToolBarBtn
{
    background: var(--color-neutral-900);
    color: var(--color-neutral-100);
    /* border-width: 0px; */
    border-radius: 16px;
    border: 1px solid transparent;
    padding-left: 4px;
    padding-right: 4px;
}

.inventoryToolBarBtn:hover {
  background-color: #525252; /* background on hover */
  color: var(--color-neutral-100);
}

.assetViewerTitleBadge {
    display: flex;
    gap:4px;
    justify-content: center;
    align-items: center;
    padding:2px;
    padding-right:6px;
    font-size:12px;
    line-height:12px;
    font-weight:500;
    background-color: var(--color-neutral-100);
    border:1px solid var(--color-neutral-200);
    color:var(--color-neutral-800);
    margin-right:8px;
    border-radius: 12px;
}
.assetViewerTitleIcon{
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;   
    /*box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.4);*/
    transition: all 0.2s ease-in-out;
    background-position: center center; 

}

#radarFilterBox{
    border: none;
}

#radarFilterBoxTag {
    color: #191919 !important;
    font-weight: 500;
    font-size: 13px;
    margin-right: -10px;
} 

 
 .sold-banner {
    position: absolute;
    bottom: 23px;
    left: -1px;
    width: 80px;
    padding: 0px 0;
    background: #ff000057;
    color: white;
    text-align: center;
    font-weight: 400;
    transform: rotate(-30deg);
    pointer-events: none;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}  

#filterForm .dx-layout-manager .dx-field-item:not(.dx-first-row) {
    padding-top: 0px;
}

#filterForm .dx-layout-manager .dx-field-item {
    padding-bottom: 0px;
}

#radarMapList .dx-datagrid .dx-datagrid-header-panel .dx-toolbar {
    position: relative;
    top: -6px;
}

#radarMapList .dx-datagrid-header-panel { 
    height: 40px;
}