/*Кнопки отправить и онлайн*/
.chatSendButton, .chatSendExitPanel select { color: #8e3925; font-size: 11px; font-family: Century Gothic; text-align: center;
text-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.8);
border: 0px; border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7); border: 0px;
background: -webkit-linear-gradient(180deg, rgb(191, 196, 203), rgb(79, 84, 92));
background: -moz-linear-gradient(180deg, rgb(191, 196, 203), rgb(79, 84, 92));
background: linear-gradient(180deg, rgb(191, 196, 203), rgb(79, 84, 92));}
.chatSendButton:hover, .chatSendExitPanel select:hover { animation: FlashButtonOnHover .6s infinite ease-in-out; } @-webkit-keyframes FlashButtonOnHover { 0% { color: #8e3925; text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.7), 0px 1px 1px rgba(250, 250, 250, 0.7);} 20% { color: #c74c2f; text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.4), 0px 1px 1px rgba(250, 250, 250, 0.9);} 100% { color: #8e3925; text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.7), 0px 1px 1px rgba(250, 250, 250, 0.7);}}
.chatSendButton:active, .chatSendExitPanel select:active { transition: .75s ease-in-out; color: #00ff00; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.9), 0px 1px 1px rgba(250, 250, 250, 0.9); background: -webkit-linear-gradient(180deg, rgb(79, 84, 92), rgb(191, 196, 203)); background: -moz-linear-gradient(180deg, rgb(79, 84, 92), rgb(191, 196, 203)); background: linear-gradient(180deg, rgb(79, 84, 92), rgb(191, 196, 203));
}
/*Шапка чата*/
.chatTitle {display:none;} 
.chatHeader {background-image: url(https://i.postimg.cc/3rm8ydry/105.png);
background-position: left center; background-repeat: no-repeat; background-size: auto 45px;
}
/*Шапка чата при наведении*/
.chatHeaderWrapper:hover:before { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; -webkit-animation: HoverWrapper .5s ease-in-out; -o-animation: HoverWrapper .5s ease-in-out; -ms-animation: HoverWrapper .5s ease-in-out; -moz-animation: HoverWrapper .5s ease-in-out; animation: HoverWrapper .5s ease-in-out; } @-webkit-keyframes HoverWrapper { 0% { -webkit-transform: skew(0deg);} 10% { -webkit-transform: skew(5deg) translate(3px, 0px); filter: blur(2px);} 30% { -webkit-transform: skew(-5deg) translate(-3px, 0px) scaleY(.95); filter: blur(2px);} 40% { -webkit-transform: skew(0deg) scaleY(1);} 100% { -webkit-transform: skew(0deg);} }
/* Всплывающее окно в шапке */
.chatHeaderWrapper::before { position: absolute; width: 55px; height: 45px; left: 0px; top: 0px; content:''; transition: all .55s ease-in-out; background: url(https://i.postimg.cc/br45gzPj/uksus-formula.png); background-size: 55px 45px; background-repeat: no-repeat; background-position: center center; }
.chatHeaderWrapper:active:before { width: 600px; height: 300px; left: 5px;
background-image: url(https://s.fotora.ru/3ac8507a06b70094.png);
background-size: 500px; background-color: #dadada; background-position: center center; background-repeat: no-repeat; 
transition: all .35s ease-in-out; top: 5px; border-radius: 1%; box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #c4c4c4, 0 0 5px #fff, 0 0 6px #000, 0 0 7px #000 inset, 0 0 8px #000, 0 0 10px #000 inset;  -webkit-animation: RulesBig .9s ease-in-out; -o-animation: RulesBig .9s ease-in-out; -ms-animation: RulesBig .9s ease-in-out; -moz-animation: RulesBig .9s ease-in-out;
animation: RulesBig .9s ease-in-out;}
@keyframes RulesBig { 0% { background-size: 1%;} 100% { background-size: 80%;} 
}
/* Фон привата */
.chatMain .chatPrivateMessages {
background-image: url(https://i.postimg.cc/gcqcX3YF/Fon-privata-32.png);
background-position: right top;; background-repeat:no-repeat; background-size: cover; right:200px;} 
.chatPrivateMessages.vscrollable { right: 200px;
}
/*Иконки пола в списке */
a.chatUser+img[title="Администратор"] {display:none;}
a.chatUser+img[title="Модератор"] {display: none;}
.chatPeople ul.chatPeopleList li a.chatUserSex0 b { /*нет пола*/
background-image: url(https://i.postimg.cc/8CkqjMN8/image.png) ;}
.chatPeople ul.chatPeopleList li a.chatUserSex1 b { /*мужской пол*/
background-image: url(https://i.postimg.cc/qqctb9YC/image.png);}
.chatPeople ul.chatPeopleList li a.chatUserSex2 b { /*женский пол*/
background-image: url(https://i.postimg.cc/Wb6rXkLf/image.png);
}
/*Строка приложений*/
.chatTabs ul li a {/*размер и цвет шрифта*/font-family:Century Gothic; color: #9A366B; font-size:10pt;}
.chatTabs ul li a:hover {/*размер и цвет при наведении*/font-family:Century Gothic; color: #ffffff; font-size:11pt; font-weight: bold; text-shadow: 2px 2px 0 #9A366B;
}
/*Кнопки привата*/
.chatTabs > ul > li.chatTab > a {/*Цвет и шрифт*/ background-color:#979aaa;font-size:12pt; color:#9A366B; font-weight: bold; }
.chatTabs > ul > li.chatTab.chatTabActive > a, .chatTabs > ul > li.chatTab > a:hover, .chatTabs > ul > li.chatTab > a.active {
background-color:#9A366B; /*Цвет активной кнопки привата*/}
.chatTabs > ul > li > a {/*Форма кнопок привата*/
padding: 0px 14px 0px 10px; height: 100%; text-decoration: none;
border-top: 0px none !important; border-right: 0px none !important;
vertical-align: middle; display: inline-block; line-height: 24px; border-radius: 5px;
}
/*Список. Щиты админа и модера. Иконки полов. Шрифт списка.*/
.chatPeople.vscrollable:active > .chatPeople ul.chatPeopleList { padding-right: 0px; padding-left: 200px; }
a.chatUser+img[title="Администратор"] {display:none; /*убрать корону админа* }
a.chatUser+img[title="Модератор"] {display: none; /*убрать щит модера*}
.chatPeople ul.chatPeopleList li a.chatUserSex0 b { /*нет пола*/
background-image: url(https://i.postimg.cc/8CkqjMN8/image.png) ;}
.chatPeople ul.chatPeopleList li a.chatUserSex1 b { /*мужской пол*/
background-image: url(https://i.postimg.cc/qqctb9YC/image.png);}
.chatPeople ul.chatPeopleList li a.chatUserSex2 b { /*женский пол*/
background-image: url(https://i.postimg.cc/Wb6rXkLf/image.png);}
.chatMain .chatPeople a {/*Размер шрифта списка*/font-size:12pt;font-weight: bold;
}
/* Фрейм */
.chatMessage  { /* Шрифт фрейма */ font-family: Arial; color: #464451;right: 29px;}
.chatTime { /*Время сообщений*/ float: left; ; font-size: 7pt; color: #9A366B; }
.smilesBox {/*Размер окна смайлов*/ width:38%;}
.chatMessages.vscrollable { right: 200px; }
.chatMessages.vscrollable img, .chatPrivateMessages.vscrollable img {/*Максимальный размер изображений*/
max-width: 256px; /* максимальная ширина изображений */
max-height: 128px; /* максимальная высота изображений */}
.chatMain { /*скругление углов фрейма*/ border-radius: 10px;
box-shadow: 0 0 1px #777, 0 0 2px #777, 0 0 3px #777, 0 0 4px #777, 0 0 5px #777, 0 0 6px #777, 0 0 7px #777, 0 0 20px #777 inset;
}
/*Служебные кнопки неактивны*/
.chatHeader .chatTopLine { border: 1px solid a5a5a5; border-radius:5px;
background-color:a5a5a5; font-family:Century Gothic; font-size: 12pt;
}
/* Кнопка входа */
#join-chat-button {
background-color: #979aaa; /* Цвет фона */
border: 1px solid rgba(255, 255, 255, 0.4); /* Граница (кайма) */
color:#ffffff; /* Цвет текста */
border-radius: 5px; /* Закругление */
text-shadow: -1px 0 1px rgba(154, 54, 107, 0.9); /* Тень текста */
font-size: 1em; /* Размер текста */
font-family: Century Gothic; /*Шрифт*/
transition: .3s; /* Плавность анимации */
padding: 14px 18px; font-weight: Bold; box-sizing: inherit; outline: none; cursor: pointer;}
#join-chat-button:hover {/* Кнопка входа при наведении */ background-color: #9A366B;
}
/*Кнопки нижнего меню. Размеры. Иконки*/
.chatSendLinksPanel a {font-size:9pt; font-family:Century Gothic; color:#9A366B ;text-shadow: .5 px .5px 0 #ffffff; /*оформление кнопок*/}
.chatSendLinksPanel a:hover {font-size:9pt; font-family:Century Gothic; color:#ffffff ;font-weight: bold; text-shadow: 2px 2px 0 #9A366B; /*оформление при наведении*/}
.chatSendLinksPanel a.chatLinkGold {background: url(https://i.postimg.cc/3xkqvnq6/Money-2.png) 0 0 no-repeat;/* золото */}
.chatSendLinksPanel a.chatLinkModerate {background: url(https://i.postimg.cc/MHjWGSJG/Sit-4.png) 0 0 no-repeat; /* moder */}
.chatSendLinksPanel a.chatLinkVip {background: url(https://i.postimg.cc/Nj6wFQzY/Voskl.png) 0 0 no-repeat;/* vip */}
.chatSendLinksPanel a.chatLinkImage {background: url(https://i.postimg.cc/13fJ7BpQ/Media.png) 0 0 no-repeat;/* медиа */}
.chatSendLinksPanel a.chatLinkProfile {background: url(https://i.postimg.cc/1R2SYVZw/People-2.png) 0 0 no-repeat; /* профиль */}
.chatSendLinksPanel a.chatLinkSmiles {background: url(https://i.postimg.cc/R0dGpYNS/smile-111.png) 0 0 no-repeat;/* смайлы */
}
/*Шрифт и цвет строки ввода*/
.chatSendText.chatInputText {
border-style:inset; border-width:3px; border-color:#9A366B; border-radius:5px;
background-color: #9A366B; background-repeat: repeat;
padding: 12px 10px 12px 6px;
font-size:13pt; font-weight: bold; color: #464451;
}
/* Сообщения пользователей*/
.chatMessage[data-nick="Соля"] {color: #E32636;}
.chatMessage[data-nick="error_"] {color: 5b7eab;}
.chatMessage[data-nick="mistiness"] {color:#E32636;}
.chatMessage[data-nick="Чужой"] {color: #1E1112;}
.chatMessage[data-nick="апельсиновая крыса"] {color: #C34D0A;}
.chatMessage[data-nick="Железный Феликс"] {color: #6A5ACD;}
.chatMessage[data-nick="silver_silence"] { color: #955F20;}
.chatMessage[data-nick="mistiness"] { color: #CB4154;}
.chatMessage[data-nick="Чапа"] { color: #009B76;}
.chatMessage[data-nick="Juli_Krem"] { color: #5D76CB;}
.chatMessage[data-nick="Ozon"] { color: #900020;}
.chatMessage[data-nick="Химик-теократ"] { color: #00677E;
}
/*Вставка картины*/
.chatPeople.vscrollable {width: 200px; 
background-image:url(https://s.fotora.ru/6a466fd44d8eeb87.png); 
background-position:bottom; 
background-size: 100% auto; background-repeat:no-repeat; 
transition: .5s ease-in-out;}
.chatPeople.vscrollable:active { width: 400px; background-size: 400px auto; transition: .5s ease-in-out; 
}