/* Estilos personalizados */
        /* Estilos personalizados */
        body {
          background-color: rgb(56, 56, 56);
          font-family: Arial, sans-serif;
        }
    
        .menu {
          font-size: 30px;
          outline: none;
        }
    
        .title {
          color: rgb(76, 102, 76);
        }
    
        #chat-section {
          background: #092636;
          color: white;
          border-radius: 10px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          padding: 20px;
        }
    
        #friends-list ul, #chat-box, #friend-requests-list {
          height: 300px;
          overflow-y: auto;
        }
    
        #friends-list {
          border-right: 1px solid #ddd;
        }
    
        #friend-requests-section {
          border-left: 1px solid #ddd;
        }

        #chat-box {
          background-color: #345365;
          border-radius: 10px;
          border: none;
        }
    
        .card {
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    
        .form-label {
          font-weight: 500;
        }
    
        .form-control {
          border-radius: 8px;
        }

        .audio-message {
          width: 100%;
          max-width: 300px;
          border-radius: 8px;
          margin: 10px 0;
          /* Ocultar los controles nativos */
          display: block;
          outline: none;
        }
        
/* Para los navegadores Webkit (Chrome, Safari) */


/* Ocultar otros controles, si es necesario */



/* Cambiar el color del fondo y controles del audio (Chrome y Safari) */

/* Cambiar el color de la barra de progreso */
.audio-message::-webkit-media-controls-panel {
  background-color: #7e7e7e ; /* Fondo del panel */
}




/* Cambiar el color del temporizador */
.audio-message::-webkit-media-controls-current-time-display {
  color: #fff !important; /* Color del texto de tiempo actual */
}

.audio-message::-webkit-media-controls-time-remaining-display {
  color: #fff !important; /* Color del texto de tiempo restante */
}
        
        
    
        .btn-custom {
          background-color: #007bff;
          color: white;
          border-radius: 8px;
        }
    
        .btn-custom:hover {
          background-color: #0056b3;
        }
    
        h2 {
          font-size: 2.5rem;
          font-weight: bold;
          color: #333;
        }
    
        .img-border {
          border-radius: 5px;
        }
    
        .modalcolor {
          background-color: transparent;
          border: none;
        }
    
        .footer {
          text-align: center;
          margin-top: 30px;
          color: #888;
        }
    
        #friends-list h5, #friend-requests-section h5 {
          text-align: center;
          margin-bottom: 15px;
        }
    
        .list-group-item:hover {
          background-color: #f0f0f0;
          cursor: pointer;
        }
    
        #file-input {
          display: none;
        }

        .archivos {
          background-color: rgb(48, 48, 48);
        }
    
        .boton-cerrar {
          background-color: white;
          padding: 3;
        }

        .image-charge {
           background-color: rgb(95, 95, 95);
           color: white;
           border-radius: 8px;
        }

        .image-charge:hover {
          background-color: rgb(124, 124, 124);
        }

        .form-container {
          justify-content: center;
          display: flex;
          align-items: center;
        }

        .input-text {
          background-color: #345365;
          outline: none;
          border: none;
          color: white;
        }

        .input-text::placeholder {
          color: white;
          outline:none;
        }

        .input-text:focus {
          outline: none;
          background-color: #345365;
          color: white;
          border: none;
        }

        .input-group {
          position: relative;
        }
        .input-group input {
          padding-left: 10px; /* Ajusta el padding para dejar espacio para el ícono */
        }
        .input-group a {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
        

        #record-audio-btn {
          border-radius: 20px;
          padding: 10px;
        }
    
        .custom-file-label {
          cursor: pointer;
          background-color: #007bff;
          color: white;
          border-radius: 8px;
          margin: 10px;
        }

        .boton-plus {
          background-color: #345365;
          padding: 9px;
          padding-bottom: 10px;
        }
    
        .custom-file-label:hover {
          background-color: #0056b3;
          
        }

        .icono {
          color: white;
        }
      
        /* Ícono del botón */
    
        .chat-image {
          max-width: 200px;
          cursor: pointer;
          box-shadow: 2px 3px 3px 2px rgb(155, 155, 155);
          border-radius: 5px;
          margin-top: 10px;
        }
    
        .chat-image:hover {
          outline: none;
        }
        
        /* Animación de cambio de tamaño y rotación */
        @keyframes buttonPress {
          0% {
            transform: scale(1) rotate(0deg);
            background-color: transparent;
          }
          50% {
            transform: scale(1.2) rotate(15deg);
            background-color: #d3d3d3; /* Fondo ligeramente gris */
          }
          100% {
            transform: scale(1) rotate(0deg);
            background-color: transparent;
          }
        }

        /* Estilo del botón durante la animación */
        #record-audio-btn.animate {
          animation: buttonPress 0.3s ease-in-out;
        }