:root {
    --bg: #111;
    --fg: #eee;

    --muted-fg: rgba(224, 224, 224, 0.75);
    --inactive-fg: rgba(224, 224, 224, 0.5);

    --error-bg: #c00;
    --error-fg: #f99;
}

html {
    background-color: var(--bg);
    color: var(--fg);
    height: 100%;
}

body {
    line-height: 1.3;
    margin: 0;
}

* {
    box-sizing: border-box;
}

body, input, select, button, textarea {
    font-family: "Red Hat Text", sans-serif;
    font-size: 1rem;
}

h1, h2, h3 {
    font-size: 1rem;
    border-bottom: 1px rgba(128 128 128 / 0.5) solid;
    padding: .5rem .75rem;
    font-weight: normal;
    color: lightgray;
    margin: 0;
}

p,
ol, ul {
    margin: 1rem 0;
}

a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255 255 255 / 0.5);
    text-decoration-thickness: 1px;
    border-radius: 2px;
}

a.destructive {
    color: #f66;
    text-decoration-color: rgba(255 51 0 / 0.5);
}

a.has-title::after {
    color: var(--muted-fg);
    content: '\00a0(info)';
    cursor: default;
    display: inline-block;
    text-decoration: none;
}

.muted {
    color: var(--muted-fg);
}

label {
    display: block;
    font-weight: bold;
    margin-top: .75rem;
    margin-bottom: .25rem;
}

.spinner, .wrap {
    max-width: 640px;
}

.wrap {
    background-color: #444;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 1px 0;
    margin: 1rem auto;
}

.wide .wrap,
.wrap-wide {
    max-width: none;
    margin: 1rem;
}

.spinner {
    position: fixed;
    top: .5rem;
    left: 25%;
    right: 25%;
    padding: 1rem;
    background-color: whitesmoke;
    color: #111;
    text-align: center;
    border-radius: 6px;
    /*border-bottom-left-radius: 6px;*/
    /*border-bottom-right-radius: 6px;*/
}

#movie_title {
    box-sizing: border-box;
    width: 100%;
}

::selection {
    color: white;
    background: #d22;
}

:focus {
    text-decoration: none;
    box-shadow: 0 0 0 2px #d22;
    outline: none;
}

input:focus, select:focus {
    box-shadow: 0 0 0 2px #d22 inset;
}

input, select, textarea {
    background: #404040;
    border: 1px #222 solid;
    box-shadow: 0 1px 1px rgba(0 0 0 / 0.1) inset;
    border-radius: 4px;
    color: #eee;
}

input, select, textarea, button, .button {
    padding: .5rem .75rem;
}

textarea {
    width: 100%;
}

.padded {
    padding: 0 .75rem 0 .75rem;
}

form {
    text-align: left;
    padding: 1px .75rem .5rem .75rem;
}

.form-group {
    margin: .75rem 0;
}

.form-errors {
    color: var(--error-fg);
    list-style: none;
    margin: 0 0 .5rem 0;
    padding-left: 0;
}

.form-errors-compound {
    margin: .75rem 0;
}

.form-simple input[type=text],
.form-simple input[type=search],
.form-simple input[type=number],
.form-simple input[type=email],
.form-simple input[type=password] {
    width: 100%;
}

@media screen and (max-width: 640px) {
    .wrap,
    .wide .wrap {
        border: 0;
        margin: .5rem;
    }
}

.ratings {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ratings li {
    display: flex;
    margin: 0;
    padding: 0;
}

.ratings .form-group {
    margin: 0;
}

.ratings li > div {
    display: flex;
    flex-direction: row;
}

/*
    .ratings__participant {
        border-bottom-right-radius: 0;
        border-right-width: 0;
        border-top-right-radius: 0;
    }

    .ratings__rating {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
*/

.nav {
    padding: .5rem .75rem;
    background: #a00;
    border-color: #a00;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.env-dev .nav {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255 255 255 / 0.125) 0,
        rgba(255 255 255 / 0.125) 10px,
        rgba(  0   0   0 / 0.125) 10px,
        rgba(  0   0   0 / 0.125) 20px
    );
}

.nav a {
    color: white;
}

.pad {
    margin: .75rem .75rem;
}

.pad + .pad {
    margin-top: 1rem;
}

.order-by {
    text-decoration: none;
}

.order-by-icon {
    font-weight: normal;
    margin-left: .25rem;
}

.order-by-inactive .order-by-icon {
    color: var(--inactive-fg);
}

table {
    width: 100%;
    font-feature-settings: 'tnum' on;
    border: #666 solid;
    border-width: 1px 0;
    border-collapse: collapse;
}

table th[scope=col] {
    border-bottom: 1px #666 solid;
    text-align: left;
}

table th[scope=rowgroup] {
    text-align: center;
}

th, td {
    padding: .33rem .5rem;
    vertical-align: top;
}

tr:first-of-type > * {
    padding-top: .5rem;
}

tr:last-of-type > * {
    padding-bottom: .5rem;
}

button,
.button {
    background-color: #555;
    border-radius: 4px;
    border: 1px #333 solid;
    box-shadow: 0 0 0 1px #5a5a5a inset, 0 1px 1px #333;
    color: #eee;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.button:focus,
button:focus {
    box-shadow: 0 0 0 1px #d22, 0 0 0 2px #d22, 0 1px 1px 2px #333;
}

button[type=submit],
.button--block {
    display: block;
    width: 100%;
    margin: 1rem 0 .25rem 0;
}

.fill {
    flex-grow: 1;
}

.float-right {
    float: right;
}

.ace_editor {
    min-height: 460px;
}

.backing-field {
    display: none;
}

.flash {
    padding: 1rem;
    background-color: dimgray;
}

.flash-warning {
    font-weight: bold;
}

.flash-error {
    background-color: var(--error-fg);
    color: var(--bg);
}

.error {
    color: var(--error-fg);
    margin: .75rem;
}