@import url('lsds.css');

@font-face {
  font-family: '72Brand';
  src: url('72BrandVariable.woff2') format('woff2');
  font-style: normal;
}

@font-face {
  font-family: '72Mono';
  src: url('72Mono-Regular.woff2') format('woff2');
  font-style: normal;
}

@font-face {
  font-family: 'SAP-icons';
  src: url('SAP-icons-SVG.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}

:root {
  --bs-body-font-family: '72Brand',Arial,Helvetica,sans-serif;

  --lsds-spacing-0: 0px;
  --lsds-spacing-2: 0.125rem;  /* // 2px */
  --lsds-spacing-4: 0.25rem; /* // 4px */
  --lsds-spacing-6: 0.375rem; /* // 6px */
  --lsds-spacing-8: 0.5rem; /* // 8px */
  --lsds-spacing-12: 0.75rem; /* // 12px */
  --lsds-spacing-16: 1rem; /* // 16px */
  --lsds-spacing-20: 1.25rem; /* // 20px */
  --lsds-spacing-24: 1.5rem; /* // 24px */
  --lsds-spacing-32: 2rem; /* // 32px */
  --lsds-spacing-40: 2.5rem; /* // 40px */
  --lsds-spacing-48: 3rem; /* // 48px */
  --lsds-spacing-56: 3.5rem; /* // 56px */
  --lsds-spacing-64: 4rem; /* // 64px */
  --lsds-spacing-72: 4.5rem; /* // 72px */
  --lsds-spacing-80: 5rem; /* // 80px */
  --lsds-spacing-96: 6rem; /* // 96px */
  --lsds-spacing-120: 7.5rem; /* // 120px/*  */
  
  --lsds-border-radius-xs: 2px;
  --lsds-border-radius-s: 4px;
  --lsds-border-radius-m: 8px;
  --lsds-border-radius-l: 16px;
  --lsds-border-radius-xl: 20px;
  --lsds-border-radius-xxl: 100px;
  --lsds-border-radius-circle: 50%;
  --lsds-border-radius-12: 12px;
  
  /* // aliases */
  --lsds-container-margin-s: var(--lsds-spacing-24);
  --lsds-container-margin-m: var(--lsds-spacing-48);
  --lsds-container-margin-l: var(--lsds-spacing-72);
  --lsds-container-margin-xl: var(--lsds-spacing-96);
  --lsds-buttons-container-gap: var(--lsds-spacing-12);
  --main-header-height: var(--lsds-spacing-64);
  --mobile-breadcrumbs-height: 42px;
  --breadcrumbs-height: 60px;
  --mobile-navbar-height: var(--lsds-spacing-64);
  --mobile-navbar-height-compact: -52px;
  
  --GridSystemScreenWidth: 100%;
  --GridSystemGridWidth: 100%;

  --label-l-semi-bold-font-size: 1rem;
  --label-m-semi-bold-font-size: 0.875rem;
  --label-semi-bold-line-height: 1;
  --label-semi-bold-font-weight: 500;
}

@media (min-width: 360px) {
  :root {
    --GridSystemMargin: 24px;
    --br-width: 312px;
    --Button1Width: 100%;
    --ButtonGap: 8px;
    --display-btn-group: grid;
    --ComponentsContainerPadding: var(--lsds-spacing-16);
    --font-size-ml: 14px;
    --font-size-sm: 12px;
    --font-size-lg: 14px;
    --inner-banner-message-height: 76px;
    --foot-font-size: 16px;
    --foot-letter-spacing: 0;
  }

  #badge-skills-title{
    font-size: var(--label-m-semi-bold-font-size);
    padding-bottom: var(--lsds-spacing-12);
  }
}

@media (min-width: 744px) {
  :root {
    --GridSystemMargin: 24px;
    --br-width: 648px;
    --ButtonGap: 12px;
    --Button1Width: auto;
    --display-btn-group: flex;
    --ComponentsContainerPadding: var(--lsds-spacing-24);
    --font-size-ml: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 16px;
    --inner-banner-message-height: 72px;
  }

  #badge-skills-title {
    font-size: var(--label-m-semi-bold-font-size);
    padding-bottom: var(--lsds-spacing-12);
  }
}
@media (min-width: 1280px) {
  :root {
    --GridSystemMargin: 48px;
    --br-width: 824px;
    --ButtonGap: 12px;
    --Button1Width: auto;
    --display-btn-group: flex;
    --ComponentsContainerPadding: var(--lsds-spacing-24);
    --inner-banner-message-height: 72px;
    --font-size-lg: 16px;
  }

  #badge-skills-title{
    font-size: var(--label-l-semi-bold-font-size);
    padding-bottom: var(--lsds-spacing-16);
  }
}
@media (min-width: 1440px) {
  :root {
    --GridSystemMargin: 96px;
    --br-width: 824px;
    --ButtonGap: 12px;
    --ComponentsContainerPadding: var(--lsds-spacing-24);
    --inner-banner-message-height: 72px;
    --foot-font-size: 20px;
    --foot-letter-spacing: 0.12em;
    --font-size-lg: 18px;
  }
  
  #badge-skills-title{
    font-size: var(--label-l-semi-bold-font-size);
    padding-bottom: var(--lsds-spacing-16);
  }
}

html, body {
  color: var(--Text-Primary);
  height: 100%;
}

