.notification-popup-window {
    animation: fadeInAndScale .2s;
    background-color: hsla(0, 0%, 8%, .8);
    z-index: 99999;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    left: 0px;
    top: 0px;
}

.popup-nav-tab{
    text-align: left;
    margin: 8px 8px 8px 0px;
}
.popup-nav-tab:focus{
    outline: 4px solid #bbbbff;
}

.notification-popup-body{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.notification-popup-panel {
    position: relative;
    z-index: 100000;
    background-color: #eef1f2;
    max-width: 800px;
    border-radius: 0.5rem;
    /* padding: 20px 16px; */
    margin: 32px auto 32px auto;
}

.notification-popup-window .fade-in {
    animation: fadeAndSlide 0.25s;
} 

.notification-popup-panel:not(.fade-in){
	animation: fadeAndSlideOut 0.25s;
}

.notification-popup-header{
    padding: 16px 8px 8px 16px;
    border-bottom: 1px solid #aaaaaa;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.notification-popup-content h1.notification-popup-title{
    font-family: var(--heading-font);
    font-size: 20px;
    font-weight: normal;
    margin-top: 6px;
    margin-bottom: 0px;
}

.notification-popup-body{
    padding: 16px;
}

.notification-popup-footer{
    margin-top: 8px;
}

.notification-popup-close{
    border-radius: 8px;
    background-color: rgba(0,0,0,0);
    border: none;
}

.notification-popup-close:focus{
    outline: 4px solid #bbbbff;
}

.notification-popup-close svg:hover{
    fill: #555555;
}

.popup-nav {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-direction: column;
    margin-right: 16px;
}

.popup-nav button{
    border: none;
}

.popup-nav button.active {
    border-radius: 0.5rem;
    padding: 8px;
    border: 1px solid #2061b6;
    background-color: #03469f;
    color: white;
}

.notification-popup-content-panel {
    max-height: 400px;
    overflow-y: scroll;
}

.notification-popup-content-panel h3{
    color: #2a4b99;
}

/* .notification-popup-content-pane{ 
    visibility: hidden;
    display: none;
    opacity: 0;
    transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
} */

.notification-popup-content-panel .notification-popup-content-pane:not(.show){
    display: none;
} 

.notification-popup-content-panel .notification-popup-content-pane.show{ 
    display: block;
    opacity: 1;
 }

.notification-popup-content-panel .notification-popup-content-pane:not(.fade){
    opacity: 0;
}

.fade {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration: 0.2s;
}

.cookie-notification-panel:not(.fade-in){
    opacity: 0;
	animation: fadeAndSlideOut 0.25s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration: 0.2s;
}

/* .fade {
    transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
    .fade {
        transition: none;
    }
}
.fade:not(.show) {
    opacity: 0;
} */


@keyframes fadeInOpacity {
	0% {
		opacity: 0;
        animation-timing-function:ease-in-out
	}
	100% {
		opacity: 1;
        animation-timing-function:ease-in-out
	}
}

@keyframes fadeAndSlide {
    0% {
        transform: translate(0px, -40px);
        opacity: 0;
        animation-timing-function:ease-in-out
    }
    100% {
        transform: translate(0px, 0px);
        opacity: 1;
        animation-timing-function:ease-in-out
    }
}

@keyframes fadeAndSlideOut {
    0% {
        transform: translate(0px, 0px);
        opacity: 1;
        animation-timing-function:ease-in-out
    }
    100% {
        transform: translate(0px, -40px);
        opacity: 0;
        animation-timing-function:ease-in-out
    }
}