@import url('https://fonts.googleapis.com/css?family=Quicksand');

/*
    Values used

    logo: url(/assets/partners/volta/logo_volta.png);
    front-logo-height: 300px
    front-logo-width: 250px
    background-color: #f5f5f5
    content-background-color: #ffffff;

    primary-color: #001489
    primary-color-hover: #00106f
    primary-color-active: #000d56

    secondary-color: #0077c8

    button-fontcolor: #ffffff
    button-border-radius: 5px

    back-button-color: #f5f5f5
    back-button-color-hover: #e8e8e8
    back-button-color-active: #dbdbdb
    back-button-font-color: #001489 (primary-color)

    question-description-fontcolor: #777777
    question-description-fontstyle: italic

    answer-font-color: #777777
    answer-font-color-hover: #515151
    answer-border-color: #e8e8e8
    answer-border-color-hover: #dbdbdb
    answer-border-color-selected: #001489 (primary-color)
    answer-border-color-selected-hover: #00106f
    answer-border-color-active: #000d56
    answer-color-active: #f9f9f9

    disabled-button-color: #f5f5f5
    disabled-button-fontcolor: #e8e8e8

    border-color: #dddddd
    input-background-color: #ffffff
    input-fontcolor: #333333
    error-color: #ce3232

    footer-link-color: #001489 (primary-color)
    footer-fontcolor: #777777
    footer-fontsize: 14px

    body-font-family: 'Quicksand', sans-serif;
    header-font-family: 'Quicksand', sans-serif;

    body-font-color: #333333
    body-icon-color: #ffffff

    body-font-size: 16px
    results-font-size: 14px
    h1-font-size: 24px
    h2-font-size: 20px
    h3-font-size: 22px
    h4-font-size: 16px

    cookiebanner-color: #777777
    cookiebanner-link-color: #f5f5f5
    cookiebanner-font-color: #ffffff
    cookiebanner-font-size: 14px

    spider-graph1-color: rgba(17, 68, 123)
    spider-graph2-color: rgba(241, 89, 34)

    header-color: #ffffff
    header-font-size: 16px
    header-border-color: #cecece
    header-border-color-light: #f6f6f6
    header-link-color: #777777
    header-link-color-hover: #001489 (primary-color)

    header-progress-color: #f6f6f6
    header-progress-done: #4eb650
    header-progress-fill: #001489 (primary-color)
*/

/* headings general */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Quicksand', sans-serif;
    /* header-font-family */
}

/* headings specific */
h1 {
    font-size: 24px;
    /* h1-font-size */
}

h2 {
    font-size: 20px;
    /* h2-font-size */
}

h2.model-title.work-values {
    color: rgba(18, 0, 240, 1);
}

h2.model-title.team-roles {
    color: rgba(18, 0, 240, 1);
}

h3 {
    font-size: 22px;
    /* h3-font-size */
}

h4,
h5 {
    font-size: 16px;
    /* h4-font-size */
}

h1,
h5 {
    color: #0077c8;
    /* secondary-color */
}

h2,
h3,
h4,
h6 {
    color: #001489;
    /* primary-color */
}

/* links (simple text links) */

body a {
    color: #001489;
    /* primary-color */
}

body a:hover {
    color: #00106f;
    /* primary-color-hover */
}

/* footer links (links at the bottom of the page) */
a.privacy-link {
    color: #001489;
    /* footer-link-color */
    font-size: 14px;
    /* footer-fontsize */
}

/* layouts */
body {
    background: #f5f5f5;
    /* background-color */
    font-family: 'Quicksand', sans-serif;
    /* body-font-family */
    font-size: 16px;
    /* body-font-size */
    color: #333333;
    /* body-font-color */
}

p {
    font-size: 16px;
    /* body-font-size */
}

p .hint {
    color: #001489;
    /* primary-color */
}

.progressbar .bar {
    background-color: #0077c8;
    /* secondary-color */
}

.page {
    padding-bottom: 0;
}

.page .teamrole-vacancy,
.page .workvalues,
.page .privacy-page,
.page .cookies-page {
    background-color: #ffffff;
    /* content-background-color */
    border-radius: 5px;
    /* button-border-radius */
    display: inline-block;
}

