/*кнопки: общий и приват*/
.chatTabs > ul > li.chatTab.chatTabActive > a, .chatTabs > ul > li.chatTab > a:hover, .chatTabs > ul > li.chatTab > a.active {
    background-image: url("https://images.wallpaperscraft.ru/image/single/gradient_raznotsvetnyj_abstraktsiia_203236_1280x720.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 5px 5px 5px 5px;
    font-size: 12pt;
    font-family: ;
    color: #FFFFFF;
    font-style: normal;
    border: 1px solid #000080;
}
.chatTabs > ul > li.chatTab > a {
    background-image: url("https://images.wallpaperscraft.ru/image/single/gradient_raznotsvetnyj_pastelnyj_203977_1280x720.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 5px 5px 5px 5px;
    font-size: 17pt;
    font-family: ;
    color: #FFFFFF;
    font-style: normal;
    border: 1px solid #4040A0;
}

/*ОБВОДКА НИКА РАМОЧКОЙ-15*/

.chatPeople ul.chatPeopleList li { text-shadow: 0px: 1px 0 #000; background-color: transparent; background-image: url("https://images.wallpaperscraft.ru/image/single/gradient_tsvet_kraska_173788_1280x720.jpg"); background-position: right 0 bottom 0; background-repeat: no-repeat; background-size: 150% auto; border: 2px solid #fff; border-radius: 8px; box-shadow:1px 1px 6px #000,-1px -1px 1px #fff; }.chatTabs ul { text-shadow: 0px 1px 0 #000; background-color: transparent; background-image: url(""); background-position: right 0 bottom 0; background-repeat: no-repeat; background-size: 100% auto; border: 2px solid #fff; border-radius: 5px; box-shadow:1px 1px 6px #000,-1px -1px 1px #fff; }
О
.chatPeople { background-image: url("https://gif-kartinki.ru/13/ng7.gif"); background-position: bottom; background-repeat: repeat-x; background-size: 100% }

/*Мигание ников*/

.chatMessageToMe .chatToUser {

padding: 0px 10px 0px 10px;
    background: Violet;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
border-radius:3px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background:DeepSkyBlue ;}
    25%  {background:lightblue;}
    50%  {background:DarkViolet ;}
    75%  {background:DeepSkyBlue ;}
    100% {background:Red;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background:DeepSkyBlue ;}
    25%  {background:Violet;}
    50%  {background:DarkViolet ;}
    75%  {background:DeepSkyBlue ;}
    100% {background:Red;}
}
/*Фон в привате*/

.chatMain .chatPrivateMessages {
background-image: url("https://images.wallpaperscraft.ru/image/poverhnost_svetlyy_fon_list_50523_300x168.jpg");
background-position: left top;
background-repeat:no-repeat;
background-size: 100% 100%;

border-image-width: 3px;
border-image-source: url(http://imgs.su/users/70140/1488814776.gif);
border-image-slice: 30;
border-image-repeat: stretch;
box-shadow:  -6px 6px 7px -4px #333;
}

/*РАЗМЕР НИЖНИХ ССЫЛОК-06*/
 .chatFooter .chatFooterWrapper .chatPanel .chatSendLinksPanel {
    position: absolute;
    left: 16px;
    top: 7px;
    font-weight: normal;
    font-size: 12pt;
    z-index: 99;
}

/* Строка ввода текста в чат */
.chatSendText.chatInputText {
border-style: inset;
border-width: 2px;
background-color: #ffffff;
font-size: 11pt;
color: #000000;
border-radius:15px;
}

.chatMessage.chatMessageToMe:nth-last-child(7) {margin-left: 10px;}
.chatMessage.chatMessageToMe:nth-last-child(6) {margin-left: 15px;}
.chatMessage.chatMessageToMe:nth-last-child(5) {margin-left: 20px;}
.chatMessage.chatMessageToMe:nth-last-child(4) {margin-left: 25px;}
.chatMessage.chatMessageToMe:nth-last-child(3) {margin-left: 30px;}
.chatMessage.chatMessageToMe:nth-last-child(2) {margin-left: 35px;}
.chatMessage.chatMessageToMe:last-child        {margin-left: 40px;}


.chatHeader .chatTitle {
    padding-left:45px;
}
.chatHeader .chatTitle::before {
    position: absolute;
    width:100px;
    height:45px; 
    top:12px;
    left:12px;
    content:'';
    background: url('') 0 0 no-repeat;
    background-size:40px;
    transition:all 0.3s ease;
}

.chatOpenPopup .chatUserNick {
font-size:0;
}
.chatOpenPopup .chatUserNick:before,
.chatOpenPopup .chatUserNick:after,
.chatOpenPopup {
font-size:16px;
}
.chatOpenPopup .chatUserNick:before {
content:'Profilim'
}

.chatPeople .chatPeopleTitle {
font-size:0;
}
.chatPeople .chatPeopleTitle:before,
.chatPeople .chatPeopleTitle:after,
.chatUsersCount {
font-size: 14px;
}
.chatPeople .chatPeopleTitle:before {
content:'Ulgamda:';
}

.chatUserFrom   {
text-shadow: 0px 1px 0 #000;
background-color: transparent;
background-image: url("http://storage.ruelsoft.org/storage/file/get/1428829230044 ");/*Картинку анимации можно свою ставить */
background-position: right 0 bottom 0;
background-repeat: no-repeat;
background-size: 100% auto;

border: 2px solid #fff;
border-radius: 6px;

 box-shadow:1px 1px 6px #000,-1px -1px 1px #fff;
}

#chatUserMiniMenu  {
text-shadow: 0px 1px 0 #000;
background-color: transparent;
background-image: url("https://s8.hostingkartinok.com/uploads/images/2017/09/7f98a0f5a06d4fab29511ce06bc75ed7.gif ");
background-position: right 0 bottom 0;
background-repeat: no-repeat;
background-size: 150% auto;

border: 2px solid #fff;
border-radius: 8px;

 box-shadow:1px 1px 6px #000,-1px -1px 1px #fff;
}


.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel {
text-shadow: 0px 1px 0 #000;
background-color: transparent;
background-image: url("https://s8.hostingkartinok.com/uploads/images/2017/09/e9819c500aad7d1b004a0d78ea0a3101.gif ");/*Картинку анимации можно свою ставить */
background-position: right 0 bottom 0;
background-repeat: no-repeat;
background-size: 150% auto;

border: 2px solid #fff;
border-radius: 8px;

 box-shadow:1px 1px 6px #000,-1px -1px 1px #fff;
}


.chatSendButton{
 color:#00c6ff; 
 padding: 3px 0px;
 text-transform: uppercase;
 width:350px;
 text-decoration:none;
 text-align:center;
 margin:0px 0;
 display: block;
 background-image: linear-gradient(to left,transparent,transparent 50%,#00c6ff 50%,#00c6ff);
 background-position: 100% 0;
 background-size: 200% 100%;
 transition: all .25s ease-in;
 font: 00 12px tahoma;
 border: 1px solid #00C6FF;
}
.chatSendButton:hover {
background-position: 0 0;
color:#fff;
}
/*Ulgamda:*/
.chatSendExitPanel select{
 color:#00c6ff; 
 padding: 3px 0px;
 text-transform: uppercase;
 width:100px;
 text-decoration:none;
 text-align:center;
 margin:0px 0;
 display: block;
 background-image: linear-gradient(to left,transparent,transparent 50%,#00c6ff 50%,#00c6ff);
 background-position: 100% 0;
 background-size: 200% 100%;
 transition: all .25s ease-in;
 font: 00 10px tahoma;
 border: 1px solid #00C6FF;
}
.chatSendExitPanel select:hover {
background-position: 0 0;
color:#fff;
}


#join-chat-button:before {
  display: inline-block;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 100px;
  border: solid rgb(4,88,192);
  border-width: 3px 10px;
  outline: none;
  opacity: 1;
  transition: .6s, opacity 0s 9999999s, visibility 0s 9999999s;
} 
#join-chat-button {
  position: relative;
  padding: calc(8px + 3px - 1px) calc(15px + 10px - 1px);
  border: 1px solid rgba(62,153,239,.5);
  background: linear-gradient(to left, rgb(62,153,239) 1%, #fff 3%, rgb(44,135,232) 8%, rgba(255,255,255,.3) 50%, rgb(44,135,232) 92%, #fff 97%, rgb(62,153,239) 99%) no-repeat;
}
#join-chat-button:before {
  content:  "";
  position:  absolute; 
  bottom: -7px;
  left: -1px;
  width: calc(100% - (15px + 10px - 1px)*2);
  background: #fff linear-gradient(rgb(58,160,253), rgb(4,88,192) 60%, rgb(49,112,201));
  box-shadow: 0 10px 18px rgba(0,0,0,.5);
}
#join-chat-button:hover {
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
#join-chat-button:hover:before {
  border-color: #0766d8;
  background: #fff linear-gradient(#3fadff, #0766d8 60%, #3279dd);
}


 

#chat_main.chatTab a {background-image: url(Адрес картинки);
/* Общий неактивный */
    border-radius: 15px;background-image:font-family: Monotype Corsiva;
font-style: normal;
font-size: 12pt;
color: #0000ff; 
}
#chat_0.chatTab.chatTabActive a {background-image: url(Адрес картинки);
/* Приват активный */
    border-radius: 10px;background-image:font-family: Monotype Corsiva;
