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

/***** exchange key color for progress, buttons, etc. *****/
.fruity .progress-bar{
    background-color: #2c77a2;
}
.fruity .text-primary{
    color: #2c77a2!important;
}
.fruity .text-info{
    color: #2c77a2!important;
}
.fruity .form-control:focus {
    border: 1px solid #2c77a2;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(21,95,137,0.3); /*rgba(0,179,152,0.3)*/
}
.fruity .radio-item input[type="radio"]:checked + label::after {
    background-color: #2c77a2;
}

/* regular btn */
.fruity .btn{
    border-color: #2c77a2;
    color: #2c77a2;
}
.fruity .btn:hover{
    border-color: #155f89; /*rgb(0, 122, 104);*/
    color: #155f89;
    background-color: rgba(21, 95, 137,0.1);
}

.fruity a{
    color: #2c77a2;
}

/* slider */
.fruity .slider-selection{
    background-image: none;
    background-color: #2c77a2;
}
.fruity .slider-handle{    
    background-color: #2c77a2;
    width: 36px;
    height: 36px;
}

.slider.slider-horizontal{
    height: 40px; /* was 20 px -> increase touch target for moving slider to position */;
    margin-top: -8px; /* re-position bigger slider touch target */
}

.slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle{
    margin-top:0px; /* 0 for handle size 20x20px and original touch target of 20px */
    margin-left: -18px; /* should be half the handle size */
}

/* checkbox */
.checkbox-item input[type="checkbox"]:checked + label::after{
    background-color: #2c77a2;
}

/* primary btn */
.fruity .btn-primary, .fruity .btn-info{
    background-color: #2c77a2;
    border-color: #2c77a2;
    color: #fff;
}
.fruity .btn-primary:hover{
    /*background-color: rgb(0, 124, 106);*/
    background-color: rgb(21, 95, 137); /*#155f89*/
    border-color: rgb(42, 117, 160);
    color: #fff;
}
.fruity .btn-primary:focus{
    background-color: #194a66;
    border-color: #155f89;
}

/* language switcher */
.fruity .navbar-toggle{
    border: 1px solid #2c77a2;
}
.fruity .navbar-toggle .icon-bar{
    background-color: #2c77a2;
}
.fruity .navbar a.animate::after{
    background-color: #2c77a2;
}
.fruity .nav .open > a{
    background-color: #2c77a2;
}
.fruity .nav .open > a:focus{
    text-decoration: none;
    background-color: #2c77a2;
}
.fruity .nav .open > a:hover{
    text-decoration: none;
    background-color: #2c77a2;
}
.fruity .dropdown-menu > li > a:focus {
    text-decoration: none;
    background-color: #2c77a2;
}
.fruity .dropdown-menu > li > a:hover{
    background-color: #2c77a2;
}

/* fine tuning */
#main-col{
    max-width: 800px;
}
.question-container{
    background-color: #fbfbfb;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 2px rgba(0,0,0,.15);
    margin-bottom: 40px;
}
.text-danger.fa.fa-asterisk.small{
    color: #2c77a2;
    margin-right: 10px;
}
.ls-label-question{
    font-size: 1.13em
}
.answers-list{
    margin-left: 5px;
}
.ls-questionhelp{
    margin-bottom: 10px;
}

.fruity .survey-description.text-info{
    color: #333;
}

/* error highlighting */
.fruity .question-container.input-error{
    border: 1px solid rgba(169,68,66,0.9);
    box-shadow: 0 0 3px rgba(169,68,66,0.5);
}

/* usability improvement / larger touch targets */
.radio-item label{
    display: block;
}
.answer-item.numeric-item.withsuffix{
    max-width: 150px;
}
.form-control.numeric{
    max-width: 150px;
    text-align: left;
}
.fruity select.form-control{
    font-family: 'Noto Sans', sans-serif;
}

.slider-container .tooltip{
    visibility: hidden;
}

#welcome-container{
    margin-top: 50px;
}
#welcome-container .text-center{
    text-align: left;
    margin-top: 20px;
}

#welcome-container .text-primary{
    line-height: 1.3em;
}

#img-footer{
    margin: 20px;
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid #ededed;
}
#img-footer .logo{
    display: block;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.header-banner-image{
    width: 100%;
    margin-bottom: 30px;
}

/* privacy message */
.privacy{
    background-color: #fafafa;
    font-size: 0.9em;
    padding: 12px 20px;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 40px;
    opacity: 0.8;
}

/* navigation */
#navigator-container .text-left{
    text-align: center;
}
#navigator-container .text-right{
    text-align: center;
}
#navigator-container.btn_prev_disabled .text-left{
    width: 0px;
}
#navigator-container.btn_prev_disabled .text-right{
    width: 100%;
    text-align: center;
}

@media (min-width: 769px) {
    .slider-list .slider-left, .slider-list .slider-right {
        margin-top: .5em;
    }
    .col-sm-2{
        white-space: nowrap;
    }
    
}

/* bug fix for hard-coded bright pink color on span in question label / hint text */
.ls-label-question span {
  color: #444 !important;
}

/* remove large space between image and slider for bikeability rating questions */

div.numeric-multi div.answer-container ul.slider-list li label.control-label{
    margin-top: 0;
    margin-bottom: 0;
}



/*** ADDITIONAL STYLES FOR SAFARI PROJECT - GROUP TITLES IN TOP BAR ***/

.navbar-header button{
    z-index: 2020;
}
.navbar-header a{
    z-index: 2020;
}
.navbar-header .logo{
    z-index: 2020;
}

.grp_title{
    position:fixed;
    top:10px;
    font-size: 1.5em;
    z-index: 2010;
    font-style: italic ;
    color: #555;
    max-width: 800px;
}
@media only screen and (max-width: 768px){
    #survey-nav{
        height: 105px;
    }
    .navbar-nav .nav-link {
        position: fixed;
        top:62px;
        z-index: 2020;
    }
    .grp_title{
        position:fixed;
        top:2px;
        left:20%;
        font-size: 1em;
        z-index: 2010;
        max-width: 75%;
        padding: 0px 5px 5px 5px;
        top:52px;
        transform: translate(0%, -50%);
    }
}
@media only screen and (min-width: 769px) and (max-width: 1190px){
    #survey-nav{
        height: 80px;
    }
    .grp_title{
        position:fixed;
        left:25%;
        font-size: 1em;
        z-index: 2010;
        max-width: 50%;
        padding: 0px 5px 5px 5px;
        background-color: #fff;
        top:40px;
        transform: translate(0%, -50%);
    }
}


/* re-style headers (for use in questions) */
h3.vgroup {
    font-size: 1.6em;
}
p.pers_descr {
    font-size: 1.2em;
}
h3.instruction-box {
    font-size: 1.4em;
}


/* additional fixes for LimeSurvey Upgrade (V6) */

.popover-header{
    margin-top: 0;
}