body {
            font-family: Arial, sans-serif;
            background-color: var(--header-footer-color);
            color: var(--base-text);
        }
        .admin_header {
        	height : 150px;
        }
        
        header , footer {
            text-align : center;
            margin-bottom : 10px;
        }
		.card-summary-stats {
		  background : var(--background);
		  height : 200px;
	      display : flex;
	      justify-content : center;
	      align-items : center;
	      gap : 20px;
	      margin-bottom : 20px;
	      border-radius : 10px;
		}
		.card-name {
		  display : flex;
	      flex-direction : column;
	      height : 150px;
	      width : 200px;
	      justify-content : center;
	      align-items : center;
	      border-radius : 20px;
		}
		.card-name h1 {
		  	font-size : 40px;
		 }
		.total-sales {
		      background: linear-gradient(135deg , var(--low-text-button) , var(--high-text-button));
		      color : var(--base-text);
		  }
		  .product-count {
		      background-color : var(--card);
		      color : var(--base-text);
		  }
		  .users-count {
		      background-color : var(--low-text-button);
		      color : var(--base-text);
		  }
		  .active-orders {
		      background-color : var(--high-text-button);
		      color : var(--base-text);
		  }
		  .card-container {
		  	display : flex;
		  	justify-content : center;
		  	align-items : center;
		  	gap : 20px;
		  }
        .card {
        	width : 550px;
            background-color: var(--background);
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 16px;
            text-align: left;
        }
        th, td {
            border: 1px solid var(--card);
            padding: 8px;
        }
        th {
            background-color: var(--base-text);
            font-weight: bold;
            color : var(--header-footer-color);
        }
        tbody tr:hover {
        	background-color : var(--background);
        }
        td img {
            width : 60px;
            height : 60px;
        }
        .name {
        	display : flex;
        	justify-content : left;
        	align-items : center;
        	gap : 20px;
        }
        td p {
            color : var(--base-text);
            text-align : center;
        }
        td h4 {
            color : var(--base-text);
        }
		.line-graph {
			width : 900px;
			height : 500px;
		}
		.bar-graph {
			height : 500px;
		}
        .card h2 {
            margin: 0 0 15px;
            color: var(--base-text);
        }
		.list-container img {
			height : 60px;
		}
        .charts, .lists {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .summary-item {
            flex: 1;
            min-width: 200px;
            text-align: center;
        }

        .summary-item h3 {
            color: var(--high-text-button);
        }

        canvas {
            background-color: var(--background);
            border-radius: 8px;
            padding: 10px;
        }
		#order-fulfillment-chart {
			border : none;
		}
        .list {
            list-style: none;
            padding: 0;
        }

        .list li {
            background-color: var(--card);
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
        }