* {
    box-sizing: border-box;
}

/* Style the header */
.header {
    padding: 40px;
    text-align: center;
    background: #f5f5f5;
    color: #000FAA;
}

/* Increase the font size of the h1 element */
.header h1 {
    font-size: 40px;
    color: #000FAA;
    text-align: center;
    margin-left: 10px;
    padding-left: 10px;
    border-radius: 10px;
}

.logo img {
    float: left;
}

/*  Colors updated from - to (to make it less 'orange')
   #FF6700   #B7B7B7
   #FDA468   #8D8D8D
   #FFBC1F   #ADADAD
   #ff6700;
*/

/* Style the top navigation bar */
.navbar {
    overflow: hidden;
    background-color: #8D8D8E;
}

/* Style the navigation bar links */
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
    float: right;
}

/* Change color on hover */
.navbar a.active {
    background-color: #B7B7B7;
    color: black;
}

/* Change color on hover */
.navbar a:hover {
    background-color: #ADADAD;
    color: black;
}

/* Column container */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 20%;
    background-color: #F1F1F1;
    padding: 20px;
}

/* Logo column */
.logo {
    flex: 20%;
    background-color: white;
    padding: 20px;
}

/* Main column */
.main {
    flex: 80%;
    background-color: white;
    padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row {
        flex-direction: column;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}

/* Create TABs from CSS with slider from: https://www.youtube.com/watch?v=4gkdSPEHf8Q */
.widget {
  width: 80vw;
    /* max-width:800px; 600 px 1100px or fit-content or max-content or calc(max-content -20px) */
  max-width: fit-content;
  padding: 1rem;
  margin: 1rem auto;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.5);  /* 0 10px 20px 0 rgba(0, 0, 0, 0.025); */
}

.tabs {
  --tab-count: 3;
  --active: 0;  /* create a variable that will hold the active tab */
  position: relative; /* relative */
  isolation: isolate; /* Determine if an element is rendered in its own stacking context or not. (see CSS isolation) */
  display: flex;
  height: 3.5rem;
  border-block-end: 1px solid #e9ebec;
}
.tabs input {
  display: none; /* hide the radio buttons */
}
.tabs label {
  flex: 1;
  display: flex;
  justify-content: center; /* horizontal alignment within the tab */
  align-items: center; /* vertical alignment within the tab */
  /* make them look good with some presentational styles: */
  font-size: 0.9375rem;
  font-weight: 600;
  color: #656d7b;
  cursor: pointer;
  transition: color 0.5s ease-in-out;
}

/* if a radio button (an input button) (even invisible) inside the tabs container is checked (selected), then change the color of the label that comes right after */
.tabs input:checked + label {
  color: #101010;
}