/* navigation (top of the page) */
header {
    background-color: #ffffff;
    /* header-color */
    font-size: 16px;
    /* header-font-size */
}

header nav ul li {
    border-right: 1px solid #cecece;
    /* header-border-color */
}

header nav ul li.logo a {
    background-image: url(/assets/partners/volta/logo_volta.png);
    /* logo */
}

header nav ul li a,
.mobile-side-navigation li a {
    color: #777777;
    /* header-link-color */
}

header nav ul li a:hover,
header nav ul li a:focus,
.mobile-side-navigation li a:hover,
.mobile-side-navigation li a:focus {
    color: #001489;
    /* header-link-color-hover */
}

header nav .menu-right .user-name {
    color: #001489;
    /* primary-color */
}

header nav .menu-right .language-dropdown li ul {
    border: 1px solid #cecece;
    /* header-border-color */
    border-top: 1px solid #f6f6f6;
    /* header-border-color-light */
    background-color: #ffffff;
    /* header-color */
}

header nav .progress-indicator .progress-bar,
.mobile-side-navigation .progress-indicator .progress-bar {
    background-color: #f6f6f6;
    /* header-progress-color */
}

header nav .progress-indicator .progress-bar-fill,
.mobile-side-navigation .progress-indicator .progress-bar-fill {
    background-color: #001489;
    /* header-progress-fill */
}

header nav .progress-indicator .progress-bar-fill-100,
.mobile-side-navigation .progress-indicator .progress-bar-fill-100 {
    background-color: #4eb650;
    /* header-progress-done */
}

header nav.mobile-navigation {
    background-color: #ffffff;
    /* header-color */
}

header nav.mobile-navigation div.logo a {
    background-image: url(/assets/partners/volta/logo_volta.png);
    /* logo */
}

header nav.mobile-navigation #nav-icon span {
    background: #001489;
    /* primary-color */
}

.mobile-side-navigation {
    background-color: #ffffff;
    /* header-color */
}

.mobile-side-navigation .language-links {
    border-top: 1px solid #cecece;
    /* header-border-color */
}

.mobile-side-navigation .user-name {
    color: #001489;
    /* primary-color */
    border-right: 1px solid #cecece;
    /* header-border-color */
}

.mobile-side-navigation li,
.mobile-side-navigation .progress-indicator a {
    border-bottom: 1px solid #cecece;
    /* header-border-color */
}

.page nav.steps {
    background-color: #ffffff;
    /* header-color */
    border-top: 1px solid #cecece;
    /* header-border-color */
}

.page nav.steps ul li.separator::after,
.page nav.steps ul li.separator::before {
    background: #cecece;
    /* header-border-color */
}

.page nav.steps ul li,
.page nav.steps ul li a {
    color: #cecece;
    /* header-border-color */
}

.page nav.steps ul li span.number {
    color: #cecece;
    /* header-border-color */
    border: 2px solid #cecece;
    /* header-border-color */
    background-color: #ffffff;
    /* header-color */
    font-size: 20px;
    /* h2-font-size */
}

.page nav.steps ul li.current a,
.page nav.steps ul li.finished a {
    color: #333333;
    /* body-font-color */
}

.page nav.steps ul li.current span.number {
    border-color: #001489;
    /* primary-color */
    color: #0077c8;
    /* secondary-color */
}

.page nav.steps ul li.finished span.number {
    border-color: #001489;
    /* primary-color */
    background-color: #001489;
    /* primary-color */
    color: #001489;
    /* primary-color */
}

.page nav.steps ul li.finished span.number::after {
    color: #ffffff;
    /* button-fontcolor */
}

.page nav.subnav ul li {
    color: #0077c8;
    /* secondary-color */
    font-size: 16px;
    /* body-font-size */
}

.page nav.subnav ul li a,
.page nav.subnav ul li a:hover,
.page nav.subnav ul li a:focus,
.page nav.subnav ul li a:active {
    color: #0077c8;
    /* secondary-color */
    font-size: 16px;
    /* body-font-size */
}

.page nav.subnav ul li::before {
    border: 1px solid #0077c8;
    /* secondary-color */
}

.page nav.subnav ul li::after {
    background-color: #0077c8;
    /* secondary-color */
}

