/* Make all anchors on the page slightly lower so they don't get clipped by the header */
*[id] {
  scroll-margin-top: 65px;
}

/* Turns off smooth scrolling */
html {
  scroll-behavior: auto !important;
}

img {
  max-width: 100%;
  object-fit: contain;
  height: auto;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container.page {
  position: relative;
}
body .no-margin {
  margin: 0;
  padding: 0;
}
#ji-hover-layer {
  position: relative;
  z-index: 999;
}

#download-menu > .dropdown-menu {
  width: 50rem;
  padding: 2rem;
}

.download-popup-menu .popover-arrow {
  display: none;
}

body .popover.download-options {
  width: 620px;
  min-width: 500px !important;
  max-width: 90% !important;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
}

.betanotice {
  top: 0;
  width: 100%;
  background-color: #f7f1da;
  color: #d24939;
  text-align: center;
  font-weight: bold;
  z-index: 100;
}

body h1.page-title {
  font: bold 4rem 'georgia';
  margin-top: -0.2rem;
}

body h1.page-title .in-tag {
  display: none;
}

.sub-heading {
  margin: -0.5rem 0 1rem;
}
.fixed.top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

.text-right {
  text-align: right;
}

.carousel-item {
  min-height: 27rem;
  background: #fff;
}

.carousel-item .app-button {
  --button-background: currentColor;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.carousel-item video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.67;
}

.carousel-item .mask {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 100px 10px #fff;
}

/* so that banner do not float over fixed navbar*/
.carousel {
  z-index: 9;
}

/* for same font-size in popups*/
.dropdown-menu p {
  font-size: 0.875rem !important;
}
/* fix for windows chrome which renders size of dropdown button 1px less because of round-off */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .chromeOnly {
    height: 36px;
  }
}

.authors,
.authors > .auth {
  display: inline-block;
  padding-bottom: 5px;
  margin: 0;
}

.authors > .auth > a {
  font-size: 50px;
  padding: 5px;
  border: 1px solid;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.authors > .auth > a:hover {
  background: #def;
}

div .authors {
  display: block;
  padding: 0;
  margin-bottom: 3rem;
}

.row.body {
  padding-top: 3rem;
}

.no-margin .row {
  margin: 0;
}

.container.center {
  text-align: center;
}

.center > .center {
  display: inline;
  float: none;
  display: inline-block;
}

body .jumbotron {
  margin: 0;
}

body .card-block {
  display: block;
}

.jumbotron.featured {
  background-color: #168bb9;
}

.jumbotron.featured a {
  color: #fff;
  text-decoration: none !important;
}

.jumbotron.featured .row > div {
  position: relative;
}

.jumbotron.featured .icon-docker.big {
  font-size: 300px;
  position: absolute;
  right: 0;
  top: -4rem;
  text-decoration: none;
}

.tint {
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.25);
}

