:root {
	--system-accent-color: #333;
}
body {
	background: rgb(33,33,33);
}
#app {
	background-color: rgb(33,33,33);
	background: url('images/textured/noise.png'), url('images/textured/noise.png'), linear-gradient(to bottom, rgba(40,40,40,1) 0%, rgba(10,10,10,1) 100%);
}
.background {
	background: url('images/bg.png'), rgb(26,50,87);
}
#setblock .background, #crblock .background {
	background: url('images/bgs.png'), rgb(103,108,224);
}
hr {
	background: url('images/textured/noise.png'), linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
}
input:focus, textarea:focus, select:focus, button:focus {
	box-shadow: 0 0 0.3125em 0.0625em rgba(0,128,255,1), inset 0 0 0.3125em 0.0625em rgba(0,128,255,1), inset 0 0 0 0.0625em rgba(255,255,255,1);
	border-color: white;
}
select:focus {
	background: rgba(50,50,50,1) !important;
	box-shadow: 0 0 0.3125em 0.0625em rgba(0,128,255,1), inset 0 0 0.3125em 0.0625em rgba(0,128,255,1), inset 0 0 0 0.0625em rgba(255,255,255,1), inset -1.5em 0 0 0 rgba(0,0,0,0.75);
}
::-webkit-scrollbar-thumb {
	background: rgba(250,250,250,0.6);
}
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0,149,255,1);
}
.loading {
	border-left: rgba(0,128,255,1) 0.2em solid;
	border-right: rgba(0,128,255,1) 0.2em solid;
}
/*Electron Titlebar*/
.titlebar {
	background: url('images/textured/noise.png');
	color: white;
}
#drag {
	color: white;
}
.title {
	text-shadow: 0 0.125em 0.3125em #000000;
}
#close:hover {
	background-color: rgba(255,0,0,0.5);
}
#close:active {
	background-color: rgba(150,0,0,0.5);
}
#max:hover, #min:hover{
	background-color: rgba(255,255,255,0.2);
}
#max:active, #min:active {
	background-color: rgba(255,255,255,0.1);
}
/*main chat*/
#messages-container {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.3s ease, transform 0.3s ease;
	display: none;
}
#messagebox {
	background: url('images/textured/noise.png'), rgba(50,50,50,0.6);
	color: white;
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
#msgsend, #uploadbtn, #emojibtn, #gifbtn {
	color: rgba(255,255,255,0.5);
}
#msgsend:hover, #uploadbtn:hover, #emojibtn:hover, #gifbtn:hover {
	color: rgba(255,255,255,1);
}
#msgsend:active, #uploadbtn:active, #emojibtn:active, #gifbtn:active {
	color: rgba(255,255,255,0.8);
}
#messages {
	background: url('images/textured/noise.png'), rgba(50,50,50,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
	text-shadow: 0 0.125em 0.3125em #000000;
	color: white;
}
.uploadImage {
	background-color: #0008;
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
#msgusername {
    background: linear-gradient(to right, #fff5 0%, #fff0 100%);
}
.msgpfp {
    background: #3338;
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75), 0 -0.0625em 0 0 rgba(255,255,255,0.5);
}
#msgshadow {
	background: #0008;
	box-shadow: inset 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75), 0 0.0625em 0 0 rgba(255,255,255,0.5), 0 -0.0625em 0 0 rgba(0,0,0,0.6);
}
/*Sidebar*/
.sidebar, .sidebar2 {
	background: url('images/textured/noise.png'); 
	color: white;
}
#sidebarbtn, #voice-callbtn, #video-callbtn {
	background-color: rgba(0,0,0,0);
	border-left: rgba(0,0,0,0) 0em solid;
	text-shadow: 0 0.125em 0.3125em #000000;
	box-shadow: inset 0.1875em 0 0 0 rgba(0,149,255,0), inset 0 0 2.4375em -30.1875em rgba(0,149,255,0);
}
.active {
	background-color: rgba(0,149,255,0.25) !important;
	border-left: rgba(0,149,255,1) 0.3em solid !important;
}

