/* =========================================================
   PRO THEME (override) - ERP Laravel 8
   Cárgalo AL FINAL para pisar Bootstrap 4 + estilos actuales
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root{
  --brand:#2563eb;
  --bg:#f6f7fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;

  --radius:14px;
  --radius-sm:10px;
  --shadow: 0 14px 34px rgba(2, 6, 23, .10);
  --shadow-sm: 0 10px 24px rgba(2, 6, 23, .07);

  --navbar-h:64px;
}

/* Base */
html, body{ height:100%; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a{ color: var(--brand); }
a:hover{ color:#1d4ed8; text-decoration:none; }

/* Navbar */
nav.navbar{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  min-height: var(--navbar-h);
}
nav.navbar a{ color: var(--text) !important; }
nav.navbar small{ color: var(--muted) !important; }
nav.navbar .dropdown-menu{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 10px !important;
}

/* Sidebar */
.side-navbar{
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  top: var(--navbar-h) !important;
  height: calc(100vh - var(--navbar-h)) !important;
  overflow-y: auto !important;
}
.side-navbar .sidenav-header{
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 10px !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
}
.side-navbar .sidenav-header h2{
  color: var(--text) !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Items */
.side-navbar li a{
  border-radius: 12px !important;
  margin: 6px 10px !important;
  padding: 10px 12px !important;
  color: var(--text) !important;
  font-size: 14px !important;
}
.side-navbar li a i{ color: var(--muted) !important; }
.side-navbar li a:hover,
.side-navbar li.active > a,
.side-navbar li a[aria-expanded="true"]{
  background: rgba(37,99,235,.10) !important;
  color: var(--brand) !important;
}
.side-navbar li a:hover i,
.side-navbar li.active > a i{ color: var(--brand) !important; }

/* Contenido */
.page-content, .content-inner{
  padding-top: 18px !important;
}

/* Cards / cajas */
.card, .count-title, .colored-box{
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(226,232,240,.9) !important;
}
.card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Tablas */

.table thead th{
  background: #f8fafc !important;
  color: #334155 !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* =========================================================
   PROTHEME — MOBILE PATCH (NO SE PIERDE)
   Pegar AL FINAL FINAL del CSS
   ========================================================= */

@media (max-width: 768px){

  /* 1) Modal bien visible + scroll vertical si es largo */
  .modal-dialog{
    margin: 0.5 !important;
  }
  .modal-content{
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    
  }
  
  
  .table thead th{
  background: #f8fafc !important;
  color: #334155 !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
  
  /* Tablas */

.modal .table thead th{
  background: #f8fafc !important;
  color: #334155 !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}

  /* 2) Compacto global para tablas en modales */
  .modal .table{
    font-size: 11px !important;      /* 🔥 más pequeño */
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
  }
  .modal .table th,
  .modal .table td{
    padding: 4px 4px !important;     /* 🔥 menos padding */
    vertical-align: middle !important;
    letter-spacing: .02em;
  }
  
  
  /*PARA AJUSTAR EL MENU - ESPACION EN BLANCO ENTRE EL MENU Y EL NAVBAR*/
  
  :root{ --mnav: 63px; }

.side-navbar{
  position: fixed !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

/* 🔥 espaciador real arriba del menú */
.side-navbar::before{
  content: "";
  display: block;
  height: var(--mnav);
  flex-shrink: 0;
}

  
  
  

}



/* Inputs */
.form-control, .input-group-text, .bootstrap-select.form-control{
  background: #fff !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
}
.form-control:focus{
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.15) !important;
}

/* Botones */
.btn{ border-radius: 12px !important; font-weight: 700 !important; }
.btn-primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
}
.btn-primary:hover{
  background:#1d4ed8 !important;
  border-color:#1d4ed8 !important;
}
.btn-outline-primary{
  color: var(--brand) !important;
  border-color: rgba(37,99,235,.35) !important;
}
.btn-outline-primary:hover{
  background: rgba(37,99,235,.10) !important;
  border-color: rgba(37,99,235,.55) !important;
  color:#1d4ed8 !important;
}

/* Modales */
.modal-content{
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Paginación */
.page-link{
  border-radius: 10px !important;
  margin: 0 2px;
  border-color: var(--border) !important;
  color: var(--brand) !important;
}
.page-item.active .page-link{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}


/* =========================================================
   FIX PACK — PRO THEME (Hostinger / Bootstrap 4)
   Corrige:
   1) Filtro de fechas lineal (más pro)
   2) Separación rara al hacer scroll al final
   3) Dropdown Acciones (Venta) cortado
   4) Dropdown Notificaciones cortado
   ========================================================= */

/* =========================================================
   FIX PACK v3 (SAFE) — Bootstrap 4 + DataTables
   Objetivo:
   - Arreglar dropdowns cortados SIN romper scroll/alturas
   ========================================================= */


.navbar-collapse{
  overflow: visible !important;
}

/* 2) Dropdown por encima (sin z-index absurdo) */
.dropdown-menu{
  z-index: 1041 !important;  /* un poco arriba de navbar */
}

/* Dropdowns dentro de un modal: deben ir sobre el modal */
.modal .dropdown-menu{
  z-index: 1060 !important;
}

/* 3) NO rompas DataTables/Bootstrap scroll wrappers */
.table-responsive,
.dataTables_scrollBody{
  overflow: auto !important; /* mantener scroll */
}

/* 4) Evita que cards recorten dropdown (solo donde suele pasar) */
.card, .card-body{
  overflow: visible; /* sin !important: deja que bootstrap maneje casos */
}

/* 5) Tu tabla pro: NO uses overflow hidden en .table si hay dropdowns */
.table{
  overflow: visible !important;
}

/* 6) Fix espacio raro al final — estrategia simple */
html{ height: auto; }
body{
  min-height: 100vh;
  margin: 0;
}

/* 7) Si tu layout tiene wrapper con overflow hidden, habilítalo solo ahí */
.content-inner, .page-content{
  overflow: visible;
}

/* =========================================================
   DATATABLES HEADER PERFECTO (Bootstrap 4)
   Length | Buscar | Botones en la MISMA RECTA
   - Botones a la derecha
   - Wrap solo si no entra (con gap pequeño)
   - Sin cortes del botón ColVis
   ========================================================= */

/* Espacio pequeño SOLO arriba de "Visibilidad de la columna" */
div.dataTables_wrapper .dt-buttons .buttons-colvis{
  margin-top: 2px !important;  /* sube/baja: 4px, 6px, 8px */
}



/*POS */

/* NAVBAR fijo (estable) */
nav.navbar, .navbar, header, .top-navbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
  overflow: visible !important;
}


/*ICONOS DEL MENU*/
/* =========================================================
   NO POS (STATIC): Dropdowns visibles y pegados al icono (como imagen)
   ========================================================= */
   
   /* ✅ GENERAL (NO POS): dropdowns del navbar */

/* ✅ NOTIFICACIONES (GENERAL, NO POS): no forzar ancho gigante */
body:not(.pos-page) li#notification-icon > .dropdown-menu.notifications.show{
  min-width: 0 !important;
  width: auto !important;
  max-width: min(380px, calc(100vw - 24px)) !important;
}


@media (max-width: 576px){
  body:not(.pos-page) li#notification-icon > .dropdown-menu.notifications.show{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
  }
}

/*PARTE PARA MOVILES*/

@media (max-width: 576px){

  /* ✅ SOLO NOTIFICACIONES (NO POS) */
  body:not(.pos-page) li#notification-icon{
    position: relative !important;
  }

  /* ✅ Pegado al icono y dentro de pantalla */
  body:not(.pos-page) li#notification-icon > .dropdown-menu.show,
  body:not(.pos-page) li#notification-icon > .dropdown-menu.notifications.show{
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;

    /* 👇 pegado al icono (Centro) */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;


    /* ancho responsive sin pasarse - cambiar el menu de NOTIFICACIONES
    ancho valor width: min(240px)*/
    width: min(240px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;

    /* ✅ sin scroll horizontal */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 45vh !important;

    border-radius: 14px !important;
    padding: 10px 12px !important;
    z-index: 99999 !important;
  }

  /* ✅ Asegura que items no empujen el ancho */
  body:not(.pos-page) li#notification-icon > .dropdown-menu.show li,
  body:not(.pos-page) li#notification-icon > .dropdown-menu.show a,
  body:not(.pos-page) li#notification-icon > .dropdown-menu.show .btn{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    /* evita overflow raro por padding */
    box-sizing: border-box !important;
  }

  /* ✅ Por si hay algún elemento interno con nowrap */
  body:not(.pos-page) li#notification-icon > .dropdown-menu.show *{
    max-width: 100% !important;
  }

  /* ✅ Oculta barra horizontal visualmente si algún navegador insiste */
  body:not(.pos-page) li#notification-icon > .dropdown-menu.show{
    scrollbar-width: thin; /* firefox */
  }
  body:not(.pos-page) li#notification-icon > .dropdown-menu.show::-webkit-scrollbar:horizontal{
    height: 0 !important;
  }
}




