/*  This file is part of Lime Survey Template : citronade
    Copyright (C) 2007-2012 The LimeSurvey Project Team / Carsten Schmitz
    Copyright (C) 2010-2012 GsiLL / Denis Chenu
    you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This template is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
/* This part don't have to be modified */
/* Base style only */

@import url(https://fonts.googleapis.com/css?family=Roboto:300,700);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);


html {
    font-size: 100%
}
/* body{font-family:Arial, Courier Newucida Console,OCR A Extended, Serif, Helvetica, FreeSans, sans-serif;font-size:.85em;line-height:1.4em;color:#000;background:#FFF;margin:0;padding:0} */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95em;
    line-height: 1.4em;
    color: #000;
    background: #FFF;
    margin: 0;
    padding: 0
}

html, body {
    height: 100%
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2em;
    font-weight: 700;
    font-style: normal;
    margin: 1em 0 .5em
}

h1 {
    font-size: 1.5em
}

h2 {
    font-size: 1.3em
}

h3 {
    font-size: 1.2em
}

h4 {
    font-size: 1.1em
}

ul, ol {
    margin: .75em 0 .75em 32px;
    padding: 0
}

address {
    font-style: italic;
    margin: .75em 0
}

a {
    text-decoration: underline
}

    a:link, a:visited {
        color: #11C
    }

    a:visited {
        color: #339
    }

    a:hover, a:focus, a:active {
        color: #00F
    }

    a:active {
        outline: none
    }

    a img {
        border: none
    }

strong {
    font-weight: 700
}

form, fieldset {
    border: none;
    margin: 0;
    padding: 0
}

input, button, select {
    vertical-align: middle
}

abbr[title] {
    border-bottom: 1px dotted;
    cursor: help
}

blockquote {
    border-left: solid 2px #ddd;
    margin: .75em 0 .75em 20px;
    padding: 0 0 0 10px
}

q cite, q q {
    font-style: normal
}

blockquote p, li p {
    margin: .5em 0
}

dt {
    font-weight: 700;
    margin: .75em 0 0
}

dd {
    margin: .25em 0 .25em 32px
}

table {
}

    table td, table th {
    }

article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

ul#surveylist {
    list-style: none
}

.hide {
    position: absolute;
    top: auto;
    left: -999999px
}

#progress-wrapper {
    width: 252px;
    font-size: 12px;
    height: 20px;
    margin: 0 auto
}

    #progress-wrapper #progress-pre {
        float: left;
        width: 45px;
        text-align: right;
        margin: 0 5px 0 0
    }

    #progress-wrapper .ui-widget-content {
        float: left;
        width: 150px;
        height: 1em;
        text-align: left;
        border-color: #666;
        border-style: solid;
        border-width: 1px
    }

    #progress-wrapper .ui-widget-header {
        background-color: #AAA;
        background-image: none;
        border: 1px solid #666
    }

    #progress-wrapper #progress-post {
        float: left;
        width: 45px;
        text-align: left;
        margin: 0 0 0 5px
    }

.ui-slider {
    width: 15em;
    display: inline-block;
    border: 1px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: .4em 0 .2em
}

.slider_showmin {
    float: left;
    width: 3em;
    font-size: .7em;
    font-weight: 400;
    text-align: left;
    color: #666;
    margin: 1.4em 0 0
}

.slider_showmax {
    float: right;
    width: 3em;
    font-size: .7em;
    font-weight: 400;
    text-align: right;
    color: #666;
    margin: 1.4em 0 0
}

.slider_lefttext {
    display: inline-block;
    position: relative;
    top: -.5em;
    padding-right: 1em;
    text-align: right;
    font-size: .9em;
    color: #666
}

.slider_righttext {
    display: inline-block;
    position: relative;
    top: -.5em;
    padding-left: 1em;
    font-size: .9em;
    color: #666
}

.slider_callout {
    overflow: hidden;
    position: absolute;
    top: -1.3em;
    margin-left: .8em;
    text-align: right;
    color: #333;
    font-size: .9em
}

.ie .ui-slider {
    display: block;
    float: left;
}

.ie .slider_lefttext {
    float: left;
    margin-top: 1em;
}

.ie .slider_righttext {
    float: left;
    margin-top: 1em;
}

.no-js .slider_showmin, .no-js .slider_showmax {
    display: none;
}

.no-js .slider_lefttext, .no-js .slider_righttext {
    display: none;
}

#percentcomplete {
    height: 20px;
    display: block;
    margin: 5px 0
}

h5, h6 {
    font-size: 1em
}

p, dl {
    margin: .75em 0
}

em, q, cite {
    font-style: italic
}

/* --------------------------------------------- */
/* Basic adaptation of the template :            */
/* color and image                               */
/* --------------------------------------------- */

body {
    color: #444;
}

a:link {
    color: #5670A1;
}

a:visited {
    color: #5670A1;
}

a:hover, a:focus, a:active {
    background-color: #E5F8A8;
    color: #5670A1;
    text-decoration: none;
}
/* Global margin and with*/
/* width of limesurvey contents parts */
.wrapper, #content {
    padding: 10px;
    margin: 0 auto;
    max-width: 954px;
    width: auto !important;
    width: 1024px
}

/* Head decoration */
#head {
    border-bottom: 2px solid #AAA;
    border-top: 2px solid #CCC;
    color: #5670A1;
    background: #dbdbdb url(header-bkg.png) repeat-x center bottom;
}

    #head a#link-logo:hover, #head a#link-logo:focus, #head a#link-logo:active {
        background: transparent;
    }

    #head a#link-logo {
        outline: 0;
    }
/* remove the outline on logo click */

#sitename {
    line-height: 2;
    margin: 0;
}
/* survey title color */
#title {
    color: #FFF;
    background: #5670A1;
    border-bottom: 2px solid #C9EF50;
}

