.op-web-survey { position: relative; }
.op-web-survey-page { margin: 0px; min-height: 100%; }
.op-web-survey-question { margin-top: 2px; margin-bottom: 30px; position: relative; }
.op-web-survey-question-text { margin-bottom: 5px; width: 100%; max-width: 100%; position: relative; }
.op-web-survey-question-text td { vertical-align: top; }
.op-web-survey-question-text td.number { width: 1px; }
.op-web-survey-question-text td.text { padding: 0px 5px; }
.op-web-survey-question-text td.validation-star { width: 1px; font-weight: normal; }
.op-web-survey-question-text td.filter { width: 1px; }
.op-web-survey-question-text td.filter input { margin: 3px; }
.op-web-survey-question-response { position: relative; padding-left: 10px; padding-right: 10px; margin-top: 12px; margin-bottom: 3px; overflow-x: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.op-web-survey-question-choice-option { display: table; position: relative; line-height: 1.4em; min-height: 1em; width: 100%; }
.op-web-survey-question-choice-option span { position: relative; display: table-cell; width: 12px; left: 0px; top: 0px; height: 100%; padding: 1px 8px 1px 0px; }
.op-web-survey-question-choice-option span input { margin: 0px; font-size: inherit; width: 1.1em; height: 1.1em; }
.op-web-survey-question-choice-option p { margin: 0px; }
.op-web-survey-question-choice { padding-left: 1px; padding-right: 1px; }
.op-web-survey-question-choice input.other { margin-left: 0.75em; margin-right: 6px; padding: 2px; min-width: 20px; }
.op-web-survey-question-choice table { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.op-web-survey-question-choice table td { padding: 1px 0.75em; vertical-align: top; }
.op-web-survey-question-choice table input.other { margin-top: -1px; }
.op-web-survey-question-fields { width: 100%; }
.op-web-survey-question-field textarea { resize: none; margin: 3px 0px 3px 0px; width: 15em; min-width: 20px; max-height: 12em; overflow: auto; }
.op-web-survey-question-field input[type=text] { width: 15em; margin: 3px 0px 3px 0px; min-width: 20px; }
.op-web-survey-question-field input[type=checkbox] { cursor: pointer; }
.op-web-survey-question-field td.label { vertical-align: top; padding-top: 0.45em; white-space: nowrap; width: 1px; }
.op-web-survey-question-field td.input { padding: 0px 6px; white-space: nowrap; position: relative; }
.op-web-survey-question-field .validation-star { position: static; margin: 0.5em; }
.op-web-survey-question-dropdown { margin-top: 1em; }
.op-web-survey-question-dropdown select { margin-left: 0px; max-width: 100%; }
.op-web-survey-question-dropdown select.multiple { padding: 2px; height: 7em; min-width: 9em; }
.op-web-survey-question-dropdown input { margin-right: 9px; }
.op-web-survey-question-rating-range { display: inline-block; margin-left: 4px; margin-right: 4px; padding: 3px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.op-web-survey-question-rating-range label { display: inline-block; width: 20px; text-align: center; }
.op-web-survey-question-rating-na { display: inline-block; margin-left: 6px; margin-right: 1px; padding: 2px 5px 3px 0px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.op-web-survey-question-rating-na input { margin-left: 5px; margin-right: 5px; }
.op-web-survey-question-comment { margin-top: 18px; }
.op-web-survey-question-comment label { display: inline-block; margin-bottom: 5px; }
.op-web-survey-question-comment textarea { display: block; width: 100%; resize: none; overflow-y: auto; max-height: 20em;  margin-top: 0px; }
.op-web-survey-question-comment input { margin-right: 9px; }
.op-web-survey-button-container td.buttons { text-align: right; }
.op-web-survey-button-container-stuffer { height: 22px; }
.op-web-survey-back-button { margin: 0px; cursor: pointer; white-space: nowrap; }
.op-web-survey-submit-button { margin: 0px 0px 0px 5px; cursor: pointer; white-space: nowrap; }
.op-web-survey-progress { width: 95%; }
.op-web-survey-progress td { border-radius: 2px; }
.op-web-survey-progress td.label { width: 2em; padding-left: 1em; line-height: 100%; }
.op-web-survey-table { width: 100%; margin-left: 0px; margin-right: 0px; position: relative; }
.op-web-survey-table td { vertical-align: top; }
.op-web-survey-table .survey-report { margin: 20px 0px 0px 0px; padding: 0px; }
.op-web-survey-table .report-question { position: relative; border: 0px; background-color: transparent; }
.op-web-survey-table .loading-report { padding-top: 15px; font-style: italic; }
.op-web-survey-section-heading { font-size: 1.5em; margin-bottom: 0.5em; }
.op-web-survey-section-intro { margin-bottom: 0.8em; }
.op-web-survey-section-outro { padding-bottom: 2em; }
.op-web-survey-borderbox { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.op-web-survey-validation-message { display: block; margin-top: 5px; font-weight: bold; }
.op-web-survey-question-field .op-web-survey-validation-message { margin-top: 0px; margin-bottom: 10px; }
.op-web-survey-popup-background { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 99997; background-color: rgba(0,0,0,0.4); }
.op-web-survey-popup-frame { position: relative; font: 12px Arial; }
.op-web-survey-popup-frame-border { border: 3px solid #fff; box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); -webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); -moz-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); }
.op-web-survey-popup-frame.popup-sections .op-web-survey-button-container { padding-left: 10px; padding-right: 10px; }
.op-web-survey-popup-frame.open { box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); -webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); -moz-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); }
.op-web-survey-popup-frame-message { background-color: #eee; background-color: rgba(255,255,255,0.8); }
.op-web-survey-popup-frame-transition { transition: width 200ms, height 200ms, left 200ms, top 200ms, margin-left 200ms; -webkit-transition: width 200ms, height 200ms, left 200ms, top 200ms, margin-left 200ms; -moz-transition: width 200ms, height 200ms, left 200ms, top 200ms, margin-left 200ms; -o-transition: width 200ms, height 200ms, left 200ms, top 200ms, margin-left 200ms; }
.op-web-survey-popup-close { position: absolute; display: inline-block; width: 22px; height: 22px; right: 1px; top: 1px; background-color: white; cursor: pointer; -webkit-box-shadow: 0px 1px 3px #666; -moz-box-shadow: 0px 1px 3px #666; box-shadow: 0px 1px 3px #666; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 2; }
.op-web-survey-popup-close-icon { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background-color: #444; background-color: rgba(0,0,0,0.7); font-weight: bold; font-size: 13px; text-align: center; color: white; cursor: pointer; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 11px; } 
.op-web-survey-popup-box { position: relative; width: 100%; margin: 0px; }
.op-web-survey-popup-request { width: 100%; padding: 20px; color: #f0f0f0; box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); -webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); -moz-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); }
.op-web-survey-popup-request .heading { font-size: 2em; font-weight: bold; }
.op-web-survey-popup-request .intro { margin-top: 15px; margin-bottom: 15px; line-height: 1.6em; }
.op-web-survey-popup-request .buttons { text-align: right; }
.op-web-survey-popup-request .buttons label { display: inline-block; padding: 4px 8px 4px 8px; margin: 4px; cursor: pointer; color: black; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0d0d0), color-stop(100%,#909090)); background-image: -moz-linear-gradient(0% 100% 90deg, #909090, #d0d0d0); background-image: -o-linear-gradient(#d0d0d0, #909090); background-image: -ms-linear-gradient(#d0d0d0, #909090); background-color: #b0b0b0; }
.op-web-survey-popup-request-gradient { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#111111)); background-image: -moz-linear-gradient(0% 100% 90deg, #111111, #333333); background-image: -o-linear-gradient(#333333, #111111); background-image: -ms-linear-gradient(#333333, #111111); background-color: #222222; }
.op-web-survey-popup { min-height: 100%; padding: 20px; padding-bottom: 40px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
.op-web-survey-iframe { height: 100%; width: 100%; padding: 0px; margin: 0px; }
.op-web-survey-iframe.open { box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); -webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); -moz-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.25); }
.op-web-survey-iframe-body { height: 100%; padding: 0px; margin: 0px; overflow-y: auto; }
.op-web-survey-iframe-closeLabel { background-color: black; color: white; position: absolute; right: 0px; bottom: -1.7em; padding: 2px 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer; opacity: 0.8; }
.op-web-survey-poweredby { display: inline-block; text-align: center; color: #888; font: 11px Arial; width: 100%; text-decoration: none; padding-top: 5px; z-index: 1; position: relative; }
.op-web-survey-info { text-align: left; display: inline-block; width: 100%; padding-top: 5px; padding-bottom: 15px; }
.op-web-survey-logo { position: relative; cursor: pointer; height: 50px; padding-top: 15px; }
.op-web-survey-logo a { text-decoration: none; }
.op-web-survey-logo .logo { display: inline-block; opacity: 0.9; cursor: pointer; position: relative; left: -5px; top: -7px; }
.op-web-survey-logo .logo svg { fill: #336699; }
.op-web-survey-logo label { font-family: Arial; font-size: 16px; color: rgba(0,0,0,0.5); position: absolute; left: 50px; bottom: 2px; text-decoration: none; cursor: pointer; line-height: normal; }
.op-web-survey-logo label:hover { text-decoration: underline; }
.op-web-survey-enlist { font-size: 14px; line-height: 1.6em; color: #444; margin-left: auto; margin-right: auto; background-color: rgba(255,255,255,0.5); padding: 20px; margin-top: 40px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0px 1px 5px #888; -moz-box-shadow: 0px 1px 5px #888; box-shadow: 0px 1px 5px #888; }
.op-web-survey-enlist .heading { font-size: 2em; text-align: center; padding-bottom: 15px; }
.op-web-survey-enlist .button-container { padding-top: 20px; text-align: center; }
.op-web-survey-overflow-x-no { overflow-x: hidden; }
.op-web-survey-fb-divider { margin-top: 30px; border-left: 0px; border-right: 0px; border-bottom: 0px; border-color: rgba(0,0,0,0.1); }
.op-web-survey-fb-like { text-align: center; margin-top: 20px; overflow: hidden; min-height: 20px; z-index: 999; }
.op-web-survey-fb-comments { margin-top: 30px; text-align: center; }
label.noAnswer { margin-top: 0.5em; }
.noAnswer input { width: 1.5em; margin-right: 3px; }
.rating input.noAnswer { margin-left: 9px; margin-right: 4px; }
.relative { position: relative; }
.hand { cursor: pointer; }
.textSelect { -webkit-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
.noSelect { -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
.web-survey .language-selector { text-align: center; padding: 10px 0px 20px 0px; }

/** the inline survey report shown after responding **/
.survey-report-container { padding-top: 20px; }
.survey-report .report-question { position: relative; margin-bottom: 40px; margin-top: 15px; }
.survey-report .report-question .controls { float: right; margin: -5px 10px 7px 0px; }
.survey-report .report-question .controls canvas { cursor: pointer; margin-left: 10px; }
.survey-report .report-question .controls canvas.inactive { opacity: 0.3; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
.survey-report .op-web-theme-question-text { font-size: 1.2em; margin-bottom: 12px; width: 100%; }
.survey-report .op-web-theme-question-text td { vertical-align: top; }
.survey-report .op-web-theme-question-text td.number { padding-right: 8px; width: 13px; }
.survey-report .field-report .field-name { font-size: 1em; font-weight: bold; }
.survey-report-container .op-web-survey-logo { top: -65px; left: 20px; display: inline-block; min-width: 220px; }

/** mobile surveys **/
.handheld.web-survey { padding: 0px; -webkit-text-size-adjust: none; }
.tablet.op-web-theme-survey { max-width: none; }
.handheld.op-web-theme-font { font-size: 16px; }
.mobile   .introContainer { padding: 25px 0px 15px 0px; }
.tablet   .introContainer { padding: 30px 25px 10px 25px; }
.handheld .op-web-theme-heading { font-size: 26px; line-height: 1.3em; color: inherit; }
.mobile   .op-web-theme-heading { padding: 0px 15px 10px 15px; } 
.tablet   .op-web-theme-heading { padding: 15px; } 
.handheld .op-web-theme-introduction { font-size: 18px; line-height: 1.6em; color: inherit; font-weight: inherit; }
.mobile   .op-web-theme-introduction { padding: 5px 15px 10px 15px; }
.tablet   .op-web-theme-introduction { padding: 5px 15px 30px 15px; }
.handheld .op-web-theme-section-heading { padding: 15px 15px 5px 15px; font-size: 20px; line-height: inherit; color: inherit; border: none; }
.handheld .op-web-theme-section-intro { padding: 5px 15px 5px 15px; font-size: inherit; font-weight: normal; line-height: 1.5em; color: inherit; border: none; }
.handheld .op-web-theme-thankyou { font-size: inherit; line-height: inherit; color: inherit; border: none; font-weight: normal; }
.mobile   .op-web-theme-thankyou { padding: 15px; }
.tablet   .op-web-theme-thankyou { padding: 10px 40px 20px 40px; }
.mobile   .op-web-survey-button-container { padding: 0px 15px 35px 15px; }
.tablet   .op-web-survey-button-container { padding: 0px 33px 50px 15px; }
.handheld .op-web-survey-button-container .op-web-survey-progress { width: 100%; }
.handheld .op-web-survey-button-container td.progress { padding-bottom: 25px; }
.handheld .op-web-survey-button-container td.buttons { text-align: right; }
.handheld .op-web-survey-button-container td.buttons button { margin: 0px 8px 0px 4px; font-weight: bold; white-space: initial; }
.handheld .op-web-survey-logo { padding: 15px; height: 100px; }
.handheld .op-web-survey-logo canvas { position: static; }
.handheld .op-web-survey-logo label { position: static; display: block; }
.handheld input[type=text], .handheld textarea, .handheld select { border: 1px solid rgba(0,0,0,0.25); padding: 8px 10px; background-color: white; color: black; line-height: inherit; font-weight: inherit; }
.handheld button { font-size: initial; font-weight: initial; color: initial; line-height: initial; padding: 8px 14px; }
.handheld input[type=radio], .handheld input[type=checkbox] { width: 18px; height: 18px; }
.mobile   .survey-report .report-question .chart { padding: 15px; }
.tablet   .survey-report .report-question .chart { padding: 35px; }
.handheld .survey-report .report-question .controls { margin: 0px 15px 10px 0px; }
.handheld .survey-report .report-question .controls canvas { margin-left: 12px; }

/** mobile questions **/
.handheld .op-web-survey-question { border-top: 1px dashed rgba(0,0,0,0.25); }
.handheld .op-web-theme-question-text { margin: 0px; font-weight: bold; font-size: 18px; border: none; line-height: inherit; color: inherit; }
.mobile   .op-web-theme-question-text { padding: 15px 5px 15px 15px; }
.tablet   .op-web-theme-question-text { padding: 20px 40px; }
.handheld .op-web-survey-question-response { padding: 0px; margin: 0px; border: none; font-size: 16px; font-weight: inherit; line-height: inherit; }
.mobile   .op-web-survey-question-comment { padding: 15px 15px 2px 15px; }
.tablet   .op-web-survey-question-comment { padding: 15px 40px 10px 40px; }
.mobile   .op-web-survey-question-dropdown { padding: 20px 15px 15px 15px; }
.tablet   .op-web-survey-question-dropdown { padding: 40px; }

/** mobile choice question **/
.handheld .op-web-survey-question-choice .options { width: 100%; }
.handheld .op-web-survey-question-choice .options td { padding: 0px; }
.mobile   .op-web-survey-question-choice .options td label { font-size: 18px; padding: 15px; }
.tablet   .op-web-survey-question-choice .options td label { font-size: 16px; padding: 15px 32px; }
.handheld .op-web-survey-question-choice .options input.option { margin-left: 5px; margin-right: 5px; }
.handheld .op-web-survey-question-choice .options .option.other span { display: initial; }
.handheld .op-web-survey-question-choice .options input.other { margin: 10px 0px 0px 0px; display: block; width: 100%; }
.handheld .op-web-survey-question-choice .op-web-survey-validation-message { margin-left: 10px; }

/** mobile rating question **/
.mobile   .op-web-survey-question-response.rating { padding: 8px; }
.tablet   .op-web-survey-question-response.rating { padding: 25px; }
.mobile   .op-web-survey-question-response.rating table { width: 100%; }
.handheld .op-web-survey-question-response.rating table td { text-align: center; }
.mobile   .op-web-survey-question-response.rating table td { padding: 8px 0px; }
.tablet   .op-web-survey-question-response.rating table td { padding: 10px; }
.mobile   .op-web-survey-question-response.rating table td.bad { text-align: left; }
.tablet   .op-web-survey-question-response.rating table td.bad { text-align: center; }
.mobile   .op-web-survey-question-response.rating table td.good { text-align: right; }
.tablet   .op-web-survey-question-response.rating table td.good { text-align: center; }
.handheld .op-web-survey-question-response.rating table td.na { text-align: left; }
.mobile   .op-web-survey-question-response.rating table td.na { padding-left: 6px; }
.tablet   .op-web-survey-question-response.rating table td.na { padding-left: 10px; }
.handheld .op-web-survey-question-response.rating table td.na .label { margin-left: 10px; position: relative; }
.handheld .op-web-survey-question-response.rating label.bad { display: inline-block; text-align: left; }
.handheld .op-web-survey-question-response.rating label.good { display: inline-block; text-align: right; }
.handheld .op-web-survey-question-response.rating .ring { display: inline-block; position: relative; width: 50px; height: 50px; border-radius: 50%; }
.handheld .op-web-survey-question-response.rating .ring .number { font-size: 18px; position: relative; width: 46px; height: 34px; border-radius: 50%; padding-top: 12px; display: inline-block; text-align: center; }
.handheld .op-web-survey-question-response.rating input { position: absolute; display: none; }

/** mobile field question **/
.mobile   .op-web-survey-question-fields { padding: 15px; }
.tablet   .op-web-survey-question-fields { padding: 40px; }
.handheld .op-web-survey-question-fields input { display: block; width: 100%; margin: 5px 0px 10px 0px; }
.handheld .op-web-survey-question-fields textarea { display: block; width: 100%; margin: 5px 0px 10px 0px; }
.handheld .op-web-survey-question-fields td { position: relative; }
.handheld .op-web-survey-question-fields .validation-star { position: absolute; top: -4px; right: -7px; }