.clientselect{
 
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	max-width: 600px;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}

@media (max-width: 991.98px) {
	.clientselect {
		max-width: 100%;
	}
}

i.icon-ATC {
    color: #fd9000;
}

i.icon-SuperUser {
    color: #4842ca;
}

i.icon-Comisionista {
    color: #14b1bf;
}

#content {
  margin-left: 0;
  transition: all .4s ease;
}

#content.sidebar_inactive {
  margin-left: -185px;
  transition: all .4s ease;
}

/* Ajustes header en móvil/tablet (<768px) */
@media (max-width: 767.98px) {
  /* 1) Reduce el padding del header y alínea mejor */
  #header {
    padding: 8px;
  }

  /* 2) Logo más pequeño */
  #header-first img {
    max-height: 30px;   /* ajusta según prefieras */
    width: auto;
  }

  /* 3) Espacio entre logo y resto */
  #header-first {
    flex: 0 0 auto;
    margin-right: 12px;
  }

  /* 4) Botón hamburguesa un poco más grande para click fácil */
  #header-content a#menu-toggle i.material-icons {
    font-size: 32px;
  }

  /* 5) Texto “Name:” y “Country:” más pequeño */
  #header-last h6 {
    font-size: 12px;
    margin-right: 8px;  /* separa un poco los elementos */
  }

  /* 6) Iconos (home, logout) ligeramente más grandes y comapctos */
  #header-last i.material-icons {
    font-size: 20px;
    vertical-align: middle;
  }

  /* 7) Ajuste general del header-last para que no se rompa en dos líneas */
  #header-last {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }
}

/* === HEADER MÓVIL ULTRA-COMPACTO (<480px) === */
@media (max-width: 480px) {
  /* El header flex no se colapse */
  #header {
    flex-wrap: nowrap;
    padding: 0 0.5rem;
  }

  #content {
    margin-top: 0px;
  }

  /* Logo más pequeño si hace falta */
  #header-first img {
    max-height: 24px;
    width: auto;
  }

  /* Ocultamos el span con usuario y el switcher de país */
  #header-last .user-info,
  #header-last .country-switcher {
    display: none !important;
  }

  /* Aseguramos que el icono “list” (toggle) y home + logout queden visibles */
  #header-content,
  #header-last > a.logout,
  #header-last > a.home {
    display: flex !important;
    align-items: center;
  }

  /* Dropdowns (país u otros) siempre en posición fija y full-width */
  /*#header-last .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100vw !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }*/

}

/* =============================================================
   Bootstrap 3 → Bootstrap 4: col-xs-* polyfill
   Bootstrap 4 removed col-xs-* (renamed to col-*).
   These rules restore the expected behaviour so that existing
   col-xs-N col-md-N pairs work at ALL viewport sizes.

   Logic:
   - At ≤991px:  the high-specificity form rule in matrix-style.css
                 already forces ALL [class*="col-"] to 100% width,
                 so these definitions are safely overridden there.
   - At ≥992px:  Bootstrap's col-md-* media query rules have the
                 same specificity as these but load BEFORE custom.css
                 in the cascade, so these definitions win. Since every
                 col-xs-N is paired with col-md-N (same N), the result
                 is identical.
   ============================================================= */
.col-xs-1  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-xs-2  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xs-3  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 25%; max-width: 25%; }
.col-xs-4  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-5  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-xs-6  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 50%; max-width: 50%; }
.col-xs-7  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-xs-8  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-xs-9  { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 75%; max-width: 75%; }
.col-xs-10 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-xs-11 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-xs-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;
             flex: 0 0 100%; max-width: 100%; }

/* Offset polyfill (used in blade: col-xs-offset-4 on businessunit row) */
.col-xs-offset-1  { margin-left: 8.333333%; }
.col-xs-offset-2  { margin-left: 16.666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.333333%; }
.col-xs-offset-6  { margin-left: 50%; }