.App{height:100%;width:100%}header{align-items:center;background-color:#1e3799;display:flex;height:60px;justify-content:space-around;width:100%}.logo{color:#fff;font-size:35px;font-weight:600}.details span{color:#fff;display:block}.update{background:#25ccf7;height:30px}.update,footer{align-items:center;display:flex}footer{background-color:#1e3799;height:20px;justify-content:center;width:100%}footer p{color:#fff;font-size:13px;font-weight:600;opacity:.8}.main-container{align-items:center;display:flex;gap:3rem;height:770px;justify-content:space-evenly}.controller{height:560px;width:250px}.controller table{width:100%}.controller table thead{background:#1e3799;color:#fff}.controller table thead th{padding:10px}.controller table tr td{font-weight:600;padding:5px 20px}.controller table tr td input[type=checkbox]{height:17px;width:17px}.controller table tbody tr:nth-child(odd){background-color:#becbf3}.ctrl-btn{display:flex;justify-content:space-around;padding:1rem 0}.ctrl-btn .btn{background-color:#1e3799;border-radius:5px;box-shadow:3px 3px 3px grey;color:#fff;cursor:pointer;font-size:18px;font-weight:600;padding:.8rem 1.2rem}.view{height:560px;justify-content:center;width:900px}.canvas,.view{align-items:center;display:flex}.canvas{border:2px solid #000;border-radius:5px;height:90%;position:relative;width:90%}.tank-container{height:80%;justify-content:space-evenly;left:-19.8%;position:absolute;width:100%;z-index:1}.tank-container,.tank-holder{align-items:center;display:flex}.tank-holder{flex-direction:column;height:100%;justify-content:center;position:relative;width:150px}.tank-holder:after{background-color:#000;content:"";height:504px;position:absolute;width:2px;z-index:-1}.tank-holder:first-child:after{background:transparent}.tank{align-items:center;background-color:#e6ffee;border:2px solid #000;border-radius:50% 50% 0 0/20% 20% 0 0;display:flex;flex-direction:column;height:220px;justify-content:center;margin:3rem 0;overflow:hidden;position:relative;width:150px}.tank-name{text-align:center}.tank .tank-upper{background:#000;height:2px;position:absolute;top:39px;width:100%}.tank .tank-lower{-webkit-animation:wave 4s linear infinite;animation:wave 4s linear infinite;border-top:1px solid #000;bottom:0;position:absolute;width:100%}@-webkit-keyframes wave{0%,to{-webkit-clip-path:polygon(0 8%,7% 6%,14% 5%,21% 5%,28% 6%,34% 8%,40% 12%,46% 17%,50% 20%,54% 23%,60% 25%,66% 26%,70% 26%,77% 25%,83% 23%,89% 21%,95% 19%,100% 17%,100% 100%,0 100%);clip-path:polygon(0 8%,7% 6%,14% 5%,21% 5%,28% 6%,34% 8%,40% 12%,46% 17%,50% 20%,54% 23%,60% 25%,66% 26%,70% 26%,77% 25%,83% 23%,89% 21%,95% 19%,100% 17%,100% 100%,0 100%)}50%{-webkit-clip-path:polygon(0 15%,9% 21%,14% 23%,18% 25%,21% 26%,30% 28%,32% 28%,40% 27%,46% 26%,52% 23%,57% 19%,62% 15%,68% 11%,73% 8%,79% 6%,86% 5%,93% 5%,100% 6%,100% 100%,0 100%);clip-path:polygon(0 15%,9% 21%,14% 23%,18% 25%,21% 26%,30% 28%,32% 28%,40% 27%,46% 26%,52% 23%,57% 19%,62% 15%,68% 11%,73% 8%,79% 6%,86% 5%,93% 5%,100% 6%,100% 100%,0 100%)}}@keyframes wave{0%,to{-webkit-clip-path:polygon(0 8%,7% 6%,14% 5%,21% 5%,28% 6%,34% 8%,40% 12%,46% 17%,50% 20%,54% 23%,60% 25%,66% 26%,70% 26%,77% 25%,83% 23%,89% 21%,95% 19%,100% 17%,100% 100%,0 100%);clip-path:polygon(0 8%,7% 6%,14% 5%,21% 5%,28% 6%,34% 8%,40% 12%,46% 17%,50% 20%,54% 23%,60% 25%,66% 26%,70% 26%,77% 25%,83% 23%,89% 21%,95% 19%,100% 17%,100% 100%,0 100%)}50%{-webkit-clip-path:polygon(0 15%,9% 21%,14% 23%,18% 25%,21% 26%,30% 28%,32% 28%,40% 27%,46% 26%,52% 23%,57% 19%,62% 15%,68% 11%,73% 8%,79% 6%,86% 5%,93% 5%,100% 6%,100% 100%,0 100%);clip-path:polygon(0 15%,9% 21%,14% 23%,18% 25%,21% 26%,30% 28%,32% 28%,40% 27%,46% 26%,52% 23%,57% 19%,62% 15%,68% 11%,73% 8%,79% 6%,86% 5%,93% 5%,100% 6%,100% 100%,0 100%)}}.first-tank-lower{background-color:rgba(64,45,210,.6);height:60%}.middle-tank-lower{background-color:rgba(24,172,180,.5);height:70%}.third-tank-lower{background-color:rgba(255,235,153,.8);height:20%}.tank-holder .indicator{align-items:center;display:flex;height:30px;justify-content:center;position:relative;width:50px}.tank-holder .indicator:after{background:#000;content:"";height:2px;left:15px;position:absolute;width:9px}.tank-holder .indicator .lamp-name{align-items:center;background-color:#becbf3;border:1px solid #000;color:#000;display:flex;height:15px;justify-content:center;width:15px}.tank-holder .indicator span{color:#000;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tank-holder .indicator .variable-name{align-items:center;color:#000;display:flex;font-size:10px;height:30px;justify-content:center;width:15px}.tank-holder .indicator .lamp{align-items:center;display:flex;flex-direction:column;justify-content:center}.tank-holder .indicator .lamp .lamp-first{background:#becbf3;-webkit-clip-path:polygon(0 0,50% 100%,100% 0);clip-path:polygon(0 0,50% 100%,100% 0);height:15px;width:20px}.tank-holder .indicator .lamp .lamp-second{background:#becbf3;-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);height:15px;width:20px}.tank-circle-indic-holder{left:-40px;position:absolute}.tank-circle-indic-holder:before{background:#000;content:"";height:2px;position:absolute;width:40px}.tank-circle-indic-holder:after{background:#000;bottom:0;content:"";height:97px;position:absolute;width:2px}.circle-indic{align-items:center;border:2px solid #000;border-radius:50%;bottom:95px;display:flex;flex-direction:column;height:50px;justify-content:center;left:-25px;position:absolute;width:50px;z-index:1}.circle-indic.tr1{background-color:#cbf0f3}.circle-indic.tr2{background-color:#effeff}.circle-indic .tr-val{align-items:center;display:flex;font-size:13px;height:48%;justify-content:center;width:100%}.circle-indic hr{border-top:2px solid #000;width:100%}.circle-indic .tr-name{bottom:-18px;left:-5px;position:absolute;text-transform:uppercase}.pump{align-items:center;background:#becbf3;border:2px solid #000;border-radius:50%;display:flex;height:60px;justify-content:center;position:absolute;right:-30px;top:-30px;width:60px}.pump:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.pump:after,.pump:before{background:#000;content:"";display:block;height:2px;width:100%}.pump:after{position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.pump span{bottom:0;left:-35px;position:absolute}.mBotm{align-items:center;background:#f2f2f2;border:2px solid #000;bottom:-35px;display:flex;height:60px;justify-content:center;position:absolute;right:15px;width:55px}.mBotm:before{bottom:15px;height:2px;right:-40px;width:40px}.mBotm:after,.mBotm:before{background:#000;content:"";position:absolute}.mBotm:after{bottom:7.5px;-webkit-clip-path:polygon(100% 0,0 50%,100% 100%);clip-path:polygon(100% 0,0 50%,100% 100%);height:15px;right:-55px;width:15px}.main-indic-holder{position:absolute;right:-75px;width:75px}.indic-holder .indicator,.main-indic-holder{align-items:center;display:flex;justify-content:center}.indic-holder .indicator{height:30px;position:relative;width:50px}.main-indic-holder.indic-holder .indicator{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.indic-holder .indicator .lamp-name{align-items:center;background-color:#becbf3;border:1px solid #000;color:#000;display:flex;height:15px;justify-content:center;width:15px}.indic-holder .indicator .lamp{align-items:center;display:flex;flex-direction:column;justify-content:center}.indic-holder .indicator .lamp .lamp-first{background:#becbf3;-webkit-clip-path:polygon(0 0,50% 100%,100% 0);clip-path:polygon(0 0,50% 100%,100% 0);height:15px;width:20px}.indic-holder .indicator .lamp .lamp-second{background:#becbf3;-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);height:15px;width:20px}.indic-holder .indicator .variable-name{align-items:center;color:#000;display:flex;font-size:10px;height:30px;justify-content:center;width:15px}.main-indic-holder:before{background:#000;content:"";height:2px;position:absolute;width:100%}.main-indic-holder:after{background:#000;-webkit-clip-path:polygon(0 0,0 100%,100% 50%);clip-path:polygon(0 0,0 100%,100% 50%);content:"";height:15px;position:absolute;right:-10px;width:15px}.second-indic-holder{align-items:center;display:flex;justify-content:center;position:absolute;right:-38px;top:185px;width:74px}.view-circle-indic-holder{position:absolute}.view-circle-indic-holder.first-holder{right:60%;top:80px}.view-circle-indic-holder.first-holder .circle-indic{background:#fbf4d0}.view-circle-indic-holder.second-holder{right:50%;top:80px}.view-circle-indic-holder.second-holder .circle-indic{background:#bdf4ee}
/*# sourceMappingURL=main.b9b49102.css.map*/