/** global styles **/
html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; }
a { cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }

/** generic styles used **/
.invisible { opacity: 0.0; }
.borderBox { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }
.fullWidth { width: 100%; }
.link { cursor: pointer; }
.link:hover { text-decoration: underline; }
.break { display: block; }
td.top { vertical-align: top; }
td.bottom { vertical-align: bottom; }

/** the application **/
.op-murvey { overflow: hidden; height: 100%; position: relative; }

/** style used to center a dialog **/
.center-dialog { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1000; }
.center-dialog .box { position: relative; width: 750px; margin-left: auto; margin-right: auto; z-index: 999; }
.center-dialog table { height: 100%; width: 100%; }
.center-dialog .box { margin-top: -4%; padding-bottom: 10px; min-height: 395px; }
.center-dialog .close-button { position: absolute; top: 3px; right: 3px; cursor: pointer; padding: 2px; z-index: 1; }

/** the splash screen containing info and login **/
.splash-screen .logo-container { padding-top: 20px; padding-left: 30px; height: 0px; }
.splash-screen .logo-container label { position: absolute; top: 7px; }
.splash-screen .murvey-logo { margin-right: 20px; position: relative; top: -13px; }
.splash-screen .murvey-logo svg { -ms-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); }
.splash-screen .fb-like { position: absolute; right: 30px; top: 5px; }
.splash-screen .info { padding: 20px 30px; vertical-align: top; }
.splash-screen .info textarea { padding: 10px; resize: none; }
.splash-screen .login-form { padding-top: 25px; padding-right: 30px; padding-bottom: 15px; vertical-align: top; width: 240px; position: relative; }
.splash-screen .login-form .login { width: 100%; }
.splash-screen .login-form .password { width: 100%; }
.splash-screen .login-form .retype { width: 100%; }
.splash-screen .login-form .email-icon { cursor: pointer; float: right; z-index: 1; position: relative; left: -3px; top: 15px; margin-top: -11px; }
.splash-screen .login-form .email-icon:hover { background-color: #bed88f; }
.splash-screen .login-form .buttons { text-align: center; margin-bottom: 10px; height: 18px; position: relative; }
.splash-screen .login-form .buttons td { padding: 8px; position: relative; }
.splash-screen .login-form .sign-up { width: 43%; cursor: pointer; }
.splash-screen .login-form .sign-in { width: 43%; cursor: pointer; }
.splash-screen .login-form .facebook-login { width: 14%; cursor: pointer; }
.splash-screen .login-form .facebook-login .icon { position: absolute; bottom: -1px; }
.splash-screen .login-form .facebook-tip { position: absolute; right: 30px; padding: 5px 10px; }
.splash-screen .login-form .facebook-tip .arrow { position: absolute; top: -8px; right: 8px; }
.splash-screen .login-form .facebook-tip .arrow-small { position: absolute; top: -7px; right: 8px; }
.splash-screen .login-form .control { margin-left: 0px; margin-bottom: 10px; margin-top: 0px; }
.splash-screen .login-form div.accept { position: relative; display: block; cursor: default; padding: 8px 0px 7px 30px; }
.splash-screen .login-form div.accept input { position: absolute; left: 5px; top: 6px; cursor: pointer; }
.splash-screen .login-form .sign-out { text-align: center; }
.splash-screen .login-form .sign-out label { display: inline-block; padding: 12px 28px; cursor: pointer; }
.splash-screen .login-form .unsaved { text-align: center; }
.splash-screen .login-form .unsaved label { display: block; margin: 15px 0px; }
.splash-screen .login-form .unsaved button { margin: 0px 3px; }

/** the top bar **/
.op-top { display: inline-block; position: absolute; top: 0px; left: 115px; right: 0px; height: 52px; padding: 11px 5px 0px 20px; z-index: 999; }
.op-top .my-surveys { min-width: 160px; height: 31px; display: inline-block; padding: 9px 9px 8px 15px; cursor: pointer; text-align: center; float: left; }
.op-top .my-surveys label { margin-right: 7px; cursor: pointer; display: inline-block; }
.op-top .my-surveys .arrow { float: right; margin-top: 4px; }
.op-top .my-surveys .icon { float: left; position: relative; left: -4px; } 
.op-top .my-surveys-tabs { display: inline-block; position: absolute; width: 160px; left: 20px; top: 52px; text-align: center; padding: 3px 0px 5px 0px; }
.op-top .my-surveys-tabs td { width: 78px; cursor: pointer; padding: 1px 0px; }
.op-top .my-surveys-tabs td:hover { text-decoration: underline; }
.op-top .current-survey { float: left; margin-left: 20px; padding-left: 0px; }
.op-top .current-survey .survey { float: left; margin-right: 20px; padding: 9px 14px; height: 31px; }
.op-top .current-survey .status { float: left; margin-right: 20px; padding: 9px 8px 8px 14px; height: 31px; white-space: nowrap; }
.op-top .current-survey .status .calendar { position: relative; left: -5px; top: 3px; display: inline-block; margin-right: 2px; margin-top: -5px; }
.op-top .current-survey .open { float: left; margin: 0px; cursor: pointer; height: 31px; padding: 0px 14px; outline: none; }
.op-top .current-survey .url-icon { float: left; margin-top: 2px; }
.op-top .right { display: inline-block; float: right; margin-top: 9px; margin-right: 10px; cursor: pointer; }
.op-top .right label { cursor: pointer; }
.op-top .right .account { float: right; margin-left: 10px; position: relative; top: -2px; cursor: pointer; }
.op-top .right .login-icon { float: right; margin-left: 10px; position: relative; top: -2px; cursor: pointer; }
.op-top .right .search { display: inline-block; float: left; }
.op-top .right .search input { position: relative; top: -7px; padding: 6px 9px; transition: width 200ms, opacity 200ms; }
.op-top .right .search .icon { display: inline-block; margin-left: 8px; margin-right: 10px; position: relative; top: -3px; }
.op-top .manager { display: inline-block; position: relative; top: 6px; margin-right: 10px; cursor: pointer; }

/** the left menu **/
.op-menu { position: absolute; left: 0px; width: 115px; top: 0px; bottom: 0px; text-align: left; z-index: 999; }
.op-menu .logo-container { padding: 10px; }
.op-menu .logo-container .logo { margin-bottom: 15px; display: inline-block; }
.op-menu .logo-container .logo svg { -ms-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); }
.op-menu .logo-container .logo-back { position: absolute; display: inline-block; width: 50px; height: 50px; background-color: white; left: 34px; top: 21px; border-radius: 15px 15px 0px 0px; }
.op-menu div.container { display: inline-block; width: 43px; text-align: center; }
.op-menu div.item { padding: 10px; cursor: pointer; transition: background-color 0.25s; }
.op-menu div.icon { display: inline-block; margin-right: 12px; }
.op-menu label { cursor: pointer; display: inline-block; position: relative; top: -5px; }
.op-menu .fb-like { position: absolute; bottom: 0px; width: 100%; text-align: left; height: 28px; padding: 0px 7px; cursor: pointer; }
.op-menu .fb-like .icon { position: absolute; top: 4px; left: 17px; }
.op-menu .fb-like label { position: absolute; margin-top: 0px; left: 47px; top: 7px; }

