/**************************************************************************************************/
/******************************************* DESKTOP CSS *****************************************/
/************************************************************************************************/


/* --------------------------- Intro Text (Comment Page) CSS -------------------------------------- */
.exit-message-header {display: none;}
.exit-message-text {font-size: 12px !important;}

.survey-info {
    background-color: #cf6;
    color: #454545;
    font-size: 1rem;
    margin-bottom: 3em;
    font-family: Arial,sans-serif;
}

.comment-text {
    font-weight: normal;
    font-size: 14px;
    color: #333333;
    font-family:  verdana;
}

.question ul li, .comment ul li {
    list-style: disc;
}

.sub_q {
    font-size: 12px;
    font-style: italic;
}

ul li {  margin-left: 20px;}

/* --------------------------- Top Error Box -------------------------------------- */

.survey-error {
    padding: 0.5em;
    margin-bottom: 2.5em;
    background-color: #ef2626;
    color: #fff;
    font-size: 1.2rem;
    font-family: Arial,sans-serif;
    font-style: italic;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin-top: -30px;
    }

/* --------------------------- Question Error (Validation) CSS -------------------------------------- */

.question-error {
    margin: 1em 0;
    background-color: transparent;
    color: red;
    font-size: 1.0em;
    font-family: verdana;
    font-style: italic;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    
}

.autosave-restart {
    background-color: #cf6;
    color: #454545;
    font-size: 1rem;
    font-family: Arial,sans-serif;
    text-align: center;
    text-decoration: none;
    margin-bottom: 30px;
}

/* --------------------------- Button Select -------------------------------------- */

.sq-atm1d .sq-atm1d-hovered {
    background-color: #20d6c9 !important;
    border-color: transparent;
    color: #fff;
}

.sq-atm1d .sq-atm1d-button {
    background-color: #ffffff;
    border-color: #475369;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #000;
    font-family: Arial,sans-serif;
    font-size: 1.1rem;
    list-style-position: outside;
    list-style-type: none;
    padding: 3px 8px;
}

.sq-atm1d .sq-atm1d-selected {
    background-color: #20d6c9 !important;
    border-color: transparent;
    color: #fff;
}

.sq-atm1d-show-input-1 .sq-atm1d-vertical .sq-atm1d-icon-left, .sq-atm1d-show-input-2 .sq-atm1d-vertical .sq-atm1d-icon-left {
    display: none;
    width: 1.65em;
}
.sq-atm1d-vertical .sq-atm1d-td, .sq-atm1d-vertical .oe {
    text-align: left;
}

.sq-atm1d-open .sq-atm1d-openEnd {
    display: inline-table;
    margin: 0;
}

/* --------------------------- Survey Page / Back Groud CSS -------------------------------------- */

.survey-page {
        display: block!important;
        background: url("https://au.focusvision.com/survey/selfserve/5e1/200200/PP_Blue_BG_1.jpg");
        background-repeat: repeat-y;
        background-size: cover;
        background-attachment: fixed;
}

    .survey-header {
    margin-bottom: -1.5em;
    min-height: 0 !important;
    }

.survey-body {
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 0;
    margin-top: -20px;
    border-top: 85px solid #475369;
    border-bottom: 65px solid #475369;
}

/* --------------------------- Survey Button -------------------------------------- */

.survey-buttons {
    padding-right: 1em;
    text-align: center;
    margin-bottom: -68px;
}


.button, .button.back, .button.randomize {
    background-color: #20D6C9;
    color: #fff;
    font-size: 115%;
    font-family: verdana;
    border: 1px solid transparent;
    -webkit-box-shadow: 1px 1px 2px rgba(105,106,105,.8);
    -moz-box-shadow: 1px 1px 2px rgba(105,106,105,.8);
	box-shadow: 1px 1px 2px #696a69;
    box-shadow: 1px 1px 2px rgba(105,106,105,.8);
	-moz-appearance: none;
	-webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    cursor: pointer;
    padding: .7em 1em;
    margin: .111em;
}

.button:hover, .button:focus, .button.back:hover, .button.randomize:hover{
    background-color: #20D6C9;
    border-color: transparent;
    color: #fff;
}


.question ul, .comment ul, .question ol, .comment ol {
    padding: 0 0 0 0;
    margin-bottom: 7px;
}

.footer {
    color: #454545;
    font-size: 1rem;
    font-family: Arial,sans-serif;
    text-align: center;
    margin: 1em 0;
}
/* --------------------------- Question CSS -------------------------------------- */

