form
{
    margin:auto;
}

.field-wrapper
{
    padding:7px 4px 7px 4px;
    border-top:1px dashed #000;
    display:grid;
    grid-template-areas:
     "label value"
     "help  value"
     "error error";
    grid-template-columns:50% auto;
    grid-template-rows:auto 1fr auto;
    column-gap:4px;
}

.field-wrapper[data-field=first_name] { visibility:hidden; height:0px; width:0px; position:absolute; top:0; left:0; } /* Spam */

label
{
    font-weight:bold;
    grid-area: label;
}

.field-help
{
    grid-area: help;
    margin:7px 4px 7px 4px;
}

.field-value { grid-area: value; }
.field-value input[type=text], .field-value textarea, .field-value input[type=file], .field-value input[type=date],
.field-value input[type=url], .field-value select, .field-value input[type=password], .field-value input[type=email]
{
    box-sizing:border-box;
    width:100%;
}

.field-value ul {
    margin:0;
    padding:0;
    list-style: none;
}

.field-value label { font-weight:normal; }
.field-value input[type=checkbox] { width:auto; }
.field-value textarea { height:100px; }
.field-value input[type=button]
{
    margin:7px 0px 7px 8px;
    float:right;
    background:#DEF;
    font-family:cp437;
    padding:7px 4px 7px 4px;
}

.chars-remaining, .size-limit
{
    font-size:smaller;
    text-align:right;
}

input:disabled { background:#AAA; }

/* Specialty Forms */
.scrolling-checklist
{
    font-family:mono;
    min-height: 200px;
    height: 200px;
    overflow: auto;
    min-width: 300px;
    border: 1px solid #000;
    background: #AAA;
    resize: vertical;
}

.scrolling-checklist label { display:block; }
.scrolling-checklist label + label {  border-top: 1px dotted #000; }
.scrolling-checklist label.selected { background: #619F9F;}
.scrolling-checklist label:hover { background:#98C9C9; }

@media (max-width:480px) {
    .field-wrapper
    {
        grid-template-columns:35% auto;
    }
}

/* Advanced Search Tweaks For Mobile */
@media (max-width:480px) {
    .radio-list label
    {
        display:block;
    }

    .scrolling-checklist
    {
        min-width:auto;
        width:auto;
    }

    .scrolling-checklist-filter .widget-filter
    {
        max-width:60px;
    }
}

.upload-area
{
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    height:100px;
    font-family:cp437;
    border:3px dashed #000;
    flex:1;
    cursor:pointer;
    background:#619F9F;
}

.upload-area.dragging { background:#98C9C9; }

.upload-info
{
    font-family:monospace;
    font-size:larger;
    max-height:150px;
    overflow:auto;
}

.upload-info .file-list-header
{
    border-bottom:1px solid #000;
    font-weight:bold;
    position:sticky;
    top:0px;
    background:#F0F0F0;
}

.upload-info .file-size { float:right; }
.upload-info .file-list li { border-bottom:1px dotted #000; }

.hr-checklist-values, .field_filter
{
    font-family:monospace;
    font-size:larger;
    border:1px solid #000;
    border-bottom:0px;
    padding:7px 4px 7px 4px;
    min-height:2.1ch;
    background-color:#619F9F;
    font-weight:bold;
}

.field_filter input { font-size:smaller; }
.field_filter label { font-weight:bold; }

#id_zfile { display:none; }

.field-with-error { background-color:#FCC; }

.errorlist { font-weight: bold; }

/* Older non-django form CSS below */
#terms { height:20ch; }

.field.error input { background: #FCC; }
.field-group textarea { flex:1; }
.field-group p { flex:1 1 100%; margin:0; }
.form-error { font-weight:bold; }
.prepop-data { font-weight:bold; }
.field.error .prepop-data { background: #FCC; }

.range-widget
{
    width:6ch;
    text-align:right;
}

.ul-scrolling-checklist
{
    max-height:250px;
    overflow-x:auto;
    border:1px solid #000;
    background: #AAA;
    font-family:monospace;
    font-size:larger;
}

.ul-scrolling-checklist li { display:block; }
.ul-scrolling-checklist li + li {  border-top: 1px dotted #000; }
.ul-scrolling-checklist li.selected { background:#619F9F;}
.ul-scrolling-checklist li:hover { background:#98C9C9; }
li.arrangeable, li.arrangeable label { cursor:grab; }

.related-content-header
{
    text-align:center;
    font-weight:bold;
    border-bottom:1px solid #000;
}

.related-content-wrapper
{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

.related-content-wrapper label { flex:1 0 95%; }

/* Jul 2022 Form modifications */
.scrolling-checklist-filter
{
    background-color:#619F9F;
    border-bottom:1px solid #000;
    position:sticky;
    top:0px;
    font-size:16px;
    padding:2px 8px 2px 8px;
}

.scrolling-checklist-filter input[type=button].widget-clear { margin-top:-1px; }
.scrolling-checklist label input { margin-right:8px; margin-left:8px; }

.label-button { padding-left:16px; }
.label-button:hover { cursor:pointer; }

input[type=button]:hover, input[type=submit]:hover
{
    text-decoration:underline;
    text-decoration-style:dashed;
    cursor:pointer;
}

.tag
{
    display:none; /* Template is hidden */
    margin:4px;
    font-weight:bold;
}

.tag-list { min-height:45px; }
.tag-list > div { display:inline-block; }
.tag-list > div:first-child { margin-left:0px; }
.tag > div { display:inline-block; }
.tag > div:hover { background:#98C9C9; }
.tag.selected .tag-text { background-color:#98C9C9; }

.tag-text
{
    display:inline-block;
    background:#AAA;
    border:1px solid #000;
    border-right:0;
    border-radius:8px 0 0 8px;
    padding:7px 8px 7px 8px;
}

.tag-text:hover { cursor:grab; }
.tag-text.no-hover:hover { cursor:auto; }
.tag-text.no-highlight:hover { background:#AAA; }

.tag-remove
{
    display:inline-block;
    border:1px solid #000;
    border-left:1px dashed #000;
    border-radius:0 8px 8px 0;
    background:#619F9F;
    padding:7px 8px 7px 8px;
}

.tag-remove:hover { cursor:pointer; }

.tag.dragging { opacity:0.25; }

.tag-ghost
{
    border:1px dashed #000;
    border-radius:8px;
    padding:7px 8px 7px 8px;
    width:4ch;
    text-align:center;
    font-weight:normal;
}

.controls
{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:0.5em;
}

.ascii-table { display:grid; }
.ascii-table.scale-1.horiz { grid-template-columns: repeat(32, 8px); }
.ascii-table.scale-2.horiz { grid-template-columns: repeat(32, 16px); }
.ascii-table.scale-1.vert { grid-template-columns: repeat(16, 8px); }
.ascii-table.scale-2.vert { grid-template-columns: repeat(16, 16px); }
.ascii-table .ascii-char-image:hover {
    outline:4px solid #FF5;
    z-index:2;
    cursor:pointer;
}
.ascii-selected-highlight { display:flex; align-items:center; }
.ascii-selected-char { margin-left:0.5em; margin-right:0.5em; }

button.color-button {
    float:none;
    width:32px;
    height:32px;
    cursor:pointer;
}
button.color-button:first-child { margin-bottom:7px; }
button.color-button.selected { border:inset; }

/* Specific Fields */
input[name=count], input[name=priority]
{
    width:4ch;
    text-align:center;
}

textarea[name=wozzt-tweet] { height:150px; }

input[name=rss-url]
{
    margin:auto;
    display:block;
    width:90%;
}
/* End specific fields */