@import "/css/fonts/montserrat.css";
@import url("/js/third_part/fontawesome_all.js");

html, body {
    font-family: 'Montserrat', serif;
    height: 100%;
    z-index:1;
    overflow-x: hidden;
}

:root {
    --primary-color: #4a90e2;
    --secondary-color: #6c757d;
    --background-color: #f8f9fa;
    --card-background: #ffffff;
    --border-radius: 8px;
    --transition-duration: 0.3s;
  }

  body {
    background-color: var(--background-color);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
  }

  /* Карточки */
  .card {
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background-color: var(--card-background);
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }

  /* Заголовки */
  h5 {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
  }

  /* Кнопки */
  .btn-primary {
    background-color: var(--primary-color);
    border: none;
    transition: background-color 0.3s;
  }

  .btn-primary:hover {
    background-color: #357ABD;
  }

  /* Поля ввода */
  .form-control {
    border-radius: 4px;
    border: 1px solid #ccc;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
  }

  /* Анимации появления */
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Стили для иконок и кнопки */
  .icon {
    transition: transform 0.3s;
  }

  .toggle-password:hover {
    cursor: pointer;
  }

  /* Стили для уведомлений */
  #success_change_password, #error_change_password {
    transition: opacity 0.3s;
  }

  /* Анимация для кнопки */
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(74, 144, 226, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0); }
  }

  .btn-pulse {
    animation: pulse 1.5s infinite;
  }
/* Общие стили для навбара */
  .vertical-nav {
    width: 250px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    transition: width 0.3s;
  }

  /* Заголовок */
  .vertical-nav .header {
    height: 55px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #dee2e6;
  }

  .vertical-nav .header .logo {
    display: flex;
    align-items: center;
  }

  .vertical-nav .header .logo i {
    font-size: 2rem;
    color: #6c757d;
  }

  .vertical-nav .header .title {
    margin-left: 10px;
    font-weight: 600;
    font-size: 1.2rem;
    color: #343a40;
  }

  /* Стили для пунктов меню */
  .vert-nav-item {
    padding: 10px 15px;
    margin: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
  }

  .vert-nav-item:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    color: var(--primary-color)
  }
  

  /* Активный пункт */
  .vert-nav-item.active {
    background-color: #e9ecef;
    color: var(--primary-color)
  }

  /* Для мобильного вида (узкий навбар) */
  .vertical-nav.collapsed {
    width: 70px !important;
  }
  /* скрытие текста при collapsed */
  .vertical-nav.collapsed .text {
    display: none !important;
  }

  /* Иконки и текст */
  .vert-nav-item small {
    display: inline-block;
  }

  /* Скрытие текста на мобильных */
  @media (max-width: 992px) {
    .vertical-nav {
      width: 70px;
    }

    .vertical-nav .header .title {
      display: none;
    }

    /* Сделать пункты более компактными */
    .vert-nav-item {
      justify-content: center;
    }

    .vert-nav-item .text {
      display: none;
    }
  }

  /* Блок выхода (логика на нижней части) */
  .logout-item {
    margin-top: auto;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background-color 0.2s;
  }
  .logout-item:hover {
    background-color: #f8f9fa;
  }

.chat-message.left-message {
    border-radius: 1rem 1rem 1rem 0.1rem;
}

.chat-message.right-message {
    border-radius: 1rem 1rem 0.1rem 1rem;
}

.user-item:hover {
    background-color: #e0e1e2;
}
.user-item.active {
  background-color: #e7f1ff !important;
  color:#333 !important;
}
.user-item.active:hover {
    background-color: #0d6efd;
}
.machine-item.active {
    background-color: #0d6efd;
    color: white
}
.machine-item:hover {
    background-color: #e0e1e2;
}
.machine-item.active:hover {
    background-color: #0d6efd;
}
p {
    margin: 0;
}
.chat-wrapper {
    width: 100%;
  }
  
  .message-text {
    overflow-wrap: break-all;
    word-break: break-all;
    hyphens: auto;
    min-height: 1em; /* prevent height collapsing when there is no text */
    max-height: 97px;
    width: 100%;
    align-content: center;
    outline: none;
    overflow: hidden;
  }
  
  .message-wrapper {
    border-top: 1px solid #e4e7ec;
    background-color: #fff;
    padding: 0.5rem; /* the container will keep the padding untouched */
    max-height: 145px; /* added padding to the height of the .message-text */
  }
  
@media (max-width: 360px) {
    .chat-list-block {
        min-width: 100% !important;
    }
}

.chat-list-block {
    overflow-x: clip !important; 
    min-width:350px;
    max-width: 350px;
    width: 350px;
    transition: width 2.5s ease; /* плавное изменение ширины */
}

.chat-list-block .chat-toggle{
    display: block !important;
}

.chat-list-block .chat-toggle-small{
    display: none !important;
}



.chat-list-block.small {
    overflow-x: clip !important; 
    min-width:70px;
    max-width: 70px;
    width: 70px;
    transition: width 2.5s ease; /* плавное изменение ширины */
}

.chat-list-block.small .chat-title{
    display: none !important;
}

.chat-list-block.small .chat-toggle{
    display: none !important;
}

.chat-list-block.small .chat-toggle-small{
    display: block !important;
}

