/* =============== *
 * ## Variables ##
 * =============== */

:root {
   --primary: #2681FD !important;
   --primary-dark: #1E67CA !important;
   --primary-light: #519AFD !important;

   --secondary: #FF7800 !important;
   --secondary-dark: #CC6000 !important;
   --secondary-light: #FF9333 !important;

   --black: #000000 !important;
   --grey: #969696 !important;
   --grey-dark: #636363 !important;
   --grey-darker: #303030 !important;
   --grey-light: #DBDBDB !important;
   --grey-lighter: #EFEFEF !important;
   --red: #EF2020 !important;
   --white: #FFFFFF !important;
}


/* ===================== *
 * ## Black (#000000) ##
 * ===================== */

/* ## background ## */
#time_controls,
#play_controller .close_button,
.admin-div .body .admin-table .list-header,
.casper > .header,
.change-columns-button .role-button:hover .column,
.column-assignment-container .column-lists .column-lists-header,
.column-assignment-container .column-lists .column-row:after,
.list-component .role-list-header-visual,
.login-title,
.map-zoom-range .role-decrease,
.map-zoom-range .role-increase,
.range-slider-container,
.time_block_tooltip {
   background: #000000;
}

/* ## border-color ## */
.f3-menu-main .f3-menu-item.open > .f3-sub-menu:before,
.f3-menu-main.hovering .f3-menu-item:hover > .f3-sub-menu:before,
.settings-menu:before {
   border-color: #000000;
}

/* ## color ## */
.admin-div .header .title,
.ag_edit .column > .ag_header,
.ag_edit > .ag_header,
.ag_editor .ag_label,
.ag_label > .ag_header,
.casper-component .role-subheader .role-title,
.column-type-container .column-type-header .title,
.details-table > tbody > tr > th,
.filter-module .form-field-label,
.filter-module .form-input-label:hover,
.form-dropdown-button:hover,
.form-field-changed-indicator,
.grid-header,
.grid-item-header > .header-title,
.grid-item-tool:hover > .tool-icon > .tool-label,
.login-form .content-text,
.login-form .title-text,
.login-form .login-form-row label,
.login-form .login-form-row input,
.page-container > .page > .header .title,
.time_resize_button_left:after,
.time_resize_button_right:after,
.time_slider_calendar_button:after,
.time_slider_calendar_button:before {
   color: #000000;
}

/* ## fill ## */
.casper-chart-component .role-enlarge:hover svg,
.column-type-container .column-type-header .list-toggle .icon,
.grid-item-tool:hover > .tool-icon > svg,
.map-controls .map-controls-button .icon,
.map-controls .map-options-group .role-master-switch .icon,
.role-tools > .gui-button .role-button:hover .icon,
.role-tools .dropdown-component.list-closed .display-wrapper:hover .list-toggle .icon,
.role-tools .dropdown-component.list-open .list-toggle .icon,
.role-tools .tool-button:hover .icon {
   fill: #000000;
}


/* ================================ *
 * ## Blue (#2681FD / --primary) ##
 * ================================ */

