/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/*                    Versie 2025-02-15 | 15:00                                                                                                */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Standaard kleuren                                                                                                                          */
/*                        #12264c Transip Blauw */
/*                       #c46c25   Transip donker organje */





                                                                                                             
/*  Kleur   #103c4b     blauwgroen              (de kleur van het linker menu / standaard kleur voor tekst in contentpagina)                   */
/*  Kleur   #071b21     donker blauwgroen       (de kleur voor hover in het linkermenu)                                                        */
/*  Kleur   #e1e6e8     lichtblauw              (de standaard achtergrondkleur van de contentpagina's en de tekst in donker menu links)        */
/*  Kleur   #FFFFFF     wit                     (voor het topmenu op de contentpagina)                                                         */
/*  Kleur   #0000001A   semitransparant zwart   (schaduw voor div's)                                                                           */
/*  Kleur   #a31059     donkerrood              (voor de kleur van een link in de detail/ content pagina's)                                    */
/*                                                                                                                                             */
/*                                                                                                                                             */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */       

/*        #12264c TRANSIP lichtblauw */
/*        #12254b TRANSIP Donker */

/*        #c46c25 TRANSIP donker oranje */
/*        #f7882e TRANSIP licht oranje */


/*        #f8f9fa TRANSIP Achtergond grijs  */

/*        #0d1b38 TRANSIP Super donker BLAUW (knoppen van trans ip */



/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* hier is de basis styling van een pagina opgenomen waarin een verwijzing staat naar de styleheet                                             */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

body {
    margin: 0;                                                                      /* commentaar */
    padding: 0;                                                                     /* commentaar */
    font-family: sans-serif;                          /* commentaar */
    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);                                                               /* commentaar */
    line-height: 1.5;                                                               /* commentaar */           
    color:  #12264c;                                                              /* Donkergrijze tekstkleur */
    background-color: #e1e6e8;                                                    /* Lichtblauwe kleur */
    height: 100vh;                                                                  /* Gebruik de volledige hoogte van het venster */
}

p {
    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);                                                        /* commentaar */
    color: #103c4b;                                                               /* Donkere tint blauwgroenvoor de tekst in de <p> */
}



.error-message {
    color: red;
    font-size: 16px;
    font-family: 'SFProDisplayRegular', Arial, sans-serif;
    margin: 10px 0;
    text-align: center;
}

.vacancies_original_job_posting_description {
    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px); 
    text-transform: none; /* Zorg ervoor dat er geen uppercase-forcering is */
}


/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* hier zijn alle fonts opgenomen die lokaal op de server zijn opgeslagen                                                                      */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


@font-face {
    font-family: 'Inter-Regular';
    src: url('fonts/otf/Inter-Regular.otf') format('opentype');
}





