@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

[data-theme="dark"] .container2 {
    background-color: #0D0F21;
}

.container2 {
    margin: auto;
    width: 100%;
    /* height: 300px; */
    background: #f2f3f6;
    padding: 1em;
    border: 1px solid #d4d7e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 5px 10px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.input-query {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #d4d7e1;
    border-radius: 3px;
    font-size: 1em;
}
.input-query:focus ~ .counter {
    opacity: 0.1;
    transition: opacity 1s ease-in;
}
.list-wrap {
    margin-top: 0.4em;
    overflow-y: auto;
    overflow-x: hidden;
}
.list {
    max-height: 220px;
}
.list-item {
    font-size: 0.9em;
    padding: 0.5em 0.8em;
    border-bottom: 1px solid #d4d7e1;
    border-top: 1px solid white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    max-width: 100%;
}
.list-item:first-child {
    border-top: none;
}
.list-item:last-child {
    border-bottom: none;
}
.list-item-link {
    color: #444;
    text-decoration: none;
}
.item-list-subtext {
    font-size: 85%;
    color: grey;
}
.item-list-subtext:before {
    content: ' (';
}
.item-list-subtext:after {
    content: ')';
}
.list-item--disable {
    text-align: center;
    border-bottom: none;
    animation: shake 0.6s;
    color: #9da1b1;
}
.counter {
    position: absolute;
    bottom: -15px;
    right: 10px;
    z-index: 0;
    font-size: 3.5em;
    color: black;
    transform: translateY(0);
    opacity: 0;
}

/*  */

.noti-info {
    max-width: 100%;
    overflow: hidden;
}

.noti-info h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    max-width: 100%;
}

.noti-icon b {
    line-height: 1.8;
}