/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *





















 /* require font_awesome5_webfont */

*/ @font-face {
  font-family: "Zurich BT";
  src:
    font-url(/assets/ZurichBT-Roman-54381340de10f98e1ab5f7f5249d9c95e14d719ce4d6dcf0bfe088932dbb1a0f.woff) format("woff"),
    /* Pretty Modern Browsers */ font-url(/assets/ZurichBT-Roman-b7513088fab09950b26f10e22cce95b51fa8d423198c6ed183c5882014770681.ttf)
      format("truetype"),
    /* Safari, Android, iOS */ font-url(/assets/ZurichBT-Roman-bcf92c2a7cf632444632cf0b5312f94895445fce122512b75468128accd95192.svg#svgFontName)
      format("svg"); /* Legacy iOS */
}

@font-face {
  font-family: "ZurichBoldBT";
  src:
    font-url(/assets/ZurichBoldBT-c2a1648b206d255d6a9fb4c1ed46fd23ca71e08e91249b12e46567089f1b56b0.woff2) format("woff"),
    /* Pretty Modern Browsers */ font-url(/assets/ZurichBoldBT-bbf1917d64dbfa645792ac14e7a1ed2dbd0160f00e84660628f4a9362057aa32.woff) format("woff"),
    /* Pretty Modern Browsers */ font-url(/assets/ZurichBoldBT-cc61a904c5d838a5760f2031116d2e84a5184023f6f37dff39364806a906e57c.ttf) format("truetype"); /* Safari, Android, iOS */
}
:root {
  /* material colours */
  --red: #f44336;
  --pink: #e91e63;
  --purple: #9c27b0;
  --deep_purple: #673ab7;
  --indigo: #3f51b5;
  --blue: #2196f3;
  --light_blue: #03a9f4;
  --cyan: #00bcd4;
  --teal: #009688;
  --green: #4caf50;
  --light_green: #8bc34a;
  --lime: #cddc39;
  --yellow: #ffeb3b;
  --amber: #ffc107;
  --orange: #ff9800;
  --deep_orange: #ff5722;
  --brown: #795548;
  --grey: #9e9e9e;
  --blue_grey: #607d8b;
  --white: #fff;

  --id-orange: #ff4511;
  --id-magenta: #b21f67;

  /* Frequently used hard-coded colors */
  --viewer-color: #1976d2;
  --manager-color: #e64a19;
  --revoke-color: #d32f2f;
  --grant-color: #388e3c;
  --text-dark: #212529;
  --text-muted: #6c757d;
  --bg-light: #f5f5f5;
  --positive-color: #07b95f;
  --negative-color: #b90708;
  --border-dark: #455a64;
  --text-nav-dark: #1c313a;
  --explorer-bg: #eef1f2;
  --explorer-text: #1e3151;
  --badge-bg: #37474f;

  /* Additional UI colors */
  --light-gray: #f2f3f5;
  --medium-gray: #f8f9fa;
  --dark-gray: #e2e3e4;
  --footer-gray: #888e95;
  --footer-dark: rgb(86, 86, 90);
  --footer-text: #757575;
  --table-border: #e5e5e5;
  --disabled-text: #aaaaaa;
  --inactive-bg: #bebebe;
  --check-success: #388e3c;
  --times-danger: #d32f2f;
  --highlight-pink: #f5c7de;
  --light-pink: rgba(160, 6, 84, 0.08);
  --id-magenta-hover: #c14b85;
  --text-black: #181819;
  --tab-active: #0a8ac4;

  --body-background-color: #fefefe;
  --body-color: #1c313a;
  --pdf_background_color: #fff;

  --footer-height: 160px;

  /* --footer-background-color: #ddd; */
  --footer-background-color: #424242;
  --footer-color: #fff;
  --footer-border-color: #ddd;

  --topic-nav-background-color: #fff;
  --topic-nav-inverse-color: #3092e5;
  --topic-nav-color: #3092e5;

  --primary-color: #345374;
  --primary-color-dark: #002b48;
  --primary-color-light: #627fa3;
  --primary-color-text: #fff;
  --secondary-color: #2f92e5;
  --secondary-color-dark: #0065b2;
  --secondary-color-light: #72c2ff;
  --secondary-color-text: #000;

  --brand-success: #5cb85c;

  --banner-color: #6bb9f0;
  --banner-text-color: #ffffff;

  /* devise specific colours */
  --devise-background-color: #f5f5f5;
  --required-color: #e48895;

  --navbar-border-color: var(--primary-color);
  --navbar-color: var(--primary-color-text);
  --navbar-height: 50px;
  --navbar-logo-height: 75px; /* height for logo dropping down bit */
  --navbar-padding: calc(var(--navbar-logo-height) - var(--navbar-height));

  --breadcrumb-background-color: transparent;

  --tooltip-color: #efefef;

  /* Chart specific colors */
  --chart-bar-background: #efefef;
  --chart-bar-color: #b21f67;
  --chart-secondary-bar-color: #4b5e67;
  --chart-stddev-color: #01579b;

  /* Other UI elements */
  --flash-bg: #f8f8f8;
  --stacked-label: #37474f;
}
.tooltip .arrow {
  display: none;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip-inner {
  max-width: 400px;
  font-weight: 300 !important;
  color: white !important;
  background-color: var(--text-nav-dark) !important;
  border-radius: 3px !important;
}

.tooltip-inner a {
  color: #fff;
  text-decoration: underline;
}

.tooltip-inner a:hover {
  color: #fff;
  text-decoration: none;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'AbelPro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
       url(/assets/Abel-Pro-7d83849408e8e569889fd1cbaf696759031dd9bbcdb48e7842a21391136393d2.woff) format('woff'), /* Pretty Modern Browsers */
       url(/assets/Abel-Pro-5955126cbc61c6fafdc74e8f7f2afc33fbb22daa01191863476cb50b52dd0403.woff2) format('woff2'), /* Pretty Modern Browsers */
       url(/assets/Abel-Pro-06e9359a04f694ea846fe50d4ae4cd99f7a789240e16789907d7a8de3718be1e.ttf)  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'AbelPro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
       url(/assets/Abel-Pro-Bold-a408724f3cefff16d1d3a74833def20c0b2b2b1405787db5a6a688f48f319835.woff) format('woff'), /* Pretty Modern Browsers */
       url(/assets/Abel-Pro-Bold-b78995e9d5ad1bec5642b2f714bc4caf4ecc773d8707e04b765f797f49de4b27.woff2) format('woff2'), /* Pretty Modern Browsers */
       url(/assets/Abel-Pro-Bold-58229b8a887bf03ba06dc914fd84591c2b32cf634ba8e061534eee14271b3cfe.ttf)  format('truetype'); /* Safari, Android, iOS */
}
html {
  position: relative;
  min-height: 100%;
  /* overflow-x: hidden; */
}

body {
  /* Margin bottom by footer height */
  /* position: relative; */
  /* margin-bottom: var(--footer-height); */

  /* top padding for the nav fixed height */
  padding-top: 50px;
  margin: 0;
  font-family: "Roboto", "Helvetica", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;

  background-color: var(--body-background-color);
  color: var(--body-color);
  overflow-x: hidden;
  /* overflow-y: scroll; */
  height: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* typography */
h1, h2, h3, h4, h5, h6 {
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  color: var(--body-color);
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  white-space: nowrap;
}

.small, small {
  font-weight: 300 !important;
}

a {
  color: var(--id-magenta);
  -webkit-transition: all 0.1s ease-in !important;
  transition: all 0.1s ease-in !important;
}

a:active, a:hover {
  color: var(--id-magenta);
  text-decoration: underline;
}

.xs {
  font-size: 70% !important;
  font-weight: 300;
}

ol.breadcrumb {
  background-color: var(--breadcrumb-background-color);
  padding-left: 0;
  margin-bottom: 0;
}

ol.breadcrumb a {
  text-decoration: underline !important;
  color: var(--id-magenta);
}

ol.breadcrumb .dropdown {
  margin-left: 1rem;
}

a:has(.btn-views) {
  text-decoration: none;
}

a:has(.btn-views):hover, a:has(.btn-views):active {
  text-decoration: none;
}

a.no_line {
  text-decoration: none;
}

a.no_line:hover, a.no_line:active {
  text-decoration: none;
}

.btn-views {
  color: #fff;
  background: var(--id-magenta);
}

.btn-views:hover, .btn-views:active {
  color: #fff;
  background: #c14b85;
  text-decoration: none;
}

/* Highcharts tooltip */
.highcharts-container {
  overflow: visible !important;
}

.highcharts-tooltip {
  position: relative;
  z-index: 50;
}

/* bootstrap tooltip */
.tooltip-inner {
  /* max-width: 200px; */
  /* padding: 3px 8px; */
  font-family: "Roboto", "Helvetica", Arial, sans-serif;
  font-size: 14px;
  color: var(--body-color);
  background-color: var(--tooltip-color);
  /* text-align: center; */
  /* background-color: #000; */
  /* border-radius: .25rem; */
}

.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: var(--tooltip-color);
}

.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
  border-right-color: var(--tooltip-color);
}

.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--tooltip-color);
}