.question {
    background: 0 0;
    margin-top: -2em;
    margin-bottom: 5.5em;
    clear: both;
    border: 0 none transparent;
    padding: 0;
}

.question-text {
    font-weight: normal;
    font-size: 115%;
    color: #333333;
    font-family: verdana;
}

.answers-list {
    font-weight: normal;
    font-size: 12px;
    color: #333333;
    font-family: verdana;
}


html:not(.lte-ie9) .fir-select .input.dropdown {
    min-width: 100px;
    font-family: arial;
    font-size: 1em;
    background: #fff;
    color: #444;
    padding: .5em 1.1em .5em .5em;
    white-space: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
    border-radius: .25em;
    cursor: pointer;
}

/* ****To Make Grid Mobile Compatible CSS**** */

.grid.grid-table-mode {
    font-weight: normal;
    font-size: 12px;
    color: #333333;
    font-family: verdana;
}

.grid-table-mode .nonempty {
    padding: 7px;
}


/* --------------------------- Respondent Instruction CSS -------------------------------------- */

.instruction-text {
    font-weight: normal;
    font-size: 1em;
    color: #20D6C9;
    font-family: verdana;
    font-style: italic;
    margin-top: 2%;
    margin-bottom: 2%;
}

/* --------------------------- Progress Bar -------------------------------------- */


.progress-bar {

    text-align: right;
    float: right;
    width: 25%;
    /* padding: 48px; */
    margin-top: -87px;
}

.progress-text {
    color: #ffffff;
    font-family: Arial,sans-serif;
    font-size: 1rem;
    line-height: 1em;
    padding-left: .5em;
}

.progress-box-outer {
    background-color: #E6E6E8;
    /*border: 1px solid #E6E6E8;*/
    width: 100%;
    max-width: calc(100% - 4em);
    text-align: right;
    height: 0.9em;
    display: inline-block;
    /*border-radius: 15px !important;*/ 
}

.progress-box-completed {
    background-color: #20D6C9;
    width: 0;
    height: 100%;
    display: block;
    /*border-radius: 15px !important;*/
}

/* --------------------------- LOGO CSS -------------------------------------- */

.logo-image {
    max-height: 5em;
    margin-top: -75px;
    margin-left: 9px;
    margin-bottom: 50px;
}

/* --------------------------- Slider -------------------------------------- */

