body {
  font-family: 'Open Sans', sans-serif;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(172, 172, 172, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(68, 158, 227, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(68, 158, 227, 0.7);
}

.dark-mode h2 {
  color: #ffffff;
}
.colors {
  background-color: #449EE3;
  width: 100%;
  height: 100%;
}

.dark-mode .colors {
  background-color: #1F1F1F;
}


#chatno {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 12px;
  width: 100%;
  height: 100%;
}

.frontpage {
  background-color: #ffffff !important;
}

.dark-mode .frontpage {
   background-color: #292929 !important;
}

#modal {
  opacity: 0.0;  
  filter: alpha(opacity=0);  
  -moz-opacity: 0.0;  
  -khtml-opacity: 0.0;
  background-color: #000000;  
  width: 100%;  
  height: 100%;  
  position: absolute;  
  top: 0px;  
  left: 0px;  
}

.image-tiny {
  width: 22px;
  height: 24px;
}

.image-small {
  width: 43px;
  height: 47px;
}

.image-medium {
  width: 100px;
  height: 100px;
}

.errorlist {
  color: #dd0000;
  font-weight: bold;
  margin-bottom: 10px;
}

#chatno-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 90px;
  width: 592px;
}

#chatno-content-top {
  width: 592px;
  height: 13px;
  border-radius: 0 20px;
  background-color: #FFFFFF;
}

#chatno-content-bottom {
  width: 592px;
  height: 13px;
  border-radius: 0 0 20px 20px;
  background-color: #FFFFFF;
}

#chatno-content-middle {
  background-color: #FFF;
  height: auto;
}

#chatno-bottom-links {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

#chatno-bottom-links a {
  margin: 0px 10px 0px 0px;
  text-decoration: none;
  color: #2266ff;
}


#logo {
  position: absolute;
  left: -15px;
  top: -28px;
}

#begin-box {
  padding: 60px 0px 0px 0px;
}

#chatno.authenticated #begin-box {
  display: none;
}

#community {
  width: 535px;
  height: 93px;
  position: relative;
  left: 30px;
  top: -25px;
  background: url('/include/gfx/chatno/chatno-community.svg') no-repeat;
}

#begin-chat {
  width: 300px;
  height: 60px;
  position: relative;
  left: 280px;
  top: 0;
  background-color: #E96215;
  border-radius: 80px;
  border: 20px solid #F4F4F4;
  /* background: url('/include/gfx/chatno/begin-button-text.svg') no-repeat; */
}

.dark-mode #begin-chat {
  border: 20px solid #444444;
}

#begin-chat-btn {
  width: 300px;
  height: 60px;
  cursor: pointer;
  position: relative;
  top: 15px;
  left: 30px;
  background: url('/include/gfx/chatno/begin-button-text.svg') no-repeat;
}

#chatno-content {
  /* Preload background on unrelated div (which has no background) */
  background: url('/include/gfx/chatno/chatno-begin-hover.svg') no-repeat -9999px -9999px;
}

#begin-chat:hover {
  background-color: #F7891E;
  /* background: url('/include/gfx/chatno/chatno-begin-hover.svg') no-repeat; */
}

#login-box {
  display: none;
  padding: 20px 0px 0px 0px;
  margin: 0px 0px 0px 30px;
}

#login-box input {
  outline: none;
}

#login-box input[type=text] {
  color: #b1b1b1;
  font-style: italic;
}

#nickname-input,
#email-input {
  font-size: 30px;
  width: 512px;
  padding: 17px 0px 17px 20px; /* (64px input height - 30px font height) / 2 */
}

.grey-gradient,
.forgot-password-request input[type=text] {
  background-color: #d6d6d6; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, #d6d6d6, #ebebeb); /* For Chrome and Safari */
  background-image:    -moz-linear-gradient(top, #d6d6d6, #ebebeb); /* For old Fx (3.6 to 15) */
  background-image:     -ms-linear-gradient(top, #d6d6d6, #ebebeb); /* For pre-releases of IE 10*/
  background-image:      -o-linear-gradient(top, #d6d6d6, #ebebeb); /* For old Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(to bottom, #d6d6d6, #ebebeb); /* Standard syntax; must be last */
  border: 1px solid #cccccc;
  border-radius: 15px;
}

#email-input {
  margin: 10px 0px 0px 0px;
}

#username-invalid-error,
#username-toolong-error,
#username-occupied-error {
  display: none;
  color: #dd0000;
  font-size: 18px;
  font-style: italic;
  margin: 5px 0px 0px 10px;
}

#username-registered,
#username-unregistered {
  display: none;
  margin: 10px 0px 0px 0px;
}