/* survey list */
#surveylist-container h3 {
    color: #5670A1
}

ul#surveylist li a {
    color: rgb(139,44,49);
}

    ul#surveylist li a.surveytitle {
        color: #5670A1;
    }

/* footer color*/
#footer {
    background: rgb(47, 47, 47);
    color: #FFF;
}

    #footer a {
        color: #E5F8A8;
    }

        #footer a:hover, #footer a:focus, #footer a:active {
            background-color: #E5F8A8;
            color: #5670A1;
        }

/* survey tool decoration */
#languagechanger select,
.tools input,
.tools a,
input.submit,
input#savebutton,
input#loadbutton,
input#registercontinue,
.navigator input {
    border: 1px solid #ABB8D1;
    background: #FEFEFE;
    color: #415479;
    -moz-box-shadow: 2px 2px 5px #ccc;
    -webkit-box-shadow: 2px 2px 5px #ccc;
    box-shadow: 2px 2px 5px #ccc;
}

    #languagechanger select:hover,
    .tools input:hover,
    .tools a:hover,
    .navigator input:hover,
    input.submit:hover,
    input#savebutton:hover,
    input#loadbutton:hover,
    input#registercontinue:hover,
    #languagechanger select:focus,
    .tools input:focus,
    .tools a:focus,
    .navigator input:focus,
    input.submit:focus,
    input#savebutton:focus,
    input#loadbutton:focus,
    input#registercontinue:focus {
        color: #415479;
        background: #dcdfe6;
        border-color: #ABB8D1;
        -moz-box-shadow: 2px 2px 5px #415479;
        -webkit-box-shadow: 2px 2px 5px #415479;
        box-shadow: 2px 2px 5px #415479;
    }

        #languagechanger select:hover option {
            background: #FEFEFE;
        }

    /* for disabled tools */
    .tools input[disabled],
    .navigator input[disabled],
    input.submit[disabled],
    input#savebutton[disabled],
    input#loadbutton[disabled],
    input#registercontinue[disabled],
    #languagechanger select[disabled] {
        border: 1px solid #dbdbdb;
        background: #FEFEFE;
        color: #dbdbdb;
        cursor: inherit;
    }

.ie .tools input,
.ie .tools a,
.ie .navigator input,
.ie input#savebutton,
.ie input#loadbutton {
    height: 2em
}

.no-js input.saveall, .no-js input.clearall, .no-js input#moveprevbtn {
    display: none
}
/* gloabl information block */
.note, #tokenmessage {
    border: #8195BA 1px solid;
    background: #EEF6FF;
}

/* Group decoration */
.groupdescription {
    border: 1px solid rgb(230, 230, 224);
}

.grouptitle {
    border: 0 solid #5670A1;
    border-bottom: 0px none #5670A1;
    background: #8a8d8e;
    color: #FEFEFE
}


/* Question bloc decoration */
.question-wrapper {
    background-color: #FEFEFE;
    border: 1px solid #e6e6e0;
    border-radius: 15px 15px 15px 15px
}

    .question-wrapper .question-text {
        padding: 0.5em 1.5em;
        border-bottom: 1px solid rgb(230, 230, 224);
        background-color: #efefef;
        border-radius: 15px 15px 0 0
    }

        .question-wrapper .question-text a {
            color: #FEFEFE
        }

            .question-wrapper .question-text a:hover {
                color: #5670A1
            }

    .question-wrapper .question-text {
        font-weight: bold
    }

        .question-wrapper .question-text strong, .question-wrapper .question-text b {
            font-weight: bolder;
        }
/* see for strong and b to add some color */
.asterisk {
    display: none
}

.mandatory .asterisk {
    display: inline;
}

.asterisk {
    color: #FF8900;
}

.showqnumcode-X .qnumcode {
    display: none;
}

.qnumcode {
    font-style: italic;
}

/* input decoration */
.form input[type=text], #tokenform input[type=text] {
    border: 1px solid #999;
}

.form input[type=text], #tokenform input:focus, {
    background-color: #F0F0F0;
    border-color: #666
}


/* tip color */
.error {
    color: #944
}

.good {
    color: #494
}

.problem {
    color: #944
}
/* input error after*/

/* If you want some round box, add round style */
.round {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/* limesurvey specific tool */
/* Replacement of default progress bar */

#progress-wrapper .ui-widget-content {
    border-color: #161c28;
    background: #fefefe;
    color: #000;
}

#progress-wrapper .ui-widget-header {
    border-color: #161c28;
    background: #5670a1;
    color: #fefefe;
    font-weight: bold;
}

.ie .ui-slider {
    display: inline;
}

.ui-slider {
    border-color: #5670A1;
}

.slider_showmin {
    color: #5670A1;
}

.slider_showmax {
    color: #5670A1;
}

.slider_lefttext {
    color: #5670A1;
}

.slider_righttext {
    color: #5670A1;
}

.slider_callout {
    color: #161c28;
}

/* index */
#index .container {
    margin-top: 2em;
    border: 1px solid #5670A1;
    background: #EEF6FF;
}

    #index .container h2 {
        padding: 0.2em 1em 0.5em;
        margin: 0 0 0;
        font-size: 1.1em;
    }

    #index .container h2 {
        background: #5670A1;
        color: #FEFEFE;
        font-size: 1.2em
    }

#index .hdr {
    color: #5670A1;
    padding: 0 0.5em;
}

#index .row {
    padding: 0.1em 1em;
    cursor: pointer;
    color: #5670A1;
    text-decoration: underline;
}

#index .current {
    padding: 0.1em 1em;
    cursor: pointer;
    color: #5670A1;
    text-decoration: none;
    font-weight: bold;
}

#index .missing { /*background: url()*/
}

#index .row:hover, #index .row:focus, #index .row:active {
    background-color: #E5F8A8;
    color: #5670A1;
    text-decoration: none;
}

