/******************
    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
*/

/* Font */
@import url("https://fonts.googleapis.com/css?family=Century Gothic:400,700,400italic");
body {
    font-family: "Century Gothic", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Font color for titles */
.survey-description,
.survey-welcome,
.survey-end,
.privacy  
{
    color: rgb(68,68,68) !important;
}

/* Reset some overrides done in Fruity */
.fruity .text-info {
    color: #31708f;
}
.fruity .text-primary {
    color: #337ab7;
}

.text-warning {
  color: #d77840; 
}
.text-warning:hover {
    color: #924a1f; 
}

/**
 * Navigation bar 
 */
 
.navbar-default {
    background-color: #fafafa;
    border-color: transparent;
}

img.logo.img-responsive.footer {
    align-items: center;
    margin: 0 auto;
    width:125px;
    display: block;
}

.navbar-default .navbar-nav>li>a,
#navbar .navbar-nav>li>a {
    color: #922626b8;
}

.navbar-default .navbar-nav>li>a.btn.btn-default,
#navbar .navbar-nav>li>a.btn.btn-default {
    padding: 5px;
    margin: 10px;
    margin-top: 0px;
}

/**
 * Progress Bar
 */
.progress-bar {
   background-image: linear-gradient(to bottom right, #E17B00, #985402); /* Standard syntax (must be last) */
}

.top-container {
    margin-top: 12px;
}
.top-container .progress {
    /* margin-top: -52px; */
    height: 21px;
    margin-bottom: 0;
}

/**
 * Others and Containers
 */

.questionpage-survey-description-container {
    width: 100%;
    display: flex;
}
.questionpage-survey-description-container p,
.questionpage-survey-description-container div {
    width: 100%;
    text-align:center;
}

.space-col {
    margin-top: 0.7em;
    margin-bottom: 0.5em;
}

.completed-wrapper {
    margin-bottom: 3rem;
    padding: 3rem 1.5rem;
    border-radius: 4px;
    border: 1px solid rgba(102, 102, 102, 0.35);
    background-color: rgba(255, 255, 255, 0.5);
    padding: 3rem;
}

#main-col {
    /* margin-top: 0; */
}

/**
 * Group
 */
.group-outer-container.space-col,
.group-container.space-col {
    margin-top: 0 !important;
}

.group-title {
    font-weight: bold;
    border-bottom: 1px solid #999;
    padding-bottom: 5px;
}

.group-title.space-col {
    margin-top: 0.3em;
    margin-bottom: 0.4em;
}

.group-description {
    color: rgb(107, 92, 79);
    font-size: 1.2em;
}

.group-description.space-col {
    margin-top: 0.3em !important;
}

/**
 * Questions
 */

.question-container:last-of-type {
    margin-bottom: 10px !important;
}

.ls-label-question{
    font-size: 16px;
}

.ls-label-question p {
    margin-bottom: 0px;
}

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

.question-title-container {
    background-color: #eee;
    color: #333;
    padding-bottom: 0.5em;
}

.question-help-container {
    margin-top: -0.5em;
    background: #eee;
    color: rgb(225,123,0);
}

.question-valid-container {
    background: #eee;
    color: rgb(225,123,0);
}

.fruity .question-valid-container.text-info,
.fruity .question-help-container.text-info {
    color:rgb(225,123,0)!important;
}
.fruity .question-valid-container.text-primary,
.fruity .question-help-container.text-primary {
    color:rgb(252, 152, 30);
}

/**
 * Answers and Controls
 */
.ls-answers {
    padding-top: 5px;
    padding-bottom: 5px;
} 
.fruity .question-item {
    padding-top: 0.3em;
}
.form-group {
    margin-bottom: 0.2em;
}
.list-unstyled {
    margin-bottom: 5px;    
}
li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    margin-bottom: 0.2em;
}
/**
 * Radio and checkbox
 */
.checkbox-item input[type="checkbox"]:checked+label::after, .checkbox-item input[type="radio"]:checked+label::after {
    background-color: #924a1f;
    color: white;
}

.radio-item  label::after,
.checkbox-item label::after {
    background-color: #985402 !important;
    color: #FFF;
}

/**
 * Multiple Short text
 */
@media (min-width: 768px)
{
.form-horizontal:not(.questions-list) .control-label {
    text-align: left;
    width: auto;
} 
}

/**
 * Buttons
 */
 
.fruity .btn-primary {
    color: #fff;
    background-color: #924a1f;
    border: 1px solid #ca7208;
}

.fruity .btn-primary[disabled] {
    background-color: #924a1f !important;
    border: 1px solid #ca7208;
}

.fruity .btn-primary:hover, .fruity .btn-primary:focus, .fruity .btn-primary:active, .fruity .btn-primary.active, .fruity .btn-primary.active:focus, .fruity .open .dropdown-toggle.btn-primary,
.fruity .btn-default:hover, .fruity .btn-default:focus, .fruity .btn-default:active, .fruity .btn-default.active, .fruity .open .dropdown-toggle.btn-default
{
    color: #fff !important;
    background-color: #924a1f !important;
    border: 1px solid #924a1f !important;
}

.fruity .btn-default {
    background-color: rgba(255,255,255,0.2);
    border: 1px solid #924a1f;
    color: #924a1f;
}

#navigator-container > div {
    padding: 10px;
}

/* Make button from start page to be centered */
#welcome-container~#navigator-container #ls-button-submit {
  margin-left: -70px;
}

/* Hide welcome title */
#welcome-container > .survey-name {
    display: none;
}

/**
 * Others Misc
 */

/* Make text inputs to have orange border when focused */
.fruity .form-control:focus {
    border: 1px solid rgb(225,123,0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgb(225, 123, 0);
}

.fruity .button-item.btn-primary {
    background: rgb(127, 97, 79) !important;
    border: 1px solid rgb(127, 97, 79) !important;
}

.fruity .button-item.btn-primary.active {
    background: rgb(225, 123, 0) !important;
    border: 1px solid rgb(225, 123, 0) !important;
}