main, header{
    margin:0 1rem;
}
main {
    --pb-browse-toolbar-justify-content: space-between;
}

app-header-layout {
    background-image: url('../images/network-background.jpg');
    background-size: 100% auto;
    background-repeat-x: no-repeat;
    background-color: #e8fafa;
    min-height: 100vh;
}
.documents ul {
    list-style: none;
}

.documents div {
    margin: 0;
}

.documents .error {
    color: #c02020;
}

.documents a,
.documents a:visited {
    color: #303F9F;
    text-decoration: none;
}

.documents li {
    display:grid;
    grid-template-columns:9rem auto;
    grid-gap:1rem;
    margin-bottom: 10px;
    padding: 6px 0;
    border-bottom: thin solid var(--paper-grey-300);
}

.documents li:last-child {
    border: none;
}
li.document{
    display:flex;
    flex-wrap:wrap;
    margin-bottom: 10px;
    padding: 6px 0;
    border-bottom: thin solid var(--paper-grey-300);
    padding-bottom:1rem;
    max-width:calc(100% - 1rem);
    gap:1em;
    position: relative;
}

.documents .document-select {
    flex: 0 0;
    margin-right: 20px;
}

.document-info{
    min-width:min(28em,100%);    
}

a ~ .document-info {
    width:70%;
}

.documents .sample-description {
    font-size: var(--pb-footnote-font-size);
}

pb-collapse > div{
    font-size:1.2rem;
    padding:0.5rem 0;
}

.thumbnail{
    width: 8em;
    height: 8em;
    width:8em;
    background-repeat: no-repeat ;
    background-position: center center;
    background-size: cover;
    box-shadow:2px 2px 4px rgba(33,33,33,0.5);
    position:relative;
}
.thumbnail img {
    border-radius:35px;
    border-color: #19232d;
    border-style: groove;
    box-shadow: 1px 1px 1px 1px  #19232d;
}

.thumbnail.typed-demo{
    background-image: url(../images/typed/typed-demo-data_avatar.jpg);
}
.thumbnail.demo{
    background-image: url(../images/chris-lawton-zvKx6ixUhWQ-unsplash.jpg);
}
.thumbnail.play{
    background-image: url(../images/nick-monica-FSQhX5lrkIg-unsplash.jpg);
}
.thumbnail.docs{
    background-image: url(../images/html-css-collage-concept-with-person.jpg);
    filter:brightness(1.2);
}
.thumbnail.annotate{
    background-image: url(../images/business-woman-working-office-desktop.jpg);
}
.thumbnail.markdown{
    background-image: url(../images/closeup-computer-keyboard.jpg);
}
.thumbnail.jats{
    background-image: url(../images/pile-colorful-magazines-table.jpg);
}

.attribution{
    position: absolute;
    bottom: 1rem;
    font-size: 0.6em;
    left: 0;
    color: blue;
    background: rgba(255,255,255,0.6);
    padding: 0 0.375em;
    border-top-left-radius: 0.25em;
}

.facets{
    font-size: 0.8em;
    min-width:initial;
}

@media (max-width: 1023px) {
    .doclist {
        margin-bottom: 20px;
    }
    .documents {
        padding-left: 10px;
    }
    .documents li{
        display:block;
    }
    .documents li .thumbnail{
        display:block;
    }
    .documents .label {
        display: none;
    }
    .toolbar pb-search {
        padding-left: 0;
    }
    #facets {
        display: none;
    }
    app-header-layout {
        background-repeat-y: no-repeat;
    }

    nav #login{
        border-bottom: 1px solid;
        padding-bottom:1rem;
        margin-bottom:1rem;
    }

    nav a,
    nav paper-item{
        display:flex;
        font-size:1.2rem;
        min-height:2.5rem;
        align-items:center;
        font-weight:inherit;
    }
    nav paper-menu-button{
        padding:0;
    }

    .github{
        margin-top:1rem;
        padding-top:1rem;
    }
    .github > span{
        padding-left:0.5rem;
    }

}

.tp-title {
    font-family: var(--pb-heading-font-family);
    font-size: 36px;
    font-weight: 400;
}

.tp-title span {
    color: #9e9e9e;
    font-size: 26px;
    margin-top: 12px;
}
.panels {
    margin-bottom: 40px;
    min-height:80vh;
}

@media (min-width: 1024px) {
    .toolbar {
        display: none;
    }
    .panels {
        display: grid;
        grid-template-columns: 1fr minmax(220px, 20vw);
        column-gap: 16px;
    }
}

.panels {
    margin-bottom: 40px;
}

/* needs to be inline within a custom-style element to work - see index.html header
main .panels .doclist {
    --paper-tab-content: {
        font-family: var(--pb-heading-font-family);
        font-weight: 400;
    };
    --paper-card-header: {
        background-color: #607D8B;
    };
    --paper-card-header-text: {
        font-family: var(--pb-heading-font-family);
        font-size: 16px;
        font-weight: 400;
        color:white;
    };
}
*/

.panels .doclist .card-content {
    padding: 0;
}

.panels .doclist .browse {
    display: grid;
    grid-template-columns: minmax(9rem, 20%) minmax(60%,80%);
    column-gap: 6px;
    padding: 0 0.25em;
}

aside {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* needs to be inline within a custom-style element to work - see index.html header
aside .odds,
aside .upload {
    --paper-card-header: {
        background-color: #d1dae0;
        color:black;
    };
    --paper-card-header-text: {
        font-family: var(--pb-heading-font-family);
        font-size: 16px;
        font-weight: 400;
        color: black;
    };
}
*/

aside .upload {
    margin-bottom: 20px;
    width: 100%;
}

.browse aside {
    padding: 0 8px;
    border-right:2px solid #efefef;
}

pb-select {
    margin-top: 0;
}

#document-list {
    margin-top: 1rem;
}

.parent-link iron-icon {
    padding-right: 4px;
}

.parent-link {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 6px 0;
}

.documents img, .documents svg {
    margin-right: 40px;
}

@media (max-width: 480px) {
    .facets table td{
        font-size:0.5em;
    }
}
@media (max-width: 768px) {
    h3 paper-checkbox{
        display:none;
    }

    .facets table td:nth-child(1){
        width:40%;
        font-size:0.75em;
    }

}
@media (max-width: 1023px) {
    .documents img, .documents svg  {
        display: none;
    }
}


.drawer-content iron-icon,
.drawer-content .github-mark{
    width:1.25rem;
    height:1.25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--pb-heading-font-family);
    font-weight: 400 !important;
    line-height: 1.2;
}

h5 {
    font-size: 1rem;
    margin: 0;
}

.github{
    border-top:1px solid;
}

.welcome {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    min-height: 15vh;
    width: 100%;
    grid-gap:0.5rem;
    max-width: calc(100vw - 2rem);
}

.side {
    max-width: 20em;
    padding-left: 2em;
    justify-self:end;
    color:white;
    background:rgba(53,66,75,0.75);
    box-shadow:2px 1px 2px rgba(53,66,75,0.85);
}

.side strong {
    color: var(--pb-color-focus);
}


/* hide Download menu button */
#download-button, .menu-edit-odd {
    display: none;
}
pb-manage-odds{
    --pb-manage-odds-link-color:black;
    --pb-manage-odds-icon-color:#555;
}

@media (max-width: 440px) {
    pb-paginate::part(count) {
        display: none;
    }
}