.sap-header {
  background: var(--Masthead-Color-Background, #F5F6F7);
  width: var(--GridSystemScreenWidth);
  height: var(--MastheadSizeHeight, 60px);
  padding: var(--lsds-spacing-16) var(--GridSystemMargin) 0px var(--GridSystemMargin);
  gap: 24px;
  opacity: 0px;
  
}

.sap-header #header_learning {
font-family: "72Brand", Arial, Helvetica, sans-serif;
font-size: var(--font-size-ml);
font-weight: 700;
line-height: 18px;
text-align: left;
color: var(--Masthead-Color-Heading-Default, #354A5F);
padding: 23px 0px 0px 0px;
}

.sap-footer {
  background: var(--Surface-Secondary, #F5F6F7);
  color: var(--Color-Grey-3, #D5DADD);
  width: var(--GridSystemScreenWidth);
  height: 100px;
  padding: var(--lsds-spacing-40) var(--lsds-spacing-96) var(--lsds-spacing-40) var(--lsds-spacing-96);
  gap: var(--lsds-spacing-0);
  opacity: 0px;
  
}

.sap-learning-footer {
  font-family: "72Mono", "Helvetica", sans-serif;
  font-size: var(--foot-font-size);
  font-weight: 400;
  line-height: 23px;
  letter-spacing: var(--foot-letter-spacing);
  text-align: left;
}

.container-tile {
  width: var(--GridSystemScreenWidth);
  padding: var(--lsds-spacing-32) var(--GridSystemMargin) var(--lsds-spacing-0) var(--GridSystemMargin);
  gap: var(--ComponentsContainerRowGap);
  border: 1px 1px 3px 1px;
  opacity: 0px;
  background: var(--Surface-Primary, #FFFFFF);

}

.inner-banner-message {
  background: var(--Subtle-Surface-01, #EBF8FF);
  border: 1px solid var(--Subtle-Border-01, #A6E0FF);
  width: var(--GridSystemGridWidth);
  height: var(--inner-banner-message-height, 72px);
  padding: var(--ComponentsContainerPadding);
  gap: var(--lsds-spacing-16);
  border-radius: var(--lsds-border-radius-m);
  opacity: 0px;
  
}

.badge-owner {
font-family: "72Brand", Arial, Helvetica, sans-serif;
font-size: var(--inner-banner-message-font-size, 16);
font-weight: 400;
line-height: 24px;
text-align: left;
color: var(--Text-Primary, #223548);

}
.badge-owner span {
  font-weight: 500;
}

.frame9 {
  width: var(--GridSystemGridWidth);
  height: 282px;
  padding: var(--lsds-spacing-16) 0px var(--lsds-spacing-16) 0px;
  gap: 10px;
  border-radius: var(--lsds-border-radius-m);
  opacity: 0px;
  display: flex;
  justify-content: center;
}

.badge-img {
  width: 250px;
height: 250px;
gap: 8.33px;
opacity: 0px;

}

/* CSS to flatten the ul and li list */
ul.flat-list {
  list-style: none; /* Remove bullet points */
  padding: 0;
  margin: 0; /* Remove margin */
  display: flex; /* Align items in a row */
  gap: var(--lsds-spacing-8);
  flex-flow: wrap;
}

ul.flat-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; /* Remove margin from list items */
  min-height: 30px;
  padding: var(--lsds-spacing-8) var(--lsds-spacing-12) var(--lsds-spacing-8) var(--lsds-spacing-12);
  border-radius: var(--lsds-border-radius-xxl);
  opacity: 100;
  background: var(--Subtle-Surface-01, #F5F6F7);
  font-size: var(--font-size-sm, 14px);
  font-weight: 400;
  line-height: 14px;
}

.badge-type {
  font-weight: 500;
  font-size: var(--font-size-ml);
}

.badge-record {
  width: var(--br-width);
  gap: var(--lsds-spacing-24);
  opacity: 0px;
}

.badge-record #badge_info {
  height: var(--lsds-spacing-24);
}

.badge-details {
  width: var(--br-width);
  font-size: var(--font-size-lg, 18px);
  font-weight: 400;
  line-height: 27px;
  text-align: left;
  margin-bottom: 2em;
}

.badge-skills {
  width: var(--br-width);
  display: flex;
  flex-wrap: wrap;
}

.skill-item {
height: 30px;
padding: var(--lsds-spacing-8) var(--lsds-spacing-12) var(--lsds-spacing-8) var(--lsds-spacing-12);
border-radius: var(--lsds-border-radius-xxl);
opacity: 0px;
background: var(--Subtle-Surface-01, #F5F6F7);
font-size: var(--font-size-sm, 14px);
font-weight: 400;
line-height: 14px;
}

#badge-skills-title {
  font-weight: var(--label-semi-bold-font-weight);
  line-height: var(--label-semi-bold-line-height);
  flex-basis: 100%;
}

.badge-buttons-row {
  width: var(--br-width);
  display: var(--display-btn-group, flex);
  opacity: 0px;
  height: 116px;
  padding: var(--lsds-spacing-24) 0px var(--lsds-spacing-48) 0px;
  gap: var(--ButtonGap);

}

.btn-1 {
  font-size: var(--font-size-ml);
  font-weight: 500;
  width: var(--Button1Width, auto);
  padding: 12px;
  line-height: 16px;
  border-radius: var(--lsds-border-radius-m);
}