body {
  /*margin-top: 20px;*/
}
.i2m_header.header1 {
  padding-top: 66px !important;
}
.main .container-fluid {
  margin-top: 0px !important;
}
.groups__item, .messages {
  background-color: rgba(0, 0, 0, .2);
  border-radius: 2px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .1)
}
@media (max-width:575px) {
  .groups {
    margin: 0 -5px
  }
  .groups [class*=col-] {
    padding: 0 5px
  }
  .groups .groups__item {
    margin-bottom: 10px
  }
}
.groups__item {
  position: relative;
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  margin-bottom: 30px
}
.groups__item:hover .actions {
  opacity: 1
}
.groups__item .actions {
  position: absolute;
  top: .7rem;
  right: .5rem;
  z-index: 1;
  opacity: 0
}
.groups__img {
  width: 100%;
  display: inline-block
}
.groups__img .avatar-img {
  display: inline-block;
  margin: 0 1px 4px 0;
  vertical-align: top
}
.avatar-char, .avatar-img {
  border-radius: 2px;
  width: 3rem;
  height: 3rem;
  margin-right: 1.2rem;
}
.avatar-char {
  color: #fff;
  background-color: rgba(255, 255, 255, .08);
}
.avatar-char {
  line-height: 2.9rem;
  font-size: 1.2rem;
  text-align: center;
  font-style: normal;
}
.groups__info {
  margin-top: 1rem
}
.groups__info > strong {
  color: #fff;
  display: block;
  font-weight: 600
}
.messages, .messages__body {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-direction: normal
}
.groups__info > small {
  font-size: .9rem;
  color: rgba(255, 255, 255, .7)
}
.toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 4.5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: .05rem 2.2rem 0;
  position: relative
}
.toolbar:not(.toolbar--inner) {
  background-color: rgba(0, 0, 0, .2);
  border-radius: 2px;
  margin-bottom: 30px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .1)
}
.toolbar .actions {
  margin: .05rem -.8rem 0 auto
}
.toolbar--inner {
  margin-bottom: 1rem;
  border-radius: 2px 2px 0 0;
  background-color: rgba(0, 0, 0, .1)
}
.toolbar__nav {
  white-space: nowrap;
  overflow-x: auto
}
.toolbar__nav > a {
  display: inline-block;
  transition: color .3s
}
.toolbar__nav > a + a {
  padding-left: 1rem
}
.toolbar__nav > a.active, .toolbar__nav > a:hover {
  color: rgba(255, 255, 255, .85)
}
.toolbar__search {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  padding-left: 3rem;
  display: none;
  background-color: rgba(0, 0, 0, .96)
}
.toolbar__search input[type=text] {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 1.6rem;
  font-size: 1.2rem;
  background-color: transparent;
  color: rgba(255, 255, 255, .85)
}
.toolbar__search input[type=text]::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .5)
}
.toolbar__search input[type=text]:-moz-placeholder {
  color: rgba(255, 255, 255, .5)
}
.toolbar__search input[type=text]::-moz-placeholder {
  color: rgba(255, 255, 255, .5)
}
.toolbar__search input[type=text]:-ms-input-placeholder {
  color: rgba(255, 255, 255, .5)
}
.toolbar__search__close, .toolbar__search__close:hover {
  color: rgba(255, 255, 255, .85)
}
.toolbar__search__close {
  transition: color .3s;
  cursor: pointer;
  position: absolute;
  top: 1.5rem;
  left: 1.8rem;
  font-size: 1.5rem
}
.toolbar__label {
  margin: 0;
  font-size: 1.1rem
}
.formulario {
  flex: 1;
  padding: 20px;
  background: #f7f7f7;
}
.vista-previa {
  flex: 2;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.formulario h1, .vista-previa h2 {
  margin-bottom: 20px;
}
.formulario label {
  display: block;
  margin-bottom: 5px;
}
.formulario input, .formulario select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.formulario button {
  padding: 10px 20px;
  background-color: #4267B2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.vista-previa-encabezado {
  padding: 10px;
  background-color: #e9ebee;
}
.vista-previa-contenido {
  flex-grow: 1;
  border: 1px solid #ccc;
  margin-top: 20px;
  padding: 20px;
}
.vista-previa h3 {
  color: #333;
}
#vista-previa-privacidad {
  color: #666;
}
.grupos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  background-color: #f0f2f5;
}
.grupo-card {
  width: 300px; /* Ancho fijo para cada tarjeta de grupo */
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.grupo-imagen {
  width: 100%;
  height: 150px; /* Altura fija para la imagen */
  object-fit: cover; /* Asegura que la imagen cubra el espacio disponible */
}
.grupo-info {
  padding: 15px;
}
.grupo-info h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}
.grupo-info p {
  color: #666;
  font-size: 14px;
}
.grupo-miembros img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
.grupo-card button {
  background-color: #4267b2;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 4px;
  cursor: pointer;
}
/* Agrega responsividad si es necesario */
@media (max-width: 600px) {
  .grupos-container {
    flex-direction: column;
  }
}
main.content .container {
  width: 90% !important;
}
#i2m_grupos_main .i2m_grupos img.social-header:hover ~ button, #i2m_grupos_main .i2m_grupos img.social-header ~ button:hover {
  background-color: #fff;
}
.i2m_filtroBlancoNegro {
  filter: grayscale(100%);
}
/* Estilo cuando la clase .hide-button está presente */
.hide-button .btn {
  display: none; /* Oculta el botón */
}
.hide-button ul.nav {
  flex-direction: row; /* Alinea los elementos li en una fila */
  justify-content: start; /* Alinea los elementos li al inicio */
}
/* Estilos generales para asegurar que los li están horizontalmente alineados y con espacio entre ellos */
.hide-button li.nav-item {
  flex: 1;
  text-align: center;
  float: left;
}
/* Asegurándose de que los enlaces dentro de li ocupen todo el espacio disponible */
.hide-button li.nav-item a {
  display: block;
  width: 100%;
}
#i2m_grupos_main .tab-content .tab-pane {
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-top: 0px !important;
}
/* Estilos específicos para el offcanvas de Bootstrap */
.offcanvas::-webkit-scrollbar {
  width: 2px; /* Para navegadores WebKit */
}
.offcanvas {
  scrollbar-width: thin; /* Para Firefox */
  scrollbar-color: #888 #e0e0e0; /* Para Firefox, puedes personalizar los colores */
}
/* Posicionamiento y rotación del botón de apertura/cierre */
.offcanvas-toggle-button, .offcanvas-toggle-buttonbtnCreate {
  position: fixed;
  top: 50%; /* Centrado verticalmente */
  transform: translateY(-50%) rotate(-90deg) !important; /* Rota el botón 90 grados */
  z-index: 1050; /* Por encima del offcanvas y otros elementos */
  transition: transform 0.3s ease, left 0.3s ease !important; /* Suaviza la transición */
}
.offcanvas-toggle-buttonbtnCreate {
  left: -55px !important; /** Suaviza la transición */
}
/* Ajustes para cuando el offcanvas esté abierto */
.offcanvas-open .offcanvas-toggle-button {
  left: 400px; /* O el ancho de tu offcanvas */
}
@media (max-width: 991px) {
  .offcanvas {
    width: 90%; /* El offcanvas ocupará el 90% del ancho de la pantalla */
  }
  .offcanvas-toggle-button {
    /* Ajusta la posición del botón cuando el offcanvas está abierto en móviles */
    left: 90%; /* Esto coloca el botón al final del offcanvas que tiene 90% de ancho */
    transform: translateY(-50%) rotate(-90deg) translateX(-100%); /* Ajusta la traslación si es necesario */
  }
}