.notifications {
   width: calc(100% - 10px);
   max-width: 335px;
   height: auto;
   display: flex;
   flex-direction: column;
   gap: 15px;
   position: fixed;
   z-index: 4;
   top: 10px;
   right: 10px;
}

.notifications .item {
   max-width: 100%;
   border: 1px solid #fff;
   background: var(--red);
   border-radius: 8px;
   width: 100%;
   height: auto;
   padding: 10px;
   padding-right: 25px;
   position: relative;
}

.notifications .item .bClose {
   position: absolute;
   top: -8px;
   right: -8px;
   width: 20px;
   height: 20px;
   border-radius: 255px;
   background: #fff;
   color: var(--red);
   font-size: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.notifications .item .content {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   margin-bottom: 10px;
}

.notifications .item .content .icon {
   color: #fff;
   font-size: 40px;
}

.notifications .item .content .text {
   font-weight: 400;
   font-size: 15px;
   line-height: 140%;
   color: #fff;
}

.notifications .item .buttons {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
}

.notifications .item .buttons button {
   width: auto;
   height: auto;
   padding: 5px 15px;
   border: 1px solid #fff;
   background: none;
   color: #fff;
   font-size: 15px;
   border-radius: 10px;
}

.notifications .item .buttons button:hover {
   background: #fff;
   color: var(--red);
}