/* =========================================================
   POS (STATIC): Dropdowns visibles y pegados al icono (como imagen)
   ========================================================= */

/* Navbar normal en POS */
.pos-page header,
.pos-page nav.navbar,
.pos-page .navbar,
.pos-page .top-navbar{
  position: static !important;
  overflow: visible !important;
}

/* No recortar en contenedores cercanos */
.pos-page nav.navbar .container-fluid,
.pos-page nav.navbar .navbar-holder,
.pos-page ul.nav-menu,
.pos-page ul.nav-menu > li{
  overflow: visible !important;
}

/* EL ANCLA REAL: notificaciones y usuario */
.pos-page li#notification-icon,
.pos-page ul.nav-menu > li.nav-item{
  position: relative !important;
}

/* Dropdown por encima y sin transform de Popper */
.pos-page .dropdown-menu{
  z-index: 99999 !important;
  transform: none !important;
}
/*ESO ES LA VENTANA DE NOTIFICACION DEL MENU*/
/* ✅ COMO TU IMAGEN: abrir HACIA ABAJO pegado al icono */
.pos-page li#notification-icon > .dropdown-menu.show,
.pos-page ul.nav-menu > li.nav-item > .dropdown-menu.show{
  position: absolute !important;
  top: calc(100% + 8px) !important;   /* debajo del icono */
  bottom: auto !important;
  right: 0 !important;
  left: auto !important;
  
/*ESTO ES LAS VENTANA DE USUARIO AJUSTADO DEL MENU */
  max-height: 50vh !important;
  overflow: auto !important;
  min-width: 170px !important;
  border-radius: 14px !important;
}

