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

.table-bordered > thead > tr > th {
    border: 1px solid #dadada;
}

.table-bordered > thead > tr > td {
    border: 1px solid #dadada;
}

body, html {
    min-height: 100%;
    height: 100vh;
    padding: 0;
}

.surveyContainer {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.articleContainer {
    flex-grow: 1;
}

.footerContainer {
    flex-grow: 0;
    color: #fff;
}

.footerContainer .row {
    padding-top: 5px;
    padding-bottom: 5px;
    background: #424242;
}

.footerContainer a:hover {
    text-decoration: none;
    color: #C4941D;
}

.footerContainer a {
    color: #fff;
}

.footerContainer .fa {
    padding-right: 5px;
}

@media (max-width: 768px) {

    #footerContact {
        margin-top: 35px;
    }

    #footerLinks {
        margin-top: 35px;
    }

    .img-responsive {
        height: auto;
        max-height: 100px;
        padding: 0 15px;
    }

    .footerContainer .row {
        padding-left: 5px;
    }
}

.btn-primary {
    background: #DAA520;
    border-color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #C4941D;
}

@media (min-width: 768px) {

    .d-md-none {
        display: none !important;
    }
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.navbar-default {
    background-image: linear-gradient(to right, white 30%, #f8f8f8 70%);
}

.progress .progress-bar {
    background-color: #DAA520;
}

h1, .h1 {
    font-size: 2.5em;
    margin-bottom: 1.75em;
}

h4, .h4 {
    font-size: 1.3em;
}

.survey-description,
.survey-welcome {
    line-height: 1.5em;
    text-align: left;
}

.survey-welcome,
.number-of-questions,
.survey-description {
    margin-bottom: 4.5em;
}

.text-primary,
.ls-questionhelp,
.ls-question-help {
    color: #424242;
}

.input-error .text-primary,
.input-error .ls-questionhelp,
.input-error .ls-question-help {
    color: #C81E0E;
}

.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background-color: #DAA520;
}

.answer-container .btn-primary:active:hover,
.answer-container .btn-primary.active:hover,
.answer-container .open>.dropdown-toggle.btn-primary:hover,
.answer-container .btn-primary:active:focus,
.answer-container .btn-primary.active:focus,
.answer-container .open>.dropdown-toggle.btn-primary:focus,
.answer-container .btn-primary:active.focus,
.answer-container .btn-primary.active.focus,
.answer-container .open>.dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: #DAA520;
    border-color: #C4941D;
}

label::after {
    background-color: #fff;
}

textarea, select, input, button, label,
textarea:focus, select:focus, input:focus, button:focus,
textarea:active, select:active, input:active, button:active,
textarea:active:focus, select:active:focus, input:active:focus, button:active:focus,
.btn, .btn:focus, .btn:active, .btn:active:focus,
.focus, .focus:focus, .focus:active, .focus:active:focus,
.active, .active:focus, .active:active, .active:active:focus {
    outline: none !important;
    box-shadow: none !important;
    max-width: 100%;
}

textarea:focus, select:focus, input:focus,
textarea:active, select:active, input:active,
textarea:active:focus, select:active:focus, input:active:focus {
    border: 1px solid #DAA520 !important;
}

.subquestion-list li input {
    margin-bottom: 15px;
}

label::before {
    outline: none !important;
}

.group-description.row {
    margin: 0 0 2em 0;
}

.survey-description,
.privacy .text-primary,
.survey-welcome.text-primary {
    color: #424242 !important;
}

.survey-welcome.h4 {
    font-size: 14px;
}

.surveys-list li.no-survey {
    padding: 1em 0;
}

.fa-lg {
    font-size: 1.7em;
    line-height: 1.5em;
}

.ls-questionhelp,
.ls-question-message {
    color: #DAA520;
}

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

input.numeric {
    width: 25%;
    min-width: 200px;
    max-width: 100%;
}

.row.input-error {
    background: #ffa;
}

code {
    color: #5b5b5b !important;
    background-color: #F4E3B8 !important;
}

#surveys-list-jumbotron img {
    width: 300px;
    max-width: 40%;
    margin-bottom: 2em;
}