/* General page styling */
		body {
			font-family: Arial, Helvetica, sans-serif;
			background-color: #f4f6f8;
			margin: 20px;
			color: #222;
		}

		/* Headings */
		h1 {
			font-size: 28px;
			margin-bottom: 10px;
		}

		h2 {
			margin-top: 30px;
		}

		/* Buttons */
		button {
			background-color: #2d6cdf;
			color: white;
			border: none;
			padding: 6px 12px;
			margin: 3px;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
		}
		.btnhelp {
			background-color: #2d6cdf;
			color: white;
			border: none;
			padding: 6px 12px;
			margin: 3px;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
			float: right;

		}
		
		button:hover {
			background-color: #1f4fa3;
		}

		button:active {
			transform: translateY(1px);
		}

		/* Danger buttons */
		button.danger {
			background-color: #cc4444;
		}

		button.danger:hover {
			background-color: #992222;
		}

		/* Warning buttons */
		button.warning {
			background-color: #cc8800;
		}

		button.warning:hover {
			background-color: #996600;
		}
		
		img{
			border-style: solid;
			border-width: 2px;
			border-color: silver;
			max-width: 100%;
			width: 600px;
		}
		
		.panel {
			background-color: #ffffff;
			padding: 12px 14px;
			margin-bottom: 14px;
			border-radius: 6px;
			width: 600px;
			

			/* very subtle separation */
			box-shadow: 0 1px 3px rgba(0,0,0,0.08);
		}
		/* slightly different tone for secondary sections */
		.panel-subtle {
			background-color: #f8fafc;
			padding: 12px 14px;
			margin-bottom: 14px;
			border-radius: 6px;
			width: 600px;

			box-shadow: 0 1px 2px rgba(0,0,0,0.05);
		}
		.panelhelp {
			background-color: #ffffff;
			padding: 12px 14px;
			margin: auto;
			margin-bottom: 14px;
			border-radius: 6px;
			width: 600px;
			text-align: center;
			
			
			border-style: solid;
			border-width: 2px;
			border-color: black;
		}

		.panelhelp-subtle {
			background-color: #f8fafc;
			padding: 12px 14px;
			margin: auto;
			margin-bottom: 14px;
			border-radius: 6px;
			width: 600px;
			text-align: center;
			
			
			

			border-style: solid;
			border-width: 2px;
			border-color: black;
		}
		
		
		.panel h2 {
			margin-top: 5px;
		}

		
		
		/* Merit button cell */
		.merit-cell {
			width: 80px;
			padding: 2px;
		}
		
		.merit-cell-clickable {
			cursor: pointer;
			user-select: none;
		}

		.merit-cell-clickable:hover {
			background-color: #eef3ff;
		}
		
		/* Merit button itself */
		.merit-btn {
			width: 72px;
			height: 36px;
			font-size: 18px;
			font-weight: bold;
			padding: 0;
			margin: 0;
			border-radius: 6px;
			display: inline-block;
			background-color: #58ab20;
		}

		.merit-btn:hover {
			background-color: #218838;
		}


		/* Tables */
		table {
			border-collapse: collapse;
			background-color: white;
			margin-top: 10px;
			min-width: 600px;
		}

		/* Center everything in all tables */
		th, td {
			text-align: center;
			vertical-align: middle;
		}

		th {
			background-color: #2d6cdf;
			color: white;
			padding: 8px;
		}

		td {
			padding: 6px 8px;
			border-bottom: 1px solid #ddd;
		}


		tr:hover {
			background-color: #eef3ff;
		}

		/* Checkbox scaling */
		input[type="checkbox"] {
			transform: scale(1.2);
		}

		/* Number input */
		input[type="number"] {
			padding: 4px;
		}

		/* Layout containers */
		.toolbar {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		/* class button grid */
		.button-class {
			display: grid;
			grid-template-columns: repeat(4, 140px);
			column-gap: 6px;
			row-gap: 8px;
			width: max-content;
		}
		.button-class button {
			width: 140px;
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			
		}
		/* year button grid */
		.button-year {
			display: grid;
			grid-template-columns: repeat(3, 140px);
			column-gap: 6px;
			row-gap: 8px;
			width: max-content;
		}
		.button-year button {
			width: 140px;
			display: inline-block;
		}


		/* Highlight animation */
		.highlight {
			background-color: #fff3a0 !important;
			transition: background-color 2s ease;
		}

		/* Login form */
		.login-box {
			background-color: white;
			padding: 20px;
			width: 300px;
			border-radius: 6px;
			box-shadow: 0 0 10px rgba(0,0,0,0.1);
		}

		input[type="text"],
		input[type="password"] {
			width: 50%;
			padding: 6px;
			margin-top: 4px;
			margin-bottom: 10px;
		}
		
		
		
		/* Checkout MODE*/
		.checkout-container {
            max-width: 600px;
            margin: 0 auto;
        }

        .student-card {
            border: 2px solid #2d6cdf;
            padding: 16px;
            border-radius: 8px;
            margin-top: 20px;
            background-color: #f4f8ff;
        }

        .student-card h2 {
            margin: 0;
        }

        .search-results div {
            padding: 6px;
            cursor: pointer;
        }

        .search-results div:hover {
            background-color: #eee;
        }

        .pay-btn {
            margin-top: 15px;
            padding: 10px 20px;
            font-size: 18px;
        }