/* Si querés que el dropdown de notificaciones sea un poco más ancho */
/* ✅ NOTIFICACIONES: no forzar ancho gigante */
.pos-page li#notification-icon > .dropdown-menu.notifications.show{
  min-width: 0 !important;
  width: auto !important;
  max-width: min(380px, calc(100vw - 24px)) !important;
}

/* Si algún contenedor del POS tiene transform, rompe el stacking */
.pos-page .page,
.pos-page .page-content,
.pos-page .content-inner,
.pos-page .card,
.pos-page .card-body,
.pos-page .table-responsive{
  transform: none !important;
}


/* =========================================================
   🔥 FIX REAL: dropdown bootstrap móvil POS
   elimina posicionamiento raro de Popper
   ========================================================= */

@media (max-width: 576px){

  /* ✅ Notificaciones: centrado automático en móvil */
  .pos-page li#notification-icon{
    position: relative !important;
  }
  
  .pos-page li#notification-icon > .dropdown-menu.notifications.show{
  min-width: 0 !important;
  width: auto !important;
  max-width: min(240px, calc(100vw - 24px)) !important;
}

  /* ✅ NOTIFICACIONES: centrado + menos ancho + no se pasa */
  .pos-page li#notification-icon > .dropdown-menu.show{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: min(240px, calc(100vw - 24px)) !important;

    overflow: hidden !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
  }

  /* ✅ evita que un <a> tipo btn-link se estire */
  .pos-page li#notification-icon > .dropdown-menu.show a.btn,
  .pos-page li#notification-icon > .dropdown-menu.show a{
    display: block !important;
    width: 100% !important;     /* ocupa dentro, pero el menú manda el max-width */
    white-space: normal !important;
  }

  /* ✅ Usuario: se mantiene pegado a la derecha (tu “bacano”) */
  .pos-page ul.nav-menu > li.nav-item:last-child > .dropdown-menu.show{
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    width: max-content !important;
    max-width: calc(100vw - 16px) !important;
  }
}




