/* Chat */


.chatButtonAd{
    background: #2d2e3a;
    color: #fff !important;
    font-size: 14px;
    width: 100%;
    margin-top: 10px;    
}

.chat{
	margin-right: 10;
	width: 250px;
	margin-right: 10px;
	height: 400px;
}
.chat-main{
	overflow-y: scroll;
	height: 410px;
	padding: 10px;
}
.chat-up{
	margin-left: 9px;
}
.chat ::-webkit-scrollbar {
    width: 3.5px;
}
/* Track */
.chat ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #EDF0F7;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.chat ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 50%;
		height: 10px;
    border-radius: 10px;
    background: #EDF0F7;
    -webkit-box-shadow: inset 0 0 6px #EDF0F7;
}
.chat ::-webkit-scrollbar-thumb:window-inactive {
	background:#EDF0F7;
}
.chat-box{
	width: 250px;
}
.chat-box-item
{
    display: flex;
    gap: 20px;
    margin-bottom: -5px;
    background: var(--main-bg);
    padding: 10px;
    border-radius: 8px;
    margin-right: 20px;
}
.chat-box-item:last-child{
		margin-bottom: 0px;
}
.chat-avatar{
	width: 30px;
	height: 30px;
	border-radius: 50%;
    margin-top: 2px;
}
input {outline:none;}
.chat-mess
{
	width:100%;
	/* background: rgba(237,240,247,0.68);
	padding: 5px 10px 5px 10px;
	border-radius: 5px; */
}
.chat-mess-mess
{
	color: #ffffffad!important;
	font-size: 13px;
}
.chat-mess-name{
	color:#fff!important;
	font-size:14px;
}

.chat-down{
	height: 50px;
	display: flex;
	justify-content: space-between;
	margin-left: 9px;
	    background: var(--main-bg);
	    border-radius: 15px;
	    margin-right: 25px!important;
}
.chat-input
{
	border:none;
	width: 85%;
	height: 50px;
	font-size: 13px;
	background: inherit;
	    border-radius: 15px;
    padding-left: 15px;
}
.chat-send{
	width: 10%;
	height: 40px;
	font-size: 35px;
	text-align: center;
    color: rgb(181 41 205 / 70%);
        margin-right: 20px!important;
}
.chat-send{
	margin-right: 10px;
    background: none;
	border: 0;
	margin-top: 5px;
}
.chat-send i:hover{
	cursor: pointer;
	color:#fff;

}


.navs {
    /*  ширна произвольная, не стесняйтесь экспериментировать */
    width: 320px;
    min-width: 320px;
    /* фиксируем и выставляем высоту панели на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно правого края страницы */
    right: -320px;
    /* внутренние отступы */
    padding: 15px 20px;
    /* плавный переход смещения панели */
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    /* определяем цвет фона панели */
    background: #ffffffd4;
    /* поверх других элементов */
    z-index: 2000;
}


/**
 * Кнопка переключения панели
 * тег <label>
 */

.navs-toggle {
    /* абсолютно позиционируем */
    position: absolute;
    /* относительно правого края панели */
    right: 300px;
    /* отступ от верхнего края панели */
	top: 45%;
    /* внутренние отступы */
    padding: 0.5em;
	    border-radius: 6px 6px 0 0;
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    background: inherit;
    /* цвет текста */
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта */
    color:#fff!important;
    font-size: 1.2em;
    line-height: 1;
    /* всегда поверх других элементов страницы */
    z-index: 2001;
    /* анимируем цвет текста при наведении */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}


/* определяем текст кнопки 
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/

.navs-toggle:after {
    content: '\2630';
    text-decoration: none;
}


/* цвет текста при наведении */

.navs-toggle:hover {
}


/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */

[id='navs-toggle'] {
    position: absolute;
    display: none;
}


/**
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/

[id='navs-toggle']:checked ~ .navs > .navs-toggle {
        /* абсолютно позиционируем */
    position: absolute;
    /* относительно правого края панели */
    right: 303px;
    /* отступ от верхнего края панели */
	top: 45%;
	    border-radius: 6px 6px 0 0;
    /* внутренние отступы */
    padding: 0.5em;
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    background: inherit;
    /* цвет текста */
    /* вид курсора */
	color: #fff!important;
    cursor: pointer;
    /* размер шрифта */
    font-size: 1.2em;
    line-height: 1;
    /* всегда поверх других элементов страницы */
    z-index: 2001;
    /* анимируем цвет текста при наведении */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}


/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */

[id='navs-toggle']:checked ~ .navs {
    right: 0;
    box-shadow: -4px 0px 20px 0px rgb(201 0 255 / 6%);
    -moz-box-shadow: -4px 0px 20px 0px rgb(201 0 255 / 6%);
    -webkit-box-shadow: -4px 0px 20px 0px rgb(201 0 255 / 6%);
}


/* 
 * смещение контента страницы
 * на размер ширины панели,
 * фишка необязательная, на любителя
*/

[id='navs-toggle']:checked ~ main > article {
    -webkit-transform: translateX(-320px);
    -moz-transform: translateX(-320px);
    transform: translateX(-320px);
}


/*
 * изменение символа переключателя,
 * привычный крестик (MULTIPLICATION X), 
 * вы можете испльзовать любой другой значок
*/

[id='navs-toggle']:checked ~ .navs > .navs-toggle:after {
    content: '\2715';
}



@media screen and (max-width: 320px) {
    .navs {
      width: 100%;
      box-shadow: none
    }
}


/**
 * Формируем стиль заголовка (логотип) панели 
*/

.navs h2 {
    width: 90%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    font-family: Proxima Bold;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

.navs h2 a {
    color: #dadada;
    text-decoration: none;
    text-transform: uppercase;
}


/*плавное появление заголовка (логотипа) при раскрытии панели */

[id='navs-toggle']:checked ~ .navs h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}


/**
 * формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
 */

.navs > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navs > ul > li {
    line-height: 2.5;
    opacity: 0;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

[id='navs-toggle']:checked ~ .navs > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


/* определяем интервалы появления пунктов меню */

.navs > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

.navs > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

.navs > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

.navs > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

.navs > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

.navs > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}


/**
 * оформление ссылок пунктов меню
 */

.navs > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Open Sans', Segoe UI;
    font-weight: 300;
    font-size: 1.2em;
    color: #dadada;
    width: 100%;
    text-decoration: none;
    /* плавный переход */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}


/**
 * состояние ссылок меню при наведении
 */

.navs > ul > li > a:hover,
.navs > ul > li > a:focus {
    color: white;
    padding-left: 15px;
}

@media screen and (max-width: 960px) {
    .navs {
    height: calc(100% - 120px)!important;
    width:100%!important;
    }
}