/* ## background ## */
body .pika-button:hover,
body .pika-title .pika-next:hover,
body .pika-title .pika-prev:hover,
#play_controller .close_button:hover,
#play_controller .playback_holder .playback_button:not(.playback_button_disabled):hover,
.analysis-prop-list .role-listitems .list-item[data-value].select,
.analysis-prop-list .role-listitems .list-item[data-value].select:hover,
.column-assignment-container .button:not(.inactive):hover,
.column-assignment-container .column-lists .column-row.selected,
.custom_scroll::-webkit-scrollbar-thumb,
.form-confirm-button:hover,
.form-dropdown-list > .form-value-field .form-input-label:hover,
.form-dropdownradio-list > .form-value-field .form-input-label:hover,
.form-field-reset:hover:before,
.form-list-wrapper .form-input[type=checkbox]:checked + .form-input-label,
.form-list-wrapper .form-input[type=radio]:checked + .form-input-label,
.list-component .list-row.current .list-cell,
.list-table tr.current:not(:hover),
.login-button,
.map-controls .map-controls-button.checked,
.map-controls .map-controls-button-container > .dropdown-component.list-open > .display-wrapper,
.map-zoom-range .role-decrease:not(.button-disabled):hover,
.map-zoom-range .role-increase:not(.button-disabled):hover,
.map-zoom-range .zoom-level-button.current,
.range-slider:hover:active,
.range-slider-button:hover:active,
.search-actions > .search-col > div:not([disabled]):hover,
.settings-action-holder > .form-confirm-button:not(:disabled):hover,
.settings-action-holder > .settings-cancel-holder:hover,
.settings-menu-wrapper::-webkit-scrollbar-thumb,
.ui-button[activated]:not([disabled]),
.ui-button:not([disabled]):hover,
.time_menu_button:hover,
.time_resize_button_left:hover,
.time_resize_button_right:hover,
.time_slider_block.time_slider_block_active:hover,
.time_slider_calendar_button_container:not(.open) .time_slider_calendar_button:hover {
   background: var(--primary);
}

/* ## color ## */
.form-field.form-field-changed .form-field-changed-indicator,
.form-field.form-field-changed .form-field-label,
.filter-module .form-field.scoped-field .form-field-changed-indicator,
.filter-module .form-field.scoped-field .form-field-label,
.form-dropdown-action:hover,
.form-input:checked + .form-input-label,
.login-form .back-to-login-link,
.login-form .forgot-password-link {
  color: var(--primary);
}


/* ===================================== *
 * ## Blue (#1E67CA / --primary-dark) ##
 * ===================================== */

/* ## background ## */
.form-list-wrapper .form-input[type=checkbox]:checked + .form-input-label:hover {
   background: var(--primary-dark);
}


/* ==================== *
 * ## Grey (#E0E0E0) ##
 * ==================== */

/* ## background ## */
.button-container > .list-button:after,
.login-form .login-form-row input {
   background: #E0E0E0;
}

/* ## border-color ## */
.admin-div > .header,
.casper-component .role-subheader,
.column-assignment-container .columns-available .container,
.column-assignment-container .columns-used .container,
.columns-dropdown .column-assignment-container > .header,
.editor-container .container,
.grid-item-header,
.list-button > .button-list,
.page-container > .page > .header,
.popup-dropdown .header {
   border-color: #E0E0E0;
}


/* ==================== *
 * ## Grey (#B0B0B0) ##
 * ==================== */

/* ## border-color ## */
.analysis-chart-settings .checkbox .role-button,
.analysis-chart-settings .group-checkbox .role-button,
.popup-dropdown .group-checkbox .role-button {
   border-color: #B0B0B0;
}


/* ==================== *
 * ## Grey (#303030) ##
 * ==================== */

/* ## background ## */
body .pika-button,
body .pika-title,
#play_controller .playback_holder .playback_button,
#time_controller_container,
.f3-menu-item[data-selected] > a,
.f3-sub-menu .f3-menu-item,
.header .status-bar,
.range-slider:hover,
.range-slider-button:hover,
.search-actions > .search-col > div,
.settings-menu,
.time_menu_button,
.user-info .user-icon {
   background: #303030;
}

/* ## color ## */
input[type="text"]:not(.cke_dialog_ui_input_text),
input[type="password"],
.filter-module .form-input-label {
   color: #303030;
}


/* ==================== *
 * ## Grey (#363636) ##
 * ==================== */

/* ## fill ## */
.casper-chart-component .chart-export-button .icon,
.export-dropdown-component .export-button .icon {
   fill: #363636;
}


/* ==================== *
 * ## Grey (#EFEFEF) ##
 * ==================== */

/* ## background ## */
.list-component .role-list-container .list-row:not(.current):hover .list-cell:after {
   background: #EFEFEF;
}


/* ==================== *
 * ## Grey (#DBDBDB) ##
 * ==================== */

