/*
    ____                      _ _
   | __ ) _ __ __ _ _ __   __| (_)_ __   __ _
   |  _ \| '__/ _` | '_ \ / _` | | '_ \ / _` |
   | |_) | | | (_| | | | | (_| | | | | | (_| |
   |____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |
                                        |___/
*/
/*

   __     ___    ____  ____
   \ \   / / \  |  _ \/ ___|
    \ \ / / _ \ | |_) \___ \
     \ V / ___ \|  _ < ___) |
      \_/_/   \_\_| \_\____/

*/
:root {
  --text-blue:  #225C88;
  --text-light: #7D8296;
  --text-white: #FFFFFF;
  --text-black: #000000; }

/*
NOTE: when you reference one of these vars, comment underneath the element you've used it for. Mandem organised
*/
/*
USED FOR:
plan inputs
dashboard-panel
dashboard panel buttons
modal-body.report-options-modal > span.glyphicon
*/
/*
USED FOR:
dashboard panel header
dashboard panel buttons
typeahead
editable table > page header
*/
/*
USED FOR:
.modal-body.report-options-modal > .Select-menu-outer
*/
/*
USED FOR:
menu
dashboard panel
charts > drillup
.dashboard-filter-sentence-container > #fixed-version
superbutton overlay content
*/
/*
context menu
USED FOR:
header
pinned nav
dashboard panel
simple sidebar
spark chart

*/
/*
USED FOR:
modals
tooltip box
c tooltip

*/
/*
USED FOR:
error messages

*/
.filter-region {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  z-index: var(--z-index-layer-4);
  background-color: var(--highlight-lightest); }

.modal-filter-region {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  z-index: var(--z-index-layer-4);
  background-color: var(--white); }

.filter-region-body {
  margin: 0px;
  margin-top: 0px; }

.filter-region-body.empty, .filter-region-footer.empty {
  padding: 10px;
  color: var(--text-main); }

.filter-region-footer.empty {
  padding: 0px; }

.filter-region-compatible-count-text {
  color: var(--highlight);
  margin-top: 0.25rem; }

.filter-region-body .filters {
  width: inherit;
  height: inherit; }
  .filter-region-body .filters .filter-region-item {
    border-top: 1px dashed var(--line); }
    .filter-region-body .filters .filter-region-item:nth-of-type(1) {
      border-top: none; }
    .filter-region-body .filters .filter-region-item:last-of-type {
      border-bottom: 1px solid var(--line); }
    .filter-region-body .filters .filter-region-item .filter-input-row {
      margin-left: 0;
      margin-right: 0;
      display: flex;
      flex-direction: row; }
      .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group {
        display: flex;
        flex-direction: row;
        color: var(--text-main);
        flex-wrap: wrap;
        flex: 5; }
        @media screen and (max-width: 850px) {
          .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group {
            width: 80%; } }
        .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group .filter-input-group-title {
          flex: 1;
          margin-right: 10px; }
          @media screen and (max-width: 850px) {
            .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group .filter-input-group-title {
              flex-basis: 100%;
              margin-bottom: 5px; } }
        .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group .filter-input-group-designator {
          /* Equals, does not equal etc. */
          flex: 1;
          margin-bottom: 5px; }
          @media screen and (max-width: 900px) {
            .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group .filter-input-group-designator {
              margin-right: 0;
              margin-left: 11px; } }
          @media screen and (max-width: 850px) {
            .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group .filter-input-group-designator {
              flex-basis: 100%; } }
        .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group .filter-input-group-selector {
          /* Contains all value selectors -  */
          flex: 2;
          margin-left: 10px; }
          @media screen and (max-width: 850px) {
            .filter-region-body .filters .filter-region-item .filter-input-row .filter-input-group .filter-input-group-selector {
              flex-basis: 100%;
              margin-left: none; } }
  .filter-region-body .filters .panel-default {
    border: none;
    margin: 0px; }
  .filter-region-body .filters .panel-default > .panel-heading {
    background-color: white;
    border: none; }
  .filter-region-body .filters .panel-body {
    padding-left: 25px;
    width: inherit;
    height: inherit;
    border: none;
    background-color: white; }

.filter-input-buttons {
  margin-left: 1rem; }
  @media screen and (max-width: 900px) {
    .filter-input-buttons {
      max-width: 60px; } }

.filter-region-footer {
  padding: 5px 0 5px 5px; }
  .filter-region-footer .add-new-filter {
    margin-top: 10px; }
  .filter-region-footer.hide-border-true {
    border-top: none; }

.filter-region-select {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-right: 10px; }
  .filter-region-select .select-bar {
    flex: 1; }
  .filter-region-select .circle-button {
    margin-left: 10px;
    border-radius: 100%;
    background-color: white;
    width: 3.5em;
    height: 3.5em;
    border: 2px solid var(--line);
    font-size: 11.5px;
    transition: all 0.3s ease-in-out; }
    .filter-region-select .circle-button:hover {
      color: white;
      background: var(--highlight); }
    .filter-region-select .circle-button i.fa {
      font-size: 1.8em;
      padding: 0;
      margin: 0.3em 0 0.6em 0.1em;
      top: 1.8em;
      left: 0.4em;
      transform: translateX(-1px); }

.modal-filter-region-footer .add-new-filter {
  flex: 1; }

.modal-filter-region-footer .publish-clear-filter-overrides-button-group {
  flex: 1;
  align-items: center;
  padding: 10px 10px 5px 0;
  display: flex;
  justify-content: flex-end;
  width: 100%; }
  @media screen and (max-width: 1150px) {
    .modal-filter-region-footer .publish-clear-filter-overrides-button-group {
      flex-basis: 100%;
      margin-top: 5px; } }
  @media screen and (max-width: 625px) {
    .modal-filter-region-footer .publish-clear-filter-overrides-button-group button span {
      display: none; } }

.filter-region-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  .filter-region-footer .add-new-filter {
    flex: 1; }
  .filter-region-footer .publish-clear-filter-overrides-button-group {
    flex: 1;
    align-items: center;
    padding: 10px 10px 5px 0;
    display: flex;
    justify-content: flex-end;
    width: 100%; }
    @media screen and (max-width: 1150px) {
      .filter-region-footer .publish-clear-filter-overrides-button-group {
        flex-basis: 100%;
        margin-top: 5px; } }
    @media screen and (max-width: 625px) {
      .filter-region-footer .publish-clear-filter-overrides-button-group button span {
        display: none; } }

.master-filter-item {
  border-top: 1px dashed var(--line); }
  .master-filter-item:nth-of-type(1) {
    border-top: none; }
  .master-filter-item:last-of-type {
    border-bottom: 1px solid var(--line); }