@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);


* {
 margin: 0;
 padding: 0
}

html {
 background-color: #f5f5f5;
 font-family: Arial, sans-serif;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
 font-size: 16px;
 line-height: 1.2
}
.clear {
 visibility: hidden;
 display: block;
 clear: both;
 float: none;
 font-size: 0;
 line-height: 0;
 height: 0
}

.clear.x1 {
 height: 1.2rem
}

.clear.x2 {
 height: 2.4rem
}

.main {
 width: 100%
}
.main .header {
 margin: 0 0 1rem 0;
 background-color: #fff;
 box-shadow: 0 .2rem .2rem 0 #ccc
}

.main .header h1 {
 display: inline-block;
 font-size: 1.3rem;
 font-weight: 700;
 color: #5f7800;
 vertical-align: middle;
 position: relative;
 padding: 1rem 0;
 min-height: 2rem
}

@media screen and (max-width:640px) {
 .main .header h1 {
  display: none
 }
}

.main .header h1 span {
 vertical-align: middle
}

.main .wrapper {
 max-width: 960px;
 margin: 0 auto;
 padding: 1rem 0;
 position: relative
}

@media screen and (max-width:960px) {
 .main .wrapper {
  max-width: 100%!important;
  padding: 1rem 1rem
 }
}

.main .wrapper:after {
 display: block;
 clear: both;
 font-size: 0;
 line-height: 0;
 content: ''
}
@media screen and (max-width:640px) {
 .main .header .wrapper {
  text-align: center;
  padding: .2rem 1rem
 }
}

.main .header .logo {
 display: inline-block;
 height: 2rem;
 padding: 1rem 0;
 float: right;
 font-size: .8rem
}

@media screen and (max-width:640px) {
 .main .header .logo {
  float: none;
  font-size: .6rem
 }
}

.main .header .logo a img {
 height: 100%;
 width: auto;
 border: none;
 outline: 0;
 display: block
}
.main .header .logo .geography-indicator {
 text-align: right;
 font-size: .8rem;
 line-height: .8rem;
 color: #616161;
 margin-right: 6.5%;
 display: block
}

.main .body {
 margin: 0 0 1rem 0
}

.main .body h1 {
 display: none
}

@media screen and (max-width:640px) {
 .main .body h1 {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #5f7800;
  margin-bottom: 1rem
 }
}
.main .body .body-content {
 background-color: #fff;
 min-height: 25rem
}

.main .body .body-content .section {
 padding-bottom: 2rem
}

.main .body .body-content .section h2 {
 font-weight: 700;
 display: block;
 float: none;
 clear: both;
 font-size: 1.3rem;
 color: #000;
 margin: 1rem 2rem 1.5rem 2rem
}
@media screen and (min-width:641px) and (max-width:960px) {
 .main .body .body-content .section h2 {
  margin-left: 1.5rem;
  margin-right: 1.5rem
 }
}

@media screen and (max-width:960px) {
 .main .body .body-content .section h2 {
  margin-left: 1rem;
  margin-right: 1rem
 }
}

.main .body .body-content .section h2:not(:first-of-type) {
 margin-top: 1rem
}
.main .body .body-content .section h2.title {
 margin-bottom: 40px;
    padding-bottom: 5px;
    border-bottom: 3px solid #5f7800;
    font-weight: 400;
    color: #5f7800;
}

.main .body .body-content .section h3 {
 font-size: 1rem;
 font-weight: 400;
 display: block;
 float: none;
 clear: both;
 color: #000;
 margin: .5rem 2rem 1rem 2rem
}

@media screen and (min-width:641px) and (max-width:960px) {
 .main .body .body-content .section h3 {
  margin: .5rem 1.5rem 1rem 1.5rem
 }
}

@media screen and (max-width:960px) {
 .main .body .body-content .section h3 {
  margin: .5rem 1rem 2rem 1rem
 }
}

.main .body .body-content .section p {
 font-size: 1rem;
 font-weight: 400;
 display: block;
 float: none;
 clear: both;
 color: #616161;
 margin: .5rem 2rem 2rem 2rem
}