.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.tooltip.bs-tooltip-left .arrow::before {
  border-left-color: var(--tooltip-color);
}

/* flash message */
.alert {
  margin: 2px 2px;
  padding: 5px;
  line-height: 1.5;
  text-align: center;
  font-size: 16px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background: #f7f7f7;
  border: 0 solid transparent;
  border-top: 5px solid;
}

.pad-right {
  margin-right: 10px;
}

.pad-left {
  margin-left: 10px;
}

.pad-bottom {
  margin-bottom: 10px;
}

.pad-top {
  margin-top: 10px;
}

/* devise settings */
body.devise {
  margin-top: 10px;
  background: var(--devise-background-color);
  padding-top: 5px;
}

.devise .card {
  border: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
}

.devise h2 {
  text-align: center;
}

span.required {
  color: var(--required-color);
}

.form-check-label {
  margin-left: 5px;
}

/* PDFs */
body.pdf,
body.download {
}

body.pdf .col-xs-1,
body.download .col-xs-1 {
  width: calc(8.33333333 / 100) * 1024px;
}

body.pdf .col-xs-2,
body.download .col-xs-2 {
  width: calc(16.66666667 / 100) * 1024px;
}

body.pdf .col-xs-3,
body.download .col-xs-3 {
  width: calc(25 / 100) * 1024px;
}

body.pdf .col-xs-4,
body.download .col-xs-4 {
  width: calc(33.33333333 / 100) * 1024px;
}

body.pdf .col-xs-5,
body.download .col-xs-5 {
  width: calc(41.66666667 / 100) * 1024px;
}

body.pdf .col-xs-6,
body.download .col-xs-6 {
  width: calc(50 / 100) * 1024px;
}

body.pdf .col-xs-7,
body.download .col-xs-7 {
  width: calc(58.33333333 / 100) * 1024px;
}

body.pdf .col-xs-8,
body.download .col-xs-8 {
  width: calc(66.66666667 / 100) * 1024px;
}

body.pdf .col-xs-9,
body.download .col-xs-9 {
  width: calc(75 / 100) * 1024px;
}

body.pdf .col-xs-10,
body.download .col-xs-10 {
  width: calc(83.33333333 / 100) * 1024px;
}

body.pdf .col-xs-11,
body.download .col-xs-11 {
  width: calc(91.66666667 / 100) * 1024px;
}

body.pdf .col-xs-12,
body.download .col-xs-12 {
  width: calc(100 / 100) * 1024px;
}

/* media queries */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
    line-height: 1.05;
  }
  h2 {
    font-size: 1.7rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.2rem;
  }
  h5 {
    font-size: 1rem;
  }
  .breadcrumb {
    display: none;
  }
  .container-fluid {
    padding: 7px;
  }
  .nopadding {
    padding-right: 7px;
    padding-left: 7px;
  }
  .filter {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .sub-nav-block {
    display: block;
    float: none;
    width: 100% !important;
  }
  .navbar-brand > img {
    width: 7em;
  }
  .card {
    padding: 0.5rem !important;
  }
  .card.module-nav {
    padding-top: 1.5rem !important;
  }
}
.navbar {
  background: var(--body-background-color);
  font-size: 16px;
}

.navbar h5,
.navbar h6 {
  color: var(--white);
}

.sidemenu-toggler {
  float: left !important;
  position: fixed;
  top: 15px;
  left: 10px;
  border: 0;
  color: var(--body-color);
  cursor: pointer;
  z-index: 200;
  font-size: 18px;
}

.sidemenu-toggler.collapsed {
  color: var(--text-dark);
}

.sidemenu-toggler:active,
.sidemenu-toggler:hover,
.sidemenu-toggler:focus {
  border: none;
  color: var(--id-magenta);
}

.sidemenu-toggler .open {
  display: none;
}

.sidemenu-toggler .closed {
  display: block;
}

.sidemenu-toggler.active .open {
  display: block;
}

.sidemenu-toggler.active .closed {
  display: none;
}

/* side nav */
.sidehover {
  position: fixed;
  background: transparent;
  left: 0;
  width: 20px;
  top: 50px;
  z-index: 1031;
  height: 100%;
}

.sidemenu {
  position: fixed;
  left: -400px;
  top: 50px;
  bottom: 0;
  width: 350px;
  z-index: 1030; /* Stay on top */
  background-color: var(--white);
  /* box-shadow: 0 0px 6px rgba(0,0,0,0.16), 0 0px 6px rgba(0,0,0,0.23); */
  box-shadow: 0 0 5px #666;
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: hidden;
  transition: 0.2s ease-in-out;
  animation-fill-mode: both;
  border-radius: 0;
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  /* font-size: 90%; */
}

.sidemenu.active {
  left: 0;
}

.sidemenu.peak {
  left: -340px;
}

.sidemenu .content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 40px;
  /* margin-bottom: 30px; */
}

.sidemenu .content .nav-link {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 4px;
}

.sidemenu .content .nav-link:hover {
  /* background-color: #f5e6ed !important; */
  background-color: var(--light-pink) !important;
  color: var(--id-magenta);
}

.sticky-top {
  top: 50px;
  background: var(--medium-gray);
  padding-bottom: 0.25rem;
}