.page nav.subnav ul li.current::before {
    background-color: #0077c8;
    /* secondary-color */
}

.page nav.subnav ul li.finished::before {
    background-color: #0077c8;
    /* secondary-color */
    border-color: #0077c8;
    /* secondary-color */
}

.page nav.subnav ul li.finished::after {
    background-color: #0077c8;
    /* secondary-color */
}

/* buttons (next step, previous step) */
.btn,
a.btn {
    background-color: #001489;
    /* primary-color */
    border-radius: 5px;
    /* button-border-radius */
    color: #ffffff;
    /* button-fontcolor */
}

button:hover span.btn,
button:focus .btn,
a.btn:hover,
a.btn:focus {
    background-color: #00106f;
    /* primary-color-hover */
    color: #ffffff;
    /* button-fontcolor */
}

button:active span.btn,
a.btn:active {
    background-color: #000d56;
    /* primary-color-active */
    color: #ffffff;
    /* button-fontcolor */
}

.btn.small {
    font-size: 16px;
    /* body-font-size */
}

.btn.small.prev {
    background-color: #f5f5f5;
    /* back-button-color */
    color: #001489;
    /* back-button-font-color */
}

.btn.small.prev:hover,
.btn.small.prev:focus {
    background-color: #e8e8e8;
    /* back-button-color-hover */
}

.btn.small.prev:active {
    background-color: #dbdbdb;
    /* back-button-color-active */
}

.rightOnMobile .disabled span,
.rightOnMobile .disabled:hover span,
.rightOnMobile .disabled:focus span,
.rightOnMobile .disabled:active span {
    background-color: #f5f5f5;
    /* disabled-button-color */
    color: #e8e8e8;
    /* disabled-button-fontcolor */
    border-radius: 5px;
    /* button-border-radius */
}

/* forms (meta form) */
input,
select,
textarea,
ul.tag-editor {
    border: 1px solid #dddddd;
    /* border-color */
    font-family: 'Quicksand', sans-serif;
    /* body-font-family */
    color: #333333;
    /* input-fontcolor */
    font-size: 16px;
    /* body-font-size */
    font-weight: 300;
    background-color: #ffffff
        /* input-background-color */
}

input.error,
select.error,
textarea.error {
    border-color: #ce3232;
    /* error-color */
}

.field.error {
    outline: 1px solid #ce3232;
    /* error-color */
}

span.error-msg {
    color: #ce3232;
    /* error-color */
}

div.field-validation-error {
    color: #ce3232;
    /* error-color */
    border: 1px solid #ce3232;
    /* error-color */
}

form .field-validation-error {
    color: #ce3232;
    /* error-color */
    border: none;
}

form .input-validation-error {
    border: 1px solid #ce3232;
    /* error-color */
}

/* footer */
.b2b-notice p,
.b2b-notice h6 {
    font-size: 14px;
    /* footer-fontsize */
    color: #777777;
    /* footer-fontcolor */
}

/* start page (first page of the test containing the logo) */
#logo-start {
    background-image: url(/assets/partners/volta/logo_volta.png);
    /* logo */
    height: 300px;
    /* front-logo-height */
    max-width: 250px;
    /* front-logo-width */
}

/* teamrole pages */
.teamrole-vacancy .form h4,
.workvalues .form h4 {
    color: #777777;
    /* question-description-fontcolor */
    font-style: italic;
    /* question-description-fontstyle */
}

.teamrole-vacancy .form h3 {
    font-size: 16px;
    /* body-font-size */
}

/* amswer buttons (teamrole & workvalues answers) */
.teamrole-vacancy .form button,
.workvalues .form button {
    color: #777777;
    /* answer-font-color */
    border: 1px solid #e8e8e8;
    /* answer-border-color */
    font-size: 16px;
    /* body-font-size */
    border-radius: 5px;
    /* button-border-radius */
}

.teamrole-vacancy .form button:hover,
.teamrole-vacancy .form button:focus,
.workvalues .form button:hover,
.workvalues .form button:focus {
    border: 2px solid #dbdbdb;
    /* answer-border-color-hover */
    color: #515151;
    /* answer-font-color-hover */
}

