html { width:100%; height: 100%; padding: 0; margin:0; background: none repeat scroll 0 0; }
body { margin: 0 auto; width: 100%; min-height: 100%; background-image: none; padding: 0px; font-size: 7.5pt; font-family:verdana; background-color: #FFFFFF; }

a, a:link, a:visited, a:hover { color: #000000; font-weight: bold; }
label, label:hover { cursor: pointer; cursor: hand; }
input[type="radio"] + label, input[type="checkbox"] + label { position: static; top: -1px; }

.currentPagePlaceholder { display: inline; }
#myPoints { display:none; }

.disabled { background-color: #EEEEEE; display: none; font-style: italic; }
.enabled { display: block; font-style: normal; }
.error { background-color: #FFCCCC; }

.question{}
.question.hidden { display: none; height: 0px; }
.clear { clear: both; height : 0px; font-size : 0px; }

.survey { width: 970px; margin: 0px auto 0px; position: relative }
.survey_header { height: 0; position: relative; background:no-repeat scroll center transparent; }
.survey_bottom { height: 0; position: relative; background:no-repeat scroll center transparent; }
.pageContainer, .survey .pageEndContainer { padding: 0 125px; width: 720px; background-repeat: repeat-y; }
.pageEndContainer { text-align: center; }
.Btn_Align  {display: flex;  align-items: center; justify-content: center;}
 

 

.creator{ margin: 100px auto; padding: 6px; border-radius: 15px; border: 2px solid #fff; background-color: #fff; width: 500px; min-height:250px;}

.creator .naviNext, .creator .naviSubmit {margin-left: 15px; float: left;}
.creator .eqb{ margin: 10px 10px 10px 20px;}
.creator .eqb h3{margin-bottom:10px;}
.creator #q602,.creator #q603,.creator #q604{float:left;}
/*.creator #q602{ margin-left:30%;}
.creator #q604{width:45%;}*/
.creator #q602 h3,.creator #q603 h3,.creator #q604 h3{display:none; width:0;}
.creator #q155 h3{float:none; min-width: 70px;}
.creator #q4350,.creator #q4500
{
    position: absolute;
    right: 220px;
    top: 0px;
    }
.creator #q158
{
    box-shadow: none;
border: 0;
width: 340px;
    }
.creator .konradio label { vertical-align: top; margin:5px; }
.creator input[type=checkbox]{ margin-right: 5px;}
.creator input[type=text],
.creator input[type=email],
.creator input[type=tel] {
padding: 5px;
font-size: 10pt;
background: url("https://survey.smartresponse-media.com/Files/common/input_area_bg.png") no-repeat scroll left top;
border: 1px solid #E2E2E2;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.creator #q602_select,
.creator #q603_select,
.creator #q604_select{
padding:5px; 
font-size:10pt;
background: url("https://survey.smartresponse-media.com/Files/common/input_area_bg.png") no-repeat scroll left top;
border: 1px solid #E2E2E2;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px
}
.editorBig{ width:250px;}

.pageTitle {padding: 0 10px 2px 10px; background-color:#FFFFFF;}
.pageTitle h2.title { background-color:#005D9F; color:#FFFFFF; font-size:16px; font-weight:bold; padding:0 9px; text-align:left; }

.pageStorage { background-color:#FFFFFF; }
.topGraphicsLeft { position: absolute; left: 0; top: 0; width: 0; height: 0; background-repeat: no-repeat; }
.bottomGraphicsLeft { position: absolute; left: 0; bottom: 0; width: 0; height: 0; background-repeat: no-repeat;  }
.topGraphicsRight { position: absolute; top: 0; right: 0; width: 0; height: 0; background-repeat: no-repeat;  }
.bottomGraphicsRight { position: absolute; right: 0; bottom: 0; width: 0; height: 0; background-repeat: no-repeat;  }

.survey .pageContainer .right_side { text-align: right; padding-right: 25px; font-weight:bold; padding-bottom:2px; font-size: 11px; background-color:#FFFFFF; }
.survey .pageContainer .pageStorage>ul { padding: 5px 0px; }
.pageNumberText { color: #000; }
.survey .survey_question 
{
    z-index: 1;
	position: relative;
	margin: 10px 18px 10px 12px;
	padding: 12px 0;
	border: 2px solid;
	border-color: #CCCCCC;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-khtml-border-radius:15px;
	-webkit-background-clip: padding-box;
	border-radius: 15px;
	-webkit-box-shadow: 3px 3px 3px 0px #ccc;
	-moz-box-shadow:    3px 3px 3px 0px #ccc;
	box-shadow:         3px 3px 3px 0px #ccc;
	/*Second part of this class located inside boxshadow.css*/
} 

.survey .noborder
{
    border:none;
    border-radius:0px;
    box-shadow:none;
}
.survey li.error { background-color: transparent; }
.survey .error .survey_question { border-color: red; }
li .childQuestionsStorage { margin-left: 20px; }

.naviNext { display: block; float: right; width: 77px; height: 30px; background-image: url(/img/next.gif); background-repeat: no-repeat; }
.naviSubmit { display: block; float: right; width: 77px; height: 30px; background-image: url(/img/submit.gif); background-repeat: no-repeat; }

.survey .questionContent h2.title { background-color:#000000; color:#FFFFFF; font-size:16px; font-weight:bold; margin:0 10px 7px 0; padding:0 9px; text-align:left;  }
.survey .questionContent div { margin-left: 0px; }
.survey div.questionContent { margin: 0; padding: 0 18px; }
.survey div.questionContent li { padding: 3px 0px; line-height:2em; }
.survey div.questionContent h3 {
	font-weight: bold; 
	font-size: 11px;
	margin:0 0 4px;
	padding: 2px;
}
.survey li a { color:#EF6C0C; text-decoration: none; }
.survey li a:hover { text-decoration: underline; }
.survey li div.questionContent input,
.survey li div.questionContent select,
.survey li div.questionContent textarea { margin: 0 5px; }

/* Form question styles (absolute position) */
.survey .formgroup div.questionContent .error {background-color: #FFCCCC}
.survey .formgroup div.questionContent h3 { font-weight: normal; }
.survey .formgroup div.questionContent p { margin: 5px 0; }
.survey .formgroup div.questionContent div { margin: 0; }
.survey .formgroup div.questionContent span { width: 40px; margin-right: 20px; display: block; float: left }
.survey .formgroup div.questionContent input { float: left;}
.survey .formgroup .emailtextbox { position: absolute; left: 0px; top: 5px }
.survey .formgroup .addresstextbox { position: absolute;  left: 280px; top: 5px }
.survey .formgroup .nametextbox { position: absolute;  left: 0px; top: 25px }
.survey .formgroup .orttextbox { position: absolute; left: 280px; top: 25px }
.survey .formgroup .postnrtextbox { position: absolute; left: 0px; top: 50px}
.survey .formgroup .postnrtextbox input { width: 50px !important; }
.survey .formgroup .stadtextbox { position: absolute; left: 140px; top: 50px}
.survey .formgroup .stadtextbox span,
.survey .formgroup .birthmounth span,
.survey .formgroup .birthyear span, 
.survey .formgroup .productId { width: 0 !important; margin-right: 0 !important; }
.survey .formgroup .tlptextbox { position: absolute; left: 0px; top: 85px}
.survey .formgroup .tlpcheckbox { position: absolute; left: 200px; top: 85px}
.survey .formgroup .mobiletextbox { position: absolute; left: 0px; top: 110px}
.survey .formgroup .mobcheckbox { position: absolute; left: 200px; top: 110px}
.survey .formgroup .tlpcheckbox input,
.survey .formgroup .mobcheckbox input,
.survey .formgroup .konradio input { width: auto !important; float: none !important; }
.survey .formgroup .konradio { position: absolute; left: 0px; top: 135px} 
.survey .formgroup .birthday { position: absolute; left: 200px; top: 135px} 
.survey .formgroup .birthday span { width: 70px !important }
.survey .formgroup .birthmounth { position: absolute; left: 380px; top: 135px} 
.survey .formgroup .birthyear { position: absolute; left: 470px; top: 135px} 
.survey .formgroup .productId {position: absolute; left: 570px; top: 135px }
.survey .formgroup .productId input { width: 40px !important; float: none !important; }

/* Form question styles (relative positions) */
#surveyContent .survey .questiongroup { padding: 0; }
.survey .questiongroup div.questionContent p { margin: 5px 0; }
.survey .questiongroup div.questionContent div { margin: 0; }
.survey .questiongroup div.questionContent .questiongroup_titles { margin-left: 85px }
.survey .questiongroup div.questionContent .questiongroup_titles li { float: left; width: 110px; text-align: center; font-weight: bold;}
.survey .questiongroup div.questionContent .left { float: left; margin: 5px 20px 5px 0;  }
.survey .questiongroup div.questionContent .postal { margin-right: 0 }
.survey .questiongroup div.questionContent .postal input { width: 50px; }
.survey .questiongroup div.questionContent .street input { width: 160px; }
.survey .questiongroup div.questionContent .city h3.formQuestion,
.survey .questiongroup div.questionContent .empty h3.formQuestion,
.survey .questiongroup div.questionContent .tlpcheckbox h3.formQuestion  { display: none }
.survey .questiongroup div.questionContent .houseNumber h3.formQuestion { width: 40px; }
.survey .questiongroup div.questionContent .right { float: left;  margin: 5px 0; }
.survey .questiongroup div.questionContent h3.formQuestion { width: 100px; margin: 0 10px 0 0; float: left; text-align: right; font-size: 10px; font-weight: normal; padding: 0 }
.survey .questiongroup div.questionContent .titleup h3.formQuestion { width: auto; float: none; text-align: left; margin: 0 0 4px 0; }
.survey .questiongroup div.questionContent .konradio h3.formQuestion { width: auto; margin: -1px 10px 10px 5px; }
.survey .questiongroup div.questionContent .titleleft h3.formQuestion { width: auto; text-align: left }
.survey .questiongroup div.questionContent .titleup,
.survey .questiongroup div.questionContent .titleleft,
.survey .questiongroup div.questionContent .empty { margin: 5px 20px 5px 0; }
.survey .questiongroup div.questionContent .titleup input, 
.survey .questiongroup div.questionContent .titleup select, 
.survey .questiongroup div.questionContent .titleup textarea { margin-left: 0 }
.survey .questiongroup div.questionContent .konradio { width: 232px; margin-right: 0px}
.survey .questiongroup div.questionContent .konradio label { vertical-align: top }
.survey .questiongroup div.questionContent .konradio.empty,
.survey .questiongroup div.questionContent .konradio.titleup { width: auto }
.survey .questiongroup div.questionContent input { float: left;}
.survey .questiongroup .tlpcheckbox input,
.survey .questiongroup .konradio input { width: auto !important; float: none !important; margin: 0 5px !important }
.survey .questiongroup .tlpcheckbox span{ width: 90px !important; }
.survey .questiongroup div.questionContent .gridCheckbox { width: 295px; margin: 0; padding-right: 20px;  }
.survey .questiongroup div.questionContent .gridCheckbox input { width: auto }
.survey .questiongroup div.questionContent .gridCheckbox label { line-height: 14px; }
.survey .questiongroup div.questionContent .birthday .left { margin-right: 0px  }
.survey .questiongroup div.questionContent .birthday h3 { text-align:left; width:auto; }
.survey .questiongroup div.questionContent .birthday ul,
.survey .questiongroup div.questionContent .birthday .selectors { float: left }
.survey .questiongroup div.questionContent .birthday .selectors div { margin: 0px }
.survey .questiongroup div.questionContent .birthday h3.formQuestion { margin: -1px 10px 10px 5px; }

.map { position: absolute; width: 0px; height: 0px; margin: 0; z-index: 1000; }
.map a, .survey .map a:hover { text-decoration: none; display: block; width: 100%; height: 100%; }

ul.twoColumns li { float:left; width:45%; }
ul.threeColumns li { float:left; width:30%; }
ul.threeColumns li label { line-height:1em; }

/*MCD*/
.survey div.questionContent.mcd h3 { float: left;}
.survey div.questionContent.mcd input.mcdCategory { float: right;}
.survey .questiongroup div.questionContent.mcd input { width: auto;  margin: 0 5px; height: 14px;}
.survey div.questionContent.mcd h3.formQuestion { width: auto;}

li#q763 .mcdColor { background-color: #69C2C5; }
li#q765 .mcdColor { background-color: #B9498D; }
li#q770 .mcdColor { background-color: #9580AC; }
li#q775 .mcdColor { background-color: #92C247; }
li#q779 .mcdColor { background-color: #C5433D; }
li#q783 .mcdColor { background-color: #E99037; }
li#q785 .mcdColor { background-color: #3488BA; }
li#q786 .mcdColor { background-color: #D9C83C; }

/*Images in questions*/
div.childQuestionsBackground { margin:0; background-color:transparent; }
div.childQuestionsStorage { margin-left: 20px; }

div.questionImageTop, div.questionImageBottom {
    display:none;
    width:0;
    height:0;
    margin:0;
    padding:0;
    background-attachment: scroll;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
}

.scrolledCond {
    background: url(/img/1x1_whitesmoke.png) repeat;
    border: 1px solid #BCBCBC;
    height: 50px;
    margin: 5px 0 15px;
    overflow: auto;
    padding: 5px 5px 10px 5px;
    margin-right: 20px;
}

.conditions strong { font-weight: bold; }
.conditions p { line-height: 1.5em; margin-bottom: 10px; }

.placeholder { color: black; }

.creator .formGroupBigTxt input { width: 180px !important; }

.socialButtons{}
.socialButtons td { padding: 2px; vertical-align:middle; }

.survey .questiongroup div.questionContent div.social-buttons-container {
	float:right;
	position:relative;
	margin-top: -45px;
}
.survey div.questionContent .survey-condition li { line-height: 10px; }
.scrolledCond li { line-height: 15px !important; }
.survey .questiongroup div.questionContent .survey-condition input[type=checkbox] { width: auto !important; }

.sr-popup {}

.iosfix { height: 101%; overflow: hidden; }

.rem-popup {}
.rem-popup .header { font-size: 11px;font-weight: bold; }
.rem-popup input[type=button] { padding:5px; font-weight: bold;}
.rem-popup button { padding:5px; font-weight: bold;}
.rem-popup hr { width:98%; border-width:1px 0 0 0;}
.rem-popup .rem-body { max-height:500px; overflow-y:auto; }
/*-------------------------------------------------------*/
.editBlock 
{
	color:Black;
	font-size: 14px;
	font-weight: bold;
	text-transform:uppercase;
	padding: 3px;
	margin: 2px;
	position: fixed;
	background-color: #CCCCCC;
	z-index: 2;
}

.eqb{}

.qlfyContent{ display:none; position:absolute; left:40%; top:20%; margin: auto; padding: 30px; border-radius: 15px; border: 2px solid #fff; background-color: #fff; width: 300px; min-height:200px; font-size:12px; z-index:1002; }
.qlfyContent li{ margin:10px;}
.qlfyContent li img{ vertical-align:middle; margin:5px;}
.overlay-load{ z-index:1001;  position:absolute; background:#111; width:100%; height:100%; position:fixed; top:0px; left:0px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); display:none;}
.qlfyButton {cursor:pointer; opacity:0.5; border:0;width:290px; height:53px; float:right; }
.verificationButton {cursor:pointer; border:1;width:200px; height:40px; }
.nice {
    padding: 10px !important;
    border: 1px solid #aaa !important;
    
    font-family:Arial,Helvetica,sans-serif !important;
    width:50% !important;
}
.btn-success {
    color: #fff;
    background-color: #69B00C;
    border-color: #4cae4c;
}
.btn 
{
    margin-left: 10px;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    width: 30%;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}

.well {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

 /* Timeline Section */
 #divProgressbar
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top:0;
    height:10%;    
    background-color:transparent; 
    width: 700px; 
    z-index:10;
}
#progressbar {
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
	width: 100%; 
}
#progressbar li
{
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    float: left;
    position: relative;    
    background-color: #F2F2F2;
    margin-top:60px;
    height:12px;
}
.progressbarliHasImag
{
    height:51px !important;
    background-repeat:no-repeat;
    background-position:bottom;
    background-size:100%;
    width:50px;
    margin-top:40px !important;
    background-color:transparent !important;
}
.progressbarliEnd
{
    height:140px !important;
    background-repeat:no-repeat;
    background-position:bottom;
    width:180px;
    margin-top:0px !important;
    background-color:transparent !important;
    margin-left:-35px;
}

#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}

#progressbar li.active:before, #progressbar li.active
{
    /*background: #27AE60;*/
    background-color: #52DE00;
    color: Blue;
}

@media only screen and (max-width: 780px)
{
     #divProgressbar
    {
        position:relative;
        width: 90%; 
        margin-left:5%;
    }

    #progressbar li
    {
        height:10px;
    }
    .progressbarliHasImag
    {
        background-repeat:no-repeat;
        background-position:bottom;
        width:40px;
        margin-top:35px !important;
        background-color:transparent !important;
    }
    .progressbarliEnd
    {
        height:100px !important;
        background-repeat:no-repeat;
        background-position:bottom;
        width:140px;
        margin-top:10px !important;
        background-color:transparent !important;
        margin-left:-25px;
        background-size:100%;
    }
    ul.threeColumns li { float:left; width:45%; }
    
    .HoverImage
    {
        width:100px;
        height:100px;
    }

}
@media only screen and (max-width: 500px)
{
     #divProgressbar
    {
        width: 90%; 
       position:relative;
       margin-left:5%;
    }

    .progressbarliHasImag
    {
        height: 35.7px !important;
        width:35px;
        margin-top:45px !important;
    }
    .progressbarliEnd
    {
        width:60px;
        margin-top:-15px !important;
        margin-left:-25px;
    }
    ul.twoColumns li ,
    ul.threeColumns li { float:none; width:100%; }
    .HoverImage
    {
        width:50px;
        height:50px;
    }
}
#remindPnl input[type="radio"]{ margin:5px;}

.page-container-align {
 position : relative;
 width : 440px;
 top : 32px;
 margin : 0 auto;
}
.page-container-align .eqb {
  position: relative !important;
  top: 0 !important;
 display : block;
 left: 0 !important;
  width: 440px !important;
  padding: 5px;
  min-height: unset !important;
}
.page-container-align .pageSubContainer {
  position: relative !important;
  top: 10px !important;
  left: 0 !important;
  width: 440px !important;
  margin: 0 auto;
  min-height: unset !important;
  min-width : 440px!important;
}
/*@media (max-width: 991px) {
  .survey, .survey_header {
      position: absolute !important;
      }
      .page-container-align .survey_question {
          margin: 0 !important;
          background-color: #fff !important;
          }
      .page-container-align .pageSubContainer {
          z-index: 999;
          position: unset;
          }
}*/