#index .container .submit {
    margin: 0 auto 0.5em;
    display: block
}
/* --------------------------------------------- */
/* More template adaptation                       */
/* --------------------------------------------- */
#container {
    margin: 0;
    overflow-y:hidden !important;
}
/* Global container */
.ie6 #container, .ie7 #container {
    text-align: center
}

.wrapper, #content {
    overflow: auto;
    position: relative;
}

.ie6 .wrapper, .ie6 #content, .ie7 .wrapper, .ie7 #content {
    text-align: left;
}

#container {
    min-height: 100%;
    position: relative;
}

#head {
    position: relative;
}

    #head h1 {
        display: inline;
    }

    #head img#logo {
        vertical-align: middle;
    }

/* for the footer */
#content {
    padding-bottom: 4.8em;
}

#footer {
    text-align: center;
    padding: 2px;
    margin: 0;
    font-size: 0.8em;
    font-weight: normal;
}

#footer {
    border-width: 1px 0;
}

#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.ie6 #footer {
    position: relative;
}

.ie6 #content {
    padding-bottom: 1em;
}

#footer ul#credits {
    width: 100%;
    list-style: none outside;
    margin: 0;
    padding: 0;
    text-align: center;
    display: block;
}

#footer ul#credit a {
    display: block;
}

#footer ul#credit li a.ui-state-hover {
    font-weight: normal;
}
/* to be corrected */
#footer ul#credits li {
    list-style: none inside;
    margin: 0;
    padding: 0;
    text-align: center;
}

#footer ul#credits li {
    display: inline-block;
    width: 33%;
}

    #footer ul#credits li.first {
        text-align: left;
    }

    #footer ul#credits li.last {
        text-align: right;
    }

.ie6 #footer ul#credits li, .ie7 #footer ul#credits li {
    width: 33%;
    display: block;
    float: left;
}

@media screen and (max-width: 480px) {
    #footer ul#credits li {
        display: block;
        width: 100%;
    }

        #footer ul#credits li.first {
            text-align: center;
        }

        #footer ul#credits li.last {
            text-align: center;
        }
}



/* survey title bar */
#title {
    margin: 0;
    text-align: center;
    padding: 0;
}

/* specific decoration */
p.url {
    font-size: 1.2em;
    text-align: center;
    font-weight: bold
}

table.printouttable {
    width: 99%
}

#languagechanger {
    margin: 0.5em 0;
    text-align: center
}
/* survey list (home page) */
#surveylist-container {
    text-align: center
}

h2#surveytitle {
    font-size: 1.2em;
    text-align: left;
    line-height: 2em;
}

ul#surveylist li a {
    color: #5670A1;
}

/* Tool button and link */
/* tools input */
.tools input, .tools a, .navigator input, input.submit, input#savebutton, input#loadbutton, input#registercontinue, #languagechanger select {
    font-family: FreeSans,Arial,Helvetica,sans-serif;
    font-size: 1em;
    vertical-align: middle;
}

tools input, .tools a, input.submit, .navigator input, input#savebutton, input#loadbutton, input#registercontinue {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
/* same box sizing for link and button */
.tools input, .tools a, input.submit, input#savebutton, input#loadbutton, input#registercontinue, .navigator input {
    margin: 0;
    padding: 3px 6px;
    text-decoration: none;
    cursor: pointer;
}

#languagechanger select {
    margin: 0;
    padding: 1px 2px;
}

.tools, .navigator, .tools :active, .navigator :active, .tools :focus, .navigator :focus {
    outline: 0 none;
}

    .tools ::-moz-focus-inner, .navigator ::-moz-focus-inner {
        border: 0;
    }

    .tools input, .tools a, .navigator input, input.submit, input#savebutton, input#loadbutton, input#registercontinue, #languagechanger select {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
/* tools list */
ul.tools {
    list-style: none;
    margin: 0.5em;
    padding: 0;
    text-align: left;
}

    ul.tools div, ul.tools li {
        margin: 0.1em 0;
        padding: 0;
        display: inline;
    }

    ul.tools li {
        margin-right: 1em;
    }

ul.info {
    list-style: none;
    text-align: center;
}

    ul.info li {
        margin: 0.5em 0;
        font-size: 1.05em;
    }

    ul.info a {
    }

.navigator {
    text-align: center;
}

/* progress */
#percentcomplete {
    height: 2em;
    margin: 0.5em 0;
}

#progress-wrapper {
    height: 2em;
}

/*surveylist (home page) */
#surveylist {
    margin: 0.5em auto;
    padding: 0;
    text-align: left;
    overflow: auto;
    display: inline-block;
}

    #surveylist li {
        padding: 0.5em 10px;
    }

        #surveylist li a.surveytitle {
            display: block;
            font-weight: bold;
            font-size: 1.2em;
            padding: 3px 10px;
            margin-bottom: 4px;
            border-bottom: 1px dotted;
            text-decoration: none;
        }

            #surveylist li a.surveytitle:hover, #surveylist li a.surveytitle:focus {
                border-bottom: 1px dotted #FFF;
            }
/* specific box */
.note, #tokenmessage {
    width: 80%;
    margin: 0.5em auto;
    padding: 1em;
}

#tokenform ul {
    list-style: none;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
}

    #tokenform ul li {
    }
/* specific box */
#privacy {
    font-size: 90%;
    font-style: italic;
}

#surveydescription {
    font-size: 1.1em;
    color: #5670A1
}

#assessment table {
    width: 80%;
    margin: 0 auto;
}

div.form table {
    margin: 0.4em auto;
}

    div.form table td {
        border: 0 none #CCC;
    }

    div.form table table {
        border: 0 none #CCC;
    }

        div.form table table td {
            padding: 0;
        }

/* Group decoration */
.group {
    margin-bottom: 2em
}

.groupdescription {
    padding: 0 1.5em;
    margin: 0 0 0.5em;
}

