.md-header{
  background-color: #5F41D9;
}

h2 {
  padding-top: 4%;
} 

h4 {
  padding-top: 4%;
} 

/* make the first column wider as usually this is a variable name that cant wrap normally */
th:nth-child(1){
     width: 35%;
}

div.big-summary th:nth-child(1){
    width: 30%;
}

div.filter-details th:nth-child(1){
    width: 20%;
}

/* change the table colors for light mode */
[data-md-color-scheme="default"] table th{
  background: #D8DADE;
}

[data-md-color-scheme="default"] table tr td{
  background: white;
}

/* change the table colors for dark mode */
[data-md-color-scheme="slate"] table th{
  background: #2B4252;
}

[data-md-color-scheme="slate"] table tr td{
  background: #2E2F3E;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #FFFFFF;
}

/* change links colors for dark mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #40A0B5;
}

/* fix so tables takes the whole page width */
.md-typeset__table {
   min-width: 100%;
}

.md-typeset table:not([class]) {
    display: table;
}

/*div.tabbed-block code {
  max-height: 250px;
}
*/

.video-wrapper {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.video-wrapper > iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

div.flow-chart {
}

.md-typeset .md-button {
  border: .05rem solid;
  border-radius: .3rem;
  padding: .25em 1.5em .25em 1em;
  font-weight: 400;
}

.result .extra {
  font-weight: 100;
  color: gray;
}