.product-detailed-logo {
  max-height: 72x;
  max-width: 190px;
  height: 72x;
  width: 190px;
}

.sign-verification-command-label {
  width: 328px !important;
  max-width: 328px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sign-verification-command-button {
    display: inline !important;
    width: 80%;
}

.sign-verification-command-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}

.docker-pull-command-label {
  width: 328px !important;
  max-width: 328px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.get-pull-command-button {
    display: inline !important;
    width: 80%;
}

.docker-pull-command-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}

.security-report-icon {
  background-image: url('/img/vulnerability_report_icon-d945319ca10840c7ae9fa8c7e3354931.svg');
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}

.tag-card {
  display: flex;
  flex: 1 1;
  flex-wrap: nowrap;
  margin: 10px 5px;
  align-items: center;
  width: 80% !important;
  min-height: 100px;
}

/* Rendered Markdown */
code {
    background-color: #F2F2F2;
}

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

table {
    border-collapse: collapse;
    align-text: center;
}
.bg-clicked{
    background-color: #e7ebee
}

tbody tr:nth-child(odd) {
  background: #eee;
}

/* for toggle behavior */

.toggle {
    position: sticky;
    top: 88%;
    z-index: 9;
}

@media (max-width: 768px) {
  /* for hiding the sidebar functionality on small devices*/
  #toggle {
      display: none;
      position: sticky;
      top: 88%;
      z-index: 9;
  }
  #toggle.active {
      display: block;
  }

  #vertical-nav {
      display: none;
  }

  #vertical-nav.active {
      display: block;
      min-width: 18rem;
      min-height: 100vh!important;
  }

  #nav-item.active {
      min-width: 18rem;
  }

  #sidebar {
      display: none;
  }

  #sidebar.active {
      display: block;
  }
  #content {
      margin: 0;
  }

  #content-col {
    display: block;
  }
  #content-col.active {
    display: none;
  }

  /* For lowering the docker-pull-command-label and tag-card on smaller device*/
  .label-main {
       max-width: 228px !important;
  }
  .label-secondary {
       max-width: 128px !important;
  }
  .tag-card {
       width: 100% !important;
  }
}

@media only screen and (min-width: 767px) {
  /*For hiding the toggle on large screens*/
  .show-large {
    display: block;
  }
  .show-mobile {
    display: none;
  }
}

 body {
    margin: 0;
    padding: 0;
}
.main-layout {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
.side-nav-container {
    width: 16rem;
    min-width: 16rem;
    box-sizing: border-box;
    box-shadow: 0 -5px 6px 0 rgba(0, 0, 0, 0.2);
}
.main-content {
    flex: 1;
    padding: 1rem;
    min-width: 0; /* Prevents flex items from overflowing */
    box-sizing: border-box;
}
.product-details-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 1rem;
}
.product-info {
    flex: 1;
    min-width: 300px;
    box-sizing: border-box;
}
.docker-commands {
    min-width: 300px;
    position: relative;
    box-sizing: border-box;
}
.command-container {
    display: flex;
    align-items: center;
}
.command-label {
    flex-grow: 1;
    overflow-x: hidden;
    white-space: nowrap;
    padding: 0.5rem;
    background-color: #f4f4f4;
    border: 1px solid #8d8d8d;
    margin: 0;
    margin-right: 0.5rem;
    width: 400px;
    text-overflow: ellipsis;
}
@media (max-width: 768px) {
    .side-nav-container {
        width: 100%;
        min-width: 100%;
    }
    .main-content {
        width: 100%;
    }
}
.tag-card {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}
.tag-card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.copy-button {
    width: 75px;
}

.readme-button {
    margin: auto;
    width: 50%;
}