/********************************************************************/
/* General KPN Style */
/*******************************************************************/

/* Colors */
:root {
  --md-primary-fg-color:               hsl(214.11, 87.16%, 57.25%); 
  --md-primary-fg-color--light:        hsl(214.11, 87.16%, 67.25%);
  --md-primary-fg-color--dark:         hsl(214.11, 87.16%, 47.25%);
  --md-primary-bg-color:               hsl(0, 0%, 99%);
  --md-primary-bg-color--light:        hsl(0, 0%, 100%);

  --md-kpn-accent:                      hsl(120, 100%, 38.24%);
  --md-kpn-accent--light:               hsl(0, 0%, 100%);
  
}

[data-md-color-scheme="slate"] {
  --md-kpn-accent:         hsl(240, 10.53%, 22.35%);
  --md-kpn-accent--light:  hsl(240, 10.53%, 25%);
}

/* Set color of header to KPN color */
.md-header {
  background-color: var(--md-kpn-accent);
}

@media screen and (max-width: 76.2344em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: var(--md-kpn-accent);
  }
}

.md-tabs {
  background-color: var(--md-kpn-accent--light);
  color:            var(--md-default-fg-color);
}

/* Increase logo size */
.md-header__button.md-logo img {
    height: 1.9rem;

}

/* Use KPN font */
@font-face {
  font-family: "KPNExtendedWeb";
  src: "/assets/font/KPNExtendedWeb.woff2";
}
:root {
  --md-text-font: "KPNExtendedWeb"; 
}

.md-typeset table:not([class]), .md-typeset .admonition {
  font-size: 0.75rem;
}
@media print {
md-typeset table:not([class]), .md-typeset .admonition {
    font-size: 0.6rem;
  }
  
}

/* Use KPN style for tables */
html .md-typeset table:not([class]) {
  border-width: 0;
}

.md-typeset table:not([class]) thead th {
  font-weight: bold;
  border-bottom-width: 0.16rem;
  border-bottom-color: var(--md-kpn-accent);
  border-bottom-style: solid;
}

.md-typeset table:not([class]) tbody th {
  border-width: 0.04rem;
  font-weight: bold;
  border-color: #000000;
  border-style: solid;
  border-top-width: 0;
  border-left-width: 0;
}

.md-typeset table:not([class]) tbody td {
  border-width: 0.04rem;
  border-color: #000000;
  border-style: solid;
  border-top-width: 0;
  border-left-width: 0;
}

.md-typeset table:not([class]) tr td:last-child {
  border-right: 0;
}

/* "Tip" admonition: KPN colors and icon */
:root {
  --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h16v16h-16z" fill="none"/><path d="m8 1c-2.76 0-5 2.24-5 5 0 1.58.74 3.05 2 4v1c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-1c1.26-.94 2-2.42 2-4 0-2.76-2.24-5-5-5zm2.22 8.32c-.14.09-.22.25-.22.42v1.26c0 .55-.45 1-1 1h-2c-.55 0-1-.45-1-1v-1.26c0-.17-.08-.32-.22-.42-1.11-.75-1.78-1.99-1.78-3.32 0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.34-.67 2.58-1.78 3.32zm-.22 5.18c0 .28-.22.5-.5.5h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5z"/></svg>');
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: rgb(0, 195, 0);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(0, 195, 0, 0.1);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: rgb(0, 195, 0);
}

/* "Note" admonition: KPN colors and icon */
:root {
  --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h16v16h-16z" fill="none"/><path d="m8 1c-3.86 0-7 3.14-7 7s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm0 13c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm.5-7.5v5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-5c0-.28.22-.5.5-.5s.5.22.5.5zm0-2c0 .28-.23.5-.5.5s-.5-.23-.5-.5.23-.5.5-.5.5.23.5.5z"/></svg>');
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: rgb(0, 102, 238);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(0, 102, 238, 0.1);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: rgb(0, 102, 238);
}

