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

/* unread answers to sent offers and dealer inquiries: the badge of the Emaily tab (#email-count-badge), same place and look */
.reply-count-badge {
    position: absolute;
    bottom: 5px;
    left: 16px;
    z-index: 10;
    width: 26px;
    overflow: hidden;
    text-align: center;
}

.reply-count-badge .badge {
    display: inline-block;
    padding: 2px 5px;
    font-size: 9px;
    color: var(--white-color);
    background-color: var(--brand-warning);
}

/* inside a tab group's menu the item is a row, not an icon: the badge sits after the label */
.dropdown-menu .reply-count-badge {
    position: static;
    display: inline-block;
    width: auto;
    margin-left: 8px;
    overflow: visible;
}

/* Unread incoming mail inside an offer or an inquiry (SUP-2138): same mail as the "Nová odpověď" badge counts. */
.email-thread-unread,
.list-group-item.email-thread-unread {
    border-left: 4px solid #d9534f !important;
    background: #fdf1f0 !important;
}
.email-thread-unread a,
.email-thread-unread .message {
    font-weight: 600;
}
.reply-new-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}
.email-thread-summary {
    margin: 0 0 8px;
    padding: 6px 10px;
    border-left: 4px solid #d9534f;
    background: #fdf1f0;
}

/* operator-first number fields (Počet km "< 10"): Espo's currency group widens the first item and narrows the last,
   made for number-then-unit; here the small operator select comes first, the number takes the room (SUP-2192) */
.input-group-currency.input-group-operator-first > .input-group-item:first-child {
    flex-grow: 0;
    min-width: var(--70px);
    max-width: var(--80px);
}

.input-group-currency.input-group-operator-first > .input-group-item:last-child {
    flex-grow: 1;
    min-width: 0;
    max-width: none;
}

/* status colour "sky" = light blue for Rezervováno: the theme's primary is the blue of Odesláno and its info is the
   violet of Objednáno, so reserved needs its own shade (SUP-2391). Used as `style: "sky"` on enum fields. */
.text-sky {
    color: #2a9fd8;
}

.label-sky {
    background-color: #2a9fd8;
}

/* The AutoERP theme draws list statuses as pills only in a column named "status"; the Product status
   columns (Stav vozidla, Stav na webu) get the same pill so every status list looks alike (SUP-2391). */
table.table > tbody > tr > td[data-name="vehicleState"] > span,
table.table > tbody > tr > td[data-name="psStatus"] > span {
    padding: 5px 10px;
    color: #5f6f80;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    background-color: #e4e9ee;
}

table.table > tbody > tr > td[data-name="vehicleState"] .text-primary,
table.table > tbody > tr > td[data-name="psStatus"] .text-primary,
table.table > tbody > tr > td[data-name="vehicleState"] .label-primary,
table.table > tbody > tr > td[data-name="psStatus"] .label-primary {
    color: var(--brand-primary);
    background-color: var(--brand-primary-lighter);
}

table.table > tbody > tr > td[data-name="vehicleState"] .text-success,
table.table > tbody > tr > td[data-name="psStatus"] .text-success,
table.table > tbody > tr > td[data-name="vehicleState"] .label-success,
table.table > tbody > tr > td[data-name="psStatus"] .label-success {
    color: var(--brand-success);
    background-color: var(--brand-success-lighter);
}

table.table > tbody > tr > td[data-name="vehicleState"] .text-info,
table.table > tbody > tr > td[data-name="psStatus"] .text-info,
table.table > tbody > tr > td[data-name="vehicleState"] .label-info,
table.table > tbody > tr > td[data-name="psStatus"] .label-info {
    color: var(--brand-info);
    background-color: var(--brand-info-lighter);
}

table.table > tbody > tr > td[data-name="vehicleState"] .text-warning,
table.table > tbody > tr > td[data-name="psStatus"] .text-warning,
table.table > tbody > tr > td[data-name="vehicleState"] .label-warning,
table.table > tbody > tr > td[data-name="psStatus"] .label-warning {
    color: var(--brand-warning);
    background-color: var(--brand-warning-lighter);
}

table.table > tbody > tr > td[data-name="vehicleState"] .text-danger,
table.table > tbody > tr > td[data-name="psStatus"] .text-danger,
table.table > tbody > tr > td[data-name="vehicleState"] .label-danger,
table.table > tbody > tr > td[data-name="psStatus"] .label-danger {
    color: var(--brand-danger);
    background-color: var(--brand-danger-lighter);
}

table.table > tbody > tr > td[data-name="status"] .text-sky,
table.table > tbody > tr > td[data-name="status"] .label-sky,
table.table > tbody > tr > td[data-name="vehicleState"] .text-sky,
table.table > tbody > tr > td[data-name="psStatus"] .text-sky,
table.table > tbody > tr > td[data-name="vehicleState"] .label-sky,
table.table > tbody > tr > td[data-name="psStatus"] .label-sky {
    color: #1f8fc8;
    background-color: #ddf1fb;
}