html, body, div {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10pt;
    color: black;
    background-color: transparent;
}

html {
    background-color: white;
}

a, .linklike {
    color: gray;
}

div.img_thumbnail {
    display: inline-block;
    margin: 5px;
    position: relative;
    margin-top: 60px;
}

.linklike {
    text-decoration: underline;
    cursor: pointer;
}

.dashed {
    border-bottom: 1px dashed;
    text-decoration: none;
}

.dashed:hover {
    border-bottom: 1px dashed;
    text-decoration: none;
}

a:hover, .linklike:hover {
    text-decoration: underline;
    color: red
}

h1 {
    font-weight: bold;
    font-size: 14pt;
    color: gray;
}

h2 {
    font-weight: normal;
    font-size: 14pt;
    color: gray;
}

h3 {
    font-weight: bolder;
    font-size: 12pt;
    color: gray;
}

img {
    border: 0
}

table {
    border-collapse: collapse;
    font-size: 10pt;
}

table td, table th {
    padding: 0.5ex;
}

.logo {
    font-size: 20pt;
}

.menu ul, .footer ul, .submenu ul {
    margin-left:0;
    padding-left: 110px;
    font-weight: bolder;
    font-size: 8pt;
}

.menu ul {
    border-bottom: 1px solid #CCC;
    padding-bottom: 4px;
}

@media (max-width: 768px) {
    .menu ul {
        margin-left: 2em;
        margin-right: 2em;
        padding-left: 0px;
    }
}

.submenu ul {
    border-bottom: 1px solid #666;
    padding-bottom: 4px;
    padding-left: 120px;
}

.footer ul {
    display: block;
    border-top: 1px solid #CCC;
    padding-top: 5px;
}

#mspa_notice {
    float: left;
    padding-left: 110px;
    font-size: 10px;
    text-align: center;
    margin-bottom: 1em;
}

.copyright {
    padding-left:110px;
    font-size: 9px;
    color: gray;
}

#shopper_footer {
    border-top: 1px solid #ccc;
    float: right;
    padding: 2px 2px 2px 0;
    width: 100%;
}

#shopper_copyright {
    padding-left:110px;
    font-size: 0.75em;
    color: gray;
    text-align: center;
    clear: left;
}

#footer_products {
    float: right;
    clear: right;
    color: #666;
    font-size: 0.7em;
}

.datePicker{
    font-size: 11px;
    width: 218px;
    border-radius: 3px;
}

@media (max-width: 768px){
    .datePicker{
    font-size: 20px;
    width: 300px;
    border-radius: 3px;
    }
}

/*adjust mobile select dropdowns size for*/
/*user_update_details.php demographic tab*/

@media (max-width: 768px){
    #r_q510685cp0rep1{
    width: 265px;
    }
}

@media (max-width: 768px){
    #r_q510621cp0rep1p2{
    width: 45px;
    }
}

/*keep mobile demographic tab checkbox label inline*/