/* ## background ## */
body,
body .pika-single,
.analysis-chart-settings .checkbox .role-button,
.analysis-chart-settings .group-checkbox .role-button,
.analysis-prop-list .role-listitems .list-item[data-value]:hover,
.column-assignment-container .button.inactive,
.column-assignment-container .column-lists .column-row:not(.in-use):not(.selected).highlight,
.custom_scroll::-webkit-scrollbar-track,
.export-dropdown-component .export-button:hover,
.hc-export-dropdown .chart-export-button:hover,
.list-component .list-row.highlight:not(.current) .list-cell,
.list-component .list-row.map-highlight:not(.current) .list-cell,
.list-table tr:not(.list-header):hover,
.map-controls .map-controls-button:not(.dropdown-component):not(.checked):hover,
.map-controls .map-controls-button-container > .dropdown-component:not(.list-open):hover .display-wrapper,
.map-controls .screenshot-buttons:hover,
.map-controls .location-search:hover,
.map-zoom-range .zoom-level-button,
.popup-dropdown .group-checkbox .role-button,
.role-tools .dropdown-component .list-container .gui-button:hover,
.search-group-wrapper,
.time_resize_button_left,
.time_resize_button_right,
.time_slider_block.time_slider_block_active,
.time_slider_calendar_button,
.ui-button[disabled],
.user-info .user-icon:after,
.user-info .user-icon:before {
   background: #DBDBDB;
}

/* ## color ## */
.time_preset_button {
   color: #DBDBDB;
}


/* ==================== *
 * ## Grey (#969696) ##
 * ==================== */

/* ## background ## */
.filter-item:before,
.user-info .user-icon:after,
.user-info .user-icon:before {
   background: #969696;
}

/* ## border color ## */
input[type="text"], input[type="password"],
.search-group,
.search-group-scrollcontainer {
   border-color: #969696;
}

/* ## color ## */
.login-title .login-version .version,
.search-actions > .search-col > div[disabled],
.user-info .user-name {
   color: #969696;
}


/* ==================== *
 * ## Grey (#8C8585) ##
 * ==================== */

/* ## color ## */
.ui-button[disabled] .label {
   color: #8C8585;
}

/* ## fill ## */
.ui-button[disabled] .icon {
   fill: #8C8585;
}


/* ============================= *
 * ## Grey (#FFFFFF / --grey) ##
 * ============================= */

/* ## background ## */
.map-controls-button-container > div:before {
   background: var(--grey);
}


/* ================================== *
 * ## Grey (#636363 / --grey-dark) ##
 * ================================== */

/* ## background ## */
.change-columns-button .role-button .column,
.column-assignment-container .button:not(.inactive),
.column-assignment-container .column-lists .column-row:not(.selected).in-use,
.columns-available .header,
.columns-used .header,
.f3-menu-main > .f3-menu-item:hover > a,
.f3-menu-main > .f3-menu-item:before,
.f3-menu-main > .f3-menu-item.open > a,
.f3-sub-menu .f3-menu-item:before,
.f3-sub-menu .f3-menu-item:hover > a,
.form-dropdown-button,
.form-dropdown-list > .form-value-field label,
.form-dropdownradio-button,
.form-dropdownradio-list > .form-value-field label,
.form-field-reset:before,
.form-list-wrapper > .form-value-field label,
.list-component .list-row.select:not(.highlight):not(.map-highlight):not(.current) .list-cell,
.list-component .list-row.map-select:not(.highlight):not(.map-highlight):not(.current) .list-cell,
.map-zoom-range .zoom-level-button:not(.current):hover,
.range-slider,
.range-slider-button,
.search-actions > .search-col > div[disabled],
.settings-action-holder > .form-confirm-button,
.settings-action-holder > .settings-cancel-holder,
.time_slider_bg,
.time_slider_block,
.ui-button,
.user-info .user-button:hover,
.user-info .user-settings:before,
.user-info .user-settings.settings-open .user-button.settings {
   background: var(--grey-dark);
}

