@import url('./rfs.css');
/* TYPOGRPHY */
@font-face {
    font-family: 'Source Sans Pro Black';
    src: url('../fonts/Source_Sans_Pro/SourceSansPro-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceCodePro";
    src: url("../fonts/Source_Code_Pro/SourceCodePro-VariableFont_wght.ttf") format("truetype") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "Wix Madefor Display";
    src: url("../fonts/Wix_Madefor_Display/WixMadeforDisplay-VariableFont_wght.ttf") format("truetype"), url("https://assets.2testit.nl/website_mei_2023/fonts/Wix_Madefor_Display/static/WixMadeforDisplay-Regular.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "Sono";
    src: url("../fonts/Sono/static/Sono_Monospace/Sono_Monospace-Regular.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "Noto";
    src: url("../fonts/Noto_Serif/NotoSerif-Regular.ttf") format("truetype");
    font-display: swap;
}

:root {
    /* COLORS */
    --theme-primary: 0, 125, 41, 1;
    --theme-secondary: 73, 80, 87;
    --theme-dark: 23, 23, 23;
    --theme-light: 252, 252 ,252;
    --theme-href-color: 0, 125, 41;
    --theme-text-link: 39, 118, 60;
    --theme-text-light: 255, 255, 255, 1;
    --theme-text-dark: 0, 0, 0, 1;
    --theme-contrast: 235, 203, 42, 1;

    --theme-info-light: 207, 244, 252;
    --theme-info-dark: 5, 81, 96;
    --theme-opacity-100: 1;
    --theme-opacity-75: 0.75;
    --theme-opacity-50: 0.5;
    --theme-opacity-25: 0.25;
    --theme-opacity-0: 0;

    --body-background-color: linear-gradient(109.6deg, rgba(0, 125, 41, 1) 11.2%, rgba(28, 103, 88, 1) 91.1%);
    --card-background: linear-gradient( 174.2deg,  rgb(255, 252, 248) 7.1%, rgba(240,246,238,1) 67.4% );
    --card-background-color: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    --card-background-image: url("../../assets/theming/tile-light.png");
    --card-background-image-alt: url("../../assets/theming/tile-alt.png");
    --card-box-shadow-color: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
    --card-btn-bg-color: radial-gradient(circle farthest-corner at 10% 20%, rgba(14, 174, 87, 0.1) 0%, rgba(12, 116, 117, 0.2) 90%);
    --card-btn-bg-hover: linear-gradient(109.6deg, rgb(0, 125, 41) 11.2%, rgb(28, 103, 88) 91.1%);
    --card-btn-bg-color-alt: radial-gradient(circle farthest-corner at 10% 20%, rgba(128, 128, 128, 0.1) 0%, rgba(169, 169, 169, 0.2) 90%);
    --card-btn-bg-hover-alt: linear-gradient(-20deg, #616161 0%, #9bc5c3 80%); /* nog aanpassen */

    --focus-color: 235, 203, 42;
    --accesibility-color: 255,0,0;

    /* BOOTSTRAP OVERRIDES */
    --bs-black: rgb(23, 23, 23);
    --bs-white: rgb(252, 252 ,252);
    --bs-gray: rgb(108, 117, 125);
    --bs-gray-dark: rgb(52, 58, 64);
    --bs-gray-100: rgb(248, 249, 250);
    --bs-gray-200: rgb(233, 236, 239);
    --bs-gray-300: rgb(222, 226, 230);
    --bs-gray-400: rgb(206, 212, 218);
    --bs-gray-500: rgb(173, 181, 189);
    --bs-gray-600: rgb(108, 117, 125);
    --bs-gray-700: rgb(73, 80, 87);
    --bs-gray-800: rgb(52, 58, 64);
    --bs-gray-900: rgb(33, 37, 41);

    /* FONTS */
    --theme-header-font: "Sono", monospace;
    --theme-body-font: "SourceCodePro", sans-serif;
    --theme-alt-font: 'Source Sans Pro Black', sans-serif;
    --theme-href-font: "Noto", sans-serif;
    --theme-text-font: "Wix Madefor Display", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--body-background-color);
    background-blend-mode: color-burn;
}

.sr-only {
    visibility: hidden;
    white-space: nowrap;
}
/* Typography */
h1, h2 {
    font-family: var(--theme-header-font);
    font-weight: 600;
    color: rgba(var(--theme-primary) ,var(--theme-opacity-100));
}
h3, h4 {
    font-family: var(--theme-header-font);
    font-weight: 500;
}

/* skiplink */
a.skiplink-item {
	position: absolute;
	display: inline-block;
	left: 0;
	top: 0;
	background: var(--card-background-color);
	border: 0.125rem solid rgba(var(--accesibility-color), var(--theme-opacity-100));
	color: rgba(var(--accesibility-color), var(--theme-opacity-100));
	font-weight: 600;
	padding: 0.5rem;
	transform: translateY(-100%);
  	transition: transform 0.3s;
	z-index: 100;
}
a.skiplink-item:focus {
	transform: translateY(0%);
}

/* top navigation */
nav.navbar.top-navigation, section.card, section.expertise-category div.card, div.jobstory-item {
    background-color: rgba(var(--theme-light) ,var(--theme-opacity-100));
    background-image: var(--card-background-image);
    border-radius: 0.625em;
    box-shadow: var(--card-box-shadow-color)
}

ul li.nav-item a.nav-link, ul.dropdown-menu li a.dropdown-item {
    color: rgba(var(--theme-dark) ,var(--theme-opacity-100));
}

ul li.nav-item a.nav-link:hover, ul.dropdown-menu li a.dropdown-item:hover {
    background: rgba(var(--theme-primary) ,var(--theme-opacity-75));
    color: rgba(var(--theme-text-light) ,var(--theme-opacity-100));
}

nav.navbar.top-navigation ul.dropdown-menu.show {
    min-width: 14em;
}

ul li.nav-item a.nav-link:focus, ul.dropdown-menu li a.dropdown-item:focus {
    border: 0.1em solid rgba(var(--theme-dark) ,var(--theme-opacity-100));
    border-radius: 0.425em;
    background: rgba(var(--focus-color) ,var(--theme-opacity-100));
    background-image: var(--card-background-image-alt);
    color: rgba(var(--theme-dark) ,var(--theme-opacity-100));
    font-weight: 500;
}

.dropdown-submenu {
    position: relative;
  }

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

nav.navbar.top-navigation div.nav-login-item form.nav-login-form {
    min-width: 18em;
}
nav.navbar.top-navigation div.nav-login-item button {
    margin-right: 1em;
}
nav.navbar.top-navigation div.nav-login-item button i.bi.bi-person-circle::before {
    color: rgba(var(--theme-dark), var(--theme-opacity-100));
}

@media screen and (max-width: 992px) {
    nav.navbar.top-navigation li.nav-item {
        padding-left: 0.725em;
    }
}

section.card h2.card-title.section-header {
    font-display: var(--theme-header-font);
}

/* partner banner */
aside#partner .slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 8em; /* Adjust height as needed */
}
aside#partner .slide-track {
    display: flex;
    animation: scroll 30s linear infinite;
}
aside#partner .slide {
    min-width: 12.5em; /* Adjust width as needed */
    margin: 0 .785em;
}
aside#partner .slide img {
    width: 100%;
    height: auto;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-12.5em * 12.5)); } /* Adjust to number of slides */
}

