a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
cursor:inherit;
}

input:focus,textarea:focus,button:focus,select:focus {
outline:none;
}


body {
text-rendering: optimizeLegibility;
}

table {
width:100%;
height:100%;
border-collapse:collapse;
}


td {
vertical-align:middle;
}


a,i,b,u,s {
text-decoration:none;
font-style:normal;
color:inherit;
font-weight:inherit;
}

main {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
display:block;
}

iframe {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}



.text.online, .fg.online {
color:#3ba55c;
}
.bg.online, .orb.online, .btn.online {
background-color: #3ba55c;
}


.info, .pending {
background-color:rgba(59,165,92,0.1);
color: #3ba55c;
padding:10px;
margin:5px;
box-shadow:0px 0px 2px #3ba55c;
}
.warning {
background-color: rgba(250,166,26,0.1);
color:#faa61a;
padding:10px;
margin:5px;
box-shadow:0px 0px 2px #faa61a;
}
.danger .bg {
background-color: rgba(237,66,69,0.1);
}
.danger .fg {
color: #ed4245;
}
.status {
background-color: #3ba55c;
color: #fff;
border:#3ba55c;
}
button.status:hover {
color:#3ba55c;
border-color:#3ba55c;
background:rgb(13,13,13);
}
.danger {
background-color: #ed4245;
color: #fff;
}


@font-face {
font-family: Whitney;
font-weight: 300;
src: url(/f/6c6374bad0b0b6d204d8d6dc4a18d820.woff) format("woff")
}


@font-face {
font-family: Whitney;
font-weight: 500;
src: url(/f/3bdef1251a424500c1b3a78dea9b7e57.woff) format("woff")
}

@font-face {
font-family: Whitney;
font-weight: 600;
src: url(/f/be0060dafb7a0e31d2a1ca17c0708636.woff) format("woff")
}


@font-face {
font-family: Ginto;
font-weight: 300;
src: url(/f/148d0f25ba9c02a9190be23e882c7f87.woff) format("woff")
}


@font-face {
font-family: Ginto;
font-weight: 500;
src: url(/f/32c4f766e4892c054dfd367dbe0fc6dc.woff) format("woff")
}

@font-face {
font-family: Ginto;
font-weight: 600;
src: url(/f/88055567e3d928bcb1e67e967081572e.woff) format("woff")
}

@font-face {
font-family: Ginto;
font-weight: 700;
src: url(/f/746a4f241e03deffc59b08c5650cf458.woff) format("woff")
}


@font-face {
font-family: Ginto;
font-weight: 400;
font-style: italic;
src: url(/f/7a504226cbb79a1a6990a72266007030.woff) format("woff")
}

@font-face {
font-family: Ginto;
font-weight: 500;
font-style: italic;
src: url(/f/7a504226cbb79a1a6990a72266007030.woff) format("woff")
}

@font-face {
font-family: Ginto;
font-weight: 600;
font-style: italic;
src: url(/f/4ea3faef5f6c0c74eb4d5e1a4a5de0b4.woff) format("woff")
}

@font-face {
font-family: Ginto;
font-weight: 700;
font-style: italic;
src: url(/f/09788e4fa057f2e0067e13209e56c8a7.woff) format("woff")
}

body {font-family: Whitney,"Helvetica Neue",Helvetica,Arial,sans-serif; }




H1,H2,H3,H4,H5,H6 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
line-height: 20px;
font-weight:500;
letter-spacing:0.25pt;
}

p {
font-size: 14px;
line-height: 18px;
letter-spacing:0.05pt;
}

i {
font-style:normal;
}

i.number {
letter-spacing:0.8pt;
font-size:9pt;
line-height:12pt;
}


.center {
text-align:center;
}
.center > * {
vertical-align:middle;
}

#Tests {
display:none;
}






form, input[type=file] {
visibility:hidden;
}


li span i {
float:right;
margin-top:2px;
}
.user span {
position:absolute;
bottom:0px;
right:0px;
}


:root {

--discord: rgb(88,101,242);
--reddit:rgb(255,69,0);
--twitter:rgb(29,161,242);
--facebook:rgb(59,89,152);
--warning:#faa61a;
--danger:#ed4245;

}



#Match_Start, #Match_Stop {
display:none;
}







.module.menu {
position:absolute;
bottom:5px;
left:5px;
display:inline-block;
height:40px;
width:40px;
}
.module.menu button {
height:100%;
width:100%;
border-radius:5px;
color:skyblue;
border:0px;
background:rgb(40,40,40);
cursor:pointer;
text-shadow:0px 0px 1px black;
}
.module.menu button:hover {
background:rgb(20,20,20);
text-shadow:0px 0px 3px black, 0px 0px 2px #54b8e1;
}


