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

/*.h3 {*/
/*    text-align: left;*/
/*    font: Medium 22px/27px 'Lato';*/
/*    letter-spacing: 0px;*/
/*    color: #333333;*/
/*    opacity: 1;*/
/*}*/

/*.container-fluid {*/
/*    background: #F5F5F5 0% 0% no-repeat padding-box;*/
/*    opacity: 1;*/
/*}*/

/*.control-label {*/
/*    text-align: center;*/
/*    font: Heavy 21px/22px 'Lato';*/
/*    letter-spacing: 0px;*/
/*    color: #72B444;*/
/*    opacity: 1;*/
/*}*/


h1, h2, h3, h4, h5, h6, p, div, label, span, button, li, ol, ul {
    font-family: 'Lato', sans-serif;
}

p, p span {
    font-size: 18px;
    color: #333;
}


a,
a:hover {
    color: #1a85c2;
}

h1.survey-name {
    font-size: 30px;
    margin-bottom: 20px;
    display: none;
}

#main-row {
    margin-top: 50px;
}

#welcome-container {
    margin-top: 50px;
    margin-bottom: 50px;
}

.survey-welcome {
    max-width: 100%;
    /*width: 700px;*/
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 1.4em;
    font-size: 18px;
}

.survey-welcome.h4.text-primary {
    padding-top: 20px;
}

/* Language */
.ls-language-changer-item,
.ls-language-changer-item:hover {
    text-align: center; 
    text-decoration: none;
    color: #333;
    font-weight: bold;
    border-radius: 10px;
    border: 1px solid #333;
    margin-left: 10px;
    background-color: transparent;
}

.form-change-lang.form-inline {
    background-color: #f7f7f7f7;
    border: 1px solid #e3e3e3;
    padding: 15px 30px;
    border-radius: 10px;
    margin-top: 30px;
}


/* Nav Bar */
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {
    color: #1a85c2;
    text-decoration: underline;
    line-height: 60px;
}

.logo-container>img {
    max-height: 140px;
}

.navbar-default .navbar-nav>li>a, 
.navbar-default .navbar-nav>li>a:hover {
    line-height: 110px;
}

/* Title  */
.group-title {
    font-size: 40px;
    margin-bottom: 50px;
}

/* Question  */

.question-container {
    padding: 20px 50px;
    border-radius: 3px;
    border: 1px solid #e3e3e3;
    background-color: #f7f7f7;
}

.question-title-container {
    padding-bottom: 0px;
}

.ls-question-message {
    color: #1a85c2;
}

.col-sm-2 {
    width: auto !important;
}

.question-text {
    font-size: 20px;
    clear:both;
    margin-bottom: 10px;
}

.question-code {
    display: block;
    clear: both;
    margin: 0;
}

th.answer-text.noanswer-text {
    white-space: nowrap;
    width: 100px;
}

.control-label {
    font-weight: bold !important;
    color: #333;
}

td.answer_cell_.noanswer-item.answer-item.radio-item {
    width: 100px !important;
}

.ls-answers label:focus {
    outline: none;
}   


.form-control:focus {
    outline: none;
    border: 1px solid #1a85c2 !important;
    box-shadow: none !important;
}

.form-control {
    color: #333;
}

.radio-item input[type="radio"]:focus + label::before {
    outline: none;
}

.radio-item label::after {
    background-color: #333;
}

/* Required Question*/
.asterisk .fa-asterisk {
    float: right;
    color: #1a85c2;
}

.asterisk.pull-left {
    float: left !important;
    position: absolute; 
    left: -4px;
    top: 17px
}

/* Question Table */
table.ls-answers {
    table-layout: auto !important;
}

.checkbox-item label::after {
    background-color: transparent;
}

.checkbox-item label::before {
    border-color: #333;
    border-color: #1a85c2;
}

.checkbox-item label::after {
    background-color: #1a85c2;
    color: white;
    border: none !important;
    border-radius: unset;
}

.checkbox-item input[type="checkbox"]:focus + label::before, 
.checkbox-item input[type="radio"]:focus + label::before {
    outline: none !important;
}

/* Buttons */
.bootstrap-buttons-div label {
    font-weight: bold !important;
}

.button-item {
    padding: 13px 30px 10px;
    line-height: 1em;
    transition: all 0.2s ease-out;
}

