.document {
    max-width: 1024px;
    padding-left: calc(min(30%, 300px) + 1em);
}

a, a:visited {
    color: hsl(240, 70%, 50%);
}

#contents {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(min(30%, 300px));
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid grey;
    margin-left: 0.5em;
    background-color: white;
}

#contents .menu-button {
    display: none;

    position: fixed;
    top: 0;
    right: 0;
    background-color: white;
}

#contents .menu-button:before {
    content: '☰';
    display: table-cell;
    width: 1.4em;
    height: 1.4em;
    text-align: center;
    vertical-align: middle;
}

#contents ul {
    padding-left: 0.5em;
    list-style-type: none;
}

#contents > ul {
    padding: 0;
}

#contents li {
    margin: 0.2em 0;
}

#contents a {
    text-decoration: none;
}

a.current-toc-item {
    font-weight: bolder;
    color: black;
}

.code {
    font-family: monospace;
    font-size: 0.75em;
    line-height: initial;
    padding: 0.5em;
    border: 1px solid grey;
    background-color: #fafafa;
    overflow-x: auto;
}

tt {
    background-color: #f0f0f0;
    padding: 0.1em 0.2em;
}

.classifier {
    font-family: monospace;
}

.classifier.deprecated {
    font-weight: bolder;
    color: red;
}

dd {
    margin-bottom: 0.5em;
}

dd .first {
    margin-top: initial;
}

table.docutils:not(.footnote) {
    background-color: #fafafa;
}

table.docutils:not(.footnote),
table.docutils:not(.footnote) th,
table.docutils:not(.footnote) td
{
    border: 1px solid lightgrey;
    border-collapse: collapse;
}

table.docutils:not(.footnote) td,
table.docutils:not(.footnote) th
{
    padding: 0.2em;
    text-align: center;
    vertical-align: middle;
}

.plan-free, .plan-enterprise {
    background-color: #d7d8da;
}
.plan-indie {
    background-color: #fdeab4;
}
.plan-plus {
    background-color: #e3c6eb;
}
.plan-pro {
    background-color: #b3e9ff;
}

details {
    margin-bottom: 1em;
}

summary {
    color: hsl(240, 70%, 50%);
    text-decoration: none;
    outline: none;
    cursor: pointer;
    margin-bottom: 1em;
}

summary span {
    border-bottom: 0.09em dotted;
}

details img {
    max-width: 100%;
}

hr {
    color: lightgrey;
    margin: 2em 0;
}


.usage-samples dt {
    color: hsl(240, 70%, 50%);
    cursor: pointer;
    margin-bottom: 0.5em;
}

.usage-samples dt span {
    border-bottom: 0.09em dotted;
}

.usage-samples dt:before {
    content: '▸';
    margin-right: 0.5em;
}

.usage-samples dd {
    margin-left: 0;
    display: none;
}

.usage-samples dt.active {
    cursor: initial;
}

.usage-samples dt.active:before {
    content: '▾';
}

.usage-samples dt.active + dd {
    display: block;
}

.table-wrapper {
    overflow-x: auto;
}

@media (max-width: 844px) {
    .document {
        font-size: 1.2em;
        padding-left: initial;
        padding-top: 1.4em;
    }

    #contents {
        font-size: 1.2em;

        width: 100%;
        height: 1.4em;
        border-right: initial;
        border-bottom: 1px solid grey;
        margin-left: initial;
        padding: 0 0.5em;
    }

    #contents .menu-button {
        display: block;
    }

    #contents.expanded {
        height: 50%;
    }

    #contents:not(.expanded) {
        overflow-y: hidden;
    }

    #contents.expanded .menu-button:before {
        content: '⨯';
    }
}