:root {
    /* primary colors */
    --md-primary-fg-color:        #585496;
    --md-primary-fg-color--light: #e3e2ee;
    --md-primary-fg-color--dark:  #48457c;

    /* accent colors */
    --md-accent-fg-color:           #7e7bb1;
    /*--md-accent-fg-color--transparent:   hsla(#{hex2hsl(#7e7bb1)}, 0.1); - unclear what it's used for - therefore commented out.*/
  }


/* Square used as background for SVG graphics.
   This base implementation defines mainly the form.
   It also defines a gray default color. */
.icon-square {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6e6e8; 
  border: none;
}

/* Create a flex element to ensure text is center aligned 
   within tables which also use an icon in the same row. */
.td-square {
    height: 40px;
    display: flex;
    align-items: center;
    text-align: left;
    vertical-align: middle;
    border: none;
}

/* Circle used as background for SVG graphics.
   This base implementation defines mainly the form.
   It also defines a gray default color. */
.icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e6e6e8;
    border: none;
}

/* Create a flex element to ensure text is center aligned 
   within tables which also use an icon in the same row. */
.td-circle {
    height: 30px;
    display: flex;
    align-items: center;
    text-align: left;
    vertical-align: middle;
    border: none;
}

/* Definition of colors to be used as background for SVG. */
.color-default {
  background-color: #e6e6e8;
}

.color-disabled {
  background-color: #fcfcff;
}

.color-warning {
  background-color: #ff9800;
}

.color-active {
  background-color: #7e7bb1;
}

/* Create dropshadow for images. */
.drop-shadow {
  box-shadow: 0px 0px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Enable smooth scrolling if TOC is used to jump within pages. */
html {
  scroll-behavior: smooth;
}