@charset "UTF-8";

:root {
    --day-mode-gray: #cdcdd2;
    --night-mode-gray: #373741;
    --primary-bg-color: #ffffff;
    --primary-light-bg-color: #ffffff;
    --secondary-light-bg-color: #f2f2f2;
    --tertial-bg-color: #d9d9d9;
    --quartal-bg-color: #f5f5f5;
    --border-color: #9d9d9d;
    --disabled-menu-tabs-color: #e5e5e5;
    --box-light-shadow: rgba(0, 0, 0, 0.24);
    --readonly-text-color: #8d8d8d;
    --placeholder-light-color: #cccccc;
}

/* LOGIN */
.scrollbar {
    background-color: var(--primary-light-bg-color);
}
.scrollbar.login {
    background-color: var(--day-mode-gray);
}

.layout-body {
    background-color: var(--secondary-light-bg-color);
}
.layout-body.shadow {
    box-shadow: 1px 1px 3px var(--box-light-shadow) !important;
}
.layout-body .dx-drawer-panel-content {
    box-shadow: var(--box-light-shadow) 0px 3px 4px;
}
.toggle-panel .toggle-panel-title {
    background-color: var(--quartal-bg-color);
}
.layout-header {
    box-shadow: 0 1px 3px var(--box-light-shadow), 0 1px 2px var(--box-light-shadow);
}
.menu-panel {
    box-shadow: 3px 3px 3px var(--box-light-shadow);
}
.panel-body {
    background-color: var(--primary-light-bg-color);
}
.panel-body.shadow {
    box-shadow: 3px 3px 3px var(--box-light-shadow);
}
.panel-body.toggle:hover {
    background-color: var(--quartal-bg-color);
}
.panel-body.toggle.selected:hover {
    background-color: var(--primary-light-bg-color);
}
.panel-body.toggle.selected:hover > .toggle-panel-title {
    background-color: var(--quartal-bg-color);
}
/* .tab-element {
    border-left: solid 1px var(--border-color);
} */
.tab-element:first-child {
    border-left: 0;
}
.tab-content {
    background-color: var(--secondary-light-bg-color);
    border-top-color: var(--border-color);
    box-shadow: 3px 3px 3px var(--box-light-shadow);
}
.view-select-panel {
    background-color: var(--secondary-light-bg-color);
    box-shadow: 0 1px 3px var(--box-light-shadow), 0 1px 2px var(--box-light-shadow);
}
.menu-panel .dx-tabs {
    border: 0;
}
.menu-panel .dx-tab {
    background-color: var(--tertial-bg-color);
}
.menu-panel .dx-tabs-scrollable .dx-tabs-wrapper {
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.menu-panel .dx-tab.dx-tab-selected {
    background-color: var(--secondary-light-bg-color);
}
.menu-panel .dx-tab-selected::after {
    border-right: 0;
    border-left: 0;
}
.projects-grid .dx-datagrid-header-panel,
.projects-grid .dx-toolbar-items-container,
.projects-grid .dx-datagrid-pager.dx-pager {
    background-color: var(--secondary-light-bg-color);
}
.base-data-box {
    border: 1px solid var(--border-color);
    background-color: var(--secondary-light-bg-color);
}
.read-only-column {
    background-color: var(--secondary-light-bg-color);
}
.read-only[role="gridcell"] {
    background-color: var(--secondary-light-bg-color);
    opacity: 0.6;
}
.dx-datagrid-rowsview .dx-selection > td .dx-link.dx-icon-popup {
    background-image: url('../assets/icons/external-link/external-link-alt-solid-light-selected.svg');
}
.tiles > .tile {
    background-color: black;
    transition: background-color .3s ease;
}
.tiles .tile-text {
    color: var(--primary-light-bg-color);
}
.tiles > .tile:hover {
    background-color: var(--night-mode-gray);
}
.tiles > .tile:hover .tile-text {
    color: var(--secondary-light-bg-color);
}
.status-tile-panel.red {
    color: var(--primary-light-bg-color);
}
.dx-progressbar-range {
    border: 1px solid var(--night-mode-gray);
    background-color: var(--night-mode-gray);
}
.title-panel .rename-button i {
    color: var(--primary-light-bg-color);
}
.title-panel:hover .rename-button i {
    color: black;
}
.widget-details {
    color: var(--night-mode-gray);
}
.status-button .load-indicator-button {
    border: 1px solid var(--secondary-light-bg-color);
}
.status-button .dx-button-mode-outlined {
    border-color: var(--secondary-light-bg-color);
}

/* ICONS */
.dx-icon-header-home {
    background-image: url('../assets/icons/home.png');
}
.dx-icon-header-circles {
    background-image: url('../assets/icons/circles.png');
}
.dx-icon-header-gear {
    background-image: url('../assets/icons/gear.png');
}
.dx-icon-header-user {
    background-image: url('../assets/icons/person-black-48dp.svg');
}
.dx-icon-header-bell {
    background-image: url('../assets/icons/bell-solid.svg');
}
.dx-icon-popup {
    background-image: url('../assets/icons/external-link/external-link-alt-solid.svg');
}
.dx-datagrid-rowsview .dx-selection > td .dx-link.dx-icon-popup {
    background-image: url('../assets/icons/external-link/external-link-alt-solid-moon-selected.svg');
}
.dx-icon-header-report {
    background-image: url('../assets/icons/report.png');
}

/* ECU Select */

.ecu-select-panel {
    border-left: 1px solid var(--border-color);
}

/* Link buttons */

.a-button {
    border: 1px solid var(--border-color);
    color: black !important;
}
.a-button:hover {
    border-color: var(--secondary-light-bg-color);
    background-color: var(--primary-light-bg-color);
}
.a-button:active {
    border-color: var(--secondary-light-bg-color);
}
.a-button.a-selected {
    border-color: var(--secondary-light-bg-color);
    background-color: var(--primary-light-bg-color);
}

/* Menut tabs */

.team-menu-tabs.dx-tabs .dx-tab {
    background-color: var(--disabled-menu-tabs-color);
}
.team-menu-tabs.dx-tabs .dx-tab.dx-state-focused:after {
    border-color: var(--secondary-light-bg-color);
    border-left: 0px var(--secondary-light-bg-color) !important;
    border-right: 0px var(--secondary-light-bg-color) !important;
}
.team-menu-tabs .menu-button {
    color: black;
    border-color: var(--day-mode-gray);
    background-color: var(--tertial-bg-color);
}
.team-menu-tabs .menu-button:hover {
    color: black;
    background-color: var(--primary-light-bg-color);
}
.team-menu-tabs .menu-button:active {
    color: black;
    background-color: var(--secondary-light-bg-color);
}
.team-menu-tabs .menu-button.disabled {
    color: var(--day-mode-gray);
    background-color: var(--secondary-light-bg-color);
}
.team-menu-tabs .menu-button.disabled:hover {
    color: var(--day-mode-gray);
    background-color: var(--secondary-light-bg-color);
}
.team-menu-tabs .menu-button.disabled:active {
    color: var(--day-mode-gray);
    background-color: var(--secondary-light-bg-color);
}
.team-menu-tabs .menu-button.menu-button-selected {
    font-weight: 500;
    background-color: var(--secondary-light-bg-color);
    border-bottom-color: var(--secondary-light-bg-color);
}
.team-menu-tabs .menu-button.menu-button-selected:hover {
    color: black;
    background-color: var(--secondary-light-bg-color);
}
.team-menu-tabs .menu-button:focus {
    outline: black dotted 1px !important;
}

/* Popup Content */

.popup-content > .list-gadget .dx-list-group-header {
    background-color: var(--secondary-light-bg-color);
}
.popup-content .list-item-image {
    border: solid 1px var(--tertial-bg-color);
}

/* Detail Content */

.detail-content {
    background-color: var(--secondary-light-bg-color);
    border: solid 1px var(--tertial-bg-color);
}

/* Charts */

.chart-no-data {
    background: var(--primary-light-bg-color);
}

/* Criteria */

.criteria-list .dx-treelist-rowsview .parent-criteria td {
    background-color: var(--quartal-bg-color);
    border-left-color: transparent;
    border-right-color: transparent;
}
.criteria-list .dx-treelist-rowsview .criteria-read-only {
    background-color: var(--quartal-bg-color);
}
.criteria-list .dx-treelist-rowsview .placeholder {
    color: var(--placeholder-light-color);
}

.criteria-readonly {
    color: var(--readonly-text-color);
}

.b-white {
    background-color: #fff;
}

.b-white .projects-grid .dx-datagrid-header-panel,
.b-white .projects-grid .dx-toolbar-items-container,
.b-white .projects-grid .dx-datagrid-pager.dx-pager {
    background-color: #fff;
}