.module.menu span {
position:absolute;
bottom:1px;
right:1px;
}


.module.menu button {
position:relative;
padding:0px;
margin:0px;
}
.module.menu > button > i {
position: absolute;
left: 0px;
top: 10px;
width: 40px;
text-align: center;
margin: 0px;
padding: 0px;
}



button {
background:rgba(0,0,0,0.2);
color:rgba(255,255,255,0.4);
border:0px;
border-radius:3px;
padding:10px;
margin:5px;
cursor:pointer;
}


button.user {
width:auto !important;
display:inline-block;
height:auto !important;
background:transparent;
border:0px;
border-radius:100%;

}
button.user i {
vertical-align:middle;
line-height:100%;
}
button:hover i {
text-shadow:0px 0px 1px black, 0px 0px 5px rgba(0,0,0,0.5);
}







.text H1 {
font-weight: 800;
margin: 10px;
padding-left: 10px;
border-left: 5px solid #bb6b45;
}





.text i {
color:inherit;
font-size:inherit;
font-style:inherit;
text-decoration:none;
font-family:inherit;
transition:color 0.3s ease-in-out;
display:inline-block;
vertical-align:top;
height:18px;
padding:0px;
margin:0px;
width:auto;
min-width:5px;
margin-right:2px;
}
.message .content .text i:hover {
color:skyblue;
}

.hotlink {
display:inline-block;
color:#619cb5;
padding-bottom:3px;
border-bottom:1px solid transparent;
padding-left:4px;
padding-right:4px;
border-radius:5px;
transition:background-color 0.3s, border-color 0.4s;
}
.hotlink:hover {
background-color:rgba(10,10,10,0.5);
border-color:#619cb5;
}

.text .bold {
font-weight:800;
color:whitesmoke;
letter-spacing:0.1pt;
}

.text .italic {
font-style:italic;
}

.text .underline {
text-decoration:underline;
}

.text .strike {
text-decoration:line-through;
opacity:0.9;
}

.text .spoiler {
color:transparent;
text-shadow:none;
background:rgba(0,0,0,0.5);
border-radius:4px;
filter:blur(4px);
overflow:hidden;
}

.text .spoiler:hover {
background:rgba(0,0,0,0.1);
filter:blur(0px);
}

.text .code {
display:block;
width:auto;
}
.text .code > pre {
display:inline-block;
max-width:calc(100% - 30px);
padding:5px;
border-radius:5px;
background:rgb(11,10,11);
text-align:left;
color:rgba(255,255,255,0.3);
font-family:courier;
letter-spacing:0pt;
font-size:8.5pt;
font-weight:200;
overflow:auto;
border:3px solid rgba(20,20,20);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
}
.text .tag {
vertical-align:middle;
height:16px;
background:rgba(0,0,0,0.2);
}
.text .tag .avatar .image, .text .tag .avatar {
height:15px;
width:15px;
}










/* Scrollbars. */
::-webkit-scrollbar {
background:transparent;
width:8px;
}
::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.5);
border-radius:3px;
}
::-webkit-scrollbar-track {
background:transparent;
}





span i {
color:Whitesmoke;
text-shadow:0px 1px 1px rgba(0,0,0,0.9);
border-radius:3px;
background:#DC7541;
text-align:center;
padding:2px;
margin:0px;
position:relative;
vertical-align:middle;
line-height:11pt;
font-size:8pt;
top:auto;
display:inline-block;
width:13px;
height:13px;
}




.tag {
display:inline-block;
background:rgb(10,10,10);
height:16px;
margin:0px;
padding:0px;
border-radius:5px;
padding-right:7px;
margin-left:2px;
margin-right:2px;
overflow-y:hidden;
vertical-align:top;
}

.tag .user  {
display:inline-block;
position:relative;
margin:0px;
padding:0px;
top:0px;
left:0px;
height:15px;
width:100%;
font-size:9pt;
cursor:pointer;
text-align:left;
}
.tag .user .avatar {
height:15px;
width:15px;
display:inline-block;
vertical-align:middle;
margin:0px;
padding:0px;
}
.tag  .user .avatar .image {
width:15px;
height:15px;
background:rgb(20,20,20);
border-radius:3px;
background-position:center;
background-size:cover;
margin:0px;
padding:0px;
}
.tag  .user .name {
display:inline-block;
border-radius:3px;
color:gainsboro;
margin-left:5px;
vertical-align:middle;
}




.item {
color:gainsboro;
transition:color 0.25s ease-in, background-color 0.25s ease-out;
}
.item:hover {
background:rgba(0,0,0,0.3);
}




/*Main background.*/
#BG {
background:black;

}