.grouptitle {
    line-height: 2em;
    padding: 0 1em;
    margin: 0;
    font-size: 1.1em;
}


/* Question decoration */
.question-wrapper {
    margin: 1em 0;
}

.question-text {
    border-bottom: none 0px #FFF;
}

.question-wrapper .answers-wrapper {
    overflow: auto;
    overflow-y: hidden;
    background-color: rgb(255, 255, 255);
}

.answers-wrapper {
    padding: 0.5em 1em;
    margin: 0.5em auto;
}


.question-help, .help {
    padding: 0 1em;
    margin: 0.5em auto 0;
    clear: both;
}

    .question-help img {
        margin: 1px 5px 5px 1px;
    }

/* tip bloc */

.help-wrapper, .tip {
    font-style: italic;
    margin: 0.5em auto;
    width: 96%;
    line-height: 150%;
}

.help-wrapper {
    font-size: 0.8em;
}

    .help-wrapper .error, .help-wrapper .error-wrapper {
        color: #944;
        font-weight: bold
    }

    .help-wrapper .success, .help-wrapper .good, .help-wrapper .ok {
        color: #444
    }

    .help-wrapper .problem {
        color: #944
    }

    .help-wrapper .errormandatory {
        color: #944;
        font-weight: 1em;
    }

        .help-wrapper .errormandatory br:first, .help-wrapper .errormandatory strong br:first {
            display: none;
        }

.mandatory br {
    display: none;
}
/* don't put linefeed at start of an error box */

.help-wrapper .mandatory {
    display: none;
}

.input-error .help-wrapper .mandatory {
    display: block;
}

.answer-wrapper .tip {
    text-align: left;
    font-size: 0.8em;
}
/* input error */
input[type="text"].tip, input.tip, input.tip {
    border: 0;
    background: transparent
}
/* input decoration */
.answers-wrapper input.text, .answers-wrapper textarea, .answers-wrapper input[type=text] {
    margin: 3px;
    padding: 2px;
}

.form input[type=text], .answers-wrapper input.text, .answers-wrapper textarea, .answers-wrapper input[type=text] {
    border: 1px solid #999;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}


    .mandatory .answers-wrapper textarea.empty, .mandatory .answers-wrapper input[type=text].empty,
    .answers-wrapper textarea.error, .answers-wrapper input[type=text].error {
        border: 1px solid #944;
        color: #444;
        background-color: #FEF;
    }

    .answers-wrapper textarea.good, .answers-wrapper input[type=text].good {
        border: 1px solid #494;
        color: #444
    }

    .answers-wrapper textarea.empty, .answers-wrapper input[type=text].empty {
        border: 1px solid #999;
        color: #444;
        background-color: #FFF;
    }

    .answers-wrapper textarea[disabled], .answers-wrapper input.text[disabled], .answers-wrapper input[type=text][disabled] {
        background-color: #FFF;
        border-color: #EEE;
    }

    .answers-wrapper textarea.empty[disabled], .answers-wrapper input[type=text].empty[disabled] {
        border: 1px solid #EEE;
        color: #444;
        background-color: #FFF;
    }

    .answers-wrapper textarea:focus, .answers-wrapper input.text:focus, .answers-wrapper input[type=text]:focus {
        background-color: #FFF;
        border-color: #666;
        color: #222;
        -moz-box-shadow: 1px 1px 3px #555;
        -webkit-box-shadow: 1px 1px 3px #555;
        box-shadow: 1px 1px 3px #555;
    }

/* specific questions color and background*/
table.question {
    border-color: #D5DBE7;
}

    table.question tbody {
        border-color: #D5DBE7;
    }

    table.question tr {
        border-color: #D5DBE7;
    }

    table.question th {
        border-color: #D5DBE7;
    }

    table.question td {
        border-color: #EFF1F6;
    }

    table.question thead td {
        border-color: #D5DBE7;
    }

    table.question tbody td.ddarrayseparator:hover {
        background: #EFF1F6;
    }

.array-flexible-column table.question col.even {
    background: #FEFEFE
}

.array-flexible-column table.question col.odd {
    background: #F4F6F9
}

table.question tr.array1, table.question tbody tr.array1:hover th {
    background: #FEFEFE
}

table.question tr.array2, table.question tbody tr.array2:hover th {
    background: #F4F6F9
}

table.question tbody tr:hover {
    background: #D5DBE7
}

table.question tbody tr td:hover {
    background: #E5F8A8
}

/* for boilerplate color and background */
.boilerplate {
}

/* not using (todo: verify) */
.printouttitle {
}

.surveytitle {
}

    .surveytitle:hover {
    }

/* --------------------------------------------- */
/* JQUERY ui replace                             */
/* --------------------------------------------- */

/*** Start jQuery UI Theme Styles ***/

button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0; /* Get rid of extra padding in focused button in FF */
}