img.desaturate {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

.img-box {
  display: block;
  overflow: hidden;
  float: left;
  line-height: 132px;
  height: 132px;
  width: 112px;
  padding: 0 10px;
  box-sizing: content-box;
  border: 1px solid #ccc;
  background: #fff;
  margin: 2px;
}

.img-box > img {
  width: 100%;
  vertical-align: middle;
  position: relative;
  top: -5px;
}

.media-row,
.step-by-step {
  text-align: center;
  padding: 2rem 1rem 3rem;
  white-space: nowrap;
  overflow-x: auto;
  overflow: visible;
  position: relative;
  border-bottom: 0.1rem solid #ccc;
}

.media-row {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}

.media-row > .header,
.step-by-step > .container > .header {
  margin-bottom: 1.75rem;
}

.media-row > .media,
.step-by-step > .container.step {
  vertical-align: top;
  cursor: pointer;
  font-size: 0.9rem;
}
.date-time,
.step-by-step > .container .step .card-title {
  display: inline-block;
  text-align: center;
  width: 4.75em;
  height: 4.75em;
  padding: 0.5em;
  background: #168bb9;
  color: #fff;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
}
.date-time > .date,
.step-by-step > .container .step .card-title > .tag {
  font-size: 0.75em;
  font-weight: normal;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 0.5em 0 0.25em;
  background: rgba(180, 40, 40, 0.85);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
.date-time > .date .small {
  font-size: 0.5em;
}

body .date-time {
  border-radius: 0.5em;
  height: 5.3em;
  width: 5.3em;
}
.date-time > .date > * {
  display: inline;
}
.date-time > .date > .dow {
  display: block;
  position: absolute;
  bottom: -1.1em;
  left: -1em;
  right: -1.15em;
  font-size: 6em;
  font-family: 'arial narrow';
  font-weight: bolder;
  color: rgba(0, 0, 0, 0.15);
  text-align: center;
}
.date-time > .time {
  font-size: 1.1em;
  line-height: 0.67em;
  position: relative;
  margin: 2em -1em 0;
}
.step-by-step > .container .step .card-title > .num {
  font-size: 2em;
  line-height: 1em;
  margin-top: 0.67em;
}
.step-by-step > .container .step .title {
  font-size: 1.1rem;
  white-space: nowrap;
}
.step-by-step > .container .step .short {
  font-size: 0.75rem;
  line-height: 1.5em;
  overflow: hidden;
  display: block;
  margin: 0 0.5rem 0.5rem;
  overflow: hidden;
}
/* default padding removed so that text dont get cropped */
.card-block {
  padding-bottom: 0;
}

.media-row > .media {
  width: 14rem;
  height: auto;
  min-height: 16rem;
  text-align: left;
  font-size: 85%;
  margin: 0.25rem;
}

.media-row > .media > img {
  width: 100%;
}

.media-row > .media > .card-block {
  width: 100%;
  white-space: normal;
  padding: 0.75rem;
}

.media-row > .media > .card-block p {
  line-height: 1.2em;
}

.media-row > .media .media-title {
  font-size: 1.25rem;
  margin-bottom: 0.125rem;
}

.quote-row {
  background: #f9f9f9;
  box-shadow: inset 0 10px 100px rgba(0, 0, 0, 0.25);
  border-radius: 0;
  white-space: normal;
}

.quote-row .card.important {
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  font-size: 1rem;
  margin-top: -1rem;
  white-space: normal;
}

.quote-row .card.important p {
  font-size: 1rem;
}

#directory td > a {
  display: block;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

#directory td > a > img {
  height: 40px;
  width: 40px;
}

#directory tr {
  vertical-align: top;
}

#directory tr td .title {
  font-weight: bold;
}

#directory tr td .description {
  font-size: 75%;
}

#welcome,
body #sidebar ul.resources {
  padding-bottom: 3rem;
  position: relative;
  border-top: 1px solid #ccc;
  padding-top: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 2rem;
}

#welcome > div {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3rem;
}

#welcome > div > a {
  display: block;
  padding-left: 40px;
  margin-left: 1rem;
  position: absolute;
  top: 0;
  font-weight: bold;
}

#sidebar #welcome > div > img {
  position: absolute;
  top: 0;
  left: 4px;
  height: 32px;
  width: 32px;
}

#sidebar #welcome > .content {
  position: relative;
  height: auto;
}

#sidebar ul.resources,
#sidebar ul.resources > li,
#sidebar ul.resources > li > a {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

body #sidebar ul.resources > li > a {
  padding: 0 0 0.5rem 40px;
  margin-left: 1rem;
  font-weight: bold;
}

body .ji-dated-list > .post {
  border-top: 0.1rem solid #ccc;
  margin-bottom: 0.5rem;
}

.ji-dated-list,
.ji-item-list,
.ji-item-list > post,
.ji-item-list > post > .body,
.ji-item-list > .post > .body {
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 1rem;
}
.events .ji-item-list {
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  overflow-x: auto;
  overflow-y: visible;
  border-bottom: 1px solid #ccc;
  vertical-align: top;
}

