body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .container { max-width: 800px; margin: 20px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); position: relative; } h1 { margin-top: 0; font-size: 24px; } h2 { margin-top: 0; } table { width: 100%; border-collapse: collapse; padding-top: 20px; background-color: #fff; } tbody tr:hover { background-color: #eee; cursor: pointer; } th, td { border: 1px solid #ddd; padding: 12px; text-align: left; } td div { max-width: 6ch; white-space: nowrap; overflow: hidden; display: block; } thead td:first-child { border: none; } th.nodata { text-align: center; } tfoot td { border: none; } tbody td:first-child { max-width: 1ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 5px; cursor: pointer; } button:hover { background-color: #3c8d3e; } fieldset { margin: 0; padding: 0; border: none; } /* Dialog box */ dialog { padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; width: 400px; } /* Labels */ label { display: block; font-weight: bold; margin-bottom: 5px; } /* Text inputs */ input, select, form div { padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; display: block; font-size: 16; } input, select { width: 100%; } input[type=checkbox] { width: inherit } form { margin: 0; } form fieldset:last-child { margin-top: 20px; text-align: right; } iframe { width: 100%; height: 100%; } button.danger { margin-top: 50px; width: 100%; background-color: #af4c4c; } button.danger:hover { background-color: #8d3c3c; }