.ui-corner-all {
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.ui-button {
    position: relative;
    padding: 0.1em 0 0.1em 0;
    cursor: pointer;
    font-family: FreeSans,Arial,Helvetica,sans-serif;
    font-size: 1.0em;
    font-weight: normal;
    line-height: normal;
}

.ui-button-icon-only {
    width: 2.2em;
}

button.ui-button-icon-only {
    width: 2.4em; /* Button elements seem to need a little more width */
}

.ui-button-icons-only {
    width: 3.4em;
}

button.ui-button-icons-only {
    width: 3.7em;
}

/* Button text elements */
.ui-button-text-only .ui-button-text {
    padding: 0 1em;
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
    text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text {
    padding: 0 0.7em 0 1.7em;
}

.ui-button-text-icon-secondary .ui-button-text {
    padding: 0 1.7em 0 0.7em;
}

.ui-button-text-icons .ui-button-text {
    padding: 0 1.7em;
}

input.ui-button {
    padding: 0.1em 1em 0.1em 1em; /* No icon support for input elements, provide padding by default */
}

/* Button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
    left: .4em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
    right: .4em;
}

.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
    right: .4em;
}

/* Button sets*/
.ui-buttonset {
    margin-right: 7px;
}

    .ui-buttonset .ui-button {
        margin-left: 0;
        margin-right: -.3em;
    }

/* IE6/7 hacks 8 */

.ui-button,
input.ui-button {
    *padding: 0.1em 0 0.1em 0;
}

.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
    *margin-top: -9px;
}

.ui-button-text-icon-primary .ui-button-text {
    *padding: 0 0 0 1.0em;
}

.ui-button-text-icon-secondary .ui-button-text {
    *padding: 0 1.2em 0 0;
}

.ui-button-text-icons .ui-button-text {
    *padding: 0 1.0em;
}

/*** End jQuery UI Theme Styles ***/

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Arial, Helvetica, FreeSans, sans-serif;
    font-size: 1.1em;
}

    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
        font-family: Arial, Helvetica, FreeSans, sans-serif;
        ;
        font-size: 1em;
    }

.ui-widget-content {
    border: 1px solid #161c28;
    background: #fefefe;
    color: #000;
}

    .ui-widget-content a {
        color: #000;
    }

.ui-widget-header {
    border: 1px solid #161c28;
    background: #5670a1;
    color: #fefefe;
    font-weight: bold;
}

    .ui-widget-header a {
        color: #fefefe;
    }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default {
    border: 1px solid #abb8d1;
    background: #fefefe;
    font-weight: normal;
    color: #5670a1;
    outline: none;
}

    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
        color: #5670a1;
        text-decoration: none;
        outline: none;
    }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    border: 1px solid #abb8d1;
    background: #eff1f6;
    font-weight: normal;
    color: #415479;
    outline: none;
}

    .ui-state-hover a, .ui-state-hover a:hover {
        color: #415479;
        text-decoration: none;
        outline: none;
    }

.ui-state-active, .ui-widget-content .ui-state-active {
    border: 1px solid #415479;
    background: #d5dbe7;
    font-weight: normal;
    color: #161c28;
    outline: none;
}

    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
        color: #161c28;
        outline: none;
        text-decoration: none;
    }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {
    border: 1px solid #fcefa1;
    background: #fefefe;
    color: #363636;
}

    .ui-state-highlight a, .ui-widget-content .ui-state-highlight a {
        color: #363636;
    }

.ui-state-error, .ui-widget-content .ui-state-error {
    border: 1px solid #cd0a0a;
    background: #fef1ec;
    color: #cd0a0a;
}

    .ui-state-error a, .ui-widget-content .ui-state-error a {
        color: #cd0a0a;
    }

.ui-state-error-text, .ui-widget-content .ui-state-error-text {
    color: #cd0a0a;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none;
}

.ui-priority-primary, .ui-widget-content .ui-priority-primary {
    font-weight: bold;
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: normal;
}

/* Overlays */
.ui-widget-overlay {
    background: #aaaaaa 50% 50% repeat-x;
    opacity: .30;
    filter: Alpha(Opacity=30);
}

