/* ==========================================================
   ScanMAP UI V2 - restyling grafico non invasivo
   ========================================================== */

:root{
  --scanmap-dark:#061727;
  --scanmap-dark-2:#08233a;
  --scanmap-card:rgba(5,22,38,.94);
  --scanmap-card-soft:rgba(8,35,58,.92);
  --scanmap-border:rgba(90,180,255,.22);
  --scanmap-red:#e62218;
  --scanmap-red-2:#ff3b2f;
  --scanmap-white:#ffffff;
  --scanmap-muted:rgba(255,255,255,.68);
  --scanmap-blue:#128cff;
  --top-h:76px;
  --bottom-h:92px;
}

/* =========================
   TOPBAR
   ========================= */

.scanmap-topbar{
  height:var(--top-h) !important;
  min-height:var(--top-h) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(21,92,145,.35), transparent 34%),
    linear-gradient(135deg, #061727 0%, #071a2d 55%, #04111f 100%) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.30) !important;
  padding:8px 14px !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}

.scanmap-brand strong{
  color:#fff !important;
  font-size:16px !important;
  letter-spacing:.01em !important;
}

.scanmap-brand span{
  color:rgba(255,255,255,.72) !important;
  font-size:11px !important;
}

.scanmap-logo{
  width:46px !important;
  height:46px !important;
  flex-basis:46px !important;
  border-radius:50% !important;
  box-shadow:0 0 18px rgba(255,80,0,.28) !important;
}

.scanmap-topbar-right{
  gap:8px !important;
}

/* Nascondo il vecchio pulsante elenco in alto:
   resta il pulsante LISTA laterale */
#shellListBtn{
  display:none !important;
}

.top-btn,
.scanmap-user-chip{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
}

.scanmap-user-chip-copy span{
  color:rgba(255,255,255,.62) !important;
}

.scanmap-user-chip-media{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}

/* Mappa sotto la topbar */
#map{
  top:var(--top-h) !important;
  bottom:var(--bottom-h) !important;
}

/* =========================
   NAVBAR INFERIORE
   ========================= */

#navbar{
  height:var(--bottom-h) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(25,105,170,.24), transparent 45%),
    linear-gradient(135deg, #061727 0%, #071b2f 60%, #040e19 100%) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 -16px 36px rgba(0,0,0,.34) !important;
  border-radius:24px 24px 0 0 !important;
  overflow:visible !important;
  padding-bottom:env(safe-area-inset-bottom, 0px) !important;
}

#navbar .icon-links{
  height:100% !important;
  display:grid !important;
  grid-template-columns:repeat(7, 1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:0 !important;
  padding:6px 6px 8px !important;
  box-sizing:border-box !important;
}

#navbar .icon-links a{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  color:#fff !important;
  position:relative !important;
  border-radius:18px !important;
}

#navbar .icon-wrapper{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  width:100% !important;
  height:100% !important;
}

#navbar img.icon{
  width:26px !important;
  height:26px !important;
  object-fit:contain !important;
  filter:brightness(0) invert(1) !important;
  opacity:.96 !important;
}

#navbar .icon-label{
  color:#fff !important;
  font-size:10px !important;
  line-height:1.05 !important;
  text-align:center !important;
  max-width:64px !important;
  white-space:normal !important;
}

/* Categoria attiva: indicatore sobrio */
#navbar .icon-links a.active:not(.scanmap-ai-nav){
  background:rgba(255,255,255,.06) !important;
}

#navbar .icon-links a.active:not(.scanmap-ai-nav)::after{
  content:"" !important;
  position:absolute !important;
  left:28% !important;
  right:28% !important;
  bottom:5px !important;
  height:3px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.85) !important;
}

/* Bottone centrale Guida AI */
#navbar .scanmap-ai-nav{
  transform:translateY(-10px) !important;
  z-index:5 !important;
}

#navbar .scanmap-ai-nav .icon-wrapper{
  width:62px !important;
  height:76px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, #ff3b2f 0%, #c91512 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 22px rgba(255,55,45,.52),
    0 12px 24px rgba(0,0,0,.36) !important;
}

#navbar .scanmap-ai-nav .scanmap-ai-icon{
  color:#fff !important;
  font-size:30px !important;
  line-height:1 !important;
  filter:none !important;
}

#navbar .scanmap-ai-nav .icon-label{
  font-size:11px !important;
  font-weight:700 !important;
}

#navbar .scanmap-ai-nav::after{
  content:"" !important;
  position:absolute !important;
  left:28% !important;
  right:28% !important;
  bottom:-2px !important;
  height:4px !important;
  border-radius:999px !important;
  background:#ff3b2f !important;
}

/* Nasconde il vecchio pulsante flottante rosso della chat */
#chat-toggle{
  display:none !important;
}