/* ## border color ## */
body .pika-single,
.noise-editable .edit-set-container,
.page #pageSettings .flex-column,
.search-actions {
   border-color: var(--grey-dark);
}

/* ## color ## */
body,
.form-dropdown-action,
.legacy-chart-component .role-subheader .role-title,
.pac-item,
.pac-item-query,
.user-info .user-button {
   color: var(--grey-dark);
}

/* ## fill ## */
.casper-chart-component .role-enlarge svg,
.casper-component .role-subheader .role-icon,
.grid-item-tool > .tool-icon > svg,
.list-component .list-row div[data-click],
.list-component .list-row div[data-icon],
.list-button > .button-icon > svg,
.list-component .change-columns-button .icon,
.noise-event-player .role-play_button .icon,
.noise-event-player .role-pause_button .icon,
.popup-dropdown .query-list .list-row .list-cell[data-column='delete'] .icon_interaction,
.role-tools > .gui-button .role-button .icon,
.role-tools .dropdown-component .list-container .gui-button .icon,
.role-tools .dropdown-component .list-toggle .icon,
.role-tools .tool-button .icon {
   fill: var(--grey-dark);
}

/* ## stroke ## */
.casper-legacy-component.issue .role-subheader .role-icon,
.issue-layer .issue-icon-container .issue-icon,
.issue-current-layer .issue-icon-container .issue-icon,
.issue-highlighted-layer .issue-icon-container .issue-icon,
.issue-selected-layer .issue-icon-container .issue-icon,
.list-component .change-columns-button .icon,
.map-controls .map-options-button.checkbox .role-button .icon,
.map-controls .map-options-button.group-checkbox .role-button .icon,
.map-controls .map-options-group .role-master-switch .icon,
.popup-dropdown .query-list .list-row .list-cell[data-column='delete'] .icon_interaction,
.role-tools .dropdown-component .list-container .gui-button .icon,
.role-tools > .gui-button .role-button .icon {
   stroke: var(--grey-dark);
}


/* ==================================== *
 * ## Grey (#303030 / --grey-darker) ##
 * ==================================== */

/* ## background ## */
.form-list-wrapper > .form-value-field:hover label {
   background: var(--grey-darker);
}


/* =================================== *
 * ## Grey (#DBDBDB / --grey-light) ##
 * =================================== */

/* ## background ## */
.map-controls-button-container > [data-mc-group='0'] + [data-mc-group='0']:before,
.map-controls-button-container > [data-mc-group='1'] + [data-mc-group='1']:before,
.map-controls-button-container > [data-mc-group='2'] + [data-mc-group='2']:before,
.map-controls-button-container > [data-mc-group='3'] + [data-mc-group='3']:before,
.map-controls-button-container > [data-mc-group='4'] + [data-mc-group='4']:before,
.map-controls-button-container > [data-mc-group='5'] + [data-mc-group='5']:before {
   background: var(--grey-light);
}


/* ====================== *
 * ## Orange (#FF7800) ##
 * ====================== */

/* ## background ## */
body td.is-selected .pika-button,
.login-button:focus,
.login-button:hover,
.time_slider_calendar_button_container.open .time_slider_calendar_button {
   background: #FF7800;
}

/* ## color ## */
.login-form .back-to-login-link:focus,
.login-form .back-to-login-link:hover,
.login-form .forgot-password-link:focus,
.login-form .forgot-password-link:hover {
   color: #FF7800;
}


/* =================== *
 * ## Red (#EF2020) ##
 * =================== */

/* ## background ## */
.login-form-error {
   background: #EF2020;
}


/* ===================== *
 * ## White (#FFFFFF) ##
 * ===================== */

