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

/* knop Volgende: oranje:ef7d00=239,125,0 (of toch maar  CfPB-petrol-warm:007a8c=0,122,140) */
.fruity .btn-primary {
  color: #ffffff;
  background-color: #ef7d00;
  border: 1px solid #ef7d00;  /* was:009fab=0,159,171 */
}

/* over knop Volgende: donkerder oranje:df6d00, (of toch maar iets donkerder CfPB-blauwgrijs:004d65=0,77,85 */
.fruity .btn-primary:hover, .fruity .btn-primary:focus, .fruity .btn-primary:active, .fruity .btn-primary.active, .fruity .btn-primary.active:focus, .fruity .open .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #df6d00;
    border: 1px solid #df6d00;
}

/* disabled knop Volgende: CfPB-oranje (was lichter CfPB-aqua rgba(0, 183, 196, 0.3) */
.fruity .btn-primary[disabled],
.fruity .btn-primary[disabled]:hover
{
    background-color: rgba(0, 239, 125, 0.3);
    border: 1px solid rgba(0, 239, 125, 0.3);
}

/* knop Vorige: wit met CfPB-petrol-warm */
.fruity .btn-default {
    background-color: rgba(255,255,255,0.2);
    border: 1px solid #007a8c;
    color: #007a8c;
}

/* over knop Vorige: grijzig met CfPB-blauwgrijs */
.fruity .btn-default:hover, .fruity .btn-default:focus, .fruity .btn-default:active, .fruity .btn-default.active, .fruity .open .dropdown-toggle.btn-default {
    color: #004d65;
    border: 1px solid #004d65;
    background-color: rgba(0, 183, 196, 0.1);
}



/* tekst kleur, standaard zwart, vraagbolletje CfPB-blauwgrijs, overige CfPB-petrol-warm */
.ls-questionhelp {
  color: #004d65;
}

.fruity .text-info {
    color: #007a8c;
}

/* vraagtekst: pertrol-warm */
.question-text,
.answer-text {
    color: #007a8c;
}

/*
.radio-item input[type="radio"] {
    border-color: #007a8c;
}
*/
body .answer-item label::after {
    background-color: #007a8c;
}

/* Tekst waarschuwing bij vraag */
.fruity .text-danger {
    color: #eb4034;
}

.fruity .alert-warning {
    background-color: transparent;
    border: 1px solid #eb4034;
    color: #eb4034;
}

/* Kleur progress-bar: CfPB-groen:afca0b (voorheen CfPB-aqua) */
.fruity .progress-bar {
    color: #fff;
    background-color: #afca0b; 
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
}

/* Kleur tekst welkomscherm */
.fruity .text-primary {
    color: #000000!important; 
}

/* Tekst Dit is een voorbeeld van een enquête-beschrijving. Die kan vrij lang zijn */
div.survey-description.text-info.text-center {    
    color: #007a8c!important; 
}

/* Tekst welkom bij deze enquete */
#welcome-container > div.survey-welcome.h4.text-primary > p:nth-child(1) {    
    color: #007a8c!important; 
}

/* knop "laad deze enquete" */
.fruity .btn-outline-secondary,
.fruity .btn-check:active + .btn-outline-secondary, .fruity .btn-check:checked + .btn-outline-secondary, .fruity .btn-check:focus + .btn-outline-secondary, .fruity .btn-outline-secondary.active, .fruity .btn-outline-secondary:active, .fruity .btn-outline-secondary:focus, .fruity .btn-outline-secondary:hover, .fruity .open .dropdown-toggle.btn-outline-secondary, .fruity .show > .btn-outline-secondary.dropdown-toggle {
    color: #007a8c;
}

.fruity .btn-outline-secondary {
/*	background-color: hsla(0,0%,100%,.2); */
	border: 1px solid #004f6b;
}

/* hamburger menu lijntjes */
.fruity .navbar-toggle .icon-bar {
    background-color: #007a8c;
}

/* hamburger menu kader */
.fruity .navbar-toggle {
    border: solid 1px #007a8c;
}

/* titel bovenin elk scherm (aangepast in nav_bar.twig, subview binnen welkom ) */
.CfPB_title h1 {
    margin-top: 35px;
    font-size: 24px;
    color: #004d65;
}

/* geselecteerde box van bv. numeriek antwoord */
.fruity .form-control:focus {
    border: 1px solid #004f6b;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(0 183 196 / 60%);
}

/* label van tekst in elke rij van een array-vraag */
col.col-answers {
    width: 30% !important;  /* standaard is de label-kolom 40% */
}

