/*
Theme Name: Flowers
Theme URI: https://madeas.ru/product/flowers/
Author: Andrej Sharapov 
Author URI: https://madeas.ru/ 
Description:Flowers is the perfect spring template for your chat. The design of the template is simple and pleasant in appearance, a combination of delicate pink and white shades creates the atmosphere of a flower shop, which fresh flowers have just brought. It seems that being here, you can smell fresh. This template will look great on websites dedicated to colors, floral communities, etc.
Version: 1.0.1
License: GNU General Public License v3 or later 
License URI: http://www.gnu.org/licenses/gpl.html 
Text Domain: flowers
Tags: madeas, chatemplate, design, template, chatovod, arabika, flowers, chat-colors, chat, full-width-template, new-web-design, andrej-sharapov, css
This theme, like Chatovod, is licensed under the GPL. 
Use it to make something cool, have fun, and share what you've learned with others.
Linearicons icons have been supported along to the fine work of Perxis (@KingPerxis on twitter) https://linearicons.com/
* 
* 
* Copyright (c) 2018 Andrej Sharapov
*/

@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700&subset=cyrillic-ext);
* {
	font-size: 0pt !important;
	font-size: 14px!important;
	font-family: 'Comfortaa' !important;
}
a {
	text-decoration: none !important;
}
a span {
	border-bottom: none !important;
}
.chat {
 	border:0;
}
.msi,
.chatPopupMenuDiv1 {
	display:none !important;
}
.chatTabs,
.chatPeople,
.chatMain .chatMessages, 
.chatMain .chatPrivateMessages,
.chatEventDiv, 
.chatPopupMenuDiv2,
.smilesBox,
.chatHeader .chatTopLine,
.content form {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
}
input[type="submit"],
input[type=button],
#join-chat-button, 
#join-chat-button2,
input[type=text],
#nick,
.chatSendButton,
.chatSendButtonPanel,
.chatSendExitPanel select {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}
.chatHeader,
.chatTabs,
.chatMain .chatPeople,
.chatMain .chatMessages, 
.chatMain .chatPrivateMessages,
.content form {
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,.31);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,.31);
	-o-box-shadow: 0 10px 20px rgba(0,0,0,.31);
	box-shadow: 0 10px 20px rgba(0,0,0,.31);
}
.chatHeader .chatTitle,
.chatTopLineWrapper > ul > li > a,
.chatPopupMenuDiv2 .chatPopupMenuContent > p > a,
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a,
.chatTopLineWrapper > ul > li > ul > li > a {
	white-space: nowrap;
}
.smilesBox::-webkit-scrollbar,
.vscrollable::-webkit-scrollbar {
	width: 8px;
}
.smilesBox::-webkit-scrollbar-thumb,
.vscrollable::-webkit-scrollbar-thumb {
	visibility: hidden;
	opacity:0;
	
	-webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-moz-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}
.smilesBox:hover::-webkit-scrollbar-thumb,
.vscrollable:hover::-webkit-scrollbar-thumb {
	background-color: rgba(235, 97, 194, 0.3);
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
	visibility: visible;
	opacity: 1;
}
.smilesBox::-webkit-scrollbar-thumb:hover,
.vscrollable::-webkit-scrollbar-thumb:hover {
	background-color: rgba(235, 97, 194, 0.6);
}
.smilesBox::-webkit-scrollbar-thumb,
.vscrollable::-webkit-scrollbar-thumb,
.smilesBox::-webkit-scrollbar-track,
.vscrollable::-webkit-scrollbar-track {
	margin-top:7px;
	margin-bottom:7px;
}
input[type="submit"],
input[type=button],
#join-chat-button, 
#join-chat-button2 {
	background: #eb55a3;
    	border:0;
    	color: #fff;
    	cursor: pointer;
  	font-family: 'Comfortaa' !important;
    	font-size: inherit;
    	font-style: inherit;
    	font-weight: 300;
    	vertical-align: baseline;
}
input[type="submit"]:hover,
input[type=button]:hover,
#join-chat-button:hover, 
#join-chat-button2:hover {
	background: #e899cf;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
input[type="submit"]:focus,
input[type=button]:focus,
#join-chat-button:focus, 
#join-chat-button2:focus {
	outline: none;
}
/* ---------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------- chatHeader --- */
.chatHeader {
	background: rgba(255,255,255,.6);
	border: 0;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}