/* footer => privacy banner */
div.container-fluid.privacy-banner {
    position: fixed;
    bottom: 1em;
    z-index: 9000;
    border: none;
}
div.container-fluid.privacy-banner form div.alert.alert-info {
    border: 0.0625rem solid rgba(var(--theme-info-dark), var(--theme-opacity-100));
}

/* home => about */
section.card p.section-text {
    font-family: var(--theme-body-font);
    margin-bottom: 0;
}

i.external-link {	
	color: var(--theme-href-color);
}
i.external-link {
	margin-left: 0.275rem;
}
a.external-href {
    font-family: var(--theme-href-font);
	color: rgba(var(--theme-href-color),var(--theme-opacity-100));
	font-weight: 500;
}

.section-deco-svg {
	max-width: 100%;
}

.section-link-btns {
    margin: 0;
  }
  
  div.section-link-btns > div.col-sm-12, div.section-link-btns > div.col-sm-9, div.section-link-btns > div.col-sm-8, div.section-link-btns > div.col-sm-6, div.section-link-btns > div.col-sm-4,  div.section-link-btns > div.col-sm-3 {
    padding: 0;
  }
  
  div.section-link-btns a.btn {
    padding: 0.625rem 0;
  }
  
  div.section-link-btns .btn-outline-primary {
    font-size: 1.2rem;
    color: rgba(var(--theme-primary), var(--theme-opacity-100));
    font-family: var(--theme-body-font);
    text-transform: capitalize;
    font-weight: 600;
    border-color: rgba(var(--theme-primary), var(--theme-opacity-100));
    background: var(--card-btn-bg-color);
    border: 0.0625rem solid rgba(var(--theme-primary), var(--theme-opacity-100));
    border-radius: 0;
  }
  div.section-link-btns .btn-outline-secondary {
    font-size: 1.2rem;
    color: rgba(var(--theme-secondary), var(--theme-opacity-100));
    font-family: var(--theme-body-font);
    text-transform: capitalize;
    font-weight: 600;
    border-color: rgba(var(--theme-secondary), var(--theme-opacity-100));
    background: var(--card-btn-bg-color-alt);
    border: 0.0625rem solid rgba(var(--theme-secondary), var(--theme-opacity-100));
    border-radius: 0;
  }
  div.section-link-btns .btn-danger {
    font-size: 1.2rem;

    font-family: var(--theme-body-font);
    text-transform: capitalize;
    text-decoration: line-through;
    font-weight: 600;
    border-color: rgba(var(--theme-primary), var(--theme-opacity-100));
    border: 0.0625rem solid rgba(var(--theme-primary), var(--theme-opacity-100));
    border-radius: 0;
  }

  div.section-link-btns .btn-outline-primary.btn-left-radius, div.section-link-btns .btn-outline-secondary.btn-left-radius {
    border-bottom-left-radius: 0.525em;
  }

  div.section-link-btns .btn-outline-primary.btn-right-radius, div.section-link-btns .btn-outline-secondary.btn-right-radius {
    border-bottom-right-radius: 0.525em;
  }
  
  div.section-link-btns .btn-outline-primary:hover {
    background: var(--card-btn-bg-hover);
    border: 0.0625rem solid rgba(var(--theme-primary), var(--theme-opacity-100));
    color: rgba(var(--theme-light) ,var(--theme-opacity-100));
  }

  div.section-link-btns .btn-outline-secondary:hover {
    background: var(--card-btn-bg-hover-alt);
    border: 0.0625rem solid rgba(var(--theme-secondary), var(--theme-opacity-100));
    color: rgba(var(--theme-light) ,var(--theme-opacity-100));
  }
  
  div.section-link-btns .btn-outline-primary:focus, div.section-link-btns .btn-outline-secondary:focus {
    background: rgba(var(--focus-color), var(--theme-opacity-100));
    border-color: rgba(var(--theme-dark) ,var(--theme-opacity-100));
    box-shadow: none;
    color: rgba(var(--theme-dark) ,var(--theme-opacity-100));
}