.sticky-top .card {
  /* margin-bottom: 0 !important; */
  padding-bottom: 0 !important;
}

.filter_scroll {
  position: absolute;
  margin-top: -50px;
}

/* filter box */
.filter label {
  font-size: 90%;
  font-family: "AbelPro", "Helvetica", Arial, sans-serif;
}

/* share button */
.btn-share {
  background: var(--id-magenta);
  color: #fff !important;
  text-decoration: none;
}

.btn-share:hover {
  color: var(--white);
  background: var(--id-magenta-hover);
}

/* survey pages */
h2.subtitle {
  margin-top: 0.5em;
}

.card.comments {
  border: 0;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}

.card.filter,
.card.dashboard,
.card.id-plain {
  border: 0;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  padding: 1rem;
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}

.card.filter {
  padding-top: 0.25rem;
}

.card.small_curve {
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
}

.credit {
  text-align: right;
  font-size: 12px;
}

.force-orange {
  color: var(--id-orange) !important;
}

.force-magenta {
  color: var(--id-magenta) !important;
  text-decoration-color: var(--id-magenta) !important;
}

.force-white {
  color: white !important;
  text-decoration-color: white !important;
}

.improve {
  color: #f44336;
}

.maintain {
  color: #4caf50;
}

.less_imp {
  color: #2196f3;
}

.comparator {
  color: #ccc;
}

.is_significant {
  color: var(--id-magenta) !important;
}

.category {
  font-size: 70%;
  font-weight: 300;
}

.hover-highlight:hover {
  text-decoration: underline;
}

.expander,
.noteable,
.infobox {
  transition: all 0.3s;
  margin-top: -0.5em;
  margin-left: -0.25em;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  cursor: default;
  font-size: 12px;
}

.infobox {
  margin-left: -0.4em;
  background-color: #fefafc;
  color: var(--id-magenta);
  background-color: transparent;
}

.infobox:hover {
  background: var(--highlight-pink);
}

.infobox svg {
  animation: MoveUpDown 2s 4 linear;
}

.expander {
  background-color: #fefafc;
  color: var(--id-magenta);
  cursor: pointer;
}

.expander:hover {
  background: var(--highlight-pink);
}

.expander:hover svg {
  animation: MoveUpDown 1s linear infinite;
}

.expander.collapsed {
  transform: rotate(0deg);
}

.expander:not(.collapsed) {
  transform: rotate(180deg);
}

@keyframes MoveUpDown {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(2px);
  }
  75% {
    transform: translateY(-2px);
  }
}

.badge.badge-detail {
  position: relative;
  top: -0.5rem;
  margin-left: 0.5em;
}

.badge.badge-outline {
  position: relative;
  top: -0.2rem;
  margin-left: 0.25em;
  font-size: 50% !important;
}

.badge.badge-outline.improve,
.badge.badge-outline.maintain,
.badge.badge-outline.is_significant {
  font-size: 60%;
  background-color: var(--white);
}

.badge.badge-improve {
  font-size: 60%;
  font-weight: 300;
  background-color: var(--red);
  color: var(--white);
}

.badge.badge-maintain {
  font-size: 60%;
  font-weight: 300;
  background-color: var(--green);
  color: var(--white);
}

.question hr {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.question .breakdown-toggle {
  right: 15px;
  bottom: 10px;
}

.question .breakdown-toggle:hover {
  cursor: pointer;
  text-decoration: underline;
}

.question .breakdown-toggle .hide {
  display: none;
}

.question .breakdown-toggle .switch {
  color: var(--white);
  font-size: 70%;
}

.question .breakdown-toggle .switch i {
  color: var(--text-dark);
  font-size: 110% !important;
}

.question .breakdown-toggle .switch:hover,
.question .breakdown-toggle .switch:active {
  color: #495057;
}

.question .breakdowns {
  margin-top: 5px;
  line-height: 1.25;
}

.question .icon {
  display: inline-block;
}

.question .heading {
  display: inline-block;
  font-weight: normal;
  padding-left: 0.3rem;
}

.question .heading a:hover,
.question .heading a:active {
  text-decoration: underline;
}

.question .sub-heading {
  display: inline-block;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  font-weight: normal;
  font-size: 90%;
}

.divider {
  font-size: 80%;
  margin-bottom: 0.5rem;
}

.themes-nav {
  background: var(--light-gray);
  padding-top: 1em;
}

.themes-nav a {
  color: var(--footer-gray);
}

.themes-nav a:hover,
.themes-nav a:active,
.themes-nav a.active {
  color: var(--text-dark);
}

.arrow {
  font-size: 150%;
  line-height: 1;
  font-weight: bolder;
}

.theme-nav .nav-link {
  display: block;
  padding: 0.25rem 0.25rem;
}

.survey-nav .nav-link {
  margin-right: 3px;
  font-size: 100%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-left: 0.5 rem;
  padding-right: 0.5 rem;
  color: var(--tab-active);
}

.survey-nav .nav-link.active,
.survey-nav .nav-link:hover,
.survey-nav .nav-link:active {
  background: var(--tab-active);
  color: var(--white);
  font-weight: bolder;
}

.nav-divider {
  color: rgba(0, 0, 0, 0.5);
}

.nav-link {
  padding: 0.2rem 0.5rem;
}

.nav-link.indent {
  padding-left: 0.5rem;
}

.survey .intro,
.local_governments .intro,
.themes .intro,
.local_areas .intro,
.home .intro,
.benchmarks .intro,
.comparators .intro {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  color: #222;
}

.survey .intro h1,
.survey .intro h2,
.survey .intro h3,
.local_governments .intro h1,
.local_governments .intro h2,
.local_governments .intro h3,
.themes .intro h1,
.themes .intro h2,
.themes .intro h3,
.local_areas .intro h1,
.local_areas .intro h2,
.local_areas .intro h3,
.home .intro h1,
.home .intro h2,
.home .intro h3,
.benchmarks .intro h1,
.benchmarks .intro h2,
.benchmarks .intro h3,
.comparators .intro h1,
.comparators .intro h2,
.comparators .intro h3 {
  text-transform: none;
  color: #222;
}

.survey .intro h1.bigger,
.survey .intro h2.bigger,
.survey .intro h3.bigger,
.local_governments .intro h1.bigger,
.local_governments .intro h2.bigger,
.local_governments .intro h3.bigger,
.themes .intro h1.bigger,
.themes .intro h2.bigger,
.themes .intro h3.bigger,
.local_areas .intro h1.bigger,
.local_areas .intro h2.bigger,
.local_areas .intro h3.bigger,
.home .intro h1.bigger,
.home .intro h2.bigger,
.home .intro h3.bigger,
.benchmarks .intro h1.bigger,
.benchmarks .intro h2.bigger,
.benchmarks .intro h3.bigger,
.comparators .intro h1.bigger,
.comparators .intro h2.bigger,
.comparators .intro h3.bigger {
  font-size: 300%;
}

.survey .intro h3,
.local_governments .intro h3,
.themes .intro h3,
.local_areas .intro h3,
.home .intro h3,
.benchmarks .intro h3,
.comparators .intro h3 {
  color: var(--id-magenta);
}

.survey .intro a,
.local_governments .intro a,
.themes .intro a,
.local_areas .intro a,
.home .intro a,
.benchmarks .intro a,
.comparators .intro a {
  color: var(--id-magenta);
  text-decoration: underline;
}

.survey .intro a:active,
.survey .intro a:hover,
.local_governments .intro a:active,
.local_governments .intro a:hover,
.themes .intro a:active,
.themes .intro a:hover,
.local_areas .intro a:active,
.local_areas .intro a:hover,
.home .intro a:active,
.home .intro a:hover,
.benchmarks .intro a:active,
.benchmarks .intro a:hover,
.comparators .intro a:active,
.comparators .intro a:hover {
  color: var(--id-magenta);
}

.survey .hero,
.local_governments .hero,
.themes .hero,
.local_areas .hero,
.home .hero,
.benchmarks .hero,
.comparators .hero {
  margin-top: 2em;
}

.local_governments.index .intro,
.home .intro {
  margin-bottom: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--id-magenta);
  color: var(--white);
}