.events .ji-item-list > .event {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}
.events .ji-item-list > .event > a {
  width: 16rem;
  padding: 0.75rem;
  margin: 1rem 0.25rem 0.25rem;
  white-space: normal;
  text-decoration: none;
}
.events .ji-item-list > .event > a .title {
  margin: 0.75rem 0 0.25rem;
  height: 1.1rem;
  overflow: hidden;
  position: relative;
}
.events .ji-item-list > .event > a .title:after {
  content: ' ';
  display: block;
  position: absolute;
  height: 1.1rem;
  width: 10%;
  box-shadow: inset var(--background) -3rem 0 2rem -2rem;
  bottom: 0;
  right: 0;
}
.events .ji-item-list > .event > a .teaser {
  color: #4a5568;
  font-size: 0.85rem;
  height: 3.3rem;
  overflow: hidden;
  position: relative;
}
.events .ji-item-list > .event > a .teaser:after {
  content: ' ';
  display: block;
  position: absolute;
  height: 1.1rem;
  width: 25%;
  box-shadow: inset var(--background) -6rem 0 3rem -3rem;
  bottom: 0;
  right: 0;
}

.ji-dated-list > .post > .attrs,
.ji-dated-list > .post > .body {
  padding: 1.25rem 1rem 1rem 5rem;
  text-decoration: none;
}
.fff.section {
  background: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
}

.ji-dated-list > .post > .body > .teaser {
  text-decoration: none;
  color: #333;
}

.ji-dated-list > .post > .body > .card {
  position: absolute;
  left: 0rem;
  top: 1.25rem;
}

.ji-dated-list > .post > .attrs {
  text-align: left;
  padding-top: 0;
}

.ji-dated-list > .post > .attrs .author {
  font-size: 125%;
  margin: 0 0 0.25rem;
  display: inline-block;
}

.ji-dated-list > .post > .attrs > .tags > li > a {
  display: block;
  padding: 0 0.25rem;
  border: 0.1rem solid;
}

.ji-item-list .card {
  border: 0.1rem solid;
  text-align: center;
  width: 4rem;
}

.date.card > .month {
  background: #999;
  color: #fff;
}

.date.card > .day {
  font-weight: 600;
  font-size: 150%;
  line-height: 3rem;
}

.ji-item-list .post {
  margin: 0.5rem 0 1.5rem;
}

.events > h5,
.blog-posts > h4 {
  min-height: 2rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid #ccc;
}

.events .event .title {
  font-size: 1rem;
  margin: 0;
  display: block;
}

.events .event .teaser {
  font-size: 0.85rem;
  line-height: 1.1rem;
}

.event .teaser {
  position: relative;
  overflow: hidden;
  text-align: justify;
}

.event .teaser.collapsed {
  max-height: 4rem;
}

.event .teaser:not(.collapsed) {
  max-height: unset;
}

.event .teaser.collapsed::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3em 0;

  background-image: linear-gradient(to bottom, transparent, white);
}

.docker-plugins-list {
  margin-top: 3rem;
}

.ji-item-list.plugins > .post .body {
  padding: 0.75rem 0 0 2.5rem;
}

.ji-item-list.plugins > .post .body p {
  margin: 0;
}

.ji-item-list.plugins > .post .body > .title {
  margin-top: 0;
}

.ji-item-list.plugins > .post > .attrs {
  font-size: 80%;
  text-align: right;
}

.ji-item-list.plugins > .post > .body > .card {
  top: 0.75rem;
}

.card.icon {
  line-height: 2rem;
  padding: 0 0.25rem;
  vertical-align: middle;
  display: inline;
}

.card.icon div {
  display: inline;
}

.ji-dated-list > .post > .article {
  text-decoration: none;
}

.ji-dated-list > .post > .article > .title {
  margin: 0.5rem 0 0.125rem;
}

.ji-dated-list > .post > .article > .url {
  color: var(--color--secondary);
  font-size: 75%;
}

.doc-block {
  margin: 2rem 0 6rem;
}

.sub-block {
  margin: 3rem 0 3rem;
}

.active-section {
  margin-bottom: 1rem;
}

.toc li a {
  display: block;
  padding: 0.5rem 0;
  line-height: 1.2em;
}

.toc .active-section li a {
  padding: 0.125rem 0;
}

.cal {
  border: 1px solid #999;
  margin-bottom: 2rem;
}

