:root {
    --brand-primary-color: #005088;
    --brand-secondary-color: #007AB9;
    --brand-primary-color-debug: #087f5b;
    --brand-secondary-color-debug: #0ca678;
}

html {
    font-size: 16px;
}

body {
    font-size: 12px;
    line-height: 1.25rem;
    font-family: 'Open Sans', sans-serif;
    background-color: #f1f3f5;
}

.button {
    display: flex;
    border-radius: 2px;
    font-weight: bold;
    transition: 120ms ease-in-out;
    transition-property: color, background-color;
    align-items: center;
}

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

.badge {
    background-color: var(--brand-secondary-color);
    color: #fff;
    font-weight: bold;
    padding: 0 0.5rem;
    border-radius: 2px;
    cursor: default;
}

.badge.pass {
    background-color: #00957A;
}

.badge.reviewing {
    background-color: #007AB9;
}

.badge.fail {
    background-color: #d6336c;
}

.badge.risk-level {
    width: 5rem;
    margin: 0 .5rem;
}

.badge.risk-level.n-a {
    background-color: #212529;
}

.badge.risk-level.low {
    background-color: #79BE70;
}

.badge.risk-level.normal {
    background-color: #007AB9;
}

.badge.risk-level.increased {
    background-color: #e67700;
}

.badge.risk-level.high {
    background-color: #fa5252;
}

.queryitem {
    display: flex;
    flex: 0 1 auto;
    background: rgba(107, 115, 117, 0.1);
    border-radius: .125rem;
    padding: 0 0.5rem;
    margin: 0.125rem;
    align-items: center;
}

.inactive {
    opacity: 0.5;
}

.header {
    display: flex;
    padding: 0.5rem 2rem;
    line-height: 1.5rem;
    background-color: var(--brand-primary-color);
    color: #ffffff;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.header .logo {
    margin-right: 0.25rem;
}

.header .logo img {
    display: block;
    margin: -0.25rem 0.25rem;
    padding: 0.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    transition: background-color 120ms ease-in-out;
}

.header .logo a:hover img,
.header .logo a:focus img {
    background-color: var(--brand-secondary-color);
}

.header .menu {
    display: flex;
    flex: 1 0 0;
    position: relative;
}

.header .menu.profile {
    justify-content: flex-end;
}

.header .menu.profile .sub-menu {
    right: 0;
}

.header hr {
    border: none;
    border-top: 1px solid #343a40;
    margin: 0.25rem 0;
}

.header .sub-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #001425;
    visibility: hidden;
    position: absolute;
    border-radius: 0 0 2px 2px;
    top: 2rem;
    padding: 0.25rem 0;
    min-width: 8rem;
}

.header .sub-menu div {
    display: flex;
}

.header .sub-menu div .button {
    flex-grow: 1;
}

.header .sub-menu div .button.add {
    margin-left: -.25rem;
    padding: 0 0.25rem;
    flex-grow: 0;
}

.header .menu .entry:focus-within .sub-menu {
    visibility: visible;
}

.header .menu .entry:focus-within>.button {
    background-color: var(--brand-secondary-color);
}

.header .menu .entry .button svg {
    width: 1rem;
    margin-right: 0;
}

.header .menu .entry .button svg.icon-all {
    margin: .25rem 0;
}

.header>.button svg {
    display: inline-block;
    width: 0.75rem;
    margin-left: -0.25rem;
    margin-right: 0.75rem;
}

.header .button {
    color: inherit;
    padding: 0 1rem;
    margin: 0 0.25rem;
}

.header .button:hover,
.header .button:focus {
    background-color: var(--brand-secondary-color);
}

.header .sub-menu .button {
    margin: 0.25rem 0.5rem;
}

.header .badge {
    margin-right: -0.5rem;
    margin-left: 0.5rem;
    font-size: 0.675rem;
}

.header.debug {
    background-color: var(--brand-primary-color-debug);
}

