﻿:root {
    --dxbl-text-font-size: 0.8rem !important;

    --stockhub-theme-xlight: #BDE3FF;
    --stockhub-theme-light: #1482FA;
    --stockhub-theme-mid: #0B41CD;
    --stockhub-theme-dark: #022366;
    --stockhub-theme-dark-rgb: 2,35,102;

    --bs-primary: var(--stockhub-theme-dark);
    --bs-primary-rgb: var(--stockhub-theme-dark-rgb);
}

.dxbl-grid {
    --dxbl-grid-font-size: 0.8rem !important;
}

    .dxbl-grid .dxbl-grid-empty-data {
        --dxbl-grid-empty-data-container-padding-y: 1rem !important;
        --dxbl-grid-empty-data-container-padding-x: 1.5rem !important;
    }

        .dxbl-grid .dxbl-grid-empty-data > span {
            font-weight: 400 !important;
            font-size: 0.8rem !important;
        }

.dxbl-text-edit {
    --dxbl-text-edit-font-size: 0.8rem !important;
}

/* Ensure that an editor in a grid cell marked as danger inherits the text colour. */
.dxbl-grid-table td.text-danger .dxbl-text-edit {
    color: inherit;
}

.dxbl-listbox {
    --dxbl-listbox-font-size: 0.8rem !important;
}

.fa-fw {
    width: 1.25em !important;
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.required-marker > .form-group > label:after,
.required-marker > label:after {
    padding-left: 3px;
    color: red;
    content: "*";
}

.validation-message {
    color: red;
    font-size: 0.75rem;
}

.loading-top20 {
    top: 20vh !important;
}

.height-15em {
    height: 15em !important;
}

.fa-1_5x {
    font-size: 1.5em;
}

/* Give a "withdrawn" checkbox a grey background. */
dxbl-check.withdrawn input {
    background-color: rgba(155, 155, 155, 0.5);
}

.system-notification-card-header {
    background-color: hsl(50 65% 65% / 0.25);
    color: black !important;
}

/* ButtonBar styles. */
.button-bar {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin: 1rem -0.75rem;
}

.pb-2 + .button-bar {
    margin-top: 0.5rem;
}

.card-body .button-bar:last-child,
.dxbl-modal-body .button-bar:last-child {
    margin-bottom: 0;
}

.row .button-bar,
.dxbl-modal-body .button-bar:last-child {
    margin-left: 0;
    margin-right: 0;
}

.button-bar button {
    min-width: max(calc(100% / 7), 100px);
}
.button-bar button.break-left {
    margin-right: auto;
}

@media (max-width: 767px) {
    .button-bar {
        flex-flow: column nowrap;
    }
        .button-bar button.break-left {
            margin-right: 0;
        }
}

/* The "flow" class. */
:not(.card).flow > * + * ,
.card.flow > .card-body > :not(script) + * {
    margin-top: 1rem;
}

/* Colour the messages. */
.message-product-alert {
    background-color: hsl(0 65% 65% / 0.25);
}

.message-global {
    background-color: hsl(50 65% 65% / 0.25);
}