.teamrole-vacancy .form button.active,
.workvalues .form button.active {
    border: 2px solid #000d56;
    /* answer-border-color-active */
    color: #515151;
    /* answer-font-color-hover */
}

.teamrole-vacancy .form button.active:hover,
.teamrole-vacancy .form button.active:focus,
.workvalues .form button.active:hover,
.workvalues .form button.active:focus {
    border: 2px solid #00106f;
    /* answer-border-color-selected-hover */
    color: #515151;
    /* answer-font-color-hover */
}

.teamrole-vacancy .form button:active,
.workvalues .form button:active {
    border: 2px solid #000d56;
    /* answer-border-color-active */
    color: #515151;
    /* answer-font-color-hover */
    background-color: #f9f9f9;
    /* answer-color-active */
}

/* result pages */
.results p {
    font-size: 14px;
    /* results-font-size */
}

.results-page .results-clusterinfo .logo {
    background-image: url(/assets/partners/volta/logo_volta.png);
    /* logo */
}

.wpc-results .wpc-result-rating {
    color: #f5f5f5;
    /* disabled-button-color */
}

.wpc-results .wpc-result-rating .star-ratings-css-top.work {
    color: rgba(18, 0, 240, 1);
}

.wpc-results .wpc-result-rating .star-ratings-css-top.team {
    color: rgba(18, 0, 240, 1);
}

.results-clusterinfo h2 {
    color: rgba(18, 0, 240, 1);
}

.work-values .bar-handle {
    background-color: rgba(18, 0, 240, 1);
}

.team-roles .bar-handle {
    background-color: rgba(18, 0, 240, 1);
}


/* graph colors (spider graphs) */
:root {
    --graph-color-light: rgba(18, 0, 240, 0.2);
    --graph-color-full: rgba(18, 0, 240, 1);
    --graph2-color-light: rgba(18, 0, 240, 0.2);
    --graph2-color-full: rgba(18, 0, 240, 1);
}

/* loading icon (when results are loading) */

.lds-grid div {
    background: #001489;
    /* primary-color */
}

/* cookie banner (top of the page) */
.cookie-banner {
    background-color: #777777;
    /* cookiebanner-font-color */
}

.cookie-banner .cookies p {
    color: #ffffff;
    /* cookiebanner-font-color */
    font-size: 14px;
    /* cookiebanner-font-size */
}

.cookie-banner .cookies p a {
    color: #f5f5f5;
    /* cookiebanner-link-color */
}

/* plugin styles */
[data-tooltip].simptip-position-top:before {
    border-top-color: #001489;
    /* primary-color */
}

[data-tooltip].simptip-position-top:after {
    background-color: #001489;
    /* primary-color */
    color: #ffffff;
    /* button-fontcolor */
}

.chosen-container {
    font-size: 16px;
    /* body-font-size */
}

.chosen-container .chosen-results li.highlighted {
    background-color: #001489;
    /* primary-color */
    color: #ffffff;
    /* button-fontcolor */
}

form div .chosen-single.input-validation-error {
    border: 1px solid #ce3232;
    /* error-color */
}











/********************************************/
/************ LANDING PAGE CSS **************/
/********************************************/
/*
    Values used
    landing-fontsize: 14px
    landing-fontcolor: #777777
    landing-color-overlay: #333333
    landing-background-image: url(/assets/miscellaneous/29776172-0-adult-art-artist-668.jpg)
    landing-background-color: #ffffff 
    landing-logo: url(/assets/partners/kazidemo/KAZI_LogoOnDarkBackgroundDemo.svg)
    landing-titlecolor: #ffffff
    landing-title-fontsize: 35px
    landing-subtitlecolor: #ffffff
    landing-subtitle-fontsize: 20px
    landing-subtitle2color: #ffffff
    landing-subtitle2-fontsize: 17px

    landing-startbutton-color: #028c52
    landing-startbutton-fontcolor: #ffffff

    landing-reportimg-nl: url(/assets/partners/kazi/report-box-image-nl.png)
    landing-reportimg-en: url(/assets/partners/kazi/report-box-image-en.png)
    landing-reportimg-fr: url(/assets/partners/kazi/report-box-image-fr.png)

    landing-logoblock-background: #ffffff
    landing-logoblock-titlecolor: #777777

    landing-insights-background: #e8f2fa
    landing-insights-photo-1: url(/assets/miscellaneous/3450990-0-man2.png);
    landing-insights-photo-2: url(/assets/miscellaneous/3545042-0-woman1.png);
    landing-insights-photo-3: url(/assets/miscellaneous/30527011-0-adolescent-adult-blu.jpg);

    landing-works-background: #f6f6f6
    landing-works-border-color: #cecece

    landing-buttonblock-background: #e8f2fa
    landing-buttonblock-shadowbackground: #ffffff
    landing-buttonblock-title-fontcolor: #333333

    landing-manual-background: url(/assets/miscellaneous/29776397-0-adult-beard-concentr.jpg)
    landing-manual-button-color: #001489 (primary-color)
    landing-manual-button-fontcolor: #ffffff

    landing-footer-color: #ffffff
    landing-footer-fontcolor: #8a8a8a
*/