.header.debug .logo a:hover img,
.header.debug .logo a:focus img {
    background-color: var(--brand-secondary-color-debug);
}

.header.debug .button:hover,
.header.debug .button:focus {
    background-color: var(--brand-secondary-color-debug);
}

.header.debug .menu .entry:focus-within>.button {
    background-color: var(--brand-secondary-color-debug);
}

.main {
    padding: 2.5rem 0;
}

.main svg {
    width: 1rem;
    height: 1rem;
}

.main .container>.title {
    flex: 1 0 100%;
    margin-top: 1rem;
    margin-bottom: .75rem;
    font-size: 1.25rem;
    font-weight: normal;
}

.main .container>.title-row>.title {
    margin-top: 1rem;
    margin-bottom: .75rem;
    font-size: 1.25rem;
    font-weight: normal;
}

.title-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.info-text {
    padding-left: 0.5rem;
    margin-top: 1rem;
    margin-bottom: .75rem;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.37);
}

.main .container>.super-title {
    flex: 1 0 100%;
    margin: -0.5rem 0 1rem 0.5rem;
}

.main .button svg {
    display: inline-block;
}

.main .button {
    background-color: var(--brand-secondary-color);
    color: #ffffff;
    padding: 0 0.5rem;
}

.main .button:hover,
.main .button:focus {
    background-color: var(--brand-primary-color);
}

.main .controls {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    padding: 0.375rem 0;
}

.main .controls .button {
    padding: 0 1rem;
}

.main .controls .button.add svg {
    margin-right: 0.5rem;
}

.main .controls .switch-view {
    display: flex;
    margin-left: 0.5rem;
}

.main .controls .switch-view .button {
    padding: 0.25rem 0.75rem;
    background: #ffffff;
    border-radius: 0;
}

.main .controls .switch-view .button:hover {
    background-color: #294152;
}

.main .controls .switch-view .button:hover svg {
    color: #ffffff;
}

.main .controls .switch-view .button svg {
    color: #294152;
}

.main .controls .switch-view .button.selected {
    background-color: #212529;
}

.main .controls .switch-view .button.selected svg {
    color: #ffffff;
}