/*Tinting the foreground.*/
#FG {
background:rgb(24,23,25);
}

/* Fade out the top of chat. */
#Chat .Scenery.A  {
width: 100%;
z-index: 15;
height: 70px;
background:linear-gradient(rgba(24,23,25,1),rgba(24,23,25),rgba(24,23,25), rgba(24,23,25,0.9),  transparent);
}


/* Blur the apps when prompt is up. */

#Apps.visible {
filter:none;
}
#Modal_Background, #Modal_Foreground {
background:transparent;
}

#Modal.visible #Modal_Background {
background:rgba(255,255,255,0.2);
}






/* CARDS */

.card {
display:inline-block;
min-width:200px;
border:1px solid rgb(30,30,30);
border-radius:5px;
}


.card-header .user {
display:inline-block;
position:relative;
height:45px;
transition:height 0.1s;
width:100%;
cursor:pointer;
text-align:left;
}
.card-header .user .name {
display:inline-block;
border-radius:3px;
color:gainsboro;
margin-left:10px;
vertical-align:middle;
}

.card .card-header {
font-size:10pt;
text-align:left;
color:gainsboro;
padding:0px;
letter-spacing:0.3pt;
background:rgba(0,0,0.9);
}

.card-header {
min-height:30px;
}
.card-header h1 {
vertical-align:bottom;
padding: 10px;
padding-top: 15px;
}

.card-content, .card-footer {
background:rgb(24,23,24);
}
.card-footer div {
padding:3px;
}
.card > div:first-child {
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.card > div:last-child {
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
.card-footer {
text-align:right;
}
.card-content {
display: block;
line-height: 18pt;
word-break: break-word;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
color: rgb(173,173,173);
text-align: left;
}

@media only screen and (max-width: 500px)  {
.card-content  {
max-width:calc(100vw - 100px);
}
}
.card button {
background:rgb(40,40,41);
border:1px solid transparent;
border-radius:5px;
color:Whitesmoke;
padding:5px 10px;
margin:4px;
cursor:pointer;
box-shadow:0px 0px 5px transparent;
transition:box-shadow 0.1s, background 0.2s;
}
.card button:hover {
box-shadow:0px 0px 5px black;
}

.card input {
padding:10px;
margin:15px;
border:0px;
border-radius:3px;
width:200px;
}

.card textarea {
width:300px;
height:200px;
resize:none;
margin:0px;
padding:0px;
font-family:inherit;
}
.card-content > div {
text-align:left;
}


.card-header .user .avatar, .card-header .user .avatar .image {
width:100%;
height:100%;
margin:0px;
padding:0px;
}

.card-header .user {
height:52px;
padding:0px;
margin:0px;
border-radius:5px;
display:inline-block;
}
.card-header .user .avatar {
width:52px;
}
.card-header .user {
margin:5px;
margin-bottom:6px;
}
.card-content .tag {
vertical-align: top;
}







[topic="chat"] i {
color: #91acd8;
}
[topic="love"] i {
color: red;

animation:colorsplash 30s infinite;
animation-delay:0.7s;
}
[topic="technology"] i {
color:cyan;

animation:colorsplash 30s infinite;
animation-delay:0.3s;
}
[topic="memes"] i {
color: #91582f;
animation:colorsplash 30s infinite;
animation-delay:0.1s;
}
[topic="media"] i {
color: #bac6f3;

animation:colorsplash 30s infinite;
animation-delay:0.4s;

}
[topic="science"] i {
color: #e5b2ff;

animation:colorsplash 30s infinite;
animation-delay:0.8s;
}
[topic="animals"] i {
color: #ffb078;

animation:colorsplash 30s infinite;
animation-delay:0.6s;
}
[topic="gaming"] i {
color:silver;
animation:colorsplash 30s infinite;
animation-delay:0.2s;
}
[topic="art"] i {
color:#fce331;
animation:colorsplash 30s infinite;
animation-delay:0.6s;
}
[topic="music"] i {
color: cornflowerblue;

animation:colorsplash 30s infinite;
animation-delay:0.75s;
}
[topic="roleplay"] i {
color: whitesmoke;
}
[topic="gaming"] i {
color: whitesmoke;
}
[topic="education"] i {
color: whitesmoke;
}
[topic="politics"] i {
color: #ccddef;
}
[topic="economics"] i {
color: #fff254;
}
[topic="knowledge"] i {
color: #e18db4;

animation:colorsplash 10s infinite;
animation-delay:0.85s;
}
[topic="books"] i {
color:#ffa330;
}
[topic="food"] i {
color: #ffa330;
}



@keyframes colorsplash {

0% {
filter:grayscale(60%);
}
5% {
filter:grayscale(20%);
}
10% {
filter:grayscale(60%);
}
100% {
filter:grayscale(60%);
}

}



.content {
position:relative;
top:0px;
left:0px;
bottom:0px;
right:0px;
display:block;
width:100%;
height:100%;
}







.form-input {
height:30px;
max-width:200px;
background:rgba(255,255,255,0.1);
}



#OPAL {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
#App {
position:relative;
height:100%;
width:100%;
overflow:hidden;
}
#View {
position:absolute;
left:2px;
top:2px;
bottom:2px;
right:2px;
height:calc(100% - 4px);
width:calc(100% - 4px);
z-index:1;
}
#Content {
position:relative;
height:100%;
width:100%;
overflow:hidden;
border-radius:1px;
}
#Apps {
position:relative;
height:100%;
width:100%;
}

