:root {
  /* Primary color */
  --deep-purple: #7E56C2;

  /* = APIs admonition = */
   --md-admonition-color--api: #FF9800;
   --md-admonition-background--api: #FF980022;
   --md-admonition-shadow--api: #FF98001A;
   --md-admonition-shadow--a-hover: #e68a00;

  /* = Components admonition = */
  --md-admonition-color--component: #7E56C2;
  --md-admonition-background--component: #7E56C222;
  --md-admonition-shadow--component: #7E56C21A;

  /* = Icons admonition = */
  
  /* == APIs admonition == */
  --md-admonition-icon--batch: url('data:image/svg+xml;charset=utf-8,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-building-warehouse"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21v-13l9 -4l9 4v13" /><path d="M13 13h4v8h-10v-6h6" /><path d="M13 21v-9a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v3" /></svg>');
  --md-admonition-icon--database: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>database-outline</title><path d="M12 3C7.58 3 4 4.79 4 7V17C4 19.21 7.59 21 12 21S20 19.21 20 17V7C20 4.79 16.42 3 12 3M18 17C18 17.5 15.87 19 12 19S6 17.5 6 17V14.77C7.61 15.55 9.72 16 12 16S16.39 15.55 18 14.77V17M18 12.45C16.7 13.4 14.42 14 12 14C9.58 14 7.3 13.4 6 12.45V9.64C7.47 10.47 9.61 11 12 11C14.39 11 16.53 10.47 18 9.64V12.45M12 9C8.13 9 6 7.5 6 7S8.13 5 12 5C15.87 5 18 6.5 18 7S15.87 9 12 9Z" /></svg>');
  --md-admonition-icon--api-miscellaneous: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>folder-open-outline</title><path d="M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z" /></svg>');


  /* == Components admonition == */
  --md-admonition-icon--texts: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>format-text</title><path d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" /></svg>');
  --md-admonition-icon--inputs: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>form-textbox</title><path d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,15V9H17V15H20Z" /></svg>');
  --md-admonition-icon--feedback: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>comment-outline</title><path d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10Z" /></svg>');
  --md-admonition-icon--interactive: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>touch-text-outline</title><path d="M7 7H17V9H7V7M12.69 15.81H13.2V15H7V17H10.38L10.71 16.65C11.18 16.13 11.92 15.81 12.69 15.81M9 19H5V5H19V13.56L21 14.45V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H11.33L9 19M7 13H13.2V11.73C13.2 11.5 13.25 11.24 13.31 11H7V13M15.2 19.07L12.85 17.81H12.69C12.5 17.81 12.29 17.89 12.15 18.04L11.61 18.61L15.2 21.69C15.39 21.89 15.66 22 15.93 22H20.7C21.3 22 21.78 21.5 21.8 20.9V17.7C21.8 17.28 21.57 16.89 21.18 16.71L17.55 15.11L16.67 15V11.73C16.67 11.33 16.34 11 15.93 11C15.53 11 15.2 11.33 15.2 11.73V19.07Z" /></svg>');
  --md-admonition-icon--containers: url('data:image/svg+xml;charset=utf-8,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-box-model"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 8h8v8h-8z" /><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /><path d="M16 16l3.3 3.3" /><path d="M16 8l3.3 -3.3" /><path d="M8 8l-3.3 -3.3" /><path d="M8 16l-3.3 3.3" /></svg>');

}

/* Customization about content tab to apply primary color*/
.js .md-typeset .tabbed-labels:before {
  background-color: var(--deep-purple);
}

.md-typeset .tabbed-set {
  border: 0.5px solid lightgray;
}

/* Applying some style to images and videos */
.shadow {
  border-radius: 12px;
  box-shadow: var(--md-shadow-z1);
}

.mobile-appearance {
    max-width: 300px;
    max-height: 700px;
}

/* = Custom admonitions = */

/* == APIs admonitions == */
.md-typeset details.api-miscellaneous,
.md-typeset details.database,
.md-typeset details.batch {
  border-color: var(--md-admonition-color--api);
}

.md-typeset .api-miscellaneous > summary,
.md-typeset .database > summary,
.md-typeset .batch > summary {
  background-color: var(--md-admonition-background--api);
}