/* active tab marker */
.tabs::after {
  pointer-events: none;
  position: absolute;
  content: "";  /* Since it is positioned absolutely we have to prove a content, even empty */
  z-index: -1; /*  lay it down in the stacking order "send to back" */
  inset: 0 0 -1px;  /* combining top,bottom,left, right */
  width: calc((100% / var(--tab-count)) - 2px);  /* the active tab highlight should be 1/3 of the available width we have 3 tabs) */
  border-radius: 0.5rem 0.5rem 0 0;
  border: 1px solid #e9ebec;
  border-block-end: none;
  background-image: linear-gradient(#edf4ff, #fff);

  /* position the marker according to the selected tab */
  /*
      1st = 0 * 100% = 0%
      2nd = 1 * 100% = 100%
      3rd = 2 * 100% = 200%
  */
  translate: calc(var(--active) * 100%);
  transition: translate 1s ease-in-out;
}

/* if a tab is clicked, update it based on the index of the clicked tab */
.tabs:has(:checked:nth-of-type(1)) {
  --active: 0;
}
.tabs:has(:checked:nth-of-type(2)) {
  --active: 1;
}
.tabs:has(:checked:nth-of-type(3)) {
  --active: 2;
}

.tab-content {
  padding: 1rem;
}
/* hide it by default - Tell the browser to hide any info whose classname starts with tab-content- */
[class^="tab-content-"] {
  display: none;
}

/* use the has pseudo class to determine the active tab and make its corresponding content visible */
.widget:has(:checked:nth-of-type(1)) .tab-content-1,
.widget:has(:checked:nth-of-type(2)) .tab-content-2,
.widget:has(:checked:nth-of-type(3)) .tab-content-3 {
  display: block;
}


/* ****************************************************/

    /*
    Main Rabobank Colors
      https://brandportal.rabobank.nl/portal/doc?nodeid=5253

      blue 700:   #000FAA
      blue 500:   #0058FF
      orange 500: #FF6700  ->  #676767
      orange 300: #FFBC1F
      gray 200:   #EFEFEF
      white:      #FFFFFF

    Secondary Colors :
      https://brandportal.rabobank.nl/portal/doc?nodeid=5642

      blue 900:   #000060
      blue 700:   #000FAA
      blue 500:   #0058FF
      blue 300:   #0089ff
      blue 100:   #58c9ff

      orange 900: #801604
      orange 700: #e03000
      orange 500: #FF6700
      orange 300: #FFBC1F
      orange 100: #ffd983

      green 900:  #006e46
      green 700:  #009354
      green 500:  #00b269
      green 300:  #00cd87
      green 100:  #55E6b4

      gray 900:   #202122
      gray 800:   #414244
      gray 700:   #5f6063
      gray 600:   #737578
      gray 500:   #9c9ea0
      gray 400:   #bbbcbe
      gray 300:   #e0e0e1
      gray 200:   #EFEFEF
      gray 100:   #f5f5f5

      black:      #000000
      white:      #FFFFFF
    */
    /* Page */
    body {
        padding: 5;
        margin: 0;
        background-color: #ffffff;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        width: 99%;
      }

      /* Headers */
      h1 {
        color: #000FAA;
        margin-left: 10px;
        padding-left: 10px;
        border-radius: 10px;
        /* box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); */
      }

      h2 {
        background-color: #8D8D8E;
        color: #ffffff;
        padding-left: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        margin-left: 10px;
        border-radius: 5px;
      }

      h3 {
        color: #FFFFFF;
        background-color: #ADADAD;
        padding-left: 10px;
        padding-top: 2px;
        padding-bottom: 4px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-radius: 5px;
        /* box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); */
      }

      /* Tables */
      th {
        font-weight: bold;
        background-color: #676767;
        color: #ffffff;
        text-align: left;
        padding-left: 10px;
        border-radius: 5px;
      }

      td {
        padding-left: 10px;
      }

      tr {
        vertical-align: top;
      }

      tr:nth-child(even) {
        background-color: #EFEFEF;
      }

      .td-styled {
        padding-left: 0px;
      }

      .l1 {
        padding-left: 10px;
        font-weight: bolder;
      }

      .l2 {
        padding-left: 20px;
        font-weight: bold;
      }

      .l3 {
        padding-left: 30px;
      }

      .active {
        color: #00cd87;
      }
      .inactive {
        color: #000000;
      }
      .expired {
        color: #e03000;
      }

      .thumbprint {
        font-family: 'Courier New', Courier, monospace;
      }

      /* Main table for most outside table, 1 per outer block (current vs legacy) */
      .main-table {
        width: 99%;
        border-collapse: collapse;
        font-size: 0.9em;
        font-family: sans-serif;
        margin-left: 10px;
        margin-right: 10px;
      }
      /* Styled table, 1 per environment */
      .styled-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9em;
        font-family: sans-serif;
        margin:0;
        padding:0;
        /* box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); */
      }
      /* inner table, within a CA to collapse previous certificate information */
      .inner-table {
        width: 100%;
        border-collapse: collapse;
      /*  font-size: 0.9em; */
        font-family: sans-serif;
        margin:0;
        padding:0;
        /* box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); */
      }
      .inner-table td {
        border-style: solid;
        border: 1px;
        padding-left: 0px;
      }

/*   row    900px
      c1    270   270    30%   30%
      c2    350   630    38%   70%  56%
      c3    97           11%        15%
      c4    97           11%        15%
      c5    43            5%         7%
      c5    43            5%         7%   */
/*   row    1000px
      c1    310   310    31%   30%
      c2    370   690    37%   70%  54%
      c3    110          11%        16%
      c4    110          11%        16%
      c5    50            5%         7%
      c5    50            5%         7%   */
      .Col1 { width: 31%; }
      .Col2 { width: 37%; }
      .Col3 { width: 11%; }
      .Col4 { width: 11%; }
      .Col5 { width: 5%; }
      .Col6 { width: 5%; }
      .ColI2 { width: 54.5%; }
      .ColI3 { width: 16.25%; }
      .ColI4 { width: 16.25%; }
      .ColI5 { width: 7%;  }
      .ColI6 { width: 7%;  }

      /*  ToolTip */
            /* Tooltip container */
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
      }
      /* Tooltip text */
      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;

        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
      }
      /* Show the tooltip text when you mouse over the tooltip container */
      .tooltip:hover .tooltiptext {
        visibility: visible;
      }


      /* Expanding sections using pure HTML and CSS, from:
        https://dev.to/jordanfinners/creating-a-collapsible-section-with-nothing-but-html-4ip9
        https://dev.to/ananyaneogi/html-can-do-that-c0n

        https://slar.se/collapsing-and-expanding-html-elements-using-mostly-css.html
      */

      details {
        user-select: none;
      }

      details>summary span.icon {
        width: 24px;
        height: 24px;
        transition: all 0.5s;
        margin-left: auto;
      }

      details[open] summary span.icon {
        transform: rotate(180deg);
      }

      summary {
        display: flex;
        cursor: pointer;
      }

      summary::-webkit-details-marker {
        display: none;
      }

      /* End Expanding sections 1 */

      /* Expanding sections using pure HTML and CSS, from:
        https://slar.se/collapsing-and-expanding-html-elements-using-mostly-css.html
      */

      /* the sidebar class is just an arbitrary container for this example */
      .sidebar {
        width: 30%;
        padding: 1em;
        border: black solid 2px;
      }

      .collapse-trigger::after {
        content: "▼";
        float: right;
      }
      .collapse-trigger.active {
        visibility: hidden;
      }

      .collapse-trigger.active::after {
        content: "▲";
      }

      .collapsible {
        display: none;
      }

      .collapse-trigger.active+.collapsible {
        display: block;
      }

      /* End Expanding sections 2 */