/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

 /* Import fonts. */

/* poppins */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: normal;
  src: local(''),
       url('../fonts/poppins/poppins-regular.woff') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins/poppins-regular.woff2') format('woff'), /* Modern Browsers */
}

/* Roboto-Mono */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: normal;
  src: local(''),
       url('../fonts/roboto-mono/roboto-mono-regular.woff') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-mono/roboto-mono-regular.woff2') format('woff'), /* Modern Browsers */
}

/* Lato */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: normal;
  src: local(''),
       url('../fonts/lato/lato-regular.woff') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato/lato-regular.woff2') format('woff'), /* Modern Browsers */
}

@tailwind base;

@layer base {
  :root {
    --docs-color-primary-100: 26 144 255;
    --docs-color-primary-200: 33 96 253;

    --docs-color-secondary-700: 232 232 236;
    --docs-color-secondary-800: 245 245 247;
    --docs-color-secondary-900: 251 251 251;
    --docs-color-secondary-1000: 255 255 255;

    --docs-color-text-400: 71 71 71;
  }

  html[data-theme='dark'] {
    --docs-color-text-400: 153 153 153;

    --docs-color-secondary-700: 71 71 71;
    --docs-color-secondary-800: 38 38 38;
    --docs-color-secondary-900: 25 25 25;
    --docs-color-secondary-1000: 0 0 0;
  }

  body {
    @apply font-sans antialiased;
  }

  table td:nth-child(1) {
    overflow-wrap: normal;
  }

  td {
    width: auto;
    overflow-wrap: anywhere; /* For browser compatibility */
  }

  .homepage a {
    --ifm-link-hover-color: currentColor;
  }

  .no-underline-links {
    --ifm-link-hover-decoration: none;
  }

  a {
    @apply cursor-pointer;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    @apply font-jakarta;
  }

  .homepage section,
  .homepage section * {
    @apply box-border;
  }
}

:root {
  --ifm-color-primary-lightest: #80bbe2;
  --ifm-color-primary-lighter: #5eaadb;
  --ifm-color-primary-light: #53a4d8;
  --ifm-color-primary: #3d98d3;
  --ifm-color-primary-dark: #2d8bc8;
  --ifm-color-primary-darker: #2b83bc;
  --ifm-color-primary-darkest: #236c9b;
  --ifm-code-font-size: 95%;

  --docs-color-border: #dadde1;

  --docs-color-text: #000000;
  --docs-color-text-100: #646464;

  --docs-color-background: #ffffff;
  --docs-color-background-100: #f8f8f8;
  --docs-color-background-200: #efefef;
  --docs-color-background-300: #dcdcdc;
}

@media (max-width: 768px) {
  #theme-main h1 {
    font-size: 50px !important;
    line-height: 3rem !important;
    font-weight: 700
  }
  #theme-main .header-docs {
    margin-bottom: 20px;
  }
}

