/* Сброс стилей и базовые настройки */
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
     background-color: #f4f6f9;
     color: #333;
     /* padding: 40px 0; */
 }

 header {
     padding: 0;
 }

 .container {
     margin-top: 74px;
 }

 .search-container {
     max-width: 900px;
     margin: 0 auto;
 }

 .non-input-container {
     max-width: 900px;
     margin: 0 auto;
     background-color: #63C2961F;
     border-radius: 10px;
     padding: 11px 24px 11px 24px;
     display: none;
     width: 80%;
 }

 .non-input-container .nic-type {
     font-size: 14px;
     font-weight: 400;
     color: #647694;
 }

 .non-input-container .nic-name {
     font-size: 18px;
     font-weight: 700;
     color: #63C296;
 }

 .input-container {
     position: relative;
     background-color: #63C296;
     border: 4px solid #8C9DAD1A;
     border-radius: 20px;
     display: block;
 }

 #resultsGrid {
     max-width: 900px;
     margin: 0 auto;
     margin-top: 16px;
     display: block;
 }

 .nic-flex {
     width: 100%;
     margin: 0 auto;
     max-width: 900px;
     display: flex;
     align-items: center;
 }

 .clear-data-div {
     position: relative;
     width: 15%;
     display: none;
 }

 h1 {
     text-align: center;
     margin-bottom: 15px;
     color: #2c3e50;
     font-weight: 600;
 }

 /* Стили поля ввода */
 .search-box-wrapper {
     position: relative;
     margin-bottom: 20px;
 }

 .search-input {
     width: 100px;
     /* Минимальная ширина для адаптивности */
     width: 100%;
     padding: 15px 20px;
     font-size: 16px;
     border: 2px solid #e0e0e0;
     border-radius: 12px;
     outline: none;
     transition: all 0.3s ease;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
 }

 .search-input:focus {
     border-color: #3498db;
     box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
 }

 .search_img {
     position: absolute;
     top: 12px;
     right: 12px;
 }

 .close_img {
     position: absolute;
     top: 17px;
     right: 15px;
     cursor: pointer;
 }

 /* Информационная панель об источниках */
 .source-badges {
     display: flex;
     gap: 10px;
     margin-bottom: 30px;
     flex-wrap: wrap;
     justify-content: center;
 }

 .badge {
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: bold;
     color: white;
     text-transform: uppercase;
 }

 /* Цвета для разных массивов для наглядности */
 .bg-array1 {
     background-color: #e74c3c;
 }

 .bg-array2 {
     background-color: #f39c12;
 }

 .bg-array3 {
     background-color: #2ecc71;
 }

 .bg-array4 {
     background-color: #9b59b6;
 }



 /* Стиль карточки */
 .card {
     background-color: #EBECF0;
     border-radius: 10px;
     padding: 11px 24px 11px 24px;
     /* box-shadow: 0 4px 6px rgba(61, 135, 194, 1.0); */
     transition: background-color .3s;
     /* border-left: 5px solid rgba(61, 135, 194, 0.3); */
     /* animation: fadeIn 0.3s ease-in-out; */
     cursor: pointer;
     margin-bottom: 10px;
     /* margin: 10px; */
 }

 .card:hover {
     /* transform: translateY(-3px); */
     /* box-shadow: 0 6px 12px rgba(99, 194, 150, 0.8); */
     background-color: #DCE0E6;
     transition: background-color .3s;
 }

 /* .card:hover .card-name {
     color: rgba(99, 194, 150, 1);
     transition: color 0.3s;
 } */

 .card-type {
     font-size: 14px;
     font-weight: 400;
     color: #647694;
     margin-bottom: 5px;
 }

 .card-name {
     font-size: 18px;
     font-weight: 600;
     color: #000000;
     /* margin-bottom: 10px; */
     /* color: RGB(61, 135, 194); */
 }

 /* Статус "Ничего не найдено" */
 .no-results {
     grid-column: 1 / -1;
     text-align: center;
     padding: 40px;
     color: #7f8c8d;
     font-size: 16px;
     background: white;
     border-radius: 12px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }

 .f-container {
     width: 45%;
 }

 .f-container h3 {
     text-align: center;
     padding: 12px;
     font-size: 25px;
     font-weight: 600;
     color: #1A1A1A;
 }

 .input_header {
     text-align: center;
     /* padding: 12px; */
     font-size: 20px;
     color: #1A1A1A;
     font-weight: 600;
     margin-bottom: 13px;
 }

 /* Анимация появления карточек */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

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

 #search:autofill {
     /* Форсирует цвет текста, перебивая системный черный */
     -webkit-text-fill-color: rgba(61, 135, 194, 1.0) !important;

     /* Бонус: убирает стандартный желтый/белый фон автозаполнения */
     /* -webkit-box-shadow: 0 0 0px 1000px rgba(61, 135, 194, 1.0) inset !important; */

     /* Задает цвет каретки (курсора), если фон темный */
     caret-color: rgba(61, 135, 194, 1.0);
 }

 .input-div {
     width: 80%;
     margin: 0 auto;
     margin-bottom: 20px;
 }

 #search {
     width: 100%;
     padding: 15px 20px;
     font-size: 16px;
     /* border: 4px solid #63C296; */
     border-radius: 12px;
     outline: none;
     transition: all 0.3s ease;
     color: rgba(61, 135, 194, 1.0);
     /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); */
     /* box-shadow: 0 2px 6px rgba(99, 194, 150, 0.8); */
     border-radius: 16px;
 }

 #search.no_active {
     text-align: center;
     font-size: 22px;
     font-weight: 700;
     color: rgb(255, 255, 255) !important;
     border: 4px solid rgba(61, 135, 194, 1);
     box-shadow: 0 2px 6px rgba(61, 135, 194, 0.8);
     background-color: rgba(61, 135, 194, 1.0);
 }

 .results-flex {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     justify-content: center;
     width: 80%;
     margin: 0 auto;
 }

 .flex-item {
     width: 100%;
     height: 350px;
     overflow-y: auto;
     border: 1px solid #63C296;
     /* box-shadow: 0 5px 10px rgba(61, 135, 194, 0.8); */
     border-radius: 12px;
     padding: 10px;
 }

 #clearData {
     padding: 8px;
     background-color: #D4AF4A;
     color: #F5F5F7;
     border-radius: 6px;
     border: none;
     width: 160px;
     display: flex;
     cursor: pointer;
     display: flex;
     font-size: 14px;
 }

 .clear_img {
     margin-right: 8px;
 }

 /* скроллбар старт */
 /* Работает в Firefox */
 .flex-item {
     scrollbar-width: thin;
     scrollbar-color: #8C9DADAB transparent;
 }

 /* Работает в Chrome, Edge и Safari */
 .flex-item::-webkit-scrollbar {
     width: 2px;
 }

 .flex-item::-webkit-scrollbar-track {
     background: #8C9DADAB;
 }

 .flex-item::-webkit-scrollbar-thumb {
     background-color: #8C9DADAB;
     /* border-radius: 20px;
  border: 3px solid #7b6f47; */
     border-radius: 4px;
 }

 /* Убираем кнопки со стрелками */
 /* .flex-item::-webkit-scrollbar-button {
     display: none !important;
     width: 0 !important;
     height: 0 !important;
     color: transparent !important;
     background-color: transparent !important;
 } */

 /* скроллбар конец */
 .before-loading {
     display: block;
     margin-top: 90px;
 }

 .after-loading {
     display: none;
 }

 @media (max-width: 768px) {
    .results-flex {
        width: 96%;
    }
     .nic-flex {
         flex-wrap: wrap;
         row-gap: 15px;
     }

     .non-input-container {
         width: 96%;
     }

     .close_img {
         right: 10px;
     }

     #search {
         width: 100%;
     }

     .input-div {
         width: 96%;
     }

     .f-container {
         width: 96%;
     }

     .flex-item {
         width: 96%;
         margin: 0 auto;
     }

     #clearData {
         top: 10px;
     }

     #search.no_active {
         font-size: 16px;
         font-weight: 600;
     }
 }

 .top {
     background-color: #FFFFFF78;
     position: relative;
 }

 .sub-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin: 0 auto;
     width: 80%;
     height: 80px;
 }

 .top h3 {
     color: #63C296;
     font-size: 32px;
     font-weight: 600;
     margin: 0;
 }

 .top .logo {
     /* display: block;
     position: absolute;
     right: 50px; */
 }

 .top .logo img {
     width: 113px;
 }

 .top .str {
     /* position: absolute;
     left: 8%;
     cursor: pointer; */
 }

 @media(max-width:960px) {
     .top .logo img {
         display: none;
     }
 }


 @media(max-width:620px) {
     .top {
         display: none;
     }

     .top h3 {
         font-size: 20px;
     }
 }