@media screen and (min-width:641px) and (max-width:960px) {
 .main .body .body-content .section p {
  margin: .5rem 1.5rem 2rem 1.5rem
 }
}

@media screen and (max-width:960px) {
 .main .body .body-content .section p {
  margin: .5rem 1rem 2rem 1rem
 }
}

.main .body .body-content .section a,
.main .body .body-content .section a:active,
.main .body .body-content .section a:hover,
.main .body .body-content .section a:link,
.main .body .body-content .section a:visited {
 color: #00a0be;
}
.main .body .body-content .section .row {
 margin: 0 2rem 2rem 2rem
}

@media screen and (min-width:641px) and (max-width:960px) {
 .main .body .body-content .section .row {
  margin: 0 1.5rem 1rem 1.5rem
 }
}

@media screen and (max-width:960px) {
 .main .body .body-content .section .row {
  margin: 0 1rem 1rem 1rem
 }
}

@media screen and (max-width:640px) {
 .main .body .body-content .section .col.empty {
  display: none!important
 }
}

.main .body .body-content .section .col p {
 margin-left: 0;
 margin-right: 0;
 margin-top: 0
}

.main .body .body-content .section .field {
 margin-bottom: 1rem
}

.main .body .body-content .section .field:last-of-type {
 margin-bottom: 0
}

.main .body .body-content .section .field label {
 font-size: 1rem;
 color: #000;
 display: block;
 padding-bottom: .7em
}

.main .body .body-content .section .field .input-wrapper .input-field {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 font-size: 1.2rem;
 line-height: 1.2;
 padding: 0.5rem;
 border: 1px solid #bfc1c8;
 border-radius: 4px;
 color: #616161;
 outline: 0;
 width: 100%;
 background-color: #fff;
 font-family: Arial, sans-serif;
}

.main .body .body-content .section .field .input-wrapper .input-field::placeholder {
 opacity: .3
}

.main .body .body-content .section .field .input-wrapper .input-field::-webkit-input-placeholder {
 opacity: .3
}

.main .body .body-content .section .field .input-wrapper .input-field::-moz-placeholder {
 opacity: .3
}

.main .body .body-content .section .field .input-wrapper .input-field:-moz-placeholder {
 opacity: .3
}

.main .body .body-content .section .field .input-wrapper .input-field:-ms-input-placeholder {
 opacity: .3
}

.main .body .body-content .section .field .input-wrapper .input-field::-ms-input-placeholder {
 opacity: .3
}

.main .body .body-content .section .field .input-wrapper .input-field:-webkit-autofill,
.main .body .body-content .section .field .input-wrapper .input-field:-webkit-autofill:focus,
.main .body .body-content .section .field .input-wrapper .input-field:-webkit-autofill:hover {
 -webkit-text-fill-color: #616161
}
.main .body .body-content .section .field.disabled .input-wrapper .input-field {
 background-color: #f5f5f5
}

.main .body .body-content .section .field .error {
 font-size: 0.8rem;
 color: red;
  /* padding-top: .7em; */
    display: block;
    clear: both;
}

.main .body .body-content .section .field span.mandatory {
 font-size: 1rem;
 color: red;
 display:inline;
}

.main .body .body-content .section .preference {
 display: inline-block;
 width:100%;
}

.main .body .body-content .section .preference input {
 display: none
}

.main .body .body-content .section .preference label {
 padding-left: 2.5rem;
 display: block;
 color: #616161
}

.main .body .body-content .section .preference .checkbox,
.main .body .body-content .section .preference .radio {
 width: 2rem;
 height: 1.3rem;
 padding: 0 1rem 0 0;
 display: block;
 clear: left;
 float: left;
 cursor: pointer;
 border: none;
 outline: 0
}

.main .body .body-content .section .preference .checkbox:before,
.main .body .body-content .section .preference .radio:before {
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 display: inline-block;
 font-style: normal;
 font-variant: normal;
 text-rendering: auto;
 line-height: 1;
 font-family: Font Awesome\ 5 Free;
 color: #00a0be;
 font-size: 2rem;
 width: 2rem;
 height: 1.3rem;
 padding: 0;
 margin: 0
}


