/* Loads IBM Plex Mono */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Loads IBM Plex Sans */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Loads special editor template fonts */
@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Freeman&family=Libre+Baskerville&family=Pacifico&family=Playfair+Display&family=Poppins&family=Satisfy&display=swap');/**

* @license
 *
 * Font Family: Satoshi
 * Designed by: Deni Anggara
 * URL: https://www.fontshare.com/fonts/satoshi
 * © 2023 Indian Type Foundry
 *
 * Font Styles:
 * Satoshi Variable(Variable font)
 * Satoshi Variable Italic(Variable font)
 * Satoshi Light
 * Satoshi Light Italic
 * Satoshi Regular
 * Satoshi Italic
 * Satoshi Medium
 * Satoshi Medium Italic
 * Satoshi Bold
 * Satoshi Bold Italic
 * Satoshi Black
 * Satoshi Black Italic
 *
*/

/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 300.0 to 900.0)

*/

@font-face {
  font-family: 'Satoshi-Variable';
  src: url('/fonts/Satoshi-Variable.woff2') format('woff2'),
    url('/fonts/Satoshi-Variable.woff') format('woff'),
    url('/fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 300.0 to 900.0)

*/

@font-face {
  font-family: 'Satoshi-VariableItalic';
  src: url('/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
    url('/fonts/Satoshi-VariableItalic.woff') format('woff'),
    url('/fonts/Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Light';
  src: url('/fonts/Satoshi-Light.woff2') format('woff2'),
    url('/fonts/Satoshi-Light.woff') format('woff'),
    url('/fonts/Satoshi-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-LightItalic';
  src: url('/fonts/Satoshi-LightItalic.woff2') format('woff2'),
    url('/fonts/Satoshi-LightItalic.woff') format('woff'),
    url('/fonts/Satoshi-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Regular';
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2'),
    url('/fonts/Satoshi-Regular.woff') format('woff'),
    url('/fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-Italic';
  src: url('/fonts/Satoshi-Italic.woff2') format('woff2'),
    url('/fonts/Satoshi-Italic.woff') format('woff'),
    url('/fonts/Satoshi-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Medium';
  src: url('/fonts/Satoshi-Medium.woff2') format('woff2'),
    url('/fonts/Satoshi-Medium.woff') format('woff'),
    url('/fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-MediumItalic';
  src: url('/fonts/Satoshi-MediumItalic.woff2') format('woff2'),
    url('/fonts/Satoshi-MediumItalic.woff') format('woff'),
    url('/fonts/Satoshi-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Bold';
  src: url('/fonts/Satoshi-Bold.woff2') format('woff2'),
    url('/fonts/Satoshi-Bold.woff') format('woff'),
    url('/fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-BoldItalic';
  src: url('/fonts/Satoshi-BoldItalic.woff2') format('woff2'),
    url('/fonts/Satoshi-BoldItalic.woff') format('woff'),
    url('/fonts/Satoshi-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Black';
  src: url('/fonts/Satoshi-Black.woff2') format('woff2'),
    url('/fonts/Satoshi-Black.woff') format('woff'),
    url('/fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-BlackItalic';
  src: url('/fonts/Satoshi-BlackItalic.woff2') format('woff2'),
    url('/fonts/Satoshi-BlackItalic.woff') format('woff'),
    url('/fonts/Satoshi-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}

/* Loads Inter Font */

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: url("/fonts/Inter-Thin.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-Thin.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: url("/fonts/Inter-ThinItalic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-ThinItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: url("/fonts/Inter-ExtraLight.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-ExtraLight.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: url("/fonts/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/Inter-Light.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-Light.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/Inter-LightItalic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-LightItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Regular.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Italic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-Italic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Inter-Medium.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-Medium.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-MediumItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Inter-Bold.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-BoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Inter-ExtraBold.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-ExtraBold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/Inter-Black.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-Black.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/Inter-BlackItalic.woff2?v=3.19") format("woff2"),
       url("/fonts/Inter-BlackItalic.woff?v=3.19") format("woff");
}

/* -------------------------------------------------------
Variable font.
Usage:

  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }
*/
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("/fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("/fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
}


/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.

Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.

When using this, you will probably need to set font-variation-settings
explicitly, e.g.

  * { font-variation-settings: "slnt" 0deg }
  .italic { font-variation-settings: "slnt" 10deg }

*/
@font-face {
  font-family: 'Inter var experimental';
  font-weight: 100 900;
  font-display: swap;
  font-style: oblique 0deg 10deg;
  src: url("/fonts/Inter.var.woff2?v=3.19") format("woff2");
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
}

a:hover {
  cursor: pointer
}

a:visited {
  color: #00897C;
}

a.no-styles {
  color: inherit;
  text-decoration: none;
}

a.no-styles:visited {
  color: inherit;
  text-decoration: none;
}

a.contrast {
  color: 'white';
  text-decoration: none;
}

a.contrast:visited {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

/* Loads Material Symbols */


.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 700,
  'GRAD' 0,
  'opsz' 48
}

.nutrition-report-group-row {
  background-color: rgba(0, 150, 136, 0.04);
}
.loading-svg-container {
  display: inline-block;
  perspective: 500px; /* Adjusts the depth of the 3D effect */
}

@keyframes spinY {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.loading-svg-container svg {
  display: block;
  /* Ensures the animation lasts 1 seconds and loops infinitely */
  animation: spinY 1s infinite cubic-bezier(.48,.03,.53,.96);
  /* Preserves 3D transformations by creating a new stacking context */
  transform-style: preserve-3d;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

/* Special fonts css classes */
.playfair-display-regular {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.freeman-regular {
  font-family: "Freeman", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}

.satisfy-regular {
  font-family: "Satisfy", cursive;
  font-weight: 400;
  font-style: normal;
}

.courgette-regular {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
}

.inter-regular {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
}