.bg-menu{
    background-color:#eff0f4;
}

#frame_skema{

}
.bg-skema{
    background-color:#b6d0e3;
}
#skema_jaringan{
    padding-bottom: 100px;
    overflow: scroll hidden;
    background-color: rgb(223, 231, 239);
}
.framemap{
    width: calc(100vw - 100px);
    height:80vh;
    overflow: scroll;
}
#yesmap{
    min-width: 250vw ;
    min-height: 200vh; 
    font-size:3em;
    line-height:1;
    position: relative;
    left:-600px;
    top:-200px;
}
.bb-irigasi{
 width: 24px;
 height:24px;
 border-radius:50%;
 border:3px solid #004598;
 background-color:#fff;
}
.bb-irigasi .o{
 border-radius:50%;
 border:3px solid #004598;
 width: 12px;
 height:12px;
 margin:auto;
 margin-top:3.2px;
 background:#fff;
}
.bb-irigasi:hover{
 background:#aaccee;
 cursor: pointer;
}
.bpengambil,.bsuplesi,.bintake{
 border-radius:5%; 
}
.tbl-palet td{
 padding: 5px;
 border: 4px solid #eff0f4;
 text-align: center;
 background: #dae0ea;
}
:root {
    --color-body: #959bac;
    --color-app: #e9e9e9;
    --duration: 5s;
    --ease: cubic-bezier(0.6, 0, 0.2, 1);
}

.app {
    height: 70vmin;
    width: 50vmin;
    border-radius: 1vmin;
    background: var(--color-app);
    left: 700px; top:300px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.svg {
    width: 50vmin;
    height: 70vmin;
}

.circle, .path {
    animation: dash var(--duration) var(--ease) both alternate infinite;
    stroke: var(--color);
    fill:none;
    stroke-width: 10;
    stroke-dasharray: 1;
    animation-iteration-count: 1;
    position: absolute;
}
/* @keyframes dash {
    from {
          stroke-dashoffset: 1;
    }
    to {
          stroke-dashoffset: 0;
    }
} */
.linepetak{
    --color: #470796;
    stroke-width: 5;     
}
#opsibox, #actionbox, #actionboxSaluran, #actionboxText{
    display:none;
    background:#d6dde77d;
    z-index: 10000;
    font-size: .3em;
    transform: scale(0.8);
}
.btn-default {
 background:#ffffff82;
}
#opsibox.show, #actionbox.show, #actionboxSaluran.show, #actionboxText.show{
    display:flex;
    position: absolute;
}
.icon_intake, .icon_sumber{
    fill:#ffffff;
    stroke-dasharray: 1;
    animation-iteration-count: 1;
    position: absolute;
}
.icon_sumber{ fill:#66ccff; }
.c1.hotlink{ fill:#ffffff; }
.c2.hotlink{ fill:#ff8833; }
.saluran{
    stroke: #365c85;
}
.saluran:hover{
    cursor: pointer;
    stroke: #2196f3;
}
.text_tersier{
 font-size:16px;
}
circle.c1, circle.c2{
 stroke:#365c85;  
 fill : #add0e0;
 stroke-width:4px;
}
circle.c2{
 fill : #99bbee;
 stroke-width:3px;
}

.bba circle.c2{
 stroke-width:0px;
 fill : #add0e0;
}
.bbs circle.c2{
 stroke-width:4px;
 fill : #add0e0;
}
.bsa circle.c1{
 fill : #add0e0;
}
.bba circle.c1{
 stroke-width:5px;
}
.bsa circle.c2{
 stroke-width:0px;
 fill : #365c85;
 stroke:#bdcae0; 
}

.new circle.c1{
 stroke:#365c85;
 fill : #fff;
}
.new circle.c2{
 stroke:#ff4400; 
 fill : #ff4400;
}
.bangunan:hover{
 cursor: pointer;
}
.bangunan:hover circle.c1{
 stroke:#0066dd; 
 fill : #fff;

}
/* .bangunan:hover circle.c2{
 stroke:#365c85; 
 fill : #334455;
} */
.ter{
 cursor: pointer;
}
.ter:hover rect{
 fill:#e0ffff;
 stroke:#004455; 
 stroke-width:3px;
}
.btn.nomen{
 width:70px;
}
text.nomen {
 font-size: 14pt;
}
label{
 font-size:10pt;
 margin-bottom:4px;
}
.btn-default {
 background: #ffffffcc;
}
.text_title{
 font-size: 20pt;
 fill : #334455;
 cursor:move;
}
.input_title{
 width:200px;
 background: none;
 margin-top:10px;
 font-size: 24px;
 position: absolute;
}
.knob{
 display:none;
}
.knob.show{
 display:block;
}
.knob:hover {
 cursor: pointer;
}
.footer{
 display:none;
}