@charset "utf-8";

.mainscene {
    width:450px; height: 340px;
}

.ml-controlText {
    position: relative;
    display: block;
    margin: 5px;
}

.ml-labelText {
    width: 100%;
    margin-top: 30px;
}

#mlCanvas {
    position: absolute;
    left: 0px;
    width: 400px; height: 210px;
    top: 37px;
}

.charge {
    border-radius: 50%;
    width: 20px ;
    height: 20px ;
    background: yellow ;
}

.red {
    border-radius: 50%;
    width: 30px ;
    height: 30px ;
    background: red;
}

.blue {
    border-radius: 50%;
    width: 40px ;
    height: 40px ;
    background: blue ;
}

.signalGroupCont > div{
    position: absolute;
    display: inline;
}

.signalTopText > div {
    position: absolute;
    display: inline;
}

.midTextGroup > div {
    position: absolute;
    display: inline;
}

.diagramTextBlack > div{
    color: black;
    font: bold 14px Arial, sans-serif ;
    text-shadow: 0 0 3px rgba(51, 51, 51, 0.5) ;
}

#txtErase {
    left: 67px;
}

#txtBias {
    left: 137px; 
}

#txtMusic {
    left: 227px;
}

#txtOutput {
    left: 343px;
}

.bottomGroupTextTopCont > div {
    position: absolute;
    display: inline;
    top: 7px;
}

.txtEraseB {
    left: 9px;
}

.txtRecord {
    left: 124px;
}

.txtPlayback {
    left: 241px;
}

.headGroupCont > div {
    position: absolute;
    display: inline;
}

.headA {
    left: 10px;
}

.headB {
    left: 132px;
}

.headC {
    left: 246px;
}

.signalA {
    left: 67px
}

.signalB {
    left: 133px;
}

.signalC {
    left: 226px;
}

.signalD {
    left: 345px;
}

.botTextGroup {
    position: absolute;
    top: 142px;
}

.topTextGroup {
    position: absolute;
    top: 23px;
}

.midTextGroup {
    position: absolute;
    top: 100px;
    left: 241px;
}

.tapeImgBg {
    position: absolute;
    left: 0px; top: 37px;
    width: 400px; height: 214px;
}

.mask {
    position: absolute;
    top: 37px;
    width: 400px; height: 214px;
}

.ml-mainscene {
    text-align: left;
}

.signalGroupCont {
    position: absolute;
    top: 13px;
}

.headGroupCont {
    position: absolute;
    top: 20px;
}

.midMusic {
    top: 0px;
    left: 14px;
}

.midSignal {
    top: 12px; 
    left: 14px;
}

.midBias {
    top: 26px;
    width: 100px;
}

.mainContainer {
    position: absolute;
    left: 25px;
    top: 30px;
}