.word-wrap-70 {
    word-wrap: break-word;
    width: 70%;
    margin-bottom: 50px;
}

.word-wrap {
    word-wrap: break-word;
}

.word-grid {
    position: absolute;
    display: flex;
    flex-direction: row;
    gap: 12px;
    left: 0;
    bottom: 0;
    align-items: center;
    padding-left: 16px;
    margin: 10px 0;
}

#List {
    margin: 0 auto;
    font-size: 15px;
    border: 1px solid #ccc;
}

ic01 {
    background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}

#groupedList.e-listview {
    display: block;
    max-width: 380px;
    margin-right: 0;
    border: 1px solid;
    line-height: initial;
    border-color: rgba(0, 0, 0, 0.12);
}

body.bootstrap5-dark #groupedList.e-listview,
body.bootstrap-dark #groupedList.e-listview,
body.tailwind-dark #groupedList.e-listview,
body.fabric-dark #groupedList.e-listview,
body.highcontrast #groupedList.e-listview {
    border: 1px solid #444c54;
}


.e-listview.e-rtl .e-text .e-headertext:after {
    font-family: 'e-icons';
    position: absolute;
    right: 315px;
}

.e-listview .e-text .e-headertext:after {
    font-family: 'e-icons';
    position: absolute;
    right: 16px;
}

#groupedList.e-listview .e-list-header {
    color: white;
    height: 50px;
    background-color: #212529;
    padding-left: 15px;
    position: sticky;
    top: -1px;
}

    #groupedList.e-listview .e-list-header .e-text {
        font-family: sans-serif;
        font-size: 18px;
        line-height: 26px;
    }

 ListView template customization 

#groupedList.e-listview .e-list-item {
    cursor: pointer;
}

#groupedList.e-listview .e-content {
    min-height: 220px;
    max-height:266px;
    overflow-y: auto;
}

body.material-dark .e-list-item .e-list-avatar.e-list-multi-line .e-list-item-header {
    color: #ffffff;
}

body.material-dark .e-list-item .e-list-avatar.e-list-multi-line .e-list-content,
body.bootstrap-dark .e-list-item .e-list-avatar.e-list-multi-line .e-list-content {
    color: rgba(255,255,255,0.7);
}

#groupedList.e-listview .e-list-group-item {
    color: #837c7c;
    padding: 0;
    height: inherit;
}

#groupedList.e-listview .icon {
    background: transparent;
    font-family: 'e-icons';
    color: #FF4081;
}

#groupedList.e-listview .wifi:before {
    content: "\e700";
    font-size: 25px;
}

#groupedList.e-listview .bluetooth:before {
    content: "\e702";
    font-size: 25px;
}

#groupedList.e-listview .sim:before {
    content: "\e705";
    font-size: 25px;
}

#groupedList.e-listview .display:before {
    content: "\e704";
    font-size: 25px;
}

#groupedList.e-listview .sound:before {
    content: "\e703";
    font-size: 25px;
}

#groupedList.e-listview .battery:before {
    content: "\e711";
    font-size: 25px;
}

#groupedList.e-listview .user:before {
    content: "\e707";
    font-size: 25px;
}

#groupedList.e-listview .location:before {
    content: "\e708";
    font-size: 25px;
}

#groupedList.e-listview .security:before {
    content: "\e709";
    font-size: 25px;
}

#groupedList.e-listview .language:before {
    content: "\e710";
    font-size: 25px;
}

#groupedList.e-listview .e-hover {
    transition: 0.5s;
}

.bootstrap #groupedList.e-listview .e-list-header .e-text {
    line-height: 18px;
}

.highcontrast #groupedList.e-listview .e-list-header .e-text {
    line-height: 26px;
}

.highcontrast #groupedList.e-listview .e-list-header {
    color: #ffd939;
    background-color: #333333;
}

.fabric #groupedList.e-listview .icon {
    color: #0078D7;
}

.bootstrap #groupedList.e-listview .icon {
    color: #1073B1;
}

.highcontrast #groupedList.e-listview .icon {
    color: #fff;
}

.tailwind #groupedList.e-listview .icon {
    color: #4f46e5;
}

.highcontrast #groupedList.e-listview .e-active .icon {
    color: black;
}

.material #groupedList.e-list-template .e-active .e-list-item-header,
.material #groupedList.e-list-template .e-active .e-list-content {
    color: #FF4081;
}

.fabric #groupedList.e-list-template .e-active .e-list-item-header,
.fabric #groupedList.e-list-template .e-active .e-list-content {
    color: black;
}

.bootstrap #groupedList.e-list-template .e-active .e-list-item-header,
.bootstrap #groupedList.e-list-template .e-active .e-list-content {
    color: #1073B1;
}

.highcontrast #groupedList.e-list-template .e-active .e-list-item-header,
.highcontrast #groupedList.e-list-template .e-active .e-list-content {
    color: #000;
}

.bootstrap4 #groupedList.e-listview .e-active .icon {
    color: #fff;
}

.tailwind #groupedList.e-list-template .e-active .e-list-item-header,
.tailwind #groupedList.e-list-template .e-active .e-list-content {
    color: #4f46e5;
}

 Layout Design 

.sample_container.badge-notification {
    max-width: 260px;
    margin: auto;
}

    .sample_container.badge-notification .badge-block {
        position: relative;
        display: inline-block;
        margin: 10px 13px 10px 10px;
        cursor: pointer;
    }

    .sample_container.badge-notification .layout {
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
        padding: 25px 10px 10px 10px;
        background: white;
        border-radius: 25px;
    }

.highcontrast .sample_container.badge-notification .layout {
    box-shadow: 0 2px 15px 0 rgb(92, 91, 91);
    background: #000;
}

body.fabric-dark .margin.fontSize,
body.tailwind-dark .margin.fontSize,
body.bootstrap-dark .margin.fontSize {
    color: inherit;
}

body.material-dark .sample_container.badge-notification .layout,
body.tailwind-dark .sample_container.badge-notification .layout,
body.bootstrap-dark .sample_container.badge-notification .layout,
body.fabric-dark .sample_container.badge-notification .layout,
body.highcontrast .sample_container.badge-notification .layout,
body.bootstrap5-dark .sample_container.badge-notification .layout,
body.fluent-dark .sample_container.badge-notification .layout {
    background: inherit;
    border: 1px solid white;
}

body.material-dark .margin.fontSize {
    color: #ffffff;
}

.margin-notify {
    margin: -10px 0;
}

.innerMargin {
    margin: 15px;
    padding: 15px 95px 15px 15px;
    display: inline-block;
}

.fontSize {
    font-size: 16px;
}

.skype + .e-badge.e-badge-dot {
    transform: translateX(-100%) translateY(-70%);
}

.facebook + .e-badge.e-badge-dot {
    transform: translateX(-100%) translateY(+30%);
}


.contact.svg_icons + .e-badge-dot,
.pinterest.svg_icons + .e-badge-dot {
    left: 90%;
    bottom: 7px;
    top: auto
}

.svg_icons {
    width: 32px;
    height: 32px;
    display: inline-block;
}