* {
	font-family: 'Montserrat';
	color: white;
}

html,
body {
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

.container {
	position: relative;
	height: 93vh;
	width: 95.6vw;
}

@media (max-width: 1400px) {
	.notify-block {
			zoom: 0.7;
	}
}

.notify-block {
	position: absolute;
	right: 0;
	top: 40px;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 15px;
}

.small-notify {
	border-radius: 8px;
	border: 1px solid rgba(238, 238, 238, 0.5);
	background: rgba(0, 0, 0, 0.30);
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
	width: auto;
	max-width: 328px;
	height: auto;
	position: relative;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	animation: slideIn 0.5s forwards;
}

.big-notify {
	border-radius: 8px;
	border: 1px solid rgba(238, 238, 238, 0.5);
	background: rgba(0, 0, 0, 0.30);
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
	width: auto;
	min-width: 100px;
	max-width: 328px;
	height: auto;
	position: relative;
	display: flex;
	align-items: center;
	padding: 5px 5px;
	animation: slideIn 0.5s forwards;
}

.big-notify hr {
	margin: 0;
	margin-left: 5px;
	margin-right: 6px;
}

.notify-title-block {
	display: flex;
	align-items: center;
}

.notify-title-block img {
	margin-left: 5px;
}

.hide {
	animation: slideOut 0.5s forwards;
}

.notify-shadow-default {
	background: linear-gradient(to right, #00000000, #F84964);
}

.notify-shadow-verde {
	background: linear-gradient(to right, #00000000, #4DFF6D);
}

.notify-shadow-vermelho {
	background: linear-gradient(to right, #00000000, #F84949);
}

.notify-shadow-azul {
	background: linear-gradient(to right, #00000000, #49F8F8);
}

.notify-shadow-amarelo {
	background: linear-gradient(to right, #00000000, #FFDC23);
}

.notify-shadow-roxo {
	background: linear-gradient(to right, #00000000, #9C79FF);
}

.notify-shadow-fome {
	background: linear-gradient(to right, #00000000, #F88849);
}
	
.notify-shadow-sede {
	background: linear-gradient(to right, #00000000, #46A6FF);
}
	
.notify-shadow-policia {
	background: linear-gradient(to right, #00000000, #5082FF);
}

.notify-shadow-hospital {
	background: linear-gradient(to right, #00000000, #FF817C);
}

.notify-shadow-mecanico {
	background: linear-gradient(to right, #00000000, #FFA323);
}

.notify-shadow-ilegal {
	background: linear-gradient(to right, #00000000, #FF4423);
}

.border-default {
	border: 1px solid rgba(238, 238, 238, 0.5);
}

.border-verde {
	border: 1px solid rgba(75, 240, 149, 0.5);
}

.border-vermelho {
	border: 1px solid rgba(214, 46, 46, 0.5);
}

.border-azul {
	border: 1px solid rgba(61, 230, 201, 0.5);
}

.border-amarelo {
	border: 1px solid rgba(238, 238, 238, 0.5);
}

.border-roxo {
	border: 1px solid rgba(110, 89, 238, 0.5);
}

.border-fome {
	border: 1px solid rgba(255, 158, 49, 0.5);
}
	
.border-sede {
	border: 1px solid rgba(66, 160, 242, 0.5);
}
	
.border-policia {
	border: 1px solid rgba(64, 99, 188, 0.5);
}

.border-hospital {
	border: 1px solid rgba(238, 238, 238, 0.5);
}

.border-mecanico {
	border: 1px solid rgba(255, 144, 47, 0.5);
}

.border-ilegal {
	border: 1px solid rgba(219, 59, 40, 0.5);
}

.notify-lateral-default {
	background: linear-gradient(to bottom, #FF5050, #E2339C);
	box-shadow: 0px 0px 20px 5px rgba(253, 52, 88, 0.5);
}

.notify-lateral-verde {
	background: linear-gradient(to bottom, #64FFC7, #33E264);
	box-shadow: 0px 0px 20px 5px rgba(77, 255, 109, 0.5);
}

.notify-lateral-vermelho {
	background: linear-gradient(to bottom, #FF6464, #D32B2B);
	box-shadow: 0px 0px 20px 5px rgba(253, 52, 52, 0.5);
}

.notify-lateral-azul {
	background: linear-gradient(to bottom, #50EDFF, #33E2AB);
	box-shadow: 0px 0px 20px 5px rgba(73, 248, 248, 0.5);
}

.notify-lateral-amarelo {
	background: linear-gradient(to bottom, #FFF950, #E29F33);
	box-shadow: 0px 0px 20px 5px rgba(255, 220, 35, 0.5);
}

.notify-lateral-roxo {
	background: linear-gradient(to bottom, #5866E1, #7C51F6);
	box-shadow: 0px 0px 20px 5px rgba(130, 71, 255, 0.5);
}

.notify-lateral-fome {
	background: linear-gradient(to bottom, #FF9534, #FFDC23);
	box-shadow: 0px 0px 20px 5px rgba(253, 52, 88, 0.5);
}
	
.notify-lateral-sede {
	background: linear-gradient(to bottom, #33DCE2, #506DFF);
	box-shadow: 0px 0px 20px 5px rgba(69, 166, 255, 0.5);
}
	
.notify-lateral-policia {
	background: linear-gradient(to bottom, #6691FF, #203C83);
	box-shadow: 0px 0px 20px 5px rgba(80, 130, 255, 0.5);
}

.notify-lateral-hospital {
	background: linear-gradient(to bottom, #FFE7F0, #E23336);
	box-shadow: 0px 0px 20px 5px rgba(253, 52, 52, 0.5);
}

.notify-lateral-mecanico {
	background: linear-gradient(to bottom, #FF8934, #FFA323);
	box-shadow: 0px 0px 20px 5px rgba(255, 163, 35, 0.5)
}

.notify-lateral-ilegal {
	background: linear-gradient(to bottom, #A01515, #FF5233);
	box-shadow: 0px 0px 20px 5px rgba(255, 68, 35, 0.5)
}

.notify-shadow-inside {
	position: absolute;
	z-index: -1;
	right: 0;
	border-radius: 8px;
	height: 100%;
	opacity: 0.3;
	width: 70px;
}

.notify-lateral-bar {
	position: absolute;
	border-radius: 8px;
	right: -3px;
	height: 70%;
	width: 5px;
}

.notify-text {
	padding: 6px;
	color: #EEE;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
	font-family: Montserrat;
	font-size: 14px;
	font-weight: 500;
}

@keyframes slideIn {
	from {
			transform: translateX(100%);
			opacity: 0;
	}
	to {
			transform: translateX(0);
			opacity: 1;
	}
}

@keyframes slideOut {
	from {
			transform: translateX(0);
			opacity: 1;
	}
	to {
			transform: translateX(100%);
			opacity: 0;
	}
}