.local_governments.index .intro h1,
.local_governments.index .intro h2,
.local_governments.index .intro h3,
.home .intro h1,
.home .intro h2,
.home .intro h3 {
  color: var(--white);
}

.local_governments.index .intro a,
.home .intro a {
  color: var(--white);
}

.inactive_page {
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--id-magenta);
  color: var(--white);
}

.inactive_page h1,
.inactive_page h2,
.inactive_page h3 {
  color: var(--white);
}

.inactive_page a {
  color: var(--white);
}

.backtotop {
  background: rgba(68, 68, 68, 0.7);
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 20;
  display: none;
}

.backtotop:hover {
  text-decoration: none;
  background: var(--text-dark) !important;
}

.backtotop:hover i {
  top: 8px;
}

.backtotop i {
  color: var(--white);
  margin: 0;
  position: relative;
  left: 16px;
  top: 13px;
  font-size: 19px;
}

h3.alert-danger {
  font-weight: 500;
}

/* flash message */
#flashMessageHolder {
  position: fixed;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1000;
  font-size: 18px;
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  padding: 0.5em;
  background-color: var(--flash-bg);
  border-radius: 0;
  color: var(--id-magenta);
  -webkit-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.12);
}

#flashMessageHolder .alert {
  border: none;
  padding: none;
  margin: none;
}

.sub-title {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.1;
}

.card-columns {
  column-count: 2;
}

@media (max-width: 768px) {
  .card-columns {
    column-count: 1;
  }

  .pdf .card-columns {
    column-count: 2 !important;
  }

  .infobox {
    position: relative;
    top: inherit;
    right: inherit;
    margin: auto;
    display: block;
    padding: 0;
    margin-top: 0;
    background: transparent;
    border: none;
  }

  .infobox .SpectrumMiniChart {
    margin: auto;
    width: 50%;
  }

  .home .left-col {
    padding: 1em;
  }

  .home .left-col .content-area {
    text-align: center;
  }

  .home .btn-logo {
    justify-content: center;
  }

  .wave-bg {
    display: none;
  }
}
/* ID Specific styles */
.btn-id {
  color: #fff;
  background: var(--id-magenta);
  text-decoration: none;
}

.btn-id.active,
.btn-id:active,
.btn-id:hover {
  color: var(--id-magenta);
  background: #fff;
  border: 1px solid var(--id-magenta);
}

.btn-id-outline {
  color: var(--id-magenta);
  border: 1px solid var(--id-magenta);
  text-decoration: none;
}

.btn-id-outline.active,
.btn-id-outline:active,
.btn-id-outline:hover {
  color: #fff;
  background: var(--id-magenta);
}

.community-header {
  background: #f8f8f9;
  position: fixed;
  top: 0;
  z-index: 200;
  width: 100%;
  height: 50px;
}

.community-header .shotable-trigger {
  color: var(--id-magenta);
  border-radius: 50%;
}

.community-header .shotable-trigger.active,
.community-header .shotable-trigger:active,
.community-header .shotable-trigger:hover {
  color: #fff;
  background: var(--id-magenta);
}

.community-header__logo {
  width: 300px;
}

