/* HTML Tags Styling */

/* Styling for Components */

#logo {
  padding: 0px;
}

/* Header Styling */

#docs-header {
  background-color: #2167AE !important;
  --z-stage--bg: #2167AE !important;
  --z-bg: #2167AE !important;
  --z-sf-base: #2167AE !important;
}

#header-button {
  margin-top: 15px;
  border: 0;
}

/* Documentation Main Styling */
/* Base Styles */

#docs-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 32px;
  z-index: 999;
}

#docs-main-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}

#docs-specs {
  margin-top: 32px;
  margin-bottom: 32px;
  display: block;
}

#docs-specs li {
  font: var(--zf-h-20);
}

#docs-claims-process {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 24px;
}

.process-card {
  --z-card--width: 16%;
  --z-card--bg: var(--zc-blue-light);
  --z-card--color: white;
  align-items: center;
  text-align: center;
  width: var(--z-card--width);
}

#highlighted { 
  --z-card--bg: #2167AE;
}

#content p {
  font: var(--zf-h-20);
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  #docs-main-wrapper {
    margin-left: 32px;
    margin-right: 32px;
    width: calc(100% - 64px); /* Subtracting margins from the total width */
  }

  #hide-me {
    display: none;
  }

  #docs-claims-process {
    flex-direction: column;
    align-items: center;
  }

  .process-card {
    width: 100%;
    margin-bottom: 16px;
  }

  #docs-specs {
    display: none;
  }

  #docs-specs-mobile {
    display: block;
  }
}

/* Portrait (768px < x ≤ 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  #docs-main-wrapper {
    width: 690px;
  }
}

/* Landscape (992px < x ≤ 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  #docs-main-wrapper {
    width: 930px;
  }
}

/* Desktop (≥ 1200px) */
@media (min-width: 1200px) {
  #docs-main-wrapper {
    width: 1110px;
  }
}