/* =========================
   PULSANTE LISTA LATERALE
   ========================= */

.floating-marker{
  writing-mode:horizontal-tb !important;
  position:fixed !important;
  right:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:54px !important;
  height:72px !important;
  padding:0 !important;
  border-radius:18px !important;
  background:
    linear-gradient(135deg, rgba(9,31,52,.98), rgba(3,15,28,.98)) !important;
  color:#fff !important;
  font-size:10px !important;
  letter-spacing:.02em !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.34) !important;
  z-index:2400 !important;
}

.floating-marker::before{
  content:"☰";
  font-size:24px;
  line-height:1;
}

/* =========================
   PANNELLO LISTA
   ========================= */

.popup-scroll{
  background:rgba(4,17,30,.96) !important;
  color:#fff !important;
  border:1px solid var(--scanmap-border) !important;
  box-shadow:0 22px 44px rgba(0,0,0,.42) !important;
  border-radius:22px !important;
}

/* =========================
   CHAT AI
   ========================= */

#chat-box{
  background:rgba(4,17,30,.97) !important;
  color:#fff !important;
  border:1px solid var(--scanmap-border) !important;
  border-radius:22px !important;
  box-shadow:0 24px 50px rgba(0,0,0,.46) !important;
  overflow:hidden !important;
}

#chat-box .chatbox-head{
  background:
    radial-gradient(circle at 10% 0%, rgba(38,150,230,.20), transparent 40%),
    linear-gradient(135deg, #061727, #04111f) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

#chat-box .chatbox-head-title::before{
  content:"✦ ";
  color:#66d9ff;
}

#chat-box #chat-scroll{
  background:transparent !important;
  color:#fff !important;
}

#chat-box #chat-messages{
  color:#fff !important;
}

#chat-box #chat-dynamic-actions-wrap,
#chat-box .chatbox-input-row,
#chat-box #chat-quick-questions{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(90,180,255,.18) !important;
}

#chat-box input,
#chat-input{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  border:1px solid rgba(90,180,255,.24) !important;
}

#chat-input::placeholder{
  color:rgba(255,255,255,.56) !important;
}

#chat-send{
  background:#0d8cff !important;
}

#chat-voice{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

/* =========================
   PANNELLO NAVIGAZIONE
   ========================= */

#route-info{
  background:rgba(4,17,30,.96) !important;
  color:#fff !important;
  border:1px solid var(--scanmap-border) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.38) !important;
}

/* Nasconde vecchio stop button se resta fuori dal pannello */
.stop-navigation-btn{
  display:none !important;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width:640px){
  :root{
    --top-h:74px;
    --bottom-h:88px;
  }

  .scanmap-topbar{
    padding:7px 10px !important;
  }

  .scanmap-logo{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  .scanmap-brand strong{
    font-size:14px !important;
  }

  .scanmap-brand span{
    font-size:10px !important;
  }

  #navbar .icon-label{
    font-size:9px !important;
  }

  #navbar img.icon{
    width:24px !important;
    height:24px !important;
  }

  #navbar .scanmap-ai-nav .icon-wrapper{
    width:58px !important;
    height:72px !important;
  }

  #navbar .scanmap-ai-nav .scanmap-ai-icon{
    font-size:28px !important;
  }

  #chat-box{
    width:min(86vw, 390px) !important;
    max-height:calc(100dvh - var(--top-h) - var(--bottom-h) - 24px) !important;
  }
}

/* ScanMAP photo card marker - POI primo livello */
.scanmap-photo-card-marker {
  width: 118px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  overflow: hidden;
  border: 2px solid #ffffff;
  transform: translateY(-8px);
}

.scanmap-photo-card-marker img.scanmap-photo-card-img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  display: block;
}

.scanmap-photo-card-title {
  font-size: 11px;
  font-weight: 700;
  color: #102033;
  padding: 5px 7px 7px;
  line-height: 1.15;
  text-align: center;
  background: #fff;
}

.scanmap-photo-card-tip {
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  position: absolute;
  left: 50%;
  bottom: -7px;
  margin-left: -7px;
  box-shadow: 3px 3px 7px rgba(0,0,0,.15);
}

/* Punta inferiore card marker primari */
.scanmap-photo-card-marker {
  position: relative;
}

.scanmap-photo-card-tip {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid #ffffff;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
  z-index: 2;
}

/* Correzione: permette alla punta della card di uscire dal bordo */
.scanmap-photo-card-marker {
  overflow: visible !important;
}

.scanmap-photo-card-marker img.scanmap-photo-card-img {
  border-radius: 14px 14px 0 0;
}

