/* ==========================================================================

   IMPORTANT:

   This stylesheet contains styles that will be included in PDF rendering.
   Include only styles here that are needed in the PDF reports. No styles
   for other page styles such as menu, form inputs, header, footer.

   ========================================================================== */


/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;

}

body {
}

.fontsize {
    font-size: 1em;
}

.fontsize-normal {

}

.fontsize-small {
    font-size: 80%;
}

.fontsize-large {
    font-size: 120%;
}

a {
    color: #428bca; /* oude Bootstrap link kleur */
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

h2, .h2 {
    font-size: 2.14285714286em;
}

h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
    margin-right: 4px;
}

h1 i {
    margin-right: 8px;
}

.form-group .checkbox {
    margin-top: 0
}

.form-group .btn {
    margin-top: 10px
}

.form-control-disabled {
    background-color: transparent !important;
    color: #222 !important;
}

/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

.wrapper {
    width: 94%;
    margin: 0 3%;
}

header.wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ==============
        Main
   ============== */

.logo {
    color: #000;
    margin: 0;
    padding: 0;
    margin-left: -9px;
}

.landing .logo {
    margin-left: -10px;
}

.main .article h1,
.main article h1 {
    font-size: 2em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Condensed', sans-serif;
    color: #369c7b;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.slider {
    padding: 30px 10px 80px 10px;

}

.question-wrapper {
    padding: 20px 10px;

}

.question-wrapper h3 {
    margin: 0;
}

.question-wrapper h2 {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.28571428571em;
    color: #ee652d;
    font-weight: 400;
}

.alternating-bg:nth-child(odd) {
    /* background: #f4f4f4 */
}

.slider h3 {
    margin: 0;
    white-space: nowrap;
    font-size: 20px;
    color: #369c7b;
}

.slider td.score {
    text-align: center;
    color: #9b9b9b;
}

.slider td.tags {
    font-weight: 300;
    font-size: 0.85714285714em;
}

ol.question-ordering.question-ordering-sortable li.list-group-item {
    cursor: move;
}

ol.question-ordering.question-ordering-browser li.list-group-item {
    margin-left: 3.5em;
}

ol.question-ordering.question-ordering-browser li.list-group-item .fa-sort {
    position: absolute;
    right: 16px;
    top: 12px;
}

ol.question-ordering.question-ordering-browser li.list-group-item div.question-ordering-position {
    position: absolute; /* offset parent is .list-group-item */
    margin-left: -2.5em;
    color: #EE652D;
    font-size: 1.5em;
    cursor: auto;
}

.question-wrapper div.textarea-readonly {
    width: 100%;
    min-height: 100px;
    font-weight: normal;
    border: 1px solid #ddd;
    padding: 4px;
}

table {
    border: 1px #fff;
    box-shadow: #fff;
}

label span.sublabel{
    color: #777;
}

.dashboard .dashboard-graph-container {
    display: inline-block;
    width: 100%;
    margin: 0 0 0 10px;
    float: left;
}

.dashboard .dashboard-graph-container:first-child {
    margin-left: 0;
}

.dashboard .dashboard-graph-block {
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 10px;
}

.dashboard .graph-canvas {
    width: 100%;
    height: 140px;
}

.dashboard .graph-canvas span {
    overflow: visible !important;
    z-index: -1;
}

.dashboard .dashboard-graphs {
    display: block;
    width: 100%;
    padding-bottom: 20px;
}

.dashboard .title {
    height: 40px;
}

.dashboard .legend {
    height: 40px;
}

.dashboard .color1 {
    color: #428bca;
}

.dashboard .color2 {
    color: #ee652d;
}

.dashboard h4 {
    padding-left: 8px;
}

.dashboard-graph-block img {
    margin: 5px 0 5px 0;
}

