/*  Document Name: oscilloscope.css
    Created on : 1 Aug, 2017, 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:980px; 
    border:1px solid black;
   background-color:white;
   position:relative;
   top:0px;
                
}

#circuitsection{
                position:absolute;
                border: 2px solid #3385ff; 
                top:40px;
                width:530px;
                height:380px;
                right:10px;
             }
             
             #circuit{
                 
                 position:absolute; top:40px;right:40px; height:300px; width:480px;
             }



.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:550px;
    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;
}
#sincrv{
    position:relative;
    top:10px;
    left:20px;
    cursor:pointer; 
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
}

#onff{
    position:relative;
    float:right;
    right:20px;
    top:140px;
    width:60px;
    cursor:pointer;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 2px #999;
}
#chhn1{
    position:absolute;
    left:100px;
    top:10px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
}
#chhn1_1{
    position:absolute;
    left:100px;
    top:10px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
}

#chhn2{
    position:absolute;
    left:210px;
    top:10px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
}
#chhn2_1{
    position:absolute;
    left:210px;
    top:10px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px #999;
}
#grnd{
    position:absolute;
    left:320px;
    top:10px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
}
#grnd_1{
    position:absolute;
    left:320px;
    top:10px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
}

#dual{
    position:absolute;
    left:410px;
    top:10px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
}

#dual_1{
    position:absolute;
    left:410px;
    top:10px;
    cursor:pointer;
    text-align: center;
    border-radius: 5px;box-shadow: 0 2px #999;
}
/********************************************    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:120px;
    width: 100px;
    height: 110px;
    padding: 5px;
    // background-color: grey;
    text-align: center;
    cursor:pointer;
}
#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   **********************************/
#knob-container-fng{
    /* position: absolute;
       top:2%;*/
}
#frequency-knob-container-fng {
    // border: 1px solid red;
    // margin-bottom: 20px;
    position:relative;
    float: left;
    left:20px;
    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;
}
//---------------------------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;
}
#positiony2{
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
    position:relative;
    top:10px;
    float:left;
    left:40px;
}
#positnlabely2{
    position:relative;
    top:190px;
    float:left;
    left:10px;
}
#positnlabelch1{
    position:relative;
    top:190px;
    float:right;
    right:230px;
}
#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:80px;
 width:100px;
 top:80px;
 cursor:pointer;
}
#restr{
    position:absolute;
    width:70px;
    top:100px;
    right:70px;
}
#resohm{/*label*/
 
	  position:absolute; 
     float:right;   
	  top:90px;
    right:-20px;
}
#capacitor{
 position:absolute;
 left:50px;
 top:140px;
 width:100px;
 cursor:pointer;
}
#captr{
    position:absolute;
    width:70px;
    top:160px;
    left:90px;
}
#capauf{ /*label*/
    position:absolute;
    top:160px;
     float:right; 
     left:165px;
}


/*---------------------------------- 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: 1;
            }

            .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:430px;width:530px;height:440px;right:10px;  
            }
            #grpwrap{
                position:absolute;border: 2px solid #3385ff; top:120px;width:600px;height:600px;left:10px;
            }