#menubtn, #gc_current {
	text-shadow: 0 0.125em 0.3125em #000000;
	box-shadow: inset 0.1875em 0 0 0 rgba(0,149,255,0), inset 0 0 2.4375em -30.1875em rgba(0,149,255,0);
}
#separate {
	border-top: 0.0625em rgba(255,255,255,0.3) solid;
	border-bottom: 0.0625em rgba(255,255,255,0.3) solid;
}
#menubtn:hover, #sidebarbtn:hover, ol li:hover, #voice-callbtn:hover, #video-callbtn:hover {
	background: linear-gradient(to right, rgba(0,149,255,0.25) 0%, rgba(0,149,255,0) 100%);
}
#menubtn:active, #sidebarbtn:active, #gc_current:hover, #voice-callbtn:active, #video-callbtn:active {
	background: linear-gradient(to right, rgba(0,149,255,0.15) 0%, rgba(0,149,255,0) 100%);
}
#appstatus-bg {
    background: #000;
    border-top: #f22 0.0625em solid;
    box-shadow: 0 -1em 5em #8228, inset 0 0.1em 1em #8223;
}
/*Sidebar 2*/
.sidebar2 {
	background: url('images/textured/noise.png'), rgba(0,0,0,0.3);
	box-shadow: inset 0.3125em 0 0.3125em 0 rgba(0,0,0,0.75);
}
.red:hover {
	background: url('images/textured/noise.png'), linear-gradient(to right, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 100%) !important;
}
.red:active {
	background: url('images/textured/noise.png'), linear-gradient(to right, rgba(255,0,0,0.25) 0%, rgba(255,0,0,0) 100%) !important;
}
/*Settings*/
.textbox {
	background-color: rgba(50,50,50,0.6);
	color: white;
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75), inset 0 0 0 0.0625em rgba(255,255,255,0.2);
}
.button, select {
	background-color: rgba(50,50,50,0.6);
	box-shadow: inset 0 0 0 0.0625em #fff2, 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
	color: white;
}
.button:hover, select:hover, option:hover {
	background-color: rgba(0,149,255,0.6);
}
.button:active, select:active {
	background-color: rgba(0,114,200,0.6);
}
select {
	box-shadow: inset -1.5em 0 0 0 rgba(0,0,0,0.75), 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
option:before {
	background-color: rgba(50,50,50,0.6) !important;
	color: white;
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
.blockout {
	color: rgba(0,0,0,0.5);
}
#settings {
	background-color: rgba(0,0,0,0.3);
	border-right: rgba(50,50,50,0.5) 0.0625em solid;
	border-bottom: rgba(50,50,50,0.5) 0.0625em solid;
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
.tabcontent, .tabcontent2 {
	background-color: rgba(50,50,50,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
	text-shadow: 0 0.125em 0.3125em #000000;
	color: white;
}
.slider {
	background-color: rgba(250,250,250,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
.slider::-webkit-slider-thumb {
	background-color: rgba(0,149,255,1);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
.user-preview {
	background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%), rgba(50,50,50,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75), inset 0 0 0 0.0625em rgba(255,255,255,0);
}
.user-preview:hover {
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75), inset 0 0 0.5em 0 rgba(255,255,255,0.6);
}
#big-pfp {
	background-color: rgba(25,25,25,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
#status-bg {
	background-color: rgba(50,255,50,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
	text-shadow: 0 0.125em 0.3125em #000000;
	color: white;
}
/*User Panel*/
.userpanel {
	background: black;
	text-shadow: 0 0.125em 0.3125em #000000;
	border-top: 0.0625em rgba(255,255,255,0.3) solid;
	box-shadow: inset 0.1875em 0 0 0 rgba(0,149,255,1), inset 0.5em 0 0.4em -30.3125em rgba(0,149,255,1);
}
#pfp {
	background: #2f2f2f;
}
.online {
	box-shadow: inset 0.1875em 0 0 0 rgba(0,149,255,1), inset 0.5em 0 0.4em -30.3125em rgba(0,149,255,1), 0 0 10.3125em 0.3125em rgba(0,149,255,0.5);
}
.away {
	box-shadow: inset 0.1875em 0 0 0 rgba(255,149,0,1), inset 0.5em 0 0.4em -30.3125em rgba(255,149,0,1), 0 0 10.3125em 0.3125em rgba(255,149,0,0.5) !important;
}
.offline {
	box-shadow: inset 0.1875em 0 0 0 rgba(50,50,50,1), inset 0.5em 0 0.4em -30.3125em rgba(50,50,50,0), 0 0 10.3125em 0.3125em rgba(50,50,50,0.5) !important;
}
.dnd {
	box-shadow: inset 0.1875em 0 0 0 rgba(255,50,0,1), inset 0.5em 0 0.4em -30.3125em rgba(255,50,0,1), 0 0 10.3125em 0.3125em rgba(255,50,0,0.5) !important;
}
/*Upload*/
#upload {
	background: url('images/bg.png'), rgb(26,50,87);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
	color: white;
	text-shadow: 0 0.125em 0.3125em #000000;
}
#upload .titlebar {
	background: #444;
}
/* Donation */
#patreon {
	background: url('images/bgp.png'), rgb(26,50,87);
	color: white;
	box-shadow: inset 0.3125em 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
/* Call */
#voice-call {
	background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%),  rgba(50,50,50,0.6);
	box-shadow: inset 0.3125em 0.3125em 0.3125em 0 rgba(0,0,0,0.75), 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
#videobg {
	background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%), linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 100%), url(images/bgs.png);
	box-shadow: inset 0.3125em 0.3125em 0.3125em 0 rgba(0,0,0,0.75), 0 10em 0 0 black;
}
#webcam-container {
	background: url('images/textured/noise.png'), rgba(50,50,50,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75), inset 0 0.0625em 0 0 rgba(255,255,255,0.5);
	text-shadow: 0 0.125em 0.3125em #000000;
}
.webcam {
	background: url('images/textured/noise.png'), linear-gradient(to bottom, rgba(10,10,10,1) 0%,  rgba(50,50,50,1) 100%);
	box-shadow: inset 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
	border-bottom: #fff8 0.0625em solid;
}
#webcam-container p {
	background: url('images/textured/noise.png'), linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%);
    color: white;
}
/* Welcome */
#welcome-container {
	background: url('images/textured/noise.png'), rgba(50,50,50,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
	text-shadow: 0 0.125em 0.3125em #000000;
	color: white;
}
#welcome-vid {
	box-shadow: 0 0.3125em 0.3125em 0 rgba(0,0,0,0.75);
}
/* emoji */
.emojiblockout {
	background: linear-gradient(-45deg, black, transparent);
	color: rgba(0,0,0,0.5);
}
.emojicontainer {
    background: #0008;
    box-shadow: 0 0 2em black, 0 -0.0625em 0 0 #fff, -0.0625em 0 0 0 #fff;
	color: white;
}
.emojibox {
	background: url('images/textured/noise.png'), rgba(50,50,50,0.6);
	box-shadow: 0 0.3125em 0.3125em 0 rgb(0, 0, 0, 75%), inset 2.5em 0 0.5em 0 #111, inset 2.5em 0 0 0 #000;
}
#emojiline {
    background: #000c;
    box-shadow: 0 0 2em 1em black;
    border-bottom: white 0.0625em solid;
    border-right: white 0.0625em solid;
}
#emojilinegradient {
    background: linear-gradient(to right, black, transparent);
}
#emojisidebar td:hover {
    background: rgba(50,150,255,0.6);
    box-shadow: 0 0.125em 0.2em 0 #000;
}
.emojibanner {
    background: #555;
    box-shadow: 0 0.2em 0.4em 0 black;
}