.cal > .row {
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.cal > .days {
  text-align: center;
  border-bottom: 1px solid #999;
  background: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.3);
}

.cal > .days > .col-md-2 {
  height: auto;
  line-height: 2em;
  position: relative;
}

.cal > .row > .col-md-2.weekend {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  box-shadow: inset 3px 0 3px -3px rgba(0, 0, 0, 0.2);
}

.cal .col-md-2 {
  height: 5.5rem;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.cal a.apt {
  position: absolute;
  line-height: 1.2em;
  background: rgba(100, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(0, 100, 100, 0.5);
  left: 0;
  font-size: 75%;
  padding: 0.125rem 0.5rem;
  display: block;
}

.cal a.apt.span-4 {
  width: 400%;
  margin: 1px;
}

.cal a.apt.span-1 {
  width: 100%;
}

.segment {
  padding-top: 3rem;
}

.cols-3 {
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
}

.chunks {
  list-style: none;
  margin: 0;
  padding: 0;
}

ion-icon {
  pointer-events: none;
}

.features.uniform-height > div {
  padding-left: 0;
}

.uniform-height .box {
  padding: 0.67rem 0.75rem 0 4rem;
  position: relative;
  border-radius: 5px;
  min-height: 10rem;
}

.uniform-height ion-icon {
  content: ' ';
  display: block;
  position: absolute;
  left: 0rem;
  top: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
  line-height: 3.25rem;
  background: #168bb9;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 1.75rem;
}

.uniform-height .box > p {
  line-height: 1.5em;
  font-size: 0.8rem;
  overflow: hidden;
}

.uniform-height .box > h5 {
  line-height: 1.3em;
  font-size: 1.1rem;
  margin-bottom: 0.33rem;
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .segment {
    padding-top: 1rem;
  }
  .uniform-height .box {
    min-height: 4rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .uniform-height .box {
    min-height: 12rem;
  }
}

.jumbotron.plugins {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#81b0c4+0,335061+100 */
  background: #81b0c4; /* Old browsers */
  background: -moz-linear-gradient(
    left,
    #81b0c4 0%,
    #335061 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    left,
    #81b0c4 0%,
    #335061 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right,
    #81b0c4 0%,
    #335061 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81b0c4', endColorstr='#335061',GradientType=1 ); /* IE6-9 */
  border-radius: 0;
  color: #fff;
}
.overview {
  padding-top: 1.5rem;
}
.overview p {
  font-size: 1.1rem;
}

nav .nav-item {
  cursor: pointer;
}
nav .nav-item.active {
  box-shadow: inset #d33833 0 -2px;
}

#toc-blog {
  margin-left: -1rem;
}

.section.blogs h4.blog-title {
  font-size: 1.25rem;
  padding-bottom: 0.25rem;
}

.section.blogs .content {
  padding-top: 0.5rem;
}

.quoteblock {
  padding-bottom: 1rem;
}

blockquote {
  padding: 1rem 1rem 1rem 2rem;
  border-left: 5px solid #ddd;
  margin: 1rem 0 2rem;
  font-style: italic;
}

.quoteblock blockquote {
  background-color: color-mix(in srgb, var(--color) 5%, transparent);
  border-radius: 10px;
  padding: 1rem 1rem 1rem 3rem;
  margin: 1rem 0 0 0;
  position: relative;
}

.quoteblock .attribution {
  margin-left: 1.5rem;
  font-style: italic;
}

.quoteblock blockquote:before {
  content: '\201C';
  font-size: 4rem;
  color: #ddd;
  display: block;
  position: absolute;
  left: 0rem;
  top: 0.5rem;
  width: 3rem;
  text-align: center;
  line-height: 1em;
}

.toc {
  margin-bottom: 1rem;
  background-color: color-mix(in srgb, var(--color) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color) 1%, transparent);
  border-radius: 10px;
  float: right;
  width: 20rem;
  margin-left: 15px;
  padding: 10px 15px;
  clear: right;
  margin-top: -25px;
}

.toc li li {
  padding-left: 1rem;
}
.toc ul,
.toc li,
.toc li > a {
  display: block;
  font-size: 0.9rem;
  line-height: 1.35rem;
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.toc ul.root > li > a {
  font-size: 0.85rem;
  color: rgb(153, 17, 17);
}
.container.blog-post #sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  padding-top: 5rem;
  overflow-y: auto;
  background: #f9f9f9;
  border-left: 1px solid #ccc;
  box-shadow: inset 10px 0 10px -15px;
}
.container.blog-post {
  flex: 1;
}
.vertical.events .ji-item-list > .event {
  display: block;
}
.container.blog-post .events .ji-item-list {
  white-space: normal;
  border: none;
}
.container.blog-post .time .date-time {
  font-size: 0.75rem;
  position: absolute;
  left: 1rem;
}
.container.blog-post .events .ji-item-list > .event > a {
  text-align: left;
  padding: 0.25rem 0 0.25rem 5.5rem;
  width: auto;
  margin: 0.25rem 1rem 0.25rem 0.25rem;
}

/* override carousel.scss's text-shadowing which is bad and it should feel bad */
.carousel-caption {
  text-shadow: none;
}

.admonitionblock td.content > .title,
.audioblock > .title,
.exampleblock > .title,
.imageblock > .title,
.listingblock > .title,
.literalblock > .title,
.stemblock > .title,
.openblock > .title,
.paragraph > .title,
.quoteblock > .title,
table.tableblock > .title,
.verseblock > .title,
.videoblock > .title,
.dlist > .title,
.olist > .title,
.ulist > .title,
.qlist > .title,
.hdlist > .title {
  text-rendering: optimizeLegibility;
  text-align: left;
  font-family: 'Noto Serif', 'DejaVu Serif', serif;
  font-size: 1rem;
  font-style: italic;
}
table.tableblock > caption.title {
  white-space: nowrap;
  overflow: visible;
  max-width: 0;
}
.paragraph.lead > p,
#preamble > .sectionbody > .paragraph:first-of-type p {
  color: var(--color--secondary);
}
table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
  font-size: inherit;
}
.admonitionblock > table {
  border-collapse: separate;
  border: 0;
  background: none;
  width: 100%;
  margin: 10px;
}
.admonitionblock > table td.icon {
  text-align: center;
  width: 80px;
}
.admonitionblock > table td.icon img {
  max-width: none;
}
.admonitionblock > table td.icon .title {
  font-weight: bold;
  font-family: 'Open Sans', 'DejaVu Sans', sans-serif;
  text-transform: uppercase;
}
.admonitionblock > table td.content {
  padding-left: 1.125em;
  padding-right: 1.25em;
  border-left: 1px solid #ddddd8;
  color: var(--color--secondary);
}
.admonitionblock > table td.content > :last-child > :last-child {
  margin-bottom: 0;
}
span.icon > .fa {
  cursor: default;
}
.admonitionblock td.icon [class^='fa icon-'],
.admonitionblock ion-icon {
  font-size: 2.5em;
  cursor: default;
}
.admonitionblock td.icon .icon-note:before {
  content: '\f05a';
  color: var(--blue);
}
.admonitionblock td.icon .icon-tip:before {
  content: '\f0eb';
  text-shadow: 1px 1px 2px rgba(155, 155, 0, 0.8);
  color: #111;
}
.admonitionblock td.icon .icon-warning:before {
  content: '\f071';
  color: var(--orange);
}
.admonitionblock td.icon .icon-caution:before {
  content: '\f06d';
  color: #bf3400;
}
.admonitionblock td.icon .icon-important:before {
  content: '\f06a';
  color: var(--red);
}
.admonitionblock ion-icon.important {
  color: var(--red);
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  /* font-family is needed to override some settings in font-icons.css */
  font-family: FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.paragraph.boxshadow img {
  margin: 5px 5px 5px 5px;
  -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
}

.div-mar {
  margin-right: 2rem;
  border-top: solid 2px white;
}

.div-mar,
.area {
  padding: 1rem 0;
}

.links {
  padding: 0;
}

.footer-left {
  padding-left: 0;
}

@media screen and (max-width: 991px) {
  .footer-left {
    margin-top: 1rem;
  }
}

/* keep our bulleted lists tight */
li > p {
  padding: 0;
  margin: 0;
}

/* when centering images in asciidoc, let's make sure they resize to their
 * container properly
 */
.image.center > img {
  max-width: 100%;
  max-height: 100%;
}

.skip,
.current-page,
.next-link,
.previous-link {
  position: relative;
  float: left;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.5;
  color: #0275d8;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}

.next-link:focus,
.next-link:hover,
.previous-link:focus,
.previous-link:hover {
  color: #014c8c;
  background-color: #eceeef;
  border-color: #ddd;
  text-decoration: underline;
}

.current-page {
  color: #014c8c;
  background-color: #eceeef;
  border-color: #ddd;
}

li.card.step {
  background: none;
  border: none;
}

.card.step > .card-block > p {
  white-space: normal;
}

/* Ensure that source code block numbering looks pretty (e.g. :https://asciidoctor.org/docs/user-manual/#source-code-blocks) */

.conum[data-value] {
  display: inline-block;
  color: var(--background) !important;
  background-color: color-mix(in srgb, var(--color) 80%, transparent);
  -webkit-border-radius: 100px;
  border-radius: 100px;
  text-align: center;
  font-size: 0.75em;
  width: 1.67em;
  height: 1.67em;
  line-height: 1.67em;
  font-family: 'Open Sans', 'DejaVu Sans', sans-serif;
  font-style: normal;
  font-weight: bold;
}
.conum[data-value] * {
  color: #fff !important;
}
.conum[data-value] + b {
  display: none;
}
.conum[data-value]:after {
  content: attr(data-value);
}
pre .conum[data-value] {
  position: relative;
  top: -0.125em;
}
b.conum * {
  color: inherit !important;
}
.conum:not([data-value]):empty {
  display: none;
}
.colist > table tr > td:first-of-type {
  padding: 0 0.75em;
  line-height: 1;
}
.colist > table tr > td:last-of-type {
  padding: 0.25em 0;
}
table {
  margin-bottom: 1.25rem;
}

/* Making the sidebar scroll independently */
#sidebar-content {
  top: 4rem;
  z-index: 3;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  margin-bottom: 1rem;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  #sidebar-content {
    position: -webkit-sticky;
    position: sticky;
  }
}