/** the bottom bar **/
.op-bottom { position: absolute; left: 115px; right: 0px; height: 25px; bottom: 0px; text-align: center; z-index: 999; }
.op-bottom .product { position: absolute; left: 7px; bottom: 7px; }
.op-bottom .status { display: inline-block; position: relative; bottom: 8px; }
.op-bottom .copyright { position: absolute; right: 7px; bottom: 7px; }

/** the framework where the individual modules are placed **/
.op-module-manager { position: absolute; z-index: 100; left: 115px; right: 0px; top: 52px; bottom: 25px; }
.op-module-manager .modules { position: absolute; top: 62px; left: 0px; right: 0px; bottom: 0px; overflow: hidden; }
.op-module-manager .container-pane { position: absolute; top: 0px; bottom: 0px; padding-top: 30px; padding-bottom: 40px; overflow-y: auto; }
.op-module-manager .left-pane { width: 60%; padding-right: 1px; }
.op-module-manager .right-pane { left: 60%; right: 0px; padding-left: 20px; padding-right: 20px; }
.op-module-manager .header-tabs { height: 40px; position: absolute; left: 20px; right: 0px; top: 20px; }
.op-module-manager .right-tabs { position: absolute; right: 20px; top: 0px; }
.op-module-manager .header-tabs label { position: relative; display: inline-block; height: 40px; padding: 13px 18px; cursor: pointer; transition: color 0.25s; }
.op-module-manager .header-tabs .button { padding: 5px 9px; display: inline-block; margin-left: 15px; cursor: pointer; }
.op-module-manager .header-tabs button.save { cursor: default; }
.op-module-manager .header-tabs div.disabled { opacity: 0.5; cursor: default; }
.op-module-manager .header-tabs .icon { position: absolute; left: 12px; top: 12px; }
.op-module-manager .header-tabs .detach { display: inline-block; position: absolute; top: 3px; right: 3px; visibility: hidden; }
.op-module-manager .header-tabs .active .detach { visibility: visible; }
.op-module-manager .left-pane .hide-right-dummy { position: absolute; right: 0px; width: 16px; height: 26px; top: 36px; visibility: hidden; }
.module-wrapper { overflow: hidden; max-width: 800px; margin-left: auto; margin-right: auto; }

/** the left-right module separator used to adjust the width of and open/close the modules **/
.separator-backdrop { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: transparent; z-index: 9990; }
.op-module-separator { cursor: col-resize; width: 13px; margin-left: -8px; position: absolute; left: 60%; top: 61px; bottom: 0px; z-index: 999; }
.op-module-separator div.spacer { height: 100%; margin-left: 6px; cursor: inherit; }
.op-module-separator .hide-pane { width: 16px; height: 26px; position: absolute; top: -32px; cursor: pointer; }
.op-module-separator .hide-pane.left { left: -13px; }
.op-module-separator .hide-pane.right { left: 8px; }
.op-module-separator .hide-pane span { position: absolute; top: 6px; }
.op-module-separator .hide-pane span.left { right: 5px; }
.op-module-separator .hide-pane span.right { left: 5px; }