/* ## background ## */
input[type="password"],
input[type="text"],
.button-container > .list-button:before,
.casper-component .role-content,
.casper-component .role-subheader,
.columns-dropdown > .role-list > .list-container > .role-listitems,
.form-dropdown-button,
.form-dropdown-button.form-dropdown-button-open,
.form-dropdown-list-connector,
.form-dropdown-list-wrapper,
.form-dropdownradio-list-connector,
.form-dropdownradio-list-wrapper,
.grid-item-container,
.list-button > .button-list,
.login-wrapper,
.map-controls .map-controls-button,
.map-zoom-range .role-indicator-container,
.page-container > .page > .body,
.page-container > .page > .header,
.popup-dropdown > .role-list > .list-container > .role-listitems,
.role-tools .dropdown-component .role-listitems {
   background: #FFFFFF;
}

/* ## color ## */
body .pika-button,
body .pika-button:hover,
#time_controller,
.admin-div .body .admin-table .list-header th,
.analysis-prop-list .role-listitems .list-item[data-value].select,
.analysis-prop-list .role-listitems .list-item[data-value].select:hover,
.columns-available .header,
.columns-used .header,
.column-assignment-container .column-lists .column-lists-header > div,
.column-assignment-container .column-lists .column-row.in-use > div,
.column-assignment-container .column-lists .column-row.selected > div,
.columns-container .column-lists .column-lists-header th,
.editor-container > div .header,
.f3-menu-item > a,
.filter-value,
.form-confirm-button,
.form-confirm-button:hover,
.form-dropdownradio-button,
.form-field-reset:after,
.form-input-label,
.form-list-wrapper > .form-value-field label,
.form-list-wrapper > .form-value-field label:hover,
.form-list-wrapper > .form-value-field input:checked + label,
.login-button,
.login-button:hover,
.list-component .role-list-header-visual .list-cell,
.list-component .role-list-header-visual .list-cell.sort-column:after,
.list-component .list-row.current .list-cell,
.list-component .list-row.select:not(.highlight):not(.map-highlight) .list-cell,
.list-component .list-row.map-select:not(.highlight):not(.map-highlight) .list-cell,
.list-table tr.current:not(:hover) td,
.login-wrapper .login-version .title,
.map-controls .map-controls-button-container > .map-options-control.list-open > .display-wrapper > .label,
.range-slider:after,
.range-slider-button:after,
.range-slider-button:before,
.search-actions > .search-col > div,
.settings-action-holder > .settings-cancel-holder,
.time_menu_button,
.time_preset_button:hover,
.time_resize_button_left:hover:after,
.time_resize_button_right:hover:after,
.time_slider_calendar_button:hover:after,
.time_slider_calendar_button:hover:before,
.time_slider_calendar_button_container.open .time_slider_calendar_button:after,
.time_slider_calendar_button_container.open .time_slider_calendar_button:before,
.ui-button .label,
.user-info .user-button,
.user-info .user-settings.settings-open .user-button.settings {
   color: #FFFFFF;
}

/* ## fill ## */
body .pika-title .pika-next > svg,
body .pika-title .pika-prev > svg,
#play_controller .close_button .icon,
.header .client-logo,
.list-component .list-row.select div[data-click],
.list-component .list-row.map-select div[data-click],
.list-component .list-row.select div[data-icon],
.list-component .list-row.map-select div[data-icon],
.map-controls .map-controls-button-container > .dropdown-component.list-open > .display-wrapper .list-toggle .icon,
.popup-dropdown .query-list .list-row.current .list-cell[data-column='delete'] .icon_interaction,
.time_slider_calendar_button:hover,
.time_slider_calendar_button_container.open .time_slider_calendar_button .icon {
   fill: #FFFFFF;
}

/* ## stroke ## */
#play_controller .close_button .icon,
.popup-dropdown .query-list .list-row.current .list-cell[data-column='delete'] .icon_interaction {
   stroke: #FFFFFF;
}


/* ================= *
 * ## Transparent ##
 * ================= */

/* ## color ## */
.dropdown-component .role-listitems .list-item[data-value].empty-value,
.dropdown-component .role-listitems .list-item[data-value].null-value,
.dropdown-component .role-listitems .list-item[data-value].empty-value:hover,
.dropdown-component .role-listitems .list-item[data-value].null-value:hover {
   color: transparent;
}