/* "Warning" admonition: KPN colors and icon */
:root {
  --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h16v16h-16z" fill="none"/><path d="m14.57 10.08-4.5-6.99c-.47-.69-1.24-1.11-2.08-1.11s-1.61.42-2.08 1.11l-4.48 6.99c-.52.78-.57 1.74-.13 2.57s1.27 1.32 2.2 1.32h8.98c.94 0 1.76-.49 2.2-1.32s.4-1.79-.12-2.56zm-.76 2.09c-.26.5-.76.79-1.32.79h-8.98c-.56 0-1.06-.3-1.32-.79-.27-.5-.24-1.07.08-1.55l4.49-6.97c.57-.84 1.93-.83 2.49 0l4.5 6.99c.31.47.34 1.04.08 1.54zm-6.31-2.67v-3.46c0-.28.22-.5.5-.5s.5.22.5.5v3.46c0 .28-.22.5-.5.5s-.5-.22-.5-.5zm1 2c0 .28-.23.5-.5.5s-.5-.23-.5-.5.23-.5.5-.5.5.23.5.5z"/></svg>');
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: rgb(255, 102, 0);
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(255, 102, 0, 0.1);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: rgb(255, 102, 0);
}

/* "Deprecated" admonition: KPN colors and icon */
:root {
  --md-admonition-icon--deprecated: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h16v16h-16z" fill="none"/><path d="m14 3h-3c0-1.1-.9-2-2-2h-1.99c-1.1 0-2 .9-2 2h-3c-.28 0-.5.22-.5.5s.22.5.5.5h1v8.5c0 1.38 1.12 2.5 2.5 2.5h4.99c1.38 0 2.5-1.12 2.5-2.5v-8.5h1c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-7-1h1.99c.55 0 1 .45 1 1h-4c0-.55.45-1 1-1zm5 10.5c0 .83-.67 1.5-1.5 1.5h-4.99c-.83 0-1.5-.67-1.5-1.5v-8.5h8v8.5zm-5-6v5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-5c0-.28.22-.5.5-.5s.5.22.5.5zm3 0v5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-5c0-.28.22-.5.5-.5s.5.22.5.5z"/></svg>')
}
.md-typeset .admonition.deprecated,
.md-typeset details.deprecated {
  border-color: rgb(255, 51, 102);
}
.md-typeset .deprecated > .admonition-title,
.md-typeset .deprecated > summary {
  background-color: rgba(255, 51, 102, 0.1);
}
.md-typeset .deprecated > .admonition-title::before,
.md-typeset .deprecated > summary::before {
  background-color: rgb(255, 51, 102);
  -webkit-mask-image: var(--md-admonition-icon--deprecated);
          mask-image: var(--md-admonition-icon--deprecated);
}


/*************************************************/
/* More changes to style, not specific to KPN */
/*************************************************/
/* Icon to indicate that a link is an external link. This is a KPN icon 
.md-typeset a.external-link::after {
  display: inline-block;
  content: '';
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h16v16h-16z" fill="none"/><path d="m14 2.81v3.69c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-2.79l-3.23 3.23c-.1.1-.23.15-.35.15s-.26-.05-.35-.15c-.2-.2-.2-.51 0-.71l3.23-3.23h-2.79c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3.69c.17-.01.42.08.57.23s.24.36.23.58zm-2.5 10.19h-7c-.83 0-1.5-.67-1.5-1.5v-7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v7c0 1.38 1.12 2.5 2.5 2.5h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5z"/></svg>');
  background-repeat: no-repeat;
  width: 0.65rem;
  height: 0.65rem;
  margin-bottom: 0.2rem;
}*/

/* Icon to indicate that a link is an external link. This is a KPN icon */
.md-typeset a.external-link {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h16v16h-16z" fill="none"/><path d="m14 2.81v3.69c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-2.79l-3.23 3.23c-.1.1-.23.15-.35.15s-.26-.05-.35-.15c-.2-.2-.2-.51 0-.71l3.23-3.23h-2.79c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3.69c.17-.01.42.08.57.23s.24.36.23.58zm-2.5 10.19h-7c-.83 0-1.5-.67-1.5-1.5v-7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v7c0 1.38 1.12 2.5 2.5 2.5h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5z"/></svg>');
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 0.65rem;
  padding-right: 0.65rem;
  background-size: 0.65rem;
}

/* A numbered list inside a bullet list should be decimal */
.md-typeset ul ol {
  list-style-type: decimal;
}