@charset "UTF-8";

:root {
	--text-color: #333333;
	--day-mode-gray: #cdcdd2;
	--night-mode-gray: #373741;
	--primary-bg-color: #ffffff;
	--primary-light-bg-color: #ffffff;
	--secondary-bg-color: #f2f2f2;
	--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: 3px 3px 3px var(--box-light-shadow);
}

.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);
}

.approval-subheader {
	background-color: var(--secondary-bg-color);
}

.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);
}