#username-registered-msg,
#username-unregistered-msg {
  font-size: 18px;
  color: #9b9b9b;
}

#username-unregistered-msg {
  margin: 0px 0px 10px 0px;
}

#username-registered-msg-username,
#username-unregistered-msg-username {
  font-weight: normal;
  font-style: italic;
}

#login-forgot-pw {
  margin-top: 10px;
}

#login-forgot-pw a {
  color: #159f33;
}

#login-box-pw {
  margin: 10px 0px 0px 0px;
}

#login-avatar,
#login-right {
  float: left;
}

.avatar-medium {
  width: 100px;
  height: 110px;
  position: relative;
}

.avatar-medium img {
  /* Center image in parent (which must be position:relative) */
  position:absolute;top:0;bottom:0;margin:auto;left:0;right:0;
  max-width: 100px;
  max-height: 110px;
}

#login-right {
  margin: 0px 0px 0px 10px;
  width: 409px;
}

#pw-input {
  font-size: 24px;
  width: 400px;
  /*height: 53px;*/
  padding: 14px 0px 15px 20px; /* (53px input height - 24px font height) / 2 */
}

#login-btn {
  cursor: pointer;
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  width: 423px;
  height: 53px;
  border: none;
  outline: none;
  margin: 5px 0px 0px 0px;
}

#login-btn.disabled {
  cursor: not-allowed;
}

#login-box #register-btn,
#login-box #create-profile-btn {
  cursor: pointer;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  width: calc(100% - 30px);
  height: 46px;
  padding: 10px 0;
}

.green-gradient {
  background-color: #81BA5B;
}

.green-gradient.disabled {
  background-color: #406d2c; 
  border-radius: 8px;
}

.dark-mode .green-gradient.disabled {
  background-color: #393939;
}

.green-gradient,
.forgot-password-request input[type=submit],
#channel-list .channel-item:hover { 
  background-color: #70bd4c; 
  border-radius: 8px;
}

.dark-mode #channel-list .channel-item:hover { 
  background-color: #393939;
}

#login-box #create-profile-btn {
  margin: 15px 0 0 0;
  background-color: #81BA5B;
  height: auto;
  width: calc(100% - 30px);
  border: 0;
}

#register-btn h3 {
  color: #ffffff;
  font-size: 24px;
  margin-top: 10px;
}

#login-anon {
  color: #b9b9b9;
  text-align: center;
  font-size: 18px;
  margin: 10px 0px 0px 0px;
}

#login-anon-btn {
  color: #159f33;
  cursor: pointer;
}
#login-error {
  color: #dd0000;
  font-size: 16px;
  margin: 10px 0px 0px 0px;
}

#create-profile {
  display: none;
}

#create-profile-form .validation-error,
#profile-form .validation-error {
  display: none;
  margin: 5px 0px 5px 5px;
  color: #dd0000;
  font-weight: bold;
}

#profile-mail-sent,
#user-banned,
#user-geoblocked {
  display: none;
}

#profile-mail-sent,
#user-activation,
#user-banned,
#user-geoblocked {
  color: #9b9b9b;
  margin: 0px 0px 0px 30px;
  padding: 25px 0px 0px 0px;
}

#profile-mail-sent h2,
#user-activation h2,
#user-banned h2,
#user-geoblocked h2 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: bold;
}

#profile-mail-sent p,
#user-activation p,
#user-banned p,
#user-geoblocked p {
  font-size: 20px;
}

#profile-mail-sent .profile-mail-sent-support {
  margin: 10px 0px 0px 0px;
}

#user-activation a {
  text-decoration: none;
  color: #5555ff;
}

/* Channels */

#channel-box {
  display: none;
}

#channel-box-heading {
  font-size: 24px;
  padding: 30px 0px 0px 20px;
  color: #9b9b9b;
}

#channel-list {
  margin: 30px;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}

#channel-item-template {
  display: none;
}