.id-identity {
  width: 450px;
  height: 50px;
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.id-header {
  height: 126px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.id-header .title-wrapper {
  font-family:
    Arial,
    Helvetica Neue,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol;
  flex: 1 1;
  display: flex;
  align-items: center;
  font-size: 1.75rem;
}

.id-header .title-wrapper .client-name {
  color: #181819;
  border-right: 1px solid #ddd;
  margin-right: 1.2rem;
  padding-right: 1.2rem;
  display: inline;
}

.id-header .title-wrapper .client-name:hover,
.id-header .title-wrapper .client-name:active {
  color: var(--id-magenta);
}

.id-header .title-wrapper .views-link {
  color: var(--id-magenta);
}

.id-header .client-logo img {
  height: 110px;
  max-height: 110px;
}

.id-tabs {
  height: 40px;
  padding-bottom: 20px;
  font-family:
    Arial,
    Helvetica Neue,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #181819;
  text-align: left;
}

.id-tabs .product-tab-container {
  height: 40px;
  margin-bottom: 0;
  padding-left: 0px;
  margin: 0;
}

.id-tabs .profile {
  background: #cb2c30;
}

.id-tabs .housing {
  background: #7513b8;
}

.id-tabs .economy {
  background: #70b859;
}

.id-tabs .forecast {
  background: #3b6e8f;
}

.id-tabs .atlas {
  background: #caae01;
}

.id-tabs .views {
  background: var(--id-magenta);
  font-weight: bolder !important;
}

.id-tabs li {
  display: inline;
  position: relative;
  padding: 0;
}

.id-tabs li.inactive a {
  background: rgb(238, 238, 238) !important;
  color: rgb(86, 86, 90) !important;
}

.id-tabs li.inactive:hover a {
  color: white !important;
}

.id-tabs li.inactive:hover a.profile {
  background: #cb2c30 !important;
}

.id-tabs li.inactive:hover a.housing {
  background: #7513b8 !important;
}

.id-tabs li.inactive:hover a.economy {
  background: #70b859 !important;
}

.id-tabs li.inactive:hover a.forecast {
  background: #3b6e8f !important;
}

.id-tabs li.inactive:hover a.atlas {
  background: #caae01 !important;
}

.id-tabs li.inactive:hover a.views {
  background: var(--id-magenta) !important;
}

.id-tabs li .product-tab {
  display: inline-block;
  padding: 8px 14px;
  color: #fff;
  text-transform: lowercase;
}

.id-tabs li:hover .active-indicator,
.id-tabs li.active .active-indicator {
  display: block;
}

.id-tabs li .active-indicator {
  display: none;
  position: absolute;
  z-index: 90;
  left: 50%;
  margin-left: -7.5px;
  width: 0px;
  height: 0px;
  border-style: solid;
  background: none;
  border-width: 8px 8px 0px;
}

.id-tabs li .active-indicator.profile {
  border-color: #cb2c30 transparent transparent;
}

.id-tabs li .active-indicator.housing {
  border-color: #7513b8 transparent transparent;
}

.id-tabs li .active-indicator.economy {
  border-color: #70b859 transparent transparent;
}

.id-tabs li .active-indicator.forecast {
  border-color: #3b6e8f transparent transparent;
}

.id-tabs li .active-indicator.atlas {
  border-color: #caae01 transparent transparent;
}

.id-tabs li .active-indicator.views {
  border-color: var(--id-magenta) transparent transparent;
}

.cta-button {
  color: rgb(191, 33, 111) !important;
  background: #fff;
  border-radius: 0px;
  padding-bottom: 6px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 6px;
  font-family: arial;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.cta-button:hover,
.cta-button:active {
  color: #333 !important;
  background: #f8f8f9 !important;
}
body.pdf {
  font-weight: normal;
  font-style: normal;
}

body.pdf p.lead {
  font-size: 100% !important;
}

body.pdf b {
  font-weight: normal !important;
}

body.pdf .container-fluid, 
body.pdf .container {
  background: #fff !important;
}

body.pdf .page-break {
  page-break-before: always;
}

body.pdf page-break-after {
  page-break-after: always;
}

body.pdf .no-break {
  page-break-inside: avoid !important;
}

body.pdf .hide_pdf, 
body.pdf .hide-pdf {
  display: none;
}

body.pdf .navbar, 
body.pdf footer {
  display: none;
}

body.pdf .map-holder {
  display: none;
}

/* hide specific ui elements */
body.pdf .breakdown-toggle {
  display: none;
}

body.pdf .breakdowns {
  display: block !important;
  line-height: 1.25;
}

body.pdf .breakdowns {
  border-top: 0px;
  margin-top: 4px;
}

body.pdf .backtotop {
  display: none;
}

body.pdf .intro {
  color: var(--text-nav-dark) !important;
  background-color: #fff !important;
  padding: 0 !important;
  padding-left: 1em !important;
}

body.pdf .intro h1, 
body.pdf .intro h2, 
body.pdf .intro h3, 
body.pdf .intro h4, 
body.pdf .intro h5, 
body.pdf .intro a {
  color: var(--text-nav-dark) !important;
  line-height: 1.5;
}

body.pdf .card {
  border: 0 !important;
  margin: 0;
  padding: 0;
}

body.pdf .card h5 {
  min-height: 1em !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

body.pdf .card-columns {
  column-count: 2 !important;
}

/* custom grid controls for PDF */
:root {
  --width_pdf_in_px: 765px;
}

/* Commented out grid adjustments preserved from original SCSS
body.pdf .col-1 {
  width: calc(8.33333333 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-2 {
  width: calc(16.66666667 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-3 {
  width: calc(25 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-4 {
  width: calc(33.33333333 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-5 {
  width: calc(41.66666667 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-6 {
  width: calc(48.0 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-7 {
  width: calc(58.33333333 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-8 {
  width: calc(66.66666667 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-9 {
  width: calc(75 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-10 {
  width: calc(83.33333333 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-11 {
  width: calc(91.66666667 / 100.0 * var(--width_pdf_in_px));
}

body.pdf .col-12 {
  width: calc(100 / 100.0 * var(--width_pdf_in_px));
}
*/
footer {
  z-index: 50;
  /* margin-top: 50px; */
  font-size: 15px;
}

footer .footer_1 {
  background: var(--white);
  color: var(--text-nav-dark);
  padding-bottom: 2em;
  /* padding-top: 3em; */
  font-size: 15px !important;
  line-height: 25px !important;
}

footer .footer_1 .hover-link,
footer .footer_1 a {
  color: var(--text-nav-dark);
}

footer .footer_1 .hover-link:hover,
footer .footer_1 .hover-link:active,
footer .footer_1 a:hover,
footer .footer_1 a:active {
  color: var(--id-magenta);
}

footer .footer_2 {
  background: var(--footer-dark);
  color: var(--footer-text);
}

footer .footer_2 a {
  color: var(--footer-gray);
}

footer .footer_2 a:hover {
  text-decoration: none;
  color: var(--footer-text);
}

.popover {
  max-width: 350px;
  /* If max-width does not work, try using width instead */
  width: 350px;
}
.home footer {
  display: none;
}

.home .full-height {
  min-height: 100vh;
}

.home .logo-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-top: 3px;
  padding-left: 3px;
  height: 43px;
  width: 100%;
  background: var(--dark-gray);
}

.home .left-col {
  background-color: var(--id-magenta);
  color: var(--white);
  padding: 3em 2em 2em 10em;
  z-index: 99;
}

.home .left-col h1 {
  color: var(--white);
  /* font-weight: 300; */
  font-size: 3.5em
}

.home .left-col .byline {
  padding: 1em 0;
  font-color: var(--white);
  font-size: 1.8em;
  font-weight: lighter;
  line-height: 1.2em;
}

.home .left-col .login {
  padding-top: 3em;
}

.home .left-col .landscape-footer {
  position: absolute;
  bottom: 43px;
  right: 0;
}

.home .right-col {
  background: url(/assets/client/liveable-image-2b4baeee25a649d91d36d9389c30c455d8d33e80659c747968cad01e142948cb.jpg);
  background-size: cover;
}
.dashboard {
  padding-top: 0.5em;
}

.dashboard .point-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard.card h3,
.dashboard.card h4,
.dashboard.card h5,
.dashboard.card h6 {
  margin-bottom: 3px;
}

.dashboard.card h3 a,
.dashboard.card h4 a,
.dashboard.card h5 a,
.dashboard.card h6 a {
  color: var(--body-color);
}

.dashboard.card h3 a:active,
.dashboard.card h3 a:hover,
.dashboard.card h4 a:active,
.dashboard.card h4 a:hover,
.dashboard.card h5 a:active,
.dashboard.card h5 a:hover,
.dashboard.card h6 a:active,
.dashboard.card h6 a:hover {
  color: var(--body-color);
  text-decoration: underline;
}

.dashboard.card .comparators {
  margin-top: 10px;
  font-size: 90%;
  text-align: left !important;
}

.dashboard.card .comparators .label {
  width: 60%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard.card .comparators .value {
  width: 35%;
  float: right;
  display: inline-block;
}
.accesses .user_icon {
  font-size: 1em;
}

.accesses .user_icon.viewer {
  color: var(--viewer-color);
}

.accesses .user_icon.manager {
  color: var(--manager-color);
}

.accesses .user_icon.revoke {
  color: var(--revoke-color);
}

.accesses .user_icon.grant {
  color: var(--grant-color);
}
.council-card {
  /* border: 1px solid #e8e8e8; */
  border: 0;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  /* margin-bottom: 1rem; */
  min-height: 150px;
  transition: 0.5s;
  /* cursor: pointer; */
}

.council-card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.council-card.locked {
  cursor: not-allowed;
}

.council-card.locked img {
  filter: grayscale(100%);
}

.council-card img {
  max-width: 200px;
  max-height: 120px;
}

.council-card .card-logo {
  height: 100px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 768px) {
  .council-card .card-logo {
    height: 50px;
  }
}

.council-card:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2);
}

.council-card .card-body {
  padding: 0.5rem;
}

.council-card .card-title {
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
  /* color: var(--id-magenta); */
}

.council-card .card-footer {
  background: #fff;
  font-size: 80%;
  padding: 0.5rem;
  padding-top: 0;
  border: 0;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.council-card .locked {
  /* z-index: 200; */
  /* background-color: var(--id-orange); */
  height: 20px;
  width: 20px;
  border-radius: 50%;
  color: #999;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  /* right: -10px; */
  /* top: -10px; */
  left: 10px;
  bottom: 10px;
}

.council-card .unlocked {
  display: none;
  z-index: 200;
  color: #999;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  left: 10px;
  bottom: 10px;
}
:root {
  --logo-size: 80px;
}

.module-nav {
  background: #fff;
  border: 0;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  padding: 1rem;
  padding-bottom: 1.25rem;
  padding-top: calc(var(--logo-size) * 0.5);
  margin-bottom: 2rem;
  margin-top: calc(var(--logo-size) * 0.4);
  min-height: 340px;
  transition: 0.5s;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.module-nav.no-click {
  cursor: default;
}

.module-nav:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

.module-nav.no-hover:hover {
  box-shadow: none;
}

.module-nav .logo-top {
  position: absolute;
  padding: 14px;
  padding-top: 8px;
  top: calc(var(--logo-size) * -0.5);
  left: 50%;
  margin-left: calc(var(--logo-size) * -0.5);
  width: var(--logo-size);
  height: calc(var(--logo-size) * 0.5);
  /* border: 1px solid #ccc; */
  background: #f8f9fa;
  background: #fff;
  -webkit-border-radius: 80px 80px 0 0;
  -moz-border-radius: 80px 80px 0 0;
  border-radius: 80px 80px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0;
}

.module-nav h2 a,
.module-nav h3 a,
.module-nav h4,
.module-nav h4 a,
.module-nav h5 a,
.module-nav h6,
.module-nav h6 a {
  color: var(--id-magenta);
}

.module-nav a {
  color: var(--body-color);
}

.module-nav a:active,
.module-nav a:hover {
  color: var(--id-magenta);
  text-decoration: underline;
}

.module-nav .large {
  display: inline;
  font-size: 20px;
}

.module-nav .nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-nav .attribute-divider {
  color: #aaa;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.module-nav .comparator-indicator {
  font-family: roboto;
  color: #3e515b;
  line-height: 1;
}

.module-nav .comparator-indicator .score {
  font-size: 1.5em;
  font-weight: bold;
}

.module-nav .comparator-indicator .label {
  font-size: 0.9rem;
}

.module-nav .note {
  position: absolute;
  bottom: 5px;
  right: 5px;
  /* border: 1px solid #fbe9f2; */
  border-radius: 8px;
  font-size: 0.9rem;
  padding: 3px 4px 0px 4px;
  line-height: 1;
  background: #fafafa;
  color: rgba(178, 31, 103, 0.8);
  /* color: var(--id-magenta); */
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
}
:root {
  --bar_height: 18;
  --mini_bar_height: 14;
  --sig_indicator_size: 10;
  --chart_bar_background: #efefef;
  --chart_bar_color: #b21f67;
  --secondary_bar_color: #4b5e67;
  --historical_bar_color: #c14c85;
  --historical_secondary_bar_color: #4b5e67;
  --chart_mini_bar_color: var(--chart_bar_color);
  --chart_bar_color_alternate: var(--secondary_bar_color);
  --chart_mini_bar_color_alternate: var(--secondary_bar_color);
  --chart_bar_color_historical_alternate: var(--historical_secondary_bar_color);
  --chart_mini_bar_color_historical_alternate: var(
    --historical_secondary_bar_color
  );
  --chart_bar_color_historical: var(--historical_bar_color);
  --chart_mini_bar_color_historical: var(--historical_bar_color);
  --chart_stddev_color: #01579b;
}

.highcharts-tooltip {
  background: var(--white);
  z-index: 200;
}

.sorters .dropdown-item:hover {
  /* light pink background */
  background-color: rgba(160, 6, 84, 0.08) !important;
  color: var(--id-magenta);
}

.sorters a {
  text-decoration: none;
  font-size: 90%;
  color: var(--id-magenta);
}

.sorters a:active,
.sorters a:hover {
  text-decoration: none;
}

.data-downloader {
  text-align: right;
  display: block;
  margin-top: 6px;
  font-size: 11px;
}

.question {
  margin-bottom: 0.2em;
}

.question .series-title {
  font-family: "Roboto";
  font-size: 75%;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 2px;
}

.question .point-title {
  font-size: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
  &.mini {
    font-size: 70%;
  }
  &.center {
    text-align: center !important;
  }
}

.question .point-na {
  color: var(--text-muted);
  font-size: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-align: center !important;
  &.mini {
    font-size: 65%;
  }
}

.breakdowns .series-title {
  margin-top: 3px;
}

.fa-check {
  color: var(--check-success);
}

.fa-times {
  color: var(--times-danger);
}

.highcharts-tooltip a:hover {
  text-decoration: underline;
}

.significance-legend {
  text-align: right;
  /* display: inline-block; */
  margin-bottom: 1px;
  font-size: 12px;
  max-width: 400px;
}

.significance-legend .significance-indicator {
  font-size: 16px;
  margin-bottom: 0px;
}

.significance-legend .significance-indicator:before {
  top: 0px !important;
}

.significance-indicator {
  display: inline-block;
  margin-bottom: -1px;
  background-color: transparent;
  z-index: 9;
  height: calc(var(--sig_indicator_size) * 1px);
  width: calc(var(--sig_indicator_size) * 1px);
  font-size: calc(var(--sig_indicator_size) * 2px);
  line-height: calc(var(--sig_indicator_size) * 1px);
}

.significance-indicator.positive {
  color: var(--positive-color);
}

.significance-indicator.positive:before {
  content: "\21a5";
}

.significance-indicator.negative {
  color: var(--negative-color);
}

.significance-indicator.negative:before {
  content: "\21a7";
}

.significance-indicator.neutral {
  display: none;
}

.community-views-html-visualisation {
  position: relative;
}

.community-views-html-visualisation .bar {
  width: 100%;
  margin-top: 2px;
  height: calc(var(--bar_height) * 1px);
  background: var(--chart_bar_background);
}

.community-views-html-visualisation .bar.mini {
  height: calc(var(--mini_bar_height) * 1px);
  margin-top: 2px;
}

.community-views-html-visualisation .bar.mini .point,
.community-views-html-visualisation .bar.mini .label,
.community-views-html-visualisation .bar.mini .stddev-bar {
  height: calc(var(--mini_bar_height) * 1px);
}

.community-views-html-visualisation .bar.mini .label {
  line-height: calc(var(--mini_bar_height) * 1px);
}

.community-views-html-visualisation .bar.mini .mean-line {
  height: calc((var(--mini_bar_height) + 2) * 1px);
}

.community-views-html-visualisation .bar.mini .point {
  background: var(--chart_mini_bar_color);
}

.community-views-html-visualisation .bar.mini .point.alternate {
  background: var(--chart_mini_bar_color_alternate);
}

.community-views-html-visualisation .bar.mini .point.historical.alternate {
  background: var(--chart_mini_bar_color_historical_alternate);
}

.community-views-html-visualisation .bar.mini .point.historical {
  background: var(--chart_mini_bar_color_historical);
}

.community-views-html-visualisation .bar .point {
  position: absolute;
  width: 100%;
  height: calc(var(--bar_height) * 1px);
  background: var(--chart_bar_color);
}

.community-views-html-visualisation .bar .point.alternate {
  background: var(--chart_bar_color_alternate);
}

.community-views-html-visualisation .bar .point.historical {
  background: var(--chart_bar_color_historical);
}

.community-views-html-visualisation .bar .mean-line {
  position: absolute;
  display: inline-block;
  z-index: 10;
  top: -2px;
  height: calc((var(--bar_height) + 4) * 1px);
  width: 1px;
  border-right: 1px dashed var(--border-dark);
}

.community-views-html-visualisation .bar .stddev-bar {
  position: absolute;
  background-color: transparent;
  background-size: 4px 4px;
  z-index: 9;
  height: calc(var(--bar_height) * 1px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 4 4' style='enable-background:new 0 0 4 4;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23e3c0d1;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='4,3.3 3.3,4 4,4 '/%3E%3Cpolygon class='st0' points='4,0 3.3,0 0,3.3 0,4 0.7,4 4,0.7 '/%3E%3Cpolygon class='st0' points='0,0 0,0.7 0.7,0 '/%3E%3C/svg%3E%0A");
}

.community-views-html-visualisation .bar .significance-indicator {
  position: absolute;
  right: -10px;
  top: 10px;
}

.community-views-html-visualisation .bar .significance-indicator:before {
  position: relative;
  top: calc(var(--bar_height) * -0.5px + 1px);
}

.community-views-html-visualisation .bar.mini .significance-indicator {
  top: calc(var(--mini_bar_height) * 0.5px + 1px);
}

.community-views-html-visualisation .bar .label {
  font-size: 70%;
  font-weight: bolder;
  position: absolute;
  display: inline-block;
  z-index: 11;
  line-height: calc(var(--bar_height) * 1px);
  color: var(--text-nav-dark);
}

.community-views-html-visualisation .bar .label.right {
  text-align: right;
  right: 3px;
}

.community-views-html-visualisation .bar .label.left {
  text-align: left;
  left: 3px;
}

.community-views-html-visualisation .bar .label.center {
  text-align: center;
}

.community-views-html-visualisation .bar.alternate .label {
  font-weight: 300;
}

.community-views-html-visualisation .axis {
  width: 100%;
  height: calc(var(--bar_height) * 1px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 60%;
}

.community-views-html-visualisation .axis .label {
  display: inline-block;
}

.community-views-html-visualisation .axis .label.right {
  text-align: right;
  right: 3px;
}

.community-views-html-visualisation .axis .label.left {
  text-align: left;
  left: 3px;
}

.community-views-html-visualisation .axis .label.center {
  text-align: center;
}

.community-views-html-visualisation .axis .label.min {
  float: left;
  text-align: left;
}

.community-views-html-visualisation .axis .label.max {
  float: right;
  text-align: right;
}

.community-views-html-visualisation .axis .label .significance-indicator {
  display: inline-block;
  font-size: 120%;
  height: calc(var(--bar_height) * 0.4px);
  width: calc(var(--bar_height) * 0.4px);
}

.community-views-html-visualisation.stacked-bar .bar .point {
  position: relative;
  float: left;
}

.community-views-html-visualisation.stacked-bar .bar .point:not(:last-child) {
  border-right: 1px solid var(--chart_bar_background);
}

.community-views-html-visualisation.stacked-bar .bar .point .label {
  color: var(--white);
  width: 100%;
}

.community-views-html-visualisation.stacked-bar .bar.mini .point .label {
  font-weight: 300;
}

.community-views-html-visualisation.stacked-bar .label {
  color: var(--stacked-label);
  display: inline-block;
  position: relative;
  float: left;
  width: 100%;
  white-space: nowrap;
}

.map-holder .selector {
  margin-bottom: 3px;
}

.map-holder .MapChart {
  width: 100%;
  height: 600px;
}

.legend {
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  font-weight: normal;
  font-size: 75%;
}

.legend svg {
  font-size: 75%;
}

.legend .legend-item {
  width: 8px;
  height: 8px;
  display: inline-block;
  background: var(--chart_bar_color);
  margin-left: 0.1rem;
  margin-right: 0.2rem;
}

.legend .legend-item.secondary {
  background: var(--secondary_bar_color);
}

.no-results.small {
  font-size: 70%;
  font-weight: 300;
}

table.comments {
  thead {
    font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  }
  td {
    font-size: 90%;
  }
}
body.pdf .community-views-html-visualisation .label {
  color: var(--stacked-label);
}
.resources.card {
  /* border-bottom: 2px solid var(--id-magenta); */
  border-radius: 0;
  border: none;
  padding: 0;
  margin-bottom: 1rem;
}

.resources.card .header {
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  cursor: pointer;
  background: var(--id-magenta);
  color: var(--white);
  padding: 0.2rem 0.5rem;
}

.resources.card .header:hover {
  background: var(--id-magenta-hover);
}

.resources.card .header a {
  color: var(--white);
  text-decoration: none;
}

.resources.card .header a:active,
.resources.card .header a:hover {
  color: var(--white);
  text-decoration: underline;
}

.resources.card .body {
  padding: 0.2rem 0.5rem;
  background: var(--medium-gray);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

.resources.card .body a {
  color: var(--text-dark);
  text-decoration: none !important;
}

.resources.card .body a:hover {
  color: var(--id-magenta);
}
/* Custom Scrollbar  */
::-webkit-scrollbar {
  background: transparent;
  overflow: visible;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
/*  border: solid red;*/
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.8);
}

::-webkit-scrollbar-thumb:horizontal {
  border-width: 4px 6px;
  min-width: 40px;
}

::-webkit-scrollbar-thumb:vertical {
  border-width: 6px 4px;
  min-height: 40px;
}

::-webkit-scrollbar-track-piece {
/*  background-color: red;*/
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #bebebe;
/*  background-color: green;*/
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ADADAD;
}
/* End custom Scrollbar  */
.self-shotable {
    display: none;
}

.shotable .self-shotable {
    display: block;
}

.shotable .self-shotable:hover {
    cursor: pointer;
}

.shotable.s_shutter .s_force-bg {
    background: var(--white) !important;
}

.shotable.s_shutter:hover {
    filter: grayscale(80%);
    cursor: url(/assets/camera_32-b575fe06f46a4a16e3ac1d54d05ce00590b2230052aab931dd1d6671b5f47d74.png) 16 16, pointer;
}

.shotable.s_shutter_down {
    filter: none !important;
    transition: 0s !important;
}

.shotable_flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    opacity: 0;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    animation-name: flash;
}

@keyframes flash {
  0%   {opacity: 0;}
  50%  {opacity: 1;}
  100% {opacity: 0;}
}

.shotable_notice {
    position: fixed;
    z-index: 900;
    border-radius: 5px;
    bottom: 20px;
    right: 20px;
    background: var(--white);
    padding: 10px;
    border: 2px solid var(--id-magenta);
    font-size: 14px;
    font-weight: bolder;
    color: var(--id-magenta);
}
.actionmenu {
  position: absolute;
  z-index: 100;
  right: 0px;
  top: 0px;
}

.actionmenu .trigger {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: var(--text-dark);
}

.actionmenu .trigger:hover {
  cursor: pointer;
  color: var(--id-magenta);
  background-color: var(--light-pink) !important;
}

.actionmenu .dropdown-menu {
  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  border: none;
}

.actionmenu .dropdown-item {
  font-family: "Roboto";
  color: var(--text-muted);
  font-size: 90%;
}

.actionmenu .dropdown-item .menu-icon {
  margin-right: 10px;
}

.actionmenu .dropdown-item:active,
.actionmenu .dropdown-item:hover {
  pointer: cursor;
  background: var(--bg-light);
  color: var(--text-muted);
}

.btn-featured-comment {
  color: var(--border-color);
}

.btn-featured-comment:hover,
.btn-featured-comment:active {
  text-decoration: none;
  color: var(--id-magenta);
}
.waveable {
  display: inherit;
}
/* Place all the styles related to the Explorer controller here.
 * They will automatically be included in application.css.
 * You can use Sass (SCSS) here: https://sass-lang.com/
 */

body.explorer {
  height: 100%;
}

.explorer .query-components {
  min-height: 100vh;
  background: var(--white);
  /* padding:  20px 0px; */
}

.explorer .query-components .card {
  margin-bottom: 1em;
  background: var(--explorer-bg);
  padding: 0;
  border: none;
  border-radius: 3px;
  color: var(--white);
}

.explorer .query-components .card .card-footer {
  display: none;
}

.explorer .query-components .card .card-header {
  cursor: pointer;
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  padding: 2px;
  text-align: center;
  /* text-transform: uppercase; */
  font-weight: bolder;
  color: var(--id-magenta);
  border-radius: 3px;
}

.explorer .query-components .card .card-header .counter {
  /* display: inline-block; */
  display: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--id-magenta);
  width: 1.2em;
  height: 1.2em;
}

.explorer .query-components .card .card-header .counter:empty {
  display: none;
}

.explorer .query-components .card .card-content {
  padding-bottom: 0;
  display: none;
  font-size: 0.9em;
  color: var(--explorer-text);
}

.explorer .query-components .card .card-content .question-title {
  font-size: 0.9em;
}

.explorer .query-components .card:hover .card-header {
  background: var(--id-magenta);
  color: var(--white);
}

.explorer .query-components .card.active .card-header {
  /* border-radius: 1em 0 0 0; */
  border-radius: 3px 3px 0 0;
  background: var(--id-magenta);
  color: var(--white);
}

.explorer .query-components .card.active .card-content {
  display: block;
}

.explorer .query-components .card.active .helper {
  display: block;
  /* background: #; */
  color: var(--explorer-text);
  text-align: center;
  font-size: 0.8em;
}

.explorer .query-components .card #filter_holder,
.explorer .query-components .card #variable_holder {
  padding: 0.5em;
  overflow-x: hidden;
}

.explorer .query-components .card .filter_case_counter {
  color: var(--explorer-text);
  text-align: center;
  font-size: 0.8em;
}

.explorer .query-components .card .query-component {
  /* display: block; */
  transition: 0.3s;
  color: var(--white);
  /* &:before {
    content: "- ";
  } */
}

/* .explorer .query-components .card .query-component .remove {
  display: none;
  margin-left: 5px;
} */

/* .explorer .query-components .card .query-component:hover .remove,
.explorer .query-components .card .query-component.active .remove {
  color: #B21F67;
} */

#generate-button {
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  margin-top: 1em;
  /* border-radius: 1em !important;
  padding-left: 1em;
  padding-right: 1em; */
}

#generate-button.disabled,
#generate-button:disabled {
  display: none !important;
}

.query-builder {
  background: var(--light-gray);
  border-radius: 3px;
  overflow-x: auto;
  display: none;
}

.query-builder.active {
  display: flex;
}

.query-builder .column {
  height: 100%;
  display: inline-flex;
  color: var(--explorer-text);
}

.explorer .query-results {
  display: none;
}

.explorer .query-results.active {
  display: block;
}

.explorer .query-results .results-holder {
  width: 100%;
}

.explorer .query-results .filter-description {
  color: var(--border-dark);
  font-size: 0.9em;
  padding: 20px;
}

.explorer .query-results .filter-description .remove {
  display: none;
}

.explorer .query-results .filter-description li {
  padding: 0.5 0.5em;
  list-style: none;
}

.explorer .query-results .filter-description li:before {
  content: "- ";
}

.explorer .query-results .loader {
  display: none;
  margin: auto;
  width: 50%;
  color: var(--id-magenta);
}

.explorer .query-results .loader.active {
  display: block;
}

.explorer .badge {
  font-family: "AbelPro", "Helvetica", "Roboto", Arial, sans-serif;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.explorer .badge:hover {
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
}

.explorer .badge-pill {
  display: table;
  position: relative;
  border-radius: 12px;

  /* height: 30px; */
  max-width: 300px;

  margin-top: 5px;
  margin-bottom: 5px;
  padding: 8px;
  padding-right: 40px;
  border: none;

  text-align: left;

  color: var(--white);
  background: var(--badge-bg);

  white-space: nowrap; /*keep text on one line */
  overflow: hidden; /*prevent text from being shown outside the border */
  text-overflow: ellipsis; /*cut off text with an ellipsis*/
  font-weight: normal;
  cursor: pointer;

  transition: 0.3s;
}

.explorer .badge-pill.active,
.explorer .badge-pill:hover,
.explorer .badge-pill.selected {
  opacity: 1 !important;
  background-color: var(--id-magenta);
  color: white;
}

.explorer .badge-pill.active .action,
.explorer .badge-pill:hover .action,
.explorer .badge-pill.selected .action {
  background-color: var(--id-magenta);
}

.explorer .badge-pill.selected {
  background-color: var(--id-magenta);
}

.explorer .badge-pill.selected .action {
  background-color: var(--id-magenta);
}

.explorer .badge-pill.inactive {
  opacity: 0.6;
}

.explorer .badge-pill.selected .action.selected {
  display: block;
}

.explorer .badge-pill.selected .action.unselected {
  display: none;
}

.explorer .badge-pill .action {
  position: absolute;
  line-height: 1;
  font-size: 20px;
  vertical-align: middle;
  border-radius: 50%;
  top: 4px;
  right: 5px;
  height: 20px;
  width: 20px;
  background: var(--badge-bg);
}

.explorer .badge-pill .action.selected {
  display: none;
}

.selector_holder {
  padding: 5px;
  /* padding-top: 70px; */
  /* padding-bottom: 70px; */

  margin: auto 5px;
}

.card-resources {
  margin-top: 1em;
  background: var(--explorer-bg);
  padding: 0;
  border: none;
  border-radius: 3px;

  /* cursor: pointer; */
  color: var(--white);
}

.card-resources .card-header {
  font-family: abel;

  padding: 4px;
  text-align: center;
  color: var(--id-magenta);
  border-radius: 6px 6px 0 0;
}