#landingspage {
    font-family: 'Quicksand', sans-serif;
    /* body-font-family */
    font-size: 14px;
    /* landing-fontsize */
}

#landingspage .color-overlay {
    background-color: #333333;
    /* landing-color-overlay */
}

#landingspage .border-holder {
    background-image: url(/assets/miscellaneous/29776172-0-adult-art-artist-668.jpg);
    /* landing-background-image */
    background-color: #ffffff;
    /* landing-background-color */
}

#landingspage .heading-block .block-inner .kazi-top-logo {
    background-image: url(/assets/partners/kazidemo/KAZI_LogoOnDarkBackgroundDemo.svg);
    /* landing-logo */
}

#landingspage .heading-block .block-inner h4 {
    color: #ffffff;
    /* landing-subtitlecolor */
    font-size: 20px;
    /* landing-subtitle-fontsize */
}

#landingspage .heading-block .block-inner h5 {
    color: #ffffff;
    /* landing-subtitle2color */
    font-size: 17px;
    /* landing-subtitle2-fontsize */
}

#landingspage .heading-block .block-inner h1 {
    color: #ffffff;
    /* landing-titlecolor */
    font-size: 35px;
    /* landing-title-fontsize */
}

#landingspage .heading-block .block-inner .h5-borderbottom {
    border-bottom: 2px solid #001489;
    /* primary-color */
}

#landingspage .heading-block .block-inner .start-button {
    font-size: 14px;
    /* landing-fontsize */
    background-color: #028c52;
    /* landing-startbutton-color */
    color: #ffffff;
    /* landing-startbutton-fontcolor */
}

#landingspage .heading-block .block-inner:lang(nl) .report-box {
    background-image: url(/assets/partners/kazi/report-box-image-nl.png);
    /* landing-reportimg-nl */
}

#landingspage .heading-block .block-inner:lang(en) .report-box {
    background-image: url(/assets/partners/kazi/report-box-image-en.png);
    /* landing-reportimg-en */
}

#landingspage .heading-block .block-inner:lang(fr) .report-box {
    background-image: url(/assets/partners/kazi/report-box-image-fr.png);
    /* landing-reportimg-fr */
}

#landingspage .heading-block .block-inner .report-box {
    -webkit-box-shadow: 8px 8px 0px 2px #001489;
    /* primary-color */
    -moz-box-shadow: 8px 8px 0px 2px #001489;
    /* primary-color */
    box-shadow: 8px 8px 0px 2px #001489;
    /* primary-color */
    background-image: url(/assets/partners/kazi/report-box-image-nl.png);
    /* landing-reportimg-nl */
}

#landingspage .logo-block {
    background-color: #ffffff;
    /* landing-logoblock-background */
}

#landingspage .logo-block-inner h3 {
    font-size: 24px;
    /* h1-font-size */
    color: #777777;
    /* landing-logoblock-titlecolor */
}

@media screen and (max-width: 600px) {
    #landingspage .logo-block-inner h3 {
        font-size: 22px;
        /* h3-font-size */
    }
}

#landingspage .insights-block {
    background-color: #e8f2fa;
    /* landing-insights-background */
}

#landingspage .insights-block-inner h3 {
    font-size: 24px;
    /* h1-font-size */
    color: #0077c8;
    /* secondary-color */
}

#landingspage .insights-block-inner .insight-row .insight-photo .icon-block {
    background-color: #001489;
    /* primary-color */
}

