.message-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.message {
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    max-width: 70%;
}

.sender {
    background-color: #007bff;
    align-self: flex-end;
}

.receiver {
    background-color: #28a745;
    align-self: flex-start;
}
.select-wrapper {
   position: relative;
}

.select-wrapper select {
   appearance: none;
   padding: 0.5rem 2rem 0.5rem 1rem;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   background-color: #fff;
   width: 100%;
   font-size: 1rem;
   line-height: 1.5;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select-wrapper select:focus {
   border-color: #80bdff;
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.select-wrapper svg {
   position: absolute;
   top: 50%;
   right: 0.75rem;
   transform: translateY(-50%);
   pointer-events: none;
   fill: currentColor;
}

.breadcrumb-item+.breadcrumb-item::before {
    width: 0.3rem !important;
    height: 0.6rem !important;
    margin-right: 0.5rem !important;
    -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
    mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    background: #d2ddec !important;
    margin-top: 8px !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(24px);
}
.btn-zoom {
    display: inline-block;
    transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
}

.btn-zoom:hover {
    transform: scale(1.2); /* Ajusta el valor del "scale" según el nivel de zoom que desees (1.2 es un 20% más grande) */
}

.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con opacidad */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Asegura que esté en la parte superior */
}

.loading-wave {
display: flex;
align-items: center;
}

.loading-dot {
width: 20px; /* Tamaño más grande de los puntos */
height: 20px; /* Tamaño más grande de los puntos */
background-color: #333; /* Color de los puntos grises */
border-radius: 50%;
margin: 0 5px;
animation: wave 1s infinite alternate ease-in-out; /* Animación de onda con aceleración y desaceleración */
}

.dot-1 {
animation-delay: -0.4s; /* Retraso de animación para el primer punto */
}

.dot-2 {
animation-delay: -0.2s; /* Retraso de animación para el segundo punto */
}

@keyframes wave {
0% {
        transform: translateY(0);
}
100% {
        transform: translateY(-35px); /* Aumenta la amplitud del movimiento */
}
}