/* home => services */
blockquote.section-quote {
    margin-top: 0.276em;
    font-style: var(--theme-alt-font);
    font-size: 1.5em;
    color: rgba(var(--theme-primary), var(--theme-opacity-100));
}
section.card img.services-piechart {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
section.card img.services-piechart:hover {
    border: 0.125em solid rgba(var(--theme-primary), var(--theme-opacity-100));
}

.modal-header.section-modal-header {
    background-color: rgba(var(--focus-color), var(--theme-opacity-100));
    background-image: var(--card-background-image-alt);
}

.modal-header.section-modal-header h3.modal-title {
    color: var(--bs-white);
    text-shadow: 
        -1px -1px 0 var(--bs-black),  
         1px -1px 0 var(--bs-black),
        -1px  1px 0 var(--bs-black),
         1px  1px 0 var(--bs-black);
}

#piechartModal .modal-dialog {
    width: 90vw;
    max-width: 48.125em;
}

#piechartodal .modal-content {
    max-width: 48.125em;
}


/* home => contact */
#contact section.card div.quick-contact-links a {
    border: none;
}

#contact section.card div.quick-contact-links a.btn-navigation {
    background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);

}

#contact section.card div.quick-contact-links a.btn-phone {
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);

}

#contact section.card div.quick-contact-links a.btn-navigation:focus, #contact section.card div.quick-contact-links a.btn-phone:focus {
    background: rgba(var(--focus-color), var(--theme-opacity-100));
    border: 0.125em solid rgba(var(--theme-dark), var(--theme-opacity-100));
}