@media (max-width: 768px){
    label[for^='r_q510632cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
   label[for^='r_q616991cp0rep1p']{
   display: inline;
    }
}

@media (max-width: 768px){
    label[for^='r_q616993cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
    label[for^='r_q510632cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
    label[for^='r_q616997cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
    label[for^='r_q510625cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
    label[for^='r_q510626cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
    label[for^='r_q510629cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
    label[for^='r_q510630cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
    label[for^='r_q510631cp0rep1p']{
    display: inline;
    }
}

@media (max-width: 768px){
    #sec161352qlist th {
    width: 25%;
    }
}

.datePicker .close{
    font-size: 70%;
}


@media (max-width: 768px){
    .datePicker .close{
    font-size: 100%;
    }
}

.link-adapt{
    font-size: 8pt;
    font-weight: normal;
}

@media (max-width: 768px) {
.link-adapt {
    font-size: 16pt;
    font-weight: normal;
    }
}

.btn-adapt {
    width: 25em;
    height: 2em;
    font-size: 1em;
    float: left;
    border-radius: 2px;
    margin-bottom: 1em;
    transition: all 300ms ease-in-out;
    }

@media (max-width: 768px) {
.btn-adapt {
    width: 90%;
    height: 5em;
    font-size: 1.5em;
    float: left;
    border-radius: 6px;
    margin-bottom: 1em;
    transition: all 300ms ease-in-out;
    }
}

@media (max-width: 440px) {
.btn-adapt {
    width: 90%;
    height: 5em;
    font-size: 1em;
    float: left;
    border-radius: 6px;
    margin-bottom: 1em;
    transition: all 300ms ease-in-out;
    }
}

.text-adapt {
    font-weight: 400;
    font-family: sans-serif;
    height: 2em;
}


@media (max-width: 768px) {
    .text-adapt {
    font-weight: 400;
    font-size: 1.2em; 
    font-family: sans-serif;
    }
}

@media (max-width: 440px) {
    .text-adapt {
    font-weight: 400;
    font-size: 1.2em;
    font-family: sans-serif;
    }
}

.form-adapt {
    width: 90%;
    font-size: 1em;
}

@media (max-width: 768px) {
    .form-adapt {
    width: 90%;
    height: 10%;
    font-size: 1.5em;
    }
 }

@media (max-width: 768px) {
    .checkbox-adapt {
    width: 40px;
    height: 40px;
    vertical-align: -1em;
    }
}
@media (max-width: 768px) {
    .btn2-adapt {
    width: 6em;
    height: 3em;
    }
}

.tabstrip {
    margin-top: 6px;
}

.menu li, .submenu li, .footer li, .tabstrip li {
    display: inline;
    background-color: white;
    margin:0;
    padding: 0;
}

.menu a, .submenu a, .footer a, .tabstrip a {
    border: 1px solid #CCC;
    background-color: white;
    text-decoration: none;
    color: gray;
    padding: 5px;
    margin: 0;
}

.menu a, .submenu a, .tabstrip a {
    border-radius: 1ex 1ex 0 0;
}

@media (max-width: 768px) {
    .menu a, .tabstrip a {
        display: inline-block;
        margin: .5ex;
        border-radius: 1ex 1ex 1ex 1ex;
    }
}

.footer a {
    border-radius: 0 0 1ex 1ex;
}

.submenu a {
   border: 1px solid #666;
   color: #666;
}

.menu img, .submenu img, .tabstrip img {
    vertical-align: bottom;
}

.submenu ul, .submenu span {
    background: url(https://shopper.mintel.com/images/gradient.gif) repeat-x bottom;
}

.tabstrip span, .menu span {
    padding-bottom: 5px;
    border-bottom: 1px solid #CCC;
}

@media (max-width: 768px) {
    .tabstrip span, .menu span {
        border-bottom: 0px;
    }
}

.submenu span {
    padding-bottom: 5px;
    border-bottom: 1px solid #666;
}

.menu a:hover, .submenu a:hover, .footer a:hover, .tabstrip a:hover {
    background-color: #FFE468;
}

.tabstrip .active a, .menu .active a, .submenu .active a {
    border-top: 2px solid #FC0;
    border-left: 2px solid #FC0;
    border-right: 2px solid #FC0;
    border-bottom: 1px solid white;
}

@media (max-width: 768px) {
    .tabstrip .active a, .menu .active a {
        border-bottom: 2px solid #FC0;
    }
}

.tabstrip .emph a, .menu .emph a, .submenu .emph a {
    border-top: 2px solid red;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

@media (max-width: 768px) {
    .tabstrip .emph a, .menu .emph a {
        border-bottom: 2px solid red;
    }
}

.tabstrip ul {
    font-weight: bolder;
    font-size: 8pt;
    margin: 0;
    padding-left: 1em;
    padding-bottom: 5px;
}

.hiddentab {
    display: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .img-adapt {
        width: -webkit-fill-available;
    }
}

.tab {
    padding: 1em;
    border: 1px solid #CCC;
    display: block;
    margin-top: -1px;
    min-height: 20em;
}

@media (max-width: 768px) {
    .tab {
        padding: 1em;
        border: 0px solid #CCC;
        display: block;
        margin-top: -1px;
        min-height: 20em;
    }            
}

.content {
    margin-left: 120px;
    margin-right: 2em;
    padding-bottom: 5em;
}

@media (max-width: 768px) {
    .content {
        margin-left: 2em;
    }
}

.margin {
    position: absolute;
    left: 3px;
    width: 95px
}

.margin ul {
    margin: 0;
    padding-left: 2ex;
}

.subheader {
    font-weight: bold;
    color: gray;
}

.expander_header {
    font-size: 14pt;
    color: gray;
}    

.highlight {
    color: #FFCC00;
}

.linedtable td, .linedtable th {
    border-top: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    vertical-align: middle;
}

.unlinedtable td, .unlinedtable th {
    border: 0;
    vertical-align: middle;
}

.linedtable tr.datarow td {
    border-top: solid 2px #FFCC00;
}

.leftlinedtable td, .leftlinedtable th {
    border-left: solid 1px #ccc;
}

.linedtable th {
  padding: 0.5ex 1.5ex;
}

.linedtable th.icon {
  padding: 0.5ex 2px;
}

.uspaymenttable {
    border: solid 1px #CCC;
}

.uspaymenttable th, .uspaymenttable td {
    border: none;
}

.uspaymenttable tr{
    border-top: solid 1px #CCC;
}

.cpqvertresponse {
    border: 0px;
    margin: 1ex;
    width: 100%
}

.cpqvertresponse th {
    width: 40%;
}

.surveyheader {
    border-top: solid 3px #FC0;
    border-bottom: solid 3px #FC0;
    width: 100%;
}

.compoundtable, .shoppinglist_table {
    border-collapse: collapse;
    font-size: 9pt;
    font-family: Helvetica, Arial, sans-serif;
    border: solid 3px #FC0;
}

.shoppinglist_table {
    border: 0px;
}

.compoundtable textarea, .compoundtable input, .compoundtable select {
    font-size: 8pt;
}

.questiondetails {
    margin-left: 2em; 
    margin-top: 1ex; 
    margin-bottom: 1ex
}

.compoundtable .questiondetails {
    margin-left: 0px;
}

input.calendarquestion {
    width:6em;
    vertical-align: middle;
    background: white url(https://shopper.mintel.com/images/calendar.gif) no-repeat top right;
}

table.compoundsection {
     width: 100%;
}

.compoundtable td, .shoppinglist_table table td {
    border: solid 1px #CCC;
    padding: 0.4ex;
}

.compoundtable th table td {
    border: none;
}

.compoundtable th, .shoppinglist_table table th {
    font-weight: bolder;
    text-align: center;
    padding: 0.4ex;
}

.shoppinglist_table table th {
    border: solid 2px #FC0;
}

.compoundquestion td {
    border-top: solid 3px #FC0;
    background-color: #FFE;
}

.compoundquestion td table td {
    border: none;
}

.compounderror td {
    border: solid 4px red;
}

.simpletable td, .simpletable th {
    border-width: 1px;
    border-style: solid;
}

.simpletable th {
    font-weight: bolder;
}

.bordered {
    border: solid 3px #FC0;
    padding: 1em;
    border-radius: 1ex;
}

.dividerbottom {
    border-bottom: solid 1px #FC0;
}

.dividertop {
    border-top: solid 1px #FC0;
}

h2.dividertop {
    border-top: solid 1px #FC0;
    padding-top: 0.5ex;
}

div.shopper_login {
    margin: auto;
    max-width: 748px;
}

div.login_choice h2 {
    color: #6F53A2;
}

div.login_choice {
    float: left;
    
    width: 310px;
    height: 175px;

    margin: 0px 30px 30px 0px;

    border: 1px solid #E1E1E1;
    border-radius: 15px 0px 15px 0px;
    padding: 0px 10px;
}

div.login_choice input, table.login, table.login input {
    font-size: 1.1em;
}

table.login input {
    width: 200px;
}

.shopper_signup {
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
}

.shopper_scam_warning {
    font-size: 1.4em;
    text-align: center;
}

.searchresults {
    font-size: 7pt; width: 95%
}

.searchresults td {
    border: 1px solid gray
}

.searchresults th {
    border: 1px solid gray;
    font-weight: bold;
    text-align: left
}

.spelling {
   border: 2px dashed red;
   background-color: #FEE;
   padding: 1em;
   visibility: hidden;
   position: absolute;
   width: 20em;
   z-index: 999;
   opacity: 0.9;
}

@media (max-width: 768px) {
    .proof {
        width: 75%
    }
}

.proofing, .phoneWarning, .usernameWarning {
   border: 1px dotted red;
   padding: 2px;
   margin: 0;
   background-color: #FEE;
   position: absolute;
   z-index: 999;
   opacity: 0.9;
}

.spelling table {
   font-size: 9pt;
}

.wrong {
  color: red;
}

.correction, .correction:hover {
  color: black;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid green;
  margin-right: 2px;
}

.correction:hover {
  color: green;
}

textarea {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10pt;
}

@media (max-width: 768px) {
    textarea {
        width: 75%
    }
}


.surveysection, .surveyinstructions, .nav {
    margin: 1em 0;
    border-bottom: 1px solid #FFCC00;
}

.statustracking {
    margin-top: 1em;
    border-top: 3px solid #FC0;
    border-bottom: 3px solid #FC0;
}

.statustracking div {
    padding-top: 0;
}


.nav, .pagechanger {
    color: #00008B;
    font-size: 12pt;
    font-weight: bolder;
}

.error {
    font-weight: bolder;
    color: red;
    background-color: #FFBBBB;
    padding: 0.5em;
    border: 1px dotted red;
}

.error a {
    color: navy;
}

.error li {
    color: black;
}

.warning {
    color: #333333;
    background-color: #FC0;
    background-color: #FDB;
    padding: 0.5em;
    border: 1px dotted #FC0;
}

.notice {
    font-size: 120%;
    color: #333333;
    background-color: #FFE;
    padding: 0.5em;
    border: 1px dotted #FC0;
}


.noticeAdapt1{
    font-size: 120%;
    color: #333333;
    background-color: #FFE;
    padding: 0.5em;
    border: 1px dotted #FC0
}


@media (max-width: 768px) {
    .noticeAdapt1{
        display: none;
        font-size: 120%;
        color: #333333;
        background-color: #FFE;
        padding: 0.5em;
        border: 1px dotted #FC0
    }
}


.noticeAdapt2{
    display: none;
    font-size: 120%;
    color: #333333;
    background-color: #FFE;
    padding: 0.5em;
    border: 1px dotted #FC0
}


@media (max-width: 768px) {
    .noticeAdapt2{
    display: inline-grid;
    font-size: 120%;
    color: #333333;
    background-color: #FFE;
    padding: 0.5em;
    border: 1px dotted #FC0
    }
}


.information {
    font-size: 120%;
    color: #333;
    background-color: #efe;
    padding: 0.5em;
    border: 1px dotted #0f0;
}

.q {
    margin-top: 1em;
    margin-bottom: 1em;
}

.qresp, .qwarn {
    margin-top: 0.5em;
}

.qwarn ul {
    margin: 0;
    padding-left: 1.2em;
}

h2, table p {
    margin: 0.5em 0;
    padding: 0;
}

.sec div p {
    margin: 0;
}

.sec div {
    font-weight: normal;
    font-size: 14pt;
    color: gray;
    float: left;
    margin: 0px;
}

.qdesc div p {
    margin: 0;
}

.phoneerror {
    font-weight: bolder;
    background: #FF803E url(/common/images/mand.gif) no-repeat top right;
}

dt {
    font-weight: bold;
    margin-top: 0.5ex;
}
dd {
    margin-left: 0;
    margin-bottom: 0.5ex;
}


.small {
    font-size: 8pt;
}

th .anno {
    font-size: 8pt;
    font-weight: normal;
}

.sortarrows {
    white-space: nowrap;
}

.unreadmsg {
    font-weight: bold;
    color: red;
}

.negative {
    color: red;
}

table.lightborder {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.lightborder td {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.center {
    text-align: center;
}

.search_box {
    margin: 5px 0 5px 0;
    width: 60%;
    border: 1px solid #ccc;
}

.search_box h4 {
    margin: 0;
}

.expanderTrigger {
    vertical-align: middle;
    cursor: default;
    border: 1px solid transparent;
}

.expanderTrigger:hover {
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    cursor: pointer;
}

.responseTypeDescription {
    font-size: 90%;
    padding-bottom: 1ex;
}

.hand:hover {
    cursor: pointer;
}

.helptext {
    position:absolute;
    padding:0.5em;
    border:solid 2px;
    background:#fff;
    min-height:5em;
    width:20em;
    z-index:9999;
    opacity:1;
    float:left;
}

h2.project_title {
    display: inline-block;
}

.project_title a:hover {
    text-decoration:none;
    color: gray;
}

.margin-left-0 {
    margin-left: 0px;
}

.height-auto {
    height: auto;
}

@media print {
    html, body, div, td, th {
        font-family: Times, "Times New Roman", serif;
        font-size: 10pt;
        color: black;
    }
    
    .compoundsection td {
        height: 7em;
    }

    .compoundquestion td {
        height: 1em;
    }

    .content {
        margin: 1em;
        padding: 0;
    }

    .tab {
        border: none;
        padding: 0;
    }

    .noprint, .menu, .logo, .copyright, .goform, .tabstrip, .margin, #shopper_footer, .footer {
        display: none;
    }
}


.header_bottom_div {
    border-bottom: 1px solid #fc0;
}

.loading_map {
    text-align: center;
}

.save_search_options {
    border-radius: 1em;
}

.saved_search_display {
    border-radius: 1em;
}

.shopper_init {
    padding-left: 25px;
}

.shopper_init ul {
    padding-left: 15px;
}

div.qualtrics_loader {
    margin-top: 60px;
    text-align: center;
    font-size: 140%;
}

.qualtricsSurveyThrobber {
    display: inline;
}

.lock_icon {
    vertical-align: middle;
    margin-right: 0.4em;
}

.expander {
    float: left;
    margin-top: 3px;
}

.assignments {
    margin-bottom: 15px;
}

img.drag_handle {
    cursor: move;
}

/* Styling for shopper 'Help and FAQ' tab */
.help_faq a {
	font-size: 105%;
	font-weight: bold;
	color: #4B63CC;
	text-decoration: none;
}

.help_faq a:hover {
	color: #8995CC; 
}