.ui-widget-shadow {
    margin: -8px 0 0 -8px;
    padding: 8px;
    background: #aaaaaa 50% 50% repeat-x;
    opacity: .30;
    filter: Alpha(Opacity=30);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.alert .ui-dialog-titlebar {
    display: none
}

/* -------------------------------------------------
   START: Question styles  ------------------------- */

/* =====================================
== Full list of question classes =======

 .boilerplate
,.numeric
,.choice-5-pt-radio
,.yes-no
,.gender
,.date
,.numeric-multi
,.numeric
,.list-radio
,.list-radio-flexible
,.list-with-comment
,.list-dropdown
,.list-dropdown-flexible
,.ranking
,.numeric-multi
,.language
,.multiple-opt-comments
,.multiple-short-txt
,.text-short
,.text-long
,.text-huge
,.numeric-multi
,.array-5-pt
,.array-10-pt
,.array-yes-uncertain-no
,.array-increase-same-decrease 
,.array-flexible-row 
,.array-flexible-column 
,.slider 
,.array-multi-flexi 
,.array-multi-flexi-text
,.array-flexible-duel-scale 
*/

/* answer table */
table.question {
    border-width: 0 0 1px 0;
    border-style: solid;
    width: 99%;
}

    table.question tbody {
        border-width: 0 1px 0 0;
        border-style: solid;
    }

    table.question thead th {
        border-width: 1px 1px 0px 0px;
        border-style: solid;
    }

        table.question thead td, table.question thead th:first-child {
            border-width: 0px 1px 0px 0px;
            border-style: solid;
        }

    table.question tbody th {
        border-width: 1px 1px 0px 1px;
        border-style: solid;
    }

    table.question tbody td {
        border-width: 1px 1px 0px 0px;
        border-style: solid;
    }

    table.question tbody th.answertext, table.question tbody th.arraycaptionleft {
        text-align: right;
    }

    table.question tbody th.answertextright {
        text-align: left;
    }

    table.question thead th {
        text-align: center;
        vertical-align: middle
    }

    table.question tbody td {
        text-align: center;
        vertical-align: middle
    }

        table.question tbody td.ddarrayseparator {
            border-top-width: 0px;
        }


/* remove the list dot */
.answers-wrapper ul {
    list-style: none;
    margin: 0.75em 0;
}

.answers-wrapper li {
    list-style-type: none;
    text-align: justify;
    margin: 1em 0;
}

.answers-wrapper label:hover {
    color: #222;
}

.ie .multiple-opt-comments .answers-wrapper,
.ie .multiple-short-txt .answers-wrapper,
.ie .numeric-multi .answers-wrapper,
.ie .multiple-opt .answers-wrapper {
    overflow: hidden;
}

/* some inline list */
.choice-5-pt-radio .answers-wrapper ul li, .yes-no .answers-wrapper ul li, .gender .answers-wrapper ul li {
    display: inline;
    padding: 0 1em 0 0;
    text-align: left;
}

@media screen and (max-width: 640px) {
    .choice-5-pt-radio .answers-wrapper li, .list-radio-flexible .answers-wrapper li, .list-radio .answers-wrapper li, .list-with-comment .answers-wrapper li {
        margin-left: 0;
    }
}

.list-radio-flexible li {
    width: auto;
}

.list-radio-flexible ul {
    width: auto;
    margin: 0 auto 0.5em;
}

table.rank {
    width: 98%;
    table-layout: fixed;
}

    table.rank, table.rank table {
        border: 0px none #FFF;
        border-collapse: collapse
    }

        table.rank td {
            border-width: 1px;
        }

        table.rank table td {
            border-width: 0px;
        }

.numeric-multi ul.slider.computed {
    width: 14em;
}

.boilerplate {
}

.choice-5-pt-radio .answers-wrapper ul, .yes-no .answers-wrapper ul, .gender .answers-wrapper ul {
    text-align: center;
}

    .choice-5-pt-radio .answers-wrapper ul li, .yes-no .answers-wrapper ul li, .gender .answers-wrapper ul li {
        display: inline;
        padding: 0 2em 0 0;
        text-align: left;
    }

p.question {
    margin-left: 1em;
    margin-right: 1em;
    font-weight: normal;
    text-align: center;
}

table.rank, table.rank table {
    border: 0px none #FFF;
    border-collapse: collapse
}

table.rank {
    margin: 0.3em auto;
}

    table.rank select {
        width: 99%;
        min-width: 10em;
        padding-left: 0.3em;
    }

    table.rank td {
        border: 1px solid #D5DBE7
    }

    table.rank table td {
        border: 0px none #D5DBE7
    }

    table.rank input {
        border: 1px solid #999
    }


.list-dropdown-flexible .question, .list-dropdown .question, .language .question {
    text-align: center;
}

.list-with-comment div.list {
    width: 47%;
    float: left;
    padding: 0.5em;
}

.list-with-comment p.select {
    width: 47%;
    float: left;
    padding: 0.5em;
    margin: 0;
}

.list-with-comment div.list p {
    margin: 0;
    text-align: left;
}

.list-with-comment p.comment {
    margin: 0%;
    padding: 0.5em;
    text-align: left;
    float: left;
    width: 47%;
}

    .list-with-comment p.comment textarea {
        width: 100%;
    }

@media screen and (max-width: 480px) {
    .list-with-comment div.list, .list-with-comment p.select, .list-with-comment p.comment {
        width: 99%;
        float: none;
    }
}

.multiple-opt-comments ul, .multiple-short-txt ul, .numeric-multi ul, .multiple-opt ul {
    padding: 0 0.5em;
    margin: 1em 0;
    width: 99%;
}

.numeric-multi ul {
}

    .numeric-multi ul.computed {
        float: left;
        padding-left: 0;
        padding-right: 2em;
    }

    .numeric-multi ul.slider.computed {
        width: 14em;
    }

.numeric-multi ul, multiple-opt ul, .multiple-opt-comments ul, .multiple-short-txt ul {
    display: block;
    width: 99%;
}

    .numeric-multi ul li, .multiple-opt ul li, .multiple-opt-comments ul li, .multiple-short-txt ul li {
        display: block;
    }

        .numeric-multi ul li label, .multiple-short-txt ul li label {
            text-align: right;
        }

.multinum-slider {
    text-align: center;
    display: inline;
}

.numeric-multi ul li span.input, .multiple-opt-comments ul li span.comment, .multiple-short-txt ul li span {
    text-align: left;
}

.numeric-multi .answers-wrapper ul, .multiple-short-txt .answers-wrapper ul, .multiple-opt-comments .answers-wrapper ul {
    display: table;
}

    .numeric-multi .answers-wrapper ul li, .multiple-short-txt .answers-wrapper ul li, .multiple-opt-comments .answers-wrapper ul li {
        display: table-row;
    }

        .numeric-multi .answers-wrapper ul li label, .numeric-multi .answers-wrapper ul li span, .multiple-short-txt .answers-wrapper ul li label, .multiple-short-txt .answers-wrapper ul li span, .multiple-opt-comments .answers-wrapper ul .option, .multiple-opt-comments .answers-wrapper ul .comment {
            display: table-cell;
            vertical-align: middle;
            width: 50%;
            padding: 0.3em 0.5em 0.7em;
        }

            .numeric-multi .answers-wrapper ul li label span, .multiple-short-txt .answers-wrapper ul li label span {
                display: inline;
                width: auto
            }

            .numeric-multi .answers-wrapper ul li span span, .multiple-short-txt .answers-wrapper ul li span span {
                display: inline-block;
                width: 5em;
                text-align: center;
                font-weight: bold;
            }

.ie6 .numeric-multi ul li label, .ie7 .numeric-multi ul li label, .ie6 .multiple-opt-comments ul li span.option, .ie7 .multiple-opt-comments ul li span.option, .ie6 .multiple-short-txt ul li label, .ie7 .multiple-short-txt ul li label {
    clear: left;
    float: left;
    width: 45%;
    padding: 0.3em 1em 0 0;
}


.multiple-opt .answers-wrapper ul li, .list-radio .answers-wrapper ul li, .list-radio-flexible .answers-wrapper ul li {
    padding-right: 0;
    padding-left: 35%;
}

    .multiple-opt .answers-wrapper ul li label, .multiple-opt-comments .answers-wrapper ul li label, .list-radio .answers-wrapper ul li label, .list-radio-flexible .answers-wrapper ul li label, .list-with-comment .answers-wrapper ul li label {
        display: inline-block;
        vertical-align: middle;
    }

.multiple-opt-comments .answers-wrapper ul li .option, .list-with-comment .answers-wrapper ul li {
    padding-left: 30px;
}

    .multiple-opt .answers-wrapper ul li input.checkbox, .multiple-opt-comments .answers-wrapper ul li input.checkbox, .list-radio .answers-wrapper ul li input.radio, .list-radio-flexible .answers-wrapper ul li input.radio, .list-with-comment .answers-wrapper ul li input.radio {
        margin-left: -30px;
        vertical-align: middle;
    }

@media screen and (max-width: 640px) {
    .multiple-opt .answers-wrapper ul li
    .multiple-opt-comments .answers-wrapper ul li, .list-radio .answers-wrapper ul li, .list-with-comment .answers-wrapper ul li, .list-radio-flexible .answers-wrapper ul li {
        padding-left: 30px;
    }

    .multiple-opt-comments .answers-wrapper ul .comment input {
        width: 99%;
    }
}

@media screen and (max-width: 480px) {
    .numeric-multi .answers-wrapper ul li label, .numeric-multi .answers-wrapper ul li span, .multiple-short-txt .answers-wrapper ul li label, .multiple-short-txt .answers-wrapper ul li span, .multiple-opt-comments .answers-wrapper ul .option, .multiple-opt-comments .answers-wrapper ul .comment {
        display: block;
        width: 99%;
    }
}


.text-short input, .text-short textarea, .text-long textarea, .text-huge textarea {
    margin-right: 0;
    margin-left: 1em;
    text-align: left;
}

.text-short .question, .text-short .answers-wrapper, .text-long .answers-wrapper, .text-huge .answers-wrapper {
    text-align: center;
}


/* multi column */
ul.cols-2, table.cols-2, ul.cols-3, table.cols-3, ul.cols-4, table.cols-4, ul.cols-5, table.cols-5, ul.cols-6, table.cols-6, ul.cols-7, table.cols-7, ul.cols-8, table.cols-8 {
    width: 98%;
    margin: 0% auto 0% auto;
}

    ul.cols-2 li, ul.cols-2-ul, ul.cols-3 li, ul.cols-3-ul, ul.cols-4 li, ul.cols-4-ul, ul.cols-5 li, ul.cols-5-ul, ul.cols-6 li, ul.cols-6-ul, ul.cols-7 li, ul.cols-7-ul, ul.cols-8 li, ul.cols-8-ul {
        float: left;
        padding: 0;
        white-space: normal
    }

        .list-radio-flexible .answers-wrapper ul.cols-2 li, .list-radio-flexible .answers-wrapper ul.cols-2-ul li, .list-radio-flexible .answers-wrapper ul.cols-3 li, .list-radio-flexible .answers-wrapper ul.cols-3-ul li, .list-radio-flexible .answers-wrapper ul.cols-4 li, .list-radio-flexible .answers-wrapper ul.cols-4-ul li, .list-radio-flexible .answers-wrapper ul.cols-5 li, .list-radio-flexible .answers-wrapper ul.cols-5-ul li, .list-radio-flexible .answers-wrapper ul.cols-6 li, .list-radio-flexible .answers-wrapper ul.cols-6-ul li, .list-radio-flexible .answers-wrapper ul.cols-7 li, .list-radio-flexible .answers-wrapper ul.cols-7-ul li, .list-radio-flexible .answers-wrapper ul.cols-8 li, .list-radio-flexible .answers-wrapper ul.cols-8-ul li, .list-radio .answers-wrapper ul.cols-2 li, .list-radio .answers-wrapper ul.cols-2-ul li, .list-radio .answers-wrapper ul.cols-3 li, .list-radio .answers-wrapper ul.cols-3-ul li, .list-radio .answers-wrapper ul.cols-4 li, .list-radio .answers-wrapper ul.cols-4-ul li, .list-radio .answers-wrapper ul.cols-5 li, .list-radio .answers-wrapper ul.cols-5-ul li, .list-radio .answers-wrapper ul.cols-6 li, .list-radio .answers-wrapper ul.cols-6-ul li, .list-radio .answers-wrapper ul.cols-7 li, .list-radio .answers-wrapper ul.cols-7-ul li, .list-radio .answers-wrapper ul.cols-8 li, .list-radio .answers-wrapper ul.cols-8-ul li, .multiple-opt .answers-wrapper ul.cols-2 li, .multiple-opt .answers-wrapper ul.cols-2-ul li, .multiple-opt .answers-wrapper ul.cols-3 li, .multiple-opt .answers-wrapper ul.cols-3-ul li, .multiple-opt .answers-wrapper ul.cols-4 li, .multiple-opt .answers-wrapper ul.cols-4-ul li, .multiple-opt .answers-wrapper ul.cols-5 li, .multiple-opt .answers-wrapper ul.cols-5-ul li, .multiple-opt .answers-wrapper ul.cols-6 li, .multiple-opt .answers-wrapper ul.cols-6-ul li, .multiple-opt .answers-wrapper ul.cols-7 li, .multiple-opt .answers-wrapper ul.cols-7-ul li, .multiple-opt .answers-wrapper ul.cols-8 li, .multiple-opt .answers-wrapper ul.cols-8-ul li, ul.cols-2 li, ul.cols-2-ul li, ul.cols-3 li, ul.cols-3-ul li, ul.cols-4 li, ul.cols-4-ul li, ul.cols-5 li, ul.cols-5-ul li, ul.cols-6 li, ul.cols-6-ul li, ul.cols-7 li, ul.cols-7-ul li, ul.cols-8 li, ul.cols-8-ul li {
            padding: 0 0.5em;
            margin: 0 0 0.5em;
        }

            ul.cols-2 li input.checkbox, ul.cols-2-ul li input.checkbox, ul.cols-2 li input.radio, ul.cols-2-ul li input.radio, ul.cols-3 li input.checkbox, ul.cols-3-ul li input.checkbox, ul.cols-3 li input.radio, ul.cols-3-ul li input.radio, ul.cols-4 li input.checkbox, ul.cols-4-ul li input.checkbox, ul.cols-4 li input.radio, ul.cols-4-ul li input.radio, ul.cols-5 li input.checkbox, ul.cols-5-ul li input.checkbox, ul.cols-5 li input.radio, ul.cols-5-ul li input.radio, ul.cols-6 li input.checkbox, ul.cols-6-ul li input.checkbox, ul.cols-6 li input.radio, ul.cols-6-ul li input.radio, ul.cols-7 li input.checkbox, ul.cols-7-ul li input.checkbox, ul.cols-7 li input.radio, ul.cols-7-ul li input.radio, ul.cols-8 li input.checkbox, ul.cols-8-ul li input.checkbox, ul.cols-8 li input.radio, ul.cols-8-ul li input.radio {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

    ul.cols-2 li, ul.cols-2-ul, table.cols-2 td {
        width: 49.9%;
    }

    ul.cols-3 li, ul.cols-3-ul, table.cols-3 td {
        width: 33.3%;
    }

    ul.cols-4 li, ul.cols-4-ul, table.cols-4 td {
        width: 24.9%;
    }

    ul.cols-5 li, ul.cols-5-ul, table.cols-5 td {
        width: 19.9%;
    }

    ul.cols-6 li, ul.cols-6-ul, table.cols-6 td {
        width: 16.6%;
    }

    ul.cols-7 li, ul.cols-7-ul, table.cols-7 td {
        width: 14.2%;
    }

    ul.cols-8 li, ul.cols-8-ul, table.cols-8 td {
        width: 12.4%;
    }


input.text, textarea {
    text-align: start;
}
/* STYLES NOT YET DEFINED - - - - -
.yes-no {}
.gender {}
*/


/* Tips / Validation Messages */
/* If the question is invalid, but has not been submitted, give it a pleasant warning color */

.hide-tip .good {
    display: none;
}

.hide-tip .error {
}

.input-error .hide-tip .error {
    display: block;
}




@keyframes ripple {
    0% {
        box-shadow: 0px 0px 0px 1px transparent;
    }

    50% {
        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
    }

    100% {
        box-shadow: 0px 0px 0px 15px transparent;
    }
}







.answers-wrapper input[type="radio"] {
    display: none;
}

    .answers-wrapper input[type="radio"]:checked + label:before {
        border-color: #969696;
        animation: ripple 0.2s linear forwards;
    }

    .answers-wrapper input[type="radio"]:checked + label:after {
        transform: scale(1);
    }

    .answers-wrapper input[type="radio"] + label {
        /*display: inline-block;*/
        height: 20px;
        position: relative;
        padding: 0 30px;
        margin-bottom: 0;
        cursor: pointer;
        vertical-align: bottom;
        box-sizing: border-box;
    }

        .answers-wrapper input[type="radio"] + label:before, .answers-wrapper input[type="radio"] + label:after {
            position: absolute;
            content: '';
            border-radius: 50%;
            transition: all .3s ease;
            transition-property: transform, border-color;
            box-sizing: border-box;
        }

        .answers-wrapper input[type="radio"] + label:before {
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(0, 0, 0, 0.54);
            box-sizing: border-box;
        }

        .answers-wrapper input[type="radio"] + label:after {
            top: 5px;
            left: 5px;
            width: 10px;
            height: 10px;
            transform: scale(0);
            background: #969696;
            box-sizing: border-box;
        }




.answers-wrapper input[type="checkbox"] {
    display: none;
}

    .answers-wrapper input[type="checkbox"]:checked + label:before {
        border-color: #969696;
        animation: ripple 0.2s linear forwards;
    }

    .answers-wrapper input[type="checkbox"]:checked + label:after {
        transform: scale(1);
    }




    .answers-wrapper input[type="checkbox"] + label {
        /*display: inline-block;*/
        height: 20px;
        position: relative;
        padding: 0 30px;
        margin-bottom: 0;
        cursor: pointer;
        vertical-align: bottom;
        box-sizing: border-box;
    }

        .answers-wrapper input[type="checkbox"] + label:before, .answers-wrapper input[type="checkbox"] + label:after {
            position: absolute;
            content: '';
            border-radius: 10%;
            transition: all .3s ease;
            transition-property: transform, border-color;
            box-sizing: border-box;
        }

        .answers-wrapper input[type="checkbox"] + label:before {
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(0, 0, 0, 0.54);
            box-sizing: border-box;
        }

        .answers-wrapper input[type="checkbox"] + label:after {
            top: 5px;
            left: 5px;
            width: 10px;
            height: 10px;
            transform: scale(0);
            background: #969696;
            box-sizing: border-box;
        }

.submit {
    font-family: 'Roboto', sans-serif !important;
    padding: 5px 15px !important;
    box-shadow: none !important;
}

#img_logo {
    max-width: 100%;
    height: auto;
}

#conexion {
    position: fixed;
    top: 10px;
    left: 50%;
}

    #conexion > span {
        position: absolute;
        left: -75%;
    }

#sinconexion {
    box-shadow: 0px 17px 17px rgba(0, 0, 0, 0.3);
    padding: 10px;
    max-width: 954px;
    margin: 0px auto;
    width: auto !important;
}

    #sinconexion > span {
        position: absolute;
        left: -50%;
    }

#sinconexiontiempo {
    box-shadow: 0px 17px 17px rgba(0, 0, 0, 0.3);
    padding: 10px;
    max-width: 954px;
    margin: 0px auto;
    width: auto !important;
}

    #sinconexiontiempo > span {
        position: absolute;
        left: -50%;
    }

div.header-portion {
    display: inline-block;
    width: 33% !important;
    min-height: 151px !important;
    text-align: center;
    overflow-x:auto;
}