/* Punta triangolare definitiva sotto le photo-card */
.scanmap-photo-card-tip {
  position: absolute !important;
  left: 50% !important;
  bottom: -13px !important;
  margin-left: 0 !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-top: 13px solid #ffffff !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.22)) !important;
  z-index: 5 !important;
}

/* ===============================
   Photo card marker più compatte
   =============================== */
.scanmap-photo-card-marker {
  width: 92px !important;
  padding: 4px !important;
  border-radius: 10px !important;
}

.scanmap-photo-card-marker img.scanmap-photo-card-img {
  width: 84px !important;
  height: 52px !important;
  border-radius: 7px !important;
  object-fit: cover !important;
}

.scanmap-photo-card-title {
  font-size: 10px !important;
  line-height: 1.05 !important;
  max-width: 84px !important;
  margin-top: 3px !important;
}

.scanmap-photo-card-tip {
  transform: scale(0.7) !important;
  transform-origin: top center !important;
}

/* ===============================
   Rimozione bordo photo-card
   =============================== */
.scanmap-photo-card-marker {
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
}

.scanmap-photo-card-marker img.scanmap-photo-card-img {
  border: none !important;
}

/* ===============================
   Controlli rapidi destra mappa
   =============================== */
#scanmapRightControls {
  position: fixed;
  right: 14px;
  bottom: 145px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#scanmapRightControls button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  color: #111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  cursor: pointer;
}

#scanmapRightControls button:active {
  transform: scale(0.94);
}

/* ===============================
   Controlli destra unificati con LIST / Percorsi / AI
   =============================== */
#scanmapRightControls {
  right: 14px !important;
  bottom: 205px !important;
  gap: 8px !important;
}

#scanmapRightControls button {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.96) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22) !important;
  font-size: 19px !important;
}

/* prova ad armonizzare anche i bottoni principali già presenti */
#listButton,
#routeButton,
#aiButton,
#openListBtn,
#openRoutesBtn,
#openAiBtn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22) !important;
}

/* ===============================
   Controlli zoom/posizione stile floating-marker
   =============================== */
#scanmapRightControls {
  position: fixed !important;
  right: 12px !important;
  top: calc(50% - 150px) !important;
  bottom: auto !important;
  z-index: 2401 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#scanmapRightControls button {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(9,31,52,.98), rgba(3,15,28,.98)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.floating-marker {
  right: 12px !important;
}

/* ===============================
   Barra unica controlli destra
   =============================== */
#scanmapRightControls {
  right: 12px !important;
  top: calc(50% - 162px) !important;
  bottom: auto !important;
  gap: 0 !important;
  z-index: 2402 !important;
}

#scanmapRightControls button {
  width: 54px !important;
  height: 54px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

#scanmapRightControls button:first-child {
  border-radius: 18px 18px 0 0 !important;
}

#scanmapRightControls button:last-child {
  border-radius: 0 0 0 0 !important;
}

.floating-marker {
  top: calc(50% + 0px) !important;
  width: 54px !important;
  height: 72px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.scanmap-side-route-btn,
.scanmap-side-ai-btn {
  width: 54px !important;
  border-radius: 0 !important;
}

/* Unisce definitivamente controlli zoom/posizione al blocco LIST */
#scanmapRightControls {
  top: calc(50% - 144px) !important;
}

#scanmapRightControls button:last-child {
  border-bottom: none !important;
}

/* ===============================
   Finta barra unica laterale
   =============================== */

/* blocco zoom/location */
#scanmapRightControls{
  position:fixed !important;
  right:12px !important;
  top:calc(50% - 165px) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  z-index:2399 !important;
}

/* bottoni superiori */
#scanmapRightControls button{
  width:54px !important;
  height:54px !important;
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;

  background:
    linear-gradient(135deg,
      rgba(9,31,52,.98),
      rgba(3,15,28,.98)
    ) !important;

  color:#fff !important;

  border-bottom:1px solid rgba(255,255,255,.10) !important;

  box-shadow:none !important;
}

/* primo bottone arrotondato sopra */
#scanmapRightControls button:first-child{
  border-radius:18px 18px 0 0 !important;
}

/* ultimo bottone attaccato a LIST */
#scanmapRightControls button:last-child{
  border-bottom:none !important;
}

/* LIST */
.floating-marker{
  top:calc(50% - 3px) !important;

  border-radius:0 !important;
  box-shadow:none !important;

  margin:0 !important;
}

/* Percorsi */
.scanmap-routes-side-btn{
  margin-top:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* AI */
#chat-toggle,
.scanmap-ai-side-btn{
  margin-top:0 !important;
  border-radius:0 0 18px 18px !important;
  box-shadow:none !important;
}

/* ===============================
   Barra zoom/posizione uguale a LIST/Percorsi/AI
   =============================== */
#scanmapRightControls {
  position: fixed !important;
  right: 12px !important;
  top: calc(50% - 175px) !important;
  bottom: auto !important;
  width: 54px !important;
  z-index: 2400 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
}

