/*==================================================
 * Define your own style
 * ===============================================*/
.hg-ssn-own-style
{
/* you Style goes here */
}

/*==================================================
 * End of your own Style 
 * No need to Edir below this line
 * ===============================================*/
/*==================================================
 * Styles
 * ===============================================*/


.hg-box {
	width:90%;
	height:40px;
	background:#FFF;
	margin: 20px auto;
	border: 1px solid rgb(212, 212, 212);
}
.hg-box, .hg-ssn-output{
	text-align:center;
	position:relative;
	top:8px;
	color:#333;
	font-weight: normal; 
	font-style: normal;
	font-family: 'open_sansregular', Arial, Tahoma, sans-serif;
	font-size:14px;
}
.hg-box, #hg-ssn-text1{

}
.hg-box, #hg-ssn-number1{

}
.hg-box, #hg-ssn-text2{

}
.hg-box, #hg-ssn-text3{

}
.hg-box, #hg-ssn-number2{

}
.hg-box, #hg-ssn-text4{

}
/*==================================================
 * Style Choose #1
 * ===============================================*/
.hg-ssn-style1
{
  	 border: 1px solid rgb(212, 212, 212);
	 position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.hg-ssn-style1:before, .hg-ssn-style1:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
       -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
            box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
         border-radius:100px / 10px;
} 
.hg-ssn-style1:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}
/*==================================================
 * Style Choose 2
 * ===============================================*/
.hg-ssn-style2
{
  position: relative;
}
.hg-ssn-style2:before, .hg-ssn-style2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 8px;
  left: 10px;
  width: 50%;
  top: 8px;
  max-width:90%;
  background: #777;
  -webkit-box-shadow: 0 9px 15px #777;
     -moz-box-shadow: 0 9px 15px #777;
          box-shadow: 0 9px 15px #777;
  -webkit-transform: rotate(-3deg);
     -moz-transform: rotate(-3deg);
       -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
.hg-ssn-style2:after
{
  -webkit-transform: rotate(3deg);
     -moz-transform: rotate(3deg);
       -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
          transform: rotate(3deg);
  right: 10px;
  left: auto;
}
/*==================================================
 * Style Choose 3
 * ===============================================*/
.hg-ssn-style3 {
	width:90%;
	height:40px;
	margin: 10px auto;
	border: 1px solid rgb(212, 212, 212);
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
	background-image: -webkit-linear-gradient(white 0%, #EDEDED 100%); 
	background-image: -moz-linear-gradient(white 0%, #EDEDED 100%); 
	background-image: -o-linear-gradient(white 0%, #EDEDED 100%); 
	background-image: linear-gradient(white 0%, #EDEDED 100%);
	color:#777;
	text-shadow: 1px 1px 0px #fff;
 }
/*==================================================
 * Style Choose none
 * ===============================================*/
.hg-ssn-stylenone .hg-ssn-output{
	width:100% !important;
	height:40px;
	background:none !important;
	margin: 0px auto;
	border: none !important;
	text-align:left !important;
	position:relative;
	top:0px !important;
}