/*--------------
   Interface
----------------*/

.desktop #notice, 
.tablet #notice,
.desktop #alert, 
.tablet #alert {
	max-width: 500px;
	margin: 0 auto;
	left: calc(50% - 250px);
}
#alert.visible { opacity: 1; z-index: 500001; }
#notice.visible { opacity: 1; z-index: 500001; }

#notice {
		position: fixed;
		width: calc(100vw - 30px);
		margin-left: calc(-50vw + 15px);
		height: 60px;
		left: 50%;
		bottom: 40px;
		background-color: #39bf89;
		border-radius: 5px;
		cursor: pointer;
		opacity: 0;
		z-index: 300001;
		display: flex;
		justify-content: center;
		padding: 35px !important;
}
#notice.error { background-color: rgba(228, 81, 89, .75) !important; }
#notice.success { background-color: rgba(51, 175, 122, .95) }
#notice.warning { background-color: #eacc79; }
#notice.warning .content { color: rgba(0,0,0,.9); text-shadow: none !important; }

#notice .content {
	padding: 10px;
    font-size: 18px;
    align-self: center;
    color: rgba(255,255,255,.95);
    text-shadow: 1px 1px 1px rgba(0,0,0,.45);
    text-align: center;
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}