/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/**************************************************************
  Notes for maintainers

  - This file overrides LimeSurvey template styles only
  - Core templates should not be edited directly
  - Font, spacing, and colour decisions are centralized
  - Change styles here to stay compatible with updates
**************************************************************/

/* ==========================================================
   BASE TYPOGRAPHY / FONTS / COLOURS
   ========================================================== */

html,
body {
    font-family: "BC Sans", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;            /* was 14px */
    color: #2b2b2b;
    background-color: #f6f6f6;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


/* Survey content lives inside .outerframe */
.outerframe {
    font-family: inherit;
    font-size: 14px;            /* was 16px */
    line-height: 1.42857143;
}

/* Manual hyphenation for consistent text wrapping */
p,
h1,
h2 {
    -webkit-hyphens: manual !important;
       -moz-hyphens: manual !important;
        -ms-hyphens: manual !important;
            hyphens: manual !important;
}

/* ==========================================================
   LINKS
   ========================================================== */

a,
a:visited,
a:link,
a:active {
    color: #1a5a96;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

/* ==========================================================
   HEADINGS
   ========================================================== */

h1,
.h1 {
    font-size: 24px;            /* was 26px */
    font-weight: 600;
}


.group-title h1,
.group-title h2,
.group-title h3 {
    margin-top: 0;
}


.group-title {
    text-align: left;
    font-size: 24px;            /* was 26px */
    margin-top: 10px;
    margin-bottom: 28px;
}

.question-title-container {
    color: white;
    font-size: 15px;            /* was 20px */
    background-color: #335c85;
}

/* ==========================================================
   NAVIGATION
   ========================================================== */

.navbar-default {
    background-color: #003366;
    border-color: transparent;
}

.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover {
    text-decoration: underline;
}

.navbar-brand {
    padding: 0;
}

ul.inline {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

ul.inline li {
    float: left;
    padding: 2px 10px;
}

ul.inline li a {
    color: white;
    display: block;
    text-align: center;
}

.logo {
    margin-right: 8px;
}

/* ==========================================================
   LAYOUT
   ========================================================== */

#main-col {
    margin: 1em;
}

#outerframeContainer,
#dynamicReloadContainer {
    margin-bottom: 30px;
}

/* Ensure hyphen rules apply to nested markup */
.outerframe div {
    -webkit-hyphens: manual !important;
       -moz-hyphens: manual !important;
        -ms-hyphens: manual !important;
            hyphens: manual !important;
}

/* ==========================================================
   WELCOME / INTRO
   ========================================================== */

#surveydescription,
#surveynametitle,
#welcome-container h1 {
    text-align: left;
/*    color: #494949; */
}


/* Fix: set paragraphs text colours */

body {
    color: #2b2b2b;
}


.survey-welcome.h4 {
    color: #2b2b2b;
    font-size: 14px;            /* was 16px */
    font-weight: 400;
    line-height: 1.5;
}

.survey-welcome strong {
    font-weight: 600;
}


.survey-description {
    color: #2b2b2b;
}


.jumbotron {
    padding: 20px 0;
}

/* ==========================================================
   QUESTION GROUPS
   ========================================================== */

/* Control spacing between groups */
.group-container.space-col {
    margin-top: 0;
    margin-bottom: 0;
}

/*--- Group description colour (removed)
.group-description {
   background-color: #ecf0f1;
    padding: 20px 60px 30px;
}
---*/

/* Group description text */
.group-description {
    font-size: 15px;            /* was 17px */
    line-height: 1.5;
}


.group-description.well { 
    border: none; /* hide the box*/
    padding: 10px 0;
}

.group-description.row {
    margin-left: 0;
    margin-right: 0;
}

.group-description a:hover {
    text-decoration: none;
}

/* ==========================================================
   QUESTIONS
   ========================================================== */

.question-container {
    margin-bottom: 10px; /* space between questions */
}

.questionvalidcontainer {
    text-align: left;
    background: #f1f1f2;
    padding: 10px 0;
}

.questionvalidcontainer .text-info {
    font-weight: normal;
    margin-left: 20px;
    padding: 8px 0;
}

.answer-container {
    background-color: white;
    padding-top: 1em;
}

.answer-container li {
    margin-bottom: 8px;
}

.answer-container tbody tr th,
.answer-container tbody tr td,
thead tr.ls-heading th,
thead tr.ls-heading td,
table.ls-answers {
    border: 0;
}

tbody tr.ls-odd {
    background-color: #f9f9f9;
}

tbody tr.ls-even {
    background-color: #ecf0f1;
}

.question-text a {
    color: #fcba19;
}

.question-text a:hover {
    text-decoration: none;
}

/* ==========================================================
   FORM CONTROLS
   ========================================================== */

.radio label::before,
.checkbox label::before {
    border: 1px solid #2C3E50 !important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-lg,
.btn-group-lg > .btn {
    padding: 6px 12px;
    font-size: 14px;            /* was 16px */
}

.btn-primary,
.btn-default,
.btn-info,
.btn-primary:visited,
.btn-default:visited {
    color: #ffffff;
    background-color: #003366;
    border-color: #003366;
}

.btn-primary:hover,
.btn-default:hover {
    background-color: #335C85;
}

.btn-info:hover {
    background-color: #337ab7;
}

/* ==========================================================
   PROGRESS
   ========================================================== */

.progress {
    height: 28px;
}

.progress-bar {
    background-color: #003366;
    font-size: 13px;            /* was 15px */
    line-height: 22px;
}

/* ==========================================================
   ALERTS / MODALS
   ========================================================== */

.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.alert-warning {
    background-color: #003366;
    border-color: #003366;
    color: #ffffff;
    font-weight: 400;
}

/*.alert-warning p {
    font-weight: 400;
}*/

.modal-header {
    background-color: #335C85;
    color: white;
}

/* ==========================================================
   FOOTER
   ========================================================== */

/* Respondent-visible footer styling */
#footer {
    background-color: transparent;
    border-top: 2px solid #fcba19;
}

#footerAdminSection {
    background-color: #003366;
}

#footerAdminLinks a {
    color: #ffffff;
}

/* ----------------------------------------------------------
   Admin / Preview Footer (admin users only)
---------------------------------------------------------- */

#footer.expanded {
    z-index: 1040;
}

#footer hr {
    background: none repeat scroll 0 0 #4b5e73;
    border: 0;
    height: 1px;
    margin: 10px 0;
}

#footer #footerWrapper {
    width: 100%;
    bottom: 0;
}

#footerAdminSection ul {
    clear: both;
    padding: 10px 0;
}

/* ==========================================================
   MOBILE RESPONSIVE
   ========================================================== */

@media only screen and (max-width: 760px),
       (max-device-width: 1024px) and (min-device-width: 768px) {

    .dual_scale_separator:after {
        width: 100%;
        min-height: 0;
        height: 1px;
        left: 0;
        margin: 14px 0;
    }
}

@media (min-width: 768px) {

    ul.inline li + li {
        border-left: 1px solid #4b5e73;
    }

    #footerMediaLinks ul {
        padding-top: 22px;
    }
}

/* Make images responsive on mobile */
img {
    max-width: 100%;
    height: auto !important;
}

/* TEST CODE 

* {
    outline: 1px solid red;
}

*/