@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:300,700,500');
@media all {
    html { font-size:17px; }
    body, td, select, input, textarea, button { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:1em; }
    h1, h2, h3 { font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; }
    .page-width { max-width:860px; }
    p.intro { font-size: 1.12em; font-weight: 600; line-height: 1.35em; }
    button, a.btn { background: #5c9e5c; color: #fff; border-color:#5c9e5c; font-size:1em; }
    button[disabled] { background: #777; color: #fff; border-color:#777; opacity:.7; cursor:default; }
    header { padding:0; border:0; }
    #main-nav { float: none; text-align: center; background: #004467; color: #fff; }
    #main-nav .nav-list { justify-content: center; }
    #logo { max-width: 330px; display: block; margin: 1em auto; }
    #user-widget { right: 2em; position: absolute; }
    #user-nav-trigger { background: #788fa3; }
    main { padding-top: 10em; }
    .rich-text, p { line-height: 1.5em; }
    .rich-text a, .form-list a, main .page-width a:not(.btn) { font-weight: 400; color: #788fa3; }
    .default-content .image-right, .default-content .image-left { margin-top:.75em; }
    #questionnaire li.question.not-answered::before { background: #bd3a24; }
    #questionnaire li.question form input:not([type="radio"]):not([type="checkbox"]) { outline-color: #ffc157; }
    #questionnaire li.question.not-answered p.tip { color: #bd3a24; }
    .block-list li.questionnaire span::before { background-color: #b4c2ce; }
    #questionnaire-progress span { background-color: #5c9e5c; }
    .block-card-list li a::before { background-color: #788fa3; }
    #first-page { background-color: #004467; }
    .chart-background { background-color: #efefef; }
    .chart-donut-element { background-color: #788fa3; }
    .chart-radar-element { background-color:rgb(120, 143, 163); }
    .bar { background-color: #efefef; }
    .bar span { background-color: #788fa3; }

}

@media(min-width:768px) {
    #main-nav .nav-list>li a:not(.active):hover::before { background:#788fa3; }
    #main-nav .nav-list > li a.active { border-bottom-color: #bdc9d4; }
}
        
@media(max-width:767px) {
    #main-nav { background: #f3c44d; }
}