canvas {
		max-width: 100%;
		height: auto !important;
	}
	body {
		font-family: 'Roboto','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		margin: 0;
		/* padding: 20px; */
		background-color: #f5f5f5;
	}
	
	.container {
		max-width: 1200px;
		margin: 20px auto;
		background-color: white;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	
	h1,
	h2,
	h3 {
		color: #333;
	}
	
	.tabs {
		display: flex;
		border-bottom: 1px solid #ddd;
	}
	
	.tab {
		padding: 10px 20px;
		cursor: pointer;
		background-color: #f1f1f1;
		border: 1px solid #ddd;
		border-bottom: none;
		border-radius: 5px 5px 0 0;
		margin-right: 5px;
	}
	
	.tab.active {
		background-color: #4CAF50;
		color: white;
	}
	
	.tab-content {
		display: none;
		padding: 20px;
		border: 1px solid #ddd;
		border-top: none;
		background-color: white;
	}
	
	.tab-content.active {
		display: block;
	}
	
	table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 20px;
	}
	
	th,
	td {
		border: 1px solid #ddd;
		padding: 8px;
		text-align: left;
	}
	
	th {
		background-color: #f2f2f2;
	}
	
	tr:nth-child(even) {
		background-color: #f9f9f9;
	}
	
	input,
	select {
		padding: 8px;
		margin: 5px 0;
		width: 100%;
		box-sizing: border-box;
	}
	
	button {
		background-color: #4CAF50;
		color: white;
		padding: 10px 15px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		margin-right: 10px;
	}
	
	button:hover {
		background-color: #45a049;
	}
	
	.form-group {
		margin-bottom: 15px;
	}
	
	.form-row {
		display: flex;
		gap: 15px;
		margin-bottom: 15px;
	}
	
	.form-col {
		flex: 1;
	}
	
	.hidden {
		display: none;
	}
	
	.stats {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
		padding: 15px;
		background-color: #e9f7ef;
		border-radius: 5px;
	}
	
	.stat-item {
		text-align: center;
	}
	
	.stat-value {
		font-size: 24px;
		font-weight: bold;
		color: #2e7d32;
	}
	
	.stat-label {
		font-size: 14px;
		color: #555;
	}
	
	.comparison {
		font-size: 18px;
		margin-top: 10px;
		padding: 10px;
		text-align: center;
		border-radius: 5px;
	}
	
	.above {
		background-color: #d4edda;
		color: #155724;
	}
	
	.below {
		background-color: #f8d7da;
		color: #721c24;
	}
	
	.equal {
		background-color: #fff3cd;
		color: #856404;
	}
	/* Добавляем стили для фильтрации */
	.filter-input {
		width: 100%;
		padding: 5px;
		box-sizing: border-box;
		margin-bottom: 5px;
	}
	
	/* Стили для скролла таблицы */
	.table-container {
		max-height: 500px;
		overflow-y: auto;
		margin-bottom: 20px;
		border: 1px solid #ddd;
	}
	
	.table-container table {
		margin-bottom: 0;
	}
	.batch-upload {
		margin-top: 20px;
		padding: 15px;
		background-color: #f8f9fa;
		border-radius: 5px;
		border: 1px dashed #ccc;
	}
	
	.edit-scores {
		display: flex;
		gap: 15px;
		margin-top: 15px;
	}
	
	.edit-scores input {
		width: 100px;
	}
	
	.report-filters {
		display: flex;
		gap: 15px;
		margin-bottom: 20px;
	}
	
	.report-filters select {
		flex: 1;
	}
	header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: 500;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
        }
        
        .user-details {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        
        .user-name {
            font-weight: 500;
            font-size: 16px;
        }
        
        .user-position {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .avatar-dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            top: 100%; /* Меню появляется прямо под аватаром */
            margin-top: 0px; /* Небольшой отступ */
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 4px;
            overflow: hidden;
        }

        .dropdown-content a {
            color: #333;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            transition: background-color 0.3s;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .avatar-dropdown:hover .dropdown-content {
            display: block;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #7986cb;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s;
            flex-shrink: 0;
        }
        
        .avatar-dropdown:hover .user-avatar {
            transform: scale(1.1);
        }
        .user-info-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-text-info {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-weight: 500;
            white-space: nowrap;
        }

        .user-position {
            font-size: 14px;
            color: #e0e0e0;
            white-space: nowrap;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-info-container {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .user-text-info {
            display: flex;
            flex-direction: column;
        }
		.hcontainer {
		max-width: 1200px;
		margin: 0 auto;
		border-radius: 8px;
	}