/** styles used for the login dialogs **/
.op-login-fb { display: inline-block; background-image: url(rsrc.php/v1/yL/r/FGFbc80dUKj.png); height: 20px; border: 1px solid #29447e; cursor: default; }
.op-login-fb span { display: inline-block; float: left; width: 22px; background-image: url(rsrc.php/v1/yL/r/FGFbc80dUKj.png); background-repeat: no-repeat; background-position: -1px -211px; height: 100%; }
.op-login-fb label { color: white; position: relative; top: 3px; padding-left: 4px; padding-right: 4px; cursor: default; }
.op-login-mini input { margin-bottom: 5px; padding: 3px; border-width: 0px; }
.op-auto-login { padding: 25px; }
.op-auto-login h1 { text-align: center; }
.op-auto-login h2 { text-align: center; font-weight: normal; }
.op-auto-login p { text-align: center; }

/** the dialog box used with header, content, ok/cancel **/
.op-dialog .module-header { width: 100%; height: 32px;  text-align: center; }
.op-dialog .module-header .title { position: relative; top: 7px; }
.op-dialog .content { min-height: 50px; }
.op-dialog .buttons { height: 44px; text-align: center; }
.op-dialog .buttons .button { display: inline-block; margin: 2px 4px; padding: 5px 9px; cursor: pointer; }

/** a mini dialog box used for small messages with ok/cancel **/
.op-dialog-mini { position: absolute; padding: 10px; z-index: 9999; max-width: 300px; text-align: left; }
.op-dialog-mini input { margin-top: 6px; }
.op-dialog-mini .not-owner { padding: 10px; }
.op-dialog-mini .not-owner .button { margin-left: 6px; }
.op-dialog-mini .survey-import { padding-top: 17px; }
.op-dialog-mini .survey-import textarea { width: 300px; height: 250px; }

/** the styles used to frame a dialog or other content in a closable border **/
.op-frame-back { text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 2000; background-color: rgba(128,128,128,0.4); }
.op-frame { position: relative; display: inline-block; overflow-y: hidden; z-index: 2001; top: 20%; }
.op-frame .content-box { overflow: auto; }

/** The popdown menu styles **/
.op-popdown { display: inline-block; position: fixed; z-index: 5000; }
.op-popdown label { display: block; padding: 1px 3px 1px 3px; cursor: pointer; white-space: nowrap; text-align: left; }
.op-popdown .up { position: absolute; top: -5px; z-index: 1; }
.op-popdown .up-border { position: absolute; top: -5px; }

/** The float label style **/
.op-float { display: inline-block; position: absolute; z-index: 1000; white-space: nowrap; text-align: left; }
.op-float .left-arrow { position: absolute; left: -6px; top: 4px; z-index: 1; }
.op-float .left-arrow-border { position: absolute; left: -8px; top: 5px; }
.op-float .right-arrow { position: absolute; right: -6px; top: 4px; z-index: 1; }
.op-float .up-arrow { position: absolute; left: 3px; top: -5px; z-index: 1; }
.op-float .up-arrow-border { position: absolute; left: 3px; top: -5px; }

/** The progress indicator styles **/
.op-progress-indicator { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; z-index: 999; }
.op-progress-indicator .op-progress-box { display: inline-block; padding: 10px 25px; min-width: 140px; }
.op-progress-indicator .icon { position: relative; margin-left: auto; margin-right: auto; }
.op-progress-indicator .label { position: relative; display: block; margin-top: 10px; }

/** icons used **/
.op-icon { position: relative; display: inline-block; margin-left: 3px; top: 1px; border: 1px solid transparent; cursor: pointer; }
.delete-button { display: inline-block; position: relative; width: 15px; height: 15px; padding: 1px; text-align: left; cursor: pointer; }
.response-table .delete-button { font-size: 18px; text-align: center; line-height: 16px; }
.delete-button svg { position: absolute; }
.frame-close { position: absolute; top: 2px; right: 1px; width: 16px; height: 16px; pointer; z-index: 1; cursor: pointer; }

/** a slider used for the undo-redo and theme editor css shadow editor **/
.range-slider { padding: 8px 10px 11px 10px; }
.range-slider .range { width: 100%; height: 8px; position: relative; }
.range-slider .slider { width: 8px; height: 16px; position: absolute; top: -7px; left: -5px; border-left: 1px solid rgba(255,255,255,0.5); border-top: 1px solid rgba(255,255,255,0.5); border-right: 1px solid rgba(0,0,0,0.25); }
.range-slider .arrow { position: absolute; left: -1px; bottom: -5px; }
.range-slider .label { position: absolute; padding: 4px 6px; top: -25px; white-space: nowrap; }

/** The check label used for the survey editor checkboxes looking better than the normal ones **/
.op-check { display: inline-block; position: relative; padding: 3px 8px 3px 5px; white-space: nowrap; }
.op-check span { display: inline-block; width: 12px; height: 12px; min-width: 12px; min-height: 12px; position: relative; top: 3px; margin-right: 7px; }
.op-check span canvas { min-width: 12px; min-height: 12px; }
.op-check .label { display: inline-block; position: relative; cursor: pointer; }

/** Style used for the tables **/
.op-table { border-collapse: collapse; }
.op-table th { text-align: left; }
.op-table tr { border-bottom-width: 1px; border-bottom-style: solid; }

/** the help system styles **/
.op-help { height: 100%; }
.op-help iframe { border: 0px; width: 100%; height: 100%; }
.op-help-frame { width: 90%; height: 80%; top: 10%; }
.op-help-frame .content-box { height: 100%; overflow: hidden; }

/** style used for input fields and text areas **/ 
.textbox { padding: 12px 12px 10px 10px; line-height: 14.5px; }
textarea.textbox { overflow-y: hidden; }
.textbox-label { position: absolute; top: 2px; right: 4px; cursor: text; }
.input-box input { margin: 0px; }
.input-box textarea { margin: 0px; display: block; }
.input-box .def { padding: 7px 10px; overflow-x: hidden; text-overflow: ellipsis; position: relative; cursor: default; min-height: 28px; }
.input-box .def .text { padding-right: 8px; }
.input-box .def .copy { position: absolute; right: 3px; top: 0px; cursor: pointer; }

/** the survey manager containing the survey list **/
.survey-manager { position: absolute; left: 115px; right: 0px; z-index: 997; width: auto; padding-bottom: 0px; }
.survey-manager .container { overflow-y: auto; height: 100%; }
.survey-manager .delete-button { padding: 2px; }
.current-survey { display: inline-block; margin-left: 2px; padding-left: 6px; }
.current-survey label { display: inline-block; }
.current-survey .content { margin-right: 20px; padding: 3px 6px; }
.current-survey .status { display: inline-block; cursor: pointer; }
.current-survey .status label { cursor: pointer; }
.current-survey .status .arrow { cursor: pointer; margin-left: 10px; }
.current-survey button { cursor: pointer; }
.current-survey .survey .count { cursor: pointer; margin-left: 5px; }
.current-survey .survey .name { cursor: pointer; }
.current-survey .survey .count:hover { text-decoration: underline; }
.current-survey .survey .name:hover { text-decoration: underline; }
.current-survey .url-icon { display: inline-block; position: relative; margin-left: 18px; top: 4px; cursor: pointer; }
.current-survey .url-icon .url { position: absolute; padding: 10px 15px 12px 15px; left: -200px; top: 30px; z-index: 1; }
.current-survey .url-icon .url input { width: 430px; margin: 7px 0px 0px 0px; display: block; padding: 5px; }
.current-survey .url-icon .url .arrow { position: absolute; top: -7px; left: 200px; }
.survey-list { border-collapse: collapse; width: 100%; }
.survey-list th span { margin-left: 5px; position: relative; top: -1px; }
.survey-list td { white-space: nowrap; }
.survey-list td:first-child { white-space: normal; }
.survey-list tr.survey { cursor: pointer; }
.survey-list .empty { display: block; text-align: center; padding: 35px; margin-top: auto; margin-bottom: auto; }
.survey-list td.state { padding-top: 0px; padding-bottom: 0px; }
.survey-list td.state label { display: inline-block; padding: 5px 7px; cursor: pointer; }
.survey-list td.responses { text-align: center; }

/** the survey editor **/
.survey-editor { position: relative; padding: 16px 12px; }
.survey-editor .surveyName { margin-bottom: 12px; }
.survey-editor .surveyName input { margin: 0px; border: 0px solid transparent; padding: 11px 11px 9px 9px; }
.survey-editor .surveyName td.label { padding: 0px 8px; }
.survey-editor .surveyName td.fullWidth { padding: 1px; }
.survey-editor .heading-table .input-box { margin-bottom: 12px; }
.survey-editor .heading-table .include { padding: 5px 7px; height: 40px; line-height: 15px; margin-left: 5px; text-align: center; cursor: pointer; }
.survey-editor .heading-table .heading { width: 100%; }
.survey-editor .introduction { width: 100%; resize: none; min-height: 60px; }
.survey-editor .thankyou { width: 100%; resize: none; min-height: 54px; }
.survey-editor .button-labels { width: 100%; margin-top: 4px; margin-bottom: 10px; }
.survey-editor .button-labels td { width: 25%; vertical-align: top; padding-right: 4px; }
.survey-editor .button-labels td:last-child { padding-right: 0px; }
.survey-editor .button-labels input { width: 100%; }
.survey-editor .questions { margin-bottom: 5px; }
.survey-editor .section-intro { position: relative; margin: 60px -20px 5px -20px; padding: 25px 20px 15px 20px; }
.survey-editor .section-intro .input-box { margin-bottom: 10px; }
.survey-editor .section-intro textarea { resize: none; }
.survey-editor .section-intro .delete-button { position: absolute; right: 20px; top: 5px; }
.survey-editor .separator { text-align: center; padding-top: 21px; padding-bottom: 19px; }
.survey-editor .separator a { cursor: pointer; opacity: 0.5; transition: opacity 0.05s; margin-left: 5px; margin-right: 5px; }
.survey-editor .separator a:hover { opacity: 1; text-decoration: none; }
.survey-editor .other-text-separator { margin: 30px -20px 15px -20px; text-align: center; }
.survey-editor .other-text-separator label { position: relative; top: -0.75em; padding: 8px; }
.survey-editor .other-texts .input-box { margin-bottom: 10px; }
.survey-editor .respond-once { width: 100%; resize: none; }
.survey-editor .not-started { width: 100%; resize: none; }
.survey-editor .survey-ended { width: 100%; resize: none; }
.survey-editor.no-question-move .question-editor .header .number .dots { visibility: hidden; }
.survey-editor-has-responses { line-height: 1.5em; padding: 15px; }
.survey-editor-message { display: inline-block; padding: 25px; }
.undo-slider { position: absolute; width: 500px; left: 20px; top: 65px; padding: 30px 15px 10px 10px; z-index: 100; }
.undo-slider .frame-close { top: auto; bottom: 4px; right: 4px; }
.language-controller { display: inline-block; position: relative; }
.op-module-manager .header-tabs .language-controller div.button { padding: 0px 5px 0px 0px; }
.language-controller .button .label { display: inline-block; padding: 5px 9px; }
.language-controller .button .arrow { display: inline-block; height: 19px; float: right; padding-top: 5px; border-left: 1px solid rgba(0,0,0,0.25); padding-left: 5px; }
.language-controller .button .arrow .up { top: -1px; position: relative; }
.language-controller .content { z-index: 9999; position: absolute; left: 15px; top: 32px; overflow: hidden; }
.language-controller .languages td { padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.language-controller .languages td .delete-button { left: 7px; top: 1px; display: none; }
.language-controller .languages td.set .delete-button { display: inline-block; }
.language-controller .languages td.controls { text-align: left; cursor: default; vertical-align: middle; height: 48px; position: relative; }
.language-controller .languages td.controls label { padding: 0px; height: auto; cursor: pointer; }
.language-controller .languages td.controls input { margin-right: 10px; cursor: pointer; }
.language-controller .languages td.controls .next { float: right; position: relative; top: 2px; padding-right: 20px; }
.language-controller .languages td.controls .next span { position: absolute; top: -2px; right: 0px; }
.language-controller .languages td.controls .back { position: relative; top: 2px; padding-left: 20px; }
.language-controller .languages td.controls .back span { position: absolute; left: 0px; top: -2px; }
.language-controller .languages td.controls button { position: absolute; top: 11px; right: 10px; }
.language-controller .labels { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 48px; overflow: auto; transition: left 150ms, right 150ms; }
.language-controller .labels div { padding: 5px 10px; }
.language-controller .labels label { display: block; text-align: right; max-width: 300px; white-space: nowrap; padding: 0px; height: auto; }
.language-controller .labels label input { margin-left: 8px; padding: 4px 8px; }
/* .language-controller .languages td.controls .name { margin-left: 25px; margin-top: 5px; } */
/* .language-controller .languages td.controls .name input { margin-left: 7px; padding: 5px 6px; } */
/* .language-controller .languages td.controls .name button { margin-left: 0px; } */
.language-controller .dialog { position: fixed; z-index: 9999; padding: 4px 12px; text-align: center; }
.language-controller .dialog .label { padding: 4px; }
.op-module-manager .header-tabs .language-controller .dialog button.button { margin: 5px 3px; padding: 4px 8px; }

/** the question editor **/
.question-editor { margin: 5px 0px 5px 0px; }
.question-editor .header { padding: 5px 3px; position: relative; width: 100%; }
.question-editor .header textarea { width: 100%; resize: none; border-width: 0px; padding: 8px; min-height: 36px; }
.question-editor .header .delete-button { margin-top: 1px; }
.question-editor .header .number { position: relative; line-height: 14.5px; padding: 2px 0px 0px 1px; }
.question-editor .header .number > span { position: relative; top: -1px; display: inline-block; padding: 9px 3px 4px 3px; min-width: 24px; text-align: center; }
.question-editor .header .number label { cursor: pointer; }
.question-editor .header .number label.dots { display: block; margin-top: -8px; letter-spacing: 1px; }
.question-editor .header td.question-text { padding-right: 5px; padding-left: 5px; }
.question-editor .op-check span { width: 16px; height: 16px; }
.question-editor .op-check .label { top: 1px; }
.question-mover { position: absolute; left: -3px; z-index: 100; max-width: 300px; margin-top: 15px; text-align: left; }
.question-mover label { white-space: nowrap; cursor: pointer; padding: 0px 4px; text-overflow: ellipsis; overflow: hidden; }
.question-mover label.current { opacity: 0; height: 6px; }
.question-mover label.visible { opacity: 1; height: auto; padding-top: 6px; padding-bottom: 6px; }
.question-mover label.move-title { padding-top: 6px; padding-bottom: 6px; margin-bottom: 6px; }
.question-mover .up-arrow { position: absolute; top: -11px; }
.response-editor { position: relative; width: 100%; }
.response-editor td.controls { vertical-align: top; }
.response-editor .editors { padding: 20px 15px 12px 5px; vertical-align: top; }
.response-editor .editors .commentContainer { clear: both; }

/** the validation editor **/
.editor .validation-toggle { float: left; position: relative; display: inline-block; cursor: pointer; white-space: nowrap; margin-top: 7px; margin-bottom: 3px; }
.editor .validation-toggle.open { top: 7px; width: 14px; letter-spacing: 1px; }
.validation-editor { position: relative; margin-top: 10px; padding-bottom: 3px; }
.validation-editor tr.min td { padding-bottom: 8px; }
.validation-editor td.min { white-space: nowrap; }
.validation-editor label { display: block; position: relative; }
.validation-editor input[type=checkbox] { cursor: pointer; margin-left: 8px; }
.validation-editor td { vertical-align: top; }
.validation-editor input[type=number] { width: 35px; padding: 3px; margin-left: 8px; }
.validation-editor input[type=text] { padding: 3px 5px; width: 20em; margin: 0px 8px; height: 24px; }
.validation-editor .input-box .def { margin: 0px 8px; }

/** the choice editor **/
.choice-editor { position: relative; padding-left: 20px; }
.choice-editor .choices { display: block; padding: 3px 6px; resize: none; line-height: 20px; min-width: 303px; white-space: pre; min-height: 60px; }
.choice-editor .op-check { margin-right: 6px; margin-top: 8px; }
.choice-editor .validation-toggle { margin-left: -19px; }
.choice-editor .validation-editor .op-check { margin: 0px; }
.choice-editor select { cursor: pointer; margin-top: 5px; }
.choice-editor .def { display: inline-block; }
.choice-editor.language .choices { min-width: 0; white-space: nowrap; overflow: hidden; }
.choice-editor.language .choices.original { text-align: right; }
.choice-editor table.language { width: 100%; padding-right: 10px; }
.choice-editor table.language td.options { width: 50%; vertical-align: top; }
.choice-editor table.language td.options textarea { width: 100%; }
.choice-editor table.language td.copy { padding: 10px; vertical-align: middle; }
.choice-editor table.language td.copy div { cursor: pointer; }

/** the rating editor **/
.rating-editor { position: relative; padding-left: 20px; }
.rating-editor .input { margin-left: 0px; margin-right: 0px; padding: 7px; }
.rating-editor select { position: relative; top: -1px; margin-left: 12px; margin-right: 12px; }
.rating-editor .na-check { margin-left: 10px; margin-right: 10px; cursor: pointer; }
.rating-editor .validation-toggle { margin-left: -19px; }
.rating-editor .input-box { display: inline-block; }
.rating-editor.language .input-box.bad { float: left; }
.rating-editor.language .input-box.good { margin-right: 15px; }
.rating-editor.language .input-box input { min-width: 35px; }
.rating-editor.language .range-label { float: left; margin: 8px 10px; letter-spacing: 1px; }

/** the dropdown editor **/
.dropdown-editor { padding-left: 20px; position: relative; }
.dropdown-editor input.label { min-width: 320px; padding: 6px; margin: 0px; }
.dropdown-editor textarea { padding: 6px; display: block; margin-top: 8px; margin-left: 0px; line-height: 20px; min-width: 320px; min-height: 5em; overflow-y: auto; white-space: pre; resize: vertical; }
.dropdown-editor .validation-toggle { margin-left: -19px; }
.dropdown-editor .controls { margin-top: 10px; }
.dropdown-editor .controls .op-check { margin-right: 6px; }
.dropdown-editor table.language textarea { min-width: 0; }
.dropdown-editor table.language { width: 100%; padding-right: 10px; }
.dropdown-editor table.language td.options { width: 50%; vertical-align: top; }
.dropdown-editor table.language td.options textarea { width: 100%; white-space: nowrap; overflow: hidden; overflow-y: auto; }
.dropdown-editor table.language td.copy { padding: 10px; vertical-align: middle; }
.dropdown-editor table.language td.copy div { cursor: pointer; }
.dropdown-editor table.language textarea.original { text-align: right; }

/** fields editor **/
.field-editor { display: block; white-space: nowrap; margin-bottom: 3px; }
.field-editor input.required { margin-left: 8px; margin-right: 0px; position: relative; }
.field-editor input.message { padding: 5px 6px; width: 8em; margin-left: 8px; margin-right: 3px; }
.field-editor input.min { margin-left: 5px; padding: 5px; width: 3.5em; }
.field-editor input.max { margin-left: 5px; padding: 5px; width: 3.5em; }
.field-editor .input { margin-left: 2px; margin-right: 8px; min-width: 8em; padding: 5px 6px; max-width: 16em; }
.field-editor select { cursor: pointer; }
.field-editor .input-box { margin-top: 15px; }
.field-editor .input-box .def .text { white-space: normal; }
.field-editor .input-box.label .def { margin: 0px 8px 0px 2px; }
.field-editor .input-box.message .def { margin: 0px 3px 0px 8px; }
.fields-editor { overflow-x: auto; padding-left: 20px; }
.fields-editor .button { display: inline-block; margin: 0px 0px 0px 5px; cursor: pointer; }
.fields-editor .button canvas { margin: 0px; }
.fields-editor .deleteField { position: relative; }
.fields-editor .deleteField canvas { position: relative; top: 1px; }
.fields-editor .more { margin-left: 5px; cursor: pointer; }
.fields-editor .more:hover { text-decoration: underline; }
.fields-editor .moreOptions { display: inline-block; margin-left: 5px; }
.fields-editor .moreOptions select { height: 26px; }

/** free-text comment editor **/
.comment-editor { width: 100%; padding: 14px 0px 0px 20px; }
.comment-editor label { top: 1px; }
.comment-editor textarea { width: 100%; padding: 11px; resize: none; }

/** survey setup styles **/
.survey-setup { padding: 25px; }
.survey-setup .control { margin-left: auto; margin-right: auto; margin-bottom: 1.5em; width: 100%; padding: 15px; }
.survey-setup input { margin-right: 10px; }
.survey-setup div.report { padding-bottom: 10px; }
.survey-setup div.report label { display: block; margin-bottom: 5px; }
.survey-setup div.facebook label { display: block; margin-bottom: 5px; }
.survey-setup div.redirect table { width: 100%; margin-top: 4px; }
.survey-setup div.redirect table td.label { width: 1px; }
.survey-setup div.redirect table td.input { width: 100%; }
.survey-setup div.redirect table td { padding-top: 5px; padding-left: 6px; }
.survey-setup div.redirect input.url { width: 100%; margin: 0px; }
.survey-setup div.redirect input.delay { text-align: right; padding-right: 3px; margin: 0px; margin-right: 8px; }
.survey-setup div.transfer table td { padding-top: 10px; padding-right: 6px; }
.survey-setup div.transfer input.email { width: 250px; }
.survey-setup div.transfer button { margin-right: 6px; }
.survey-setup div.url-parameters input { display: block; width: 100%; margin-top: 10px; }

/** styles used for the theme editor **/
.theme-module { margin: 15px 20px; }
.theme-module .tabs { position: relative; }
.theme-module .tabs label { display: inline-block; margin: 0px 3px; padding: 5px 10px 3px 10px; cursor: pointer; }
.theme-browser { position: relative; z-index: 100; }
.theme-browser td { padding: 5px; }
.theme-browser label { display: block; width: 100%; padding: 12px 15px; cursor: pointer; }
.theme-browser label input { float: right; cursor: pointer; }
.theme-editor { position: relative; z-index: 100; }
.theme-editor .left label { display: block; padding: 8px 10px; cursor: pointer; }
.theme-editor caption { caption-side: bottom; text-align: left; padding: 3px 0px; }
.theme-editor caption input[type=text] { width: 18em; margin-left: 5px; margin-right: 5px; }
.theme-editor caption button { cursor: pointer; }
.theme-editor-css { position: relative; padding: 20px 5px; display: table; margin-left: auto; margin-right: auto; }
.theme-editor-css div.option { white-space: nowrap; display: table-row; position: relative; }
.theme-editor-css div label { padding-left: 5px; display: table-cell; vertical-align: middle; }
.theme-editor-css input[type=text] { display: table-cell; padding: 4px 6px; margin: 3px 0px 3px 8px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; min-width: 16em; }
.theme-editor-css select { width: 98%; height: 26px; margin-left: 8px; margin: 3px 0px 3px 8px; text-align: left; }
.theme-editor-css .label { padding: 5px 0px; cursor: pointer; }
.theme-editor-css .picker { z-index: 101; right: -20px; }
.theme-editor-css .font-picker { text-align: left; position: absolute; margin-top: 2px; margin-left: 5px; }
.theme-editor-css .font-picker div { padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.theme-editor-css .color-picker { position: absolute; }
.theme-editor-css .shadow-editor { width: 470px; position: absolute; bottom: 72px; padding-top: 15px; padding-left: 15px; overflow: hidden; }
.theme-editor-css .shadow-editor td { vertical-align: middle; border-color: transparent; }
.theme-editor-css .shadow-editor .label { text-align: right; padding-bottom: 5px; }
.theme-editor-css .shadow-editor div.farbtastic { top: -16px; }
.theme-editor-css .shadow-editor td.inside { vertical-align: top; }
.theme-editor-css .pixel-picker { text-align: left; padding: 5px; width: 200px; position: absolute; }
.theme-editor-css .pixel-picker td { padding: 3px 6px; cursor: pointer; }
.theme-editor-css .pixel-picker td.line { width: 33%; }
.theme-editor-css .radius-picker { text-align: left; padding: 5px; width: 200px; position: absolute; }
.theme-editor-css .radius-picker td { padding: 1px 5px; cursor: pointer; text-align: center; }
.theme-editor-css .radius-picker td.radius { width: 25%; }
.theme-editor-css .radius-picker span { display: inline-block; width: 24px; height: 14px; margin-top: 4px; }

/** The preview module **/
.preview-survey .reset-label { position: relative; cursor: pointer; top: 1em; left: 1em; }
.preview-survey .reset-label:hover { text-decoration: underline; }
.op-web-survey-question-choice table td { padding: 2px 0.75em; vertical-align: top; }

/** the module showing an overview of the survey **/
.survey-overview { padding: 0px 0px 0px 0px; max-width: 600px; margin-left: auto; margin-right: auto; }
.survey-overview table { width: 100%; cursor: default; }
.survey-overview table td { vertical-align: top; }
.survey-overview .intro td { padding: 12px; cursor: pointer; }
.survey-overview .intro .survey-heading { padding-bottom: 8px; }
.survey-overview .section td { padding: 12px; cursor: pointer; }
.survey-overview .section div { padding-bottom: 5px; }
.survey-overview .thankyou { padding: 12px; cursor: pointer; }
.survey-overview .question { padding: 7px 5px 7px 12px; cursor: pointer; }
.survey-overview .number { padding-right: 7px; padding-left: 0px; }
.survey-overview .number > div { text-align: center; cursor: pointer; }
.survey-overview .number label { display: inline-block; min-width: 1em; min-height: 1em; padding: 0px 1px 1px 2px; cursor: pointer; }
.survey-overview .number .arrow { position: relative; bottom: 0px; }
.survey-overview .text { width: 100%; }
.survey-overview .delete { padding-left: 5px; }
.survey-overview .delete-button { padding: 3px; }
.survey-overview .delete-button svg { width: 9px; height: 9px; }

/** The publish module **/
.publish .survey-url { padding: 0px; position: relative; margin-bottom: 40px; }
.publish .survey-url .header { padding: 9px; }
.publish .survey-url .content { padding: 20px; }
.publish .survey-url textarea { position: relative; display: block; width: 100%; margin: 0px; padding: 0.75em; resize: none; } 
.publish .survey-url button.test { margin-top: 15px; }
.publish .facebook { padding: 20px 30px; position: relative; }
.publish .facebook .facebook-button { display: inline-block; height: 29px; padding-right: 12px; margin: 0px 10px 7px 0px; cursor: default; }
.publish .facebook .facebook-button span { display: inline-block; cursor: inherit; }
.publish .facebook .facebook-button .icon { width: 29px; height: 29px; }
.publish .facebook .facebook-button .label { position: relative; top: -9px; padding-left: 7px; cursor: inherit; }
.publish .facebook .feed .icon { background-image: url(images/FB-f-Logo__blue_29.png); background-repeat: no-repeat; }
.publish .facebook .friends .icon { margin-left: 5px; background-image: url(images/FB_message_icon.png); background-repeat: no-repeat; }
.publish .facebook .message { margin-bottom: 10px; }
.like-count { position: absolute; right: 15px; top: 15px; padding: 9px 8px 7px 47px; cursor: default; background-image: url(images/FB-ThumbsUp_29.png); background-repeat: no-repeat; background-position: 7px 3px; }
.web-publish { padding: 20px 30px; position: relative; }
.web-publish .section { margin-bottom: 40px; }
.web-publish .header { padding: 9px; }
.web-publish .content { padding: 20px; }
.web-publish .content > div { margin-top: 10px; width: 80%; }
.web-publish .content input { position: relative; display: block; width: 100%; margin: 0px auto 0px auto; padding: 9px 10px; }
.web-publish .embedded { height: 5em; }
.web-publish .popupLink { height: 7em; resize: vertical; }
.web-publish .popupScript { height: 250px; resize: none; }
.web-publish .content .random { display: inline-block; width: 4em; padding: 6px; margin-left: 7px; margin-right: 7px; }
.web-publish textarea { position: relative; display: block; width: 100%; margin: 0px; padding: 0.75em 65px 0.75em 0.75em; resize: none; }
.web-publish button.test { margin-top: 8px; }
.web-publish .popup-dialog input { margin-bottom: 6px; }
.web-publish .popup-dialog .intro { min-height: 6.4em; resize: vertical; }
.web-publish .popup-dialog .buttons input { float: left; padding: 6px 10px; min-width: 30px; margin-right: 8px; }
.web-publish .popup-dialog .buttons button { position: relative; top: -4px; margin-left: 5px; }
.web-publish hr.separator { margin: 0px -18px 35px -18px; }
.panel-publish .info-box { margin-bottom: 0px; padding: 25px; }
.panel-publish .section { margin-bottom: 30px; }
.panel-publish h2 { margin: 0px; padding: 10px; font-weight: normal; }
.panel-publish img { float: left; margin-right: 30px; }
.panel-publish a { text-decoration: underline; color: inherit; }
.panel-publish .order table { width: 100%; }
.panel-publish .order table td { padding: 8px 12px; }
.panel-publish .order table td.label { text-align: right; width: 10px; white-space: nowrap; }
.panel-publish button { margin-bottom: 5px; margin-right: 10px; }
.panel-publish .message { margin-left: 10px; }

/** the date editor **/
.op-date-field { display: inline-block; white-space: nowrap; }
.op-date-field input { border: 0px; margin: 0px; padding: 3px; }
.op-date-field input.date { width: 7.2em; margin-right: 2px; }
.op-date-field .timeField input { width: 2.3em; }
.op-date-field input.hour { text-align: right; }
.op-datepicker { position: absolute; left: 50%; padding: 15px 25px; z-index: 999; }
.op-datepicker .date-row { text-align: right; }
.op-datepicker .date-row > td { padding: 0px 20px; }
.op-datepicker .buttons td { text-align: right; padding: 5px 20px; }
.op-datepicker .buttons td button[disabled=disabled] { cursor: default; }
.op-datepicker .month-row > td { padding: 5px 20px; }
.op-datepicker .surveyDate { padding: 4px; white-space: nowrap; margin-bottom: 10px; }
.op-datepicker .surveyDate label { display: inline-block; width: 3em; text-align: center; margin-right: 10px; }
.op-datepicker-month { position: relative; display: inline-block; text-align: center; cursor: default; }
.op-datepicker-month .icon { cursor: pointer; }
.op-datepicker-month .month { padding: 12px; }
.op-datepicker-month td { padding: 6px 11px; }
.op-datepicker-month tr.dates td { cursor: pointer; }
.op-datepicker-month .arrow { position: absolute; top: -9px; left: 50%; margin-left: -9px; }

/** The style used for the generic info-box used around the system **/
.info-box { position: relative; padding: 20px; margin-bottom: 40px; }
.info-box p { margin: 0px; }
.info-box .close { position: absolute; top: 4px; right: 4px; cursor: pointer; }

/** The report module **/
.report-icons { display: block; text-align: center; }
.report-icons > div { display: inline-block; margin: 0px 6px; cursor: pointer; padding: 8px; }
.report-url { margin-bottom: 40px; position: relative; white-space: nowrap; }
.report-url .op-check { padding: 5px 8px; height: 18px; }
.report-url button.view { margin-right: 5px; }
.report-url table.content { margin-bottom: 20px; }
.report-url .check { margin-right: 0.6em; }
.report-url td.url { width: 100%; padding-left: 7px; padding-right: 7px; }
.report-url input.url { padding: 5px; width: 100%; }
.report-url .facebookButton { width: auto; margin-right: 8px; position: relative; top: -2px; display: inline-block; height: 20px; white-space: nowrap; line-height: 20px; padding: 1px 7px 3px 2px; cursor: default; }
.report-url .facebookButton input { position: absolute; top: 2px; cursor: default; }
.report-url .facebookButton span { margin-left: 20px; }
.report-url .like-count { position: static; margin-top: -7px; display: inline-block; }
.survey-report { padding: 25px; }
.survey-report .report-header { padding: 6px; margin-bottom: 15px; }
.survey-report .report-header td { padding: 4px 12px; }
.survey-report .op-web-survey-fb-like { margin-top: 0px; float: right; z-index: 999; }
.survey-report-container { padding: 10px; max-width: 750px; margin-left: auto; margin-right: auto; }
.survey-report-container .survey-report { margin: 0px; position: relative; }
.report-question { margin-bottom: 30px; overflow-x: hidden; }
.report-question .question-text { padding: 5px; width: 100%; }
.report-question .question-text td { vertical-align: top; }
.report-question .question-text td.number { padding-right: 8px; width: 13px; }
.report-question .commentContainer div { padding: 8px 12px; line-height: 1.4em; }
.rating-report { padding: 20px 15px 20px 15px; }
.choice-report { padding: 20px 20px 25px 20px; }
.dropdown-report { padding: 20px 20px 25px 20px; }
.field-report { padding: 20px; }
.field-report label { margin-bottom: -8px; margin-top: 8px; display: inline-block; }
.report-filter { position: relative; padding: 10px; min-height: 100%; border-bottom-left-radius: 3px; overflow-x: auto; }
.report-filter .all { padding-bottom: 10px; padding-right: 7px; display: block; }
.report-filter .all input { margin-left: 6px; }
.report-filter .languages { margin-bottom: 10px; }
.report-filter .languages label { cursor: pointer; display: block; padding: 6px; }
.report-filter .languages label input { cursor: pointer; margin-right: 10px; }
.report-filter .not { margin-left: 10px; top: 5px; }
.report-filter .notInactive { opacity: 0.25; }
.report-filter .notActive { opacity: 1; }
.report-filter .op-web-survey-question-response .empty-answers { display: inline-block; margin-left: 27px; margin-top: 5px; }
.report-filter .op-web-survey-question-dropdown .empty-answers { margin-left: 20px; }
.report-filter .op-web-survey-question-dropdown label { margin-bottom: 2px; }
.report-filter .load-data { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; }
.report-filter .load-data label { cursor: pointer; }
.report-filter .load-data .message { display: inline-block; padding: 15px 19px; }
.report-filter .load-data .cancel { display: inline-block; }
.report-filter .load-data .button { display: inline-block; position: relative; margin-top: 50px; cursor: pointer; text-align: right; }
.report-filter .load-data.loading .button { cursor: default; }
.report-filter .load-data.loading .button .message { cursor: default; }
.report-filter .load-data.failed .button { cursor: default; }
.report-filter .load-data.failed .button .message { cursor: default; }
.report-filter .load-data .progress { position: relative; display: inline-block; left: -7px; top: 1px; }
.report-filter .exclude-include { float: right; margin-right: 10px; }
.report-filter .exclude-include .button { display: inline-block; }
.report-filter .exclude-include .exclude { border-right: none; }
.report-filter .exclude-include input { margin-right: 8px; margin-left: 0px; }
.response-table table { width: 100%; }
.response-table td { padding: 7px 10px; vertical-align: top; }
.response-table td.number { padding: 5px 0px 0px 10px; width: 20px; }
.response-table td.bottom { border-bottom-width: 1px; border-bottom-style: solid;}
.response-table td.bottom-odd { border-bottom-width: 1px; border-bottom-style: solid; }
.response-table td.question { width: 50%; }
.response-table td.answer { border-left-width: 1px; border-left-style: solid; }
.response-table td.answer-odd { border-left-width: 1px; border-left-style: solid; }
.response-table td.last { padding-bottom: 10px; }
.response-table td.date { font-weight: bold; }
.response-table caption { caption-side: bottom; height: 60px; position: relative; margin-bottom: 20px; margin-top: 10px; }
.export-module { position: absolute; left: 0px; right: 0px; height: auto; overflow: hidden; padding: 0px 20px; }
.export-module .data { width: 100%; height: 100%; min-height: 250px; border: 0px; resize: none; padding: 5px; }

/** The support module **/
.op-forum { padding: 10px; max-width: 100%; }
.op-forum .topics { width: 100%; }
.op-forum .categories { width: 100%; }
.op-forum .header th { padding: 6px 15px; line-height: 1.5em; height: 28px; position: relative; cursor: default; }
.op-forum .header th .back { margin-right: 10px; cursor: pointer; }
.op-forum .header th .category { margin-left: 10px; }
.op-forum .header th button { margin-left: 20px; position: absolute; top: 5px; }
.op-forum .category td { padding: 10px 15px; line-height: 1.5em; }
.op-forum .topic td { padding: 11px 15px; line-height: 1.5em; }
.op-forum .thread { padding: 0px 13px; }
.op-forum .forum-new td { padding: 15px; }
.op-forum .forum-new textarea { min-height: 6em; margin-top: 2px; resize: vertical; margin-bottom: 10px; }
.op-forum .forum-new select { margin: 7px 1px; height: 26px; }
.op-forum .forum-new button { margin-right: 10px; }
.op-forum .delete-button { float: right; }
.forum-thread { width: 100%; }
.forum-thread textarea.reply { min-height: 100px; margin-top: 1px; resize: vertical; margin-bottom: 10px; }
.forum-thread div.reply { margin-left: 20px; margin-bottom: 20px; max-width: 600px; } 
.forum-thread div.reply button { margin-right: 5px; } 
.forum-entry { padding: 10px 12px; position: relative; margin-bottom: 25px; }
.forum-entry.reply { margin-left: 20px; right: 0px; }
.forum-entry td.content { padding-right: 150px; }
.forum-entry textarea { position: absolute; top: 10px; left: 12px; padding: 2px; border: 0px; overflow: hidden; resize: none; margin: 0px; }
.forum-entry .editButtons { margin-top: 10px; display: inline-block; }
.forum-entry .editButtons button { margin-right: 10px; }
.forum-entry .menu { display: inline-block; width: 12px; height: 12px; margin: -1px -3px 0px 5px; }
.forum-entry .arrow { position: absolute; top: -8px; }
.forum-entry .info { padding-right: 99px; }

/** the admin module containing statistics, top-n, users, and log **/
.statistics { position: absolute; padding: 10px; left: 0px; top: 15px; right: 10px; bottom: 10px; max-width: 100%; }
.statistics table { height: 100%; }
.statistics table td { padding: 5px; position: relative; width: 33%; height: 50%; }
.statistics table canvas { width: 100%; height: 100%; }
.statistics .menu { position: absolute; z-index: 999; right: 0px; top: 6px; }
.statistics .menu label { padding-left: 8px; padding-right: 8px; cursor: pointer; }
.statistics .menu label:hover { text-decoration: underline; }
.top-n { max-width: 100%; }
.top-n .menu { padding: 5px; text-align: right; }
.top-n .menu label { padding-left: 5px; padding-right: 5px; cursor: pointer; }
.top-n table th:first-child { width: 100%; }
.top-n table td { white-space: nowrap; max-width: 200px; overflow-x: hidden; }
.user-list { max-width: 100%; }
.log.module-wrapper { max-width: none; }
.log-controls { width: 100%; }
.log-controls input { margin-right: 3px; }
.log-controls label { padding: 2px 8px 2px 4px; margin: 4px 0px 5px 8px; display: inline-block; cursor: pointer; }
.log-list { -webkit-user-select: text; }
.find-form input { width: 300px; }

/** styles used for the account module **/
.account-module .tabs label { display: inline-block; padding: 10px 20px; cursor: pointer; }
.account-module .account-password button { margin-right: 6px; }
.account-module .account-password input { margin-bottom: 6px; }
.account-state table.state { padding: 1em; width: 90%; margin-left: auto; margin-right: auto; margin-top: 1em; }
.account-state table.state td { vertical-align: top; padding-top: 0.5em; white-space: nowrap; line-height: 1.2em; }
.account-state table.state td.label { padding-right: 0.8em; font-weight: bold; width: 50%; }
.account-state table.qr { margin-top: 25px; width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
.account-state table.qr th { text-align: left; padding: 8px 12px; }
.account-state table.qr td { padding: 8px 12px; }
.account-plans table { width: 100%; padding: 20px; height: 100%; }
.account-plans table td { vertical-align: top; padding: 5px; width: 33%; }
.account-plan { min-height: 280px; border: 1px solid transparent; }
.account-plan label { display: block; }
.account-plan label.message { padding-top: 0.5em; }
.account-plan .feature { padding: 10px; }
.account-plan .feature { padding: 10px; }
.account-plan .head { min-height: 7em; padding: 10px; }
.account-plan .head button { padding: 4px 10px; margin-left: -4px; margin-top: 6px; cursor: pointer; }
.account-password { padding-bottom: 10px; }
.account-password .logo-container { position: relative; padding: 30px 30px 5px 30px; margin-bottom: 35px; }
.account-password .logo-container .logo { margin-right: 20px; position: relative; top: -10px; }
.account-password .logo-container .logo svg { -ms-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); }
.account-password .logo-container label { position: absolute; bottom: 15px; }
.account-password .op-control-box { margin: 25px 35px; }
.account-password .label { min-width: 10em; padding-right: 1em; display: inline-block; }
.account-password .message { margin: 0.6em 0.4em; }
.account-password input { padding: 4px 8px; }
.account-password div.submit { padding-top: 0.5em; margin-left: -1px; }
.premium-feature { padding: 0.5em; line-height: 1.5em; }
.paypal-done { position: fixed; width: 300px; left: 50%; margin-left: -150px; top: 30%; padding: 20px; text-align: center; }

/** the logo controller **/
.logo-controller .logo-container { float: right; min-width: 400px; min-height: 300px; }
.logo-controller .logo { position: relative; }
.logo-controller .controllers td { white-space: nowrap; }
.logo-controller .controllers input { cursor: pointer; }
.logo-controller .controllers label { cursor: pointer; }
.logo-controller .controllers input[type=range] { position: relative; top: 3px; margin-left: 8px; }
.murveys { margin-left: auto; margin-right: auto; }
.murveys caption { caption-side: bottom; padding: 20px; }
.murveys caption input { position: relative; top: 5px; }
.murveys canvas { width: 150px; height: 150px; display: block; }
.murveys td { vertical-align: bottom; text-align: center; padding: 5px; }
.murveys canvas.mr { padding: 13px; }