body {
    font-family: 'Inter', Arial, sans-serif;
    background: #fbfbfb;
}

main .top-row {
    background: #e9eef6 !important;
    border: none !important;
    height: 50px !important;
}

input, select, textarea {
    border: 1px solid gray;
    border-radius: 3px;
    background-color: transparent;
}

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: #5981c0;
    }

.c-pointer {
    cursor: pointer;
}

.w15 {
    width: 15px;
}

.w20 {
    width: 20px;
}

.w25 {
    width: 25px;
}

.w40 {
    width: 40px;
}

.w45 {
    width: 45px;
}

.w50 {
    width: 50px;
}

.w60 {
    width: 60px;
}

.w75 {
    width: 75px;
}

.w100 {
    width: 100px;
}

.w125 {
    width: 125px;
}

.w150 {
    width: 150px;
}

.w175 {
    width: 175px;
}

.w200 {
    width: 200px;
}

.w225 {
    width: 225px;
}

.w250 {
    width: 250px;
}

.w300 {
    width: 300px;
}

.w350 {
    width: 350px;
}

.w400 {
    width: 400px;
}

.h25 {
    height: 25px;
}

.h50 {
    height: 50px;
}

.h75 {
    height: 75px;
}

.h95 {
    height: 95px;
}

.h100 {
    height: 100px;
}

.highlight {
    background-color: yellow;
}

.custom-table {
    border-collapse: collapse;
}

    .custom-table td,
    .custom-table th {
        border: 1px solid grey;
    }

        .custom-table td input,
        .custom-table td select,
        .custom-table td textarea,
        .custom-table th input,
        .custom-table th select,
        .custom-table th textarea {
            width: 100%;
            border: none;
        }

    .custom-table tr:nth-child(even):not(.selected),
    .custom-table tr:nth-child(even):not(.selected) input,
    .custom-table tr:nth-child(even):not(.selected) select,
    .custom-table tr:nth-child(even):not(.selected) textarea {
        background-color: lightgrey;
    }
/* Rows 1–2, 5–6, 9–10... (white) */
/*    .custom-table tr:nth-child(4n + 1),
    .custom-table tr:nth-child(4n + 2),
    .custom-table tr:nth-child(4n + 1) input,
    .custom-table tr:nth-child(4n + 2) input,
    .custom-table tr:nth-child(4n + 1) select,
    .custom-table tr:nth-child(4n + 2) select,
    .custom-table tr:nth-child(4n + 1) textarea,
    .custom-table tr:nth-child(4n + 2) textarea {
        background-color: white;
    }*/
/* Rows 3–4, 7–8, 11–12... (lightgrey) */
/*    .custom-table tr:nth-child(4n + 3),
    .custom-table tr:nth-child(4n + 4),
    .custom-table tr:nth-child(4n + 3) input,
    .custom-table tr:nth-child(4n + 4) input,
    .custom-table tr:nth-child(4n + 3) select,
    .custom-table tr:nth-child(4n + 4) select,
    .custom-table tr:nth-child(4n + 3) textarea,
    .custom-table tr:nth-child(4n + 4) textarea {
        background-color: lightgrey;
    }*/

#searchResultsDiv:focus {
    outline: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* visually masks text without being a real password field, so the browser does not offer to save it */
.text-masked {
    -webkit-text-security: disc;
    text-security: disc;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 0.8s linear infinite;
}

.audio-sample-row {
    border: 1px solid lightgray;
}

.not-approved {
    border: 1px solid #e99802 !important;
}

.audio-sample-row.dragover {
    border: 1px dashed gray;
    background: lightgray;
}

.hit-container, .hit-content {
    width: 100%;
}

    .hit-content mark {
        background-color: yellow;
    }

.small-button {
    padding: 1px 5px;
    font-size: 13px;
}

.order-row-icon {
    display: inline-block;
    text-align: center;
    width: 16px;
}

    .order-row-icon.check-mark,
    .order-row-icon.exclamation-mark {
        border-radius: 10px;
        font-size: 9.5px;
        font-weight: bold;
    }

    .order-row-icon.check-mark {
        color: green;
        border: solid 1px green;
    }

    .order-row-icon.exclamation-mark {
        color: #ffc107;
        border: solid 1px #ffc107;
    }

.message-type-icon {
    color: #0a58ca;
}

.color-gray {
    color: gray;
}

.color-green {
    color: green;
}

.color-orange {
    color: #e99802;
}

.color-red {
    color: red;
}

.bg-lightgray {
    background: #e2e3e5;
}

.fw-bold input {
    font-weight: bold;
}

.fw-normal input {
    font-weight: normal;
}

.lc-tooltip {
    position: relative;
    display: inline-block;
    cursor: default;
}

    .lc-tooltip::after {
        content: attr(data-lc-tooltip);
        position: absolute;
        left: -2px;
        bottom: -1px;
        background: #f7f7f7;
        padding: 0px 2px;
        border-radius: 4px;
        border: solid 1px gray;
        white-space: nowrap;
        display: none;
    }

    .lc-tooltip.color-gray::after {
        color: gray;
    }

    .lc-tooltip.color-green::after {
        color: green;
    }

    .lc-tooltip.color-orange::after {
        color: #e99802;
    }

    .lc-tooltip.color-red::after {
        color: red;
    }

    .lc-tooltip:hover::after {
        display: unset;
    }

.search-result-item {
    padding: 3px 6px;
}

    .search-result-item:hover {
        background: #c9e9f3;
    }

.order-address.has-value:not(.selected) {
    background: lightgray;
    border-radius: 4px;
}

.order-field {
    cursor: pointer;
    border-radius: 4px;
    border: solid 2px transparent;
}

    .order-field.highlighted {
        border: solid 2px #c9e9f3;
    }

    .order-field.selected {
        background: #c9e9f3;
    }

.order-item {
    cursor: pointer;
    border-radius: 4px;
}

    .order-item.highlighted {
        border: solid 2px #498a9f;
    }

    .order-item.selected {
        background: #c9e9f3;
    }

    .order-item input {
        background: transparent;
    }

.message-segment {
    cursor: pointer;
    border-radius: 4px;
    border: solid 2px transparent;
}

    .message-segment.highlighted {
        border: solid 2px lightblue;
    }

    .message-segment.selected {
        background: #c9e9f3;
        border: solid 2px #c9e9f3;
    }


.order-list-item.border-primary {
    border-color: #467ed6 !important;
}

.read-background {
    background: #f5f5dcdb;
}

.processed-background {
    background: #90ee9082;
}

label.read-background,
label.processed-background {
    padding: 3px 6px;
    border-radius: 7px;
}

.id-border {
    padding: 1px 4px;
    border-radius: 6px;
    border: 1px #4f4f4f solid;
    color: #4f4f4f;
}