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: 17px;
    }

 /* Специальный стиль для фона выпадающего меню */
    .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;    /* Один блок на всю ширину на мобильных устройствах */
    }
}  


  /************************* Переливающийся эффект *************************/
     .centered-container {
            display: block;
            text-align: center;
            margin-bottom: 30px; /* Опциональный отступ снизу */
            margin-top: 40px;
        }
        .download-btn {
            position: relative;
            overflow: hidden;
            color: #fff !important;
            background-color: green;
            border-radius: 5px;
            padding: 15px 30px;
            font-size: 18px;
            transition: all .3s ease-in-out;
        }
        .download-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(
                to right,
                rgba(255, 0, 0, 0.5),
                rgba(255, 255, 0, 0.5),
                rgba(0, 255, 0, 0.5),
                rgba(0, 255, 255, 0.5),
                rgba(0, 0, 255, 0.5),
                rgba(255, 0, 255, 0.5)
            );
            z-index: 1;
            animation: animateGradient 2s infinite alternate-reverse linear;
        }
        @keyframes animateGradient {
            from { transform: translateX(-100%); }
            to   { transform: translateX(100%); }
        }
        .download-btn:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
        
        /*******************КОД******************************/
         .code-block {
            background-color: #67696b;
            padding: 10px;
            border: 1px solid #888b8f;
            border-radius: 5px;
            font-family: 'Courier New', Courier, monospace;
            white-space: pre-wrap;
        }
        
        /***********************Подсветка поискового текста**********************************/
        
        .highlight {
            background-color: yellow;
            font-weight: bold;
            color: black;
        }
        
        /*************************************Цвет кнопки в поиске************************************************/
        .light-btn {
    background-color: #999696 !important; /* Светлый серый */
    color: #c4c1c0;                     /* Темный текст для контраста */
    border-color: #ccc;              /* Цвет границы */
}
.light-btn:hover {
    background-color: #dcdcdc;       /* Менее яркий оттенок серого при наведении */
    border-color: #bbb;              /* Менее яркая граница при наведении */
}