.chatHeader,
.chatHeader .chatHeaderWrapper {
	top: 0;
    	right: 10px;
	left: 10px;
	padding:10px 40px 10px !important;
	margin:0 !important;
}
.chatHeader .chatTitle {
    	font-family: 'Comfortaa', Clicker Script, cursive;
    	font-weight: normal;
    	font-size: 34px!important;
    	line-height: 42px;
	margin: 0;
	margin-top: -10px;
	overflow: hidden;
	padding: 0;
    	text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
	width: 80%;
}
/* ---------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------ chatTopLine --- */
.chatHeader .chatTopLine {
    	border-color:#cfcfc9;
	background-color: #fff;
}
.chatTopLineWrapper ul li ul::after {
  	content: '';
  	position: absolute;
  	width: 0;
  	height: 0;
  	border: 8px solid transparent;
  	border-bottom-color: #ccc;
  	top: -17px;
  	right: 20%;
}
.chatTopLineWrapper ul li ul::before {
  	content: '';
  	position: absolute;
  	top: -16px;
  	right: 20%;
  	width: 0;
  	height: 0;
  	border: 8px solid transparent;
  	border-bottom-color: #fff;
  	z-index:3;
}
.chatTopLineWrapper ul li:first-child ul::after {
  	top: -17px;
  	left: 20%;
}
.chatTopLineWrapper ul li:first-child ul::before {
  	top: -16px;
  	left: 20%;
  	z-index:3;
}
.chatTopLineWrapper ul li:nth-child(2) ul::after {
  	top: -17px;
  	left: 55%;
}
.chatTopLineWrapper ul li:nth-child(2) ul::before {
  	top: -16px;
  	left: 55%;
  	z-index:3;
}
.chatTopLineWrapper > ul > li > a {
	background: #eb55a3;
	color:#fff;
	text-shadow: none;   
}
.chatTopLineWrapper > ul > li > a:hover {
	background-color: #e899cf;
}
.chatTopLineWrapper ul li.chatMenuItemWithSeparator a:hover {
  	background-image:url("//st1.chatovod.ru/i/widget/vborder.png");
}
.chatTopLineWrapper > ul > li:first-child > a {
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
}
 body:not(.has-nick) .chatTopLineWrapper > ul > li:nth-child(2) > a {
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
}
.chatTopLineWrapper > ul > li:last-child > a {
	border-top-right-radius:6px;
	border-bottom-right-radius:6px;
}
#chatMainMenuChatovod {
	margin-left:-15px;
}
#chatMainMenuChat {
	margin-left:30px;
}
.chatTopLineWrapper ul li ul,
.chatTopLineWrapper ul li ul li,
.chatTopLineWrapper ul li ul li a {
    	width: 230px !important;
	padding:0;
}
.chatTopLineWrapper ul li ul li a {
	padding:7px;
    	width: 216px !important;
}
.chatTopLineWrapper > ul > li > ul {
	border:1px solid #cfcfc9;
}
.chatTopLineWrapper > ul > li > ul > li > a:hover {
	background-color: #e899cf;
	color:#fff;
}
.chatTopLineWrapper ul li {
    	float: left !important;
}
/* ---------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------- chatMain --- */
.chatMain,
.chatFull .transparent {
	top: 0;
	bottom: 0;
	background-color: #fff;
	background-image: linear-gradient(45deg, rgba(47,23,15,.35),rgba(47,23,15,.15)), url(http://demo.madeas.ru/img/chat/bg/bg-flowers.jpg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 1;
}
.chatMain .chatMessages, 
.chatMain .chatPrivateMessages {
	top:141px;
	bottom:6em;
    	right: 210px;
	background-color: #fff;
	padding: 10px 5px 15px;
	margin: 0 10px;
}
.chatTabs {
    	background: #fff;
    	top:85px;
    	right: 220px;
    	left: 10px;
}
.chatTabs ul li.appTab a {
    	background-color: transparent;
	background-image: url(http://demo.madeas.ru/img/chat/flower.png) !important;
    	background-position: 4px 4px;
    	background-repeat: no-repeat;
    	background-size: 16px;
}
.chatTabs > ul > li.chatTab.chatTabActive > a,
.chatTabs > ul > li.chatTab > a:hover, 
.chatTabs > ul > li.chatTab > a.active {
	background-color: #fff !important;
}
/* ---------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------- chatPeople --- */
.chatMain .chatPeople {
	background-color: rgba(255,255,255,.6);
	border: 0px dotted #fff;
	color: #fff !important;
	top: 85px;
    	right: 10px;
	bottom: 6em;
	padding-top:7px;
	padding-bottom:7px;
	width: 200px;
}
.chatPeople ul.chatPeopleList li a.chatUserSex2 b {
    	position: relative;
}
.chatPeople ul.chatPeopleList li a.chatUserSex2 b::before {
    	width: 20px;
   	height: 20px;
    	content: '';
    	position: absolute;
    	top: 7px;
    	left: -5px;
  	background-color: transparent;
  	background-image: url(http://demo.madeas.ru/img/chat/flower-16x16.png);
  	background-position: 0 0;
  	background-repeat: no-repeat;
  	background-size: 12px 12px;
}
.chatMain .chatPeople.vscrollable::after {
  position:absolute;
  bottom:2px;
  right:5px;
  content:'ChaTemplate';
  color:#ccc;
  font-size:9px;
}
/* ---------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------- chatFooter --- */
.chatFooter {
    	background-color: #fff;
}
.chatEventDiv, 
.chatPopupMenuDiv2 {
  	background: #fff;
  	bottom: 72px !important;
  	top: inherit !important;
  	-webkit-box-shadow: 0px 0px 7px rgba(0,0,0,.31);
  	-moz-box-shadow: 0px 0px 7px rgba(0,0,0,.31);
  	box-shadow: 0px 0px 7px rgba(0,0,0,.31);
}
.chatPopupMenuDiv2,
.chatPopupMenuDiv2 .chatPopupMenuContent {
    	left: 15px !important;
    	top: auto !important;
	width: 325px !important; height: 250px !important;
}
.chatPopupMenuDiv2::after {
  	content: '';
  	position: absolute;
  	left: 5%;
  	width: 0;
  	height: 0;
  	border: 10px solid transparent;
  	border-top-color: #ccc;
  	bottom: -20px;
}
.chatPopupMenuDiv2::before {
  	content: '';
  	position: absolute;
  	left: 5%;
  	width: 0;
  	height: 0;
  	border: 10px solid transparent;
  	border-top-color: #fff;
  	bottom: -19px;
  	z-index:3;
}
.chatLinkVip {
  	padding-left: 21px;
  	padding-right: 16px;
}
.chatLinkVip::after {
  	content:'vip';
}
.smilesBox {
	background-color:#fff;
	margin: 1px -3px;
	padding-left:3px;
}
#join-chat-button, 
#join-chat-button2 {
    	padding: 16px 16px;
	height: 48px;
}
.chatSendExitPanel select {
	border:0;
	height:28px !important;
	border: 1px solid #cfcfc9 !important;
}
.chatSendButton,
.chatSendButtonPanel {
	width: 120px !important;
	height:28px !important;
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendTextPanel {
    	right: 244px;
}

/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- content --- */

input[type=text],
#nick {
    	background-clip: padding-box;
	border: 1px solid #cfcfc9 !important;
    	font-family: inherit;
    	font-size: 1rem;
	height: 2em;
    	line-height: 1.5;
    	padding-left: .75rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input[type=text]:focus,
#nick:focus {
    	background-color: transparent;
    	border-color: rgba(235, 97, 194, .6);
    	outline: 0 !important;
    	box-shadow: 0 0 0 0.2rem rgba(235, 97, 194, 0.25);
}
.chatSetupNickname {
    	position: absolute;
    	left: 50%;
	width:200px;
	margin-left:-100px;
    	top: 0;
}
.content form {
    	background-color: rgba(255,255,255,.45);
    	height: 240px;
    	width: 400px;
    	margin: -150px 0 0 -230px;
    	padding: 30px;
    	position: absolute;
color:#fff !important;
    	top: 50%;
    	left: 50%;
    	z-index: 0;
}
#account-info {
	text-align: center;
	font: 600 36px 'Comfortaa',sans-serif !important;
}
#email {
	display: block;
}
#chatImageUrl {
	max-width:95%;
	margin-bottom:1em;
}
input[type="submit"] {
	width: 150px;
	height:40px;
	margin: auto;
}