#contact section.card i.bi.bi-geo-alt-fill::before, #contact section.card i.bi.bi-telephone-forward-fill::before {
    font-size: 2.625em;
    color: rgba(var(--theme-light), var(--theme-opacity-100));
}

#contact section.card div.quick-contact-links a:focus i.bi.bi-geo-alt-fill::before,
#contact section.card div.quick-contact-links  a:focus i.bi.bi-telephone-forward-fill::before {
    color: rgba(var(--theme-dark) ,var(--theme-opacity-100))
}

#contact div button.btn-address {
    text-align: left;
    display: block;
    width: 100%;
}

#contact a.contact-map-image {
    border: 0.075em solid rgba(var(--theme-dark) ,var(--theme-opacity-25));
}
#contact hr.horizonal-rule {
    border-top: 0.075em solid rgba(var(--theme-dark) ,var(--theme-opacity-25));
}

/* team => public */
#team div.section-link-btns a.btn-bottom-radius {
    border-bottom-right-radius: 0.525em;
    border-bottom-left-radius: 0.525em;
}

/* Jobstory */
.logo_container {
    max-width: 10rem;
}
div.jobstory-item h3 {
    font-family: var(--theme-header-font);
    margin-bottom: 3;
    line-height: 2rem;
}
h4.Job-header {
    font-weight: 650;
}
div.jobstory-item strong.jobstory-subtitle {
    font-size: 0.825rem;
    font-weight: 300;
    color: rgba(74, 161, 97, 1);
}
div.jobstory-item .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: rgb(39, 118, 60);
    line-height: 1;
}
.job_logo {
    max-width: 100%;
}
div.back-btn-block {
    display: block;
}
p.card-text-jobpage {
    font-family: var(--theme-body-font);
}
.jobstory-back {
    background-color: rgba(235,203,42,1);
    padding: 0.25rem;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    text-transform: uppercase;
    float: right;
    border: 0.1rem groove var(--bs-black);
    border-radius: 0;
}
.bi-chevron-left::before {
    color: var(--bs-black);
}
span.jobpage-share-btn {
    margin-right: 0.5rem;
}
img.deco-jobstory-img {
    max-width: 25rem;
    margin-top: 1rem;
}
.ministerie {
    max-width: 10rem;
    margin-bottom: -0.5rem;
}
#nav-logo {
    max-width: 10rem;
}
a.jobpage-share-btn:hover, div.recruit-banner a:hover {
    background-color: rgba(rgba(0, 125, 41, 1),  0.5);
}
a.jobpage-share-btn {
    font-size: 1.7rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    color: rgba(var(--theme-dark) ,var(--theme-opacity-100));
}

