:root{--header-color: gray;--section-color: white;--form-font:Arial, Helvetica, sans-serif;--input-color:rgb(255, 255, 255);--VL-color:#6d056d;--GO-color:#ffd000;--HS-color:#000000;--open-color:#079b07;--close-color:#b11111}*{padding:0;margin:0;font-family:var(--form-font)}#root{padding:0;margin:0}main{display:flex;flex-direction:column;align-items:center;justify-content:center}label{font-family:var(--form-font);font-weight:600}input{border:none;background:var(--input-color);font-size:medium;font-weight:600;font-family:var(--form-font);width:auto;outline:none}input:focus{background:#ebf0a891}input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;border:none;height:100%;text-align:center;font-weight:600;background:var(--input-color)}select:focus{background:#ebf0a891}.small-font{font-size:small}.smaller-font{font-size:small;word-break:break-word;width:max-content}.text-center{text-align:center}.break-text{word-break:break-word;width:max-content}.VL-color{color:purple;font-weight:700}.HS-color{color:#000;font-weight:700}.GO-color{color:orange;font-weight:700}.input-open{color:var(--open-color);font-weight:700}.input-close{color:var(--close-color);font-weight:700}.main-table{width:100%;border-collapse:collapse;table-layout:fixed;overflow:hidden}.main-table tr{height:30px}.main-table th{outline:1px solid black;text-wrap:wrap}.row-data{width:100%;height:30px}.row-data td{table-layout:fixed;outline:1px solid black;height:100%}.row-data td input{width:100%;box-sizing:border-box;padding:.1em;text-align:center}.row-data td select{width:100%;box-sizing:border-box;border:none;font-size:1.9vh}.col-8pctage{width:8%}.col-10pctage{width:10%}.col-12pctage{width:12%}.col-17pctage{width:17%}.col-3pctage{width:2.9%}.col-20pctage{width:25%}.form-date{display:flex;flex-direction:column;justify-content:space-around;align-items:start;height:100%;margin-inline:1em}.form-date div{display:flex;flex-direction:row;font-family:var(--form-font)}.form-date div span{margin-inline:.7em;font-size:large}.valve-table{height:36vh}.form-valveinfo table{width:100%;height:100%;border-collapse:collapse;table-layout:fixed}.valve-body{display:table-row-group;height:100%;width:100%}.valve-body tr{height:4vh;display:table-row}.valve-table td{vertical-align:middle;outline:1px solid black}.valve-table label{display:block;font-weight:700;font-size:1.7vh;padding-left:.3em;margin:0}.valve-table input{width:100%;box-sizing:border-box;border:none}.valve-table select{width:100%;box-sizing:border-box;border:none;font-size:1.7vh}.td-title{font-weight:600;text-align:center}.text-information{width:100%;height:100%;display:flex;flex-direction:column}#textHandOver{width:100%;height:100%;font-size:18px;padding-inline:1em;box-sizing:border-box}#textHandOver:focus{outline:none}.to-header{text-align:center;border-bottom:1px solid black;font-size:smaller}.to-content{display:flex;flex-direction:row;flex:1}.to-content div{display:flex;outline:1px solid black;flex-direction:column;width:50%;padding-left:5px;font-size:.8vi}.tanks-form{position:absolute;bottom:3%;width:70vw;z-index:8000}.table-tanks{width:100%;outline:1px solid black}.table-tanks thead{height:25px;text-align:center;font-weight:600;-webkit-user-select:none;user-select:none}.table-tanks tr{height:25px;table-layout:fixed;outline:1px solid black}.tittle{font-weight:600}.table-tanks td input{width:10vw;text-align:center}.table-tanks td{outline:1px solid black;padding:.1em}#svgImage{position:absolute;top:0;height:98vh;width:100vw;z-index:8000}#svgSRC{position:absolute;top:0;z-index:1000;height:98vh;width:100vw;-webkit-user-select:none;user-select:none}.open{stroke-width:40;stroke:#02810247;fill:var(--open-color);position:relative}.run{stroke-width:40;stroke:#02810247;fill:var(--open-color)}.stop,.close{stroke-width:50;stroke:#3d3d3d1f;position:relative}.fs,.pumpfs{stroke-width:15;stroke:var(--close-color)}.clicable:hover{cursor:pointer}.run-wheel{stroke-width:4;stroke:#948503;fill:#ddb70f;animation:rotatewheel .4s linear infinite;transform-origin:center;transform-box:fill-box}.stop-wheel{stroke-width:25}.pumpfs-wheel{stroke-width:10;fill:var(--close-color);stroke:var(--close-color)}.discharge{position:relative;stroke-width:5;fill:var(--close-color);stroke:var(--close-color);scale:1.5;transform:translateY(30px) rotate(180deg);transition:transform .3s;transform-origin:center;transform-box:fill-box}@keyframes rotatewheel{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.section-svg{display:flex;align-items:center;justify-content:center;background:var(--section-color);height:100vh;width:70%}.section-info{display:grid;background:#fff;grid-template-columns:repeat(5,1fr);grid-template-rows:13vh 35vh 36vh 10vh 2vh;grid-template-areas:"div1 div2 div3 div3 div4" "div5 div5 div5 div5 div5" "div6 div6 div6 div6 div7" "div8 div8 div8 div8 div8" "div9 div9 div9 div9 div9";gap:0;height:90vh;margin:5px;width:95vw}.section-info>*{outline:1px solid black}.grid-element1{grid-area:div1;padding:1em;font-size:1.1vi;text-wrap:balance}.grid-element2{grid-area:div2;display:flex;min-width:450px;flex-direction:column}.grid-element3{grid-area:div3;align-content:center;text-align:center;font-size:2vi}.grid-element4{grid-area:div4}.grid-element5{grid-area:div5;width:100%;height:100%;overflow:hidden}.grid-element6{grid-area:div6}.grid-element7{grid-area:div7}.grid-element8{grid-area:div8;display:flex;flex-direction:column;height:100%;width:100%;justify-content:space-between;align-items:start}.pumpmen-form{display:flex;flex-direction:row;width:100%;height:100%}.pumpmen-form div{outline:1px solid black;width:50%}#pumpyOut,#pumpyIn{margin:10px;font-size:xx-large}.grid-element9{grid-area:div9;text-align:center;font-size:14px;padding:1px}#save-but,#load-but{position:absolute;right:5%;bottom:-98%;padding:1em;background:#00c77b;border-radius:10px;box-shadow:1px 2px 15px 3px #00000049;color:#fff;font-weight:500;font-size:1em;transition:.2s ease;border:none;outline:none;z-index:9000}#load-but{right:5%;bottom:90%}#save-but:hover,#load-but:hover{background:#05945d;scale:1.1;cursor:pointer}.ul-menu{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 6px #0003;list-style:none;margin:0;z-index:9999}.ul-menu li{padding:.1em .5em;font-size:16px}.ul-menu li:hover{background:#d6d6d6;cursor:pointer}