@keyframes fade-in-browser-support {
    from {transform: translateY(-40px); opacity: 0;}
    to {transform: translateY(0px); opacity: 1;}
}


.browserSupportContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 8px;
    z-index: 1000000;
}

.browserSupportNotification {
    animation: fade-in-browser-support 1s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-delay: 1s;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05), 0px 10px 16px 4px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 12px 24px;
}

.browserSupportNotification h1, .browserSupportNotification p, .browserSupportNotification a {
    font-size: 13px;
    font-family: Arial,Verdana,sans-serif;
    line-height: 15px;
    font-style: normal;
    padding: 0;
    margin: 0;
}

.browserSupportNotification img {
    display: block;
    height: 16px;
    margin-right: 8px;
}

.browserSupportNotification h1 {
    font-weight: 700;
    margin-right: 8px;
}

.browserSupportNotification a {
    opacity: .5;
    margin-left: 16px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
}

.browserSupportNotification a:hover {
    opacity: 1;
}

.browserSupportHeadingContainer {
    display: flex;
}

@media (max-width: 768px) {
    .browserSupportNotification {
      flex-direction: column;
    }

    .browserSupportHeadingContainer, .browserSupportNotification p {
        margin-bottom: 12px;
    }

    .browserSupportNotification a {
        margin-left: 0;
    }
}