:root {
    --safr-slate-blue: #5E909B;
    --safr-soft-ivory: #FBFFF7;
    --safr-sage-green: #E0E6CD;
    --safr-charcoal-gray: #505050;
    --safr-light-gray: #999999;
    --safr-coral-red: #FF595A;
    --safr-sky-blue: #89C5CC;
    --safr-powder-blue: #EEFDFF;
    --safr-olive-green: #91B846;
    --safr-violet-purple: #7030A0;
    --safr-amber: #FEB201;

    --disabled-text-color: var(--safr-light-gray);
    --status-enabled-text-color: var(--safr-olive-green);
    --status-disabled-text-color: var(--safr-charcoal-gray);
    --sort-by-bar-color: var(--safr-charcoal-gray);
    --critical-button-color: var(--safr-coral-red);
    --critical-button-text-color: var(--safr-soft-ivory);
    --success-button-color: var(--safr-olive-green);
    --cancel-button-color: var(--safr-charcoal-gray);
    --regular-button-color: var(--safr-slate-blue);
    --title-text-color: var(--safr-charcoal-gray);
    --dialog-user-text-color: var(--safr-charcoal-gray);
    --dialog-background-color: var(--safr-sage-green);
    --dialog-border-color: var(--safr-slate-blue);
    --dialog-border-focused-color: var(--safr-sky-blue);
    --dialog-label-text-color: var(--safr-slate-blue);
    --alert-button-color: var(--safr-slate-blue);
    --alert-button-text-color: var(--safr-soft-ivory);
    --reject-button-color: var(--safr-coral-red);
    --inspect-button-color: var(--safr-charcoal-gray);
    --clear-button-color: var(--safr-olive-green);
    --violent-span-color: var(--safr-coral-red);
    --asb-abuse-span-color: var(--safr-amber);
    --pro-span-color: var(--safr-violet-purple);
    --context-separator-color: var(--safr-slate-blue);
    --alertDetailColumnTitles-span-color: var(--safr-charcoal-gray);
    --alertDetailLabel-span-color: var(--safr-slate-blue);
    --alertDetailValue-span-color: var(--safr-charcoal-gray);
    --alertContainer-div-color: var(--safr-slate-blue);
    --filter-div-color: var(--safr-slate-blue);
    --dialog-overlay-color: rgba(256, 256, 256, 0.8);
    --filter-value-color: white;
    --warning-button-color: var(--safr-coral-red);
    --warning-button-text-color: var(--safr-soft-ivory);
    --alertDetailStatusValue-span-color: var(--safr-slate-blue);
}

@font-face {
    font-family: 'Nunito Sans Regular';
    src: url('../fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: 'Nunito Sans Bold';
    src: url('../fonts/Nunito-Bold.ttf');
}

* {
    font-family: 'Nunito Sans Regular';
}

.bold {
    font-family: 'Nunito Sans Bold';
}

html,
body {
    height: 100%;
    margin: 0;
    font-size: 14px;
    background-color: #FBFFF7;
    color: #89C5CC;
    overscroll-behavior: none;
}

span {
    display: inline-block;
    line-height: 20px;
    font-family: inherit;
}

span.dimmed {
    color: #999999;
}

input,
select,
textarea {
    padding: 0 6px;
    background-color: transparent;
    color: #EEFDFF;
    border: 2px solid #89C5CC;
    border-radius: 5px;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    padding-right: 28px;
    background: url("/image/select-light.png") no-repeat;
    background-position: right;
    background-size: 16px;
}

textarea:focus,
input:focus,
select:focus {
    outline: none;
}

textarea.description {
    padding: 6px;
    width: 100%;
    resize: none;
}

mark {
    background-color: transparent;
    color: black;
    font-family: 'Nunito Sans Bold';
    padding: 0 4px;
}

mark.blue {
    color:  var(--dialog-label-text-color);
    padding: 0;
}

mark.black {
    font-family: 'Nunito Sans Bold';
    color: black;
    padding: 0;
}

button.editButton {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--dialog-border-color);
}

.dialogRow.passwordRow input {
    width: 100%;
}

.dialogRow label {
    text-align: left;
}

.dialogBody input {
    width: 75%;
    color: var(--dialog-user-text-color);
}

.dialogBody .shortInput {
    width: 50%;
}

.dialogBody .longInput {
    width: 100%;
}

.dialogBody select {
    color: var(--dialog-user-text-color);
    border-color: var(--dialog-border-focused-color);
    width: max-content;
}