#channel-list.login-in-progress .channel-item {
  opacity: 0.2;
  filter: alpha(opacity=0.2);  
  -moz-opacity: 0.2;  
  -khtml-opacity: 0.2;
  cursor: progress;
}

#channel-list .channel-item {
  color: #9b9b9b;
  padding: 5px 0px 0px 10px;
  width: 524px;
  height: 50px;
  cursor: pointer;
}

#channel-list .channel-item:hover {
  color: #ffffff;
}

#channel-list .channel-name {
  font-size: 16px;
  font-weight: bold;
}

#channel-list .channel-description {
  margin: 8px 0px 0px 0px;
}

#channel-list .channel-subject {
  font-size: 16px;
  font-style: italic;
}

#channel-list-logout {
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 16px;
  margin: 5px 20px 0px 0px;
}

#channel-list-logout a {
  color: #159f32;
  text-decoration: none;
}

/* Profile activation */

#chatno-content-middle.activation {
  height: auto;
}

.activation table {
  float: left;
  text-align: left;
  margin-bottom: 10px;
  position: relative;
  left: -15px;
}

.activation table th {
  color: #a2a2a2;
  font-size: 18px;
  padding: 0px 15px 20px 0px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: normal;
}

.activation table td {
  padding: 0px 10px 0px 0px;
}

.activation table td.second-column {
  width: 175px;
}

.activation textarea {
  width: 400px;
  height: 60px;
}

.activation td.wide-select select {
  width: 100%;
}

.activation #id_birth_year {
  width: 70px;
  float: right;
}


.activation .upload-avatar {
  position: relative;
  left: 380px;
  top: -430px;
  float: left;
}

#user-activation .upload-avatar p {
  font-size: 12px;
  width: 150px;
  margin: 0px 0px 10px 0px;
}

.activation .image-medium {
  margin: 10px 0px 10px 0px;
}

.activation .image-disclaimer {
  margin: 50px 0px 0px 0px;
  width: 180px;
}

.activation .spinner {
  float: left;
  width: 16px;
  height: 16px;
  margin: 0px 15px 0px 0px;
}

.activation .spinner img {
  display: none;
}

.activation #profile-save-btn {
  cursor: pointer;
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  width: 404px;
  height: 47px;
  border: none;
}

/* Show profile */

.show-profile {
  width: 635px;
  background: #f2f2f2;
}

.dark-mode .show-profile {
  background-color: #333333;
}

.show-profile .show-profile-top {
  border-bottom: 1px solid #dcdcdc;
}

.dark-mode .show-profile .show-profile-top {
  border-bottom: 1px solid #464646;
}

.show-profile .avatar {
  float: left;
  padding: 0px;
  margin: 0px;
}

.show-profile .profile-top-right {
  float: left;
  margin: 10px 0px 0px 10px;
}

.show-profile .profile-username {
  font-size: 16px;
  font-weight: bold;
  color: #5d5c5c;
}

.dark-mode .show-profile .profile-username {
  color: #ffffff;
}

.show-profile .profile-user-age {
  font-size: 12px;
  font-style: italic;
  color: #5d5c5c;
}

.dark-mode .show-profile .profile-user-age {
  color: #666666;
}

.show-profile ul.profile-summary {
  margin-top: 35px;
}

.show-profile li.profile-summary {
  float: left;
  color: #5d5c5c;
  padding: 4px;
  background: #c1d9f0;
  font-size: 12px;
  margin: 0px 3px 0px 0px;
}

.show-profile .profile-tabs {
  padding: 10px 0px 0px 0px;
  margin: 0px 0px 0px 12px;
}

.show-profile .profile-tabs-menu {
  position: relative;
  top: 1px;
}

.show-profile .profile-tabs-menu li {
  color: #5d5c5c;
  padding: 5px 10px 5px 10px;
  background: #dcdcdc;
  border: 1px solid #dcdcdc;
  float: left;
  font-size: 14px;
  letter-spacing: -1px;
  cursor: pointer;
}

.dark-mode .show-profile .profile-tabs-menu li {
  color: #ffffff;
  background-color: #333333;
  border: 0;
}

.show-profile .profile-tabs-menu li.tab-btn-edit {
  float: right;
  margin: 0px 25px 0px 0px;
}

.show-profile .profile-tabs-menu li.selected {
  color: #ffffff;
  background: #414141;
  border-bottom: 1px solid #464646;
}

