@import "common.css";

html {
    height: -webkit-fill-available;
    height: 100dvh;
}

body {
    height: -webkit-fill-available;
    height: 100dvh;
}

.footer {
    /* padding: 0.5rem; */
    text-align: center;
}

.adaptations-container {
    display: flex;
    flex-direction: row;
}

.adaptations-letter {
    flex: 1 10;
    display: flex;
    flex-direction:row;
    justify-content:center;
    font-size: 2rem;
}

a.adaptations-letter {
    text-decoration: none;
}

.adaptations-letter:hover {
    background-color: rgba(200, 200,200,0.4);
}

.adaptations-letter.-selected {
    background-color: rgba(100, 100, 100, 0.6);
    color: white;
}

.reader article {
    padding: 0.5rem;
    margin-bottom: 50px; 
    margin: 0 auto 1rem auto;
    max-width: 40rem;
}

.reader article > h1 {
   padding-bottom: 0;
   margin-bottom: 0;
}

.reader article > div.subtitle {
    padding: 0.25rem 0 1 rem 0;
    font-style: italic;
}

.reader article > author {
    font-style: italic;
}

.reader article > author  {
    display: block;
    margin-bottom: 2rem;
}

.reader article > .time-and-label {

}

.reader article > .time-and-label > .time-label {
 font-style: italic; 
 margin-right: 0.75rem;
}

.reader article > .time-and-label > time {
}

.reader article > footer {
    padding-top: 0.5rem;
}

.reader article > footer > a {
    display: block;
}

.reader article > footer > a > .bi {
    margin-right: 0.5rem;

}

.article {
    width: 50rem;
    font-family: sans-serif;
    margin: 1rem;
}

.article p {
    width: 50rem;
}

.article p + p {
    margin-top: 1rem;
}

.split-body {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.split-body > .col1 {
    flex: 0 0 50em;
    /* flex: 1 1 0; */
}

.split-body > .col2 {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

.full-height-flex {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

form textarea {
    height: 100%;
    overflow-y: auto;
}

.markdown-preview {
    background-color: rgba(50, 50, 50, 1);
    flex: 1 1 0;
    overflow-y: auto;
    border: 1px dashed white;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

/*
General wrapper style for content area
*/
.content-area {
    /* width: 50rem; */
    font-family: sans-serif;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.vertical-scroll-auto {
    overflow-y: auto;
}

.two-column-page {

}

.two-column-page .-grid {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
}

.two-column-page .-col1 {
    /* flex: 1 1 0; */
    flex: 0 0 700px;
    overflow-y: auto;
}

.two-column-page .-col2 {
    /* flex: 0 0 20rem; */
    flex: 1 1 0;
    overflow-y: auto;
}

.adapt-grid {
    display: flex; 
    flex-direction: column;
}

.adapt-grid-row {
    display: flex;
    flex-direction: row;
}

.adapt-grid-row > .adapt-grid-col {
    display: flex;
    flex-direction: column;
}

.adapt-grid-row > .adapt-grid-col.-fill {
    flex: 1 1 0;
}

.adapt-grid-row > .adapt-grid-col.-auto {
    flex: 0 0 auto;
}

.adapt-grid-row.-gutter-1 > .adapt-grid-col {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.adapt-grid-row.-gutter-1 > .adapt-grid-col:nth-child(1) {
    padding-left: 0;
}

.adapt-grid-row.-gutter-1 > .adapt-grid-col:last-child {
    padding-right: 0;
}

.home {
    /* width: 50rem; */
    font-family: sans-serif;
    /* margin: 1rem; */
    flex: 1 1 0;
    display: flex; 
    flex-direction: column;
}

.page-header {
    /* margin: 1rem; */
    background-color: rgba(60, 60, 60, 1);
    height: 5rem;
    justify-content: center;
    display: flex;
    flex-direction: column;
}


.adapt-flex-table {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.adapt-flex-table.-resizable {
    overflow: hidden;
    resize: vertical;
}

.adapt-flex-table.-scrollable {

}

.adapt-flex-table.-bordered {
    border: 1px dashed silver;
    border-radius: 0.25rem;
}

.adapt-flex-row {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
}

.adapt-flex-table-header {
    border-bottom: 1px dashed silver;
    overflow-y: scroll;
}

.adapt-flex-table-body {
    flex: 1 1 0;
    overflow-y: scroll;
}

.adapt-flex-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.adapt-well {
    border: 1px dashed silver;
    padding: 1rem;
    border-radius: 1rem;
}

.adapt-well + p {
    padding-top: 1rem;
}

/* EDITOR */

.markdown-preview {

}

.markdown-rendered blockquote {
    background-color: rgba(100, 100, 100, 0.1);
    margin-left: 1rem;
}

.markdown-preview blockquote {
    background-color: rgba(100, 100, 100, 0.1);
    margin-left: 1rem;
}

/* Alert */

.alert {
    padding: 16px;
}

.alert.primary {
    border: 2px solid rgb(17, 37, 150);
}

.alert.info {
    border: 2px solid rgb(99, 99, 99);
}

.alert.warning {
    border: 2px solid rgb(229, 170, 42);
}

.alert.error {
    border: 2px solid red;
}

.alert.neutral {
    border: 2px solid rgb(103, 103, 103);
}

/* Spacing stuff */

/* misc */

.margin {
    margin: 16px;
}

.padding {
    margin: 16px;
}

.margin-top {
    margin-top: 16px;
}

.padding-top {
    padding-top: 16px;
}

/* status column */

.status-draft {
    color: orange;
}

.status-published {
    color: green;
}

.status-retracted {
    color: red;
}


/* 

Main layout 

The site is primarl

*/