#scanmapRightControls button {
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  background: linear-gradient(135deg, rgba(9,31,52,.98), rgba(3,15,28,.98)) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

#scanmapRightControls button:last-child {
  border-bottom: 0 !important;
}

/* Barra zoom/posizione identica alla barra laterale */
#scanmapRightControls {
  right: 12px !important;
  top: calc(50% - 232px) !important;
  width: 54px !important;
  gap: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(9,31,52,.98), rgba(3,15,28,.98)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
}

#scanmapRightControls button {
  width: 54px !important;
  height: 72px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

#scanmapRightControls button:last-child {
  border-bottom: none !important;
}

.floating-marker {
  border-radius: 0 !important;
}

/* ===============================
   Barra comandi destra compatta e aderente al bordo
   =============================== */
#scanmapRightControls {
  position: fixed !important;
  right: 0 !important;
  top: calc(50% - 150px) !important;
  bottom: auto !important;
  width: 46px !important;
  gap: 0 !important;
  z-index: 2401 !important;
  overflow: hidden !important;
  border-radius: 14px 0 0 0 !important;
  background: linear-gradient(135deg, rgba(9,31,52,.98), rgba(3,15,28,.98)) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
}

#scanmapRightControls button {
  width: 46px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#scanmapRightControls button:last-child {
  border-bottom: none !important;
}

/* allinea anche la barra LIST/Percorsi/AI al bordo destro */
.floating-marker,
#scanmapRoutesSideBtn,
.scanmap-routes-side-btn,
#chat-toggle,
.scanmap-ai-side-btn {
  right: 0 !important;
}

/* Larghezza nuova barra uguale a LIST/Percorsi/AI */
#scanmapRightControls {
  width: 54px !important;
}

#scanmapRightControls button {
  width: 54px !important;
}

/* Posiziona la barra zoom/posizione esattamente sopra LIST */
#scanmapRightControls {
  right: 0 !important;
  top: calc(50% - 126px) !important;
  bottom: auto !important;
}

/* Posiziona la barra zoom/posizione esattamente sopra LIST */
#scanmapRightControls {
  right: 0 !important;
  top: calc(50% - 132px) !important;
  bottom: auto !important;
}

/* Barra zoom/posizione attaccata sopra LIST, senza sovrapporsi */
#scanmapRightControls {
  top: calc(50% - 170px) !important;
}

/* Barra zoom/posizione attaccata sopra LIST, senza sovrapporsi */
#scanmapRightControls {
  top: calc(50% - 160px) !important;
}

/* Barra zoom/posizione attaccata sopra LIST, senza sovrapporsi */
#scanmapRightControls {
  top: calc(50% - 150px) !important;
}

/* Spostamento reale barra laterale LIST / Percorsi / AI */
#floatingMarker.floating-marker {
  top: calc(100vh - 300px) !important;
  right: 0 !important;
  transform: none !important;
}

#scanmapRoutesSideBtn.scanmap-routes-side-btn {
  top: calc(100vh - 228px) !important;
  right: 0 !important;
  transform: none !important;
}

#scanmapAiSideBtn.scanmap-ai-side-btn,
.scanmap-ai-side-btn {
  top: calc(100vh - 150px) !important;
  right: 0 !important;
  transform: none !important;
}

/* Sposta in basso solo barra zoom/posizione */
#scanmapRightControls {
  top: calc(50% - 70px) !important;
  bottom: auto !important;
}

/* Sposta in basso solo barra zoom/posizione */
#scanmapRightControls {
  top: calc(50% - 80px) !important;
  bottom: auto !important;
}

/* LIST con bordo superiore squadrato */
#floatingMarker.floating-marker {
  border-radius: 0 !important;
}

/* Barra zoom stessa larghezza di LIST/Percorsi/AI */
#scanmapRightControls {
  width: 58px !important;
}

#scanmapRightControls button {
  width: 58px !important;
}

/* Barra zoom stessa larghezza di LIST/Percorsi/AI */
#scanmapRightControls {
  width: 58px !important;
}

#scanmapRightControls button {
  width: 568px !important;
}

/* Barra zoom stessa larghezza di LIST/Percorsi/AI */
#scanmapRightControls {
  width: 58px !important;
}

#scanmapRightControls button {
  width: 56px !important;
}

/* Barra zoom stessa larghezza di LIST/Percorsi/AI */
#scanmapRightControls {
  width: 58px !important;
}

#scanmapRightControls button {
  width: 50px !important;
}

/* Barra zoom stessa larghezza di LIST/Percorsi/AI */
#scanmapRightControls {
  width: 56px !important;
}

#scanmapRightControls button {
  width: 56px !important;
}