.dark-mode .show-profile .profile-tabs-menu li.selected {
  color: #ffffff;
  background: #222222;
  border-bottom: 1px solid #222222;
}

.show-profile .profile-tabs-content {
  background: #ffffff;
  padding: 20px 0px 0px 20px;
}

.dark-mode .show-profile .profile-tabs-content {
  background-color: #222222;
}

.show-profile .profile-tabs-bio {
  font-size: 14px;
  color: #5d5c5c;
}

.dark-mode .show-profile .profile-tabs-bio {
  color: #ffffff;
}

.show-profile .profile-tabs-bio h2 {
  font-size: 20px;
  margin: 5px 0px 10px 0px;
}

.show-profile .profile-tabs-bio h3 {
  font-size: 18px;
  margin: 5px 0px 30px 0px;
}

.show-profile .profile-tabs-bio p {
  margin: 0px 0px 20px 0px;
}

/* Edit profile */

.edit-profile table {
  float: left;
  text-align: left;
  margin-bottom: 10px;
  position: relative;
  left: -15px;
}

.edit-profile table th {
  color: #a2a2a2;
  font-size: 14px;
  padding: 0px 10px 10px 0px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: normal;
}

.edit-profile table td {
  padding: 0px 10px 0px 0px;
}

.edit-profile table td.second-column {
  width: 175px;
}

.edit-profile textarea {
  width: 400px;
  height: 60px;
}

.edit-profile td.wide-select select {
  width: 100%;
}

.edit-profile #id_birth_year {
  width: 70px;
  float: right;
}

.edit-profile .upload-avatar {
  position: relative;
  left: 350px;
  top: -310px;
  float: left;
}

.edit-profile .upload-avatar p {
  font-size: 12px;
  width: 130px;
}

.edit-profile .image-medium {
  float: left;
}

.edit-profile .image-disclaimer {
  width: 210px;
  margin-top: 10px;
}

.edit-profile .spinner {
  float: left;
  width: 16px;
  height: 16px;
  margin: 0px 15px 0px 0px;
}

.edit-profile .spinner img {
  display: none;
}

.file-upload {
  position: relative;
  left: -20px;
  top: 20px;
  overflow: hidden;
  display: inline-block;
  position: relative; 
  vertical-align: middle;
  text-align: center;

  color: #fff;
  border: 2px solid #a2a2a2;
  background: #bebebe;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
    
.file-upload:hover { 
  background: #2FA2FF;
  cursor: pointer;
}

.file-upload.focus { 
  outline: 2px solid yellow;
}

.file-upload input {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: 70px;

  /* Loses tab index in webkit if width is set to 0 */
  opacity: 0;
  filter: alpha(opacity=0);
}

.file-upload span {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;

  /* Adjust button text vertical alignment */
  padding-top: .45em;
}

/* Adjust the button size */    
.file-upload { height: 25px; }
.file-upload,
.file-upload span { width: 80px; }

.edit-profile #profile-save-btn {
  width: 74px;
  height: 30px;
  background: url('/include/gfx/chatno/chatno-edit-profile.png');
  border: none;
  text-indent:-9999px;
}

.edit-profile .profile-updated-text {
  color: #497949;
}

/* Wall */

.wall-message-form input {
  width: 540px;
  padding: 8px 10px;
  border: 1px solid rgba(119, 119, 119, 0.25);
  border-radius: 4px;
}

