@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
#tool{margin-bottom:20px}
#ruler{position:relative;height:80px;background-color:#f5f5f5;border:1px solid #dcdcdc;overflow:hidden;cursor:pointer}
.ruler-scale{position:absolute;top:0;bottom:0;white-space:nowrap}
.ruler-scale .ruler-mark{position:absolute;height:100%;border-left:1px solid #333}
.ruler-scale .cm-mark{height:50%;bottom:0}
.ruler-scale .cm-mark::after{content:attr(data-label);position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:14px}
.ruler-scale .mm-mark::after{content:attr(data-label);position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:#515960}
.ruler-scale .mm-mark{height:25%;bottom:0}
.ruler-scale .mm-mark-5{height:40%}
.preset-line{position:absolute;height:100%;width:2px;background-color:#ff7979}
.user-line{position:absolute;height:100%;width:2px;background-color:#ff7979}
.action-btn{margin:0;font-size:12px}
.action-btn.calibration-btn{background-color:#ff7979}
.action-btn.calibration-btn:hover{background-color:#ff6060}
.action-btn.calibration-btn#calibration{background-color:#ce5f5f}
.action-btn.calibration-btn#calibration:hover{background-color:#bf3b3b}
.ruler-commands{display:flex;justify-content:space-between;align-items:end;gap:20px}
.ruler-commands .measurement-unit{min-width:30px}
.ruler-commands_buttons{display:flex;flex-wrap:wrap;justify-content:end;gap:3px}
#fullScreen{font-family:cursive}
#tool.reverse{display:flex;flex-direction:column}
#tool.reverse .ruler-scale .cm-mark{height:50%;top:0}
#tool.reverse .ruler-scale .cm-mark::after{bottom:-20px;top:auto}
#tool.reverse .ruler-scale .mm-mark{height:25%;top:0}
#tool.reverse .ruler-scale .mm-mark::after{bottom:-20px;top:auto}
#tool.reverse .ruler-scale .mm-mark-5{height:40%}
#tool.reverse .ruler-commands{order:2;align-items:start}
#tool.reverse #ruler{order:1}
#tool.reverse #calibration-text{order:3}
#calibration-text{margin:10px 0}