.DeveloperPortalInterface__menu {
    position: sticky;
    z-index: 1;
    top: var(--header-height);
    display: flex;
    flex-direction: column;
    align-self: start;
    width: 100%;
    height: 100%;
    max-height: var(--max-height);
    overflow: auto;
    background: #fff;
    /** @ min-width 769px */
    grid-area: menu;
}

.DeveloperPortalInterface__content {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    scroll-margin-top: var(--header-height);
}

@media screen and (min-width: 769px) {
    .DeveloperPortalInterface {
        display: grid;
        grid-template-areas: 'menu main';
        grid-template-columns: minmax(0,20rem) minmax(0,1fr);
    }
}

@media screen and (min-width: 769px) and (max-width: 1800px) {
    .DeveloperPortalInterface__menu {
        border-right: 1px solid #efefef;
    }
}

/**
 * Log filter
 */

.DeveloperPortalInterface__filter {
    position: relative;
    z-index: 2;/** over pageBlocker */
    margin-bottom: 2em;
    padding-top: 1rem;
    font-size: 14px;
    container: filter / inline-size;
}

.DeveloperPortalInterface__filterToggle {
    display: block;
    padding: .5em 1em .5em 2.5em;
    border-color: transparent;
    color: #1e1e1e;
    background: #f2f2f2 url(search.svg) no-repeat 1em 50%;
    background-size: 1em;
}

.DeveloperPortalInterface__filterToggle[aria-expanded='false'] {
    position: absolute;
    left: 0;
    background-color: transparent;
    background-image: url(close.svg);
    background-size: .7em;
}

@media screen and (min-width: 769px) {
    .DeveloperPortalInterface__filter {
        position: sticky;
        top: 2.5rem;
    }

    .DeveloperPortalInterface__filter--pinned .DeveloperPortalInterface__filterToggle[aria-expanded='true'] {
        border-radius: 0 0 1em 1em;
        box-shadow: 0 1px 6px 0 rgba(0,0,0,.25);
    }
}

.DeveloperPortalInterface__filter.--active .DeveloperPortalInterface__filterToggle[aria-expanded='true']::after {
    content: attr(data-count);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    margin-left: .5em;
    border-radius: 1em;
    font-weight: bold;
    line-height: 1.5em;
    color: #fff;
    background: #FF822F;
    text-shadow: 0 0 2px #9f3f00;
}

.DeveloperPortalInterface__filterPanel form {
    gap: 0 3em;
    padding: 3em 1em 4em;
}

.DeveloperPortalInterface__filter--pinned form {
    border-color: rgba(0,0,0,.2);
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.DeveloperPortalInterface__filterPanel[aria-hidden='true'] form {
    position: absolute;
    right: 100vw;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

.DeveloperPortalInterface__filter div.field {
    margin-bottom: 1em;
}

@container filter (min-width: 45em) {
    .DeveloperPortalInterface__filter form {
        column-count: 2;
    }
}

@container filter (min-width: 85em) {
    .DeveloperPortalInterface__filter form {
        column-count: 3;
    }

    .DeveloperPortalInterface__filter div.field {
        display: flex;
        align-items: baseline;
    }

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

.DeveloperPortalInterface__filter div.submit {
    position: absolute;
    right: 1em;
    bottom: 0;
}

.DeveloperPortalInterface__filter form > div:first-of-type:not(.first) {
    display: none;/** No gap before first visible element */
}

.webservice_logs_client_filter__date > span {
    font-size: 1em;
}

.webservice_logs_client_filter__date .fieldinput > span {
    display: grid;
    grid-template-columns: 1fr 0 1fr;
    gap: 0 .5rem;
    width: 100%;
}

.DeveloperPortalInterface__filter label.field {
    flex: 0 0 10em;
}

.DeveloperPortalInterface__filter .fieldinput {
    flex: 1;
}

.DeveloperPortalInterface__filter input,
.DeveloperPortalInterface__filter select {
    width: 100%;
}

.DeveloperPortalInterface__filter input {
    text-overflow: ellipsis;
    width: 100%;
}

.webservice_logs_client_filter__date .fieldinput {
    display: flex; /** irritante  */
}

.webservice_logs_client_filter__date .proFormDate,
.webservice_logs_client_filter__date .proFormTime {
    padding-left: 3em;
    min-width: 9em;
}

.webservice_logs_client_filter__date img {
    position: absolute;
    display: block;
    height: 2.5em;
    width: 2em;
    transform: translate(0, -2.7em);
    padding: .5em 0 .5em .5em;
}

.DeveloperPortalInterface__filter .formfielderror {
    position: absolute;
    left: -999em;
}

.DeveloperPortalInterface__filter div.submit .fieldinput {
    display: flex;
    gap: 1em;
    flex-direction: row-reverse;
    padding-top: 0.5em;
}

/**
 * ApiDocumentationView.css
 * ApiMethod.css
 */
@media screen and (min-width: 900px) {
    .ApiDocumentationView {
        width: calc(100% - 5em);
        max-width: 82em;
    }
}

.apiMethod__method {
    font-family: var(--font-headings);
}

.apiMethod,
.apiDoc__target {
    scroll-margin-top: calc(var(--header-height) + 2rem);
}

.apiMethod:last-child:not(:only-of-type) {
    min-height: calc(100vh - var(--header-height) - 2rem);
}

.apiMethod__source ::selection {
    color: unset;
    background: #000;
}

@media screen and (min-width: 1280px) {
    .ApiDocView__h2 {
        font-size: 3.5rem;
    }
}

.ApiDocumentationView--compact .apiMethod__doc {
    top: calc(var(--header-height) + 2rem);
}

.apiMethod__exampleBox {
    border-radius: .7em;
}

.ApiDocumentationView__overlay {
    z-index: 10;
}

.blockerIsVisible .pageBlocker {
    position: fixed;
    z-index: 1;
    inset: 0;
}