.container{width:100%;margin-top:2rem;margin-left:auto;margin-right:auto}#ruler{background:#fff;width:100%;height:650px;overflow:hidden}#ruler.full-screen{inset:0;width:100%;height:100%;position:fixed;inset:0;overflow:hidden}.ruler{flex-direction:column;width:100%;height:100%;display:flex}.ruler canvas{touch-action:none}.ruler-tools{direction:ltr;justify-content:center;align-items:center;gap:1.86rem;width:100%;height:80px;margin-bottom:2rem;display:flex}@media (width<=768px){.ruler-tools{flex-wrap:wrap;margin-bottom:8rem}#ruler{width:96%;height:800px;margin:auto}.content_box{margin-top:3rem!important}.tools4{background-color:red}.tools4 input{min-width:unset!important;width:40%!important}.tools4 .action{grid-template-columns:1fr 1fr;justify-content:center;align-items:center;width:100%;margin:5px auto;display:grid!important}.tools4 .action button:last-of-type{grid-column:span 2}}.ruler-calibre-card{flex-direction:column;justify-content:center;align-items:center;display:flex}.rtl-direction .calibre_box{direction:rtl}.ruler-calibre-card input{width:calc(100% - 32px);max-width:400px;margin:16px}.ruler-calibre-card img{transform:rotate(90deg) scale(var(--scale)) translate(50%, -50%);transform-origin:top;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:8.56cm;height:5.398cm}@media (width>=768px){.ruler-calibre-card{flex-direction:row;padding-top:68px}.ruler-calibre-card input{max-width:184px;margin-right:-40px;transform:rotate(-90deg)}.ruler-calibre-card img{transform:scale(var(--scale));transform-origin:0}}.ruler-box{width:100%;height:calc(100% - 80px - 2rem);position:relative}#ruler-controller{justify-content:center;display:flex}label,#ruler-controller p{color:#000;margin-right:10px;font-family:inherit}select{margin-left:4px}.ruler-tools button{background-color:var(--btn-color,#ccc);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;font-family:inherit;font-size:24px;transition:color .2s,background-color .2s,transform .3s;display:flex;position:relative;box-shadow:0 4px 12px #0000001a}.ruler-tools button svg{width:100%;height:100%;transition:all .3s}.ruler-tools button:hover svg{fill:var(--btn-color,#ccc)}.full-screen svg{height:40px;width:40px!important}.tools svg{height:34px;width:34px!important}.controls{z-index:10;background-color:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;flex-wrap:wrap;align-items:center;gap:1rem;width:100%;margin-bottom:1rem;padding:1rem 1.5rem;display:flex}.controls label{color:#2c3e50;white-space:nowrap;margin-right:.5rem;font-weight:500}.controls select,.controls input[type=text],.controls input[type=number]{background-color:#f8fafc;border:1px solid #dce4ec;border-radius:8px;flex:auto;min-width:160px;padding:.5rem 1rem;font-size:1rem;transition:border-color .3s,box-shadow .3s}.controls select:focus,.controls input:focus{border-color:#5498e5;outline:none;box-shadow:0 0 0 3px #1e90ff26}.controls .action{flex-wrap:wrap;gap:.75rem;margin-left:auto;display:flex}.rtl-direction .controls .action{margin-left:0;margin-right:auto}.controls button{color:#fff;cursor:pointer;background:#5498e5;border:none;border-radius:8px;padding:.5rem 1.25rem;font-size:1rem;transition:background .3s}.controls button:hover{background:#187bcd}