.chat-list-block.small .circle-chat-item{
    display: flex !important;
}
.chat-list-block .circle-chat-item{
    display: none !important;
}

.chat-list-block.small .rect-chat-item{
    display: none !important;
}
.chat-list-block .rect-chat-item{
    display: block !important;
}

.circle {
    width: 35px; /* ширина и высота должны быть равны для круга */
    height: 35px;
    background-color: #4CAF50; /* цвет фона */
    border-radius: 50%; /* делает элемент круглым */
    display: flex; /* используем flex для центрирования содержимого */
    align-items: center; /* вертикальное выравнивание */
    justify-content: center; /* горизонтальное выравнивание */
    font-size: 1.5em; /* размер буквы */
    color: white; /* цвет буквы */
    font-family: Arial, sans-serif; /* шрифт */
  }

.overflow-auto::-webkit-scrollbar {
    width: 6px;
}
.overflow-auto::-webkit-scrollbar-thumb:hover {
    background-color: #8c8f91;
}
.overflow-auto::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    border-radius: 10px;
}
.overflow-auto::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #e0e1e2;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}

.custom-table-head th {
    position: sticky;
    top: 0;
    background-color: #fff; /* Цвет фона для заголовков */
    z-index: 2; /* Уровень слоя */
}

.right-space-slide {
    /* Изначально скрыт за левым краем */
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.right-space-slide.active {
    transform: translateX(0);
    opacity: 1;
}
/* TEXT STYLE */
/* SIZE */
.fs-7{
    font-size: 0.87rem !important;
}
.fs-8{
    font-size: 0.7rem !important;
}
.fs-9{
    font-size: 0.6rem !important;
}
/* WEIGHT */
.fw-100{
    font-weight: 100 !important;
}
.fw-200{
    font-weight: 200 !important;
}
.fw-300{
    font-weight: 300 !important;
}
.fw-400{
    font-weight: 400 !important;
}
.fw-500{
    font-weight: 500 !important;
}
.fw-600{
    font-weight: 600 !important;
}
.fw-700{
    font-weight: 700 !important;
}

.chat-item.active {
    background-color: #def;
    /* -webkit-box-shadow: inset 3px 0 #0d6efd;
    box-shadow: inset 3px 0 #0d6efd;
    background: linear-gradient(0.25turn, #0d6efd -3%, #fff 5%) */
}

.logout-item:active, /* активная/посещенная ссылка */
.logout-item:hover,  /* при наведении */
.logout-item {
  text-decoration: none !important;
  color: #000 !important;
}


.cursor-pointer{
    cursor: pointer;
}

.top-item:hover{
    background-color: #eee;
    color: #000 !important;
}

.top-item:hover .text-secondary{
    color: #000 !important;
}

.text-pirogov{
    color: #6e3288;
}

.bg-pirogov {
    background-color: #6e3288;
}

.bg-pirogov{
    background-color: #6e3288;
}

.border-pirogov{
    border-color: #6e3288;
}

.btn-pirogov{
    --bs-btn-color: #fff;
    --bs-btn-bg: #6e3288;
    --bs-btn-border-color: #6e3288;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5e2278;
    --bs-btn-hover-border-color: #6e3288;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6e3288;
    --bs-btn-active-border-color: #6e3288;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6e3288;
    --bs-btn-disabled-border-color: #6e3288;
}

.btn-try_online:hover{
    background-color: #EEDDFF;
    color: #6e3288;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.btn-try_online:active {
    background-color: #EEDDFF !important;
    color: #6e3288 !important;
    border-color: #EEDDFF !important;
}

.nav-pills .nav-link.active {
    color: #000;
    background-color: #FFF;
}

.nav-link {
    color: #6c757d;
}

.nav-link:hover {
    color: #6c757d;
}

.nav-link:disabled {
    color: #acb5bd !important;
}

.active .active-red{
    color: #dc3545;
}

.active .active-blue{
    color: #0d6efd;
}

.active .active-orange{
    color: #fd7e14;
}

.active .active-purple{
    color: #6e3288;
}

.active .active-paper{
    color: #c6c7c8;
}

.texgt{
    color: #d1e7dd;
}

.bottom-hover-content{
    display: none;
}

.positioning-card:hover .card-body .bottom-content{
    display: none;
}

.positioning-card:hover .card-body .bottom-hover-content{
    display: block;
}

.positioning-card:hover {
    background-color: #f0fdf0 !important;
}

.vert-nav-item:hover{
    background-color: #f0f1f2 !important;
}

.active .vert-nav-item{
    background-color: #e0e1e2 !important;
}

.active .vert-nav-item .span{
    font-weight: bold !important;
}


.nav-gm-like .nav-item:hover{
    background-color: #0001;
}
.nav-gm-like .nav-item{
    font-weight: 500 !important;
    color: #444746;
    font-size: 0.87rem;
    max-height: 40px;
}
.nav-gm-like .nav-item .nav-link.active{
    color: #0b57d0;
    display: inline-block;
}
.nav-gm-like .nav-item .nav-link.active span{
    display: block;
    height: 0px;
    border-top: 3px solid #0b57d0;
    border-radius: 3px 3px 0 0;
    padding: 0 10px 0 10px;
    position: relative;
    bottom: -9px;
}

.tab-item {
  display: none;
}

.tab-item.active {
  display: block;
}