.wall-messages-list {
  height: 300px;
  width: 580px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.wall-messages-list .wall-message {
  width: 560px;
  padding: 8px 0px 8px 0px;
}

.wall-message .wall-message-left {
  float: left;
}

.wall-message .wall-message-right {
  margin: 0px 0px 0px 10px;
  float: left;
  width: 490px;
}

.wall-message.wall-message-reply {
  background-color: #ebebeb;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}

.dark-mode .wall-message.wall-message-reply {
 background-color: #333333;
 border-top: 1px solid #222222;
 border-bottom: 1px solid #222222;
}

.wall-message-reply .wall-message-left {
  margin: 0px 0px 0px 30px;
}

.wall-message-reply .wall-message-right {
  width: 435px;
}

.wall-message .wall-message-content {
  margin: 0px 0px 10px 0px;
  color: #5d5c5c;
  font-size: 14px;
}

.dark-mode .wall-message .wall-message-content {
  color: #ffffff;
}

.wall-message .wall-message-from {
  float: left;
}

.wall-message .wall-message-reply {
  float: right;
}

.wall-message .wall-message-reply a {
    display: block;
    width: 78px;
    height: 19px;
    background: url('/include/gfx/chatno/chatno-comment.png') no-repeat;
}

.wall-message .wall-message-from {
  color: #a9a9a9;
  font-style: italic;
}

.wall-message .wall-message-from .wall-message-username {
  color: #2f90ea;
}

.wall-message .wall-message-reply-box {
  display: none;
}

.wall-message .wall-message-reply-box img {
  margin: 0px 8px 0px 0px;
  float:left;
}

.wall-message .wall-message-reply-box textarea {
    width: 250px;
}


/* Forgot password */

.dark-mode .forgot-password-request {
  background-color: #292929 !important;
}

.dark-mode .forgot-password-sent {
  background-color: #292929 !important;
}

#chatno-content-middle.forgot-password-request {
  padding: 30px;
  color: #9b9b9b;
}

#chatno-content-middle.forgot-password-reset {
  padding: 30px;
  color: #9b9b9b;
}

#chatno-content-middle.forgot-password-reset-invalid {
  padding: 30px;
  color: #9b9b9b;
}

#chatno-content-middle.forgot-password-changed {
  padding: 30px;
  color: #9b9b9b;
}

.forgot-password-reset h1,
.forgot-password-request h1,
.forgot-password-changed h1,
.forgot-password-reset-invalid h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.forgot-password-reset h2,
.forgot-password-sent h2,
.forgot-password-request h2 {
  font-size: 14px;
  margin-bottom: 30px;
}

.forgot-password-reset input,
.forgot-password-request input {
  border: 0px;
  outline: none;
  color: #9b9b9b;
  margin-bottom: 20px;
}

.forgot-password-reset input[type=password],
.forgot-password-request input[type=text] {
  font-size: 15px;
  width: 505px;
  padding: 12px 0px 13px 20px; /* (40px input height - 15px font height) / 2 */
}

.forgot-password-reset input[type=submit],
.forgot-password-request input[type=submit] {
  color: #ffffff;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  width: 527px;
  height: 52px;
  cursor: pointer;
}

#chatno-content-middle.forgot-password-sent {
  padding: 30px;
  height: 20px;
  color: #9b9b9b;
}

.forgot-password-sent h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.dialog-window-body .dialog-window-ok-btn {
  border-radius: 7px;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
}

.themebutton {
	background-color: #346fc0;
	border: 1px solid #346fc0;
	border-radius: 4px;
	padding: 8px 16px;
	color: #fff;
	cursor: pointer;	
}

.dark-mode .themebutton {
	background-color: #449EE3;
	border: 1px solid #449EE3;
}

.second-button {
	padding: 8px 16px;
	border: 1px solid #ffffff;
	color: #ffffff;
	border-radius: 4px;
	background-color: #449EE3;
}

.dark-mode .second-button {
	border: 1px solid #ffffff;
	background-color: #252525;
}

.logout-button {
	border: 1px solid #346fc0;
	padding: 8px 16px;
	border-radius: 6px;
	color: #346fc0;
	background-color: #ffffff;
}

.dark-mode .logout-button {
	background-color: #292929;
	border: 1px solid #dddddd;
	color: #ffffff;
}

.snippet-bg {
        background-color: rgba(52, 123, 211,0.7);
	padding: 15px;
}

.dark-mode .snippet-bg {
	background-color: rgba(0, 0, 0,0.2);
}

.pridebutton {
  background-color: #404663;
  color: #fff;
  border: 0;
  font-size: 2rem;
  font-weight: 400;
  padding: 0.5em 1.25em;
  border-radius: 0.5em;
  z-index: 999;
  position: relative;
  display: flex;
  gap: 0.5em;
  box-shadow:
    0px 1.7px 2.2px rgba(0, 0, 0, 0.02),
    0px 4px 5.3px rgba(0, 0, 0, 0.028),
    0px 7.5px 10px rgba(0, 0, 0, 0.035),
    0px 13.4px 17.9px rgba(0, 0, 0, 0.042),
    0px 25.1px 33.4px rgba(0, 0, 0, 0.05),
    0px 60px 80px rgba(0, 0, 0, 0.07);
}