#Apps > div {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
height:100%;
width:100%;
}
#Apps > div > div {
position:relative;
height:100%;
width:100%;
}

#Omni, #Menu {
z-index:50;
}

#Modal, #Load {
z-index:1000;
}

#Chats {
z-index:20;
}
#Match {
z-index:10;
}
#Background, #Foreground {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
display:block;
}
#BG, #FG {
position:relative;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
display:block;
}
#Background {
z-index:0;
}
#Foreground {
z-index:1;
}
#N {
position: absolute;
width: 100%;
left: -50px;
right: -50px;
pointer-events: none;
z-index: 2;
height: 75px;
padding-left: 50px;
}

#N, #S, #E, #W {
position:absolute;
z-index:3;
pointer-events:none;
}
#N, #E, #W {
top:0px;
}
#S, #E, #W {
bottom:0px;
}
#S, #E, #N {
left:0px;
}
#S, #W, #N {
right:0px;
}

#Engine {
position:absolute;
height:0px;
width:0px;
overflow:hidden;
margin:0px;
padding:0px;
border:0px;
visibility:hidden;
z-index:-1;
}




#Load {
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width:100%;
height:100%;
z-index:99999;
text-align:center;
display:none;
background:rgb(70,71,72);
}
#Load.visible {
display:block;
}
#Load td {
text-align:center;
vertical-align:middle;
}
#Load_FG, #Load_BG {
display:inline-block;
text-align:center;
color:whitesmoke;
text-shadow:0px 0px 2px black, 0px 1px 1px black;
}
#Load_Foreground {
background:rgba(0,0,0,0.7);
}


#Load table {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#Load H1 {
font-size:15pt;
}


#Load_BG_Content {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
}
#Load_BG_Content div {
box-sizing: border-box;
display: block;
position: absolute;
width: 90px;
height: 90px;
margin: 5px;
border: 5px solid gray;
border-radius: 100%;
animation: loaderbg 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: skyblue transparent transparent transparent;
}
#Load_BG_Content div:nth-child(1) {
animation-delay: -0.45s;
}
#Load_BG_Content div:nth-child(2) {
animation-delay: -0.3s;
}
#Load_BG_Content div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes loaderbg  {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}




.logo {
font-size:16pt;
color:#54b8e1;
}








#Omni {
position:absolute;
bottom:5px;
left:5px;
display:inline-block;
height:40px;
width:40px;
}
#Omni button {
height:100%;
width:100%;
border-radius:5px;
color:skyblue;
border:0px;
background:rgb(40,40,40);
cursor:pointer;
text-shadow:0px 0px 1px black;
}
#Omni button:hover {
background:rgb(20,20,20);
text-shadow:0px 0px 3px black, 0px 0px 2px #54b8e1;
}



#Omni span {
position:absolute;
bottom:1px;
right:1px;
}


#Omni button {
position:relative;
padding:0px;
margin:0px;
}
#Omni > button > i {
position: absolute;
left: 0px;
top: 10px;
width: 40px;
text-align: center;
margin: 0px;
padding: 0px;
}



#Match td {
text-align:center;
color:gainsboro;
}




#Match_Status_Spinner  div {
box-sizing: border-box;
display: block;
position: absolute;
width: 15px;
height: 15px;
margin: 0px;
border: 5px dotted gray;
border-radius: 100%;
animation: loaderbg 2s cubic-bezier(0.3, 0.2, 0.2, 0.3) infinite;
border-color:rgb(128 228 204 / 15%) transparent transparent transparent;
}
#Match_Status_Spinner div:nth-child(3) {
animation: loaderbg 1s cubic-bezier(0.1, 0.3, 0.2, 0.1) infinite;
border-color: lightgreen transparent transparent transparent;
animation-delay: -0.45s;
}
#Match_Status_Spinner div:nth-child(2) {
animation: loaderbg 1.5s cubic-bezier(0.2, 0.1, 0.1, 0.2) infinite;
border-color: #95ffb3 transparent transparent transparent;
animation-delay: -0.3s;
}
#Match_Status_Spinner div:nth-child(1) {
animation: loaderbg 1.3s cubic-bezier(0.3, 0.2, 0.2, 0.3) infinite;
border-color: #afe3f9 transparent transparent transparent;
animation-delay: -0.15s;
}



