#chat{
  position: relative;
  background-color:#fff	
}
#chat[data-select="true"]::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: orange;
  filter: blur(10px); /* Размытие */
  z-index: -1; /* Помещаем псевдоэлемент под основной элемент */
  border-radius: inherit; /* Унаследовать скругление углов от родителя */
}
.organization-card .tab-content{
	padding:10px;
	padding-bottom:0px !important;

}
.organization-card{
	padding-left:0px !important;
	padding-right:0px !important;
	padding-bottom:0px !important;
}
.organization-card>*:not(:last-child){
	margin-left:1px;
	margin-right:1px
}
.pagination .page-item.active .page-link {
    background-color: black;
    border-color: black;
    color: white;
}

.pagination .page-link {
    color: black;
}

.pagination .page-item:not(.active) .page-link {
    background-color: white;
    border-color: #dee2e6;
}

.pagination .page-item.disabled .page-link{
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: black;
}

/* Custom CSS for gray focus outline */
.form-control:focus,
.form-select:focus {
    border-color: #6c757d; /* Optional: Gray border color */
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25); /* Gray outline */
}

.form-check-input:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}

/* Example styles (not required for focus outline) */
body {
    padding: 20px;
}
.form-switch .form-check-input {
  /* Другие стили... */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e"); /* Белый круг */
    box-shadow: none; /* Убираем обводку */	
    background-color: #fff;    /* Черный фон при включении */
    border-color: #000;      /* Черная рамка при включении */
}
.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFF'/%3e%3c/svg%3e"); /* Белый круг */
    background-color: black;    /* Черный фон при включении */
    border-color: black;      /* Черная рамка при включении */
}


main{
	position:relative;
	overflow-y:auto;
	padding:0px
}
.main-inner{
	position:absolute;
	left:10px;
	right:10px;
	margin:0px
}
.x-delete-button{
	display:flex;
	width:25px;
	height:25px;
	border-radius:12.5px;
	cursor:pointer
}
.x-delete-button:hover{
	background:#ccc
}
.x-delete-button i{
	margin:auto
}
.global>*{
	display:none
}
body[data-page="404"] .page-404,
body[data-page="403"] .page-403{
	display:block;
	height:100%
}
body[data-page="app"] .page-app{
	display:flex;
	position:fixed;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px

}
       .users-tab-user-link {
           display: flex;
           align-items: center;
           padding: 10px 15px;
           margin-bottom: 5px;
           background-color: #f8f9fa;
           border: 1px solid #dee2e6;
           border-radius: 5px;
           color: #212529;
           text-decoration: none;
       }

       .users-tab-user-link:hover {
           background-color: #e9ecef;
           color: #0056b3;
       }

       .users-tab-user-avatar {
           width: 50px;
           height: 50px;
           border-radius: 50%;
           margin-right: 15px;
           object-fit: cover;  /* Чтобы аватар не искажался */
       }

       .users-tab-user-info {
           flex-grow: 1; /* Занимает все доступное место */
       }

       .users-tab-user-nickname {
           font-weight: bold;
           margin-bottom: 5px;
       }

       .users-tab-user-role {
           font-size: 0.9em;
           color: #6c757d;
       }

       .users-tab-only-mine-switch .x-label{
       	padding-right:5px
       }
       .users-tab-header {
			display:flex;
			align-items:center;
			justify-content:space-between;
			width:100%

       }
       .users-tab-only-mine-switch {
			display:flex;
			margin-bottom:10px;
			justify-content:flex-end;
			align-items:center
       }

       .users-tab-switch {
         position: relative;
         display: inline-block;
         width: 60px;
         height: 34px;
       }

       .users-tab-switch input {
         opacity: 0;
         width: 0;
         height: 0;
       }

       .users-tab-slider {
         position: absolute;
         cursor: pointer;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: #ccc;
         -webkit-transition: .4s;
         transition: .4s;
       }

       .users-tab-slider:before {
         position: absolute;
         content: "";
         height: 26px;
         width: 26px;
         left: 4px;
         bottom: 4px;
         background-color: white;
         -webkit-transition: .4s;
         transition: .4s;
       }

       input:checked + .users-tab-slider {
         background-color: #2196F3;
       }

       input:focus + .users-tab-slider {
         box-shadow: 0 0 1px #2196F3;
       }

       input:checked + .users-tab-slider:before {
         -webkit-transform: translateX(26px);
         -ms-transform: translateX(26px);
         transform: translateX(26px);
       }

       /* Rounded sliders */
       .users-tab-slider.round {
         border-radius: 34px;
       }

       .users-tab-slider.round:before {
         border-radius: 50%;
       }