.sq-sliderpoints .sliderpoints_legend_ul .sliderpoints_slider_li, .sq-sliderpoints .sliderpoints_legend_ul .sliderpoints_circleLegend_li, .sq-sliderpoints .sliderpoints_legend_ul .sliderpoints_legend_li {
    list-style: none;
    display: inline-block;
    position: relative;
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* --------------------------- Button Rating -------------------------------------- */

.atmrating-btn {
    background-color: #475369 !important;
    color: #ffffff;
}

.atmrating-hover, .atmrating-selected {
    background-color: #2bbdb9!important;
    color: #ffffff;
}

.sq-atmrating.hasRows .sq-atmrating-row-legend {
    font-size: 16px;
    margin-bottom: 18px;
    text-align: center;
}

.sq-atmrating .atmrating_leftPosition {
    /*padding-left: 25px;*/
    text-align: left;
    /* width: 33.33%; */
    font-size: 15px;
}

.sq-atmrating .atmrating_rightPosition {
    /*padding-right: 25px;*/
    text-align: right;
    /* width: 33.33%; */
    font-size: 15px;
}
.sq-atmrating .atmrating_midPosition {
    text-align: center;
    /*padding-left: 7px;
    padding-right: 7px;*/
    /* width: 33.33%; */
    font-size: 15px;
}

/* --------------------------- Card Sort -------------------------------------- */

.sq-cardsort-progress {text-align: center;}

.sq-cardsort-buckets .sq-cardsort-bucket {
    background: #fff;
    border: 1px solid #475369 ;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #000;
    font-family: Arial,sans-serif;
    font-size: 1rem;
}

.sq-cardsort-buckets .sq-cardsort-bucket.sq-cardsort-state-hovered {
    background: #20d6c9;
    border: 2px solid #475369 ;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #000;
    font-family: Arial,sans-serif;
    font-size: 1rem;
}

.sq-cardsort-buckets .sq-cardsort-bucket.sq-cardsort-state-selected {
    background: #475369;
    border: 1.5px solid #475369 ;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #fff;
    font-family: Arial,sans-serif;
    font-size: 1rem;
}

.sq-cardsort-cards-view .sq-cardsort-previous, .sq-cardsort-cards-view .sq-cardsort-next {
    background: #ffffff;
    border-color: transparent;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    color: #475369;
    font-family: Arial,sans-serif;
    font-size: 1.5rem;
    height: auto;
    width: auto;
}

.sq-cardsort-cards-view .sq-cardsort-previous.sq-cardsort-state-hovered, .sq-cardsort-cards-view .sq-cardsort-next.sq-cardsort-state-hovered {
    background: transparent;
    border-color: transparent;
    color: #000;
}

/* --------------------------- Ranksort -------------------------------------- */

.sq-ranksort-container .sq-ranksort-cards .sq-ranksort-card {
    background-color: #20d6c966 !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

.sq-ranksort-container .sq-ranksort-buckets .sq-ranksort-card.sq-ranksort-card-dropped {
    background-color: #2bbdb9 !important;
    border-color: #ffffff;
    color: #ffffff;
}

.sq-ranksort-container .sq-ranksort-cards .sq-ranksort-card.sq-ranksort-card-dropped.ui-draggable-disabled.ui-state-disabled {
    background-color: #e9dddd !important;
}
/* --------------------------- Card Rating -------------------------------------- */

.sq-cardrating-button {
    background-color: #20d6c9;
    border-color: #20d6c9;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #000;
    font-family: Arial,sans-serif;
    font-size: 1rem;
    vertical-align: top;
}

.sq-cardrating-button[data-hovered] {
    background-color: #2c3340;
    border-color: transparent;
    color: #fff;
}

.sq-cardrating-button[data-selected] {
    background-color: #2c3340;
    border-color: transparent;
    color: #fff;
}

.sq-cardrating-bar {
    width: 20%;
    background: #20d6c9;
}

.sq-cardrating-bar[data-active] {
    background-color: #20d6c9;
    opacity: 1;
}

.sq-cardsort-icon-button {  background: Gray;}

/* --------------------------- Star Rating -------------------------------------- */

.sq-starrating-stars .sq-starrating-star-highlighted {
    color: #20d6c9 !important;
}

.sq-starrating-stars .sq-starrating-star {
    color:  #20d6c9 !important;
}



/**************************************************************************************************/
/******************************************* MOBILE CSS ******************************************/
/************************************************************************************************/

@media (max-width: 768px)
{
   input[type=text] {
    width: 50% !important;
    }

    .logo-image {
    max-height: 8em;
    margin-top: -75px;
    margin-left: -7px;
    margin-bottom: 50px;
    }

    .survey-header {
    margin-bottom: -1.5em;
    min-height: 0 !important;
    }
    .survey-body {
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 0;
    margin-top: 1px !important;
    border-top: 68px solid #475369;
    }


    .instruction-text {
    font-weight: normal;
    font-size: 1em;
    color: #20D6C9;
    font-family: verdana;
    font-style: italic;
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 7px;
    margin-left: -7px;
    }

.progress-bar {
    text-align: right;
    float: right;
    width: 40%;
    /* padding: 48px; */
    margin-top: -85px !important;
    margin-right: -12px;
    }

[data-viewsize=small] [data-viewmode=horizontal] .sq-cardrating-button {
    height: auto;
    text-align: center;
}

[data-fullwidth] .sq-cardrating-content {
  font-size: 16px;
}

}


/**************************************************************************************************/
/******************************************* CUSTOM SETUP CSS ************************************/
/************************************************************************************************/

/* --------------------------- Light Box / Onclick Zoom -------------------------------------- */

.lightbox {
    /** Default lightbox to hidden */
    display: none;

    /** Position and style */
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
	background: #000000;
    background: rgba(0,0,0,0.8);
}

.lightbox img {
    /** Pad the lightbox image */
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}

.lightbox:target {
    /** Unhide lightbox **/
    display: block;
}

.lightbox:focus {
    /** Remove default browser outline */
    outline: none;
    border: 1px solid black;
}

/* --------------------------- Hower -------------------------------------- */

a.tooltip:focus {border: 1px solid black; outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index: 0;
    display: none;
    width: 40%;
    padding: 0 0;
    /* margin-top: -30px; */
    /* margin-left: 28px; */
    line-height: 16px;
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #696a69; background:#e6e6e6; padding: 10px;}



    
/*CSS3 extras*/

a {
    color: #333333;
}