.expandButton:focus {
    outline: none;
}

button:disabled,
input.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

textarea:disabled,
input:disabled{
    border: 1px solid #FBFFF7;
    color: #505050 !important;
    -webkit-text-fill-color: #505050;
    cursor: not-allowed;
}

.relative {
    position: relative;
}

.expandButton {
    background-image: url("/image/more.png");
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    width: 30px;
    height: 34px;
    position: absolute;
    right: 0;
    top: -7px;
}

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

select:disabled {
    border: 1px solid var(--disabled-text-color);
    color: var(--disabled-text-color);
    -webkit-text-fill-color: var(--disabled-text-color);
    cursor: not-allowed;
}

select::-ms-expand {
    display: none;
}

select>option {
    background: var(--dialog-background-color);
    color: #000000;
}

select>option:disabled {
    color: var(--disabled-text-color);
}

input::-webkit-input-placeholder {
    color: #89C5CC;
}
div.dialog input::-webkit-input-placeholder {
    color: var(--disabled-text-color);
}
div.dialog textarea::-webkit-input-placeholder {
    color: var(--disabled-text-color);
}

input::-moz-placeholder {
    color: #89C5CC;
}
div.dialog input::-moz-placeholder {
    color: var(--disabled-text-color);
}
div.dialog textarea::-moz-placeholder {
    color: var(--disabled-text-color);
}

input:-ms-input-placeholder {
    color: #89C5CC;
}
div.dialog input::-ms-input-placeholder {
    color: var(--disabled-text-color);
}
div.dialog textarea::-ms-input-placeholder {
    color: var(--disabled-text-color);
}

input::placeholder {
    color: #89C5CC;
}
div.dialog input::placeholder {
    color: var(--disabled-text-color);
}
div.dialog textarea::placeholder {
    color: var(--disabled-text-color);
}

input[type='checkbox'] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    width: 22px;
    height: 22px;
    border-color: #5E909B;
    margin-right: 18px !important;
    display: block;
    float: left;
    position: relative;
    cursor: pointer;
    clear: both;
}

input[type='checkbox']:after {
    content: "";
    text-align: center;
    position: absolute;
    height: 20px;
    width: 20px;
    left: -1px;
    top: -1px;
}

input[type='checkbox']:checked:after {
    background: #5E909B;
    border-radius: 5px;
    content: '\2713';
    color: #FBFFF7;
}

input[type='checkbox']:disabled {
    border-color: #FBFFF7;
    cursor: not-allowed;
    color: #FBFFF7 !important;
    -webkit-text-fill-color: #FBFFF7;
}

label.checkbox {
    cursor: pointer;
}

input.button {
    padding: 4px 30px;
    background-color: #5E909B;
    color: #F9FFF9;
    border: 1px solid #5E909B;
    border-radius: 5px;
}

input.password {
    text-security: disc;
    -webkit-text-security: disc;
    -mox-text-security: disc;
}

input.dtpicker {
    width: 100%;
    color: #505050;
    border-color: #5E909B;
}

input.timepicker {
    width: 120px;
    color: #505050;
    border-color: #5E909B;
}

input.datepicker {
    width: 216px;
    color: #505050;
    border-color: #5E909B;
}

div.page {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 1036px;
    min-width: 780px;
    text-align: left;
    position: relative;
}

div.widePage {
    min-width: 900px !important;
}

div.copyright {
    text-align: center;
    min-width: 350px;
    margin: 5px;
}

div.signin {
    width: 300px;
    margin-top: 60px;
    text-align: left;
}

div.error {
    color: red;
    width: auto;
    flex: 1;
}

div.menuItem {
    padding: 4px;
    cursor: pointer;
    text-decoration: none !important;
    user-select: none;
}

div.menuItem:nth-last-of-type(1) {
    border-bottom: unset;
}

div.menuItem:hover {
    background-color: gray;
}

div.warning {
    width: 100%;
    display: table;
    color: #FF595A;
    min-height: 450px;
    min-width: 350px;
    flex: 1
}