.main .body .body-content .section .preference .checkbox.p0:before {
 content: "\f0c8"
}

.main .body .body-content .section .preference .checkbox.p1:before {
 content: "\f0c8"
}

.main .body .body-content .section .preference .checkbox.p2:before {
 content: "\f14a"
}

.main .body .body-content .section .preference .checkbox.p3:before {
 content: "\f14a"
}

.main .body .body-content .section .preference .radio.p0:before {
 content: "\f111"
}

.main .body .body-content .section .preference .radio.p1:before {
 content: "\f111"
}

.main .body .body-content .section .preference .radio.p2:before {
 content: "\f192"
}

.main .body .body-content .section .preference .radio.p3:before {
 content: "\f192"
}

.main .body .body-content .section .submit {
 border: 1px solid #00a0be;
 background-color: #00a0be;
 color: #fff;
 position: relative;
 display: inline-block;
 font-size: 1.2rem;
 -moz-border-radius: 2.4rem;
 -webkit-border-radius: 2.4rem;
 border-radius: 2.4rem;
 -moz-transition: all .2s ease;
 -o-transition: all .2s ease;
 -webkit-transition: all .2s ease;
 transition: all .2s ease
}

.main .body .body-content .section .submit:hover {
 -moz-transform: scaleX(1.03);
 -ms-transform: scaleX(1.03);
 -webkit-transform: scaleX(1.03);
 transform: scaleX(1.03);
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden
}

.main .body .body-content .section .submit:before {
 font-size: 1em;
 line-height: 1;
 color: inherit;
 position: absolute;
 top: 50%;
 margin-top: -.5em;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 display: inline-block;
 font-style: normal;
 font-variant: normal;
 text-rendering: auto;
 font-family: Font Awesome\ 5 Free;
 font-weight: 900
}

.main .body .body-content .section .submit .button,
.main .body .body-content .section .submit .button:visited {
 font-size: 1em;
 line-height: 1;
 color: inherit;
 text-decoration: none;
 outline: 0;
 border: none;
 position: relative;
 background-color: transparent;
 z-index: 1;
 display: inline-block;
 margin: 0;
 cursor: pointer;
 text-align: center;
 vertical-align: middle;
 padding-top: .5em;
 padding-bottom: .5em
}

.main .body .body-content .section .submit.right .button {
 padding-right: 2em;
 padding-left: .75em
}

.main .body .body-content .section .submit.right:before {
 right: .5em;
 content: "\f138"
}

.main .body .body-content .section .submit.left .button {
 padding-right: .75em;
 padding-left: 2em
}

.main .body .body-content .section .submit.left:before {
 left: .5em;
 content: "\f137"
}

.main .body .body-content .section.profile .col {
 width: 50%;
 float: left
}

@media screen and (max-width:640px) {
 .main .body .body-content .section.profile .col {
  width: 100%;
  display: block;
  float: none
 }
}

.main .body .body-content .section.preferences.col4 .col {
 width: 25%;
 float: left
}

@media screen and (min-width:641px) and (max-width:960px) {
 .main .body .body-content .section.preferences.col4 .col {
  width: 50%
 }
}

@media screen and (max-width:640px) {
 .main .body .body-content .section.preferences.col4 .col {
  width: 100%;
  display: block;
  float: none;
  clear: both
 }
}

.main .body .body-content .section.preferences.col4 br {
 display: none
}

.main .body .body-content .section.preferences.col4 br.br4 {
 display: block;
 clear: both
}

@media screen and (min-width:641px) and (max-width:960px) {
 .main .body .body-content .section.preferences.col4 br.br2 {
  display: block;
  clear: both
 }
}

@media screen and (max-width:640px) {
 .main .body .body-content .section.preferences.col4 br {
  display: block;
  clear: both
 }
}

.main .body .body-content .section.preferences.col2 .col {
 width: 50%;
 float: left
}

@media screen and (max-width:640px) {
 .main .body .body-content .section.preferences.col2 .col {
  width: 100%;
  display: block;
  float: none;
  clear: both
 }
}

