/** Voor input debugging **/
debug_variables {
    primary: #e8813c;
    secundary: #378ddd;
    tertiary: #378ddd;
}

	/**
	 * 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='%23e8813c' 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: #e8813c !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

 
  .secundary-color {
    color: #378ddd !important;
  }

  .secundary-bg {
    background-color: #378ddd !important;
  }

  .secundary-bg--hover:hover {
    background-color: #378ddd;
  }

  .secundary-after::after {
    border-left-color: #378ddd !important;
  }

  .theme--secundary {
    background-color: #378ddd;
  }

  .zorgverlener-head--no-background .zorgverlener-information {
    background-color: #378ddd;
    color: #fff;
  }

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

 
  .tertiary-color {
    color: #378ddd !important;
  }
  .tertiary-bg {
    background-color: #378ddd !important;
  }

  .theme--tertiary {
    background-color: #378ddd;
  }

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

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

  .nav--active > a {
    color: #378ddd !important;
  }

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

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

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

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

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

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

  .special-color--secundary {
    color: #378ddd !important;
  }

  .border-color--secundary {
    border-color: #378ddd !important;
  }

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

  .display-h3--secundary,
  .nav-heading {
    color: #378ddd !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: #e55c00;
  }

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

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

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

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

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

 

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

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

  .btn.btn--huge--intro {
    background-color: #e8813c !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: #378ddd !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: #e8813c;
  }

  .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: #e8813c;
    color: white;
  }

  .theme--primary--light .util--vertical-margin > .btn,
  .theme--pattern .util--vertical-margin > .btn,
  .theme--blank .util--vertical-margin > .btn {
    background: transparent;
    color: #e8813c !important;
    border-color: #e8813c !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: #e8813c;
    color: white !important;
  }

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

  .theme--primary--light a.btn-primary,
  .theme--blank a.btn-primary,
  .theme--pattern a.btn-primary,
  .btn-register {
    border-color: #e8813c !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: #e8813c !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: #378ddd !important;
    color: #ffffff !important;
  }

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

  .gform_wrapper .gfield_required {
    color: #e8813c;
  }

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

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

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

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

  .mob-menu--opened .mob-menu--trigger {
    background-color: #378ddd;
    color: #ffffff;
  }

  .mob-menu--opened .mob-menu--trigger:hover {
    background-color: #2f78bc;
  }

  .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: #fdf2ec;
  }

 
 
 
 
  .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: #e8813c;
    transform-origin: 7px 12px !important;
  }

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

  #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: #e8813c;
  }

 
  .react-autosuggest__container:before {
    background-color: #378ddd;
  }

 
  .mi__header_more_information {
    color: #378ddd;
  }

  .mi__medical-content h2 {
    color: #e8813c;
  }

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

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

  .js-mi__active-video {
    border: 1px solid #378ddd;
  }

 
  .toptask__content {
    background: #fff;
  }

  .toptask__link:focus .main-icon {
    color: #378ddd;
  }

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

  .toptask__link:hover {
    background: #e8813c;
  }

  .toptask__link {
    color: #e8813c;
  }

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

  .zorgverlener-head__vertical .btn--icon-fontawesome:hover {
    background: #e8813c !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: #e8813c !important;
  }

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

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

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

  .btn-cta--outline .fa-history {
    color: #378ddd !important;
  }

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

  .btn-cta--secondary {
    color: #fff !important;
    background: #378ddd !important;
  }

  .btn-cta--secondary a {
    background: #378ddd !important;
  }

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

  .btn-header--dossier {
    background: #378ddd !important;
    color: #fff;
  }

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

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

  .calamity-banner-btn-primary {
    background-color: #e8813c !important;
  }
  
  .calamity-banner-btn-primary:hover {
    background-color: #d17436 !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: #e8813c !important;
  }