div.center {
    width: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

div.menu {
    padding-top: 10px;
    vertical-align: bottom;
    display: inline-block;
    margin-left: 20px;
    font-size: 19px;
}

div.flexRow {
    display: flex;
    flex-direction: row;
}

div.flexColumn {
    display: flex;
    flex-direction: column;
}

div.infoContainer {
    display: grid;
    width: 100%;
    gap: 0;
    margin: 25px 0;
}

div.infoPair {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

div.listContainer {
    flex: 1;
    width: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

div.liveTimeContainer {
    border: 2px solid #89C5CC;
    border-radius: 5px;
    width: 100%;
    position: relative;
}

.infoPair .infoKey {
    flex-shrink: 0;
    margin-right: 5px;
    color: #89C5CC;
}

.infoPair .infoValue {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    hyphens: none;
    font-family: 'Nunito Sans Bold';
}

div.accountInfoContainer {
    grid-template-columns: 30% 28% 24% 15% 3%;
}

div.userInfoContainer {
    grid-template-columns: 21% 21% 19% 21% 15% 3%;
}

div.siteInfoContainer {
    grid-template-columns: 35% 35% 27% 3%;
}

div.faceGrid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
}

div.vScroll {
    overflow-y: auto !important;
}

div.hScroll {
    overflow-x: auto !important;
}

div.noScroll {
    overflow-x: hidden;
    overflow-y: hidden;
}

.infoContainer span {
    color: #5E909B;
}

.infoContainer .disabledColor {
    color: var(--status-disabled-text-color);
}

div.filterBar {
    color: var(--safr-sky-blue);
    background-color: var(--filter-div-color);
}

.filterBar select {
    min-width: 124px;
}

div.filterParam {
    display: inline-block;
    text-align: right;
    margin: 4px;
}

div.checkboxRow {
    display: inline-block;
    margin: 4px 0;
}

div.countContainer {
    color: var(--filter-value-color);
    margin: 4px;
}

div.gridItem {
    height: 188px;
    width: 156px;
    min-height: 188px;
    min-width: 156px;
    margin: 14px 16px 0 0;
    border: 2px solid #5E909B;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align: center;
}

div.gridItemNoMargin {
    width: 156px;
    min-width: 156px;
    text-align: center;
}

div.listItemNoMargin {
    display: flex;
    flex-direction: row;
    width: 100%;
}

div.incidentImageContainer {
    height: 168px;
    width: 156px;
    border: 2px solid #5E909B;
    border-radius: 4px;
}

div.incidentContainer {
    margin: 10px 0 0 0;
    color: #5E909B;
    font-size: 15px;
}

div.adminContainer {
    margin-top: 20px;
    color: #5E909B;
    justify-content: space-between;
}

div.closeMatchContainer {
    margin: 0 0 10px 0;
    border: 2px solid #FBFFF7;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
}

div.closeMatchFooter {
    background-color: #FBFFF7;
    height: 20px;
    color: #505050;
}

div.incidentInfo {
    flex: 1;
    font-size: 15px;
    margin: 5px 0 10px 0;
    position: relative;
}

div.portrait {
    display: inline-flex;
    width: 100%;
    height: 100%;
    position: relative;
}

div.portraitIncident {
    display: inline-flex;
    max-width: 156px;
    min-width: 156px;
    height: 168px;
    justify-content: center;
    align-items: center;
    border: 2px solid #5E909B;
    border-radius: 4px;
    position: relative;
}

div.imageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    color: #505050;
}

div.timeContainer {
    display: inline-flex;
    height: 24px;
    background-color: #5E909B;
    color: #EEFDFF;
    pointer-events: none;
    align-items: center;
}

div.ageContainer {
    display: inline-flex;
    align-items: center;
    height: 18px;
    background-color: #5E909B;
    border-bottom-left-radius: 4px;
    color: #EEFDFF;
    position: absolute;
    top: 0;
    right: 0;
}

div.blockedContainer {
    display: inline-flex;
    align-items: center;
    height: 18px;
    background-color: var(--safr-coral-red);
    border-bottom-right-radius: 4px;
    color: #EEFDFF;
    position: absolute;
    top: 0;
    left: 0;
}

div.releasedContainer {
    display: inline-flex;
    align-items: center;
    height: 18px;
    background-color: #5E909B;
    border-bottom-right-radius: 4px;
    color: #EEFDFF;
    position: absolute;
    top: 0;
    left: 0;
}

div.dialogContainer {
    z-index:1000;
    display:none;
}

div.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 95%;
    transform: translate(-50%, -50%);
    max-width: 800px;
    background-color: var(--dialog-background-color);
    color: var(--dialog-label-text-color);
    z-index: 1000;
    overflow: visible;
    text-align: left;
    border: 1px solid var(--dialog-border-color);
    border-radius: 3px;
    max-height: 95%;
    overflow-y: auto;
}