font-style: normal;
font-size: 12pt;
color: #0000ff; 
}
#chat_0.chatTab.chatTab a {background-image: url(Адрес картинки);
/* Приват неактивный */
    border-radius: 10px;
}.chatTabs > ul > li > a {
padding: 0px 14px 0px 10px;background-image:font-family: Monotype Corsiva;
font-style: normal;
font-size: 12pt;
color: #0000ff; 
height: 100%;
text-decoration: none;
border-top: 0px none !important;
border-right: 0px none !important;
vertical-align: middle;
display: inline-block;
line-height: 24px;
}


.chatSendExitPanel select{color: #524E49;
background: #fdeaff;background-image: url(адрес картинки);
padding: 0px;
font-size: 15px;
border-radius: px;
box-shadow: 0px 1px 3px; 
position: relative;
box-sizing: border-box;
transition: all 500ms ease-out;
}.chatSendExitPanel select{
transform-style: preserve-3d;border-radius: 30px 10px 30px 10px;
}
.chatSendExitPanel select:after {
top: -50%;
left: 0px;
width: 100%;
position: absolute;
background: #fdeaff;
border-radius: 4px;
box-shadow: 0px 1px 3px; 
content: 'Ulgamda';
transform-origin: left bottom;
transform: rotateX(-190deg);
}.chatSendExitPanel select:hover {
transform-origin: center bottom;
transform: rotateX(-190deg) translateY(100%);
}


