#notification-container{
	position: fixed;
	top:20px;
	left:50%;
	/* width:0; */
	display:flex;
	flex-direction:column;
	gap:.5rem;
	max-width:100%;

}

.notification-box{
	border-radius: .5rem;
	/* background-color: #303030; */
	background-color: #ffffff;
	color:black;
	overflow: hidden;
	border-left: .5rem solid;
	width:600px;
	max-width:100%;
	height:200px;
	display:flex;
	flex-direction:column;
	transform: translate(-50%,0%);
	font-size: 2rem;
	border-color:black;
	border:5px solid black !important;
}

.notification-header{
	display:flex;
	flex-direction: row;
	padding-left:.5rem;
}

.notification-close{
	width: 2rem;
	height: 2rem;
	flex: 0 0 2rem;
	text-align: center;
	font-size: 2rem;
	display:flex;
	justify-content: center;
	align-items: center;
	/* background-color: #ff000080; */
	user-select: none;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;
}

.notification-close:hover{
	font-weight: bold;
	/* background-color: #ff0000b0; */
}
.notification-close:hover:active{
	font-weight:900;
	/* background-color: #ff0000f0; */
}

.notification-title{
	font-weight: bold;
	flex:1 1 0;
	align-content: center;
	overflow-wrap:break-word;
}

.notification-content{
	overflow: auto;
	flex: 1 1 0;
	padding: 0 .5rem .5rem .5rem;
}

.notification-bar{
	height:0;
	border-bottom:.5rem solid;
	flex:0 0 0;
}

.notification-type-success{
	border-color: green;
}

.notification-type-default{
	border-color: deepskyblue;
}

.notification-animate{
	animation-name:timer-bar;
	animation-duration: 150s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

.notification-box:hover > .notification-animate{
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	-o-animation-play-state:paused;
	animation-play-state:paused;
	/* cursor: pointer; */
  }

@keyframes timer-bar{
	from {width:100%;}
	to {width:0%}
}