div#main-content {
width:80%;

}

label, form#ion-graph span, span {
    font-size: 12px;
}

.plotter_wrapper{
    width:80%;   
    margin: 0 auto; 
    padding:5px;    
}

.plotter_wrapper_left{
    width:95%;    
    padding:2px;    
}

.plotter_wrapper_center{
    width:50%;    
    padding:2px; 
    margin: 0 auto;   
}


#app{
	border: 1px solid #2e98c4;
	border-radius: 0.4em;
    float:left;
    -webkit-box-shadow: 0px 65px 25px -55px rgba(10, 30, 65, 0.6);
    -moz-box-shadow: 0px 65px 25px -55px rgba(10, 30, 65, 0.6);
    box-shadow: 0px 65px 25px -55px rgba(10, 30, 65, 0.6);
    padding-bottom:5px;    
}


.plotter_form {
	padding: 0px 2px;
	border-width:0px 2px 2px 2px;
	border-style:solid; 
	border-color:#98CAE0;
}

.plotter_form fieldset {
	padding: 2px 0 2px 0;
	border: none;
	border-bottom: 1px solid #2e98c4;	
}

.plotter_form fieldset:last-of-type {
	border-bottom: none;
}

.plotter_inputgroup {
	display: block;
	padding: 2px;
	border-radius: 0.2em;
	margin:1px;	
}

