body {
  background-color: white;
  color: #666666;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

h1 {
  margin-top: 0;
}
#Header
{
	background-color: #283C51;
	 height: 56px;  z-index: 100;
	  width: 100%; 
	  top: 0px; 
	  left: 0px;
	   bottom: 477px; 
	   position: fixed;
	}
#contentWrapper {
  width: 100%;
  height: 100%;
  position: relative;
	top: 0px;
	left: 0px;
}

#contentLeft 
{
 font-family: "Open sans", Sans-serif;
  z-index: 10;
  width: 209px;
  height: 100%;
  position: relative;
  top: 0px;
  left: 0;
  background-color: #283c51;
}

#contentRight
{
	font-family: Verdana;
	font-size: small;
	text-transform: capitalize;
	padding: 28px 4px 4px 4px;
	margin-left: 0px;
	font-weight: bold;
	color:Black;
	
}

#leftNavigation {
  margin: 1rem 0;
}
#leftNavigation, #leftNavigation li ul {
  list-style: none;
  padding: 0;
}
#leftNavigation li a {
  font-size: 0.875rem;
  display: block;
  padding: 0.8rem 1rem 0.8rem 3rem;
  color: #FFF;
  border-bottom: solid 1px #395673;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
#leftNavigation li a, #leftNavigation li a .leftNavIcon {
  line-height: 20%;
}
#leftNavigation li a .leftNavIcon {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  padding: 0.8rem 0;
  text-align: center;
}
#leftNavigation li a:hover {
  color: #D1DE01;
}
#leftNavigation li ul {
  display: none;
  margin: 0;
  background-color: #17232f;
}
#leftNavigation li ul li a {
  border-bottom: solid 1px #233547;
}
#leftNavigation li ul li:last-child a {
  border-bottom: none;
}
#leftNavigation li ul li.active a {
  color: #D1DE01;
}
#leftNavigation li.active > a {
  color: #D1DE01;
}
#leftNavigation li.active ul {
  display: block;
}
#leftNavigation > li.active {
  background-color: #427c97;
}


/*
.legend
{
	border-style: solid;
	border-width: thin;
	border-color: inherit;
	background-color: #CCCCCC;
	font-family: Verdana;
	font-weight: bold;
	text-transform: inherit;
	font-size: small;
}
*/
/* new css for fieldset or legend*/

fieldset {
    border:1px solid #999;
    border-radius:8px;
   /*  box-shadow:0 0 10px #999;*/
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:10px;
    
}
legend
{
	border-style: solid;
	border-width: thin;
	border-color: Black;
	background-color:#CCCC99;
	font-family: Verdana;
	font-weight: bold;
	text-transform: inherit;
	font-size: small;
	padding-left:15px;
	padding-right:15px;
	letter-spacing:2px;
	margin-left:5px;
	
	border:1px solid #999;
    border-radius:100px 0px 100px 0px / 100px 0px 100px 0px;
   /* border-top-right-radius: 45px 15px;*/
    /*box-shadow:0 0 10px #999;*/
}

.padding {
    padding: 5px;
}

/*===================================================================================*/
/* --- material floating label starts ---    Example :  http://codepen.io/simoberny/pen/gpddYQ */
/*===================================================================================*/

 @media (min-width:768px) {
    .group
    {
    	width:80%;
    }
    #contentLeft 
	{
	  position: fixed;
	}
	#contentRight
	{
		font-family: Verdana;
		font-size: small;
		text-transform: capitalize;
		padding: 4rem 2rem;
		margin-left: 200px;
		font-weight: bold;
		color:Black;
	}
	

}

.group
{
  position:relative; 
  margin-bottom:11px; 
}

.inputMaterial 
{
  /* font-size:18px;*/
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #757575;
}

.inputMaterial:focus 		{ outline:none;}

/* LABEL ======================================= */

.group label 				 {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  background-color :White;
  pointer-events:none;
  left:13px;
  top:5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
.inputMaterial:focus ~ label, .inputMaterial:valid ~ label, .inputMaterial:not(select):read-only ~ label
{
  top:-10px;
  font-size:13px;
  color: #009688;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background: #009688; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
  width:50%;
}

/*===================================================================================*/
/* --- material floating label ends --- */
/*===================================================================================*/