.md-typeset .api-miscellaneous > ul a,
.md-typeset .database > ul a,
.md-typeset .batch > ul a {
  color: var(--md-admonition-color--api);
}

.md-typeset .api-miscellaneous > ul a:active,
.md-typeset .database > ul a:active,
.md-typeset .batch > ul a:active  {
  color: var(--md-admonition-shadow--a-hover);
}

.md-typeset .api-miscellaneous > .admonition-title::before,
.md-typeset .api-miscellaneous > summary::after,
.md-typeset .database > .admonition-title::before,
.md-typeset .database > summary::after,
.md-typeset .batch > .admonition-title::before,
.md-typeset .batch > summary::after {
  color: var(--md-admonition-color--api);
}

.md-typeset .admonition.api-miscellaneous:focus-within,
.md-typeset details.api-miscellaneous:focus-within,
.md-typeset .admonition.database:focus-within,
.md-typeset details.database:focus-within,
.md-typeset .admonition.batch:focus-within,
.md-typeset details.batch:focus-within {
  box-shadow: 0 0 0 .2rem var(--md-admonition-shadow--api);
}

.md-typeset .api-miscellaneous > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--api-miscellaneous);
  mask-image: var(--md-admonition-icon--api-miscellaneous);
}

.md-typeset .database > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--database);
  mask-image: var(--md-admonition-icon--database);
}

.md-typeset .batch > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--batch);
  mask-image: var(--md-admonition-icon--batch);
}

.md-typeset .api-miscellaneous > summary::before,
.md-typeset .database > summary::before,
.md-typeset .batch > summary::before {
  background-color: var(--md-admonition-color--api);
}

/* == Components admonitions == */
.md-typeset details.texts,
.md-typeset details.inputs,
.md-typeset details.feedback,
.md-typeset details.interactive,
.md-typeset details.containers {
  border-color: var(--md-admonition-color--component);
}

.md-typeset .texts > .admonition-title,
.md-typeset .texts > summary,
.md-typeset .inputs > .admonition-title,
.md-typeset .inputs > summary,
.md-typeset .feedback > .admonition-title,
.md-typeset .feedback > summary,
.md-typeset .interactive > .admonition-title,
.md-typeset .interactive > summary,
.md-typeset .containers > .admonition-title,
.md-typeset .containers > summary {
  background-color: var(--md-admonition-background--component);
}

.md-typeset .texts > .admonition-title::before,
.md-typeset .texts > summary::after,
.md-typeset .inputs > .admonition-title::before,
.md-typeset .inputs > summary::after,
.md-typeset .feedback > .admonition-title::before,
.md-typeset .feedback > summary::after,
.md-typeset .interactive > .admonition-title::before,
.md-typeset .interactive > summary::after,
.md-typeset .containers > .admonition-title::before,
.md-typeset .containers > summary::after {
  color: var(--md-admonition-color--component);
}

.md-typeset .admonition.texts:focus-within,
.md-typeset details.texts:focus-within,
.md-typeset .admonition.inputs:focus-within,
.md-typeset details.inputs:focus-within,
.md-typeset .admonition.feedback:focus-within,
.md-typeset details.feedback:focus-within,
.md-typeset .admonition.interactive:focus-within,
.md-typeset details.interactive:focus-within,
.md-typeset .admonition.containers:focus-within,
.md-typeset details.containers:focus-within {
  box-shadow: 0 0 0 .2rem var(--md-admonition-shadow--component);
}

.md-typeset .texts > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--texts);
  mask-image: var(--md-admonition-icon--texts);
}

.md-typeset .inputs > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--inputs);
  mask-image: var(--md-admonition-icon--inputs);
}

.md-typeset .feedback > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--feedback);
  mask-image: var(--md-admonition-icon--feedback);
}

.md-typeset .interactive > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--interactive);
  mask-image: var(--md-admonition-icon--interactive);
}

.md-typeset .containers > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--containers);
  mask-image: var(--md-admonition-icon--containers);
}

.md-typeset .texts > summary::before,
.md-typeset .inputs > summary::before,
.md-typeset .feedback > summary::before,
.md-typeset .interactive > summary::before,
.md-typeset .containers > summary::before {
  background-color: var(--md-admonition-color--component);
}