/*
@font-face {
    font-family: "Lazydog";
    src: url('lazy_dog.ttf') format('truetype');
}

* {
    font-family: "Lazydog";
}
*/

@font-face {
    font-family: 'Lekton';
    src: url('/static/Lekton-Regular.ttf') format('truetype');
}

html { font-family: "Lazydog"; }
body { max-width: 960px; margin: 0 auto; }
h1 { font-family: 'Poetsen One'; font-size: 32px; color: var(--color-header); margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: var(--color-nav); display: flex; align-items: center; padding: 24px; font-family: 'Poetsen One'; }
nav h1 { flex: auto; margin: 0; color: var(--color-nav-text); font-family: 'Poetsen One'; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; border-radius: 0.5em; background: var(--color-text); width: 100%; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

/* TODO clean */
/* FROM SASS */

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-flow: column nowrap;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-nav-text);
    align-items: center;
}

.page-login, .page-register {
    background-color: var(--color-lighter);
    flex-grow: 1;
}

.page-login form, .page-register form {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

.page-login form label, .page-register form label {
    font-family: var(--font-poet);
    color: var(--color-text);
}

.page-login form input, .page-register form input {
    border: 1px black solid;
    background: var(--color-bg-input);
}

.page-login form button, .page-register form button {
    margin-top: 16px;
    align-self: flex-end;
}


/* FROM SASS END */

.page-dashboard {
    background-color: var(--color-background);
    padding-top: 3rem;
}

h2 {
    font-family: 'Poetsen One';
    color: var(--color-header);
}

h3 {
    color: var(--color-header);
}

.base-container {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.wide-button {
    width: 100%;
    text-align: center;
    color: var(--color-lightest);
}

.wide-button > a {
    display: block;
    padding: 16px;
    margin: 24px;
    width: auto;
    background: var(--color-button-primary);
    font-family: 'Poetsen One';
    border-radius: 40px;
    font-size: 20px;
}

button.wide-button {
    margin-top: 32px;
    display: block;
    padding: 16px;
    width: auto;
    background: var(--color-button-primary);
    font-family: 'Poetsen One';
    border-radius: 40px;
    font-size: 20px;
}

.button-row {
    /* fill container */
    width: 100%;
    /* give buttons equal space */
    display: flex;
    justify-content: space-between;
}

.small-button {
    background: var(--color-darker) !important; /* TODO remove important hack (caused by tailwindcss) */
    color: var(--color-lightest);
    font-family: 'Poetsen One';
    border: none;
    line-height: 16px;
    padding: 8px 24px;
    text-align: left;
    border-radius: 32px;
    align-self: start;
}

.small-button:disabled {
    cursor: not-allowed;
    background-color: #AAA;
}

.danger {
    background-color: #D11;
}

.panel {
    width: 100%;
    border-radius: 40px 40px 0 0;
    background-color: var(--color-panel);
    padding: 24px;
    padding-top: 40px;
}

textarea {
    background-color: var(--color-bg-input);
}

.mark {
    box-sizing: border-box;
    background-color: var(--color-bg-mark);
    border-radius: 32px;
    color: var(--color-mark);
    font-family: 'Poetsen One';
    font-weight: 400;
    padding: 4px 16px;
    margin: 0px 8px 8px 0px;
    display: inline-block;
}

.mark-editable {
    border: 2px solid var(--color-mark);
    padding: 2px 14px;
}

input[type="checkbox"][data-isactive] + .mark {
    background-color: var(--color-darkest);
    color: var(--color-lightest);
}

input[type="checkbox"]:checked + .mark {
    background-color: var(--color-darkest);
    color: var(--color-lightest);
}

input[type="checkbox"][data-isactive]:checked + .mark {
    background-color: var(--color-lightest);
    color: var(--color-darkest);
}

/*
input[type="checkbox"]:checked + .mark {
    border: 4px solid var(--color-brown-1);;
    padding: 0px 12px;
    box-sizing: border-box;
}

input[type="checkbox"][data-isactive]:checked + .mark {
    border-color: var(--color-pink-0);
}
*/

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cal-day {
    font-family: var(--font-mono);
    color: var(--color-day-primary);
    padding: 0.25rem;
    border-width: 2px;
    border-radius: 9999px;
    border-color: transparent;
    width: 2.25rem;
    height: 2.25rem;
    text-align: center;
    font-size: 18px;
    line-height: 1.60rem;
}

.day-today {
    border-color: var(--color-brown-1);
}

.page-selector,
.page-selector-edit {
    background-color: var(--color-selector-background);
    padding: 16px;
}

.month-arrow {
    box-sizing: border-box;
    width: 2.5rem;
    text-align: center;
    padding: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-brown-1);
}

.dashboard-date {
    font-size: 1.75rem;
    line-height: 1.75rem;
}

/* SELECTOR EDIT */

.page-selector-edit {
    /* placeholder */
}

.label {
    margin-top: 16px;
    font-family: var(--font-poet);
    color: var(--color-text)
}

.textbox {
    margin-top: 8px;
    height: 3em;
    padding: 8px;
    border-radius: 16px;
}

/* STATS */

.chart-wrapper {
    width: 100%;
}

.chart-wrapper .column {
    --color: rgba(173, 135, 142, 0.75);
}