.breakpoint-badge{position:fixed;top:10px;left:10px;background:#000;color:#fff;font-size:12px;padding:4px 6px;border-radius:4px;z-index:2000}#whiteOnRed{color:#fff;background:red;padding:6px 8px}#blackOnYellow{color:#000;background:#ff0;padding:6px 8px}.blueOnYellow{color:#00f;background:#ff0;padding:6px 8px}.blueOnYellowHeading{color:#00f;background:#ff0;padding:4px 6px}.whiteOnRedDiv{color:#fff;background:red}.smallSpan{color:#00f;background:#ff0;padding:2px 4px}.blueHeading{color:#00f}.redText{color:red}.greenText{color:green}.whiteOnBlueHeading{color:#fff;background:#00f;padding:4px 6px}.blackOnRed{color:#000;background:red;padding:6px 8px}.whiteOnGreen{color:#fff;background:green}.fatRedBorder{border:5px solid red}.thinBlueDashed{border:1px dashed blue}.padTopLeft{border:5px solid red;background:#ff0;padding-top:20px;padding-left:20px}.padBottom{border:5px solid blue;background:#ff0;padding-bottom:20px}.padAll{border:5px solid yellow;background:#00f;color:#fff;padding:20px}.marginBottom{border:5px solid red;background:#ff0;margin-bottom:16px;padding:8px}.centered{border:5px solid blue;background:#ff0;width:260px;margin-left:auto;margin-right:auto;padding:12px;text-align:center}.bigMargins{border:5px solid yellow;background:#00f;color:#fff;margin:24px;padding:8px}.demoBox{width:260px;padding:8px;border:3px solid #444;background:#fafafa}.topRounded{border-top-left-radius:16px;border-top-right-radius:16px}.bottomRounded{border-bottom-left-radius:16px;border-bottom-right-radius:16px}.allRounded{border-radius:16px}.exceptTopRight{border-radius:16px 0 16px 16px}.wideYellow{background:#ff0;height:100px;width:200px;border:2px solid #333}.tallBlue{background:#00f;color:#fff;width:100px;height:200px;border:2px solid #333}.redSquare{background:red;width:150px;height:150px;border:2px solid #333;color:#fff}.relYellow{background:#ff0;border:2px solid #333;position:relative;top:10px;left:10px}.relBlue{background:#00f;color:#fff;border:2px solid #333;position:relative;top:-10px;left:10px}.positionStage{position:relative;height:200px;border:1px dashed #999;background:#f8f9fa;margin-bottom:8px}.positionStage .portrait,.positionStage .landscape,.positionStage .square{position:absolute;border:2px solid #333;color:#fff;display:flex;align-items:center;justify-content:center}.positionStage .portrait{width:90px;height:150px;background:#6c757d;top:20px;left:20px;z-index:1}.positionStage .landscape{width:150px;height:90px;background:#0d6efd;top:50px;left:60px;z-index:3}.positionStage .square{width:110px;height:110px;background:#dc3545;top:40px;left:120px;z-index:2}.fixedBlue{position:fixed;right:12px;bottom:12px;background:#0d6efd;color:#fff;padding:8px 12px;border-radius:6px;z-index:1500}.floatRow .floatA,.floatRow .floatB,.floatRow .floatC{float:left;width:120px;height:80px;margin-right:8px;border:2px solid #333;background:#e9ecef;display:flex;align-items:center;justify-content:center}.clearfix:after{content:"";display:block;clear:both}.imgRight{float:right;margin:0 0 8px 8px;border:1px solid #ccc}.gridDemo{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gridDemo .gridCell{background:#f1f3f5;border:1px solid #ced4da;padding:8px;text-align:center}.flexCols{display:flex;gap:8px}.flexCols .flexCell{flex:1 1 0;background:#f8f9fa;border:1px solid #ddd;padding:8px;text-align:center}.iconsRow{font-size:26px;display:flex;gap:12px;align-items:center}.dim-yellow,.dim-blue,.dim-red{display:flex;align-items:center;justify-content:center;margin-bottom:12px;border:1px solid #cfcfcf;font-weight:600}.dim-yellow{background:#fff176;width:240px;height:160px}.dim-blue{background:#64b5f6;width:140px;height:220px}.dim-red{background:#ef9a9a;width:180px;height:180px}.rel-yellow,.rel-blue{position:relative;padding:8px 12px;margin-bottom:8px;border:1px dashed #bdbdbd;width:max-content;font-weight:600}.rel-yellow{background:#fff59d;top:8px;left:8px}.rel-blue{background:#bbdefb;top:-6px;left:10px}.abs-wrapper{position:relative;height:200px;border:1px dashed #bdbdbd;margin:12px 0}.portrait,.landscape,.square{position:absolute;display:flex;align-items:center;justify-content:center;color:#222;font-weight:600;border:1px solid #9e9e9e}.portrait{left:8px;top:8px;width:100px;height:160px;background:#ffe082}.landscape{left:120px;top:30px;width:180px;height:90px;background:#90caf9;z-index:2}.square{left:230px;top:90px;width:110px;height:110px;background:#ef9a9a}.fixed-blue{position:fixed;right:16px;bottom:16px;width:160px;height:56px;background:#1976d2;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:6px;box-shadow:0 2px 8px #0003}.float-wrapper{overflow:auto;margin:12px 0}.rect{float:left;width:100px;height:80px;margin-right:8px;background:#e0e0e0;border:1px solid #bdbdbd;display:flex;align-items:center;justify-content:center}.float-right-img{float:right;margin:8px}.list-group-item{border-left:4px solid #28a745}