@font-face {
    font-family: 'SFProDisplayUltralightItalic';
    src: url('fonts/sf-pro-display-ultralightItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplayUltralight';
    src: url('fonts/sf-pro-display-ultralight.otf') format('opentype');
}

@font-face {
    font-family: 'SFProDisplayThinItalic';
    src: url('fonts/sf-pro-display-thinItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplayThin';
    src: url('fonts/static/Roboto-Light.t tf') format('opentype');
}







@font-face {
    font-family: 'SFProDisplaySemiboldItalic';
    src: url('fonts/sf-pro-display-semiboldItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplaySemibold';
    src: url('fonts/sf-pro-display-semibold.otf') format('opentype');
}

@font-face {
    font-family: 'SFProDisplayRegularItalic';
    src: url('fonts/sf-pro-display-regularItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplayRegular';
    src: url('fonts/sf-pro-display-regular.otf') format('opentype');
}

@font-face {
    font-family: 'SFProDisplayMediumItalic';
    src: url('fonts/sf-pro-display-mediumItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplayMedium';
    src: url('fonts/sf-pro-display-medium.otf') format('opentype');
}

@font-face {
    font-family: 'SFProDisplayLightItalic';
    src: url('fonts/sf-pro-display-lightItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplayLight';
    src: url('fonts/sf-pro-display-light.otf') format('opentype');
}

@font-face {
    font-family: 'SFProDisplayHeavyItalic';
    src: url('fonts/sf-pro-display-heavyItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplayHeavy';
    src: url('fonts/sf-pro-display-heavy.otf') format('opentype');
}

@font-face {
    font-family: 'SFProDisplayBoldItalic';
    src: url('fonts/sf-pro-display-boldItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplayBold';
    src: url('fonts/sf-pro-display-bold.otf') format('opentype');
}

@font-face {
    font-family: 'SFProDisplayBlackItalic';
    src: url('fonts/sf-pro-display-blackItalic.otf') format('opentype');
    font-style: italic;
}

@font-face {
    font-family: 'SFProDisplayBlack';
    src: url('fonts/sf-pro-display-black.otf') format('opentype');
}





/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* De opmaak van het topmenu                                                                */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

.div-rightpage-topmenu {
    position: absolute;                                /* commentaar */
    width: 100%;                                       /* commentaar */
    height: 60px;                                      /* commentaar */
    display: flex;                                     /* Activeer flexbox */
    align-items: center;                               /* Verticaal centreren */
    justify-content: flex-end;                         /* Horizontaal uitlijnen naar rechts */
    background-color: #ffffff;                       /* commentaar */
    font-family: 'SFProDisplayRegular', sans-serif;             /* commentaar */
    font-size: 14px;                                   /* commentaar */
    color: #e0e0e0;                                  /* commentaar */

}

 .search-form {
    display: flex;
    align-items: center;                               /* commentaar */
    margin-left: 20px;                                 /* commentaar */
    margin-right: auto;                                /* Zorgt ervoor dat de knoppen naar rechts worden uitgelijnd */ 
}

.div-rightpage-topmenu .filter-input {
    width: 500px;                                      /* Pas de breedte aan naar een gewenste waarde */
    padding: 5px;                                      /* Voeg padding toe voor een grotere invoerervaring */
    font-size: 14px;                                   /* Zorg ervoor dat het lettertype leesbaar is */
}





/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* De opmaak van het topmenu search (update 16-2-2025)                                                               */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


.top-menu-search-container {
    position: fixed;      
    width: 100%;                                       /* commentaar */
    height: 60px;                                      /* commentaar */
    display: flex;                                     /* Activeer flexbox */
    background-color: #12264c;                       /* commentaar */
    align-items: center;                               /* Verticaal centreren */
    z-index: 1000; /* Zorg dat de div boven andere elementen ligt */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Een subtiele schaduw */

}

.top-menu-search-div-left {
  flex: 1; /* Verdeel de ruimte gelijkmatig */
  padding: 20px; /* Voeg wat opvulling toe */
  text-align: Left; /* Centreer de tekst */
margin-left: 10px;
  Font-size: clamp(14px, calc(14px + 2 * ((100vw - 1440px) / 1120)), 16px); 
    color:  #ffffff;   
}

.top-menu-search-div-left a {
    color: #ffffff; /* Maak de links wit */
    text-decoration: none; /* Optioneel: onderstreping verwijderen */
}

.top-menu-search-div-left a:hover {
    color: #ffffff; /* Optioneel: een iets andere kleur bij hover */
}

.icon-home {
    width: 25px;
    height: 25px;
    align-items: center;  
}

.top-menu-search-div-center  {
  flex: 1; /* Verdeel de ruimte gelijkmatig */
  padding: 20px; /* Voeg wat opvulling toe */
  text-align: center; /* Centreer de tekst */

}

.top-menu-search-div-center .filter-input {

    width: 70%;                                      /* Pas de breedte aan naar een gewenste waarde */
    height: 18px;                                      /* Pas de breedte aan naar een gewenste waarde */
    padding: 5px;                                      /* Voeg padding toe voor een grotere invoerervaring */
    font-size: 13px;                                   /* Zorg ervoor dat het lettertype leesbaar is */
    border-radius: 5px;                                /* afronding van de hoeken */
}

.top-menu-search-right {
  flex: 1; /* Verdeel de ruimte gelijkmatig */
   padding: 20px; /* Voeg wat opvulling toe */
  text-align: right; /* Centreer de tekst */
}


/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* De opmaak van het topmenu detail & modify (update 16-2-2025)                                                               */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


.top-menu-detail-container {
    position: fixed;      
    width: 100%;                                       /* commentaar */
    height: 60px;                                      /* commentaar */
    display: flex;                                     /* Activeer flexbox */
    background-color: #12264c;                       /* commentaar */
    align-items: center;                               /* Verticaal centreren */
    z-index: 1000; /* Zorg dat de div boven andere elementen ligt */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Een subtiele schaduw */
}

.top-menu-detail-div-left {
    flex: 1; /* Verdeel de ruimte gelijkmatig */
    padding: 20px; /* Voeg wat opvulling toe */
    text-align: Left; /* Centreer de tekst */
    margin-left: 10px;
    Font-size: clamp(14px, calc(14px + 2 * ((100vw - 1440px) / 1120)), 16px); 
    color:  #ffffff;   
}

.top-menu-detail-div-left a {
    color: #ffffff; /* Maak de links wit */
    text-decoration: none; /* Optioneel: onderstreping verwijderen */
}

.top-menu-detail-div-left a:hover {
    color: #ffffff; /* Optioneel: een iets andere kleur bij hover */
}


.top-menu-detail-right {
  flex: 1; /* Zorgt voor gelijke verdeling */
  padding: 20px; /* Minder padding om meer ruimte te besparen */
  text-align: right; /* Zorg ervoor dat de knoppen rechts uitgelijnd worden */
  display: flex; /* Zorgt ervoor dat de knoppen netjes naast elkaar blijven */

  justify-content: flex-end; /* Knoppen worden rechts uitgelijnd */
  align-items: center; /* Zorgt ervoor dat de knoppen verticaal gecentreerd zijn */
}











/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* De opmaak van knoppen      #c46c25 (donker                                                    */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

.button {
    background-color: #e0e0e0;                       /* Primaire knopkleur */
    color: #103c4b;                                  /* tekstkleur in de knop */
    border: none;                                      /* Geen rand */
    padding: 5px 20px;                                 /* Ruime tussen de tekst en randen vna de knop */
    text-decoration: none;                             /* geeft aan of er een lijn onder komt "none"/ "underline */
   /* font-size: clamp(12px, calc(11px + 2 * ((100vw - 1440px) / 1120)), 14px);                                  /* lettergrootte van de knop */
    font-family: 'SFProDisplayThin', sans-serif;            /* font type */
    border-radius: 5px;                                /* afronding van de hoeken */
    cursor: pointer;                                   /* hand-icoon bij hover */
    min-width: 25px;
    transition: background-color 0.3s ease;            /* zachte overgang bij hover */
    display: inline-block; 
    margin-right: 20px;                                /* marge aan de rechterzijde van de knop */
}

.button:hover {
    background-color: #c46c25;                       /* kleur van de knop bij hover */
    color: #e1e6e8;                                  /* kleur van de tekst in de knop bij hover */
}

.button:active {
    background-color: #071b21;                       /* kleur van de knop bij hover klikken */
    transform: scale(0.98);                            /* Klein 'klik' effect */
}

a.button, button.button {                              /* class bedoeld voor hyperlinks die als knop worden weergegeven */
    display: inline-block;                             /* Zorgt ervoor dat ze dezelfde inline-block gedrag hebben */
    padding: 5px 0px;                                 /* Gelijke padding voor beide */
    min-width: 45px;
    margin: 5px;                                       /* Gelijke marge voor beide */
    font-size: clamp(12px, calc(11px + 2 * ((100vw - 1440px) / 1120)), 14px);                                  /* Gelijke font-size voor beide */
    line-height: 1.5;                                  /* Gelijke line-height voor beide */
    text-align: center;                                /* Center de tekst in de knoppen */
    vertical-align: middle;                            /* Zorg ervoor dat ze visueel op dezelfde hoogte staan */
    border-radius: 5px;                                /* Maak ze consistent afgerond */

}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* De opmaak van tabllen                                                              */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


/* "tabel_pages_one_column" wordt gebruikt voor de pagein ...._list.php */

.tabel_pages_one_column {
    position: absolute;
    display: grid;                                     /* Gebruik grid in plaats van flexbox */
    grid-template-columns: 1fr;                        /* Zorgt voor 2 kolommen van gelijke breedte */
    grid-gap: 20px;                                    /* Voeg ruimte toe tussen de kolommen en rijen */
    width: calc(100% - 40px);
    top: 70px;
    margin-left: 20px;                                 /* Voeg wat ruimte toe aan de linkerkant */
}


/* "tabel_pages_one_column" wordt gebruikt voor de pagina ...._detail.php */

.tabel_pages_one_column_detail_page.active {
    position: absolute;
    display: grid;                                     /* Gebruik grid in plaats van flexbox */
    grid-template-columns: 1fr;                        /* Zorgt voor 2 kolommen van gelijke breedte */
    grid-gap: 20px;                                    /* Voeg ruimte toe tussen de kolommen en rijen */
    width: calc(100% - 40px);
    top: 170px;    /* was 70 */
    margin-left: 20px;                                 /* Voeg wat ruimte toe aan de linkerkant */
}

.tabel_pages_one_column_detail_page {
    display: none; /* Verbergen als de tab niet is geselecteerd */  
}






/* Zorg ervoor dat de tabelcontainer goed uitgelijnd is en past binnen de detail-container */

.table-container {
    width: 100%;                                       /* Zorg ervoor dat de tabelcontainer de volledige breedte gebruikt */
    padding: 20px;                                     /* Voeg padding toe zodat de inhoud niet vastplakt aan de rand */
    box-sizing: border-box;                            /* Zorgt ervoor dat padding wordt meegerekend in de breedte */
    background-color: #fff;
    box-shadow: 0 2px 10px #0000001A;                /* schaduw van de div */
    padding: 20px;                                     /* de ruime tussen de tabel en de rand van de div */
    border-radius: 5px;                                /* de afronding van de hoeken van div waarin de tabel wordt weergeven */
    margin: 20px 0;                                    /* Zorgt voor verticale ruimte tussen containers */

        /* Zorg ervoor dat de content scrollbaar wordt */
    max-height: calc(100vh - 120px); /* Beperkt de hoogte tot de viewport minus de vaste header */
    overflow: auto; /* Voegt een scrollbar toe als nodig */
  

}

/* Zorg ervoor dat de tabel mooi wordt weergegeven */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0px;                                   /* de ruimte aan de bovenkant en rand van de div (let op padding marge table.container) */
    font-size: clamp(11px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);
    font-family: sans-serif;            /* font type */
    font-weight: 300;
}
/* -------------------------------------------------- */ 
table th, table td {
    border: 0px solid #ddd; /* Rand om elke cel */
    padding: 8px; /* Ruimte binnen de cellen */
    text-align: left;
}

/* Stijl voor de header van de tabel */
table th {
    background-color: #ffffff;                       /* Witte achtergrond voor de header */
    color: #103c4b;                                  /* kleur van de kolomnamen */

}

/* Stijl voor de rijen in de tabel */
table tr:nth-child(even) {
    background-color: #eff6ff     ;                  /*Lich blauw */
}

table tr:nth-child(odd) {
    background-color: #ffffff;                       /* Geel voor oneven rijen (lichtgeel) */
}

table tr:hover {
    background-color: #c1c1c1;                       /* Achtergrondkleur voor hover effect */
}

/* Links in de tabel */
table a {
    color: #103c4b;
    text-decoration: none;
}

table a:hover {
    text-decoration: underline;
	color: #e0e0e0;
}


.highlighted-row {
    font-weight: bold;       /* Tekst dik gedrukt */
    background-color: #deeef9; /* Optioneel: achtergrondkleur voor visuele markering */
}


/* ----------------------------breedte van colommem------------------------------------------------------------------------------- */
    .col-record-id          { width: 6%;}
    .col-date               { width: clamp(45px, ((100vw / 2560) * 90px), 90px);}
    .col-people-nickname    { width: clamp(calc(100px * (1440 / 2560)), calc(100px * (100vw / 2560)), 100px); }
    .col-people-name        { width: auto; }
    .col-city               { width: clamp(calc(225px * (1440 / 2560)), calc(255px * (100vw / 2560)), 255px); }
    .col-country            { width: clamp(calc(100px * (1440 / 2560)), calc(100px * (100vw / 2560)), 100px); }
    .col-country-short      { width: clamp(calc(50px * (1440 / 2560)), calc(50px * (100vw / 2560)), 50px); }
    .col-phone              { width: clamp(calc(150px * (1440 / 2560)), calc(150px * (100vw / 2560)), 150px); }
    .col-email              { width: clamp(calc(200px * (1440 / 2560)), calc(200px * (100vw / 2560)), 200px); }
    .col-link               { width: clamp(calc(60px * (1440 / 2560)), calc(60px * (100vw / 2560)), 60px); }
    .col-linkedin           { width: clamp(calc(100px * (1440 / 2560)), calc(100px * (100vw / 2560)), 100px); }
    .col-recruiter-short    { width: clamp(calc(50px * (1440 / 2560)), calc(50px * (100vw / 2560)), 50px); }
    .col-status-text        { width: clamp(calc(125px * (1440 / 2560)), calc(125px * (100vw / 2560)), 125px); }
    .col-status-symbol      { width: clamp(calc(25px * (1440 / 2560)), calc(25px * (100vw / 2560)), 25px); }
    .col-vacancy            { width: auto;  }
    .col-auto               { width: auto;  }
  	.col-text        		{ width: 80%;}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/*                                                              Grid - Containers    16-2-2025                                                           */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


.detail-page-grid-container-tab-menu {
    position: fixed;      
     width: calc(100% - 20px);
    top: 70px;                                       /* commentaar */
    height: 100px;                                      /* commentaar */
    display: flex;                                     /* Activeer flexbox */
    align-items: center;                               /* Verticaal centreren */
     margin-left: 20px;
    z-index: 1000; /* Zorg dat de div boven andere elementen ligt */
}

.detail-page-grid-container-one-column {
    position: relative; /* Verander naar relative */
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 00px;
    width: calc(100% - 20px);
    top: 170px;    /* was 70 */
    margin-left: 20px;
}


.detail-page-grid-container-one-column-no-tabs {
    position: relative; /* Verander naar relative */
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 00px;
    width: calc(100% - 20px);
    top: 70px;    /* was 70 */
    margin-left: 20px;
}


.detail-page-grid-container-two-columns {
    position: relative; /* Verander naar relative */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 00px;
    width: calc(100% - 20px);
    top: 170px;  /* was 70 */
    margin-left: 20px;
}

.detail-page-grid-container-two-columns-no-tabs {
    position: relative; 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 00px;
    width: calc(100% - 20px);
    top: 70px;
    margin-left: 20px;
}


.detail-page-grid-grid-container-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/*                                                              Form - Containers                                                              */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

.detail-page-form-container-login {                /* de div om een "form-group" en "header" */
    width: 600px;                                       /* commentaar */
    background-color: #fff;                           /* commentaar */
    padding: 20px;                                     /* afstand tussen de container en de formgroup LET OP HIERDOOR KUNNEN DIVS overlappen */
    border-radius: 5px;                                /* commentaar */
    font-family: 'SFProDisplayThin', sans-serif;      /* commentaar */
    margin: 10px 0;                                    /* Zorgt voor verticale ruimte tussen containers letop de afstand gaat x2 */
        border: 2px solid #c46c25; /* Oranje border */
    box-shadow: 0px 6px 10px rgba(196, 108, 37, 0.5); /* Oranje dropshadow */
}





.detail-page-form-container-tabs {                          /* de div om een "form-group" en "header" */
    width: calc(100% - 60px);                          /* commentaar */
    background-color: #fff;                          /* commentaar */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);       /* commentaar */
    padding: 20px;                                     /* afstand tussen de container en de formgroup LET OP HIERDOOR KUNNEN DIVS overlappen */
    border-radius: 5px;                                /* commentaar */
    font-family: 'SFProDisplayThin', sans-serif;             /* commentaar */


}



.detail-page-form-container-always-visible {                          /* de div om een "form-group" en "header" */
    width: calc(100% - 60px);                          /* commentaar */
    background-color: #fff;                          /* commentaar */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);       /* commentaar */
    padding: 20px;                                     /* afstand tussen de container en de formgroup LET OP HIERDOOR KUNNEN DIVS overlappen */
    border-radius: 5px;                                /* commentaar */
    font-family: 'SFProDisplayThin', sans-serif;             /* commentaar */
    margin: 10px 0;                                    /* Zorgt voor verticale ruimte tussen containers letop de afstand gaat x2 */

}

.detail-page-form-container.active {                          /* de div om een "form-group" en "header" */
    width: calc(100% - 60px);                          /* commentaar */
    background-color: #fff;                          /* commentaar */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);       /* commentaar */
    padding: 20px;                                     /* afstand tussen de container en de formgroup LET OP HIERDOOR KUNNEN DIVS overlappen */
    border-radius: 5px;                                /* commentaar */
    font-family: 'SFProDisplayThin', sans-serif;             /* commentaar */
    margin: 10px 0;                                    /* Zorgt voor verticale ruimte tussen containers letop de afstand gaat x2 */
    display: block;
}

.detail-page-form-container {
    display: none; /* Verbergen als de tab niet is geselecteerd */  
}












.detail-page-form-container-600 {                /* UITGESCHAKELD VERIJDEREN???? de div om een "form-group" en "header" */
    width: 600px;                                       /* commentaar */
    background-color: #fff;                           /* commentaar */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);       /* commentaar */
    padding: 20px;                                     /* afstand tussen de container en de formgroup LET OP HIERDOOR KUNNEN DIVS overlappen */
    border-radius: 5px;                                /* commentaar */
    font-family: 'SFProDisplayThin', sans-serif;      /* commentaar */
    margin: 10px 0;                                    /* Zorgt voor verticale ruimte tussen containers letop de afstand gaat x2 */
}





.detail-page-form-container-header {                    /* de div om de header*/
    display: flex;                                      /* commentaar */
    justify-content: space-between;                     /* commentaar */
    align-items: center;                                /* commentaar */
    margin-bottom: 5px;                                 /* commentaar */
}


.detail-page-form-container-header h1 {                
    Font-size: clamp(14px, calc(14px + 2 * ((100vw - 1440px) / 1120)), 16px);                                 
    font-family: sans-serif;                
    font-weight: 500;              
    margin: 0;                                         
}

.detail-page-form-group {                               /* de div om een aantel "form-row's"*/    
    margin-top: 0px;
    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);
    font-weight: 300;
}

.detail-page-form-row {                                 /* opmaak van een rij */
    display: flex;      
    justify-content: space-between;
    margin-bottom: 0px;                                 /* commentaar */
    padding: 0px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 2;
}

.label {                                                /* opmaak van de tekst "label" in een rij */
    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);
    color: #103c4b;;
}

.value-l {
    color: #103c4b;
    flex-grow: 1;
    text-align: left;
}


.value-text-area-100px {
    color: #103c4b;
    border: 1px solid #f0f0f0;
    flex-grow: 1;
    text-align: left;
    min-height: 100px;
    max-height: 100px; /* Maximaliseer de hoogte op 100px */
    overflow-y: scroll;  /* Voeg een verticale scrollbalk toe als de inhoud te lang is */
    display: block;    /* Zorg ervoor dat de inhoud als blok wordt weergegeven */
    resize: none;      /* Verwijder de mogelijkheid om te resizen */
    line-height: 1.5;
}

.value-text-notes {

    color: #103c4b;
    border: 1px solid #f0f0f0;
    flex-grow: 1;
    text-align: left;
    min-height: 168px;
    max-height: 168px; /* Maximaliseer de hoogte op 100px */
    overflow-y: scroll;  /* Voeg een verticale scrollbalk toe als de inhoud te lang is */
    display: block;    /* Zorg ervoor dat de inhoud als blok wordt weergegeven */
    resize: none;      /* Verwijder de mogelijkheid om te resizen */
    line-height: 1.5;
}

.value-text-notebook {
    color: #103c4b;
    flex-grow: 1;
    text-align: left;
    min-height: calc(100vh - 500px);
    max-height: calc(100vh - 500px); /* Maximaliseer de hoogte op 100px */
    overflow-y: scroll;  /* Voeg een verticale scrollbalk toe als de inhoud te lang is */
    display: block;    /* Zorg ervoor dat de inhoud als blok wordt weergegeven */
    resize: none;      /* Verwijder de mogelijkheid om te resizen */
    line-height: 1.5;
}
.value-l a {
    color: #a3103c;
    text-decoration: none;
}

.value-l a:hover {
    text-decoration: underline;
}

.value-c {                                              /*  Opmaak van de "waarde" in een rij waarbij de waarde links is gecentreed */
    color: #103c4b;
    flex-grow: 1;
    text-align: center;
}

.value-c a {
    color: #a3103c;
    text-decoration: none;
}

.value-c a:hover {
    text-decoration: underline;
}

.value-r {                                              /*  Opmaak van de "waarde" in een rij waarbij de waarde rechts is uitgelijnd */
    color: #103c4b;
    flex-grow: 1;
    text-align: right;
}

.value-r a {
    color: #a3103c;
    text-decoration: none;
}

.value-r a:hover {
    text-decoration: underline;
}









/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* styljng voor invoervelden                                                         */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

/* Standaard styling voor alle inputvelden, textarea en select */
input, textarea, select {
    width: 100%;
    padding: 2px;
    margin-bottom: 0px;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-family: 'SFProDisplayThin', sans-serif;
    color: #103c4b; 
    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);
    font-weight: 300;
}

/* Verwijder de standaard blauwe outline bij focus en voeg een aangepaste border toe */
input:focus, textarea:focus, select:focus {
    outline: none; /* Verwijdert de standaard blauwe outline */
    border-color: #103c4b; /* Voeg je eigen kleur toe, bijvoorbeeld donkerrood */
    box-shadow: 0 0 5px rgba(16, 60, 75, 0.5); /* Optioneel: een schaduw voor visueel effect */
}


/* Specifieke styling voor tekstvelden */
input[type="text"] {
}

/* Specifieke styling voor wachtwoordvelden */
input[type="password"] {
}

/* Specifieke styling voor e-mailvelden */
input[type="email"] {

}

/* Standaard styling voor textarea */
textarea {
}

/* Textarea met hoogte van 200px */
textarea.height-200 {
    min-height: 200px;
}

/* Textarea met hoogte van 400px */
textarea.height-400 {
    min-height: 400px;
}



/* Textarea met hoogte van 100px */
.value-text-area-100px {
    flex-grow: 1;
    text-align: left;
    min-height: 100px;
    max-height: 100px; /* Maximaliseer de hoogte */
    overflow-y: scroll;  /* Voeg een verticale scrollbalk toe als de inhoud te lang is */
    display: block;    /* Zorg ervoor dat de inhoud als blok wordt weergegeven */
    resize: none;      /* Verwijder de mogelijkheid om te resizen */
    line-height: 1.5;
}


/* Textarea met hoogte van 168px */
.value-text-area-notes {
    flex-grow: 1;
    text-align: left;
    min-height: 168px;
    max-height: 168px; /* Maximaliseer de hoogte */
    overflow-y: scroll;  /* Voeg een verticale scrollbalk toe als de inhoud te lang is */
    display: block;    /* Zorg ervoor dat de inhoud als blok wordt weergegeven */
    resize: none;      /* Verwijder de mogelijkheid om te resizen */
    line-height: 1.5;

}

/* Textarea met hoogte van 300px */
.value-text-area-notes-300 {
    flex-grow: 1;
    text-align: left;
    min-height: 300px;
    max-height: 300px; /* Maximaliseer de hoogte */
    overflow-y: scroll;  /* Voeg een verticale scrollbalk toe als de inhoud te lang is */
    display: block;    /* Zorg ervoor dat de inhoud als blok wordt weergegeven */
    resize: none;      /* Verwijder de mogelijkheid om te resizen */
    line-height: 1.5;

}





/* Textarea met hoogte van 600px */
.value-text-area-notebook {
    color: #103c4b;
    flex-grow: 1;
    text-align: left;
    min-height: calc(100vh - 300px);
    max-height: calc(100vh - 300px); /* Maximaliseer de hoogte op 100px */
    overflow-y: scroll;  /* Voeg een verticale scrollbalk toe als de inhoud te lang is */
    display: block;    /* Zorg ervoor dat de inhoud als blok wordt weergegeven */
    resize: none;      /* Verwijder de mogelijkheid om te resizen */
    line-height: 1.5;
}


/* Textarea met hoogte van 1200px */
.value-text-area-original_job_posting_description {
    flex-grow: 1;
    text-align: left;
    min-height: calc(100vh - 0px);
    max-height: calc(100vh - 0px); /* Maximaliseer de hoogte */
    overflow-y: scroll;  /* Voeg een verticale scrollbalk toe als de inhoud te lang is */
    display: block;    /* Zorg ervoor dat de inhoud als blok wordt weergegeven */
    resize: none;      /* Verwijder de mogelijkheid om te resizen */
    line-height: 1.5;

}






/* Specifieke breedte voor invoervelden en textarea */
input.short, textarea.short {
    width: 400px; /* Specifieke vaste breedte */
}

/* Specifieke breedte voor invoervelden en textarea */
input.medium, textarea.medium {
    width: 800px; /* Specifieke vaste breedte */
}


/* Specifieke breedte voor dropdowns*/
select.short {
    width: 406px; /* Specifieke vaste breedte */
}



input.medium, textarea.medium, select.medium {
    width: 75%; /* Maakt het veld 75% van de containerbreedte */
}

input.full, textarea.full, select.full {
    width: 100%; /* Maakt het veld 100% van de containerbreedte */
}








/* Standaard styling voor alle select dropdowns */
select {
    background-color: white; /* Witte achtergrond */
    appearance: none; /* Verwijder standaard browser styling voor consistentie */
    -webkit-appearance: none; /* Voor Safari */
    -moz-appearance: none; /* Voor Firefox */
}

/* Styling voor focus state op select */
select:focus {
    outline: none; /* Verwijder standaard blauwe outline bij focus */
    border-color: #103c4b; /* Blauwe rand bij focus */
    box-shadow: 0 0 5px rgba(16, 60, 75, 0.5);
}

/* Styling voor de pijl van de dropdown */
select::after {
    content: '▼'; /* Voeg een pijl toe */
    position: absolute;
    right: 10px;
    top: calc(50% - 5px);
    pointer-events: none; /* Zorgt ervoor dat de pijl niet aanklikbaar is */
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* styljng voor edito                                                        */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

.editor {
    width: 100%;
    height: calc(100vh - 200px); /* Zelfde hoogte als textarea_notes */
    overflow-y: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als het te groot wordt */
    background-color: #fff; /* Optioneel: witte achtergrond */
    border: 1px solid #ccc; /* Optioneel: rand zoals bij een textarea */
    padding: 10px; /* Optioneel: padding voor nette opmaak */
    box-sizing: border-box; /* Zodat padding wordt meegerekend in de totale hoogte */
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* styling van icoonen                                                      */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

.icon-uniform {
    width: 20px; /* Of een gewenste breedte */
    height: 20px; /* Of een gewenste hoogte */

}


/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* styling van notites                                                      */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


.col-text {
    max-width: 400px;          /* kies zelf gewenste breedte */
    white-space: nowrap;       /* voorkom regelafbreking */
    overflow: hidden;          /* verberg overlopende tekst */
    text-overflow: ellipsis;   /* toon "..." bij overloop */
}




/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* popup                                                     */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


/* Popup styling */
.popup {
    display: none; /* Verborgen totdat de knop "Koppel" wordt geklikt */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Semitransparant zwart achtergrond */
}

/* Popup inhoud met login styling */
.popup-content {
    width: 600px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    font-family: sans-serif;    
    margin: 15% auto;
    border: 2px solid #c46c25; 
    box-shadow: 0px 6px 10px rgba(196, 108, 37, 0.5);    
}

/* Grote versie van popup voor documenten of fullscreen weergave */
.popup-content-max {
    width: 90vw;
    height: 85vh;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    font-family: sans-serif;
    margin: 5vh auto;
    border: 2px solid #c46c25;
    box-shadow: 0px 8px 16px rgba(196, 108, 37, 0.5);
    overflow-y: hidden;

}



.popup-content h1 {                                                                          /* de header in een formgroep*/
    Font-size: clamp(14px, calc(14px + 2 * ((100vw - 1440px) / 1120)), 16px);                                 
    font-family: sans-serif;                
    font-weight: 500;              
    margin: 0; 
}



/* Sluitknop styling */
.popup .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.popup .close:hover,
.popup .close:focus {
    color: black;
    text-decoration: none;
}





/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* conen                                */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


.icon-links img {
    width: 75px; /* Standaard breedte */
    height: 75px; /* Standaard hoogte */
    
    margin-right: 10px;
    margin-bottom: 5px;
    transition: transform 0.3s ease; /* Vloeiende animatie bij hover */
}

.icon-links a:hover img {
    transform: scale(1.2); /* Vergroot het icoon bij hover */
}





/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* logo en banner in bedrijven detail pagina                        */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */




.logo-banner-container {



}

.company-logo {
    max-width: 400px;  /* Zorgt ervoor dat het logo niet te groot wordt */
    height: auto;       /* Behoudt de aspect ratio */
    display: block;     /* Zorgt ervoor dat de afbeelding goed wordt uitgelijnd */
    margin: 10px auto;  /* Centreert het logo */


}

.company-banner {
    max-width: 100%;    /* Laat de banner de volle breedte van de container innemen */
    height: auto;       /* Zorgt ervoor dat de hoogte zich automatisch aanpast */
    display: block;     /* Voorkomt inline spacing issues */
    margin: 10px auto;  /* Centreert de banner */
    border-radius: 5px; /* Optionele afronding van de hoeken */

}

.image-viewer {
    max-width: 100%;    /* Laat de banner de volle breedte van de container innemen */
    height: auto;       /* Zorgt ervoor dat de hoogte zich automatisch aanpast */
    display: block;     /* Voorkomt inline spacing issues */
    margin: 10px auto;  /* Centreert de banner */
    border-radius: 5px; /* Optionele afronding van de hoeken */
    background-image: url("images/transparent_background.png");

}


/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* tab-buttons                      */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */




.tab-buttons {
    display: flex;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 15px;
        font-size: clamp(11px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);
    font-family: sans-serif;            /* font type */
    font-weight: 300;
}

.tab-button {
    padding: 10px 15px;
    border: none;
    background: #f1f1f1;
    cursor: pointer;
    flex: 1;
    text-align: center;
        font-size: clamp(11px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);
    font-family: sans-serif;            /* font type */
    font-weight: 300;
}

.tab-button.active {
    color: #FFFFFF;
    background: #c46c25;
}

.tab-content {
    display: none;
    padding: 10px;
    border: 1px solid #ddd;
}

.tab-content.active {
    display: block;
}





/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* Tooltip-popup variant (voor tips) */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

.charCount.tooltip-message {
    color: #c46c25;
    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);
    font-weight: 500;
    padding-left: 10px;      
}

.tooltip-icon i {
    color: #c46c25;
    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1440px) / 1120)), 14px);

}


.popup-tooltip {
    display: none; /* Verborgen totdat de knop "Koppel" wordt geklikt */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Semitransparant zwart achtergrond */

}

.popup-tooltip-content {
    width: 600px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    font-family: sans-serif;    
    margin: 15% auto;
    border: 2px solid #c46c25; 
    box-shadow: 0px 6px 10px rgba(196, 108, 37, 0.5);    
}

.popup-tooltip-content h1 {
    Font-size: clamp(14px, calc(14px + 2 * ((100vw - 1440px) / 1120)), 16px);         
    color: #c46c25;                        
    font-family: sans-serif;                
    font-weight: 800;              
    margin: 0;    
}

.popup-tooltip-content p {
    font-size: 14px;
    color: #12264c;
}

/* Sluitknop voor tooltip */
.popup-tooltip .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}


.popup-tooltip .close:hover,
.popup-tooltip .close:focus {
    color: black;
    text-decoration: none;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* geblokte achtergrond voor afbeeldingen */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */