/*  Document Name: oscilloscope.css
    Created on : 24 Aug, 2021, 4:09:27 PM
    Author     : sukriti
*/

body,html {margin:0; padding:0;} /*background-color:#003366;*/
.clearfix { clear:both; }
.wholebody {
    margin:0 auto;
    width:1260px; 
    height:1010px; 
    border:1px solid black;
   background-color:white;
   position:relative;
   top:0px;
                
}

.circuitsection{
                position:absolute;
                border: 2px solid #3385ff; 
                top:40px;
                width:530px;
                height:400px;
                right:10px;
             }
             
            



.middlerightupper{
    position:relative;
    top:50px;
    width:530px;
    height:178px;
    border:1px solid #737373;
 
}
.middlerightsectiondivide{
    position:relative;
    left:250px;
    top:0px;
    width:3px;
    height:209px;
    border:1px solid #737373;
    /*color: #e6e6e6;
    background-color:  #737373;*/
}
.middlerightmiddle{
    position:relative; 
    top:50px;
    width:530px;
    height:210px;
    border:1px solid #737373;
  
}

.lowerleftsection{
    position:relative;
    margin:0 auto;
    top:5px;
    width:520px;
    height:180px;
    border:1px solid #737373; 
}
.rightsection{
    position:relative;
    margin:0 auto;
    top:30px;
    width:520px;
    height:180px;
    border:1px solid #737373; 
}

/******************************************** canvas-css ********************************************/
/*.canvas2d-view{
    margin:0 auto;
    width:550px;
    margin-top:40px;
    height:400px;
    border:1px solid red;
}*/
#mycanvas{
    color:#0000FF;
    margin-top:60px;
    background-repeat:no-repeat;
    background-position:center;
    background-color:#ffffff;
    border:1.5px solid black;
}
/******************************************** button css ********************************************/
#sinecrv{
    position:relative;
    top:10px;
    left:10px;
    cursor:pointer; 
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
}
#sinecrv2{
    position:relative;
    top:10px;
    left:20px;
    cursor:pointer; 
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
}

/************************ sine wave**********************/
#chhn1{
    position:absolute;
    left:100px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
	z-index:1;
}
#chhn2{
    position:absolute;
    left:200px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
	z-index:1;
}
#grnd{
    position:absolute;
    left:301px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}
#dual{
    position:absolute;
    left:385px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}
#xymd{
    position:absolute;
    left:454px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}

/************************ square wave**********************/
#chhn1sq{
    position:absolute;
    left:100px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
	z-index:1;
}
#chhn2sq{
    position:absolute;
    left:200px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
	z-index:1;
}
#grndsq{
    position:absolute;
    left:301px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}
#dualsq{
    position:absolute;
    left:385px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}
#xymdsq{
    position:absolute;
    left:454px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}

/************************ triangle wave**********************/
#chhn1tr{
    position:absolute;
    left:100px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
	z-index:1;
}
#chhn2tr{
    position:absolute;
    left:200px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
	z-index:1;
}
#grndtr{
    position:absolute;
    left:301px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}
#dualtr{
    position:absolute;
    left:385px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}
#xymdtr{
    position:absolute;
    left:454px;
    top:420px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
	z-index:1;
}

/********************************************    knob on right side   **********************************/
#knob-container{
    /* position: absolute;
       top:2%;*/
}
#frequency-knob-container {
    /*border: 1px solid red;
     margin-bottom: 20px;*/
    position:relative;
    top:30px;
    float: left;
    left:160px;
    width: 100px;
    height: 110px;
    padding: 5px;
    /*background-color: orange;*/
    text-align: center;
    cursor:pointer;
}
#frequency-knob-container label,#amplitude-knob-container label{
    font-style: italic;
}
/*************************    knob for amplitude   **********************************/
#knob-container-amp{
    /* position: absolute;
       top:2%;*/
}
#amplitude-knob-container1 {
    /*/border: 1px solid red;
    margin-bottom: 20px;*/
    position:relative;
    top:10px;
    float:left;
    left:140px;
    width: 100px;
    height: 110px;
    padding: 5px;
    /*background-color: grey;*/
    text-align: center;
    cursor:pointer;
}

    #amp-knob1{
		margin-top: -33px;
    margin-left: 7px;
    
}


#amplitude-knob-container2 {
    /* border: 1px solid red;
     margin-bottom: 20px;*/
    position:relative;
    top:10px;
    float:left;
    left:260px;
    width: 100px;
    height: 110px;
    padding: 5px;
    /* background-color: grey;*/
    text-align: center;
    cursor:pointer;
}
#amplitude-knob-container1 label,#amplitude-knob-container2 label{
    font-style: italic;
}

