textarea { background: #232023; color: #fcfcfc; width: 100%; max-width: 1260px; height: 300px; } button, a.op-button { text-decoration: none; padding: 4px; margin: 4px; border: 1px solid #ea79d8; color: #fcfcfc; border-radius: 4px; background: #ea79d8; font-size: 16px; transition: background-color 0.2s ease-in-out; } a.op-button-delete { text-decoration: none; padding: 4px; margin: 4px; border: 1px solid #ee5040; color: #fcfcfc; border-radius: 4px; background: #ee5040; font-size: 16px; transition: background-color 0.2s ease-in-out; } a.op-button-create { text-decoration: none; padding: 4px; margin: 4px; border: 1px solid #17c73d; color: #fcfcfc; border-radius: 4px; background: #17c73d; font-size: 16px; transition: background-color 0.2s ease-in-out; } a.op-button-edit { text-decoration: none; padding: 4px; margin: 4px; border: 1px solid #dbd81d; color: #232023; border-radius: 4px; background: #dbd81d; font-size: 16px; transition: background-color, color 0.2s ease-in-out; } button:hover, a.op-button:hover { background-color: #b421f8; } a.op-button-delete:hover { background-color: #8d0707; } a.op-button-create:hover { background-color: #077907; } a.op-button-edit:hover { background-color: #9fa10d; color: #fcfcfc; } div.op-grid { display: grid; grid-auto-flow: column; margin: 8px 0; } div.op-grid-item { margin: 4px; padding: 2px; border: 1px solid #fcfcfc; border-radius: 2px; } tr.status-free { background-color: #34860e; color: #fff; } tr.status-reserved { background-color: #c59e1d; color: #fff; } tr.status-use { background-color: #850000; color: #fff; } tr.status-fumei { background-color: #888; color: #000; }