.main .body .body-content .section.preferences.col2 br {
 display: none
}

.main .body .body-content .section.preferences.col2 br.br2 {
 display: block;
 clear: both
}

@media screen and (max-width:640px) {
 .main .body .body-content .section.preferences.col2 br {
  display: block;
  clear: both
 }
}


.main .footer {
 padding-bottom: 2rem;
 background-color: #e0e0e0;
 border-top: 10px solid #aab600
}

.main .footer .section {
 width: 50%;
 float: left;
 padding-bottom: 1rem
}

@media screen and (max-width:640px) {
 .main .footer .section {
  width: 100%;
  float: none
 }
}

.main .footer .section h2 {
 font-size: 1rem;
 font-weight: 700;
 color: #000
}

.main .footer .section.connect-with-us ul {
 list-style: none;
 display: block
}

.main .footer .section.connect-with-us ul li {
 display: inline-block;
 float: left;
 margin: .5rem .5rem 0 0;
 color: #00a0be;
 background-color: #fff;
 font-size: 1rem;
 -moz-border-radius: 1rem;
 -webkit-border-radius: 1rem;
 border-radius: 1rem;
 width: 2rem;
 height: 2rem;
 line-height: 2rem;
 text-align: center
}

.main .footer .section.connect-with-us ul li a,
.main .footer .section.connect-with-us ul li a:visited {
 color: #00a0be;
 background-color: #fff
}

.main .footer .section.connect-with-us ul:after {
 display: block;
 float: none;
 clear: both;
 content: ''
}

.main .footer .copyright {
 float: none;
 clear: both;
 text-align: center;
 font-size: .8rem;
 padding-top: 1rem;
 color: #616161;
 white-space: nowrap
}

.main .footer .copyright a,
.main .footer .copyright a:visited {
 color: #616161;
 text-decoration: none
}

.main .footer .copyright .divider:after {
 padding: 0 .3rem;
 content: '|'
}

@media screen and (max-width:640px) {
 .main .footer .copyright .divider {
  display: block;
  clear: both;
  float: none;
  font-size: 0;
  margin: 0;
  padding: 0;
  height: .5rem
 }
 .main .footer .copyright .divider.hard {
  height: 2rem
 }
 .main .footer .copyright .divider:after {
  content: ''
 }
}


.main .body .body-content .section .field .input-wrapper .selection--single {
    background-color: #fff;
    border: 1px solid #bfc1c8;
    border-radius: 4px;
    padding: 0.5rem;
    height: auto;
    outline: 0;
    font-size: 1.2rem;
    line-height: 1.2;
 width:100%; 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 color: #616161;
}
.main .body .body-content .section .field .input-wrapper .selection--single::placeholder {
 opacity: .3
}

/* NPS css start*/
.main .body .body-content .section .field .input-wrapper a.nps{
 border:2px solid #ccc;
 border-radius:3px;
 font-weight: bold; 
 font-family:sans-serif; 
 text-decoration: none; 
 line-height:40px; 
 width:100%;
 min-width:25px; 
 display:inline-block;
 color: #333332;
 mso-hide:all;
}

td.npsCol0,td.npsCol1,td.npsCol2,td.npsCol3,td.npsCol4,td.npsCol5,td.npsCol6{
display: block;
text-align:center;
width:8%;
min-width:25px;
height:40px;
background-color:#fff;
align:center;
border-bottom:4px solid red;
border-bottom-left-radius: 0px
}

td.npsCol7,td.npsCol8{
display: block;
text-align:center;
width:8%;
min-width:25px;
height:40px;
background-color:#fff;
align:center;
border-bottom:4px solid orange;
border-bottom-left-radius: 0px
}

td.npsCol9,td.npsCol10{
display: block;
text-align:center;
width:8%;
min-width:25px;
height:40px;
background-color:#fff;
align:center;
border-bottom:4px solid green;
border-bottom-left-radius: 0px
}

.main .body .body-content .section .field .input-wrapper a.npsSelected{ 
 background-color: #00a0be;
 color: #fff;
}