.clear {
    clear: both;
    width: 100%;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

div.score_bar {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-print-color-adjust: exact;
    height: 30px;
    width: 100%;
    float: left;
    border: solid black 1px;
    overflow: hidden;
}

div.score_bar IMG {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

div.score .chart {
    padding: 5px 30px 20px 30px;
}

div.score .title {
    font-weight: bold;
}

div.score .feedback {
}

div.score .score-value {
    border: 2px solid #ee652d;
    width: 28px;
    height: 28px;
    font-weight: bold;
    color: #ee652d;
    border-radius: 13px;
    padding: 0;
    padding-top: 2px;
    margin-left: -7px;
    font-size: 10pt;
    text-align: center;
    display: inline-block;
}

div.score img.score-bar {
    padding: 0;
    margin: 0;
}

div.score_indicator {
    width: 34px;
    height: 34px;
    border: none;
    margin-left: 923px;
}

div.score_indicator IMG {
    position: absolute;
    padding: 0;
    margin: 0;
    left: -0;
    top: -1px;
}

div.description {
    width: 100%;
    float: none;
}

div.description_left {
    width: 50%;
    float: left;
}

div.description_right {
    float: right;
    text-align: right;
}

.scorebar-ticks {
    font-size: 8pt;
    color: #888;
    padding: 0;
    margin: 0;
}

.btn-feedback-color {
    color: #fff;
}

.btn-feedback-color:hover {
    color: #fff;
}

.btn-blue {
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-blue:hover {
    background-color: #286090;
    border-color: #204d74
}

.btn-orange {
    background-color: #f0ad4e;
    border-color: #eea236;
}

.btn-orange:hover {
    background-color:#ec971f;
    border-color:#d58512;
}

.btn-yellow {
    background-color: #fbce0f;
    border-color: #d8ab00;
}

.btn-yellow:hover {
    background-color: #efc20f;
    border-color: #cfa200;
}

.btn-purple {
    background-color: #6f5499;
    border-color: #6f5499;
}

.btn-purple:hover {
    background-color: #574278;
    border-color: #523e71;
}

.preference-feedback {
    padding: 0 20px 10px 20px;
    margin: 6px 2px 0 18px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

#tab_decisionaids input.input-sm,
input.datefield {
    width: 238px;
}

input[type=range][orient=vertical] {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

select.white {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.stripe {
    background-color: #f9f9f9;
}

table.option-table {
    table-layout: fixed;
}

table.option-table .option-table-hidden .option-table-cell-content {
    display: none;
}

table.option-table .option-table-odd {
    background-color: #f9f9f9;
}

table.option-table > tbody + tbody {
    border-top: 0 !important;
}

table.table.option-table > thead > tr > th {
    vertical-align: top; /* Override 'bottom' setting */
}

.yesnoneutral {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 0 15px;
}

.yesnoneutral .block {
    padding: 5px;
    border-radius: 5px;
    margin: 5px 0 0 0;
}

.yesnoneutral .block-droppable {
    border: 1px dashed white;
}

.yesnoneutral .block-draggable {
    border: 1px solid #dddddd;
    z-index: 2;
    border-radius: 5px;
    padding: 10px;
}

.yesnoneutral .draggable {
    cursor: move;
}

.yesnoneutral .droppable-highlight {
    border: 1px dashed grey;
}

.yesnoneutral div {
    text-align: center;
}

.yesnoneutral .header {
    padding: 4px;
    font-weight: bold;
    background-color: #f9f9f9;
    border-radius: 0;
    border-bottom: 1px solid #ddd;
    margin: 0;
}

.yesnoneutral .col-sm-4 {
    padding-left: 0;
    padding-right: 0;
}

.yesnoneutral .col-0 {
    color: #cc0000;
}

.yesnoneutral .col-2 {
    color: #009900;
}

.iknl-result {
}
.iknl-result table tr {
    vertical-align: top;
}
.iknl-result p {
    font-size: 90%;
}
.iknl-result > table > tbody > tr > td {
    width: 25%;
    font-size: 90%;
    text-align: center;
}
.iknl-result table tr td img {
    margin-left: 20px;
}
.iknl-result tr.header1 {
    font-style: italic;
}
.iknl-result tr.header1 .line1 {
    font-weight: bold;
}
.iknl-result tr.header1 .line2 {
    padding: 0 20px 0 20px;
}
.iknl-result tr.header2 {
    font-weight: bold;
}
.iknl-result tr.header2 .line1 {
    margin-top: 10px;
}
.iknl-result table.legend {
    margin-top: 10px;
    margin-left: 10%;
    margin-right: 10%;
}
.iknl-result table.legend td {
    text-align: left;
}
.iknl-result .circle {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgb(218, 218, 218);
    margin: 0 10px 0 10px;
}
.iknl-result .circle-1 {
    background-color: rgb(124, 182, 157);
}
.iknl-result .circle-2 {
    background-color: rgb(243, 146, 0);
}
.iknl-result .circle-3 {
    background-color: rgb(163,  77, 103);
}
.iknl-result .circle-4 {
    background-color: rgb(127, 201, 255);
}