#sidebar-menu {
  border-right: 1px solid color-mix(in srgb, var(--color) 10%, transparent);
  padding-right: 2px;
}

/** Project page **/

.sidebar-nav h4 {
  margin-bottom: 1.5rem;
}

#projects-sidebar-menu {
  border-left: 1px solid color-mix(in srgb, var(--color) 10%, transparent);
  padding-left: 16px;
}

/** docbook section navigation **/
.doc-page-link {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block;
}

.pipeline-block {
  margin-bottom: 1rem;
}

.pipeline-script-expand {
  font-size: 0.7rem;
}

/** Role to be used in asciidoc for visually distinguishing Scripted Pipeline
 * sections of documentation
 **/
.scripted-pipeline {
  border-left: 2px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 5px;
}
/** Some specific styles for styling Pipeline syntax reference pages **/

.syntax h2 {
  border-bottom: 3px solid #ddd;
}
.syntax h3 {
  border-bottom: 2px solid #ddd;
}
.syntax h4 {
  border-bottom: 1px solid #ddd;
}

table.syntax {
  --border-color: color-mix(in srgb, var(--color--secondary) 10%, transparent);
  font-size: 0.8rem;
  margin: 1rem;
  border: 1px solid var(--border-color);
}
table.syntax p {
  padding: 5px;
  margin: 0;
}
table.syntax > tbody > tr > td {
  border: 1px solid var(--border-color);
}
table.syntax > tbody > tr > th {
  background-color: var(--border-color);
  border: 1px solid var(--border-color);
  font-weight: bold;
}