.btn-default,
.btn-default:hover,
.btn-primary,
.btn-primary:hover {
    background-color: transparent;
    border-color: #1a85c2;
    border-radius: 10px;
    color: #1a85c2;
    box-shadow: none;
}

.group-outer-container .btn-primary:active,
.group-outer-container .btn-primary:focus,
.group-outer-container .btn-primary.active,
.group-outer-container .btn-primary.active:focus,
.group-outer-container .btn-primary.active.focus,
.group-outer-container .btn-primary.active:hover {
    background-color: #1a85c2 !important;
    border-color: #1a85c2 !important;
    color: #fff !important;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary.active,
.btn-primary.active:focus,
.btn-primary.active.focus,
.btn-primary.active:hover {
    outline: none !important;
    border-radius: 10px !important;
}

.btn-primary:hover,
.btn-primary.active:hover,
.btn-primary:hover label {    
    cursor: pointer;
    outline: none;
    border-radius: 10px;
}

.ls-move-btn,
.ls-move-btn:hover,
.ls-move-btn:active {
    background-color: #333;
    border-color: #333;
    color: #fff;
    font-weight: bold;
    padding: 13px 30px;
}

#ls-button-submit:focus {
    background-color: #333;
    border-color: #333;
}

/* Progress Bar */
.top-container .progress {
    height: auto;
    background-color: #f7f7f7;
    box-shadow: none;
    border-radius: 10px;
    border: 1px solid #1a85c2;
}

.progress .progress-bar {
    padding: 10px 5px;
    background-color: #1a85c2;
    box-shadow: none;
    font-weight: bold;
}

.top-container .container-fluid {
    background-color: transparent;
    width: 1140px;
    max-width: 95%;
}

/* Terms & Conditions */
input[type="checkbox"]:after, .checkbox input[type="checkbox"]:after, 
.checkbox-inline input[type="checkbox"]:after {
    border-color: #333;
    width: 20px;
    height: 20px;
}

input[type="checkbox"]:checked:before, .checkbox input[type="checkbox"]:checked:before, 
.checkbox-inline input[type="checkbox"]:checked:before {
    color: #333;
    transform: initial;
    font-family: "FontAwesome";
    content: "\f00c";
    left: 2px;
}

input[type="checkbox"]:focus:after, .checkbox input[type="checkbox"]:focus:after, 
.checkbox-inline input[type="checkbox"]:focus:after {
    border-color: #333;
}

#data-security-modal- {
    margin-top: 30px;
}

.panel-footer button.btn.btn-primary, .panel-footer button.btn.btn-default {
    font-weight: bold;
    border-radius: 10px;
    padding: 7px 20px;
    background-color: transparent;
    border-color: #1a85c2;
    border-radius: 10px;
    color: #1a85c2;
    box-shadow: none;
    margin-right: 10px;
}

.btn-primary[disabled]:hover {
    background-color: #333;
    border-color: #333;
}

/* NPS explanation */
#ls-question-text-156514X13X104 ul {
    margin-left: 0;
    display: block;
    float: left;
    position:  relative;
    left: -40px;
}

#ls-question-text-488548X1X1 ul li {
    float: left;
    margin-right: 15px;
    list-style: none;
    padding: 0 10px 10px 0;
}

.sortable-list {
    border: 1px solid #1a85c2;
}

li.grabable:before {
    content: "\f142";
    font-family: FontAwesome;
    margin-right: 15px;
    color: #333333b8;
}

.modal-header button.close {
    color: rgba(51, 51, 51, 0.5);
    font-size: 32px;
    opacity: 1;
    padding: 2px;
}

.modal-header .close {
    margin-top: -10px;    
}

.modal-header, 
.modal-footer {
    border: none;
}

button.close:focus {
    outline: none;
}

#surveyListFooter {
    display: none;
}

#surveys-list-jumbotron {
    display: none;
}

.ls-questionhelp {
    margin-top: 15px
}

.ls-questionhelp p, 
.ls-questionhelp span {
    font-size: 14px !important;
    line-height: 1.4em !important;
    color: #333 !important;
    font-family: 'Lato', sans-serif !important;
    font-style: italic;
}

.dir-ltr .ls-questionhelp:before {
    top: 0px;
}