.md-header{
  background-color: #3F2B95;
}

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%;
}

div.trigger-details th:nth-child(2){
    width: 30%;
}

div.commands-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;
}

/* Dark mode to match the app*/
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1F2025;
}

/* 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: 0 0.25em 0 0.25em;
  font-weight: 400;
}

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

.tabbed-content .md-typeset .admonition {
  font-size: .8rem;
}

.md-typeset .admonition, .md-typeset details {
  font-size: .8rem
}

.automationDescription{
  width:40%;
}
.automationImage{
  width: 59%;
  float: right;
}

.automationExample{
  width: 100%;
  clear: both;
}

@media (max-width: 769px) {
  .automationImage, .automationDescription {
    width: 100%;
  }
}

.integrations-list {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

.integrations-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  width: 200px;
  margin: 10px;
  padding-bottom: 15px;
}

/* change the integrations-card colors for light mode */
[data-md-color-scheme="default"] .integrations-card{
  border: 2px solid #212121;
}

/* change the integrations-card colors for dark mode */
[data-md-color-scheme="slate"] .integrations-card{
  border: 2px solid white;
}

.integrations-card-title p{
  font-size: 1.2em;
  margin-bottom: 1px;
}

.integrations-card-title a{
  color: inherit;
}

.integrations-card-title img{
  padding:2px;
  width:auto;
  height: 1.2em;
}

.integrations-card-logo-only img{
  padding:2px;
  width:auto;
  height: 3em;
}

.integrations-card-labels {
  font-size: 0.7em;
  color: #9aa4ad; /* this is a medium grey color */
  margin-bottom: 5px;
}

a[href='ff5757'] {
    color: #ff5757;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

a[href='7ed957'] {
    color: #7ed957;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

a[href='0cc0df'] {
    color: #0cc0df;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

a[href='ffde59'] {
    color: #ffcc59;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}