/*************************    knob for function Generator 1   **********************************/
#knob-container-fng{
    /* position: absolute;
       top:2%;*/
}
#frequency-knob-container-fng {
    /* border: 1px solid red;
     margin-bottom: 20px;*/
    position:relative;
    float: left;
    left:60px;
    top:30px;
    width: 100px;
    height: 110px;
    padding: 5px;
    /*background-color: orange;*/
    text-align: center;
    cursor:pointer;
}
#amplitude-knob-container-fng {
    /*border: 1px solid red;
    margin-bottom: 20px;*/
    position:relative;
    float:right;
    right:150px;
    top:30px;
    width: 100px;
    height: 110px;
    padding: 5px;
    /* background-color: grey;*/
    text-align: center;
    cursor:pointer;
}
#frequency-knob-container-fng label,#amplitude-knob-container-fng label{
    font-style: italic;
}

/*************************    knob for function Generator 2   **********************************/
#knob-container-fng2{
    /* position: absolute;
       top:2%;*/
}
#frequency-knob-container-fng2 {
    /* border: 1px solid red;
     margin-bottom: 20px;*/
    position:relative;
    float: left;
    left:60px;
    top:30px;
    width: 100px;
    height: 110px;
    padding: 5px;
    /*background-color: orange;*/
    text-align: center;
    cursor:pointer;
}
#amplitude-knob-container-fng2 {
    /*border: 1px solid red;
    margin-bottom: 20px;*/
    position:relative;
    float:right;
    right:150px;
    top:30px;
    width: 100px;
    height: 110px;
    padding: 5px;
    /* background-color: grey;*/
    text-align: center;
    cursor:pointer;
}
#frequency-knob-container-fng2 label,#amplitude-knob-container-fng2 label{
    font-style: italic;
}
/*---------------------------vertical range slider-------------------------*/
input[type=range][orient=vertical]
{

}
#positiony1{
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
    position:relative;
    top:10px;
    float:right;
    right:490px;
}
#positnlabely1{
    position:relative;
    top:190px;
    float:right;
    right:430px;
}
#positnlabelch1{
    position:relative;
    top:190px;
    float:right;
    right:230px;
}
#positiony2{
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
    position:relative;
    top:10px;
    float:left;
    left:60px;
}
#positnlabely2{
    position:relative;
    top:190px;
    float:left;
    left:30px;
}
#positnlabelch2{
    position:relative;
    top:173px;  
    float:left;
    left:140px;
}
#positionx{
    position:relative;
    top:80px;
    left:-50px;
}
#positnlabelx{
    position:relative;
    top:120px;
    float:left;
    left:50px;
}
#resistor{
   -webkit-appearance: slider-vertical; /* WebKit */
 position:absolute;
 right:20px;
 top:130px;
 cursor:pointer;
}
#restr{
    position:absolute;
    width:70px;
    top:150px;
    right:100px;
}
#resohm{
   position:relative;

    top:140px;
     float:right; 
     right:-50px;
}
#r{
    position:absolute;

    top:210px;
    right:110px;
     
}
/*---------------------------------- Desciption------------------------------------*/            
             #description{
                 background-color: #3385ff;   
                 position:absolute; top:40px; 
                 left:10px; width:600px;
                 font-size: 16px;font-weight: bold;
             }
            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                border:2px solid #3385ff;;
                min-width: 450px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                padding: 12px 16px;
               z-index: 60;
            
            }

            .dropdown:hover .dropdown-content {
                display: block;

            }
  
            /* Tooltip text */
            .tooltip .tooltiptext {
                visibility: hidden;
                width: 80px;
                background-color: #f9f9f9;/*#ffff80;#555;*/
                border:2px solid #3385ff;  

                color: #555; /*#fff;*/
                text-align: center;
              
                position: absolute;
                z-index: 1;
                top: 60%;
                left: 80%;
                margin-left: 20px;

                /* Fade in tooltip */
                opacity: 0;
                transition: opacity 1s;
            }
            .tooltip:hover .tooltiptext {
                visibility: visible;
                opacity: 3;
            }
            
            /*--------------------------------------calculation of vm---------------------------------------*/
            #calcln{
                position:absolute;border: 2px solid #3385ff; top:590px;width:520px;height:240px;left:10px;
            }
   /*------------------------------- calculation ------------------------------------------------*/         
            #calculator{
                width:280px;height:400px;position:absolute;left:37%; top:350px;
            }
            
             #controller{
              position:absolute;border: 2px solid #3385ff; top:450px;width:530px;height:440px;right:10px;  
            }
            #grpwrap{
                position:absolute;border: 2px solid #3385ff; top:120px;width:600px;height:500px;left:10px;
            }
            
            #calcln{
     position:absolute;border: 2px solid #3385ff; top:730px;width:600px;height:270px;left:10px;
            }


            /*------------------- label for ch-1, ch-2, gnd------------------------*/
            #ch1{
                position: absolute;
                top:270px;
                left:-190px;
            }

            #ch2{
                position: absolute;
                top:320px;
                left:-190px;
            }

            #gnd{
                position: absolute;
                top:380px;
                left:-190px;
            }