/*INCONO DE PERFIL EN  MOBIL*/

/* =========================================================
   ✅ FIX FINAL MÓVIL POS (≤576px)
   - una sola fila
   - NO se corta "ayuda"
   - usuario al extremo derecho
   ========================================================= */
@media (max-width: 576px){

  /* SOLO juntar AYUDA con el usuario (sin cambiar tamaños) */

  /* El enlace de ayuda (tiene el icono dripicons-information) */
  .pos-page ul.nav-menu a i.dripicons-information{
    margin-right: 0px !important;   /* ajusta: -4px / -6px / -8px */
    margin-left: 0 !important;
  }

  /* Si el texto "ayuda" tiene padding/margen, se lo quitamos */
  .pos-page ul.nav-menu a i.dripicons-information + span{
    margin-left: 0 !important;
    padding-left: 2px !important;   /* ajusta: 0px / 2px */
  }

  /* Asegura que el usuario no tenga margen extra hacia la derecha */
  .pos-page ul.nav-menu > li.nav-item:last-child{
    margin-left: 0 !important;
  }
  
  /*PARA LOS BOTONES DE EFECTIVO EN EL POS*/
  

  /* ✅ SOLO POS */
  .pos-page .payment-options{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    border: 2px solid rgba(0,0,0,.12) !important;
    border-radius: 14px !important;
    padding: 10px !important;
    background: #fff !important;
  }

  .pos-page .payment-options .column-5{
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pos-page .payment-options .btn{
    width: 100% !important;
    margin: 0 !important;
    padding: .45rem .55rem !important;
    font-size: .85rem !important;
    line-height: 1.1 !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  .pos-page .payment-options .btn i,
  .pos-page .payment-options .btn svg{
    margin-right: .35rem !important;
    font-size: 1rem !important;
  }

  .pos-page .payment-options .column-5:last-child{
    grid-column: 1 / -1 !important;
  }
 


 

}


/* =========================
   FILTER TOGGLE — PREMIUM ERP
   ========================= */

.filter-toggle{
  background: #eef2f7 !important;
  border: 1px solid #dbe4f0 !important;
  border-radius: 999px !important;
  padding: 6px !important;
  gap: 6px !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.08) !important;
}

/* botones dentro */
.filter-toggle .btn{
  border: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* hover */
.filter-toggle .btn:hover{
  background: rgba(37,99,235,.10) !important;
  color: #0f172a !important;
}

/* activo premium */
.filter-toggle .btn.active{
  background: #ffffff !important;
  color: #1d4ed8 !important;
  outline: 2px solid rgba(37,99,235,.22);
  box-shadow: 0 8px 18px rgba(2,6,23,.12) !important;
}

/* letras más pequeñas en móvil mes/año/hoy/los ultimos 7 dias*/
@media (max-width: 576px){
  .filter-toggle .btn{
    font-size: 12px !important;  /* más cómodo */
    padding: 8px 12px !important;  /* más alto y ancho */
    white-space: nowrap;
    flex: 0 0 auto;
  }
 
 
}


/*SEPARAR BOTONES DE AÑADIR COMPRA/IMPORTAR COMPRA*/
/* SEPARAR BOTONES SOLO CUANDO SE ROMPAN A OTRA LÍNEA */
@media (max-width: 576px){
  .container-fluid > .btn{
    display: inline-flex;
    align-items: center;
    margin-right: 8px !important; /* separación horizontal */
  }

  /* si se van a otra línea, este margen inferior ayuda */
  .container-fluid > .btn{
    margin-bottom: 8px !important;
  }
}





/* ==========================
   FILTER WINDOW - MOBILE PRO
   Bottom Sheet + grid + scroll
   ========================== */

@media (max-width: 576px){

  .filter-window{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    z-index: 99999 !important;
    background: #fff !important;

    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;

    box-shadow: 0 -18px 40px rgba(2,6,23,.20) !important;

    max-height: 78vh !important;     /* alto máximo del panel */
    overflow: hidden !important;     /* el scroll va adentro */
    padding: 10px 10px 14px !important;
  }

  /* Scroll interno */
  .filter-window .category,
  .filter-window .brand{
    max-height: 70vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-top: 8px !important;
  }

  /* Cabeceras (titulo + X) pegajosas */
  .filter-window .category > .row:first-child,
  .filter-window .brand > .row:first-child{
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    padding: 10px 6px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }

  /* Quitar márgenes bootstrap que te rompen el ancho */
  .filter-window .row.ml-2,
  .filter-window .row.mr-2{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Grid PRO: 3 columnas */
  .filter-window .category .category-img,
  .filter-window .brand .brand-img{
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding: 8px 6px !important;
  }

  /* Tarjetita tocable */
  .filter-window .category-img,
  .filter-window .brand-img{
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  /* Imágenes uniformes */
  .filter-window .category-img img,
  .filter-window .brand-img img{
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto 6px auto;
  }

  /* Texto compacto */
  .filter-window .category-img p,
  .filter-window .brand-img p{
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    text-align: center !important;
  }

  /* Botón cerrar (X) más “touch friendly” */
  .filter-window .btn.btn-default.btn-sm{
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 999px !important;
    padding: 8px 10px !important;
    background: #fff !important;
  }
}

/*ALERTAS DE ELIMINAR Y DE REGISTROS

*/

/* =========================================================
   FLASH ALERTS — PREMIUM (SIN TOCAR VISTAS)
   Aplica a: .page .container-fluid.mt-2 > .alert...
   - Ancho pro (no fit-content enano)
   - X perfectamente alineada (no pisa texto)
   - Responsive móvil
   ========================================================= */

/* Contenedor centrado */
.page .container-fluid.mt-2{
  display: flex !important;
  justify-content: center !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Alert premium */
.page .container-fluid.mt-2 .alert{
  position: relative !important;

  width: 100% !important;
  max-width: 720px !important;              /* ancho premium desktop */
  margin: 10px 0 !important;

  padding: 12px 56px 12px 16px !important;  /* derecha reservada para la X */
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.10) !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* X premium */
.page .container-fluid.mt-2 .alert.alert-dismissible .close{
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;

  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 !important;

  border-radius: 10px !important;
  opacity: .85 !important;
  text-shadow: none !important;
  outline: none !important;
}

/* símbolo × bien centrado */
.page .container-fluid.mt-2 .alert.alert-dismissible .close span{
  display: block !important;
  font-size: 22px !important;
  line-height: 36px !important;
}

.page .container-fluid.mt-2 .alert.alert-dismissible .close:hover{
  opacity: 1 !important;
  background: rgba(2,6,23,.06) !important;
}

/* Móvil: ocupa todo el ancho (se ve moderno) */
@media (max-width: 576px){
  .page .container-fluid.mt-2 .alert{
    max-width: 100% !important;
  }
}