body { font-family: Arial, sans-serif; margin: 20px; }
        table { width: 100%; border-collapse: collapse; }
		tr:nth-child(even) {background-color: #f8f8f8;} 		/* Чередование строк: нечетные белые, четные серые */
		tr:nth-child(odd) { background-color: #ffffff;}		
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #dfdfdf; cursor: pointer; }
		th a {
			color: inherit; /* Наследует цвет текста от родительского элемента */
			text-decoration: none; /* Убирает подчеркивание */
		}	
		th:nth-child(1), td:nth-child(1) { width: 3%; }  /* Номер */
		th:nth-child(2), td:nth-child(2) { width: 25%; } /* UserName */
		th:nth-child(3), td:nth-child(3) { width: 17%; } /* Purchased */
		th:nth-child(4), td:nth-child(4) { width: 3%; } /* Bron */
		th:nth-child(5), td:nth-child(5) { width: 3%; } /* Expired */
		th:nth-child(6), td:nth-child(6) { width: 50%; } /* Articul */				
		.purchased { color: green; }
        .bron_expired { color: blue; }
        .number { color: gray; }
        .date-filter { 
			margin-bottom: 10px; 
		}
		.date-filter input {
			font-size: 16px; /* Увеличьте размер шрифта для полей ввода */
			padding: 5px; /* Добавить немного внутреннего отступа для удобства */
		}

		.date-filter button {
			font-size: 16px; /* Увеличьте размер шрифта для кнопок */
			padding: 5px 10px; /* Добавить внутренние отступы для кнопок */
		}		
		#supplierSelect {
			font-size: 18px; /* Увеличивает размер шрифта */
			padding: 8px 12px; /* Увеличивает внутренние отступы */
			width: 200px; /* Задает ширину выпадающего списка */
			border-radius: 5px; /* Округляет углы */
		}		
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: #f5f5f5;
    }

    .time-range button {
        margin-right: 5px;
        padding: 5px 10px;
        border: 1px solid #ccc;
        background: white;
        cursor: pointer;
    }

    .article-gallery {
        display: flex;
        gap: 10px;
    }

    .article-gallery a {
        display: inline-block;
    }

    .article-gallery img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 5px;
        border: 1px solid #ddd;
    }		
	
	#myModal {
		display: none; /* Скрыто по умолчанию */
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
	}



	.product-image {
		transition: transform 0.0s ease, top 0.0s ease; /* Плавный переход для увеличения и перемещения */
		max-width: 100%;
		height: auto;
		position: relative; /* Устанавливаем позицию относительно контейнера */
	}

	.product-image:hover {
		transform: scale(7); /* Увеличение размера изображения */
		top: 400px; /* Перемещение вниз на 50 пикселей (можно настроить по своему усмотрению) */
		right: 350px;
		z-index: 10; /* Увеличиваем z-index, чтобы изображение было сверху */
	}
	.tooltip-content {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
    .watch-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }