/*
 * Stijl Retro
 */
@import url('global.css');
@import url('fonts.css');
@import url('print.css');
@import url('custom.css');

body {
  margin: 0;
  height: 100vh;
  /* background-color: #000; */
  position: relative;
  overflow: hidden;
}

/* body::before { */
  /* content: ""; */
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* background-image: url('https://retrochat.nl/img/logos/logo512.png'); */
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
  /* background-size: 325px; */
  /* opacity: 0.3; /* 70% zichtbaar */ */
  /* pointer-events: none; /* zodat het niets blokkeert */ */
  /* z-index: 0; */
/* } */

/* Buttons */
#content #bbCodeContainer input, #content #logoutButton, #content #submitButton, #loginForm #loginButton {
	background-color:#CDE7FF;
	color:#333333;
	border: 1px solid #787878;
}
#content select, #loginForm select, #loginForm input, #content textarea {
	color:#333333;
	border: 1px solid #787878;
}

/* Status Icon */
#content #statusIconContainer {
	background: url('../img/loading-sprite.png') no-repeat 0px 0px; 
}
#content #statusIconContainer.waiting {
	background-position: 0px -22px;
}
#content #statusIconContainer.retrying {
	background-position: 0px -44px;
}

/* Other Theme Elements */
.ajax-chat {
	/* background-color:#E5E5E8; */
	color:#000;
}
.ajax-chat h1 {
	color:#000;
}
.ajax-chat a {
	color:#000;
}
#loginContent #errorContainer {
	color:red;
}
#content input, #content select, #content textarea {
	background-color:#FFF;
	color:#000;
}
#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer {
	border-color:#ADADAD;
	background-color:#FFF;
}
.ajax-chat .popup {
	background-color:#ADADAD;
	border:1px solid gray;
}
#content #colorCodesContainer a {
	border-color:black;
}
#content #optionsContainer input {
	background-color:transparent;
}
#content .rowEven, #helpList dl:nth-child(even), #settingsList dl:nth-child(even) {
	background-color:#ECEDF3;
}
#content .rowOdd, #helpList dl:nth-child(odd), #settingsList dl:nth-child(odd) {
	background-color:#F6F6F6;
}
#content #chatList .rowOdd.private {
	background-color:#F8D0D0;
}
#content #chatList .rowEven.private {
	background-color:#F8D9D0;
}

#content #chatList .chatBotErrorMessage {
	color:red;
}
#content #chatList a {
	color:#555;
}
#content #chatList .deleteSelected {
	border-color:red;
}
#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
	background-color:#88A6C0;
	color:#FFF;
}

@media (max-width: 700px) {
	#content #emoticonsContainer {
		background-color:#FFF;
		border: 1px solid #ADADAD;
	}
}

#content #mainPanelContainer {
top: 40px;
}
#content #logoutChannelContainer {
top: 10px;
}

#content #inputFieldContainer,
#content #mainPanelContainer {
  left: 10px;
  right: 10px; }


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#loginContent {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  padding: 15px 40px;
  background: #eeeeeef5;
  border-radius: 15px;
  -webkit-box-shadow: 0px 0px 5px 2px #bbbb;
}

body {
//  background-color: #ffffff22;
  background-image: url('https://retrochat.nl/img/logos/logo512.png');
  background-repeat: no-repeat;
  background-position: center top 51%;
  background-size: 275px auto;
  background-attachment: fixed;
}
 
#content .guest {
	color:#555;
}
#content .user {
	color:#555;
}
#content .customUser {
	color:#555;
}
#content .moderator {
	color:#555;
}
#content .admin {
	color:#FF0000;
}
#content .chatBot {
	color:#444;
}

.startknop, .startknop a:link, .startknop a {
	margin: 2px 10px;
padding: 4px 10px;
  color: #333333;
  border: 1px solid #787878;
font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.8em;
   text-decoration: none;
}

.startknop, .startknop a:hover, .startknop a {
	margin: 2px 10px;
padding: 4px 10px;
  color: #333333;
  border: 1px solid #787878;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  /* font-size: 0.8em; */
padding: 4px 10px 4px;
  color: #333333;
  border: 1px solid #787878;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
  opacity: 0.3;
}

#loginContent a:hover {
	text-decoration:none;
	background: #ccc;
	opacity: 0.9;
}

/* #content a:hover,  */
.startknop a:hover, .startknop a:link {
	text-decoration:none;
	background: #ccc;
}

.ajax-chat a:link, .ajax-chat a:hover {
  color: #111;
  text-decoration: none;
}

#loginContent a:hover {
	background: #ddd;
	text-decoration:unset;
	opacity: 0.9;
}