.chatSendButton{color: #524E49;
background: #fdeaff;
padding: 0px;
font-size: 12px;
border-radius: px;
box-shadow: 0px 1px 3px; 
position: relative;
box-sizing: border-box;
transition: all 500ms ease-out;
}.chatSendButton{background-image: url("адрес картинки");
transform-style: preserve-3d; border-radius: 30px 10px 30px 10px;
}
.chatSendButton:after {
top: -50%;
left: 0px;
width: 100%;
position: absolute;
background: #fdeaff;
border-radius: 50px;
box-shadow: 0px 1px 3px; 
content: 'Ugratmak';
transform-origin: left bottom;
transform: rotateX(-190deg);
}.chatSendButton:hover {
transform-origin: center bottom;
transform: rotateX(-190deg) translateY(100%);
}


.chatFull .transparent{
  background: url(адрес картинки) no-repeat center top fixed;
    -moz-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;}


.chatFull .transparent:before {
    position: absolute;
    width: 100%;
    text-align: center;
    left:0;
    color: #00BFFF; /* цвет текста меняем на нужный */
    top: 90%; /* положение текста 0% - 90% сверху вниз */
    content:'Biziň saýtymyza hoş geldiňiz! Aktiw boluň,dost gazanyň,dürli orunlara eýe boluň!'; /* содержание текста */
    font-size: 20px; /* размер текста */
}