/* auth => dashboard => profile */
div.profile-image-container {
    background: #0ba360;
}

span.hidden {
    visibility: hidden;
}


/* Expertise pagina */
div.expertise-header {
    border: 0.125rem groove var(--focus-color);
    background: var(--focus-color);
}

div.expertise-item a.expertise-info, div.expertise-item i.bi-box-arrow-up-right {
    color: var(--theme-border-green);
}
div.expertise-item:visited, .expertise-item a.expertise-info:visited, div.expertise-item i.bi-box-arrow-up-right:visited {
    color: var(--theme-primary);
}

img.deco-expertise-img {
    max-width: 18.75rem;
}

img.card-img-top {
    max-width: 23rem;
    align-self: center;
}

.expertise-item:target, .jobstory-item:target, .team-item:target {
	-webkit-box-shadow: 0px 0px 22px 10px var(--focus-color); 
	-moz-box-shadow: 0px 0px 22px 10px var(--focus-color);
	box-shadow: 0rem 0rem 1.5rem 0.725rem var(--focus-color);
}

section.expertise-category div.card.expertise-header {
    background-color: rgba(var(--theme-light), var(--theme-opacity-75));
}

section.expertise-category div.card.expertise-header h3 {
    font-family: var(--theme-header-font);
    font-size: 2em;
    font-weight: 500;
    padding-top: 0.375rem;
}

/* Services styling */
h4.service-title, h3.expertise-category {
    font-family: var(--theme-text-font);
}
h4.service-title {
    margin-top: 1.0rem;
}
h4.service-accordion-header {
    margin: 0;
    line-height: 1;
    color: var(--theme-text-link);
    font-family: var(--theme-text-font);
}
ul.service-testing-list, ul.policy-list {
    list-style-type: circle;
}
.service-testing-list > li.service-testing-item, ul.policy-list > li.policy-item {
    font-style: var(--theme-body-font);
}
i.service-info-icon {
    font-size: 3rem;
}
img.service-accordion-img {
    padding: 2;
    max-width: 100%;
    border: 1px solid var(--theme-primary);
}
i.service-icon {
    font-size: 3.7rem;
    color: #fff;
}
div.service-icon-container {
    height: 6rem;
    width: 6rem;
    color: var(--theme-text-light);
    background: var(--body-background-color);
    padding: 0.125rem 0.325rem;
    border-radius: 50%;
}
img.deco-services-img {
    max-height: 14.35rem;
}

/* Social Pagina */
img.deco-social-img {
    max-width: 16.5rem;
}
h3.social-header {
    font-weight: 400;
}

/* Events page */
.timeline {
    position: relative;
    padding: 20px 0;
    list-style: none;
  }
  .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.25em;
    background: #dee2e6;
    left: 50%;
    margin-left: -2px;
  }
  .timeline-item {
    position: relative;
    margin: 0 0 1.25em;
  }
  .timeline-item::before {
    content: '';
    display: table;
  }
  .timeline-item::after {
    content: '';
    display: table;
    clear: both;
  }
  .timeline-item .timeline-icon {
    position: absolute;
    left: 50%;
    width: 2.5em;
    height: 2.5em;
    margin-left: -1.25em;
    background: rgba(var(--theme-light) ,var(--theme-opacity-100));
    border-radius: 50%;
    border: 4px solid #dee2e6;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .timeline-item .timeline-content {
    position: relative;
    width: 45%;
    padding: 1.25em;
    background: rgba(var(--theme-light) ,var(--theme-opacity-100));
    border: 1px solid #dee2e6;
    border-radius: 4px;
  }
  .timeline-item:nth-child(odd) .timeline-content {
    float: left;
    text-align: right;
  }
  .timeline-item:nth-child(even) .timeline-content {
    float: right;
    text-align: left;
  }
  .timeline-content h3.event-title {
    font-family: var(--theme-header-font), sans-serif;
    color: rgb(var(--theme-primary));
    font-size: 1.325em;
    font-weight: 700;
  }
  .timeline-content p.event-text {
    font-size: 0.825em;
  }
  @media (max-width: 576px) {
    .timeline::before {
      left: 8%;
    }
    .timeline-item .timeline-icon {
      left: 8%;
      margin-left: -1.25em;
    }
    .timeline-item .timeline-content {
      width: 75%;
      float: none;
      text-align: left;
      margin-left: 20%;
    }
  }