.organization-link {
    display: block;
    padding: 10px 15px;
    margin-bottom: 5px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    color: #212529;
    text-decoration: none;
}

.organization-link:hover {
    background-color: #e9ecef;
    color: #0056b3;
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
#sidebarCollapse i{
	margin:auto;
	font-size:25px
	
}
#sidebar li.nav-item{
	padding:0px
}
#sidebar a {
	display:block;
	padding:36px;
	padding-top:18px;
	padding-bottom:18px;
}
#sidebar-inner{
	overflow-y:auto;
	position:absolute;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px
}
#sidebarCollapse{
	display:flex;
	width:40px;
	height:40px
}
body,html{
	margin:0px;
	padding:0px;
	height:100%;
	min-height:100%;
	max-height:100%;
}
.page-app{
	flex-direction:column;
	height:100%;
	align-items:stretch
}
.x-header{
	box-sizing:border-box;
	height:60px;
	width:100%;
}
.main-row{
	width:100%;
	flex:1;
	display:flex;
	flex-direction:row;
	align-items:stretch
}
.left-panel{
	height:100%;
	width:250px;
	overflow-y:auto
}
main{
	flex:1;
	padding-left:10px;
	padding-right:10px;
	position:relative
}
.page{
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	display:none;
	overflow-y:auto
}
.page:target{
	display:block
}
.right-panel{
	height:100%;
	flex:0.75
}
#sidebarCollapse{
	display:none	
}
.user-info{
	padding-left:5px;
	padding-right:5px;
	cursor:pointer	
}
.x-profile-data{
	text-align: left;
}
.user-info:hover{
	background-color:#dcdcdc;
}
.start-chat-button{
	display:none
}

.sidebar{
	position:relative
}

.sidebar .position-sticky{
	position:absolute !important
}
@media (max-width: 800px) {
	.user-info{
		padding:0px
	}
	#avatar{
		margin:0px
	}
	.sidebar{
		position:static
	}

	.sidebar .position-sticky{
		position:sticky
	}

	.x-profile-data,
	.left-panel{
		display:none
	}

	.user-info:hover{
		background-color:transparent;
	}
	#sidebarCollapse{
		display:block	
	}	
    .sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        background-color: #fff;
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: none;  /* Убираем дефолтную тень */
    }

    .sidebar.active {
        left: 0;
        box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2); /* Добавляем тень справа */
    }

}
@media (max-width: 500px) {
	
	.start-chat-button{
		width:40px;
		height:40px;
		border-radius:50%;
		padding-left:0px;
		padding-right:0px;
		text-align:center;
		margin-right:10px
	}
	.navbar-brand{
		flex:1
	}
	.start-chat-button i{
		margin:0px !important
	}
	.start-chat-button span{
		display:none
	}
}
/* Стили для контейнера чата */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%; /*  Занимает всю высоту панели */
}

/* Стили для заголовка чата */
.chat-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /*  Легкая граница снизу */
    margin-bottom: 0px;
}

/* Стили для сообщений */
.chat-messages {
    flex-grow: 1; /*  Сообщения занимают все доступное пространство */
    overflow-y: auto; /* Добавляем прокрутку если сообщений много */
    padding: 10px;
}

.message p{
	margin:0px
}
.message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 70%; /* Ограничиваем ширину сообщения */
}

.message.received {
    background-color: #f0f0f0;
    text-align: left;
}

.message.sent {
    background-color: #dcf8c6;
    text-align: right;
    margin-left: auto; /*  Прижимаем отправленные сообщения к правому краю */
}

/* Стили для поля ввода */
.chat-input {
    padding: 10px;
    border-top: 1px solid #eee;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    padding: 10px 20px;
    cursor: pointer;
}

.sidebar li:not(.active):hover {
    background-color: #e9ecef;
}

/* Добавляем или переопределяем стили для активной ссылки */
.nav-item:not(.active) a{
    color: #888 !important;  /* Черный цвет текста */
}
.nav-item.active a{
	color:#000 !important;
    background-color: transparent !important; /* Убираем фон */
    cursor: default; /*  Курсор как у некликабельного элемента */
}