.chatMessage {
    background-color: white; /* цвет фона сообщений */
    margin-top: 5px; /* отступ между сообщениями */
    border: 2px dotted red; /* рамка сообщений */
}


.chatMessage[data-nick="Admin"] {
	color: red;
}


.chatTabs > ul > li {
  margin-right: 0 !important;
}
.chatTabs > ul > li.appTab {
  margin-left: 0 !important;
}


.chatHeader .chatTitle {
  font-size: 28px; /* максимально рекомендуемый размер */
  margin-top: 7px; /* делаем отступ сверху */
}

/* Иконка нет пола */
.chatPeople ul.chatPeopleList li a.chatUserSex0 b {
    background-image: url(https://d.radikal.ru/d27/1808/c4/5ac837770e61.png);
}
/* Иконка мужской пол */
.chatPeople ul.chatPeopleList li a.chatUserSex1 b {
    background-image: url(https://c.radikal.ru/c24/2004/29/11c5e378607e.png);
}
/* Иконка женский пол */
.chatPeople ul.chatPeopleList li a.chatUserSex2 b {
    background-image: url(https://d.radikal.ru/d13/2004/b8/d2af6fc6782a.png);
}

.chatFooter:after { content: "©Erkin-Chat 2021"; position: absolute; left: 0; right: 0; bottom: 0; text-align: center; border-radius: 25px; }

.chatSendLinksPanel .chatLinkImage {background: url('https://a.radikal.ru/a19/2002/39/71a239596cc0.gif') 0 0 no-repeat;}/* медиа */

.chatSendLinksPanel .chatLinkGold {background: url('https://d.radikal.ru/d35/1910/f1/3d7c47f451a6.png')  0 no-repeat;}/* золото */

.chatSendLinksPanel .chatLinkModerate {background: url('https://d.radikal.ru/d35/1804/cc/0a3068606d1c.gif') 0 0 no-repeat;} /* moder */

/*Анимация в угол*/
.chatPeople {
background-image: url("https://gifgive.com/wp-content/uploads/2021/07/panda-s-donatom.gif");
background-position: bottom;
background-repeat: repeat-x;
background-size: 100%
}
.chatMain .chatPeople:hover:after {
       opacity: 1;
}

/*фон чата */
.chatMain { 
background-image: url(https://images.wallpaperscraft.ru/image/single/gradient_raznotsvetnyj_pastelnyj_203977_1280x720.jpg); 
background-position: center center; 
background-repeat:no-repeat; 
background-size: 100% 100%; 
}

 /* всем жирный шрифт */ .chatMessage{ font-weight: bold; }

.chatInputText, .center-wrapper .content form #nick, .center-wrapper .content form #captcha-block #captcha-input {
  padding: .5em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: none !important;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Блок для окна смайлов - начало */

.smilesBox { position: absolute; left: 0px; top: 0px; width: 70%; height: 250px; overflow: auto; z-index: 98; }

.smilesBox {
/* Основной блок смайлов!  */
     background-image:url();
     width: 70%; /* ширина окна со смайлами */
     margin-left: -10pt; /* отступ слева окна со смайлами */
     border-radius: 10px; /* скругление углов, подставь своё значение */

/* Блок для окна смайлов - конец */
}