@charset "utf-8";
/* CSS Document 
    VivA face lift 2024
*/


/* header */
.cookiesTop {
  z-index: 999;
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center horizontally for flexbox */
  align-items: center; /* Center vertically for flexbox */
}

.cookieBTN {
  padding: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color:#27a;
}

.cookieBTN:hover {
  background-color:#27a9e1;
}
.navBox {
  background-color: #f2f2f2;
  width: 250px;
  height: 100vh;
  position: fixed;
  margin-top: 0;
  margin-left: 0;
      }

.navSec {
  background-color:#f2f2f2;
        float:left;
        width: 250px;
        height: 100vh;
}

.sideBarContainer {
  background-color:#f2f2f2;
    float:left;
    width: 250px;
    height: 100vh;
    position: fixed;
  }

  .sideBarStyle {
    float: left;
    background-color:#f2f2f2;
    height: 100vh;
  }

.sideBarTitle {
    padding: 10px 10px;
    color: #666;
  }
  .sideBarTitleBlock {
    color: #666;
    padding: 5px;
    height: 20px;
    font-weight: bold;
  }

  .sideBarMenuItem {
    color: #666;
    background-color:#f2f2f2;
    padding: 15px;
    height: 50px;
    display: flex;
    justify-content: space-between; /* Objects spaced evenly */
    align-items: center; 
    width: 250px;
  }
  .sideBarMenuItemActive {
    color: white;
    background-color: #27a9e1;
    padding: 15px;
    height: 50px;
    font-weight: bold;
    display: flex;
    justify-content: space-between; /* Objects spaced evenly */
    align-items: center; 
    width: 250px;
  }

  .sideBarMenuItemActive a {
    /* Reset unwanted styles for the <a> tag within .sideBarMenuItemActive */
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    padding: inherit;
    height: inherit;
    border-radius: inherit;
    font-weight: inherit;
    display: inherit;
    justify-content: inherit; /* Objects spaced evenly */
    align-items: inherit; 
    width: inherit;
    /* Add any other styles you want to reset */
  }

  .sideBarMenuItem a {
    /* Reset unwanted styles for the <a> tag within .sideBarMenuItemActive */
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    padding: inherit;
    height: inherit;
    border-radius: inherit;
    font-weight: inherit;
    display: inherit;
    justify-content: inherit; /* Objects spaced evenly */
    align-items: inherit;
    width: inherit;
    /* Add any other styles you want to reset */
  }

  .App-logo {
    height: 40vmin;
    pointer-events: none;
  }
  .sideBarHero {
    display: flex;
    justify-content: center;
    align-items: center; /* Center-align content vertically */
    background-color: #fff !important; /* Ensure the background color is applied */
  }
  
  .sideBarHero img {
    max-width: 100%; /* Ensure the image doesn't exceed its container's width */
    height: auto; /* Maintain the image's aspect ratio */
    margin: auto; /* Center-align the image horizontally */
  }

  .appHero {
    height: fit-content;
    background-color: #27a9e1;
    padding: 20px;
    padding-left: 260px;
  }
  
  .appHeroTextLine{
    padding-top: 10px;
    color: #fff;
    font-size: clamp(24px, 2vw, 32px);
    
  }
  /* header */

  /* page content */

  .pageContentContainer {
   margin-left: 250px;
  }

  /* meta Dropdown/accordion */

  .metaDropdownContainer {
    
    margin-top: auto;
   }

  .testGus {
    background-color: purple;
  }

.accordionG-container {
  display: flex;
  flex-direction: column;
}
  .accordionG {
    /*zoom: 1; */
    margin-bottom: 0;
   
  }
  
  .accordionG:before,
  .accordionG:after {
    content: " ";
    display: table;
  }
  
  .accordionG:after {
    clear: both;
  }
  
  .accordionG dd {
    display: block;
    margin-bottom: 0 !important;
  }
  
  .accordionG dd.active a {
    background: #e8e8e8;
  }
  
  .accordionG dd > a {
    background: #efefef;
    color: #222;
    padding: 1rem;
    display: block;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 1rem;
  }
  
  .accordionG dd > a:hover {
    background: #e3e3e3;
  }
  
  .accordionG .content {
    display: none;
    padding: 0.5em;
  }
  
  .accordionG .content.active {
    display: block;
    background: #fff;
  }

  /* Reset styles */
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

a {
  color: #dd2523;
  text-decoration: none;
  line-height: inherit;
}

a:hover,
a:focus {
  color: #dd2523;
}

a img {
  border: none;
}

p {
  font-family: inherit;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-rendering: optimizeLegibility;
}

/* plus drop down vir meta */

.meta-top-plus-flex {
  display: flex; /* Use Flexbox */
  align-items: center; /* Align items vertically */
  flex-direction: row; /* Ensure items are in a row */
}

.accordion-navigation {
  display: flex; /* Use Flexbox */
  align-items: center; /* Align items vertically */
  flex-direction: row; /* Ensure items are in a row */
}

.meta-top-plus-flex h6 {
  display: flex; /* Use Flexbox */
  align-items: center; /* Align items vertically */
  flex-direction: row; /* Ensure items are in a row */
  padding: 10px;
}

.img-plus-g {
  background-color: red;
}

/* advanced */

.advancedContainer {
  padding: 20px;
  align-items: center; /* Align items vertically */
}

/* korpusinligting */

.infoMargin {
  margin-left: 20px;
}

.infoContainer {
  padding-left: 10px;
}

.infoSection {
  margin-top: 20px;
  padding-bottom: 40px;
  padding-right: 20px;
  max-width: 80%;
}

.infoBlock {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding-top: 5px;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  margin-bottom: 30px;
  word-wrap: break-word; /* Add word wrapping */
}

.infoKPVHead {
  padding: 20px;
}

.infoBlockHead {
  font-weight: bold;
  font-size: 20px;
}

.infoBlockHeroImg {
  width: 50%;
  max-width: 250px;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 25px;
}

/* footer (sien "G update" in whitelab.css) */

.footerBumper {
  height: 50px;
  width: 100%;
}