/** Voor input debugging **/
debug_variables {
    primary: #5f5d5e;
    secundary: #40c458;
    tertiary: #40c458;
}

	/**
	 * We need to render inline svg here to apply the correct color to the fill property of the svg
	 * When applying this inside the _ys-theming.scss the regex will replace the value and make the synthax incorrect 
	 */
	.arrow-indicator,
	.c-select,
	.mob-sub-menu > .mob-sub-menu--toggle::before,
	.mob-sub-menu--back > a::before,
	.mob-menu-collapse--toggle::before {
		background-image: url("data:image/svg+xml;charset=utf8,<svg height='20' viewBox='0 0 48 48' width='20' fill='%235f5d5e' xmlns='http://www.w3.org/2000/svg'><path d='M14.83 16.42l9.17 9.17 9.17-9.17 2.83 2.83-12 12-12-12z'/></svg>") !important;
	}

/** Start style **/
.default-color {
  color: #525252 !important;
}

.default-bg {
  background-color: #ffffff !important;
}

.ginger-accept {
  background: #5f5d5e !important;
}

.ginger_banner {
  border-top: 5px solid #5f5d5e !important;
}

.ginger-accept,
.ginger-disable {
  border: 1px solid #5f5d5e;
}

.ginger-disable:hover,
.ginger-accept:hover {
  border: 1px solid #40c458;
  background: #40c458 !important;
}


.primary-color {
  color: #5f5d5e !important;
}
.primary-bg {
  background-color: #5f5d5e !important;
}

.primary-bg--hover:hover {
  background-color: #5f5d5e !important;
}

.theme--image,
    .theme--primary {
  background-color: #5f5d5e;
}

.section-hcdo .card-title h3 {
  color: #5f5d5e !important;
}

.section-hcdo .hcdo-readmore {
  background-color: #5f5d5e !important;
}


.primary-border-top {
  border-top: 0.5rem solid #5f5d5e;
}


.primary-color--light {
  color: #efefef !important;
}
.primary-bg--light {
  background-color: #efefef !important;
}

.theme--primary--light {
  background-color: #efefef;
}

.padded-block.padded-block--glass {
  background-color: {rgba(#efefef, 0.3)};
}


.primary-bg-color--dark {
  background-color: #565455;
}


.secundary-color {
  color: #40c458 !important;
}

.secundary-bg {
  background-color: #40c458 !important;
}

.secundary-bg--hover:hover {
  background-color: #40c458;
}

.secundary-after::after {
  border-left-color: #40c458 !important;
}

.theme--secundary {
  background-color: #40c458;
}

.zorgverlener-head--no-background .zorgverlener-information {
  background-color: #40c458;
  color: #fff;
}

.section-hcdo .card-date time {
  background: linear-gradient(#fff, #fff) padding-box,
    conic-{gradient(from -"60deg", #40c458 "170deg", transparent 0)} border-box !important;
  color: #40c458 !important;
}


.tertiary-color {
  color: #40c458 !important;
}
.tertiary-bg {
  background-color: #40c458 !important;
}

.theme--tertiary {
  background-color: #40c458;
}


.text-white--hover:hover {
  color: #fff !important;
}


a,
h1,
.h1,
.display-h1,
.btn {
  color: #5f5d5e;
}

.nav--active > a {
  color: #40c458 !important;
}

.nav > .nav--active > a {
  border-bottom: 2px solid #40c458 !important;
}

a.link--no-color {
  color: #525252;
}

a:hover,
a.link--no-color:hover,
.btn:hover {
  color: #474647;
}

.special-color--primary {
  color: #5f5d5e !important;
}

a.special-color--primary:hover,
.btn.special-color--primary:hover {
  color: #474647 !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-dropdown--open .nav-link,
h2,
h3 {
  color: #40c458;
}

.special-color--secundary {
  color: #40c458 !important;
}

.border-color--secundary {
  border-color: #40c458 !important;
}


.theme--dark {
  color: #ffffff !important;
}

.display-h3--secundary,
.nav-heading {
  color: #40c458 !important;
}

.theme--dark a,
.theme--dark h1,
.theme--dark h2,
.theme--dark h3,
.theme--dark .btn,
.theme--dark a.link--no-color {
  color: #ffffff;
}



.c-input > input :checked ~ .c-indicator {
  background-color: #e50072;
}

.c-input > input :active ~ .c-indicator {
  background-color: {mix(#e50072, #ffffff, "80%")};
}

.c-input > input :focus ~ .c-indicator {
  box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #e50072;
}

.c-checkbox input:indeterminate ~ .c-indicator {
  background-color: #e50072;
}

.c-select:focus {
  border-color: #e50072;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075),
    0 0 5px {rgba(#e50072, 0.5)};
}

.file input:focus ~ .file-custom {
  box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #e50072;
}



.mob-menu--link:hover,
.mob-menu--link:focus,
.mob-menu--link:active,
.mob-menu-collapse--open {
  background-color: #efefef;
}

.mob-sub-menu--back > a {
  background-color: #f7f7f7;
}

.btn.btn--huge--intro {
  background-color: #5f5d5e !important;
}
.btn.btn--half--intro {
  @media (min-width: 340px) {
    flex: 0 0 calc(50% - 20px);
  }
}

.btn.btn--huge--intro:hover,
.btn.btn--huge--intro.active {
  background-color: #40c458 !important;
}

.btn.btn--huge--intro .btn--light-border:hover {
  border-color: transparent;
}

.theme--primary .btn--light-border {
  border-color: white;
}

.theme--pattern .btn:not(button.primary-bg, a.primary-bg, .btn-register),
.theme--blank .btn:not(button.primary-bg, a.primary-bg) {
  background-color: transparent;
  color: #5f5d5e;
}

.theme--pattern
  .btn:not(button.primary-bg, a.primary-bg, .btn-register):hover,
.theme--pattern
  .btn:not(button.primary-bg, a.primary-bg, .btn-register):visited,
.theme--blank .btn:not(button.primary-bg, a.primary-bg):hover,
.theme--blank .btn:not(button.primary-bg, a.primary-bg):visited {
  background-color: #5f5d5e;
  color: white;
}

.theme--primary--light .util--vertical-margin > .btn,
.theme--pattern .util--vertical-margin > .btn,
.theme--blank .util--vertical-margin > .btn {
  background: transparent;
  color: #5f5d5e !important;
  border-color: #5f5d5e !important;
}

.theme--primary--light .util--vertical-margin > .btn:hover,
.theme--pattern .util--vertical-margin > .btn:hover,
.theme--blank .util--vertical-margin > .btn:hover {
  background-color: #5f5d5e;
  color: white !important;
}

.theme--primary .btn--light-border:hover {
  background-color: white;
  color: #5f5d5e !important;
}

.theme--primary--light a.btn-primary,
.theme--blank a.btn-primary,
.theme--pattern a.btn-primary,
.btn-register {
  border-color: #5f5d5e !important;
}

#js-nieuws a.btn-primary {
  color: white !important;
}


.btn-primary,
.btn--medical-searchbar,
.gform_button,
.gform_next_button,
.gf_progressbar_percentage,
#afspraak-maken .buttonhighlight,
#afspraak-maken #wizard-afspraak-maken-daylist label.active,
.theme--pattern .gf_browser_safari .btn,
.theme--blank .gf_browser_safari .btn,
#popup-afspraak-maken #wizard-afspraak-maken-timelist label.active {
  background-color: #5f5d5e !important;
  color: #ffffff !important;
}

.gform_button:hover,
.gform_button:focus,
.gform_button:active,
.gform_next_button:hover,
.gform_next_button:focus,
.gform_next_button:active,
#afspraak-maken .buttonhighlight:hover,
#afspraak-maken .buttonhighlight:focus,
#afspraak-maken .buttonhighlight:active {
  background-color: #40c458 !important;
  color: #ffffff !important;
}

.btn-register:hover {
  background-color: #5f5d5e !important;
  color: #ffffff !important;
}

.gform_wrapper .gfield_required {
  color: #cf0c12 !important;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  box-shadow: 0 0 4px 2px {rgba(#e50072, 0.35)};
}

#popup-afspraak-maken .breadcrumbs li.done span,
#popup-afspraak-maken .breadcrumbs li.done:before {
  background-color: #5f5d5e;
}

.search-bar-open-btn:hover {
  background: #efefef;
}

.search-bar-input:focus {
  border-color: #5f5d5e;
}

.mob-menu--opened .mob-menu--trigger {
  background-color: #40c458;
  color: #ffffff;
}

.mob-menu--opened .mob-menu--trigger:hover {
  background-color: #36a74b;
}

.paradeiser > a.active,
.paradeiser .paradeiser_dropdown.active,
.paradeiser .paradeiser_dropdown > a.active,
.paradeiser > a:hover,
.paradeiser .paradeiser_dropdown:hover,
.paradeiser .paradeiser_dropdown > a:hover {
  background: #efefef;
}





.arrow-indicator,
.c-select,
.mob-sub-menu > .mob-sub-menu--toggle::before,
.mob-sub-menu--back > a::before,
.mob-menu-collapse--toggle::before {
  padding-right: 25px !important;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,<svg height='20' viewBox='0 0 48 48' width='20' fill='%230497db' xmlns='http://www.w3.org/2000/svg'><path d='M14.83 16.42l9.17 9.17 9.17-9.17 2.83 2.83-12 12-12-12z'/></svg>");
}

.list--slidedown--toggle::before {
  content: "107" !important;
  font-family: "Fontawesome";
  color: #5f5d5e;
  transform-origin: 7px 12px !important;
}


#popup-afspraak-maken
  #wizard-afspraak-maken-employeelists
  label.active:after {
  box-shadow: inset 0 0 0 4px #40c458;
}

#popup-afspraak-maken #wizard-afspraak-maken-employeefilter ul li.active,
#afspraak-maken #wizard-afspraak-maken-daylist li.disabled,
#afspraak-maken #wizard-afspraak-maken-timelist li.disabled {
  color: #5f5d5e;
}


.react-autosuggest__container:before {
  background-color: #40c458;
}


.mi__header_more_information {
  color: #40c458;
}

.mi__medical-content h2 {
  color: #5f5d5e;
}

.mi__more-information:after {
  border-top-color: #efefef;
}

.mi__cta_buttons:after {
  border-top-color: #5f5d5e;
}

.js-mi__active-video {
  border: 1px solid #40c458;
}


.toptask__content {
  background: #fff;
}

.toptask__link:focus .main-icon {
  color: #40c458;
}

.toptask--open .toptask__link .main-icon,
.toptask--open .toptask__name,
.toptask__name:hover {
  background: #5f5d5e;
  color: #fff;
}

.toptask__link:hover {
  background: #5f5d5e;
}

.toptask__link {
  color: #5f5d5e;
}


.btn--icon-fontawesome {
  color: #5f5d5e !important;
}

.zorgverlener-head__vertical .btn--icon-fontawesome:hover {
  background: #5f5d5e !important;
}


.high-contrast--white .ginger_banner {
  border-color: #fff !important;
}

.high-contrast--white .ginger_btn,
.high-contrast--white .ginger_banner,
.high-contrast--white .primary-bg,
.high-contrast--white .btn,
.high-contrast--white .tertiary-bg,
.high-contrast--white .btn-primary {
  background: #000 !important;
}

.high-contrast--white .ginger_btn:hover,
.high-contrast--white .btn:hover .fa,
.high-contrast--white .btn:hover svg,
.high-contrast--white .btn:hover span,
.high-contrast--white .btn:hover svg *,
.high-contrast--white .btn:hover {
  color: #000 !important;
  background: #fff !important;
}

.high-contrast--white .nav-heading,
.high-contrast--white .special-color--secundary,
.high-contrast--white .display-h3--secundary,
.high-contrast--white ::placeholder,
.high-contrast--white .nav--active > a,
.high-contrast--white .secundary-color,
.high-contrast--white .special-color--primary,
.high-contrast--white .primary-color {
  color: #fff !important;
}

.btn-cta--default a {
  border-color: #5f5d5e !important;
}

.btn-cta--default {
  background: #5f5d5e !important;
}

.btn-cta--default .fa-phone {
  color: #fff !important;
}

.btn-cta--default a:nth-of-type(odd) {
  background: #5f5d5e !important;
  border-color: #5f5d5e !important;
  color: #fff !important;
}

.btn-cta--outline .fa-history {
  color: #40c458 !important;
}

.btn-cta--default a:nth-of-type(even) {
  background: #40c458 !important;
  border-color: #40c458 !important;
  color: #fff !important;
}

.btn-cta--secondary {
  color: #fff !important;
  background: #40c458 !important;
}

.btn-cta--secondary a {
  background: #40c458 !important;
}


.btn-cta--secondary:nth-of-type(even) {
  background: #5f5d5e !important;
}

.btn-header--dossier {
  background: #40c458 !important;
  color: #fff;
}

.chat-widget-modal {
  background-color: #5f5d5e !important;
}

.chat-widget-trigger {
  background-color: #5f5d5e !important;
}

.calamity-banner-btn-primary {
  background-color: #5f5d5e !important;
}

.calamity-banner-btn-primary:hover {
  background-color: #565455 !important;
}

.calamity-banner-btn-secondary {
  background-color: #fff !important;

  &:hover {
    background-color: mix(#fff, rgb(0, 0, 0), 90%) !important;
  }
}

.calamity-banner-icon i {
  color: #5f5d5e !important;
}