#Match_Content {
display:inline-block;
border-radius:5px;
text-align:left;
max-width:calc(100% - 50px);
background:rgb(40,40,40);
}
#Match_Content p, #Match_Content h1 {
padding:25px;
}

#Match_Options {
display:block;
text-align:center;
}

#Match H1 {
padding-bottom:0px;
margin-bottom:0px;
font-size:13pt;
color:white;
}
#Match p {
padding-top:0px;
margin-top:5px;
color:gainsboro;
}
#Match_Status {
margin:15px;
display:block;
}
#Match_Status_Spinner {
display:inline-block;
width:15px;
height:15px;
vertical-align:middle;
}
#Match_Status_Text {
display:inline-block;
width:auto;
vertical-align:middle;
margin-left:5px;
}






#Chat_Title #Topic {
list-style: none;
display: block;
font-family: Ginto;
font-size: 12pt;
color: rgb(230, 231, 233);
margin: 0px;
padding-top:5px;
width:100%;
}

#Chat_Title button {
width:40px;
text-align:center;
margin:5px;
margin-right:10px;
font-size:20pt;
display:inline-block;
background:transparent;
color:gray;
text-shadow:0px 0px 3px rgba(0,0,0,0.5), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 1px rgba(0,0,0,0.5);
}





.chat-output {
position: relative;
text-align:center;
display: block;
height: 100%;
width: 100%;
bottom: 0px;
top: 0px;
overflow: auto;
}
.chat-output-content {
position:absolute;
width:100%;
display:block;
max-height:100%;
bottom:0px;
text-align:left;
margin-top:50%;
}




.chat-input-options button {
background:rgb(20,20,20);
color:whitesmoke;
border:0px;
border-radius:5px;
cursor:pointer;
color:lime;
}





.message {
position:relative;
margin-bottom:0px;
margin-top:0px;
padding:5px;
border-radius:5px;
word-break:break-word;
cursor:pointer;
margin-left:30px;
width:calc(100% - 60px);
transition:margin 0.1s ease-in-out, height 0.1s ease-in-out;
text-shadow:0px 0.5px 0.7px rgba(0,0,0,0.5), 0px -0.3px 0.7px rgba(0,0,0,0.5);
}
.message .text:last-child {
margin-bottom:5px;
padding-bottom:5px;
}


.message > .user {
display:inline-block;
position:relative;
margin-left:50px;
cursor:pointer;
}

.message > .user .name {
color:gainsboro;
display:inline-block;
height: 20px;
width:auto;
max-width: 200px;
padding:2px;
overflow: hidden;
border:1px solid transparent;
}

.message > .user .avatar {
position:absolute;
left:-48px;
top:-3px;

}
.message > .user .avatar .image {
background:rgb(20,20,20);
border-radius:100%;
height:35px;
width:35px;
background-position:center;
background-size:cover;
}

.message .content {
display:block;
position:relative;
width:auto;
height:auto;
top:auto;
left:auto;
right:auto;
bottom:auto;
margin-left:50px;
}

.message .content .text {
color:#a9a9a9;
padding:2px;
}

@media only screen and (max-width: 500px)  {
.message  {
margin-left:20px !important;
}
}

@media only screen and (max-width: 400px)  {
.message  {
margin-left:15px !important;
}
}


@media only screen and (max-width: 300px)  {
.message  {
margin-left:10px !important;
}
}




.chat-input-status {
position:absolute;
bottom:52px;
left:52px;
background: rgb(24,24,24);
border-radius: 3px;

}
.chat-input-status > div {
padding:3px;
}
.chat-input-status span {
font-size:8.5pt;
margin-left:4px;
margin-right:5px;
margin-top:2px;
color:whitesmoke;
vertical-align:middle;
text-shadow:
0px 0px 1px #222,
0px 0px 2px #222,
0px 1px 1px #222,
0px -1px 1px #222,
0px 0px 2px #222,
0px 1px 2px #222,
-1px 0px 1px black,
1px 0px 1px black,
0px 0px 5px black;

}
.chat-input {
width:100%;
margin:10px;
margin:5px 0px;
padding:0px 5px;
height:calc(100% - 10px);
width:calc(100% - 20px);
background: rgba(255,255,255,0.05);
border-radius: 5px;
}
.chat-input input {
width:100%;
height:100%;
background:transparent;
border:0px;
color:rgba(255,255,255,0.5);
font-size:11.5pt;
letter-spacing:0.2pt;
}
.chat-input input:focus {
width:100%;
height:100%;
background:transparent;
border:0px;
color:rgba(255,255,255,0.8);
font-size:11.5pt;
letter-spacing:0.2pt;
}
.chat-input-options {
display:block;
}
.chat-input-options button {
width:30px;height:30px;
}




