:root {
  --top-nav-background-color: #F4F4F9;
  --top-nav-height: 72px;
  --anrok-primary: #231E52;
  --top-nav-border-color: #D2D2D7;
}

.anrok-nav {
    display: none;
}

@media (min-width: 50rem) {

    .anrok-nav {
        display: flex;
        background-color: var(--top-nav-background-color);
        position: sticky; 
        top: 0; 
        width: 100%; 
        height: var(--top-nav-height);
        z-index: 3;
        border-bottom: 1px solid var(--top-nav-border-color);
    }

    #anrok-top-nav-wrap {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    #anrok-top-nav-wrap .anrok-nav {
        height: calc(var(--top-nav-height) - 1px);
    }

    .anrok-nav ul {
        list-style: none;
        margin-top: 1px;
        padding-inline-start: 28px;
    }

    #anrok-nav-item-1 {
        padding-left: 195px;
    }

    .anrok-nav-item {
        float: left;
        padding: 40px 28px 0 0;
        margin: 0;
        font-weight: 500;
        font-size: 16px;
        font-style: normal;
        line-height: 1.4rem;
        font-family: AktivGrotesk,Arial,sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    .anrok-nav-item-link-active {
        padding-bottom: 8px;
        border-bottom: 2px solid var(--anrok-primary);
    }

    .anrok-nav a {
      color: #57575E;
      text-decoration: none;
    }

    a.anrok-nav-item-link-active {
        color: var(--anrok-primary);
    }

    .anrok-nav a:hover {
      background: none;
      color: var(--anrok-primary);
    }

    .anrok-logo-nav-item {
        float: left;
        padding: 21px 0 14px 0;
        margin: 0;
    }

    .anrok-logo-img {
        width: 86.2px !important;
        height: 25px !important;
    }

    .api-content {
        top: var(--top-nav-height);
        position: sticky !important;
    }
  
    .side-bar {
        top: var(--top-nav-height);
        height: calc(100% - var(--top-nav-height));
    }
}