/** documentation side-bar navigation styling **/
.tour .active {
  font-weight: bold;
}

.mr-auto {
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.row {
  --bs-gutter-x: 30px;
}

.banner-container .skew:before {
  content: '';
  position: absolute;
  left: 0;
  top: -100px;
  overflow: visible;
  width: 100%;
  height: 600px;
  background: var(--color);
  opacity: 0.025;
  z-index: -1;
  -webkit-transform: skewY(-14deg);
  -moz-transform: skewY(-14deg);
  -ms-transform: skewY(-14deg);
  -o-transform: skewY(-14deg);
  transform: skewY(-14deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
}
@media (min-width: 767px) {
  .header .skew:before {
    top: -350px;
    height: 900px;
  }
}
@media (min-width: 992px) {
  .header .skew:before {
    top: -350px;
    height: 1020px;
  }
}

.jumbotron {
  position: relative;
  background: transparent;
}

.jumbotron::before {
  position: absolute;
  content: '';
  inset: 0;
  background: currentColor;
  opacity: 0.05;
  pointer-events: none;
}

.author-list {
  display: flex;
  flex-wrap: wrap;
}

.author-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  border: 0.1rem solid #ccc;
  font-size: 1rem;
  font-weight: 600;
  height: 16.5rem;
  width: 13rem;
  box-sizing: border-box;
  padding: 0.67rem;
  color: #666;
  text-decoration: none !important;
  background: #fff;
  border-radius: 3px;
  margin: 0.25rem;
  text-align: center;
  cursor: pointer;
}

.author-card .author.logo {
  display: block;
}

.author-card .author.logo {
  margin: 16px auto;
}

.author-card .app-social-media-buttons {
  gap: 0.5rem;
}

.group-description p {
  margin-bottom: 0;
}

.group-links {
  margin-bottom: 1rem;
}

.logo-thumb {
  max-height: 256px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  grid-gap: 20px;
  margin-bottom: 1rem;
}

.grid-container .card {
  border: 1px solid #d3d3d3;
  border-radius: 0.25rem;
}

.grid-container .card .content {
  padding: 15px;
}

/* add border to tables */
.grid-all,
.grid-all th,
.grid-all td {
  border: 1px solid color-mix(in srgb, var(--color) 10%, transparent);
  padding: 0.75rem;
}

.grid-all thead th {
  border-bottom-width: 2px;
}

.nav-item.searchbox {
  margin: auto;
  margin-left: 0.75em;
}

/* Styling NavBar Burger Menu's Search and Download Area
    - For better UI/UX in mobile resolutions.
*/
@media (max-width: 991px) {
  .navbar {
    max-height: 70vh;
    overflow-y: auto;
  }
  /* search box container */
  .nav-item.searchbox {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
  }

  .nav-item.searchbox input.form-control.searchbox {
    width: 100%;
  }

  /* search result's DropDown */
  .nav-item.searchbox .algolia-autocomplete .ds-dropdown-menu {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .nav-item.download-btn .nav-link {
    margin-left: 0;
  }
}

ion-icon.report {
  color: #ffa91b;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.icon-improve {
  height: 22px;
  vertical-align: middle;
  margin-right: 5px;
}

.app-avatar-image {
  min-width: 64px;
  width: 25vw;
  max-width: 128px;
  min-height: 64px;
  height: 25vw;
  max-height: 128px;
}

.thank-you-block {
  padding: 40px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thank-you-box {
  padding: 24px;
  border-radius: 40px;
  max-width: fit-content;
  height: fit-content;
  background-color: rgb(218, 209, 198, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contributor-data {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.image-div {
  display: flex;
  justify-content: center;
  align-items: center;    
}

.image-div img {
  height: 90px;
  width: 90px;
  margin-top: auto;
  margin-bottom: auto;
}

.desc-div p {
  margin: 0;
  font-size: medium;
}

@media (max-width: 768px) {
  .thank-you-box {
    padding: 16px;
  }
  .contributor-data {
    gap: 8px;   
  }
  .image-div img {
    height: 36px;
    width: 36px;
  }
  .desc-div p {
    font-size: small;
  }
}

/* Algolia Searchbox Enhancements */
[data-theme="dark"] .DocSearch-NoResults p.DocSearch-Title {
  color: rgba(255, 255, 255, 0.634);
  font-weight: bold;
}

:root[data-theme="dark"] {
  --docsearch-searchbox-background: rgb(30, 35, 40);
}