.chat-right {
width:50px;
}
.chat-left {
width:25px;
}

.chat-left .content, .chat-right .content, .chat-center .content {
overflow-y:auto;
overflow-x:hidden;
}

.module {
position:absolute;
}
.module > .content {
position:relative;
height:100%;
width:100%;
overflow:hidden;
display:block;
}

.chat-frame td {
vertical-align:bottom;
position:relative;
}
#Chat_Input .grid > table {
height:100%;
width:100%;
}
#Chat_UI {
position:relative;
height:100%;
width:100%;
}
#Chat_Users {
z-index:20;
}
#Chat_Input {
position:absolute;
display:block;
width:100%;
height:50px;
left:0px;
bottom:0px;
z-index:15;
}

#Chat_Output {
z-index:12;
}

#Chat_Title {
z-index:20;
}

#Chat_Spacer {
display:block;
height:30px;
}


#Chat_Background, #Chat_Foreground {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
z-index:10;
}

#Chat_BG, #Chat_FG {
position:relative;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
z-index:0;
overflow:hidden;
}

#Chat_FG div {
position:absolute;
bottom:0px;
right:calc(40vw - 50vh);

}
#Chat_FG div i {
font-size:60vh;
color:transparent;
text-shadow:0px 0px 1px rgba(250,250,250,0.015);
}


@media only screen and (max-width: 500px)  {

#Chat_FG div {
position:absolute;
bottom:0px;
right:calc(10vw - 20vh);

}
#Chat_FG div i {
font-size:60vh;
}


}




#Profile {
position:absolute;
bottom:0px;
right:0px;
display:inline-block;
z-index:100;
cursor:pointer;
}
#Profile .icon {
height:40px;
width:40px;
background:black;
position:relative;
margin:5px;
float:right;
z-index:6;
}
#Profile .image {
position:absolute;
top:0px;
left:0px;
border-radius:5px !important;
z-index:6;
box-shadow:0px 0px 3px rgba(0,0,0,0.5);
}
#Profile .avatar {
position:relative;
border-radius:5px;
}
#Profile i {
font-size:20pt;
margin-top:3px;
top:5px;
left:5px;
position:absolute;
z-index:3;
}
#Profile .menu {
position:relative;
border-radius:10px;
width:170px;
right:0px;
display:none;
}
#Profile li {
list-style:none;
margin:0px;
padding:5px 10px;
display:block;
color:gainsboro;
font-size:13pt;
}
#Profile li:hover {
background:rgba(255,255,255,0.1);
}



#Profile .user  {
display:inline-block;
position:relative;
height:40px;
transition:height 0.2s;
width:40px;
cursor:pointer;
padding:0px;
text-align:center;
background:transparent;
font-size:0pt;
}
#Profile .user .avatar {
margin:0px;
height:40px;
width:40px;
display:inline-block;
vertical-align:middle;
}
#Profile .user .avatar .image {
width:40px;
height:40px;
border-radius:100px;
background-position:center;
background-size:cover;
}




.chat-users {
z-index: 9;
position: relative;
overflow:auto;
height:100%;

}
.chat-users .user  {
display:inline-block;
position:relative;
height:15px;
width:40px;
transition:height 0.2s;
cursor:pointer;
}
.chat-right:hover .user .avatar .image {
box-shadow:0px 0px 5px rgba(0,0,0,0.8);
}

.chat-users .user .avatar {
margin-left:2px;
display:inline-block;
}
.chat-users .user .avatar .image {
width:40px;
height:40px;
background:rgb(20,20,20);
border-radius:100px;
background-position:center;
background-size:cover;
}
.chat-users .user .name {
background:rgba(0,0,0,0.5);
width:40px;
height:40px;
border-radius:3px;
color:gainsboro;
position:absolute;
top:20px;
right:20px;
display:none;
}


@media only screen and (min-height: 400px)  {
.chat-users .user  {
height:20px;
}
}
@media only screen and (max-height: 300px)  {
.chat-users .user  {
height:30px;
}
}
@media only screen and (min-height: 301px)  {
.chat-users .user  {
height:30px;
}
}




