SSB/minimum.css

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
html, body {
	background-color: #d5d5d5;
	color: #e3e3e3;
	margin: 0 auto;
	font-size: 14px;
	font-family: "IBM Plex Mono", sans-serif;
	padding-bottom: 40px;
}
.title {
	font-size: 46px;
	text-align: center;
	padding: 8px;
}

#navbar {
	margin: 0 auto;
	/*width: 100%;*/
	/*background-color: #ffffff;*/
	top: 1px;
	left: 1px;
	text-align: center;
	padding-bottom: 0px;
}

#navbar a {
	text-decoration: none;
	font-size: 16px;
	text-align: center;
	padding-top: 4px;
	padding-bottom: 5px;
	color: #5577ff;
}

#navbar a:hover {
	color: #2266cc;
}

.notifications {
	background-color: #bbbbbb;
	border-radius: 4px;
	border: solid 1px #cccccc;
	padding: 4px;
	color: #121212;
}

table { padding: 1px; }
tr, td { padding: 2px; }

textarea {
	background-color: #bbbbbb;
	border-radius: 4px;
	border: solid 1px #cccccc;
	outline: none;
	resize: none;
	color: #111111;
	width: 98%;
	padding: 4px;
}

.dllink {
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

input, button, select, label {
	background-color: #dddddd;
    border: solid 1px #bbbbbb;
	outline: none;
	border-radius: 4px;
	color: #565656;
	padding: 4px; 
	font-size: 14px;
}

.input-upload {
	display: inline-block;
	cursor: pointer;
	padding: 4px;
}

.button {
    background-color: #dddddd;
    border: solid 1px #bbbbbb;
	outline: none;
	border-radius: 4px;
	color: #565656;
	margin: auto;
	padding: 4px;
	display: inline-flex;
}

.avatar {
	border-radius: 50%;
	background: 50% 50% no-repeat; /* 50% 50% centers image in div */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover;
	width: 180px;
 	height: 180px;
}

.avatar_small {
        border-radius: 50%;
        background: 50% 50% no-repeat; /* 50% 50% centers image in div */
		background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        width: 48px;
        height: 48px;
}

.avatar_chat {
	border-radius: 50%;
	background: 50% 50% no-repeat; /* 50% 50% centers image in div */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover;
	width: 28px;
	height: 28px;
}

#msgbox {
	display: block;
	margin: 0 auto;
}

.message {
	padding: 6px;
	border-radius: 5px 11px 11px;
	background-color: #2255ff;
	border: solid 1px #1865ff;
	color: #ffffff;
	overflow-wrap: break-word;
	max-width: 520px;
}

#msgs { 
	background-color: #bbbbbb;
    border: solid 1px #cccccc;
	border-radius: 4px; 
	padding: 6px;
	height: 400px;
	width: 578px;
	margin: auto;
	overflow-y: hidden;
}

.replycontain {
	margin: 0 auto;
	width: 600px;
}

.attachment {
	/*max-height: 250px;*/
	display: block;
	margin: 0 auto;
	padding: 6px;
	border-radius: 4px;
	border: solid 1px #424242;
	background-color: #333333;
}

.attachment img {
	max-width: 580px;
	margin: 0 auto;
	display: block;
	max-height: 600px;
}

.attachment_chat {
	max-width: 280px;
	margin: 0 auto;
	display: block;
	max-height: 200px;
}

.page-controls {
	text-align: center;
}

.post {
	background-color: #666666;
	border-radius: 4px 10px 10px;
	border: solid 1px #545454;
	padding: 6px;
	color: #dddddd;
}

.reply {
	background-color: #666666;
	border-radius: 4px 10px 10px;
	border: solid 1px #545454;
	padding: 6px;
	color: #dddddd;
}

a {
	color: #5577ff;
	font-size: 14px;
	text-decoration: none;
}
a:hover {
	color: #2266cc;
	text-decoration: none;
}
.contain {
	background-color: #555555;
	border: solid 1px #434343;
	width: 690px;
	max-width: 690px;
	min-width: 690px;
	margin: 0 auto;
	padding: 5px;
}

.friendslist {
	padding: 4px;
	width: 100%;
	text-align: center;
}

.friendslist tr,td {
	padding: 2px;
}

.maincontain {
	margin: 0 auto;
	width: 702px;
}