/* ------ LOGIC ------ */
.revoke-refresh-token, .revoke-access-token {
    display: none;
}

.revoke-modern,
.allow-revoke-refresh-token > .revoke-refresh-token,
.allow-revoke-access-token > .revoke-access-token {
    display: initial;
}

.hide {
    display: none;
}

/* ------ FORMS ------ */

select, input {
    font-size: 1em;
    padding: 0.25em;
    color: #444;
}

button {
    color: #444;
}

.rs-duration > .chromehack > * {
    flex-basis: 100%;
}

.rs-scopes > .chromehack > * {
    flex-basis: 30%;
}

.rs-form > * {
    flex-basis: 100%;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}

label:hover {
    background-color: cornsilk;
}

label > span:first-child {
    display: inline-block;
    padding-right: 0.5em;
}
.rs-name > span,
.rs-arrangement > span,
.rs-arrangement-location > span,
.rs-response-mode > span,
.rs-response-type > span {
    width: 16em;
}

.rs-duration-custom-days, .rs-duration-custom-hours,
.rs-duration-custom-minutes, .rs-duration-custom-seconds {
    flex-basis: 20%
}

.rs-duration-custom-days > input, .rs-duration-custom-hours > input,
.rs-duration-custom-minutes > input, .rs-duration-custom-seconds > input {
    width: 5em;
}


/*
 Styling fieldsets works fine in firefox; broken in chrome.
 Workaround with nested div works in both (but still dumb)
 https://bugs.chromium.org/p/chromium/issues/detail?id=375693
 */
fieldset > .chromehack {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

fieldset {
    margin-bottom: 0.25em;
}


.rs-arrangement > select {
    min-width: 15em;
    max-width: 30em;
}

.rs-duration-custom {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    flex-basis: 100% !important;
}

.rs-duration-custom-select {
    flex-basis: 100%;
}

.rs-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.rs-submit {
    flex-basis: auto;
}

.field > .label:first-child {
    display: inline-block;
    padding-right: 0.5em;
}

.field > .label {
    min-width: 8em;
    padding-right: 0.5em;
}

.api-form, .api-headers-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.api-form > *, .api-headers-container > * {
    grid-column-end: span 12;
}

.api-field, .api-headers, .api-fieldset, .api-submit {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}

.api-field > span {
    width: 8em;
}

.api-headers-container {
    padding-left: 2em;
}

.api-headers-container .api-field > span {
    width: 10em;
}

.api-field-page > input,
.api-field-pagesize > input {
    width: 3em;
}

.api-field-page {
    grid-column-start: 1;
    grid-column-end: span 3;
}

.api-field-pagesize {
    grid-column-end: span 3;
}

.api-compounddate-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}

.api-compounddate-container > * {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    padding-right: 1em;
}

.api-compound-date-timezone {
    flex-basis: 100%;
}

.api-submit {
    width: intrinsic; /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;
}

.rs-submit, .api-submit {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
}

.rs-id-token-claims > .chromehack {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rs-id-token-claims label > span {
    width: 8em;
}

.rs-id-token-claims select {
    width: 14em;
}

.rs-user-info-claims > .chromehack {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rs-user-info-claims label > span {
    width: 8em;
}

.rs-user-info-claims select {
    width: 14em;
}


/* ------ TABLES ------ */


thead > tr {
    background-color: lavender;
}

tbody > tr:nth-child(odd) {
    background-color: snow;
}

tbody > tr:nth-child(even) {
    background-color: ghostwhite;
}

tbody > tr:hover {
    background-color: cornsilk;
}

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    font-size: 1rem;
}

td, th {
    padding: 0.25em;
    text-align: left;
    border-width: 1px;
    border-style: solid;
    border-color: gainsboro;
}

td:first-of-type, th:first-of-type {
    padding-left: 0.5em;
}

td:last-of-type, th:last-of-type {
    padding-right: 0.5em;
}

.arrangement-name {
    overflow-wrap: anywhere;
}

/*
.arrangement-created, .arrangement-acknowledged,
.arrangement-expires, .arrangement-revoked {
    white-space: nowrap;
}
*/

/* ------ GENERAL ------ */
html {
    height: 100%;
}

body {
    height: 100%;
    background-color: ghostwhite;
    margin: 0;
    line-height: 1.6;
    font-size: 1.1rem;
    color: #444;
    font-family: "Open Sans", Arial;
    display: grid;
    grid-template-columns: 15em 1fr;
}

body#index {
    display: initial;
}

h1 {
    margin-top: 0;
}
h1, h2, h3 {
    line-height: 1.2
}

.content {
    max-width: 60em;
    padding-left: 10em;
    padding-right: 0.6em;
    padding-top: 2em;
    padding-bottom: 2em;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: auto;
}

body#index .content {
    padding-left: 25em;
}

nav.main {
    height: 100%;
    padding: 2em 0.6em;
    background-color: gainsboro;
}
nav.main ul {
    margin: 0 auto;
    padding-left: 1em;
    list-style: none;
}

nav.main .adr {
    padding-bottom: 1em;
}

nav.breadcrumbs > ul {
    margin: 0 auto;
    padding-left: 0;
    list-style: none;
}
nav.breadcrumbs > ul > li {
    display: inline-block;
    padding-bottom: 0.5em;
}
nav.breadcrumbs > ul > li~li::before {
    content: ">";
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.content .adrs {
    list-style: none;
    padding-left: 0;
}
.content .brands,
.content .clients {
    margin: 0 auto;
    padding-left: 1em;
    list-style: none;
}

.content .adrs .adr {
    padding-bottom: 1em;
}

option.arrangement-status-expired,
option.arrangement-status-revoked,
option.arrangement-status-revokedexpired,
.arrangement-status-revokedexpired > .arrangement-name,
.arrangement-status-revokedexpired > .arrangement-expires,
.arrangement-status-revokedexpired > .arrangement-revoked,
.arrangement-status-expired > .arrangement-name,
.arrangement-status-expired > .arrangement-expires,
.arrangement-status-revoked > .arrangement-name,
.arrangement-status-revoked > .arrangement-revoked {
    color: crimson;
}

@media only screen and (max-width: 1300px) {
    .content {
        padding-left: 1em;
    }
    body#index .content {
        padding-left: 16em;
    }
}

@media only screen and (max-width: 1100px) {
    nav {
        display: none;
    }

    body {
        display: block;
    }

    table {
        border: 0;
    }

    table thead {
        display: none;
    }

    tr {
        display: block;
        border-width: 1px;
        border-style: solid;
        border-color: gainsboro;
        margin-bottom: 0.5em;
    }

    td {
        padding-left: 0.5em;
        display: block;
        text-align: right;
        border: 0;
    }

    td::before {
        content: attr(data-th);
        float: left;
        font-weight: bold;
    }
}