/* Responsive table on Small screens */
@media (max-width: 600px) {

  #root .responsive-table thead {
    display: none;
  }

  #root .responsive-table,
  #root .responsive-table tbody,
  #root .responsive-table tr,
  #root .responsive-table td {
    display: block;
    width: 100%;
  }

  #root .responsive-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }

  #root .responsive-table td {
    position: relative;
    max-width: 100%!important;
  }

  #root .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
    text-align: left;
  }

  #root .responsive-table .cell-content,
  #root .responsive-table .code-wrapper,
  #root .responsive-table p{
    margin-top:2rem;
  }
}



      :root {
        --main-font-family: "Rubik";
        --main-font-color: #fff;
      }

      /*My Markdown styling - based on VSCode Material Theme*/
      body {
        background-color: #292d3e;
        color: #a6accd;
        font-family: var(--main-font-family);
        font-size: 1.2rem;
        line-height: 1.6;
        padding-top: 1em;
        /* padding: 0 26px; */
      }

      #root .markdown-body,
      .custom-body {
        background-color: #292d3e;
        padding: 0 26px;
      }

      /*       #root {
        width: 95vw;
      } */

      #root code {
        font-family: "Fira Code", Consolas, "Courier New", monospace;
        padding: 0;
      }

      #root pre code {
        font-family: "Fira Code", Consolas, "Courier New", monospace;
        font-size: 1.2em;
        display: grid;
        grid-template-columns: 1fr; /* 2 columns */
        column-gap: 12px;
      }

      .mt-6 {
        margin-top: 6rem;
      }

      a {
        color: #80cbc4;
      }
      a:hover {
        color: #a6accd;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: var(--main-font-color);
        font-family: var(--main-font-family);
      }

      hr {
        border-top: 1px solid #999c9f;
      }

      pre {
        margin: 5px;
      }

      code {
        color: #ffa657;
      }

      .bold {
        font-weight: bold;
      }

      .mr-10{
        margin-right: 10px;
      }

      #root .snippet pre code {
        padding-bottom: 2rem;
      }

      .pageTitle {
        text-align: right;
        background-color: #38afa8; /*#ffa657;*/
        padding: 6rem 4rem 2rem;
        margin-bottom: 2rem;
      }

      .pageTitle code {
        font-weight: bold;
        color: white;
      }

      .md_howto ::marker {
        color: #ffa657;
      }

      .md_errors ::marker {
        color: red;
      }

      .md_notes ::marker {
        color: #85fba5;
      }

      .hljs {
        background: #000000;
      }

      .snippet {
        margin: 1.5rem 0.5rem 3rem;
      }

      .snippet-title,
      .link-cat-title {
        text-transform: lowercase;
        font-size: 1.4rem;
      }

      .highlight {
        color: #ffe626 !important;
        font-weight: bold !important;
      }

      .alert {
        background-color: #bddaee;
        color: black;
        border: 1px solid #5ea6d5;
        border-radius: 1rem;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 5px 10px -5px #00000080;
        width: 80vw;
        height: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        position: fixed;
        top: 1rem;
        left: 10vw;
        margin: auto;
        z-index: 9999; /* Highest z-index: the item will appear on top of all other elements */
        opacity: 0;
        transition: opacity 0.5s ease-in-out; /* Smooth transition */
      }

      .alert.show {
        opacity: 1; /* Show the alert */
      }

      .linksGrid {
        display: grid;
        grid-row-gap: 0.5em;
        grid-column-gap: 1em;
        grid-template-columns: repeat(auto-fit, 300px);
        justify-content: center;
      }

      .abbreviation {
        background-color: black;
        color: white;
        padding: 10px 0 0 20px;
        font-family: Rubik;
        font-size: 0.75rem;
      }

      /*Footer styling*/
      #paddingCopyright {
        display: block;
        padding: 20px;
        height: 60px;
        width: 100%;
      }

      #copyright {
        background-color: rgb(32, 32, 32);
        border-top: 1px solid rgb(63, 63, 63);
        text-align: center;
        padding: 20px;
        position: fixed;
        left: 0px;
        bottom: 0px;
        height: 60px;
        width: 100%;
        color: white;
      }

      #copyright a {
        text-decoration: none;
      }

      /*Navbar styling*/
      .navbar {
        border-bottom: 2px solid white;
        /* max-width: 100vw; */
      }

      .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
      }

      .navbar-brand {
        font-family: "Ubuntu";
        font-weight: bold;
      }

      .navbar-nav {
        flex-direction: row; /* Ensure navbar items stay in a row */
        font-size: 1.4rem;
      }

      .nav-item.dropdown {
        /* position: fixed; */
        top: 0;
      }

      #navbar .navbar {
        justify-content: space-between;
        height: 65px;
      }

      #navbar .dropdown-toggle::after{
        display: none;
      }

      /* Ensure the lines can animate */
      .nb-burger-icon svg line {
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform-origin: center;
      }

      /* Middle line: Fade out */
      .nb-burger-icon.active svg line:nth-child(1) {
        opacity: 0;
      }

      /* Top line: Rotate 45 degrees and move to center */
      .nb-burger-icon.active svg line:nth-child(2) {
        transform: translateY(6px) rotate(45deg);
      }

      /* Bottom line: Rotate -45 degrees and move to center */
      .nb-burger-icon.active svg line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      #navbarBrand {
        display: flex;
      }

      #navbarAppName {
        margin: auto;
        font-weight: bold;
        color: white;
        font-size: 1.8rem;
        font-family: var(-main-font-family);
      }



      #navbarAppName code {
        color: white;
      }

      #navbarNav {
        display: flex;
      }

      .dropdown {
        margin: auto 10px;
      }

      .dropdown-menu {
        left: -110px;
      }

      .dropdown-menu-dark {
        color: #dee2e6;
        background-color: #343a40;
        border-color: rgba(0, 0, 0, 0.15);
      }

      .dropdown-item {
        color: #fff;
      }

      .dropdown-item:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.15);
      }

      .navbar.navbar-expand-lg.navbar-dark.bg-dark.fixed-top {
        height: 56px;
      }

      .logo {
        border: 1px white solid;
        border-radius: 2rem;
      }

      .snippet-comment {
        color: green;
      }

      /*Table styling*/
      #root .table {
        /*         width: max-content;
        max-width: max-content; */
        margin: auto;
        table-layout: fixed;
        margin-bottom: 4rem;
      }

      #root thead {
        background-color: black;
        color: white;
      }

      #root tbody {
        background-color: var(--dark);
        color: white;
      }

      #root th,
      #root td {
        /* white-space: nowrap; */
        max-width: 25rem;
        cursor: pointer;
      }

      #root .cell-content {
        position: relative;
        overflow: hidden;
        white-space: normal;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;

        transition: max-height 0.3s ease;
      }

      #root .cell-content.expanded {
        display: block; /* kills line-clamp */
        max-height: none;
        overflow: visible;
        -webkit-line-clamp: none;
        line-clamp: none;
      }

      #root .snippet-description {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 95%;
      }

      #root .troubleshoot-snippet pre code {padding: 1rem}

      /* Apply horizontal scroll only to the last column's td elements */
      #root td:nth-child(2),
      #root td:nth-child(4) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        /*text-overflow: ellipsis;
        overflow-x: hidden; 
        overflow-y: hidden;
        max-width: 25rem;*/
      }

      #root tbody tr:nth-child(even) {
        background-color: #151920;
      }

      /* Show horizontal scrollbar on hover */
      /*      #root td:nth-child(2):hover,
      #root td:nth-child(4):hover {
        text-overflow: clip;
        overflow-x: auto;
        overflow-y: hidden; 
        text-wrap: wrap;
      } */

      #root td:nth-child(1) {
        font-family: monospace;
        white-space: normal;
        overflow-wrap: break-word;
        max-width: 25rem;
      }

      /* Customize scrollbar appearance */
      #root td:nth-child(2)::-webkit-scrollbar {
        height: 6px;
      }

      #root td:nth-child(2)::-webkit-scrollbar-thumb {
        background-color: #00000033; /* Set the color of the scrollbar thumb */
        border-radius: 3px; /* Set the border radius of the scrollbar thumb */
      }

      #root td:nth-child(2)::-webkit-scrollbar-track {
        background-color: transparent; /* Set the background color of the scrollbar track */
      }

      #root td:nth-child(2)::-webkit-scrollbar-thumb:hover {
        background-color: #00000066; /* Change the color of the scrollbar thumb on hover */
      }

      #root td:hover {
        background-color: #28284d !important;
      }

      #root tr:has(> td:hover) {
        background-color: #28284d80 !important;
      }

      #root .snippet-description {
        margin-bottom: 2rem;
      }

      .expand-button {
        position: absolute;
        top: -0.8rem;
        right: -0.1rem;
        color: #38afa8;
        font-weight: bold;
        font-size: 1.5rem;
        cursor: pointer;
        user-select: none;
      }

      .expand-button:hover {
        color: #2d8f89;
        transform: scale(1.1);
      }

      #root .language-unidentified .snippet-code-line {
        color: #c9d1d9;
      }

      /* Responsive table styling */

      /*Search card styling*/
      #countersDiv .card-body {
        background-color: #c7c7c7;
      }

      #filterCard {
        width: 100%;
        justify-content: center;
        margin: 2em auto;
        box-shadow:
          0 2px 2px rgb(117, 145, 175, 0.4),
          0 4px 4px rgb(117, 145, 175, 0.4),
          0 8px 8px rgb(117, 145, 175, 0.4);
      }

      #countersDiv {
        width: 60%;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin: 2em auto;
      }

      .buttonDiv {
        margin: 1.5rem;
        justify-content: center;
        display: flex;
      }

      .buttonDiv button {
        box-shadow:
          0 2px 2px rgb(117, 145, 175, 0.4),
          0 4px 4px rgb(117, 145, 175, 0.4),
          0 8px 8px rgb(117, 145, 175, 0.4);
      }

      .placeholder-input label {
        margin-right: 1rem;
      }

      .placeholder-input input {
        height: 1.8rem;
        border-radius: 5px;
        font-size: 1rem;
        width: 100%;
      }

      .filter_card_headers {
        color: white;
        font-weight: bold;
      }

      #filterCard .card-body {
        background-color: #343a40;
      }

      .tablesRadioInput_fieldset {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0 1rem;
        display: grid;
      }

      /*Dynamic values*/
      #filer_dynamicvalues_wrapper {
        display: flex;
        gap: 1rem 2rem;
        flex-wrap: wrap;
        justify-content: center;
      }

      .placeholder-input label {
        width: 7rem;
      }

      /* Tools */
      .tools {
        margin-bottom: 2rem;
      }

      #encoderDecoder {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        flex-direction: column;
      }

      /*       #encoderDecoder button {
        height: 16.5rem;
      } */

      #encoderDecoder textarea {
        border-radius: 1rem;
        padding: 1rem;
        background-color: #1e1e1e;
        color: white;
        font-family: monospace;
        font-size: 0.875rem;
        max-width: 90vw;
      }

      #encoderDecoder #inputBox {
        color: #d17323;
      }

      #encoderDecoder #outputBox {
        color: #56b6c2;
      }

      .btn-tools {
        width: 12rem;
        border-radius: 1rem;
      }

      /*AWS Section Styling*/
      #root .aws-section li code {
        padding: 1.5rem;
      }

      #root .aws-section-toggle {
        border: 1px solid white;
        border-radius: 1rem;
        padding: 0.5rem 1rem;
        background-color: black;
        cursor: pointer;
      }

      /*Troubleshooting styling*/
      .placeholder {
        color: orange;
      }

      .troubleshoot-snippet,
      .nextjs-snippet {
        background-color: #080808;
        color: #439ccb;
      }

      #root .snippet-description pre:has(code) {
        padding: 1rem;
        font-size: 85%;
        line-height: 1.45;
        color: #f0f6fc;
        background-color: #1e1e1e;
      }

      #root .snippet-description pre .hljs {
        background-color: #1e1e1e;
      }

      #root .snippet-description pre code {
        display: grid;
        grid-template-columns: 1fr; /* 2 columns */
        column-gap: 12px;
      }

      /*MD pages styling*/
      #root pre:has(code) {
        border: 1px solid rgb(168, 174, 188);
        border-radius: 4px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-color: #1e1e1e;
        margin-top: 0;
        margin-bottom: 1rem;
      }

      #root .markdown-body pre code {
        display: grid;
        grid-template-columns: 1fr; /* 2 columns */
        column-gap: 12px;
      }

      #root pre code .snippet-line {
        display: grid;
        grid-template-columns: auto 1fr; /* Line counter and code content */
        column-gap: 12px;
      }

      #root .snippet-line-counter {
        color: rgb(125, 129, 134);
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }

      #root .snippet-code-line {
        margin-left: 6px;
      }

      #root .snippet-line:hover .snippet-code-line {
        background-color: rgb(168, 174, 188, 0.2);
      }

      #root .snippet-line:hover .snippet-line-counter {
        color: white !important;
      }

      /*Snippet headers*/
      .code-header {
        background-color: #272d36;
        border: 1px #a8aebc solid;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        height: 2.5rem;
        margin: 0 5px;
      }

      .code-header-left {
        display: flex;
        margin: auto 1rem;
      }

      .code-header-right {
        justify-content: center;
        display: flex;
        margin-right: 0.5rem;
      }

      .code-header-language {
        color: #adadad;
        padding-left: 6px;
        font-size: 1rem;
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
          Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      }

      .code-header-code-svg {
        color: #adadad;
        font-size: 1.5rem;
      }

      .snippet-copy-button {
        background-color: transparent;
        margin: auto;
        margin-right: 0.5rem;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 0.4rem;
        transition:
          background-color 0.15s ease,
          color 0.15s ease;
      }

      .snippet-copy-button span {
        display: flex;
      }

      .copy-button-svg {
        color: white;
        background-color: transparent;
        font-size: 1.5rem;
        transition: color 0.15s ease;
      }

      /* invert on hover */
      .snippet-copy-button:hover {
        background-color: white;
      }

      .snippet-copy-button:hover .copy-button-svg {
        color: #272d36;
      }

      .snippet-check-icon {
        color: white;
        margin: auto;
        padding: 0.25rem 0;
      }

      .snippet-check-icon svg {
        font-size: 3rem;
      }

      .hidden {
        display: none;
      }

      /*Nexthink NQL Sytling*/
      /* all text */
      #root .language-nql {
        color: #dcdcdc;
        background-color: #1e1e1e;
      }

      #root pre {
        background-color: #1e1e1e;
      }

      /* key words [include, with, compute, where, list, limit, sort, asc, desc, in, during, past, from, to, and, or, ago] */
      .mtk8 {
        color: #569cd6;
      }

      /* dot and commas and colons */
      .mtk11 {
        color: #f44747;
      }

      /* methods (preceded by a dot and followed by a (). The brackets stay #dcdcdc but the method itself changes to the color below) */
      .mtk19 {
        color: #b46695;
      }

      /* strings (with single and double quotes) */
      .mtk5 {
        color: #ce9178;
      }

      /* numbers and time elements (numbers followed by min, h, d: for instance 15min, 1h, 1d), date elements (for instance 2026-03-05, 2026-03-06 12:00:00) */
      .mtk6 {
        color: #b5cea8;
      }

      /*add indentation before pipe symbols*/
      .mtkPipe {
        display: inline-block;
        margin-left: 20px;
      }