#landingspage .insights-block-inner .insight-row .insight-photo .photo-1 {
    background-image: url(/assets/miscellaneous/3450990-0-man2.png);
    /* landing-insights-photo-1 */
}

#landingspage .insights-block-inner .insight-row .insight-photo .photo-2 {
    background-image: url(/assets/miscellaneous/3545042-0-woman1.png);
    /* landing-insights-photo-2 */
}

#landingspage .insights-block-inner .insight-row .insight-photo .photo-3 {
    background-image: url(/assets/miscellaneous/30527011-0-adolescent-adult-blu.jpg);
    /* landing-insights-photo-3 */
}

#landingspage .insights-block-inner .insight-row .insight-text {
    color: #777777;
    /* landing-fontcolor */
}

#landingspage .insights-block-inner .insight-row .insight-text h4 {
    color: #777777;
    /* landing-fontcolor */
    font-size: 20px;
    /* h2-font-size */
}

#landingspage .works-block {
    background-color: #f6f6f6;
    /* works-background */
}

#landingspage .works-block .works-block-inner h3 {
    font-size: 24px;
    /* h1-font-size */
    color: #0077c8;
    /* secondary-color */
}

#landingspage .works-block .works-block-inner h4 {
    font-size: 22px;
    /* h3-font-size */
    color: #0077c8;
    /* secondary-color */
}

#landingspage .works-block .works-block-inner .border-row .border-row-border {
    border-right: 2px solid #cecece;
    /* landing-works-border-color */
}

#landingspage .works-block .works-block-inner .works-row {
    color: #0077c8;
    /* secondary-color */
}

#landingspage .works-block .works-block-inner .works-row .work-icon {
    background-color: #001489;
    /* primary-color */
}

#landingspage .button-block {
    background-color: #e8f2fa;
    /* landing-buttonblock-background */
}

#landingspage .button-block .button-block-inner .shadow-block {
    background-color: #ffffff;
    /* landing-buttonblock-shadowbackground */
    border: 1px solid #0077c8;
    /* secondary-color */
    -webkit-box-shadow: 8px 8px 0px 2px #001489;
    /* primary-color */
    -moz-box-shadow: 8px 8px 0px 2px #001489;
    /* primary-color */
    box-shadow: 8px 8px 0px 2px #001489;
    /* primary-color */
}

#landingspage .button-block .button-block-inner .shadow-block h2 {
    font-size: 24px;
    /* h1-font-size */
    color: #333333;
    /* landing-buttonblock-title-fontcolor */
}

@media screen and (max-width: 600px) {
    #landingspage .button-block .button-block-inner .shadow-block h2 {
        font-size: 20px;
        /* h2-font-size */
    }
}

#landingspage .button-block .button-block-inner .shadow-block p {
    color: #777777;
    /* landing-fontcolor */
}

#landingspage .button-block .button-block-inner .shadow-block .start-button {
    font-size: 14px;
    /* landing-fontsize */
    background-color: #028c52;
    /* landing-startbutton-color */
    color: #ffffff;
    /* landing-startbutton-fontcolor */
}

#landingspage .manual-block {
    background-image: url(/assets/miscellaneous/29776397-0-adult-beard-concentr.jpg);
    /* landing-manual-background */
    background-color: #ffffff;
    /* landing-background-color */
}

#landingspage .manual-block .color-overlay {
    background-color: #333333;
    /* landing-color-overlay */
}

#landingspage .manual-block .manual-block-inner h2 {
    color: #ffffff;
    /* landing-titlecolor */
    font-size: 35px;
    /* landing-title-fontsize */
}

#landingspage .manual-block .manual-block-inner p {
    color: #ffffff;
    /* landing-titlecolor */
}

#landingspage .manual-block .manual-block-inner .manual-button {
    font-size: 14px;
    /* landing-fontsize */
    background-color: #001489;
    /* landing-manual-button-color */
    color: #ffffff;
    /* landing-manual-button-fontcolor */
}

#landingspage .footer {
    background-color: #fff;
    /* landing-footer-color */
    color: #8a8a8a;
    /* landing-footer-fontcolor */
    font-size: 14px;
    /* landing-fontsize */
}