div.event-border {
    border: 4px solid #dee2e6;
} 

div.event-border a.event-more-href {
    font-family: var(--theme-href-font), sans-serif;
    color: rgba(var(--theme-href-color));
} 
div.event-border a.event-more-href:visited {
    color: rgba(var(--theme-secondary), var(--theme-opacity-100));
} 

img.fixed-height {
    height: 12.5em; 
    object-fit: cover; 
}
a.events-back-btn {
    text-decoration: none;
    color: rgba(var(--theme-primary), var(--theme-opacity-100));
}
a.events-back-btn:hover {
    font-size: 102%;
    font-weight: 500;
    color: rgba(var(--theme-dark), var(--theme-opacity-100));
}
img.rounded-image {
    border-radius: 2%;
}

/* corporate event items */
li#topwork div.timeline-content, li#toscaaward div.timeline-content {
    background-color: rgba(var(--theme-contrast));
    background-image: var(--card-background-image-alt);
}

/* privacy page */
div.privacy-content h3.card-title {
    font-weight: 700;
    color: var(--theme-primary);
}
i.privacy-icon::before {
    color: var(--theme-primary);
}

/* Team Pagina */
img.deco-team-img {
    max-width: 23.75rem;
}
div.team-item h4.card-title {
    margin: 0;
}
div.team-body {
    margin: 0;
    padding: 1rem 1rem 0 1rem;
}
span.team-functie {
    font-weight: 700;
    color: var(--theme-primary);
    font-family: var(--theme-text-font);
}
div.team-item a.btn-team {
    background: var(--body-background-color);
    padding: 1em 0em;
    border-radius: 0;
    border: 0 solid transparent;
    color: var(--theme-text-light);
}

div.team-item h4.card-title, div.recruit-item h4.card-title {
    font-size: 1.7rem;
    color: var(--theme-text-dark);
}
div.team-item button.accordion-button, div.recruit-item button.accordion-button, div.service-item button.accordion-button {
    background: var(--card-background);
}
div.team-item a.expertise-skill-link {
    text-decoration: none;
}

.recruit-banner a {
    font-size: 1.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: var(--theme-text-dark);
}
div.recruit-item, div.recruit-banner, div.jobstory-banner {
    background: var(--theme-contrast) url('../../assets/theming/tile-alt.png');
}

/* Promotion pagina */
blockquote.promotion-quote {
    font-family: var(--theme-href-font), sans-serif;
    color: rgba(var(--theme-primary) ,var(--theme-opacity-100));
    font-size: 2em;
}

/* Sollicitatie form */
.formbold-form-wrapper input {
    margin-bottom: 0.225em;
}

.formbold-form-wrapper option.preselected-option {
    color: var(--bs-gray);
}

.formbold-form-wrapper label {
    font-family: var(--theme-alt-font);
    font-weight: 500;
}

.formbold-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    position: relative;
}
    
.hiring_logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
    
/* top navigation auth */
div#userMenu.auth-user-menu {
    background-color: rgba(var(--focus-color), var(--theme-opacity-100));
    background-image: var(--card-background-image-alt);
    width: 81rem;
}

div#userMenu.auth-user-menu a.nav-link, div#userMenu.auth-user-menu a.nav-link > i.bi {
    font-weight: 500;
}