.phone-message {
    /* min-width: 100%;
    display: flex;
    flex-direction: column; */
}
.phone-message-received {
    background-color: #2a9bf8;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    min-width: 50%;
    float: left;
    text-align: left;
}
.phone-message-sent {
    background-color: #03e460;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    min-width: 50%;
    float: right;
    text-align: right;
    align-items: flex-end;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

.cv-spinner {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;  
}

@keyframes sp-anime {
    100% { 
      transform: rotate(360deg); 
    }
}
/* Existing styles */

.list-group {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Display items in a column */
}

.list-group, .list-group * {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.list-group > li {
    position: relative;
    margin-bottom: 10px; /* Add some spacing between items */
}

.list-group > li > ul {
    display: block; /* Show submenus by default */
    background: white;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.list-group li a {
    display: block;
    padding: 0px; /* Add some padding for better usability */
    text-decoration: hover;
    color: black;
}

.list-group .submenu {
    padding-left: 20px; /* Add some indentation for submenus */
}

.list-group-item {
    padding: 0px; /* Ensure padding for better touch targets */
    border: 0px solid #ddd; /* Add border for better visibility */
}

/* New styles to remove float: left when inside .list-group */
.block-content .list-group .list-group-item,
.block .list-group .list-group-item {
    float: none !important; /* Remove float: left */
}

.block-content::after,
.block::after {
    content: "";
    display: table;
    clear: both;
}
/* 
#toggleMenu,
.menu-toggle-label {
    display: none;
} */


/* Media query to apply margin-top: 20px to .block on mobile devices */
/* @media (max-width: 767px) {
    .menu-toggle-label {
        display: block;
    }
    .block.has-list-group {
        margin-top: 45px;
    }

    .menu-toggle { */
        /* display: none; */
    /* }
    
    .menu-toggle:checked ~ .reportMenuContent {
        display: block;
    }
    
    .reportMenuContent {
        transition: all 0.3s ease;
    }
    
    .reportMenuTitle label {
        cursor: pointer;
    }
} */