/* We brought back Roboto.  It is easier to develop, especially when we need
 * to cram lots of things in tight spaces, if everyone uses the same font.
 */
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Bold-webfont.50d75e48e0a3.woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Regular-webfont.35b07eb2f871.woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Light-webfont.c73eb1ceba33.woff");
    font-weight: 300;
    font-style: normal;
}

.emoji-text {
    font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
}

html[data-theme="light"], :root {
    --font-family-primary:
        Roboto,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";

    --header-branding-color: var(--primary-fg);
}

html[data-theme="dark"] {
    --body-quiet-color: #a3a3a3;
}
/* dark_mode.css does it this way. */
@media (prefers-color-scheme: dark) {
    :root {
        --body-quiet-color: #a3a3a3;
    }
}

/* This feels like a bug.  --header-branding-color is not used. */
#branding h1 {
    color: var(--header-branding-color);
}
#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: var(--header-branding-color);
}

/* Disable centering from responsive.css. */
@media (max-width: 1024px)
{
    div#header
    {
        flex-direction: row;
        justify-content: space-between;
    }
}

body {
    background: var(--darkened-bg);
}

/* Disable alternating row color on layout rows. */
tr.layout:nth-child(odd), tr.layout:nth-child(even)
{
    background: var(--darkened-bg);
}

#user-tools {
    font-size: 15px;
    font-weight: 300;
    text-transform: initial;
}

thead th abbr {
    text-transform: none;
}

@media (max-width: 767px) {
    .aligned .form-row input[type="checkbox"] {
        flex: inherit;
    }
}

/* By default, the autocomplete boxes are greyed out when disabled, but
 * regular inputs are not. */
input[type=text][disabled], input[type=password][disabled],
input[type=email][disabled], input[type=url][disabled],
input[type=number][disabled], input[type=tel][disabled], textarea[disabled],
select[disabled], .vTextField[disabled] {
    background-color: var(--darkened-bg);
}

.strikethrough {
    text-decoration: line-through;
}

.strikethrough:hover {
    text-decoration: none;
}

/* Allow selecting text out of the select2 autocomplete boxes. */
span.select2-selection__rendered {
    user-select: text;
}
.select2-selection__clear {
    user-select: none;
}
.select2-container--open span.select2-selection__rendered {
    cursor: text;
}

/* When a DAL (django-autocomplete-light) field is disabled, the select2
 * autocomplete gets background-color: aaa which makes the box completely
 * white. */
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--darkened-bg) !important;
}
/* dark_mode.css does it this way. */
@media (prefers-color-scheme: dark) {
  .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--darkened-bg) !important;
  }
}


/* COMMENTS */

.form-row.comments_table
{
    padding: 2px 0 0 0;
    border-bottom: none;
}

form .aligned .comment-textentry textarea + div.help
{
    margin-left: 0;
    padding-left: 0;
}

.comment {
    padding: 5px 10px 5px 10px;
    border-bottom: 1px solid var(--hairline-color);
    font-size: 13px;
}

.aligned .form-row div.comment_hidden_hide {
    display: none;
}

.comment p {
    padding: 0px;
    margin: 0px;
}

.comment p + p,
.comment p + pre,
.comment pre + p,
.comment pre + pre
{
    padding-top: 10px;
}

.comment pre {
    border: 0;
    padding: 2px 0 0 0;
    margin: 0;
}

.comment-prefix {
    color: var(--body-quiet-color);
    font-size: 11px;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .comment-header {
        flex: 1 1 100%;
    }
}

.comment-namedate-wrapper {
    order: -1;
    padding-bottom: 5px;
    padding-right: 2px;
}

.comment-hide-unhide {
    /* float is for wider screens.  When the parent goes flex on smaller
     * screens, float does not apply and we use margin-left and order. */
    float: right;
    margin-left: auto;
    width: 16px;
    height: 16px;
}

.comment-form-manage {
    padding: 10px 10px 10px 10px;
}

.comment-form textarea, .comment-form-manage textarea {
    width: 500px;
    height: 1.5em;
}

img.help  {
    cursor: help;
}

#id_comment_add-attachments {
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
}

.comment-loading-icon  {
    vertical-align: middle;
    display: none;
    padding: 3px 0;
}

.comment-loading-icon-hide-unhide {
    vertical-align: middle;
    display: none;
    float: right;
}

form div.comment ul {
    padding: 0 10px 0 10px;
    margin: 0.2em 0 0.8em 1.5em;
}
form div.comment ul li {
    list-style-type: square;
}

form div.comment ul.attachments {
    padding-left: 0;
}

form div.comment ul.attachments li {
    list-style-type: none;
}

form div.comment ul.attachments li figure {
    margin: 0;
}

.comments_table div:first-child {
    border-top: 0;
}

.comment-customer-visible,
.comment-customer-invisible
{
        opacity: 0.4;
}

@media (max-width: 767px)
{
    .aligned .form-row > div.comment {
        /* Turn off display: flex. */
        display: block;
    }
    .aligned .form-row > div.comment_hidden_hide {
        display: none;
    }
}

/*
 * vim: ai ts=4 sts=4 et sw=4
 */