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