.main .body .body-content .section .field .input-wrapper a.npsSelected0,
.main .body .body-content .section .field .input-wrapper a.npsSelected1,
.main .body .body-content .section .field .input-wrapper a.npsSelected2,
.main .body .body-content .section .field .input-wrapper a.npsSelected3,
.main .body .body-content .section .field .input-wrapper a.npsSelected4,
.main .body .body-content .section .field .input-wrapper a.npsSelected5,
.main .body .body-content .section .field .input-wrapper a.npsSelected6{ 
 background-color: red;
 color: #fff;
}
.main .body .body-content .section .field .input-wrapper td.npsCol0 a:hover,
.main .body .body-content .section .field .input-wrapper td.npsCol1 a:hover,
.main .body .body-content .section .field .input-wrapper td.npsCol2 a:hover,
.main .body .body-content .section .field .input-wrapper td.npsCol3 a:hover,
.main .body .body-content .section .field .input-wrapper td.npsCol4 a:hover,
.main .body .body-content .section .field .input-wrapper td.npsCol5 a:hover,
.main .body .body-content .section .field .input-wrapper td.npsCol6 a:hover{ 
 background-color: red;
 color: #fff;
}
.main .body .body-content .section .field .input-wrapper a.npsSelected7,
.main .body .body-content .section .field .input-wrapper a.npsSelected8{ 
 background-color: orange;
 color: #fff;
}
.main .body .body-content .section .field .input-wrapper td.npsCol7 a:hover,
.main .body .body-content .section .field .input-wrapper td.npsCol8 a:hover{ 
 background-color: orange;
 color: #fff;
}
.main .body .body-content .section .field .input-wrapper a.npsSelected9, 
.main .body .body-content .section .field .input-wrapper a.npsSelected10{ 
 background-color: green;
 color: #fff;
}
.main .body .body-content .section .field .input-wrapper td.npsCol9 a:hover, 
.main .body .body-content .section .field .input-wrapper td.npsCol10 a:hover{ 
 background-color: green;
 color: #fff;
}
/* NPS css end */


/****** Style Star Rating Widget Start*****/
.main .body .body-content .section .field .input-wrapper fieldset, label { margin: 0; padding: 0; }

.main .body .body-content .section .field .input-wrapper .rating { 
  border: none;
  float: left;
}

.main .body .body-content .section .field .input-wrapper .rating > input { display: none; } 
.main .body .body-content .section .field .input-wrapper .rating > label:before { 
  margin: 5px;
  font-size: 2em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.main .body .body-content .section .field .input-wrapper .rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.main .body .body-content .section .field .input-wrapper .rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.main .body .body-content .section .field .input-wrapper .rating > input:checked ~ label, /* show gold star when clicked */
.main .body .body-content .section .field .input-wrapper .rating:not(:checked) > label:hover, /* hover current star */
.main .body .body-content .section .field .input-wrapper .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.main .body .body-content .section .field .input-wrapper .rating > input:checked + label:hover, /* hover current star when changing rating */
.main .body .body-content .section .field .input-wrapper .rating > input:checked ~ label:hover,
.main .body .body-content .section .field .input-wrapper .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.main .body .body-content .section .field .input-wrapper .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

.main .body .body-content .section .field .input-wrapper .error {
 font-size: 0.8rem;
 color: red;
  /* padding-top: .7em; */
    display: block;
    clear: both;
}
/****** Style Star Rating Widget END*****/
/**** Overlay Start *****/
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay p {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/**** Overlay Start *****/
.main .body .body-content .section .preferenceHorizontal {
   display: flex;
   width: 100%;
    flex-wrap: wrap;
}
.main .body .body-content .section .preferenceHorizontal label {
  padding-left: 2.3rem;
  padding-right: 1.5rem;
  display: block;
  color: #616161;
}
.main .body .body-content .section .preferenceHorizontal .checkbox, .main .body .body-content .section .preferenceHorizontal .radio {
    width: 2rem;
    height: 1.3rem;
    padding: 0 1rem 0 0;
    display: block;
    clear: left;
    float: left;
    cursor: pointer;
    border: none;
    outline: 0;
}