body {
background: #242323;
margin: auto;
background-position: center;
font-family: 'Montserrat', sans-serif;
}    

  /* Оформляем клик */
    .clickable-list-item {
      cursor: pointer; /* Курсор руки */
    }

    /* Эффект подсветки при наведении */
    .clickable-list-item:hover {
      background-color: #f5f5f5; /* Серый фон при наведении */
    }

.panel-title {
    color: #c5c9c6;
}
.panel-body {
    background-color: #313632;
    border-color: #ebccd1;
    
}

.panel-body {
            max-width: 100%;
            overflow: hidden; /* Скрывает всё, что выходит за пределы div */
        }
        
        .panel-body img {
            display: block;       /* Картинка становится блочным элементом */
            max-width: 100%;      /* Максимальная ширина равна ширине родителя */
            height: auto;         /* Автоматически сохраняет исходные пропорции */
        }

.panel-default {
    background-color: #313632;
    border-color: #4a4848;
    
}
.panel-default>.panel-heading {
    color: #313632;
    background-color: #313632;
    border-color: #4a4848;
    
}

.form-group>.form-control {
   background-color: #545151; 
   border-color: #545151;
}

.navbar-form>.btn-default {
    color: #313632;
   background-color: #545151; 
   border-color: #545151;
}
.navbar-default {
  color: #313632;
    background-color: #313632;
    border-color: #4a4848;  
}
.navbar-default .navbar-nav > li > a {
  color: #c5c9c6; /* Ваш новый цвет */
}
.navbar-default .navbar-nav > li > a:hover {
  color: #979c98; /* Ваш новый цвет */
}


.form-control {
  color: #979c98; /* Цвет текста */
   background-color: #545151; 
   border-color: #545151;
}
/* Меняем цвет текста панели */
    .panel-body {
      color: white; /* Устанавливаем белый цвет текста */
      font-size: 15px;
    }

 /* Специальный стиль для фона выпадающего меню */
    .dropdown-menu {
      background-color: #313632 !important; /* Новый цвет фона */
      color: #979c98;
    } 
.dropdown-menu > li > a {
  color: #979c98; /* Новый цвет текста */
}
/* Меняем цвет текста при наведении */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #979c98; /* Цвет текста при наведении */
}
/* Меняем границу выпадающего меню */
.dropdown-menu {
  border: 1px solid #4b4d4b; /* Толщина, стиль и цвет границы */
}
.dropdown-menu .divider {
      height: 1px;       /* Высота линии */
      overflow: hidden;  /* Избавляемся от артефактов рендеринга */
      background-color: #4b4d4b;
    }
    
    
/* Группа списка */ 
.list-group-item.clickable-list-item {
      background-color: #6e706e; /* Желтоватый фон */
      border: 1px solid #4b4d4b;
      color: white;
    }

    /* Фон при наведении курсора */
    .list-group-item.clickable-list-item:hover {
      background-color: #abb0ab; /* Яркий желтый фон при наведении */
    }
.control-label {
      color: #979c98; /* светлый цвет текста */
    }

.dropdown-toggle {
  color: #979c98 !important; /*  */
}
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle.active {
  color: #979c98 !important; /*  */
}
    
  



   /* Полная высота страницы */
    html, body {
      height: 100%;
      margin: 0;
    }

    /* Общая структура страницы с использованием Flexbox */
    .page-wrap {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* Основной контент */
    .page-content {
      flex-grow: 1; /* Контент займет всю доступную высоту */
      padding: 20px;
    }

    /* Футер */
    footer {
      background-color: #333;
      color: white;
      padding: 10px 0;
    }

    /* Оптимизация ширины текста */
    footer p {
      margin-bottom: 0;
    }
    
.clickable-block {
    display: block;                    /* Преобразуем ссылку в блочный элемент */
    text-decoration: none;             /* Скрываем подчеркивание ссылки */
    color: inherit;                    /* Цвет текста наследуется от родителя */
    background-color: #68696b;         /* Темный фон блока */
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease;         /* Мягкая анимация при изменении состояния */
    cursor: pointer;                   /* Курсор меняется на руку при наведении */
}

.clickable-block:hover {
    background-color: #58595b;         /* Меняем оттенок фона при наведении */
    transform: scale(1.01);            /* Немного увеличиваем блок при наведении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Добавляем тень при наведении */
}


.clickable-block img {
     width: 100%;                      /* Изображения занимают всю ширину блока */    
     height: 300px;                    /* Одинаковая высота изображений */    
     object-fit: cover;                /*object-fit: cover или contain; Поддерживаем правильное соотношение сторон */    
     border-radius: 8px;    
     margin-bottom: 10px;
}

.article-title {
    font-weight: bold;
    font-size: 18px;
    color: #f0f2f5;
    margin-bottom: 5px;
}

.article-text {
    font-size: 14px;
    color: #d7dade;
    line-height: 1.5;
}

/* Адаптивные стили */
@media only screen and (max-width: 768px) {
    .panel-body {
        grid-template-columns: 1fr;    /* Один блок на всю ширину на мобильных устройствах */
    }
}