.main .controls .switch-view .button:first-of-type {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.main .controls .paginate-by {
    padding: 0;
    text-align: center;
    border-radius: 0.125rem;
    background-image: unset;
    margin-right: 0.25rem;
}

.button.add {
    margin-left: 0.5rem;
}

.button.search {
    margin-left: 0.5rem;
}

.button.excel {
    margin-left: .5rem;
    padding: 0 .5rem !important;
}

main .button.excel svg {
    width: 1.5rem;
    height: 1.5rem;
}

.button.filter {
    margin-left: 0.5rem;
    background-color: #79BE70;
}

.button.filter svg {
    transition-property: fill, transform;
}

.button.save {
    background-color: #FF6720;
}

.button.lock {
    background-color: #56A61F;
}

.button.create {
    background-color: #00957A;
}

.main .controls>input {
    background-color: #ffffff;
}

.main .controls input,
.main .controls select {
    width: unset;
}

.main .controls .pagination {
    display: flex;
    background-color: #ffffff;
    padding: 0.25rem;
    border-radius: 1px;
}

.main .controls .pagination .button {
    background-color: transparent;
    padding: 0 0.25rem;
}

.main .controls .pagination .button:not([href]) svg {
    color: #f1f3f5;
}

.main .controls .pagination .button[href] svg {
    color: var(--brand-secondary-color);
}

.main .controls .pagination .button[href]:hover,
.main .controls .pagination .button[href]:focus {
    background-color: var(--brand-secondary-color);
}

.main .controls .pagination .button[href]:hover svg,
.main .controls .pagination .button[href]:focus svg {
    color: #ffffff;
}

.main .controls .pagination .current {
    margin: 0 0.5rem;
    width: 4rem;
    text-align: center;
}

.main .controls .popup-check {
    display: none;
}

.main .controls .popup-check:checked~.filter-popup {
    display: flex;
}

.main .controls .popup-check:checked~label .button.filter svg {
    transform: translate(-12.5%, 12.5%) rotate(60deg);
}

.main .controls .filter-popup {
    display: none;
    flex-wrap: wrap;
    flex: 1 0 100%;
    margin-top: 0.5rem;
}

.main .controls .filter-popup input,
.main .controls .filter-popup select {
    border-color: transparent;
    padding: 0 0.5rem;
    margin: -.0625rem 0.25rem;
}

.main .controls .filter-popup input:hover,
.main .controls .filter-popup select:hover {
    border-color: rgba(70, 80, 90, 0.75);
}

.main .controls .filter-popup input:focus,
.main .controls .filter-popup select:focus {
    border-color: var(--brand-secondary-color);
}

.main .controls .filter-popup .button {
    padding: 0 0.5rem;
}

.main .controls .filter-popup .controls {
    margin-bottom: 0.5rem;
    padding: 0;
    margin: 0 -0.25rem;
}

.main .controls .filter-popup .controls .filter-control {
    display: flex;
    flex: 1 0 auto;
    padding: 0.25rem 0.5rem;
    background-color: #79BE70;
    border-radius: 1px;
    margin: 0.25rem;
}

.main .controls .filter-popup .controls .filter-control>svg {
    margin: 0 0.5rem 0 0.25rem;
}

.main .controls .filter-popup .controls .filter-control.new-summary {
    background-color: #FF9E1B;
}

.main .controls .filter-popup .filters {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    margin: 0 -0.25rem;
}

.main .controls .filter-popup .filters .filter {
    display: flex;
    background-color: #ffffff;
    margin: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1px;
    align-items: center;
    order: 1;
}

.main .controls .filter-popup .filters .filter.summary {
    order: 2;
}

.main .controls .filter-popup .filters .filter strong {
    margin-right: 0.25rem;
}

.main .controls .filter-popup .filters .filter .button {
    padding: 0;
    background: none;
}

.main .controls .filter-popup .filters .filter .button svg {
    color: #d6336c;
}

.main .controls .filter-popup .filters .filter .button:hover {
    background-color: #dee2e6;
}

.main .controls .filter-popup .filters .filter .icon-filter-check {
    color: #79BE70;
    margin-right: 0.5rem;
}

.main .controls .filter-popup .filters .filter .icon-filter-cross {
    color: #d6336c;
    margin-right: 0.5rem;
}

.main .controls .filter-popup .filters .filter .icon-summary {
    color: #FF9E1B;
    margin-right: 0.5rem;
}

.main .controls .filter-popup .filters .filter .icon-arrow-asc,
.main .controls .filter-popup .filters .filter .icon-arrow-dsc {
    color: #845ef7;
    margin-right: 0.25rem;
}

.main .controls .filter-popup .button {
    margin-left: 0.25rem;
}

.main .controls .filter-popup .button.new-report {
    margin: 0.25rem;
    padding: 0.125rem 0.75rem;
}

.main .row {
    display: flex;
    margin: 0.125rem auto;
    padding: 0.5rem 1rem;
    background-color: #ffffff;
    border-radius: 2px;
    flex: 1 0 100%;
    flex-wrap: wrap;
    max-width: 100%;
}

.main .row.mast {
    margin-top: -0.5rem;
    margin-bottom: 0;
    background-color: transparent;
    padding-right: 0;
}

.main .row .mast-side {
    margin-left: auto;
}

.main .row.mast .mast-side {
    margin-top: auto;
}

.main .row.editing,
.main .row.creating {
    margin-bottom: 0.5rem;
    background-position: 2px 0;
    padding: 0.4375rem 0;
}

.main .row.editing {
    background-size: 24px 24px;
    background-color: #294152;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFC600' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.main .row.creating {
    background-color: var(--brand-primary-color);
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23007AB9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.main .row.editing~.row.editing,
.main .row.creating~.row.creating {
    margin-top: 0.5rem;
}

.main .row.wwft-missing {
    background-color: #ffced5;
    color: #910334;
    font-weight: bold;
}

.main .row.wwft-missing .actions {
    margin: -.25rem 0 -.25rem auto;
}

.main .row.archived {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23F7F8F9' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.main .row div.title {
    display: flex;
    flex: 1 0 100%;
}

.main .row.document .title .name {
    font-size: 1.125rem;
}

.main .row.success {
    background-color: #0ca678;
    color: #fff;
}

.main .row.success h3 {
    margin: 0;
}

.main .row.blank {
    background: transparent;
}

.main .row.rounded {
    border-radius: .25rem;
}

.main .row .mast-side {
    order: 1;
}

.main .row .mast-head h1 {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    margin-bottom: 0.25rem;
}

.main .row .mast-head h2 {
    font-size: 1.125em;
    color: var(--brand-primary-color);
    font-weight: normal;
}

.main .row .banner-tag {
    display: flex;
    border-radius: 0.125rem;
    padding: 0 .5rem;
    margin: .25rem;
    cursor: help;
    align-items: center;
}

.main .row .banner-tag.restricted {
    background-color: #fa5252;
    color: #fff;
}

.main .row .banner-tag.archived {
    background-color: #868e96;
    color: #fff;
}

.main .row .banner-tag svg {
    margin-right: 0.5rem;
}

.row .actions {
    display: flex;
    margin-left: auto;
}

.row .actions .button {
    margin: 0.125rem 0 0.125rem 0.5rem;
    padding: 0.125rem 0.75rem;
}

.row .actions .button svg {
    margin-right: 0.5rem;
}

.main .row .plain {
    width: 100%;
}

.main .row .plain.qr-code svg {
    width: unset;
    height: unset;
}

.main .row.markdown>p>img {
    margin: auto;
    max-width: 100%;
    max-height: 20rem;
}

.main .row .details {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.main .row .details h2 {
    font-size: 1rem;
    margin-top: 0.5rem;
}

.main .row .details .field-set {
    border-left: 0.25rem solid transparent;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.main .row .details .field-set:hover {
    border-color: #f1f3f5;
}

.main .row .details .field {
    width: 25%;
    margin-bottom: 0.25rem;
    padding: 0 0.5rem;
}

.main .row .details td.field {
    padding: 0;
}

.main .row .details .field .field-title {
    color: #868e96;
    font-size: 87.5%;
    font-weight: normal;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.main .row .details .field .field-value {
    display: flex;
    flex-wrap: wrap;
    flex: 1 0 100%;
}

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.main .week-picker {
    display: flex;
    flex: 1 0 100%;
    margin: -0.25rem;
}

.main .week-picker .button {
    justify-content: center;
    margin: 0.25rem;
    padding: 0.125rem 1rem;
    flex: 1 0 0;
}

.main .week-picker .button.active {
    background-color: #00957A;
    color: #ffffff;
}

.main .week-picker .button.active:hover,
.main .week-picker .button.active:focus {
    background-color: var(--brand-primary-color);
}

.main .week-picker .button small {
    margin-left: auto;
}

.main h1 small {
    margin-left: 0.5em;
}

.main .row.job .title h1 {
    font-size: 1.125em;
    font-weight: normal;
    margin-bottom: 0.125rem;
}

.main .controls .time-bar {
    background-color: #294152;
    flex: 1 0 100%;
    border-radius: 1px;
    padding: 0.125rem;
}

.main .controls .time-bar .time-progress {
    background-color: #79BE70;
    border-radius: 1px;
    color: #f1f3f5;
    padding: 0 0.5rem;
    text-align: right;
    line-height: 0.75rem;
    font-size: 0.5rem;
    font-weight: bold;
}

table {
    table-layout: fixed;
    width: 100%;
}

table td,
th {
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.query-view td.field .field-value {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

table.query-view .sumrow {
    border-top: 1px solid #294152;
    pointer-events: none;
    font-weight: bold;
}

table.query-view .sumrow td {
    padding: 0.25rem 0.5rem;
}

table.query-view td.title {
    text-overflow: ellipsis;
}

table.query-view td.title .actions {
    display: inline-flex;
    visibility: hidden;
    margin-right: 0.5rem;
}

table.query-view tr:hover td.title .actions {
    visibility: visible;
}

table.query-view td.title .actions a.button {
    background: none;
    display: inline;
    padding: 0.125rem;
}

table.query-view tr td.title .actions a.button svg {
    color: var(--brand-secondary-color);
}

table.query-view tr td.title .actions a.button:hover svg {
    color: var(--brand-primary-color);
}

table.query-view tbody tr:nth-of-type(2n+1) {
    background-color: #ffffff;
}

table.query-view tbody tr:hover {
    background-color: #dee2e6;
}

table.query-view thead tr:first-of-type th:nth-of-type(2n) {
    background-color: #ffffff;
}

table.query-view thead tr:last-of-type th {
    background-color: #212529;
    color: #ffffff;
}

table.query-view thead th {
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    cursor: default;
}

table.query-view thead th[data-field] {
    cursor: pointer;
}

table.query-view thead th[data-field]:hover {
    background-color: var(--brand-primary-color);
}

table.query-view tr .field-value .icon-cross {
    transition: none;
}

table.query-view tr:hover .field-value .icon-cross {
    color: #ffffff;
}

table.query-view tr .field-value .icon-check {
    color: var(--brand-secondary-color-debug);
}

table.query-view .icon-arrow-asc,
table .icon-arrow-dsc {
    margin-left: 0.5rem;
}

th.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    z-index: 20;
}

td.sticky-column,
th.sticky-column {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 10;
}

th.sticky-column {
    z-index: 21;
}

.row.markdown {
    display: block;
    font-size: 13px;
}

.row.markdown table {
    margin-bottom: 1rem;
    table-layout: auto;
    width: 100%;
}

.row.markdown table th {
    padding: 0.25rem;
}

.row.markdown table td {
    padding: 0.25rem;
    white-space: normal;
}

.row.markdown code {
    background-color: rgba(33, 37, 41, .1);
    padding: .125rem .375rem;
    border-radius: .25rem;
}

.row.markdown hr {
    border-color: #868e96;
    margin: 2rem 0;
}

.field-value .icon-cross {
    margin: 0.125rem 0;
    width: 0.75rem;
    color: #dee2e6;
}

.field-value.shrunk {
    height: 1.5rem;
    overflow: hidden;
}

.field-value input,
.field-value select {
    padding: 0.125rem 0.5rem;
}

.icon-send {
    margin-left: -2px;
}

.field .icon-field-info {
    color: #87cdde;
}

hr {
    border: none;
    border-top: 1px solid var(--brand-primary-color);
}

.tooltip {
    position: relative;
    margin-left: auto;
}

.tooltip:hover {
    border-bottom: none;
    cursor: default;
}

.tooltip:before {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: max-content;
    max-width: 20rem;
    padding: 0.5rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    content: attr(data-info);
    bottom: calc(100% + 0.25rem);
    right: calc(50% - 1rem);
    transition: opacity 0.3s;
}

.tooltip:after {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    border: 0.25rem solid transparent;
    content: "";
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-width: 0;
    border-top-color: rgba(0, 0, 0, 0.8);
    transition: opacity 0.3s;
}

.tooltip:hover:before,
.tooltip:hover:after {
    opacity: 1;
    z-index: 2;
}

.container.dashboard {
    padding: .5rem;
}

.container.dashboard .column {
    display: flex;
    flex-direction: column;
    flex: 1 0 50%;
    max-width: 50%;
}

.container.dashboard .column>.block {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    padding: 1rem;
    margin: .5rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #fff;
    align-items: center;
    border: 1px solid transparent;
}

.container.dashboard .column>.block img {
    margin: -.5rem;
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    transition: margin 0.1s ease-in-out;
}

.container.dashboard .column>.block:hover img {
    margin-right: -.25rem;
}

.container.dashboard .column>.block p {
    width: 100%;
    margin: 0;
}

.container.dashboard .column>a.block {
    border-color: #74c0fc;
}

.container.dashboard .column>a.block:hover {
    border-color: #339af0;
    text-decoration: none;
}

.container.dashboard .column>a.block.block-urgent {
    border-color: #fcc419;
    color: #e67700;
}

.container.dashboard .column>a.block.block-urgent:hover {
    border-color: #f59f00;
}

.container.dashboard .column>a.block.block-highlight {
    border-color: #51cf66;
    color: #2b8a3e;
}

.container.dashboard .column>a.block.block-highlight:hover {
    border-color: #37b24d;
}

.container.dashboard .column>.block.block-text {
    flex-wrap: wrap;
}

.container.dashboard .column>.block.block-text p:not(:last-of-type) {
    margin-bottom: 0.5rem;
}

.container.dashboard table.leaderboard td {
    padding: .25rem;
}

.container.dashboard table.leaderboard td.score {
    text-align: right;
}

.container.dashboard table.leaderboard td .entrant {
    padding: .25rem 1rem;
    border-radius: .25rem;
    background-color: #fafafa;
}

.container.dashboard table.leaderboard tr:nth-child(1) .entrant {
    background-image: linear-gradient(45deg, #fcc419, #FF9E1B);
}

.container.dashboard table.leaderboard tr:nth-child(2) .entrant {
    background-image: linear-gradient(45deg, #a5d8ff, #d0ebff);
}

.container.dashboard table.leaderboard tr:nth-child(3) .entrant {
    background-image: linear-gradient(45deg, #DFAF81, #C18159);
}

.container.reports {
    display: block;
    columns: 3;
    column-gap: 1rem;
}

.container.reports .block {
    padding: .5rem 0;
}

.container.reports .block .content {
    padding: .5rem 1rem;
    overflow: hidden;
    border-radius: 0.25rem;
    background-color: #fff;
    border: 1px solid transparent;
}

.container.reports .block .content .links {
    display: flex;
    flex-wrap: wrap;
}

.container.reports .block p {
    margin-bottom: .5rem;
}

.container.reports .block p:last-child {
    margin-bottom: 0;
}

.button.button-item-remove {
    margin-left: 0.5rem;
    margin-right: -.5rem;
    padding: 0 0.25rem;
    background: none;
    border-radius: 0;
}

.button.button-item-remove svg {
    color: #d6336c;
}

.button.button-item-remove:hover {
    background-color: #dee2e6;
}

.message-timestamp {
    color: #868e96;
    margin: -.25rem 0;
}

.portal {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    margin: 1.5rem;
    z-index: 500;
    background-color: rgba(107, 115, 117, 0.1);
    box-shadow: 0 .125rem 1rem 1rem rgba(107, 115, 117, 0.1);
}

.portal:empty {
    visibility: hidden;
}

.centering-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.widget-upcoming-container::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

#pr-settings {
    padding-left: 1rem;
    display: flex;
}

.rules-form,
.form-row,
.project-list {
    display: flex;
}

.project-list,
.rules-form {
    flex-direction: column;
}

.rules-form-content {
    width: 100%;
    padding-left: 1rem;
}

.form-row {
    width: 100%;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.form-row label {
    width: 5rem;
}

.rules-form {
    margin-left: 1rem;
    background-color: #fff;
    padding: 1rem;
    border-radius: 1px;
}

.rules-form select,
.rules-form input {
    flex: 1 1 auto;
    padding: unset;
    margin: 0 0.5rem 0 0;
    background-image: unset;
    background-color: rgba(var(--brand-primary-color-rgb), 0.2);
    text-align: center;
    width: auto;
}

.rules-form h3 {
    padding: 0.25 .5rem;
}

.rules-form .button.save {
    margin: auto 0 0 auto;
}

.rules-form .button svg {
    margin-right: .5rem;
}

.project-list {
    margin: -.125rem 0;
}

.project-list .selected {
    background-color: #005088;
}

.project-list .button,
.rules-form .button {
    margin: .125rem 0;
    padding: .125rem 1rem;
}

.errors {
    margin: 1rem 0;
}

.errors ul {
    margin: 0;
    padding-left: 1rem;
    background: rgb(235, 49, 142);
    color: white;
    border-radius: .125rem;
}

.errors li {
    list-style-type: none;
}

.widget-upcoming-container {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
    overflow: hidden;
    max-height: 30rem;
    overflow-y: scroll;
    margin: .5rem;
    border-radius: .25rem;
    background-color: #fff;
    border: 1px solid #ccc;
}

table.overdue-table thead {
    position: sticky;
    top: 0;
    /* color: #fff; */
    background-color: #fff;
}

table.overdue-table tbody tr {
    background-color: #fff;
}

table.overdue-table tbody tr:nth-of-type(2n+1) {
    background: #f9f9f9;
}

table.overdue-table tr.tag-is-overdue-true {
    background-color: #fff4e6;
}

table.overdue-table tr.tag-is-overdue-true:nth-of-type(2n+1) {
    background-color: #ffe9cf;
}

table.overdue-table td,
table.overdue-table th {
    padding: .25rem .5rem;
}

table.overdue-table td .icon-cross {
    margin: 0.25rem .5rem;
    width: 0.75rem;
    color: #4337;
}

table.overdue-table .tag-status {
    padding: 0.125rem .5rem;
    background: #fff;
    border-radius: .25rem;
}

table.overdue-table .tag-status.tag-status-info_received,
table.overdue-table .tag-status.tag-status-paid {
    background-color: #96f2d7;
}

table.overdue-table .tag-status.tag-status-info_requested {
    background-color: #66d9e8;
}

table.overdue-table .tag-status.tag-status-in_progress {
    background-color: #d0bfff;
}

table.overdue-table .tag-status.tag-status-deleted,
table.overdue-table .tag-status.tag-status-voided {
    background-color: #bfbfbf;
}

table.overdue-table .tag-status.tag-status-not_started,
table.overdue-table .tag-status.tag-status-not_paid {
    background-color: #ffa8a8;
}

.faded {
    color: rgba(0, 0, 0, 0.5);
}

.indicator-stripe {
    display: inline-block;
    min-height: 1rem;
    min-width: 0.5rem;
    background-color: #0ca678;
}

.htmx-indicator {
    opacity: 0;
}

#usage_report_settings_form div {
    margin-right: 0.5rem;
}

#usage_report_settings_form select {
    padding-right: 1rem;
}

#usage_report_settings_form {
    padding-bottom: 1rem;
}

.icon-badge {
    padding: .25rem .25rem;
    margin: -.125rem 0;
    border-radius: .25rem;
}

.icon-badge .icon-star {
    color: #0ca678;
}

.icon-badge .icon-shield {
    color: #339af0;
}

.icon-badge .icon-archive {
    color: #868e96;
}

.icon-blank {
    width: 1.5rem;
}

.blip {
    display: inline-flex;
    width: 1em;
    height: 1em;
    background-color: #21252911;
    border: 1px solid #21252933;
    border-radius: .25em;
    margin-right: .5em;
}

.blip.blip-wwft-reference.none {
    background-color: #868e96;
}

.blip.yes {
    background-color: #0ca678;
}

.blip.no {
    background-color: #d6336c;
}

.blip.blip-wwft-reference.reviewing {
    background-color: #65d1f2;
}