.plotter_inputgroup-green {
	background-color: rgb(19, 171, 19);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-red {
	background-color: rgb(255, 0, 0);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-blue {
	background-color: rgb(0, 0, 255);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-lightblue {
	background-color: rgb(0, 153, 255);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-lightBlue {
	background-color: rgb(0, 153, 255);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-orange {
	background-color: rgb(255, 153, 0);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-gray {
	background-color: rgb(102, 102, 102);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-pink {
	background-color: rgb(255, 153, 255);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-purple {
	background-color: rgb(175, 26, 235);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-yellowGreen {
	background-color: rgb(155, 226, 17);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-indigo {
	background-color: rgb(47, 38, 224);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-black {
	background-color: rgb(0, 0, 0);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-yellow {
	background-color: rgb(254, 238, 0);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-aqua {
	background-color: rgb(29, 239, 242);
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

/* Changed by Amit 06/13/2016 : Adding more Colors: */
.plotter_inputgroup-lightCoral{
	background-color: #F08080;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-lightSlateGray{
	background-color:#778899 ;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-maroon {
	background-color: #800000;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-midnightBlue {
	background-color:#191970 ;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-orangeRed {
	background-color: #FF4500;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-sandyBrown {
	background-color: #F4A460;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-teal {
	background-color: #008080;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-violet {
	background-color:#EE82EE ;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-springGreen {
	background-color: #00FF7F;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-olive {
	background-color: #808000;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

/* Changed till here. */


/* Changed by Amit 07/01/2016 : Adding more Colors: */

.plotter_inputgroup-blueViolet {
	background-color: #8A2BE2;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-brown {
	background-color: #A52A2A;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-burlyWood {
	background-color: #DEB887;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-chartreuse {
	background-color: #7FFF00;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-chocolate {
	background-color: #D2691E;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-cornflowerBlue {
	background-color: #6495ED;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-darkGoldenRod {
	background-color: #B8860B;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-darkMagenta {
	background-color: #8B008B;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-darkSlateGrey {
	background-color: #2F4F4F;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-fireBrick {
	background-color: #B22222;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-lime {
	background-color: #00FF00;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-saddleBrown {
	background-color: #8B4513;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-turquoise {
	background-color: #40E0D0;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-cadetBlue {
	background-color: #5F9EA0;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-darkGreen {
	background-color: #006400;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-darkRed {
	background-color: #8B0000;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-darkSalmon {
	background-color: #E9967A;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-deepPink {
	background-color: #FF1493;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.plotter_inputgroup-dodgerBlue {
	background-color: #1E90FF;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-forestGreen {
	background-color: #228B22;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

.plotter_inputgroup-gold {
	background-color: #FFD700;
	color: white;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}

/* Changed till here. */

.plotter_inputgroup label {
	font-weight: 600;
	padding-right: 4px;
}

.plotter_inputgroup input {
	float: right;
}

.plotter_form .plotter_inputgroup input[type="checkbox"] {
	margin-top: 7px;
}

.plotter_inputgroup select {
	background-color: #d6d6c2;
   	padding: 2px;
   	outline: none;
   	margin-top: 5px; 
   	margin-bottom: 5px;
	margin-right: 5px;
}

.plotter_form button {
	color: black;
	background-color: white;
	text-decoration: none;
	text-align: center;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	font-family: helvetica, arial, sans-serif;
	border-radius: 4px;
	border: 1px solid gray;
	margin-right:2px;
}

.plotter_form [type="submit"] {
	background-color: #3B99FC;
	color: white;
	border: 1px solid #3B99FC;
}

.plotter_form [type="text"] {
  width:75px;
}

.previousLink {
	clear:both;
	text-align: center;	
	width:50%;	
	padding:20px 0px;
    margin-left:12%;
    font-size: 12px;
}

.previousLinkFull {
	clear:both;
	text-align: center;	
	width:100%;	
	padding:20px 0px;
    font-size: 12px;
}


.sliderGroup label {
  	margin: 0 5px;
	padding: 3px;
	font-weight:bold;
}

.sliderGroup button{
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    margin: 0 4px;
}

.sliderGroup input [type="range"]{
   margin : 0 2px;
}

.sliderdiv{
	font-size: 12px;
	margin: 0 5px;
	display: block;
	padding: 3px;
}


.controlGroup {
	float:left;
	margin: 0px 3px;
}

.controlGroup label {
	margin: 0 5px;
	padding: 3px;
}

.controlGroup button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    margin: 0 4px;
}


.clearFloat {
  clear:both;
}

.floarRight{
	float:right;
}

.inputNumber{
  width:50px;
  padding: 0 3px;
}

.labelMedium{
	font-size: 12px;
	font-weight: 400;
	padding: 0 2px 0 10px;
	font-family: helvetica, arial, sans-serif;
}

.labelSmall{
	font-size: 10px;
	font-weight: 100;
	padding: 2px;
	font-family: helvetica, arial, sans-serif;
}

.labelTitle{
	font-size: 14px;
	font-weight: 600x;
	padding: 0 5px 0 5px;
	font-family: helvetica, arial, sans-serif;
}

.bottomControlWrapper{
	padding:10px;
}

.rightSideControlGroup{
  margin: 3px 0;
}

.rightSideControlGroup button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 1px 2px 1px;
    border-width: 1px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    margin: 0 1px;
}


/*#plot{
	border-radius: 0.3em;
	border-color: #2e98c4;	
}

.plotter1d_form {		
	position:relative;	
}


.plotter1d_form button {
	color: black;
	background-color: white;
	text-decoration: none;
	text-align: center;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	font-family: helvetica, arial, sans-serif;
	border-radius: 4px;
	border: 1px solid gray;
	margin-right:2px;
}

.plotter1d_form [type="submit"] {
	background-color: #3B99FC;
	color: white;
	border: 1px solid #3B99FC;
	margin:2px;
}

.plotter1d_form label {
	font-weight: 600;
	padding-right: 1px;
	margin:5px;
}

.plotter1d_form input {
	padding: 1px;
	margin:2px;
}

.plotter1d_form input[type="checkbox"]  {
	padding: 1px;
	margin:2px;
	float: right;
}



.plotter1d_form input[type="number"] {
	padding: 1px;
	margin-right:5px;
	width:90px;
}

.plotter1d_form select {
	background-color: #d6d6c2;
   	padding: 2px;
   	outline: none;
   	margin-top: 5px; 
   	margin-bottom: 5px;
	margin-right: 5px;
}*/



/*  Basic stucture
=====================*/
#accordion{
	float:left;
	width:30%;
}
    #accordion ul {
      list-style-type: none; }
      #accordion ul li {
        background-color: #98cae0;
        position: relative;
        font-size: 85%;
        font-weight: 600;
        transition: background-color, 0.1s, ease; }
        #accordion ul li:last-of-type {
          border-bottom-right-radius: 0.4em;
          border-bottom-left-radius: 0.4em; }
        #accordion ul li a {
          border-top: 0.1em solid #fff;
          display: block;
          padding: 0.5em 1.0em 0.5em 0.5em; }
          #accordion ul li a:link, #accordion ul li a:visited {
            color: #3a3a3a; }
          #accordion ul li a:hover {
          	cursor:pointer;
            color: #3a3a3a; }
          #accordion ul li a:active {
            color: #3a3a3a; }
        #accordion ul li ul {
          display: none; }
          #accordion ul li ul li {
            font-size: 26%; }
            #accordion ul li:first-of-type {
             border-top-right-radius: 0.4em;
             border-top-left-radius: 0.4em;}
        #accordion ul li:hover {
          background-color: #d0e2e9;
          transition: background-color, 0.1s, ease; }
          #accordion ul li:hover ul {
            display: block;
            position: absolute;
            left: 100%;
            top: 0;
            z-index: 999; }

.accordion{
	display:none;
	background:#fdfdfd;
}

.accordion_show{
	display:block;
	background:#fdfdfd;
	border-top:1px solid #FFCDCD;

}
/*.accordion:target{display:block;}*/


#accordion label, p{
	font-size:0.8em;
}

/*  Colors 
====================*/

/*.accordion{
background:#fdfdfd;
}
.accordion:target{
border-top:1px solid #FFCDCD;
}*/


/*loader animation*/

/* Center the loader 
#loader {
  position:absolute;
  left: 50%;
  top: 40%;
  z-index: 1;
  width: 25px;
  height: 25px;
  margin: -15px 0 0 -15px;
  border: 16px solid #3a4145;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 25px;
  height: 25px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" 
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}*/