@import url('https://use.fontawesome.com/releases/v6.5.1/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

* {
	font-family: 'Roboto Condensed', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

#app {
	font-family: 'Roboto Condensed', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: white;
	background-color: transparent;
}

.chat-window {
	position: absolute;
	top: 2.5%;
	left: 40px;
	width: 38%;
	height: 530px;
	max-width: 400px;
	background-color: rgba(255, 255, 255, 0);
	-webkit-animation-duration: 2s;
}

.chat-messages {
	max-height: 140%;
	font-size: 1.4rem;
	overflow-x: hidden;
	overflow-y: hidden;
	display: block;
}

.chat-input {
	font-size: 1.65vh;
	position: absolute;
	top: 33.8%;
	left: 40px;
	width: 38%;
	max-width: 400px;
	box-sizing: border-box;
}

.prefix {
	position: absolute;
	margin-top: 4.2%;
	margin-left: 2%;
	left: 0.208%;
	color: #ffffff;
}

input {
	font-size: 1.7vh;
	display: block;
	box-sizing: border-box;
	padding-top: 1.6%;
	padding-left: 10%;
	padding-bottom: 1.4%;
	padding-right: 1.6%;
	color: rgb(255, 255, 255);
	background-color: #000000c9;
	width: 100%;
	border: none;
	height: 50px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	resize: none;
	border-radius: 10px;
	box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 1);
}

input:focus {
	outline: none;
}

.msg {
	margin-bottom: 5px;
}

.suggestions {
	margin-top: 5px;
	list-style-type: none;
	padding: 5px;
	padding-left: 27px;
	font-size: 0.9rem;
	box-sizing: border-box;
	color: white;
	background-color: #010b13c9;
	width: 100%;
	border-radius: 10px;
	border: none;
	box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 1);
}

.help {
	margin-top: -10px;
	color: #b0bbbd;
}

.suggestion {
	margin-bottom: 0.5px;
}

.chat-message {
	display: block !important;
	padding: 0.6vw;
	padding-top: 0.6vw;
	padding-bottom: 0.7vw;
	/* border-radius: 15px; */
	width: 100%;
	overflow: hidden;
	word-break: break-word;
	box-sizing: border-box;
	background-color: black;
	border-left: 7px solid #dc143c;
	box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 1);
}

.chat-messagedefault {
	display: block !important;
	padding: 0.6vw;
	padding-top: 0.6vw;
	padding-bottom: 0.7vw;
	/* border-radius: 15px; */
	width: 100%;
	overflow: hidden;
	word-break: break-word;
	box-sizing: border-box;
	background-color: black;
	border-left: 7px solid #53bddd;
	box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 1);
}

/* START STAFF */

.staff {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(19, 138, 70, 0.9) 100%);
}

.fa-shield-alt {
	color: rgba(42, 42, 42, 0.9);
	background-color: #1ebc62;
	padding: 5px;
	border-radius: 5px;
}

/* END STAFF */

/* START ONLY STAFF */

.staffonly {
	background: rgba(42, 42, 42, 0.9);
}

.fa-eye-slash {
	color: rgba(42, 42, 42, 0.9);
	background-color: #1ebc62;
	padding: 5px;
	border-radius: 5px;
}

/* END ONLY STAFF */

/* START TWITCH */

.twitch {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(96, 67, 139, 0.9) 100%);
}

.fa-twitch {
	color: rgba(42, 42, 42, 0.9);
	background-color: #9c70de;
	padding: 5px;
	border-radius: 5px;
}

/* END TWITCH */

/* START YOUTUBE */

.youtube {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(101, 0, 0, 0.9) 100%);
}

.fa-youtube {
	color: rgba(42, 42, 42, 0.9);
	background-color: #ff0000;
	padding: 5px;
	border-radius: 5px;
}

/* END YOUTUBE */

/* START TWITTER */

.twitter {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(25, 107, 143, 0.9) 100%);
}

.fa-twitter {
	color: rgba(42, 42, 42, 0.9);
	background-color: #2aa9e0;
	padding: 5px;
	border-radius: 5px;
}

/* END TWITTER */

/* START SYSTEM */

.system {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(134, 84, 23, 0.9) 100%);
}

.fa-cog {
	color: rgba(42, 42, 42, 0.9);
	background-color: #df7b00;
	padding: 5px;
	border-radius: 5px;
}

/* END SYSTEM */

/* START DEFAULT */

.defaultmessage {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(23, 126, 134, 0.902) 100%);
}

.fa-message {
	color: rgba(255, 255, 255, 1);
	background-color: #5ad8ffad;
	padding: 5px;
	border-radius: 5px;
}

/* END DEFAULT */

/* START ADVERTISEMENT */

.advertisement {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(84, 150, 38, 0.9) 100%);
}

.fa-ad {
	color: rgba(42, 42, 42, 0.9);
	background-color: #81db44;
	padding: 5px;
	border-radius: 5px;
}

/* END ADVERTISEMENT */

/* START POLICE */

.police {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(40, 55, 116, 0.9) 100%);
}

.fa-bullhorn {
	color: rgba(42, 42, 42, 0.9);
	background-color: #4a6cfd;
	padding: 5px;
	border-radius: 5px;
}

/* END POLICE */

/* START AMBULANCE */

.ambulance {
	background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(152, 113, 22, 0.9) 100%);
}

.fa-ambulance {
	color: rgba(42, 42, 42, 0.9);
	background-color: #e3a71b;
	padding: 5px;
	border-radius: 5px;
}

/* END AMBULANCE */

/* START OOC */
/*
.ooc {
	background: linear-gradient(90deg, #2a2a2a8e 0%, #0088e2e6 100%);
}
*/

.ooc {
	background: black;
}

.fa-door-open {
	color: #2a2a2ae6;
	background-color: #7d7d7d;
	padding: 5px;
	border-radius: 5px;
}

/* END OOC */