.button-notify-user{
    position: absolute;
    z-index: 10;
    top: 5px;
    left: 10px;
}

.container-no-notifications{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 40vh;
    gap: 2vw;
    width: 100%;
    font-size: 5vw;
    color: var(--main-color);
}


.button-notify-user.active{
    animation:1.5s animation-notify linear infinite;
    color: #9f0404;
}

@keyframes animation-notify{
    0%{
        transform:rotate(0deg);
        color: #9f0404;
    }
    15%{
        transform:rotate(15deg);
    }
    35%{
        transform:rotate(-15deg);
        color: #f35050;
    }
    55%{
        transform:rotate(15deg);
    }
    70%{
        transform:rotate(0deg);
        color: #9f0404;
    }
}

body.v2 .button-notify-user{
    right:unset;
}

.button-notify-user > i{
    font-size: 30pt;
}

.content-notify-driver{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#fff;
    z-index:500;
    display:flex;
    flex-direction:column;
    transition:300ms all;
    transform:translateY(150%);
}

.content-notify-driver.active{
    transform:translateY(0%);
}

.content-notify-driver > nav{
    background-color:#fff;
    color:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    border-bottom: 1px solid #b0b0b0;
    padding: 20px;
}

.content-notify-driver > nav > i{
    font-size:25pt;
    margin: 0 5px;
    padding: 0;
    position: absolute;
    left: 0;
}

.content-notify-driver > nav > p{
    font-size:16pt;
    font-weight:400;
    font-family:sans-serif;

}

.content-notify-driver > div{
    flex:1;
    background-color: #ebebeb;
    overflow-y: auto;
}

.content-notify-driver > div > ul{
    list-style:none;
}

.content-notify-driver > div > ul > li{
    background-color: #ffffff;
    display:flex;
    align-items:center;
    padding:15px;
    border-bottom: 1px solid #ccc;
}


.content-notify-driver > div > ul > li.active{
    opacity: 0.6;
}

.content-notify-driver > div > ul > li > div{
    flex:1;
}

.content-notify-driver > div > ul > li > i{
    font-size:30px;
}


.content-notify-driver > div > ul > li > div > p{
    font-weight: 600;
    font-size: 14pt;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.content-notify-driver > div > ul > li > div > small{
    font-size:11pt;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}
