:root {
/*    --dx-color-primary: #1976d2;
    --dx-color-link: #1976d2;
    --dx-color-success: #5cb85c;*/
}

/*.dx-button.dx-button-success {
    background-color: var(--dx-color-success);
}
*/
body.dx-theme-material-typography {
    background-color: #f7faff;
}

.dx-theme-material-typography h1,
.dx-theme-material-typography h2,
.dx-theme-material-typography h3,
.dx-theme-material-typography h4,
.dx-theme-material-typography h5 {
    font-size: 26px;
    color: var(--dx-color-primary);
    font-weight: 400;
}

.dx-field-item-label-text {
        color: var(--dx-color-success);
        font-weight:500;
}

.dx-field-item-required-mark {
    color: var(--dx-color-danger)
}
.dx-button-text {
    text-transform: none;
}

.center-horizontal {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* Centre all content within an 850px cap, splitting surplus space left/right */
.centre-content-850 {
    max-width: 850px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 12px;
    box-sizing: border-box;
}

/* On small screens remove the side padding so content fills the viewport */
@media (max-width: 600px) {
    .centre-content-850 {
        padding: 0 4px;
    }
}

/* panels */
.panel-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

.panel-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.toolbar-container {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fff;
    padding: 10px 0;
    z-index: 100;
}

.toolbar-container.sticky-toolbar {
    position: sticky;
    top: 0;
    border-bottom: 1px solid #e0e0e0;
    padding-left: 15px;
    padding-right: 15px;
}

.dx-button.dx-button-warning {
    background-color: #f0ad4e;
    color: white;
}

.dx-button.dx-button-warning.dx-state-focused, .dx-button.dx-button-warning.dx-state-hover {
    background-color: #B07F39;
}