/* .swagger-ui {
  margin: 1rem;
   .scheme-container {
        box-sizing: border-box;
        margin: 2rem auto;
        max-width: 1460px;
        width: 100%;
        .schemes {
          margin-bottom: 0 !important;
        }
    }
} */
.servers {
  padding: 1rem 0;
}

.api-products-bar {
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-color: #00254f;
  padding: 3px 20px;
}

.api-products-bar a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 0 15px;
}

.api-products-bar a.active {
  color: #00c87e;
  border-bottom: 2px solid #00c87e;
}

.auth-button {
  color: #00254f !important;
}

.auth-dialog {
  direction: ltr;

  .mat-form-field-appearance-legacy .mat-form-field-infix {
    text-align: left !important;
  }

}

.entry-content{

  .mat-icon{
    margin-left: 0 !important
  }
}

@media (min-width: 1201px)  {
.openapi-route.apix-showing[_ngcontent-c15]{
 max-width: 100% !important;
}
}

[dir=rtl] .auth-edit-form .mat-form-field .mat-input-element {
  text-align: left !important;
}

.api-spec-container {
  .container {
    max-width: 100vw;

    .row>* {
      padding: 0;
    }

    .context-bar {
      background-color: #eef3f7;
      padding: 0px 120px 0px 20px;
      gap: 0px;
      border-color: black !important;

      .context-bar-button {
        box-sizing: content-box;
        display: flex;
        align-items: center;
        width: auto;
        height: 24px;
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        border: 1px solid var(--Nautral-700, #1E3564);
        color: var(--Nautral-700, #1E3564);
        background-color: transparent;

        &:hover {
          color: #00c87e;
          border-color: #00c87e;
          text-decoration: none;
          ;
        }
      }

    }

    .nav-bar-container {
      background-color: #eef3f7 !important;
    }

    .title {
      h1 {
        font-family: Helvetica;
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 38.4px !important;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: var(--Nautral-700, #1E3564);
      }

      p {
        font-family: Helvetica;
        font-size: 16px;
        font-weight: 400;
        line-height: 25.6px;
        letter-spacing: var(--TitleLargeTracking);
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: var(--Nautral-700, #1E3564);
      }
    }

    .mat-drawer-inner-container {
      max-height: 300px;
      nav-bar {
        .title {
          font-family: Helvetica;
          font-size: 16px;
          font-weight: 700;
          line-height: var(--BodyMediumLineHeight);
          letter-spacing: var(--BodyMediumTracking);
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          color: var(--Nautral-700, #1E3564);

        }

        .entry-content {
          width: auto;
          height: 36px;
          max-height: 48px;
          padding: 8px 16px 8px 8px;
          gap: 8px;
          border-radius: 8px;
          line-height: initial;

          a {
            font-family: Helvetica;
            font-size: var(--BodyMediumSize);
            font-weight: 400;
            line-height: var(--BodyMediumLineHeight);
            letter-spacing: var(--BodyMediumTracking);
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;

          }
        }

        .entry-content:has(a:not(.link-color)) {
          background-color: var(--Nautral-700, #1E3564);
          height: fit-content;

          a {
            color: white;
          }
        }

        .entry-content:hover a:not(.link-color),
        .entry-content a:not(.link-color):hover {
          color: white;
          text-decoration: none;
        }
      }
    }

    h3 {
      font-family: Helvetica;
      font-size: 18px !important;
      font-weight: 700 !important;
      line-height: 21.6px !important;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: var(--Nautral-700, #1E3564);
    }

   


    .response {
      span>p {
        font-family: Helvetica;
        font-size: 16px;
        font-weight: 700;
        line-height: 25.6px;
        letter-spacing: var(--TitleLargeTracking);
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: var(--Nautral-700, #1E3564);
      }
    }

    .route-path {
      .route-path-template {
        border-radius: 8px;
        font-family: 'Roboto Slab', serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 22.4px;
        letter-spacing: var(--TitleLargeTracking);
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        width: 100%;
        height: auto;
        /* Allow height to expand */
        padding: 8px 12px;
        color: var(--Nautral-700, #1E3564);
        background-color: #eef3f7;
        word-wrap: break-word;
        /* Ensures long words wrap */
        overflow-wrap: break-word;
        /* Alternative for compatibility */
        white-space: normal;
        /* Allows text to break to a new line */
      }
    }
  }



}

.api-products-bar {
  height: min-content;

  .view-content {
    overflow-x: auto;
    /* Enable horizontal scrolling */
    white-space: nowrap;
    display: flex;
    padding: 0;
    margin-bottom: -6.5px;
    scrollbar-width: auto;
    /* For Firefox: Hide scrollbar */
  }

  .view-content::-webkit-scrollbar {
    height: 7px;
  }

  /* .view-content::-webkit-scrollbar-track {
    background: transparent;
  } */

  .view-content::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 20px;
    border: 3px solid transparent;
  }

  .view-content::-webkit-scrollbar-thumb:hover {
    background-color: dark#42bb96;
  }

  .scroll-container {
    display: flex;
    gap: 20px;
  }

  .views-row {
    display: inline-block;
    padding: 5px 10px;
    position: relative;
  }

  .views-row a {
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 5px;
    transition: color 0.3s ease;
    font-family: Helvetica;
    font-size: var(--BodyMediumSize);
    font-weight: 400;
    line-height: var(--BodyMediumLineHeight);
    letter-spacing: var(--BodyMediumTracking);
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

  }

  .views-row a:hover,
  .views-row a:focus,
  .views-row a:active {
    color: #42bb96;
    /* Change color when hovered or focused */
  }

  .views-row a:hover::after,
  .views-row a:active::after,
  .views-row a:focus::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #42bb96;
    transition: width 0.3s ease;
  }



}

#mobile-sidebar-toggle {
  display: none !important;
}


@media (max-width: 768px) {
  .context-bar {
    padding: 0px 10% 0px 20px !important;
    gap: 10px !important;

  }

  @media (max-width: 576px) {
    #mobile-sidebar-toggle {
      display: flex !important;
    }
  }


  .api-spec-container {
    & .container {
      & .title {
        h1 {
          word-break: break-word;
          font-size: 25;
        }
      }
    }
  }
}


@media (min-width: 320px) and (max-width: 576px) {
  .context-bar {
    padding: 0px 10% 0px 20px !important;

    .context-bar-button {
      padding: 8px 18px 8px 18px !important;
    }

  }

  .api-spec-container {
    .container {
      .nav-bar-container {
        width: 100% !important;
      }
    }
  }
}

/* Hide the sidebar on mobile by default */

@media (max-width: 768px) {
  .custom-sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    position: fixed;
    z-index: 999;
    background-color: #fff;
    width: 280px;
    height: 100vh;
    overflow-y: auto;
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .custom-sidebar.sidebar-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    display: flex !important;
  }

  /* Firefox-specific fix */
  @-moz-document url-prefix() {
    .custom-sidebar.sidebar-open {
      transform: translateX(0) !important;
      visibility: visible !important;
      display: flex !important;
    }
  }
}

  @media (max-width: 576px) {
    #mobile-sidebar-toggle {
      display: block;
    }
  }

  .api-spec-container {
    & .container .trigger {
      padding: 0px 10% 0px 20px !important;
    }
}



html[dir="rtl"]{
  .api-spec-container {


    mat-sidenav-content{
      margin-right: 0 !important;
      margin-left: 280px !important;
    }

   .apidoc__spec{
      direction: ltr !important;
   }
}


@media (max-width: 767px) {
  .api-spec-container {
  mat-sidenav-content{
    margin-left: 0 !important;
  }
}
}

}