@charset "utf-8";
/* CSS Document */
/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

html {
height: 100%;
/*background = gradient + image pattern combo*/
background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), 
}

/*form styles*/
#msform {
	position: relative;
}
#msform fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;	
	box-sizing: border-box;
	width:50%;
	margin:2% 0% 4% 25%;
	/*stacking fieldsets above each other*/
	position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
/*inputs*/
#msform input, #msform textarea {
	padding: 8px;
	border: 1px solid #e6e3e3 !important;
	margin-bottom: 10px;
	width: 100%;
	border-radius: 25px;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}
.check-again-btn{
	margin:20px 0px;
	width:100%;
	text-align:center;
}
/*buttons*/
#msform .action-button {
	width: 160px; text-align:center;
	background: #f04b4b;
	font-weight: bold;
	color: white;
	border: 0 none; float:right;
	border-radius: 1px;
	cursor: pointer;
	margin-right:2.5em;
	border-radius: 25px;
	padding: 10px 5px;
}
.check-again-btn>a{
	width:auto !important;
	float:none !important;
	text-transform:uppercase;
	padding:10px 20px !important;
	font-size:16px;
	font-weight:700 !important;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #f04b4b;
}
.title-eligibility{ width:99.7%; float:left; text-align: center; background:#112233; padding:10px; color:#fff; 
text-transform:uppercase; font-size:16px;  font-weight:bold;}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #fcde42;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #fc611f;
	color: white;
}
label{ text-align:left;}

/*price*/
.chart {
  position: relative;
  width: 310px;
  height:310px; margin:auto;
}
.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0,0,0,.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
}
 .doughnutTip::after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(0,0,0,.7);
      line-height: 0;
  }

.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #182f7c;
  text-align: center;
  cursor: pointer;
}
.chart path:hover{cursor: pointer;}
.chart path:active{ background:#0F0}
.doughnutSummary:active {
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
}
path[Attributes Style] { 
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
}
.shado:active{box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);}
.doughnutSummaryTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -50%;
  font-size: 22px; font-weight:bold;
}
.doughnutSummaryNumber {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -5%; font-weight:bold;
  font-size: 25px;
}
.doughnutSummaryRange{
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: 45%;
  font-size: 18px; font-weight:bold;
   color: #182f7c;
}
.chartPathOn {
    stroke-width:7px !important;
  z-index:9999999!important;
}
.chart path:active{z-index:9999999!important;}
.chart path:hover { opacity: 0.65; }
ul.price{ width:100% ;margin:2em 0 0 0em; padding:0;}
ul.price li{ width:100%; float:left; list-style:none; line-height:1.5em}
ul.price li .a1{ background:url(../images/1.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a2{ background:url(../images/2.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a3{ background:url(../images/3.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a4{ background:url(../images/4.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a5{ background:url(../images/5.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a6{ background:url(../images/6.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a7{ background:url(../images/7.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a8{ background:url(../images/8.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a9{ background:url(../images/9.jpg) no-repeat 0px 5px;  width:14px; height:14px; margin-right:1em;  float:left;}
ul.price li .a10{ background:url(../images/10.jpg) no-repeat 0px 5px; width:14px; height:14px; margin-right:1em;  float:left;}



.output {
  margin:0; width:100%;
  padding:0px; 
}
.colors {
  padding:0em;
  display: none;
}
.red {
  background: none;
} 

select.form-control:not([size]):not([multiple]){border-radius: 25px;}

@media only screen and (max-width: 600px) {
#msform fieldset {
	width:90%;
	margin: 0 5%;
}
.chart {
  position: relative;
  width: 240px;
  height:240px; margin:auto;
}
.doughnutSummary {
    position: absolute;
    top: 40%;
}
.doughnutSummaryNumber {
    margin-top: 15%;
    font-size: 25px;
}
.chart {
    margin-left: -1em;
}
.paraia-multi-select.rtl{direction:rtl;text-align:right;width: 100%;}
.Mob-w90{ width:90% !important}
}