.chat-topics {
margin-top:50px;
border-radius:50px;
padding-bottom:15px;
padding-top:10px;
max-height:calc(100% - 90px);
position:relative;
z-index:7;
width:50px;
text-align:center;
overflow:hidden;
}
.chat-topics ul {
margin:0px;
padding:0px;
}
.chat-topics li {
list-style:none;
margin:0px;
padding:2px;
cursor:pointer;
height:4vh;
max-height:30px;
transition:height 0.5s ease-out;
}
.chat-topics button {
background:transparent;
padding:10px;
text-align:center;
width:40px;
height:40px;
border:0px;
}
.chat-topics button > i {
font-size:11.5pt;
position:relative;
z-index:10;
transition:font-size 0.1s ease-out, filter 0.1s, left 0.3s;
cursor:pointer;
filter:grayscale(99%);
text-shadow:0px 2px 4px black;
}
.chat-topics li:hover {
height:40px;
padding-top:5px;
}
.chat-topics button:hover {
color:white;
text-shadow:0px 0px 3px rgba(0,0,0,0.5), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 1px black;
}
.chat-topics button:hover i {
font-size:20pt;
left:-2px;
animation-play:colorsplash 1s infinite;
}

.chat-topics li.selected i  {
text-shadow:0px 1px 3px black, 0px -1px 3px black, 0px 0px 2px black;
}


@media only screen and (min-height: 350px)  {
.chat-topics button > i {
font-size:11.5pt;
}
}
@media only screen and (min-height: 475px)  {
.chat-topics button > i {
font-size:4vh;
}
}


@media only screen and (min-height: 600px)  {
.chat-topics button > i {
font-size:17pt;
}
}



#Topic {
z-index:3;
cursor:pointer;
}
#Topic .user,
#Topic .user .avatar {
height: 40px;
display: inline-block;
width: 40px;
}

#Topic label {
padding: 15px 0px;
display: inline-block;
margin-left:3px;
font-size:14pt;
text-shadow: 0px 0px 10px black,
0px -2px 5px black,
0px -1px 4px black,
0px 1px 5px black,
0px 0px 1px #111,
0px 3px 1px #111,
0px -3px 1px #111,
0px 0px 5px #111,
0px 1px 5px #111,
-3px 0px 1px #111,
3px 0px 1px #111;
}





#Chats {
overflow:auto;
max-height:calc(100% - 50px);
z-index:5;
}
#Chats ul {
margin-top:75px;
margin-bottom:75px;
}
#Chats li {
position: relative;
display:inline-block;
height: 40px;
width: 150px;
overflow:hidden;
cursor:pointer;
border-radius:5px;
}
#Chats li:hover {
background:rgb(40,40,40);
}
#Chats .user {
position:absolute;
top:5px;
left:5px;
}
#Chats .name {
position: absolute;
left: 45px;
top: 10px;
color:gainsboro;
}

#Chats li .user .avatar {
height:25px;
width:25px;
}



.item {
display:block;
position:relative;
padding:10px;
text-align:left;
list-style:none;
width:auto;
height:auto;
cursor:pointer;
}
.item .user {
width:auto;
height:auto;
margin:0px;
}
.item .icon, .item .user {
margin-right:5px;
margin-left:5px;
cursor:pointer;
}
.item .user .avatar, .item .icon {
display:inline-block;
}
.item .user .avatar {
height:30px;
width:30px;
}
.item .icon {
width:30px;
}
.item .label {
margin-right:10px;
margin-left:5px;
cursor:pointer;
display:inline-block;
}
.item .alerts {
float:right;
display:block;
width:30px;
height:30px;
cursor:pointer;
}

.item.short {
padding-top:8px;
padding-bottom:8px;
}
.item.tall {
padding-top:15px;
padding-bottom:15px;
}



.grid {
position:relative;
display:block;
width:auto;
height:auto;
}
.grid > table {
width:auto;
height:auto;
}



.icon {
display:inline-block;
vertical-align:middle;
text-align:center;
}
.icon i {
display:inline-block;
vertical-align:middle;
}



.label {
display:inline-block;
vertical-align:middle;
}





.text i {
color:inherit;
font-size:inherit;
font-style:inherit;
text-decoration:none;
font-family:inherit;
transition:color 0.3s ease-in-out;
display:inline-block;
vertical-align:top;
height:18px;
padding:0px;
margin:0px;
width:auto;
min-width:5px;
margin-right:2px;
}
.message .content .text i:hover {
color:skyblue;
}

.hotlink {
display:inline-block;
color:#619cb5;
padding-bottom:3px;
border-bottom:1px solid transparent;
padding-left:4px;
padding-right:4px;
border-radius:5px;
transition:background-color 0.3s, border-color 0.4s;
}
.hotlink:hover {
background-color:rgba(10,10,10,0.5);
border-color:#619cb5;
}

