*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,Helvetica,sans-serif;background:aliceblue;padding:14px;}
.wrap{background:white;border:1px solid silver;border-radius:6px;padding:14px;}
h1{font-size:16px;color:#1a237e;margin-bottom:10px;}
.grid{width:100%;border-collapse:collapse;font-size:12px;}
.grid th, .grid td{padding:8px;text-align:center;vertical-align:middle;
    border:1px solid #cfd8dc;}
.grid .row-header{background:#eceff1;text-align:left;font-weight:bold;color:#37474f;width:24%;}
.grid .col-header{background:#eceff1;color:#37474f;font-weight:bold;}
.grid .col-header.purpose{background:#c5cae9;color:#1a237e;}
.grid .cell{cursor:pointer;font-weight:bold;color:white;}
.grid .cell:hover{outline:2px solid #000;}
.cell.red{background:#e53935;}
.cell.yellow{background:#fbc02d;color:#212121;}
.cell.green{background:#43a047;}
.legend{margin-top:10px;font-size:11px;color:#455a64;}
.legend .sw{display:inline-block;width:14px;height:14px;vertical-align:middle;border-radius:3px;margin:0 4px 0 12px;}
.legend .sw.red{background:#e53935;}
.legend .sw.yellow{background:#fbc02d;}
.legend .sw.green{background:#43a047;}
.detail{margin-top:10px;background:#f8f9fa;border:1px solid #cfd8dc;border-radius:6px;
    padding:10px 12px;font-size:12px;color:#37474f;line-height:1.5;min-height:60px;}
.detail strong{color:#1a237e;}