body {
  font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

code {
  font-family: 'Roboto Mono', monospace;
}

dd {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

dt {
  font-weight: bold;
  margin-top: 1rem;
}

dl p {
  font-size: .9rem;
  font-weight: lighter;
  margin-inline-start: 40px; /*This is intended to match the margin spacing for the dd element*/
  margin-bottom: 0;
}

hr {
  background-image: -webkit-linear-gradient(left,#f3f3f3,#adadb1,#f3f3f3);
  margin: 0 auto;
}

.navbar__brand {
  height: 40px;
}

.btn.navbar__github {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: initial;
  border: 2px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.66;
  border-radius: 3px;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

a.btn.navbar__github {
  border: 2px solid transparent;
  padding: 8px 20px 7px 47px;
  font-size: 1rem;
  line-height: 1.66;
  font-weight: 400;
  position: relative;
}

a.btn.navbar__github {
  font-family: poppins,sans-serif;
  text-decoration: none;
  align-items: center;
  border-radius: 3px;
}

.btn-secondary.navbar__github:hover {
  color: #fff;
  background-color: #273230;
  border-color: #222a29;
}

a.btn.navbar__github::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20.5 20%22%3E%3Cdefs/%3E%3Cpath fill=%22%23fff%22 d=%22M10.3.0C4.6.0.0 4.6.0 10.3c0 4.4 2.8 8.3 7 9.7.5.1.7-.2.7-.5v-1.9c-2.6.5-3.2-.6-3.4-1.2-.2-.6-.6-1.1-1-1.5-.4-.2-.9-.7.0-.7.7.1 1.3.5 1.6 1 .6 1.1 1.9 1.4 3 .8.0-.5.3-1 .7-1.4-2.3-.3-4.7-1.1-4.7-5.1.0-1 .4-2 1.1-2.8-.5-.6-.5-1.6-.1-2.5.0.0.9-.3 2.8 1.1 1.7-.5 3.4-.5 5.1.0 2-1.3 2.8-1.1 2.8-1.1.4.9.5 1.9.2 2.8.7.7 1.1 1.7 1.1 2.8.0 3.9-2.4 4.8-4.7 5.1.5.5.7 1.2.7 1.9v2.8c0 .3.2.6.7.5 5.4-1.8 8.3-7.6 6.5-13C18.6 2.8 14.7.0 10.3.0z%22/%3E%3C/svg%3E");
  height: 20px;
  width: 20px;
  position: absolute;
  left: 15px;
  top: 10px;
}


.icon-github.navbar__github {
  margin-left: 20px;
}

.btn-secondary.navbar__github {
  color: #fff!important;
  border-color: #384745;
  background-color: #384745;
  box-shadow: inset 0 1px rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

/* Navbar "More from SUSE" items. Thanks to Nunix. https://github.com/rancher/elemental-docs/pull/235 */

.navbar__icon {
  font-family: poppins,sans-serif;
  font-size: 16px;
}

.navbar__icon:before {
  content: "";
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 4px;
  background-color: var(--ifm-navbar-link-color);
}

.navbar__rancher:before {
  mask: url(/static/img/header/icon-rancher.png) no-repeat 100% 100%;
  mask-size: contain;
  width: 35px;
  background-color: #2e68e9;
}

.navbar__elemental:before {
  mask: url(/static/img/header/icon-elemental.png) no-repeat 100% 100%;
  mask-size: cover;
  width: 35px;
  height: 22px;
  padding-bottom: 7px;
  background-color: #7100d4;
}

.navbar__fleet:before {
  mask: url(/static/img/header/icon-fleet.png) no-repeat 100% 100%;
  mask-size: cover;
  width: 35px;
  height: 22px;
  padding-bottom: 7px;
  background-color: #00b056;
}

.navbar__harvester:before {
  mask: url(/static/img/header/icon-harvester.png) no-repeat 100% 100%;
  mask-size: cover;
  width: 35px;
  height: 22px;
  padding-bottom: 7px;
  background-color: #00a580;
}

.navbar__rancher__desktop:before {
  mask: url(/static/img/header/icon-rancher-desktop.png) no-repeat 100% 100%;
  mask-size: cover;
  width: 35px;
  height: 22px;
  padding-bottom: 7px;
  background-color: #0081be;
}

.navbar__suse:before {
  mask: url(/static/img/header/icon-suse.png) no-repeat 100% 100%;
  mask-size: cover;
  width: 35px;
  height: 13px;
  padding-bottom: 7px;
  background-color: #30ba78;
}


/* These styles are authored by bravemaster619 https://dev.to/bravemaster619/simplest-way-to-embed-a-youtube-video-in-your-react-app-3bk2 */
.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

img[src$='#terminal'] {
  display: block;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.pad {
  padding: 0 1rem;
}

.center {
  width: 100%;
  max-width: 1080px;
  margin: 1rem auto;
  min-height: 400px;
}

.homepage-content {
  padding-bottom: 6rem;
}

#hero {
  padding: 2rem 0 1.5rem 0;
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--docs-color-border);
}

#hero h2 {
  font-size: 36px;
}

#hero p {
  color: var(--docs-color-text-100);
}

.section-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.two-cols .section-content {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.has-sub-sections > h3 {
  margin-bottom: 1.5rem;
}

.has-sub-sections > .section-content {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.has-sub-sections > .section-content > .homepage-section {
  margin-bottom: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.homepage-section {
  margin-bottom: 3rem;
}

.homepage-section h3 {
  font-weight: 600;
}

.section-description {
  color: var(--docs-color-text-100);
  margin: 0rem 0 1.25rem 0;
  margin-top: -0.5rem;
}

.has-sub-sections > .section-content .section-description {
  font-size: 14px;
}

.homepage-card {
  align-items: flex-start;
  gap: 10px;
  padding: 0.75rem;
  text-decoration: none;
  color: var(--docs-color-text);

  --ifm-link-hover-decoration: none;
  --ifm-link-hover-color: inherit;
  cursor: pointer;
  @apply flex flex-row items-center;
  @apply border-secondary-800 bg-secondary-900 hover:bg-secondary-800;
  border-width: 1px;
  transition-property: background-color, color;

  border-radius: 8px;
}

.homepage-card.row {
  flex-direction: row;
}

.icon svg {
  width: auto;
  height: 100%;
}

.homepage-card .icon {
  width: 48px;
  height: 48px;
  @apply mx-1;
  /* background-color: #262626;
  border-radius: 8px; */
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-content .title {
  font-size: 16px;
  letter-spacing: -0.5px;
  font-weight: 600;
}

.card-content .description {
  font-size: 14px;
  color: var(--docs-color-text-100);
  line-height: 1.5;
}

.homepage-card details {
  font-size: 14px;
  font-weight: 500;
  color: var(--docs-color-text-100) !important;
  background: var(--docs-color-background-100) !important;
  border: solid 2px var(--docs-color-code-background) !important;
}

details code {
  background-color: var(--docs-color-background);
}

details p {
  font-weight: 300;
}

@media screen and (max-width: 1160px) {
  /* Hide icons when header UI breaks */
  .pseudo-icon {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .section-content {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .two-cols .section-content {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.cardTitle_node_modules-\@docusaurus-theme-classic-lib-theme-DocCard-styles-module {
  font-size: 0.88rem !important;
}

.cardDescription_node_modules-\@docusaurus-theme-classic-lib-theme-DocCard-styles-module {
  display: none;
}