#chat:target{
	display:block;
	flex:1
}
#chat .avatar{
	margin-left:10px
}
:target{
	outline:none
}
.form{
	max-width:300px;
	margin:5px
}
.head-with-buttons{
	align-items:center;
	display:flex;
	flex-direction:row
}

.edit-icon {
    color: #6c757d; /* серый цвет, как на скриншоте */
    text-decoration: none; /* убираем подчеркивание */
}

.edit-icon:hover {
    color: #007bff; /* цвет при наведении */
}
.desktop-user-info{
	display:flex;
	flex-direction:row;
	align-items:center;
	flex:1;
	border-radius:0px;
	border-top-left-radius:10px;
}
.chat-header{
	display:flex;
	flex-direction:row;
	align-items:stretch;	
}
.close-chat i{
	margin:auto !important
}
.close-chat{
	font-size:30px;
	width:60px;
	text-align:center;
	cursor:pointer;
	color:#fff;
	display:none;
	border-radius:0px;
}
.desktop-user-info-text{
	flex:1
}
.chat-container{
	border-left:1px solid #212529;
	border-top-left-radius:10px
}
.chat-header{
	background:#212529;
	border-top-left-radius:10px;
	padding-bottom:0px
}
.chat-container .btn:focus {
  outline: none !important;
  box-shadow: none !important; /* Рекомендуется убрать и тень */
}
.chat-messages-outer{
	position:relative;
	overflow-y:auto;
	flex:1
}
.chat-messages{
	position:absolute;	
}
@media (max-width: 1000px) {
	.right-panel{
		display:none;
		position:fixed !important;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		background:#fff
	}
	.right-panel[data-show="true"]{
		display:block
	}
	.start-chat-button{
		display:block
	}
	.chat-container,.desktop-user-info{
		border-radius:0px
	}
	.close-chat{
		display:flex
	}
}
    /* Общие стили (можно вынести в отдельный CSS-файл) */
    .bot-menu {
      position: absolute; /* Абсолютное позиционирование */
      z-index: 1000;      /* Поверх других элементов */
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      display: none;    /* Скрыто по умолчанию */
    }

    .bot-menu-item {
      display: flex;
      align-items: center;
      padding: 10px 10px;
      cursor: pointer;
    }
    .bot-menu-item:hover {
    	background:#ccc
	}
    .bot-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }

    .bot-info {
      display: flex;
      flex-direction: column;
    }

    .bot-name {
      font-weight: bold;
      font-size: 1rem;
    }

    .bot-difficulty {
      font-size: 0.8rem;
      color: #666;
    }
.chat-new-chat-button{
	width:100%
}
.reject-chat-button{
	width:100%
}
.chat-bar{
	border-bottom:1px solid #eeeeee;
	padding:10px
}
#chat[data-status="not active"] .chat-bar,
#chat[data-status="not active"] .input-group,
#chat[data-status="active"] .chat-new-chat-button{
	display:none
}
.chat-messages{
	width:100%
}
.desktop-user-info .avatar{
	background-color:#fff
}
#casesList li{
	cursor:pointer
}
#chat{
	border-top-left-radius:15px;
}
.client-typing{
	color:#aaa;
	font-size:12px;
	margin:5px;
	text-align:center
}








/* ----- Слайдер ----- */

/* ==== Трек ==== */
.noUi-horizontal {
    height: .4rem;       /* тонкий трек */
    margin-top: 4px;     /* отступ сверху */
}

.noUi-base {
    background: #e0e0e0; /* светло-серый фон */
    border-radius: .5rem;
}

.noUi-connect {
    background: #212529;    /* чёрная заполненная часть */
    border-radius: .5rem;
}

/* ==== Ползунки ==== */
.noUi-handle {
    width: .9rem !important;        /* меньше стандартных */
    height: .9rem !important;
    top: -0.3rem !important;        /* выровнено по центру тонкого трека */
    right: -13px !important;
    border-radius: 50%;  /* ровные кружки */
    background-color: #fff;  /* белые */
    border: 2px solid #212529;  /* чёрная рамка */
    box-shadow: none;    /* убрали тень для минимализма */
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

/* Наведение и активное состояние */
.noUi-handle:hover {
    background-color: #212529;
    border-color: #212529;
}

.noUi-handle.noUi-active {
    background-color: #212529;
    border-color: #212529;
}

/* Убираем палочки внутри */
.noUi-handle::before,
.noUi-handle::after {
    display: none;
}