div.dialog .dialogBody {
    display: flex;
    justify-content: space-between;
    color: var(--dialog-label-text-color);
    margin: 20px;
}

div.dialog input, textarea {
    color: var(--dialog-user-text-color);
    border-color: var(--dialog-border-color);
}

div.dialog select {
    color: var(--dialog-user-text-color);
    border-color: var(--dialog-border-color);
    background: url("/image/select-dark.png") no-repeat;
    background-position: right;
    background-size: 16px;
}

div.fullScreenDialog {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    transform: unset !important;
    background-color: var(--dialog-background-color);
}

div.floatRightDialog {
    width: 340px !important;
    min-height: 480px !important;
    top: 46px;
    left: unset !important;
    right: 40px;
    transform: unset !important;
}

div.popupHeader {
    display: flex;
    font-family: 'Nunito Sans Bold';
    justify-content: space-between;
    width: 100%;
    position: relative;
    color: #505050;
}

div.title {
    display: flex;
    flex-direction: row;
    font-family: 'Nunito Sans Bold';
    color: black;
    font-size: 16px;
}

div.dialog .dialogColumn {
    display: flex;
    flex-direction: column;
    flex: 1;
}

div.dialog .dialogRow {
    display: grid;
    position: relative;
    grid-template-columns: 27% auto;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}

div.dialog .passwordRow {
    grid-template-columns: 25% 50% 10%;
}

div.dialog .infoMessage {
    grid-column: 1 / -1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

div.dialog .centeredRow {
    display: flex;
    justify-content: center;
    margin: 100px 0 100px 0;
}

div.dialog hr {
    width: 100%;
    border-top: 1px solid var(--dialog-border-color);
}

div.dialog .dialogButtons {
    float: right;
    padding: 0 20px 20px 0;
}

div.dialog .dialogButtons button {
    margin-left: 10px;
}

div.dialog a {
    margin-left: 10px;
}

div.dialog a u {
    cursor: pointer;
}

div.dialog select>option {
    background: var(--safr-soft-ivory);
}

div.contextMenu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 102;
    background-color: var(--dialog-background-color);
    padding: 5px 0;
    margin: 3px 0;
}

div.fullScenePopup {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

div.minorCover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dialog-background-color);
    display: none;
    z-index: 5000;
}

div.reportItem {
    margin: 20px 20px 0 0;
    border: 2px solid #5E909B;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align: center;
}

/* jQuery show() changes `display: none` to `display: block`. This overrides display after show() is called */
div.contextMenu[style*='display: block'] {
    display: flex !important;
}

div.inputRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
}

div.floatRight {
    float: right;
}

div.flex1 {
    flex: 1;
}

div.spinnerContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dialog-background-color);
}

div.textRight {
    text-align: right;
}

.dialogColor {
    color: var(--dialog-label-text-color);
}

.contextMenu hr {
    margin: 5px 0;
    width: 95%;
    border-top: 1px solid #5E909B;
}