/* welkom scherm, tekst onderaan over anonimiteit */
div.privacy.row .h4 {
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: underline;
}

/* Tekst anonimiteit */
div.ls-privacy-body {
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
}

/* Tekst annuleren */
div.script-container .beginScripts {
    font-size: 12px;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: underline;
}

/* LS6 Tekst annuleren */
.fruity .btn-link {
color: #007a8c;
}


.modal-title {
    margin: 0;
    line-height: 1.42857143;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
}

.fruity .panel-primary>.panel-heading {
    color: #fff;
    background-color: #007a8c;
    border: 1px solid #007a8c;
}

.fruity a {
    color: #007a8c;
}

.fruity .btn-info {
    color: #fff;
    background-color: #007a8c;
    border: 1px solid #007a8c;
}

/* kader vragen met % - rood signaal bij input */
.fruity .input-error input {
    border: 1px solid #eb4034;
    color: #eb4034;
}

.font-arial {
    font-family: Verdana, Geneva, sans-serif;
}

/* streep onder tekst box taalkeuze */
.fruity .nav .open>a:focus {
    color: #fff;
    background-color: #007a8c;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: #eee;
    border-color: #007a8c;
}

/* kleur checkbox - CfPB blauw */
.checkbox-item input[type="checkbox"]:checked+label::after, .checkbox-item input[type="radio"]:checked+label::after {
    background-color: #007a8c;
    color: white;
}

/* kaart gegevensbescherming */
.fruity .card-primary>.card-header,
.fruity .bg-primary {
    background-color: #007a8c!important;
    border: 1px solid #007a8c;
    color: white;
}
.fruity .card-primary {
    border: 1px solid #007a8c;
}
/* checkbox gegevensbescherming wat groter */
.form-check-input[type=checkbox] {
    border-color: #007a8c;
    height: 2em;
    width: 2em;
    margin-right: 10px;
}
.form-check-input[type=checkbox]:checked {
    background-color: #007a8c;
}

/* LS6 navbar taal/laad onvoltooid rechtsboven */
@media (min-width: 768px) {
.navbar-expand-md .navbar-nav {
    flex-direction: column-reverse;
}
}


/* LS6 regelhoogte: 1.0 */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 1.0;
}

/* vraagtype K meervouidig numeriek met schuiven */
.fruity .slider-selection {
    background-image: linear-gradient(180deg,#8ddfe5 0,#007a8c);
}
.fruity .slider-handle {
    background-color: #007a8c;
}

/* hervat later tekst donkergrijs: #444444 CfPB-aqua: #009fab, CFPB-blauwgrijs:004d65 */
.fruity .text-info, .fruity .text-primary, .fruity .text-success {
    color: #004d65!important;
}

/* taalkeuze en laad onvoltooide enquete  */
.fruity .navbar .navbar-nav .nav-item:after {
    background-color: #007a8c;
}

/* toon verklaring bij hover */
.fruity a:focus, .fruity a:hover {
    color: #005f6b;
}
/* knop sluiten van gegevensverklaring */
.fruity .btn-check:active+.btn-outline-secondary, .fruity .btn-check:checked+.btn-outline-secondary, .fruity .btn-check:focus+.btn-outline-secondary, .fruity .btn-outline-secondary.active, .fruity .btn-outline-secondary:active, .fruity .btn-outline-secondary:focus, .fruity .btn-outline-secondary:hover, .fruity .open .dropdown-toggle.btn-outline-secondary, .fruity .show>.btn-outline-secondary.dropdown-toggle {
    background-color: rgba(00,159,171,.1);
    border: 1px solid #007a8c;
    color: #007a8c;
}

/* bootstrap dropdown met zoek-vlak (verdwijnt anders onder logo/titel-balk) */
.dropdown-menu.show {
    z-index: 9999;
}
/* bootstrap dropdown selectie-vlak (was donkergroen #0f3e12, nu donker CfPB-aqua 005f6b) */
.fruity .dropdown-menu>.active>a, .fruity .dropdown-menu>.active>a:focus, .fruity .dropdown-menu>.active>a:hover, .fruity .dropdown-menu>li>a:focus, .fruity .dropdown-menu>li>a:hover {
    background-color: #007a8c!important;
    color: #fff;
}

/* MMOLE 240607 default font settings */
.font-verdana {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
}

/* MMOLE 250311 default font settings */
.font-roboto {
    font-size: 16px; /* was: 14px */
}