.matrix-icon-resize {
    font-size: 1.5rem !important;
}

#chartdiv1, #chartdiv2, #chartdiv3, #chartdiv4, #chartdiv5 {
    width: 100%;
    height: 600px;
}

.m-login__logo img {
    max-width: 100%;
}

.white-label-asset-preview {
    background-color: #ffffff;
    background-image: conic-gradient(#d1d5db 25%, #ffffff 0 50%, #d1d5db 0 75%, #ffffff 0);
    background-size: 16px 16px;
}

.m-brand__logo img {
    max-height: 60px;
    max-width: 140px;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__user-profile.m-topbar__user-profile--img.m-dropdown--arrow .m-dropdown__arrow {
    color: #ffffff;
}

/*
    jstree view
    Remove the selected background color
    Remove the selected border
*/
.jstree-default .jstree-clicked {
    background: none;
    box-shadow: none;
}

.highlightedTreeRow {
    background-color: #dedee1 !important;
}

/*
Overwrite Metronic primary color for header and menu
@todo QM-176 remove this and build a proper Metronic stylesheet when upgrading Metronic
*/
a,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-left--minimize .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link > .m-menu__link-icon,
.m-aside-left--minimize .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link > .m-menu__link-icon,
.m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler.m-brand__toggler--active span::before,
.m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler.m-brand__toggler--active span::after {
    color: #575962;
}

.m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler.m-brand__toggler--active span,
.m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler.m-brand__toggler--active span::before,
.m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler.m-brand__toggler--active span::after,
.m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler:hover span,
.m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler:hover span::before,
.m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler:hover span::after {
    background-color: #575962;
}

/*
@todo QM-176 This is not needed when we use Metronic 6.x.x
 */
.btn.btn-secondary.m-btn.m-btn--icon.m-btn--icon-only {
    background: none;
}

.dashboard-stat-text {
    color: white;
}

.custom-file {
    z-index: 0;
}


/** QM-1798 **/
tbody.ui-sortable tr {
    cursor: grab;
}

tbody.ui-sortable tr.ui-sortable-helper {
    cursor: grabbing;
}

button[disabled],
button[disabled]:hover,
input[type="submit"][disabled],
input[type="submit"][disabled]:hover,
.btn[disabled],
.btn[disabled]:hover,
.m-btn[disabled],
.m-btn[disabled]:hover {
    cursor: not-allowed;
}

/* ── Schedule day toggle buttons ── */
.schedule-day-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 4px 8px;
    margin: 0;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.schedule-day-toggle:first-child {
    border-radius: 4px 0 0 4px;
}

.schedule-day-toggle:last-child {
    border-radius: 0 4px 4px 0;
}

.schedule-day-toggle + .schedule-day-toggle {
    border-left: 0;
}

.schedule-day-toggle:hover {
    background: #f0f1f3;
}

.schedule-day-toggle.active {
    background: #5867dd;
    border-color: #5867dd;
    color: #fff;
}

.schedule-day-toggle.active + .schedule-day-toggle {
    border-left-color: transparent;
}

.schedule-day-toggle.active:hover {
    background: #4a58c8;
}

.schedule-day-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.schedule-day-toggle span {
    pointer-events: none;
}

.desks-table th,
.desks-table td {
    vertical-align: middle;
}

/* Required field indicator: adds a red asterisk after labels inside CakePHP's
   generated wrapper divs that include the "required" class. */
.input.required label,
.form-group .input.required label,
.form-group.required label {
    position: relative;
}
.input.required label::after,
.form-group .input.required label::after,
.form-group.required label::after {
    content: " *";
    color: #d9534f;
    margin-left: 4px;
    font-weight: 600;
}