.overlayFace {
    border: 2px solid  var(--safr-coral-red);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

span.dialogLabel {
    color: var(--dialog-label-text-color);
    white-space: nowrap;
}

span.imageOverlay {
    display: inline-block;
    font-size: 12px;
    font-family: 'Nunito Sans Bold';
    line-height: 18px;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span.incidentLabel {
    color: #89C5CC;
    white-space: nowrap;
    margin-right: 10px;
    min-width: 90px;
}

span.investigationLabel {
    color: #89C5CC;
    white-space: nowrap;
    margin-right: 10px;
    min-width: 110px;
}

span.incidentValue {
    min-width: 180px;
    font-family: 'Nunito Sans Bold';
}

span.deviceLabel {
    color: #89C5CC;
    white-space: nowrap;
    margin-right: 5px;
    flex-shrink: 0;
}

span.deviceValue {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Nunito Sans Bold';
    flex-grow: 1;
}

span.disconnected {
    display: none;
    color: #FF7774;
    margin: 0 15px;
}

span.error {
    color: var(--safr-coral-red) !important;
}

.valueText {
    color: var(--dialog-user-text-color);
}

span.userInfo {
    white-space: nowrap;
    height: 28px;
}

span.description {
    border: 2px solid #FBFFF7;
    border-radius: 5px;
    padding: 8px;
    color: #505050;
    white-space: pre;
    text-wrap: wrap;
    overflow-wrap: break-word;
    min-height: 20px;
}

span.readonlyText {
    padding: 3px 21px 3px 5px;
    min-height: 48px;
    border: 2px solid var(--dialog-border-color);
    border-radius: 4px;
    color: var(--dialog-user-text-color);
    white-space: pre;
    text-wrap: wrap;
}

span.enabledColor {
    color: var(--status-enabled-text-color);
}

span.w70 {
    min-width: 70px;
}

img.imageOverlay {
    object-fit: none;
    position: absolute;
    left: 51px;
    bottom: 20px;
}

img.download {
    height: 164px;
    width: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

img.noteImage {
    height: 164px;
    object-fit: contain;
    pointer-events: none;
}

img.nodownload {
    height: 164px;
    width: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

img.report {
    height: 200px;
    width: 160px;
    display: block;
    object-fit: contain;
    pointer-events: none;
    margin: 5px 10px;
}

img.icon {
    height: 24px;
    width: 24px;
}

img.editButton {
    height: 16px;
    cursor: pointer;
    margin: 6px;
    position: absolute;
    top: 0;
    right: 0;
}

img.button {
    height: 16px;
    cursor: pointer;
    margin: 6px;
}

#noscript-error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5050;
    text-align: center;
    font-family: 'Nunito Sans Bold';
    color: black;
    background-color: orange;
    padding: 5px 0;
}

a.signout {
    color: #5E909B;
    text-decoration: underline;
    white-space: nowrap;
}

a.explain {
    color: #91B846;
    text-decoration: underline;
    margin: -2px 10px 0 30px;
    text-align: center;
}

a.menuItem {
    text-decoration: none;
    display: inline-block;
    color: #89C5CC;
    text-align: center;
    width: auto;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 4px;
    padding: 2px;
}

a.menuItemSelected {
    font-family: 'Nunito Sans Bold';
    text-decoration: none;
    display: inline-block;
    color: #505050;
    text-align: center;
    width: auto;
    cursor: pointer;
    pointer-events: none;
    margin-left: 10px;
    margin-right: 4px;
    padding: 2px;
}

a.toggled,
button.toggled {
    background-color: var(--dialog-background-color);
}

a.toggled2 {
    background-color: var(--cancel-button-color);
}

a.createIncident {
    background-color: var(--critical-button-color);
    color: var(--critical-button-text-color);
    text-decoration: none;
    padding: 5px 15px;
    border: 1px solid transparent;
    border-radius: 5px;
    white-space: nowrap;
}

button.dialogClose {
    border: none;
    background: url("/image/x.png") no-repeat;
    position: absolute;
    top: 11px;
    right: 11px;
    height: 16px;
    width: 16px;
    z-index: 101;
}

input.signinInput {
    width: 300px;
    height: 32px;
    margin-top: 5px;
    color: #5E909B;
}

.bottom {
    position: absolute;
    bottom: 0;
}

.mediumButton {
    min-width: 90px;
    background-color: #5E909B;
    color: #FBFFF7;
    border: 1px solid transparent;
    text-align: center;
    border-radius: 5px;
    height: 36px;
    cursor: pointer;
    padding: 0 15px !important;
    white-space: nowrap;
}

.thinButton {
    min-width: 90px;
    background-color: #5E909B;
    color: #FBFFF7;
    border: 1px solid transparent;
    text-align: center;
    border-radius: 5px;
    height: 24px;
    cursor: pointer;
    padding: 0 40px !important;
    white-space: nowrap;
}

.sortByBar .mediumButton {
    text-decoration: none;
    padding: 8px 15px;
    margin-right: 10px;
}

.criticalButton {
    background-color: var(--critical-button-color) !important;
}

.successButton {
    background-color: var(--success-button-color) !important;
    color: white;
}

.regularButton {
    background-color: var(--regular-button-color);
    color: white;
}

.cancelButton {
    background-color: var(--cancel-button-color) !important;
    color: white;
}

button.menuButton {
    background-color: transparent;
    margin: 0 5px;
    min-width: 260px;
    text-align: left;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
}

button.menuButton:hover {
    color: var(--safr-charcoal-gray);
    background-color: var(--safr-soft-ivory);
}

button.menuButton:disabled {
    border: none;
    cursor: not-allowed;
}

button.menuButton:disabled:hover {
    background-color: transparent;
}

button.dark {
    color: var(--safr-soft-ivory);
}

button.dark:disabled {
    color: var(--safr-soft-ivory);
}

button.light {
    color: var(--safr-slate-blue);
}

button.light:disabled {
    color: var(--safr-light-gray);
}

button.back {
    background-color: transparent;
    border: none;
}

button.back::after {
   content: "\25C0";
}

button.forward {
    background-color: transparent;
    border: none;
}

button.forward::after {
   content: "\25B6";
}

button.addNote {
    height: 60px;
    width: 150px;
    text-wrap: wrap;
}

.section {
    width: 100%;
    max-width: 1036px;
    text-align: left;
    padding: 7px;
}

.sortByBar {
    display: flex;
    flex-direction: row;
    color: var(--safr-sky-blue);
    background: var(--sort-by-bar-color);
    justify-content: space-between;
    align-items: center;
    padding: 4px 7px;
}

.userInfoBox {
    background: var(--dialog-background-color);
    color: #5E909B;
    border: solid 1px #5E909B;
    display: none;
    min-width: 250px;
    text-align: left;
    padding: 4px;
    z-index: 102;
    position: absolute;
    right: -6px;
    top: 34px;
}

.userInfoBox:after,
.userInfoBox:before {
    bottom: 100%;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.userInfoBox:after {
    border-bottom-color: var(--dialog-background-color);
    border-width: 10px;
    margin-left: -10px;
}

.userInfoBox:before {
    border-bottom-color: #5E909B;
    border-width: 11px;
    margin-left: -11px;
}

.filterValue {
    color: var(--filter-value-color);
    margin-left: 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
}

.animate-flicker1 {
    animation: fadeIn 1s infinite alternate;
    width: 14px;
    margin: 10px;
}

.animate-flicker2 {
    animation: fadeIn 1s infinite alternate;
    animation-delay: 0.5s;
    width: 14px;
    margin: 10px;
}

.animate-flicker3 {
    animation: fadeIn 1s infinite alternate;
    animation-delay: 1s;
    width: 14px;
    margin: 10px;
}

.centered {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.overlay {
    position: fixed;
    background-color: white;
    opacity: 0.8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

span.alertDetailStatusValue {
    color: var(--alertDetailStatusValue-span-color);
    white-space: normal;
    margin-left: 10px;
    font-family: 'Nunito Sans Bold';
}

span.redLabel {
    color: var(--violent-span-color);
    white-space: nowrap;
}

span.amberLabel {
    color: var(--asb-abuse-span-color);
    white-space: nowrap;
}

span.blackLabel {
    color: #505050;
    white-space: nowrap;
}

.black {
    color: #000000;
}

span.greenLabel {
    color: #91B846;
    white-space: nowrap;
}

span.purpleLabel {
    color: var(--pro-span-color);
    white-space: nowrap;
}

span.purple {
    color: var(--pro-span-color);
}

span.purpleTag {
    padding: 0 10px;
    color: var(--critical-button-text-color);
    background: var(--pro-span-color);
}

span.sectionTitle {
    text-decoration: underline;
    font-size: 15px;
    font-family: 'Nunito Sans Bold';
}

span.locationItems {
    padding: 3px 21px 3px 5px;
    min-height: 48px;
    border: 2px solid var(--dialog-border-color);
    border-radius: 4px;
}

div.portraitAlert {
    width: 260px;
    height: fit-content;
    margin-right: 10px;
    max-width: none;
}

div.portraitSceneAlert {
    min-width: 280px;
    margin-left: 10px;
    width: 96%;
    height: 190px;
}

div.splitter {
    width: 100%;
    height: 1px;
    background-color: var(--safr-soft-ivory);
}

div.vsplitter {
    height: 100%;
    width: 1px;
    background-color: var(--safr-soft-ivory);
}

div.whiteBorder {
    border: 2px solid var(--safr-soft-ivory) !important;
}

div.halfRoundBorder {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.warningButton {
    background-color: var(--warning-button-color);
    color: var(--warning-button-text-color);
}

.alertButton {
    min-width: 100px;
    background-color: var(--alert-button-color);
    color: var(--alert-button-text-color);
    border: 1px solid transparent;
    text-align: center;
    border-radius: 5px;
    height: 30px;
    cursor: pointer;
    padding: 0 15px;
}

button.alertButton.rejectBackground {
    background-color: var(--reject-button-color);
}

button.alertButton.inspectBackground {
    background-color: var(--inspect-button-color);
}

button.alertButton.clearBackground {
    background-color: var(--clear-button-color);
}

span.minWidth {
    min-width: auto;
}

div.contextMenuSeparator {
    margin: 5px;
    border-bottom: 1px solid var(--context-separator-color);
}

span.detectionFaceAttribute {
    text-align: center;
    font-size: 12px;
    width: 100%;
    margin: 0 5px;
}

span.time {
    padding: 1px 0 0 0;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

span.time.alertPortrait {
    font-size: 17px;
}

span.alertDetailBoldLabel {
    color: var(--alertDetailColumnTitles-span-color);
    white-space: nowrap;
    font-size: 15px;
    font-family: 'Nunito Sans Bold';
}

span.alertDetailLabel {
    color: var(--alertDetailLabel-span-color);
    white-space: nowrap;
}

span.alertDetailValue {
    color: var(--alertDetailValue-span-color);
    white-space: normal;
    margin-left: 10px;
    font-family: 'Nunito Sans Bold';
}

span.alertDetailIncidentDate {
    color: var(--alertDetailValue-span-color);
    margin-top: 5px;
    width: 100%;
    font-family: 'Nunito Sans Bold';
    text-align: center;
}

div.dialog .dialogBody .dialogColumn .dialogRowAlertDetail {
    display: grid;
    grid-template-columns: max-content auto;
    align-items: flex-start;
    margin-bottom: 20px;
}

.largeFont {
    font-size: 16px;
}

.extraLargeFont {
    font-size: 36px;
}

img.download.alertScene {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

img.detectionScene {
    object-fit: contain;
    max-height: 520px;
    max-width: 100%;
}

span.alertStatusLabel {
    margin-right: 10px;
    min-width: auto;
    max-width: 180px;
    text-wrap: wrap;
    white-space: normal;
    font-family: 'Nunito Sans Bold';
}

div.alertContainer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    width: 100%;
    gap: 0;
    margin: 5px 0;
    color: var(--alertContainer-div-color);
}

div.dialog .dialogBody .dialogColumn .dialogRowAlertDetailButtons {
    display: grid;
    grid-template-columns: auto;
    align-items: center;
    position: relative;
}

button.alertDetailButton {
    width: min-content;
    margin: 0px 10px;
}

div.spaceBetween {
    display: flex;
    justify-content: space-between;
}

div.dialogBody.alertDetailDialogBody {
    grid-template-columns: auto auto auto;
    display: grid;
    margin: 10px 10px 10px 0px;
    column-gap: 10px;
}

div.dialog .dialogBody .dialogColumn .dialogRow.dialogRowAlertDetailSideBySideImages {
    grid-template-columns: auto auto;
    justify-content: start;
}

button {
    cursor: pointer;
}

.hidden {
    display: none;
}

img.download.alertFace {
    object-fit: contain;
    width: 50%;
}

img.nodownload.alertFace {
    object-fit: contain;
    width: 50%;
    padding: 0 1px;
}

div.sideBySideListItem {
    display: flex;
    flex-direction: row;
    max-width: fit-content;
    margin-bottom: 8px;
    padding: 2px 2px 2px 12px;
}

div.sideBySideListItem.selected {
    border: 2px solid var(--safr-coral-red);
    border-left: 12px solid var(--safr-coral-red);
    padding: 0;
}

div.dimmed {
    opacity: 40%;
}

div.maxh680 {
    max-height: 680px;
}

div.minh60 {
    min-height: 60px;
}

div.minh340 {
    min-height: 340px;
}

div.minh400 {
    min-height: 400px;
}

div.minh560 {
    min-height: 560px;
}

div.minw254 {
    min-width: 254px;
}

div.minw300 {
    min-width: 300px;
}

div.minw340 {
    min-width: 340px;
}

div.minw600 {
    min-width: 600px;
}

div.minw640 {
    min-width: 640px;
}

p.readonlyText {
    color: #505050;
    white-space: pre;
    text-wrap: wrap;
    word-break: break-all;
}

.red {
    color: var(--safr-coral-red) !important;
}

.redBg {
    background-color: var(--safr-coral-red) !important;
}

.grayBg {
    background-color: var(--safr-charcoal-gray) !important;
}

.redBorder {
    border-color: var(--safr-coral-red) !important;
    color: var(--disabled-text-color) !important;
}

select.standardWidth {
    min-width: 232px;
    max-width: 232px;
}

select.searchFilterdWidth {
    min-width: 170px;
    max-width: 170px;
}

span.liveLabel {
    position: absolute;
    right: 4px;
    top: 3px;
    font-size: 9px;
}

span.betaLabel {
    font-size: 10px;
    margin-top: -6px;
}

.h15 {
    height: 15px !important;
}

.h16 {
    height: 16px !important;
}

.h20 {
    height: 20px !important;
}

.h26 {
    height: 26px !important;
}

.h30 {
    height: 30px !important;
}

.h40 {
    height: 40px !important;
}

.h50 {
    height: 50px !important;
}

.h60 {
    height: 60px !important;
}

.h70 {
    height: 70px !important;
}

.h120 {
    height: 120px !important;
}

.h160 {
    height: 160px !important;
}

.h164 {
    height: 164px !important;
}

.h240 {
    height: 240px !important;
}

.h260 {
    height: 260px !important;
}

.h300 {
    height: 300px !important;
}

.h480 {
    height: 480px !important;
}

.h500 {
    height: 500px !important;
}

.h540 {
    height: 540px !important;
}

.hFull {
    height: 100%;
}

.w20 {
    width: 20px !important;
}

.w36 {
    width: 36px !important;
}

.w44 {
    width: 44px !important;
}

.w50 {
    width: 50px !important;
}

.w60 {
    width: 60px !important;
}

.w80 {
    width: 80px !important;
}

.w90 {
    width: 90px !important;
}

.w100 {
    width: 100px !important;
}

.w120 {
    width: 120px !important;
}

.w140 {
    width: 140px !important;
}

.w160 {
    width: 160px !important;
}

.w180 {
    width: 180px !important;
}

.w210 {
    width: 210px !important;
}

.w240 {
    width: 240px !important;
}

.w260 {
    width: 260px !important;
}

.w280 {
    width: 280px !important;
}

.w300 {
    width: 300px !important;
}

.w320 {
    width: 320px !important;
}

.w340 {
    width: 340px !important;
}

.w360 {
    width: 360px !important;
}

.w380 {
    width: 380px !important;
}

.w400 {
    width: 400px !important;
}

.w440 {
    width: 440px !important;
}

.w480 {
    width: 480px !important;
}

.w500 {
    width: 500px !important;
}

.w540 {
    width: 540px !important;
}

.w600 {
    width: 600px !important;
}

.w760 {
    width: 760px !important;
}

.w800 {
    width: 800px !important;
}

.wHalf {
    width: 50%;
}

.wFull {
    width: 100%;
}

.wAuto {
    width: auto !important;
}

.m3 {
    margin: 3px;
}

.m5 {
    margin: 5px;
}

.m10 {
    margin: 10px;
}

.m15 {
    margin: 15px;
}

.m20 {
    margin: 20px;
}

.m30 {
    margin: 30px;
}

.mt-5 {
    margin-top: -5px !important;
}

.mt-2 {
    margin-top: -2px !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mt2 {
    margin-top: 2px !important;
}

.mt4 {
    margin-top: 4px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt6 {
    margin-top: 6px !important;
}

.mt8 {
    margin-top: 8px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt12 {
    margin-top: 12px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mt16 {
    margin-top: 16px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt24 {
    margin-top: 24px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt76 {
    margin-top: 76px !important;
}

.mb2 {
    margin-bottom: 2px !important;
}

.mb4 {
    margin-bottom: 4px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb64 {
    margin-bottom: 64px !important;
}

.mr2 {
    margin-right: 2px !important;
}

.mr4 {
    margin-right: 4px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mr6 {
    margin-right: 6px !important;
}

.mr7 {
    margin-right: 7px !important;
}

.mr8 {
    margin-right: 8px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr25 {
    margin-right: 25px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.ml-50 {
    margin-left: -50px !important;
}

.ml-30 {
    margin-left: -30px !important;
}

.ml2 {
    margin-left: 2px !important;
}

.ml4 {
    margin-left: 4px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.ml6 {
    margin-left: 6px !important;
}

.ml8 {
    margin-left: 8px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml15 {
    margin-left: 15px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.ml50 {
    margin-left: 50px !important;
}

.ml60 {
    margin-left: 60px !important;
}

.ml100 {
    margin-left: 100px !important;
}

.ml200 {
    margin-left: 200px !important;
}

.z100 {
    z-index:100 !important;
}

.z200 {
    z-index:200 !important;
}

.z1050 {
    z-index:1050 !important;
}

.z1020 {
    z-index:1020 !important;
}

.p3 {
    padding: 3px !important;
}