.text .bold {
font-weight:800;
color:whitesmoke;
letter-spacing:0.1pt;
}

.text .italic {
font-style:italic;
}

.text .underline {
text-decoration:underline;
}

.text .strike {
text-decoration:line-through;
opacity:0.9;
}

.text .spoiler {
color:transparent;
text-shadow:none;
background:rgba(0,0,0,0.5);
border-radius:4px;
filter:blur(4px);
overflow:hidden;
}

.text .spoiler:hover {
background:rgba(0,0,0,0.1);
filter:blur(0px);
}

.text .code {
display:block;
width:auto;
}
.text .code > pre {
display:inline-block;
max-width:calc(100% - 30px);
padding:5px;
border-radius:5px;
background:rgb(11,10,11);
text-align:left;
color:rgba(255,255,255,0.3);
font-family:courier;
letter-spacing:0pt;
font-size:8.5pt;
font-weight:200;
overflow:auto;
border:3px solid rgba(20,20,20);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
}
.text .tag {
vertical-align:middle;
height:16px;
background:rgba(0,0,0,0.2);
}
.text .tag .avatar .image, .text .tag .avatar {
height:15px;
width:15px;
}



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



.align-left {
text-align:left;
}



.align-middle {
display: flex;
justify-content: center;
align-items: center;
}



.align-right {
text-align:right;
}




.app_profile:hover {
color:skyblue;
}
.app_match:hover {
color:lightgreen;
}
.app_private:hover {
color:cornflowerblue;
}
.app_group:hover {
color:orange;
}



.discord {
color:var(--discord);
}
.discord:hover {
color:white;
background-color:var(--discord);
}
.facebook {
color:var(--facebook);
}
.facebook:hover {
color:white;
background-color:var(--facebook);
}
.reddit {
color:var(--reddit);
}
.reddit:hover {
color:white;
background-color:var(--reddit);
}
.twitter {
color:var(--twitter);
}
.twitter:hover {
color:white;
background-color:var(--twitter);
}



#Modal {
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width:100%;
height:100%;
z-index:99999;
text-align:center;
display:none;
}
#Modal.visible {
display:block;
}
#Modal_FG, #Modal_BG {
display:inline-block;
text-align:center;
}

#Modal_Background {
background:rgba(255,255,255,0.1);
}

#Modal > div {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}

#Modal form {
visibility:visible;
margin:0px;
padding:0px;
display:block;
width:auto;
}





.stack {
vertical-align:middle;
width:auto;
height:auto;
margin:0px;
padding:0px;
}



.button {
display:inline-block;
width:auto;
height:auto;
position:relative;
text-align:center;
cursor:pointer;
}
.button.wide {
display:block;
width:auto;
}



.user {
display:inline-block;
}
.user .avatar {
margin:0px;
padding:0px;
height:40px;
width:40px;
display:inline-block;
vertical-align:middle;
}
.user .avatar .image {
width:100%;
height:100%;
margin:0px;
padding:0px;
border-radius:100px;
background-position:center;
background-size:cover;
text-align:center;
}

.user .avatar .image i {
margin-top:30%;
font-size:2.5em;
color:rgba(255,255,255,0.8);
text-shadow:0px 1px 2px rgba(0,0,0,0.5);
}

.user .avatar .image {
box-shadow:
0px -3px 1px rgba(255,255,255,0.03),
0px 3px 1px rgba(255,255,255,0.03),
-3px 0px 1px rgba(255,255,255,0.03),
3px 0px 1px rgba(255,255,255,0.03),
inset 0px 0px 5px rgba(0,0,0,0.2);
}







.module {
position:absolute;
}
.background, .foreground {
position:absolute;
top:0px;
left:0px;
right:0px;
height:100%;
width:100%;
}
.background > .content, .foreground > .content, .module > .content {
position:relative;
display:flex;
justify-content: center;
align-items: center;
}



#ChatTopics {
left:0px;
top:0px;
width:50px;
height:calc(100% - 120px);

}
#ChatOutput {
top:0px;
left:50px;
right:50px;
height:calc(100% - 50px);
width:calc(100% - 100px);
}
#ChatInput {
bottom:0px;
height:50px;
left:50px;
right:50px;
width:calc(100% - 100px);
}
#ChatUsers {
right:0px;
top:0px;
bottom:50px;
width:50px;
height:calc(100% - 50px);
}
#ChatTitle {
top:0px;
left:0px;
height:50px;
width:calc(100% - 50px);
}

#Profile {
bottom:0px;
right:0px;
height:50px;
width:50px;
}

#Menu {
bottom:0px;
left:0px;
height:50px;
width:50px;
}



.module {
position:absolute;
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}