@CHARSET "ISO-8859-1";
.listing-card-container .listing-desc {
  height: 100% !important;
  overflow: visible !important;  line-height: 1.4; }
  @media (max-width: 1199px) {
    .listing-card-container .listing-desc {
      height: 100% !important;} }
      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 */
        }
      }
#map,#mapa, #mapa_empresa, #mapa_cobro, #mapamodal, .index_map {
  position: relative;
  height: 200px;
}