/*.tg td{border-color:black;border-style:solid;border-width:1px;}*/

html {
    background-image: url(assets/rain.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

.tg {
	width: 60vw;
	margin: -13px;
	position: relative;
    left: 50%;
    transform: translateX(-50%);
	overflow: hidden;	
}

#error {
	position: absolute;
    color: rgb(255,0,0);
    font-size: 370%;
	text-align: center;
	width: 100%;
}

#chatContainer {
	position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255,255,255);
    font-size: 170%;
    background-color: rgba(0,0,0,0.7);
    width: 85%;
	max-width: 85%;
    border: 1.5px dashed rgb(255,0,0);
	max-height: 60vh;
	white-space: pre-wrap;
    overflow-y:scroll;
	overflow-wrap: break-word;
}

.text {
	position: relative;
    left: 50%;
	width: 100%;
    transform: translateX(-50%); 
    font-size: 8vh;
    border-radius: 100px;
    text-align: center;
    background-color: rgb(10,255,50);
    border-width: 3px;
    border-bottom-color: black;
    border-right-color: black;
}

.button {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	font-size: 8vh;
	border-radius: 100px;
	text-align: center;
	background-color: rgb(68,214,237);
	border-width: 3px;
	border-color: black;
	overflow: hidden;
	align-items: center;
}

.button img {
	height: 10vh; 
	vertical-align: middle;
} 

.userCountContainer {
	text-align: center; 
	font-size: 5vh; 
	color: white; 
}

.userCountContainer img {
	vertical-align: middle;
	line-height: -6vh;
}

.userCountContainer span {
	line-height: 6vh;	
}

#userList {
	color: white;
	font-size: 5vh;
}

.fileButton {
    width: 15%;
    font-size: 370%;
    border-radius: 100px;
    text-align: center;
    background-color: rgb(68,214,237);
    border-width: 3px;
    border-bottom-color: black;
    border-right-color: black;
    border-top-color: black;
    border-left-color: black;
}