.notifications-topbar .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 1280px;
margin: auto;
gap: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.notifications-topbar .container::before,
.notifications-topbar .container::after {
display: none;
}
.notifications-topbar .container .topbar-cta {
background-color: #292e35;
color: #ffffff;
padding: 3px 20px;
border-radius: 50px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-width: 350px;
white-space: normal;
border: 2px solid #292e35;
transition: all 0.3s;
}
.notifications-topbar .container .topbar-cta:hover {
background-color: #ffffff;
color: #292e35;
border: 2px solid #292e35;
}
.notifications-topbar .container span {
color: #292e35;
word-break: break-word !important;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.notifications-flyin {
position: fixed;
top: 30%;
right: 0;
background: #ffffff;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
border: 1px solid #f8f8f4;
padding: 5px;
z-index: 9999;
transform: translateX(100%); transition: "transform 0.4s ease-out";
border-radius: 100px 0 0 100px;
display: flex;
align-items: center;
font-size: 14px;
line-height: 1.2em;
color: #292e35;
}
.notifications-flyin .fly-in-img {
display: flex;
padding: 2px;
z-index: 10000;
align-items: center;
justify-content: center;
border-radius: 80px;
margin-right: 10px;
position: relative;
}
.notifications-flyin .fly-in-img img {
max-height: 80px;
border-radius: 80px;
}
.notifications-flyin .fly-in-close {
position: absolute;
top: 0;
right: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
line-height: 100%;
font-weight: bold;
color: #292e35;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: 0.4s ease-in-out;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.notifications-flyin:hover .fly-in-close {
visibility: visible;
opacity: 1;
top: -20px;
}
.notifications-flyin span {
max-width: 220px;
padding: 10px 5px;
}
@media screen and (max-width: 1199px) {
.notifications-topbar .container {
max-width: 90%;
}
}
@media only screen and (max-width: 768px) {
.notifications-topbar .container span {
line-height: 1.1;
}
.notifications-flyin .fly-in-close {
top: -20px;
visibility: visible;
opacity: 1;
}
}
@media only screen and (max-width: 320px) {
.notifications-flyin {
display: none;
}
}