@font-face {
  font-family: 'Euclid Square';
  src: url('../fonts/EuclidSquare-Bold.eot');
  src: url('../fonts/EuclidSquare-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/EuclidSquare-Bold.woff2') format('woff2'),
    url('../fonts/EuclidSquare-Bold.woff') format('woff'),
    url('../fonts/EuclidSquare-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Euclid Square';
  src: url('../fonts/EuclidSquare-Regular.eot');
  src: url('../fonts/EuclidSquare-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/EuclidSquare-Regular.woff2') format('woff2'),
    url('../fonts/EuclidSquare-Regular.woff') format('woff'),
    url('../fonts/EuclidSquare-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


:root{
  --c8y-palette-high: #fff;
  --c8y-text-color: var(--c8y-palette-gray-10);
  --c8y-brand-primary: #119d11;
  --c8y-elevation-md-bottom: 0 2px 12px 2px rgba(var(--c8y-elevation-color), .08), 0 2px 18px 4px rgba(var(--c8y-elevation-color), .1);
  --c8y-elevation-sm: 0 0 1px 1px rgba(var(--c8y-elevation-color), .05), 0 2px 2px rgba(var(--c8y-elevation-color), .15);
  --c8y-elevation-color: 1, 31, 61;
  --c8y-body-background-color: var(--c8y-palette-gray-100);

  --c8y-palette-gray-100: #F9FAFB;
  --c8y-palette-gray-90: #F0F2F4;
  --c8y-palette-gray-80: #E8EBED;
  --c8y-palette-gray-70: #E3E5E8;
  --c8y-palette-gray-60: #D4D9DE;
  --c8y-palette-gray-50: #8B96A0;
  --c8y-palette-gray-40: #657381;
  --c8y-palette-gray-30: #4C5967;
  --c8y-palette-gray-20: #303841;
  --c8y-palette-gray-10: #212121;

  --c8y-palette-yellow-80: #fff6db;
  --c8y-palette-yellow-70: #ffe392;
  --c8y-palette-yellow-68: #FBD462;
  --c8y-palette-yellow-65: #FDC931;
  --c8y-palette-yellow-60: #ffbe00;
  --c8y-palette-yellow-50: #ffaa00;
  --c8y-palette-yellow-40: #b35f00;
  --c8y-palette-yellow-30: #794000;
  --c8y-palette-yellow-20: #5e3200;
  --c8y-palette-yellow-10: #4e3a00;

  --c8y-palette-green-80: #eff9ef;
  --c8y-palette-green-75: #e1f4e1;
  --c8y-palette-green-70: #d1ecd1;
  --c8y-palette-green-68: #c1e6c1;
  --c8y-palette-green-60: #a4daa4;
  --c8y-palette-green-50: #6ac26a;
  --c8y-palette-green-40: #119d11;
  --c8y-palette-green-30: #0f880f;
  --c8y-palette-green-20: #0a5c0a;
  --c8y-palette-green-10: #084708;

  --c8y-palette-blue-80: #f1f7fd;
  --c8y-palette-blue-70: #d7e7f8;
  --c8y-palette-blue-60: #b0d0f2;
  --c8y-palette-blue-50: #7fb3ea;
  --c8y-palette-blue-40: #559ae3;
  --c8y-palette-blue-30: #056ad6;
  --c8y-palette-blue-20: #044d9c;
  --c8y-palette-blue-10: #033c79;

  --c8y-palette-status-realtime: #00bb00;
  --c8y-palette-status-success-dark: #007700; /* suitable for text */
  --c8y-palette-status-success-light: #f4fce3;
  --c8y-palette-status-success: #71A112;

  --c8y-palette-status-system: var(--c8y-palette-gray-70);
  --c8y-palette-status-info-dark: var(--c8y-palette-blue-10);
  --c8y-palette-status-info-light: var(--c8y-palette-blue-70);
  --c8y-palette-status-info: var(--c8y-palette-blue-30);
  --c8y-palette-status-danger-dark: var(--c8y-palette-red-10); /* suitable for text */
  --c8y-palette-status-danger-light: var(--c8y-palette-red-80);
  --c8y-palette-status-danger: var(--c8y-palette-red-30);
  --c8y-palette-status-warning-high: var(--c8y-palette-orange-80);
  --c8y-palette-status-warning-light: var(--c8y-palette-yellow-60);
  --c8y-palette-status-warning-dark: var(--c8y-palette-orange-10);
  --c8y-palette-status-warning: var(--c8y-palette-orange-50);
  --c8y-global-separator: var(--c8y-palette-gray-80);

  --h1-font-size: clamp(2.027rem, 3.8vw, 3rem);
  --h2-font-size: clamp(1.802rem, 2.8vw, 2.25rem);
  --h3-font-size: clamp(1.602rem, 2.5vw, 2.1875rem);
  --h4-font-size: clamp(1.424rem, 2.25vw, 1.8125rem);
  --h5-font-size: clamp(1.266rem, 2.125vw, 1.5rem);
}


*,*::after, *::before{
  box-sizing: border-box;
}

body{
  margin: 0;

}


body .api-content h1, 
body .api-content h2, 
body .api-content h3, 
body .api-content h4{
  margin: 0 0 1em;
  font-weight: 600;
  line-height: 1.2;
  font-family: "Euclid Square", "Libre Franklin", "Helvetica", Arial, sans-serif;
  text-wrap: pretty;
}

body .api-content > div > div > div:first-child h1{
  color: var(--c8y-text-color);
}


h1, h2{
  text-transform: uppercase;
}

body .api-content h1{
  margin-top: 0;
  font-size: var(--h1-font-size);
  text-transform: uppercase;
  @media(min-width: 992px){
    font-size: 36px;
  }
}


h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child){
  padding-top: 3rem;
}

body .api-content h2{
  font-size: var(--h2-font-size);
  text-transform: uppercase;
  @media(min-width: 992px){
    font-size: 30px;
  }
}

body .api-content  h3{
  font-size: var(--h3-font-size);
  @media(min-width: 992px){
    font-size: 24px;
  }
  }

body .api-content h4{
  font-size: var(--h4-font-size);
  @media(min-width: 992px){
    font-size: 20px;
  }
}

body h1, h2, h3, h4{
  margin: 0 0 1em;
}


.menu-content > div:first-child{
  padding: 1rem 1.2rem;
}

.menu-content a>img{
  max-width: 100%;
}

.menu-content .active{
  background-color: var(--c8y-palette-gray-80);
  box-shadow: inset 4px 0 0 0 var(--c8y-brand-primary);
  color: var(--c8y-text-color);
  font-weight: bold;
}

.menu-content ul li *{
  font-family: "Public Sans", Arial, Helvetica, sans-serif;
}

.menu-content ul li:hover *{
  color: var(--c8y-text-color);
}


body div .api-content blockquote{
  background-color: var(--c8y-palette-gray-90);
  color: var(--c8y-text-color);
  padding: 1rem;
  border-left: 4px solid var(--c8y-palette-gray-30);
  border-right: 4px solid var(--c8y-palette-gray-30);
  border-radius: .5rem;
}
body div .api-content blockquote p:first-child{
  margin-top: 0;
}


body .api-content pre{
  border-radius: .5rem;
}

/* release banners */
#c8y-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  padding: 10px 0px;
  z-index: 50;
  text-align: center;
  vertical-align: center;
  font-family: "Public Sans","Helvetica",Arial,sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #212121;
}
#c8y-banner.deprecated {
  background-color: var(--c8y-palette-status-danger-light);
}
#c8y-banner.preview {
  background-color: var(--c8y-palette-green-80);
}