/* =========================
   PPI TERMINAL TOKENS
========================= */

:root {
  --ppi-green: #70ae40;
  --ppi-green-dark: #5f9f34;
  --ppi-deep-green: #609933;
  --ppi-green-hover: #48b92c;
  --ppi-text: #222;
  --ppi-muted: #666;
  --ppi-border: #ddd;
  --ppi-gray-border: #dfdfdf;
  --ppi-card-bg: #fdfdfd;
  --ppi-bg: #333;
  --ppi-panel: #f7f7f7;
  --ppi-white: #fff;
  --ppi-dark-bg: #1f1f1f;
  --ppi-black: #000;
  --ppi-dark-panel: #2b2b2b;
  --ppi-dark-border: #555;
  --ppi-dark-text: #e8e8e8;
  --ppi-dark-muted: #bdbdbd;
  --ppi-red-flag: #ff5f57;
  --ppi-radius: 8px;
  --ppi-control-height: 36px;
}

/* Fix z-index */
header {
  z-index:5;
}

/* UI boxes & elements */
.calc-ui {
   margin: 0 auto;
   padding: 65px 0;
}
.calc-ui .grid2.filters {
   display: grid;
   grid-template-columns: 0.6fr 0.6fr 0.8fr;
   gap: 16px;
   overflow: visible;
}
.buttons button {
   zoom:100%;
}
.calc-ui .grid2.filters select {
   width: calc(100% - 23px);
   height: 36px;
   padding: 0 10px;
   border: 1px solid #CCC;
   border-radius: 6px;
   background: var(--ppi-white);
   font-size: 14px;
}
.calc-ui .toggle button {
    background: #eee;
    border: none;
    padding: 6px;
    cursor: pointer;
}
.calc-ui #formCard button,
body.dark-theme div.functions button,
.chartActions button#downloadChart,
.chart-card .columns.panel.buttons button.chartButton,
button.themeToggle.terminalTipEdge.lightTheme,
button.themeToggle.terminalTipEdge.darkTheme {
    font-weight:300;  
}
button.themeToggle.terminalTipEdge.lightTheme, 
button.themeToggle.terminalTipEdge.darkTheme {
    height: 34px;
}
div#formCard.card.rightCorners {
    position: relative;
    z-index: 2;
    background: #f5f5f5;
    background: linear-gradient(to bottom, rgba(245, 245, 245, 0.65) 0%, rgb(255 255 255 / 100%) 100%);
    overflow: visible;
}
div#formCard.card.rightCorners.additional {
    background: linear-gradient(to bottom, rgb(255 255 255 / 65%) 0%, rgb(255 255 255 / 100%) 100%);
}

/* App title */
.titlebar.gradient.green {
    border-radius: 8px 8px 0 0;
    color: #fff;
    animation: deepOrangeanimatedGradient 12s ease infinite;
}
.gradient {
    background: linear-gradient(270deg, #619833, #73ca73, #70AD40, #568e28);
    background-size: 800% 800%;
    -webkit-animation: deepOrangeanimatedGradient 12s ease infinite;
    -moz-animation: deepOrangeanimatedGradient 12s ease infinite;
    animation: deepOrangeanimatedGradient 12s ease infinite;
}
.titlebar.gradient.green h1#title {
    margin: 0;
    padding: 10px 0 10px 20px;
    font-size: 16px;
    color: #fff;
}
@-webkit-keyframes deepOrangeanimatedGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes deepOrangeanimatedGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes deepOrangeanimatedGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
/* App title */

/* App boxes */
.calc-ui .card.rightCorners {
    border-radius: 0;
}
div#formCard.card.rightCorners.bottomPanel {
    position: relative;
    top: -1px;
    min-height: 46px;
    padding: 8px 16px;
    border-radius: 0;
    background: #fcfcfc;
}
.calc-ui .card.topCorners {
  border-radius: 0 0 8px 8px !important;
}
.card.rates:not(#marketOverviewCard) {
	position: relative;
	z-index: 1;
	min-height: 50vh;
	max-height: 6vh;
	margin: 0;
	padding: 0;
	border-radius: 0;
	overflow-y: scroll;
}
/* App boxes */

/* Search box */
input#searchForm {
  position: relative;
  z-index: 1;    
  width: 100%;
  max-width: 243px;
  height: 35px;
  margin-top: 0;
  padding: 0 20px 0 10px;
  border-radius: 6px;
  border: 1px solid #cecece;
  background-color: #fff;
  background-image: url('../img/svg/gray-search.svg');
  background-size: 28px 28px;
  background-position: 99.5% 3px;
  background-repeat: no-repeat;
  font-size: 14px;
  color: var(--ppi-black);
  opacity: 1;
}
input#searchForm:focus,
input#searchForm:target {
    background-color: #fff;
    border: 1px solid #444 !important;
    color:#666 !important;   
}
input#searchForm::placeholder{
    color:#666 !important;
    opacity:1 !important;
}
input#searchForm::placeholder{
    color: var(--ppi-text);
    opacity:1;
}
.calc-ui input#searchForm::placeholder,
.calc-ui input#definitionsSearch::placeholder,
.calc-ui input#terminalGlossarySearch::placeholder {
  color: #666 !important;
  opacity: 1 !important;
}
body.dark-theme .calc-ui input#searchForm::placeholder,
body.dark-theme .calc-ui input#definitionsSearch::placeholder,
body.dark-theme .calc-ui input#terminalGlossarySearch::placeholder {
  color: #bdbdbd !important;
  opacity: 1 !important;
}
body.dark-theme input#searchForm::placeholder{
    color:#bdbdbd;
    opacity:1;
}
/* Search box */
/* Level one */
.calc-ui .card.rightCorners .grid2 .toggle {
  border: none;
}
div#metricToggle {
  width: calc(100% - 2px);
  height: 36px;
  margin-top: 18px;
}
div#metricToggle button {
  width: 33%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}
body.dark-theme .searchOptions button:hover,
body.dark-theme .searchOptions button:target {
  background: var(--ppi-green-dark);
  border: 1px solid var(--ppi-green-dark);
  box-shadow: rgba(0, 0, 0, 0.5) inset 0px 2px 2px 0;
}
button.period:hover,
button.period:target,
button.period.selected {
  background-image: url('../img/svg/period.svg');
  background-size: 14px 14px;
  background-position: 6px 9px;
  background-repeat: no-repeat;
}
div#level1Toggle {
  max-width: 304px;
  height: 36px;
}
div#level1Toggle button {
  width: calc(50% - 1px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}
/* Level one */

/* Common functions */
section.functional {
  position: absolute;
  right: 5px;  
  display: inline-block;
  width: 440px;
  vertical-align: top;
}
.functions.common {
  display: inline-block;
  width: 140px;
  height: 80px;
  margin-right: 0;
  padding: 5px;
  border-radius:8px;
  background:var(--ppi-dark-text);
  border:1px solid var(--ppi-border);
  vertical-align: middle;  
}
.functions.common button,
.functions.common button.period span {
  padding-left: 12px;
  font-size: 13px !important;
  line-height: 13px;
  color: var(--ppi-card-bg);
}
.functions.common button.period {
  background-image: url('../img/svg/period.svg');
  background-size: 14px 14px;
  background-position: 6px 9px;
  background-repeat: no-repeat;
}
.functions.common span.subTitle,
.functions.secondary span.subTitle {
  display: none;
  margin: 5px 0 10px;
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  color: var(--ppi-dark-border);
  opacity: 0.8;
  text-align: center;
}
.functions.secondary span.subTitle {
  margin: 10px 0 4px 8px;
  padding: 0;
  color: var(--ppi-dark-border);
  opacity: 0.8;
  text-align: left;  
}
.functions.common button {
  display: block;
  width: 100%;
  height: 34px;
  margin-bottom: 6px;  
  border-radius: 8px;
  background: var(--ppi-muted);
  border: 1px solid var(--ppi-dark-border);
}
.functions.common button.exportReport {
  margin-top: 10px;
  padding-left: 15px;
  background-image: url('../img/svg/export.svg');
  background-size: 14px 14px;
  background-position: 6px 10px;
  background-repeat: no-repeat;
}
.functions .line {
  border: none;
}
.functions .line button {
  font-size:14px !important;
}
.functions.secondary {
  display: inline-block;
  min-width: 275px;
  width: calc(100% - 275px);
  height: 90px;
  padding-left: 1px;
  border-radius: 8px;
  background: var(--ppi-panel);
  border: 1px solid var(--ppi-border);
  vertical-align: top;
  overflow: hidden;
}
.functions.secondary .line {
  display: block;
  width: calc(100% - 10px);
  padding: 5px 5px 0;
  background: transparent;
}
.functions.secondary .line * {
  height: 34px;
  margin: 0;
  padding: 0 10px;
  vertical-align: top;
}
.functions.secondary .line button {
  display: inline-block;
  border: 1px solid var(--ppi-dark-muted);
  border-radius: 8px;
}
.functions.secondary .line.first button.functions,
.functions.secondary .line.first button.charts {
  margin-right:5px;
}
.functions.secondary .line.first button.cma,
.functions.secondary .line.second button.send {
  width:100px;
}
.functions.secondary .line.second {
  position: relative;
  margin-top: 5px;
}
.functions.secondary .line button.watchList {
  width: 155px;
} 
.functions .line button:hover,
.functions .line button:target {
  background-color: var(--ppi-green-dark);
  border: 1px solid green;
  color: var(--ppi-card-bg);
}
.functions.secondary .line button.watchList:hover *,
.functions.secondary .line button.watchList:target * {
  color:var(--ppi-dark-text);
}
.functions.secondary .line button.watchList:hover i,
.functions.secondary .line button.watchList:target i {
  background-color: var(--ppi-card-bg);  
  color: var(--ppi-green);
}
.functions.secondary .line button.watchList, 
.functions.secondary .line button.watchList span {
  padding-left: 5px;  
  text-align: left;
}
.functions.secondary .line button.watchList span {
  font-size: 14px;
  font-weight: 400;
  color: #555;
}
.functions.secondary .line button.watchList i {
  position: relative;
  top: 1px;
  left: 44px;
  display: inline-block;
  height: 18px;
  padding: 0 6px;
  background: var(--ppi-green-dark);
  border-radius: 100px;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: #fff;
}
.dark-theme .functions.secondary .line button.watchList i {
  background: #6cb53c;
  color: #fff;
}
button.watchList.selected i {
  background: var(--ppi-card-bg);
}
.functions.secondary .line.second button.send {
  position: absolute;
  right: 6px;
}

/* Common functions */

select#level2 {
    display: block;
    width: 100%;
    max-width: 297px;
    margin-right: 0;
}

body.dark-theme span.metricUnitNoWrap,
body.dark-theme div.functions.main div.searchOptions:hover span,
body.dark-theme div.functions.main div.searchOptions:target span {
    color: #fcfcfc;
}

div#formCard.card.rightCorners.additional {
    padding: 18px 20px;
}
div.functions {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    display: inline-block;
    align-items: end;
    overflow: visible;    
}
div.functions.additional{
    position:relative;
    z-index:1000;
    width:240px;
    min-height:36px;
    overflow:visible;
}
div.functions.supported {
    display: inline-block;  
    width: 200px;
    max-width: 200px;
    padding: 10px;
    align-items: end;
    text-align: left;
    background: var(--ppi-bg);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
div#notifications.panel,
div#settings.functions.supported{
    position:absolute;
    top:44px;
    right:0;
    z-index:1001;
}
div#settings.functions.supported h5 {
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 13px;
    color: var(--ppi-bg);  
    text-align: left;
    opacity: 1;      
}
body.dark-theme div#settings.functions.supported h5 {
    color: var(--ppi-border);
}
.terminalSwitches {
  margin-bottom: 6px;
}
body.dark-theme div#notifications.panel,
body.dark-theme div#settings.functions.supported {
    background-color: #212121;
    border: 1px solid #4a4a4a;
    color: #fff;
}
body.dark-theme div#notifications.panel h4,
body.dark-theme div.functions.supported h4 {
    color: #bdbdbd !important;
}
body.dark-theme div#notifications.panel ul li p {
    margin-bottom: 10px;
    border-radius: 8px;
    font-size: 12px;
    color: #cccccc;
}
div.functions.main div {
    display: block;
    width: 100%;
    height: 34px;
    margin-bottom: 20px;
    text-align: left;
}
div.grid2.filters.buttons {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

div.functions.buttons {
    display: inline-block;
    max-width: fit-content;
    align-items: unset;
    text-align: left;
}
div.functions.buttons button {
  margin-right: 20px;
}

div#notifications.panel{
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 1001;
    display: block;
    width: 220px;
    height: 140px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    vertical-align: top;    
}
div#settings.functions.supported{
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 1001;
    width: calc(100% - 20px);
    max-width: 240px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    vertical-align: top; 
    text-align: left;
}
div#formCard.card.rightCorners.additional{
    position:relative;
    z-index:1;
    overflow:visible;
}
.card.rates{
    z-index:1;
}
.calc-ui .grid2.filters,
div.grid2.filters.buttons{
    width: 100%;
    overflow:visible;
}
div#notifications.panel h4,
div.functions.supported h4 {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}
div#notifications.panel ul {
    margin: 0;
    padding: 0;
}
div#notifications.panel ul,
div#notifications.panel ul li {
    list-style: none;
}
div#notifications.panel ul li {
    background: rgb(169 169 169 / 5%);
    border-radius: 4px;
}
div#notifications.panel ul li date,
body.dark-theme div#notifications.panel ul li date {
    display: block;
    padding: 8px 0 0 10px;
    font-size: 11px;
}
div#notifications.panel ul li date {
    color: #d36506;
}
body.dark-theme div#notifications.panel ul li date {
    color: #FFC107;
}
div#notifications.panel ul li p {
    margin: 0;
    padding: 4px 10px;
    font-size: 13px;
}
.functions.additional button.notifications.active,
.functions.additional button.settings.active{
    background:linear-gradient(to bottom, var(--ppi-green) 0%, var(--ppi-green-dark) 100%);
    border-color:var(--ppi-green-dark);
    color: #fff;
}
body.dark-theme .functions.additional button.notifications.active,
body.dark-theme .functions.additional button.settings.active{
    background:linear-gradient(to bottom, var(--ppi-green) 0%, var(--ppi-green-dark) 100%);
    border-color:var(--ppi-green);
    color: #fff;
}
@media (min-width: 640px) and (max-width: 999px) {
    .columns.panel.buttons.chartTabs {
        text-align: left;
    }
}
div.urls.supported {
    position: relative;
    right: 0;
    float: right;
    display: inline-block;
    width: fit-content;
    text-align: right;
}
div.urls.supported p {
    display: inline-block;  
    width:fit-content;
}
div.urls.supported p {
    width: fit-content;
    display: inline-block;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px !important;
    color: #666;
    text-align: right;
}
div.urls.supported p.info {
    padding-left: 5px;
}
div.urls.supported p.scheme {
    padding-left: 30px;
}
div.urls.supported p a,
div.forecastsNotice .contentBlock p .contextURL {
  color: #666;
  text-decoration: none;
  border-bottom: 1px dotted #666;
}
div.urls.supported p a:hover,
div.urls.supported p a:target,
div.forecastsNotice .contentBlock p .contextURL:hover,
div.forecastsNotice .contentBlock p .contextURL:target {
  color: #3399CC;
  text-decoration: none;
  border-bottom: 1px dotted #3399CC;
}
.chart-card.headerLine {
    padding: 0 0 0 21px;  
    background: linear-gradient(to right, rgba(244, 244, 244, 1) 0%, rgba(239, 239, 239, 1) 29%, rgba(247, 247, 247, 1) 51%, rgba(239, 239, 239, 1) 72%, rgb(244 244 244) 100%);
    border-radius: 0;
    font-weight: 400;
    text-align: left;
}
.chart-card.headerLine h3 {
    margin: 0;
    padding: 12px 0 10px;
    font-size: 16px;
    font-weight: 400;
}
.dark-theme .functions button:not(#searchSettingsToggle):hover,
.dark-theme .functions button:not(#searchSettingsToggle):target,
.dark-theme .functions.main .searchSettingsActions button:hover,
.dark-theme .functions.main .searchSettingsActions button:target,
.chart-card .columns.panel.buttons button.chartButton:hover,
.chart-card .columns.panel.buttons button.chartButton:target,
.chart-card .columns.panel.buttons button.chartButton:hover span,
.chart-card .columns.panel.buttons button.chartButton:target span,
.functions.common button:hover,
.functions.common button:target {
  background-color: var(--ppi-green-dark);
  color: #fff;
  text-shadow: none;
}
body .functions button.searchOption:hover,
body .functions button.searchOption:target,
body:not(.dark-theme) .functions button.searchOption:hover span,
body:not(.dark-theme) .functions button.searchOption:target span,
body .functions button.searchOption.active:hover,
body .functions button.searchOption.active:target,
.dark-theme button#forecastsNoticeConfirm:hover,
.dark-theme button#forecastsNoticeConfirm:target {
  background-color: var(--ppi-green-dark) !important;
  color: #fff !important;
}
body:not(.dark-theme) .functions button.searchOption.active:hover,
body:not(.dark-theme) .functions button.searchOption.active:target {
  color: var(--ppi-dark-panel) !important;
}

body .functions button.searchOption.active:hover span,
body .functions button.searchOption.active:target span {
    background-color: transparent !important;
    color: #111 !important;
}
body.dark-theme .colorTheme button:hover,
body.dark-theme .colorTheme button:target,
body.dark-theme .searchSettingsActions button:hover,
body.dark-theme .searchSettingsActions button:target,
.functions.common button:hover,
.functions.common button:target,
.dark-theme button#forecastsNoticeConfirm:hover,
.dark-theme button#forecastsNoticeConfirm:target {
  border: 1px solid var(--ppi-green-dark) !important;
}
body:not(.dark-theme) .functions div#metricToggle button.active:hover,
body:not(.dark-theme) .functions div#metricToggle button.active:target {
  background: #9ecc7a;
  border-color: #9ecc7a;
}
body.dark-theme .functions button.searchOption:hover span,
.chart-card .columns.panel.buttons button.chartButton.active:hover span,
.chart-card .columns.panel.buttons button.chartButton.active:target span {
  background: none;
}

button[data-val=commercial],
button[data-val=rent] {
    border-radius: 8px 0 0 8px;
}
button[data-val=sales] {
    border-radius: 0;
}
button[data-val=cap],
button[data-val=residential] {
    border-radius: 0 8px 8px 0;
}

.listingCount{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    width: auto;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 100px;
    background: #f1f1f1;
    border: 1px solid #cacaca;
    color: #727272;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
}

body.dark-theme .listingCount{
    background: #313131;
    border-color: #6e6e6e;
    color: #b3b3b3;
}

@media (min-width: 551px) {
  div#notifications.panel {
    width: 100%;
    max-width: 480px;
  }
  .terminalSwitches{
    display:flex;
    align-items:center;
    gap:12px;
  }
}

.calc-ui #formCard div label.unitSwitch {
    width: 92px;
}

.unitSwitch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.unitSwitch input {
  display: none;
}

.unitSwitch .slider {
  width: 78px;
  height: 30px;
  border-radius: 30px;
  background: #e5e7eb;
  position: relative;
  transition: 0.2s;
}

.unitSwitch .slider:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--ppi-bg);
  transition: 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.unitSwitch input:checked + .slider:before {
  transform: translateX(48px);
}

.unitSwitch .labels {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  color: #111827;
}

body.dark-theme .unitSwitch .slider {
  background: #3a3a3a;
}

body.dark-theme .unitSwitch .labels {
  color: #f9fafb;
}

.calc-ui .currencySwitch{
  position:relative;
  display:flex;
  align-items:center;
  width:92px;
  height:34px;
  cursor:pointer;
  user-select:none;
}

.calc-ui label.currencySwitch.chartsPrecisionSwitch {
    width: 170px;
}


.calc-ui .currencySwitch input{
  display:none;
}

.calc-ui .currencySwitch .slider{
  position:absolute;
  inset:0;
  background:#ebebeb;
  border-radius:999px;
  transition:.25s;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.08);
}

.calc-ui .currencySwitch .slider:before{
  content:'';
  position:absolute;
  width:42px;
  height:28px;
  left:3px;
  top:3px;
  border-radius:100px;
  background: #639e34;
  transition:.25s;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.calc-ui label.currencySwitch.chartsPrecisionSwitch .slider:before {
    content: '';
    position: absolute;
    width: 76px;
    height: 28px;
    left: 3px;
    top: 3px;
    border-radius: 100px;
    background: #639e34;
    transition: .25s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.calc-ui .currencySwitch.chartsPrecisionSwitch input:checked + .slider:before {
    transform: translateX(80px);
	width: 88px;
}

.calc-ui .currencySwitch .labels{
  position:relative;
  top: 0;
  width: 70px;  
  z-index:2;
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 12px;
  font-size:12px;
  font-weight:600;
  color:#666;
}

.calc-ui .currencySwitch .labels span{
    transition: .2s;
    font-size: 14px;
}

.currencySwitch input:not(:checked) ~ .labels span:first-child{
    color: #fff;
}

.currencySwitch input:checked ~ .labels span:last-child{
    color: #fff;
    position: relative;
    left: 2px;  
}

/* UNIT SWITCH: SQ.FT / SQ.M */

.unitSwitch{
  position:relative;
  display:flex;
  align-items:center;
  width:126px;
  height:34px;
  cursor:pointer;
  user-select:none;
}

.unitSwitch input{
  display:none;
}

.unitSwitch .slider{
    position: absolute;
    inset: 0;
    width: 92px;
    height: 34px;
    background: #ebebeb;
    border-radius: 999px;
    transition: .25s;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

.unitSwitch .slider:before{
    content: '';
    position: absolute;
    width: 45px;
    height: 28px;
    left: 3px;
    top: 3px;
    border-radius: 100px;
    background: #649f34;
    transition: .25s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.unitSwitch input:checked + .slider:before{
    transform: translateX(44px);
    width: 42px;
}

.unitSwitch .labels{
    position: relative;
    z-index: 2;
    width: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 9px;
    font-weight: 600;
    color: #666;
}

.unitSwitch .labels span{
    position: relative;
    top: 11px;
    left: 2px;
    transition: .2s;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.unitSwitch input:not(:checked) ~ .labels span:first-child{
  color: #fff;
}

.unitSwitch input:checked ~ .labels span:last-child{
  color: #fff;
}

button#copyTable,
button#requestJSONContact {
    display: inline-block;
    width: fit-content;
    margin-right: 13px;
}

.api-banner{
  margin-top:16px;
  padding:16px;
  border:1px solid #21314a;
  border-radius:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#10182b;
}

.api-banner b{
  color:#7bf7c7;
}

.api-banner .btn{
  background:#5dd0ff;
  color:#0b1220;
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
}
.bad { 
  background: rgba(255,0,0,0.2); 
}
.outlier { 
  background: rgba(255,165,0,0.2); 
}
.empty { 
  color: #777; 
}
.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.calc-ui button,
.calc-ui button#copyTableBtn,
.calc-ui button#copyAllBtn,
.buttons button#requestJSONContact {
    height: 36px;
    margin: 0;
    padding: 8px 16px;
    line-height: 16px;
    background: #ebebeb;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 400;
}

div.functions button,
.chartTabs button.chartButton,
.buttons button#requestJSONContact,
button#forecastsNoticeConfirm,
.calc-ui .forecastsRecommendationBody .forecastsRecommendationActions button.nav,
.chartsActions button,
.chartsRecommendationActions button {
    background: linear-gradient(to bottom, rgb(242 242 242) 0%, rgb(226 226 226) 100%);
    border: 1px solid #ddd;
    color: var(--ppi-black);  
    text-shadow: none;
    opacity: 1;
}
.dark-theme button#forecastsNoticeConfirm,
.dark-theme button#chartsNoticeConfirm,
.dark-theme button#cmaNoticeConfirm {
    background: linear-gradient(to bottom, #3f3f3f 0%, #303030 100%);
    border: 1px solid rgb(142 142 142 / 50%);
    color: #fff;
}
.buttons button#requestJSONContact {
    font-weight: 300;
}
.functions.secondary .line button:hover,
button#requestJSONContact:hover,
.calc-ui #formCard button.send:hover,
button#forecastsNoticeConfirm:hover,
.calc-ui .forecastsRecommendationBody .forecastsRecommendationActions button.nav:hover,
div.chartsActions button:hover,
.dark-theme button#chartsNoticeConfirm:hover,
.chartsRecommendationActions button:hover,
.dark-theme button#cmaNoticeConfirm:hover {
  background: var(--ppi-green-dark);
  border: 1px solid var(--ppi-green-dark);
  color: var(--ppi-card-bg);
}
.calc-ui #formCard button.send:hover * {
  color: var(--ppi-card-bg);
}

.growth-up{
  color:var(--ppi-deep-green);
  font-size:12px;
  margin-left:4px;
  font-weight:bold;
}

.growth-down{
  color:var(--ppi-red-flag);
  font-size:12px;
  margin-left:4px;
  font-weight:bold;
}

.growth-flat{
  color:#999;
  font-size:12px;
  margin-left:4px;
  font-weight:bold;
}

#capacityChart{
  display: block;
  width: 100%;
  height: 1000px;
}
div.card.topCorners.chart {
  height:500px;
}
.bar-cell{
  min-width:180px;
}

.bar-wrap{
  position:relative;
  height:22px;
  background:#172033;
  border-radius:6px;
  overflow:hidden;
}

.bar-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  background:#4caf51;
  opacity:0.9;
}

.bar-label{
  position:relative;
  z-index:2;
  padding:0 8px;
  line-height:22px;
  color:white;
  font-size:13px;
  white-space:nowrap;
}

.charts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}

.card.topCorners.charts .chart {
  display: block;
  width: 100%;
  height: 100%;
  background:var(--ppi-bg);
  border:1px solid #a3a3a3;
  border-radius:12px;
  padding:16px;
  min-height:320px;
}

.chart{
  position:relative;
  height:180px;
  padding:16px;
  background:#ffffff;
  border:1px solid #dcdcdc;
  border-radius:12px;
  overflow:hidden;
}

.chart canvas{
  width:100% !important;
  height:140px !important;
}

.chart-card{
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  margin-top: -2px;
  padding: 24px;
  background: var(--ppi-bg);
  border-radius: 0 0 8px 8px;
  border: 1px solid #e6e9ef;
  border-top: none;
}

.chart-card .left{
  min-width:0;
}

.chart-card .right{
  display:flex;
  align-items:flex-start;
  padding-top:3px;
}

.chart-card .box h3{
  margin:0 0 18px;
  font-size:18px;
  color:#111;
}

.chart-card ul{
  list-style:none;
  padding:0;
  margin:0;
}

.chart-card li{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:14px;

  color:#222;
  font-size:15px;
}

.chart-card i{
  width:12px;
  height:12px;
  border-radius:50%;
  display:block;
}

.chart-card i.green{
  background:#4caf51;
}

.chart-card i.orange{
  background:#ff9800;
}

.chart-card i.blue{
  background:#2196f3;
}

.metric-subtitle{
  margin-bottom: 10px;
  color: #000000;
  font-size: 13px;
  font-weight: 500;
}
.box li i.gray {
  background:#9e9e9e;
}
.chart-card li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.chart-card li span {
  color: #222;
}
.chart-card li span,  
#trendStatus .trendLine span {
  font-size: 14px;
}
.trendStatus .positive {
  color: green;
}
.trendStatus .negative {
  color: #bd403a;
}
.trendStatus .neutral {
  color: #5b5b5b;
}
.apexcharts-legend.apexcharts-align-center.apx-legend-position-bottom {
  top: 280px !important;
  max-width: calc(100% - 30px);
  margin: 0 auto;
  padding: 4px 0;
  background: #f7f7f7;
  border-radius: 100px;
  zoom: 100%;
}
.apexcharts-tooltip,
.apexcharts-tooltip *{
  text-align:left !important;
}
.apexcharts-tooltip-title{
  text-align:left !important;
}
.apexcharts-tooltip-series-group{
  justify-content:flex-start !important;
}
.chartTitle {
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-size: 15px;
  font-weight: 400;
  color: #444;
  text-align: left;
}
.chart-card .box{
  width:100%;
}
.chartActions{
  display:flex;
  justify-content:left;
  margin-top:15px;
}
.downloadChart{
  display: block;
  margin: 2px auto 12px 0;
  padding: 8px 16px;
  background: #ebebeb;
  border: none;
  border-radius: 6px;
  border: none;
  color: #4c4c4c;
  font-weight: 300;
  cursor: pointer;
}
.downloadChart i {
  padding:3px 8px;
  background:var(--ppi-green);  
  border-radius:6px;
  font-style:normal;  
}
.chartExportFooter {
  margin-top:10px;
  padding-bottom:4px;
  text-align:center;
  font-size:10px !important;
  letter-spacing:0.3px;
  color: var(--ppi-text);
}
.chart-card {
  padding:20px;
  background: var(--ppi-card-bg);
}  
.chart-card .columns.panel {
  background:transparent !important;
}
  .chart-card .columns.panel {
    display: block;
    width: 100%;
    height: 40px;
    font-size: 15px;
  }
  .chart-card .columns.panel button.chartButton{
    background: linear-gradient(to bottom, rgb(242 242 242) 0%, rgb(226 226 226) 100%);
    border: 1px solid #ddd;
    line-height: 10px;    
  }
  .chart-card .columns.panel button.chartButton span {
    position: relative;
    top: -1.5px;
    vertical-align: top;
  }
  .chart-card .columns.panel button.chartButton.active{
    background:#70AD40;
    border:0;
    box-shadow:none;
    line-height: 10px;
    color:#fff !important;
    text-shadow: none;
  }

/* Property Market buttons by period */
.columns.panel.buttons {
  display: block;
  margin-bottom: 0;
  padding: 20px 20px 10px 20px;
  background: var(--ppi-card-bg);
  border-left: 1px solid var(--ppi-gray-border);
  border-right: 1px solid var(--ppi-gray-border);
}
.dark-theme .columns.panel.buttons {
  margin-bottom: 0;
  background: #232323;
  border-left: 1px solid #444;
  border-right: 1px solid #444;
}
.columns.panel.buttons button.chartButton {
  display: inline-block;
  min-width: 100px;
  height: 36px;
  margin-right: 10px;
  border-radius: 6px;
  font-weight:300;
}
#compareBtn{
  background:#ffffff;
  border:1px solid #d9d9d9;
}
.columns.panel.buttons button.chartButton.active {
  background: var(--ppi-green);
  border: 1px solid var(--ppi-green);
  color: var(--ppi-card-bg);
}
.social {
  position: absolute;
  z-index: 10;
}
.socialBlock.inTerminal {
  position: relative;
  top: 0;
  left: 30px;
  display: inline-block;
  width: 200px;
  height: auto;
  margin: 0;
}
.social ul li button {
  display: inline-block;
  min-width: 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  vertical-align: top;
}
.shareURL {
  opacity: 0.7;
}
.shareURL:hover,
.shareURL:target {
  opacity: 1;
}
.socialBlock.inTerminal .shareURL i,
.socialBlock.inTerminal .shareURL em {
  position: relative;    
  top: 0;
}
.socialBlock.inTerminal .shareURL em {
  display: inline-block;
  width: auto;
  height: 15px;
  margin-left: 5px;
  font-size: 14px !important;
  font-weight: 300;
  font-style: normal;
  line-height: 15px;  
  vertical-align: top;
  opacity: 0.8;
}
button.shareURL:hover,
button.shareURL:target {
  background: transparent;
}
.socialBlock.inTerminal .shareURL.active {
  height: 36px;
  padding: 4px 14px 4px 12px;
}
/* Property Market buttons by period */


div#trendStatus,
div.sidePanel {
  margin: 0 0 10px;
  padding: 10px;
  background: var(--ppi-bg);
  border: 1px solid #dfdfdf;
  border-radius: 8px;
  font-size: 14px;
}
  h3#chartRightTitle{
    margin: -2px 0 8px 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    color: #222;
    letter-spacing: -.015em;
  }
  .trendLine {
    display: block;
    margin-bottom: 0;
  }
  .trendLine:last-child {
    margin-bottom: 0;
  }
  .trendLine span.trendLabel {
    display: inline-block;
    width: 92px;
    color: var(--ppi-text);
  }
  .positive{
    color: var(--ppi-deep-green);
    font-weight:600;
  }

  .negative{
    color:#e45d5d;
    font-weight:600;
  }
  .chartTabs{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:18px;
  }
  

@media (min-width:551px) {
      .terminalTopActions button.helpIcon:before, .terminalTopActions button.helpIcon:hover:before, .terminalTopActions button.helpIcon:target:before, .terminalTopActions button.helpIcon.active:before {
        position: relative;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        border: none;
        background-image: url(../img/svg/terminal-ui.svg);
        background-repeat: no-repeat;
        background-size: 264px 98px;
        background-position: -126px -37px !important;
    }
    .terminalTopActions button.notifications:before, .terminalTopActions button.notifications:hover:before, .terminalTopActions button.notifications:target:before, .terminalTopActions button.notifications.active:before {
        position: relative;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        border: none;
        background-image: url('../img/svg/terminal-ui.svg');
        background-repeat: no-repeat;
        background-size: 260px 94px;
        background-position: -3px -35px;
    }
    .terminalTopActions button.settings:before, body .terminalTopActions button.settings:hover:before, body .terminalTopActions button.settings:target:before, body .terminalTopActions button.settings.active:before {
        position: relative;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 26px;
        height: 24px;
        border: none;
        background-image: url(../img/svg/terminal-ui.svg);
        background-repeat: no-repeat;
        background-size: 260px 94px;
        background-position: -61px -35px !important;
        opacity: 1;
    }
}

@media (max-width:550px) {
  .calc-ui {
    margin: 65px auto;
  }
  div#level1Toggle {
    max-width: fit-content;
  }
  .calc-ui #formCard div#level1Toggle.toggle.ru button[data-val=commercial] {
    min-width: 20px;
    width: 150px;
  }
  div#formCard.card.rightCorners {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: fit-content;
    margin-top: 44px;
    padding: 0;
  }
  .calc-ui #formCard button {
    font-size: 14px;
    line-height: 10px;
  }
  .calc-ui .toggle button,
  div#metricToggle button, 
  div#metricToggle button.active {
    border: none;
    padding: 6px 15px;
    cursor: pointer;
  }
  .calc-ui .toggle button,
  div#metricToggle button {
    background: #eee;
  }
  body div#level1Toggle {
    max-width: calc((100% / 3) * 2);
    height: 30px;
  }
  body div#level1Toggle button,
  body div#level1Toggle button.active    
  body div#metricToggle button,  
  body div#metricToggle button.active,
  div#metricToggle button {
    height: 30px;
  }
  body #level1Toggle button {
    min-width: 122px;
    width: 140px;
  }
  div.functions.additional div.level.first {
    position: fixed;
    top: 55px;
    left: calc(100% - 130px);
    right: 0;
    z-index: 10000;
    display: block !important;
    width: 136px;
    height: fit-content;
  }
  .calc-ui .currencySwitch .labels{
    position:relative;
    top: 6px;
  }
  div.functions.additional div.level.first button {   
    display: inline-block;
    opacity: 1;
  }
  body .terminalTopActions button.settings:before,
  body .terminalTopActions button.settings:hover:before,
  body .terminalTopActions button.settings:target:before,
  body .terminalTopActions button.settings.active:before {
    position: relative;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border: none;
    background-image: url('../img/svg/terminal-ui.svg');
    background-repeat: no-repeat;
    background-size: 260px 94px;
    background-position: -61px -35px !important;
    opacity: 1;
  }
  body.dark-theme .terminalTopActions button.notifications:before,
  body.dark-theme .terminalTopActions button.notifications:hover:before,
  body.dark-theme .terminalTopActions button.notifications:target:before,
  body.dark-theme .terminalTopActions button.notifications.active:before {
    position: relative;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    border: none;
    background-image: url('../img/svg/terminal-ui.svg');
    background-repeat: no-repeat;
    background-size: 204px 98px;
    background-position: 0 -36px;
  }
  body.dark-theme .terminalTopActions button.settings:before,
  body.dark-theme .terminalTopActions button.settings:hover:before,
  body.dark-theme .terminalTopActions button.settings:target:before,
  body.dark-theme .terminalTopActions button.settings.active:before {
    position: relative;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border: none;
    background-image: url('../img/svg/terminal-ui.svg');
    background-repeat: no-repeat;
    background-size: auto 86px;
    background-position: -52px -31px !important;
  }
  body.dark-theme div.functions.additional button.active:before {
    opacity:0.7;
  }
  .calc-ui .grid2.filters {
    display: block;
    width: 100%;
    min-width: 100%;
    min-height: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .choice.main {
    display: block;
    width: calc(100% - 40px);
    max-width: 100%;
    margin-bottom: -5px;
    padding: 20px 20px 0 20px;
  }
  div.card.rightCorners div.functions.main {
    display: block;
    min-width: 100%;
    max-width: 100%;
    margin: 20px 0 10px 0 !important;
    vertical-align: top;
  }
  select#level2 {
    display: block;
    width: calc(100% - 40px);
    max-width: 100%;
    margin: 0 20px 20px 20px;
  }
  div#formCard.card.rightCorners.filtersCollapsed div.grid2.filters {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  div.card.rightCorners.filtersCollapsed div.functions.main div,
  div.card.rightCorners.filtersCollapsed select#level2 {
    display: none;
  }  
  div.functions.main div.searchSettingsWrap {
    width: calc(100% - 40px);
    padding: 0 20px;
  }
  button.searchSettingsToggle:before {
    position: relative;
    top: -1px;
    right: 48px !important;
  }
  input#searchForm {
    width: 100%;
    max-width: calc(100% - 32px);
    height: 35px;
    margin-top: 0;
    padding: 0 20px 0 10px;
    border-radius: 6px;
    border: 1px solid #cecece;
    background-color: #ffffff !important;
    background-image: url(../img/svg/gray-search.svg);
    background-size: 28px 28px;
    background-position: 99.5% 3px;
    background-repeat: no-repeat;
    font-size: 14px;
    opacity: 1;
    filter: contrast(0.95);
    color: var(--ppi-black);
  }
  div.functions.supported {
    min-width: auto;
    width: auto;
    max-width: fit-content;
    padding-top: 10px;
    padding-left: 0;
    text-align: right;
    zoom: 100%;
  }
  div#formCard.card.rightCorners div.grid2.filters div.functions.supported {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }  
  div#formCard.card.rightCorners.bottomPanel p {
    width: 100%;
    display: block;
    margin: 5px;
    padding-bottom: 0;
    font-size: 14px;
    color: #666;
    text-align: left;
  }
  div#formCard.card.rightCorners.bottomPanel p.info {
    float: left;
    padding-left: 18px;
    background-image: url('../img/svg/info-sprite.svg');
    background-position: 0 10px;
    background-size: 12px auto;
    background-repeat: no-repeat;
  }
  div#formCard.card.rightCorners.bottomPanel p.scheme {
    float: left;
    padding: 0 20px;
  }
  div#formCard.card.rightCorners.bottomPanel {
    position: relative;
    top: -1px;
    min-height: 65px;
    padding: 8px 16px;
    border-radius: 0;
    background: #fcfcfc;
  }
  div#formCard.card.rightCorners div.grid2.filters {
    display: inline-block;
    max-width: 220px;
    min-height: fit-content;
    height: fit-content;
  }
  div#formCard.card.rightCorners div.grid2.filters div.functions {
    display: block;
    margin: 0;
  }
  div#formCard.card.rightCorners.filtersCollapsed div.grid2.filters div.functions {
    height: 0;
    padding:0;
  }
  div#formCard.card.rightCorners div.grid2.filters div.functions.additional {
    position: fixed;
    top: 52px;
    right: 0;
    z-index: 3;
    display: block;
    width: 180px;
    margin: 0;
    border: none;
  }
  body div#formCard.card.rightCorners.additional {
    display: block;
    height: 80px;
    min-height: 80px;
    padding: 15px;
  }
  div.urls.supported {
    position: relative;
    right: 0;
    display: block;
    width: 100%;
    padding: 15px 0 0 0;
    text-align: left;
  }
  div.urls.supported p {
    display:inline-block;
    width:fit-content;    
  }
  div.urls.supported p, 
  div.urls.supported p a,  
  body.dark-theme div.urls.supported p, 
  body.dark-theme div.urls.supported p a {
    padding-left: 0;
  }
  div.urls.supported p.scheme,
  div.urls.supported p, 
  div.urls.supported p a {
    margin-bottom: 0;
    padding-bottom: 0;
    padding-left: 0;
    text-align: left;
  }
  div.chart-card.headerLine {
    width: 100%;
  }
  div#formCard.card.rightCorners div.grid2.filters.buttons,
  div#formCard.card.rightCorners div.grid2.filters div.functions.buttons {
      display: block;
      min-width: 100% !important;
      width: 100% !important;
      max-width: 100% !important;
  }
  .chart-card .column, .chart-card .column div#chart {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .card.rates {
    width: 100%;
  }
  .chart-card .column div#chart,
  .chart-card .column div#chart div#apexchartset98pd3v {
    min-width: calc(100% - 40px) !important;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
  }
  body.dark-theme .terminalNotice p,
  body.dark-theme .terminalNotice p b {
    font-size: 11px;
  }
  body.dark-theme .terminalNotice p {
    color: #bdbdbd;
    opacity: 0.7;
  }
  div#metricToggle {
    width: 100%;
  }
  div#metricToggle button,
  div#metricToggle button[data-val=cap] {
    width: 33%;
  }
}
div#chart {
    height: 306px;
    margin: 9px 0 0 0;
    padding: 0 20px 10px 20px;
    border: 1px solid #dfdfdf;
    border-radius: 8px;
}
div#chart,
div#trendStatus, 
div.sidePanel {
    background: var(--ppi-white);
}
.dark-theme div#chart,
.dark-theme div#trendStatus, 
.dark-theme div.sidePanel {
    background: var(--ppi-dark-bg);
}

/* =========================
   PPI TERMINAL DARK THEME
========================= */

body.dark-theme{
  background:#1f1f1f !important;
  color:#e8e8e8 !important;
}

body.dark-theme .calc-ui{
  color:#e8e8e8 !important;
}

body.dark-theme .calc-ui .card,
body.dark-theme .card,
body.dark-theme .chart-card,
body.dark-theme .chart-card .box,
body.dark-theme div#formCard.card.rightCorners,
body.dark-theme div#formCard.card.rightCorners.bottomPanel,
body.dark-theme .card.rates{
  background:#2b2b2b !important;
  border-color:#3a3a3a !important;
  color:#e8e8e8 !important;
}

body.dark-theme .titlebar.gradient.green{
  background:linear-gradient(270deg, #244d28, #317236, #3c873d, #244d28) !important;
  color:#ffffff !important;
}

body.dark-theme .titlebar.gradient.green h1#title{
    color: #fff !important;
    border-top-left-radius: 8px;
}

body.dark-theme input#searchForm,
body.dark-theme select#level2{
  background:#1f1f1f !important;
  color:#e8e8e8 !important;
  border-color:#555 !important;
}
body input#searchForm::placeholder,
body.dark-theme input#searchForm::placeholder{
  color:#9c9c9c !important;
}

body.dark-theme table#table.ppi,
body.dark-theme table#table.ppi thead,
body.dark-theme table#table.ppi tbody,
body.dark-theme table#table.ppi tr,
body.dark-theme table#table.ppi td,
body.dark-theme table#table.ppi th,
body.dark-theme #stockLocationSearch {
  background:#2b2b2b !important;
  color:#fff;
  border-color:#444 !important;
}
body.dark-theme input[type=text]#stockLocationSearch {
    background-image: url(../img/svg/gray-search.svg) !important;
    background-size: 28px 28px !important;
    background-position: 99.5% 5px !important;
    background-repeat: no-repeat !important;
}

body.dark-theme input[type=text]#stockLocationSearch:hover,
body.dark-theme input[type=text]#stockLocationSearch:target,
body.dark-theme input[type=text]#stockLocationSearch:focus {
  background-color: var(--ppi-card-bg) !important;
  background-image: url(../img/svg/gray-search.svg) !important;
  background-size: 28px 28px !important;
  background-position: 99.5% 5px !important;
  background-repeat: no-repeat !important;  
  border: 1px solid var(--ppi-border);
  color: var(--ppi-bg);
  transition-delay: 0.5s;
}

body.dark-theme .calc-ui table#table.ppi td:first-child {
  color: #fff !important;
}
body.dark-theme table#table.ppi td.trendCell.positive {
  color: #4CAF50;
}

body.dark-theme table#table.ppi tr:hover,
body.dark-theme .calc-ui tr:hover{
  background:#363636 !important;
}

.dark-theme .calc-ui th, 
.dark-theme .calc-ui td {
  padding: 10px;  
  border-bottom: 1px solid #3a3a3a;
  text-align: left;
  color: #ffffff;
}

body.dark-theme div.urls.supported p,
body.dark-theme div.urls.supported p a{
  border-color:#d8d8d8 !important;
  font-size: 14px ;
  color:#c7c7c7;  
  opacity: 0.9;  
}
body div.urls.supported p a,
body div.urls.supported p a,
body.dark-theme div.urls.supported p a,
body.dark-theme div.urls.supported p a {
  font-size: 13px !important;    
}
body.dark-theme div.urls.supported p a:hover,
body.dark-theme div.urls.supported p a:target {
  border-color:#8bd365 !important;  
  color:#8bd365 !important;  
}

body.dark-theme .chartTitle,
body.dark-theme h3#chartRightTitle,
body.dark-theme .metric-subtitle,
body.dark-theme .chart-card li,
body.dark-theme .trendLine span.trendLabel{
  color: #c0c0c0;
  border-color: #555;
  font-weight: 300;
}
body.dark-theme .chart-card h3 {
  margin: 0;
  padding: 0;
  color: #c0c0c0;
}

body.dark-theme .apexcharts-legend.apexcharts-align-center.apx-legend-position-bottom{
  background:#242424 !important;
  color:#e8e8e8 !important;
}

body.dark-theme .apexcharts-legend-text{
  padding-left: 18px;
  color: #cfcfcf !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
}

body.light-theme button.downloadChart {
    margin: 0 auto 0 0;
    background: #ebebeb;
    color: #4c4c4c;
}

body.dark-theme .downloadChart {
    margin: 0 auto 0 0;  
    background: #3a3a3a !important;
    color: #e8e8e8 !important;
}

body.dark-theme .socialBlock.inTerminal ul li button {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border: none !important;
}

body.light-theme .chart-card .columns.panel.buttons button span,
body.dark-theme .chart-card .columns.panel.buttons button span {
  font-size: 14px;
}

body.dark-theme .chart-card .columns.panel.buttons button.chartButton span {
  line-height: 1em;  
  color:#eeeeee !important;
}

body.dark-theme .chart-card .columns.panel.buttons button.chartButton,
body.dark-theme .calc-ui .toggle button,
body.dark-theme div.functions button:not(.period.selected) {
  background-color:#3a3a3a;
  color:#e8e8e8 !important;
}

body.dark-theme .currencySwitch .slider{
  background:#3a3a3a !important;
}

body.dark-theme .currencySwitch .labels span{
  color:#bdbdbd !important;
}

body.dark-theme .currencySwitch input:not(:checked) ~ .labels span:first-child,
body.dark-theme .currencySwitch input:checked ~ .labels span:last-child{
  color:#ffffff !important;
}

body.dark-theme button.shareURL:hover,
body.dark-theme button.shareURL:target{
  background:transparent !important;
}

body.dark-theme .positive{
  color:#60d465 !important;
}

body.dark-theme .negative{
  color:#ff7272 !important;
}

body.dark-theme .empty{
  color:#9c9c9c !important;
}

body.dark-theme .trendCell.limited{
  color:#e0e0e0 !important;
}

.colorTheme{
    display: block;
    align-items: center;
    justify-content: flex-end;
    margin: 10px calc(50% - 46px) 5px 0;
}
.colorTheme button {
    border-radius: 100px;
}

.themeToggle{
    position: relative;
    min-width: 92px;
    height: 36px;
    padding: 8px 14px 8px 14px;
    border: none;
    border-radius: 999px;
    background: #ebebeb;
    color: #444;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
}

.themeToggle:before{
    content: '';
    position: absolute;
    top: 17px;
    left: 5px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background-image: url('../img/svg/theme-sprite.svg');
    background-repeat: no-repeat;
    background-size: 100px 18px;
    background-position: -7px 2px;
}
body:not(.dart-theme) .themeToggle:hover:before,
body:not(.dart-theme) .themeToggle:target:before {
    background-size: 100px 18px;
    background-position: -32px 2px;
}

body.dark-theme div.functions .themeToggle:before,
body.dark-theme div.functions .themeToggle:hover:before,
body.dark-theme div.functions .themeToggle:target:before {
    content: '';
    position: absolute;
    top: 17px;
    left: 5px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background-image: url('../img/svg/theme-sprite.svg');
    background-repeat: no-repeat;
    background-size: 100px 18px;
    background-position: -76px 2px;
}
body.dark-theme div.functions button#themeToggle:hover,
body.dark-theme div.functions button#themeToggle:target,
body.dark-theme div.functions button#themeToggle.active:hover,
body.dark-theme div.functions button#themeToggle.active:target {
    border: 1px solid #5d9732 !important;
}

.calc-ui #formCard button.themeToggle.lightTheme,
.calc-ui #formCard button.themeToggle.darkTheme {
    width: 92px;
    height: 34px;
    padding-left: 26px;
    border-radius: 100px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    border: none;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 13px;
    letter-spacing: -0.02em;
    transition: .2s;
    color: var(--ppi-black);
    zoom: 100%;
    vertical-align: top;
}
.themeToggle.lightTheme{
  background:rgba(233, 233, 233, 0.7);
}
.colorTheme button.themeToggle.terminalTipEdge.lightTheme:hover,
.colorTheme button.themeToggle.terminalTipEdge.lightTheme:target,
.colorTheme button.themeToggle.terminalTipEdge.lightTheme:hover,
.colorTheme button.themeToggle.terminalTipEdge.lightTheme:target {
  background: var(--ppi-green);
  border: 1px solid var(--ppi-green);
  color: var(--ppi-white);  
}
body:not(.dark-theme) .colorTheme button.themeToggle.terminalTipEdge.lightTheme:hover span,
body:not(.dark-theme) .colorTheme button.themeToggle.terminalTipEdge.lightTheme:target span, 
.dark-theme .colorTheme button.themeToggle.terminalTipEdge.lightTheme:hover,
.dark-theme .colorTheme button.themeToggle.terminalTipEdge.lightTheme:target {
  color: var(--ppi-white);
}

.themeToggle.lightTheme:hover,
.themeToggle.lightTheme:target {
  background:#ebebeb;
}

.themeToggle.darkTheme{
  background:#3a3a3a;
  color:#e8e8e8;
}

.line{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 35px;    
    margin: 0 0 -1px 0;
    padding: 12px 14px 12px 18px;
    border-radius: 0;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, .06);
}

div#metricLine.line {
    height: 40px;
}

.line .metric{
    font-weight: 300;
    line-height: 1.35;
    color: var(--ppi-black);
    text-align: left;
}

.line .metric,
.metricUnitNoWrap,
.line .metricNotice {
    font-size: 13px;
}

.line .metricNotice{
    width: 52%;
    max-width: 52%;
    font-weight: 300;
    line-height: 1.35;
    color: #666;
    text-align: left;
}


@media (max-width: 550px) {
  .titlebar.gradient.green h1#title {
    font-size: 15px;
  }
  body.dark-theme div#notifications.panel,
  div#formCard.card.rightCorners div.grid2.filters div.functions.supported {
    position: fixed;
    top: 94px;
    left: auto;
    right: 10px;
    width: calc(100% - 45px);
    max-width: 200px;
    min-height: 130px;
    margin-bottom: 0;
    padding: 10px 12px;
    text-align: left;
  }
  .terminalTopActions button.notifications:before,
  .terminalTopActions button.notifications:hover:before,
  .terminalTopActions button.notifications:target:before,
  .terminalTopActions button.notifications.active:before {
    position: relative;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    border: none;
    background-image: url('../img/svg/terminal-ui.svg');
    background-repeat: no-repeat;
    background-size: 204px 98px !important;
    background-position: 0 -36px !important;
  }
  .terminalTopActions button.helpIcon:before,
  .terminalTopActions button.helpIcon:hover:before,
  .terminalTopActions button.helpIcon:target:before,
  .terminalTopActions button.helpIcon.active:before {
    position: relative;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border: none;
    background-image: url('../img/svg/terminal-ui.svg');
    background-repeat: no-repeat;
    background-size: auto 90px;
    background-position: -115px -32px !important;
  }
  div#notifications.panel {
    position: fixed;
    top: 94px;
    right: 10px;
    z-index: 1001;
    display: block;
    width: 300px;
    height: 140px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    vertical-align: top;
  }
  .terminalSwitches {
    display: block;
    width: 100%;
  }
  .calc-ui .currencySwitch .labels {
    width: 70px;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
  }
  .currencySwitch input:checked ~ .labels span:last-child {
    left: 0;
  }
  .terminalSwitches label {
    display: inline-block;
    vertical-align: top;    
  }
  .calc-ui .terminalSwitches label.currencySwitch,
  .calc-ui .terminalSwitches label.unitSwitch {
    display: inline-block;
    width: 92px;
    vertical-align: top;
  }
  .calc-ui .terminalSwitches label.currencySwitch {
    margin-right: 10px;
  }
  .terminalSwitches {
    max-width: 240px;
  }
  div#metricLine.line {
    min-height: 64px;
    height: 64px;
  }
}

body.dark-theme .line{
  background:#242424;
  border-color:rgba(255,255,255,.08);
}

body.dark-theme .line .metric{
  color:#f2f2f2;
}

body.dark-theme .line .metricNotice{
  color:#bdbdbd;
  text-align:left;   
}
body .line .metricNotice:before {
    content: "";
    position: relative;
    top: 1px;
    float: left;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 3px 20px;
    background-image: url('../img/svg/lamp-icon.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 0 -18px;
    border: none;
}
body.dark-theme .line .metricNotice:before {
    content: "";
    position: relative;
    top: 1px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    background-image: url('../img/svg/lamp-icon.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 0 0;
    border: none;
}

.line .metricNotice.positive{
  color:#43a146;
  text-align:left;   
}
body.dark-theme .line .metricNotice.positive {
  color:#4CAF50;
}

.line .metricNotice.negative{
  color:#df5e5e;
  text-align:left;   
}
body.dark-theme .metricNotice.negative{
  color:#ff6b6b;
}

.line .metricNotice.neutral{
  color: #000000;
  text-align:left;   
}

.rateCell{
  cursor:help;
}

.rateCell:hover{
  background:rgba(76,175,80,.12);
}

.forecastOnlyHint{
    color:#888;
    border-color:#ccc;
}

.forecastOnlyActive .forecastOnlyHint{
    color: #fff;
    background:#70ae40;
    border-color:#70ae40;
}

.metricUnitNoWrap{
    font-weight: 400;
    white-space: nowrap;
    color: green;
}
@media (min-width:768px) {
  .calc-ui {
    margin: 0 auto;
    padding: 65px 0 20px;
  }
}
@media(max-width:768px){
  .calc-ui {
    margin: 0 auto;
    padding: 50px 0 0 0;
    border-radius: 0;
  }
  .titlebar.gradient.green {
    position: fixed;
    z-index: 4;
    width: 100%;
    height: 45px;
    border-radius: 0;
  }
  .line{
    flex-direction:column;
    gap:6px;
  }
  .line .metricNotice{
    width:100%;
    max-width:100%;
    font-weight: 300;
    text-align:left;
  }
  input#searchForm {
    background-size: 24px 24px;
    background-position: 97.5% 6px;
  }
  .forecastOnlyHint{
    display:flex;
    width:fit-content;
    margin:4px auto 0;
  }
}
@media (max-width:768px) and (min-width:550px) {
  input#searchForm {
    width: 100%;
    max-width: 122px;
  }
}
/* =========================
   SOCIAL ICONS DARK FIX
========================= */

body.dark-theme .socialBlock.inTerminal button.shareURL{
  background:transparent !important;
  color:#e8e8e8 !important;
  opacity: 0.8;
}

body.dark-theme .socialBlock.inTerminal button.shareURL:hover,
body.dark-theme .socialBlock.inTerminal button.shareURL:target,
body.dark-theme .socialBlock.inTerminal button.shareURL.active{
  background:transparent !important;
  color:#ffffff !important;
}
body.dark-theme .socialBlock.inTerminal .shareURL {
    padding: 4px 14px 4px 12px;
}

body.dark-theme .socialBlock.inTerminal .shareURL i {
    filter: invert(1) brightness(1.2);
}

body.dark-theme .socialBlock.inTerminal .shareURL.active i {
    filter: invert(0) brightness(1.2);
}

body.dark-theme .socialBlock.inTerminal .shareURL em{
  color:#e8e8e8;
  opacity:1;
}
body.dark-theme .socialBlock.inTerminal .shareURL:hover em,
body.dark-theme .socialBlock.inTerminal .shareURL:target em {
  color: #f28422;
}

/* popup container */
body.dark-theme .socialBlock.inTerminal .social{
  background: var(--ppi-bg);
  border: 1px solid #6a6a6a;
}

/* buttons inside popup */
body.dark-theme .socialBlock.inTerminal .social ul li button {
  background-color: #a3a3a3 !important;
  box-shadow: none !important;
  border: none !important;
  filter: invert(1);
  opacity: 1 !important;    
}

body.dark-theme .socialBlock.inTerminal .social ul li * {
  opacity: 1 !important;
}

/* if social icons are background sprites on buttons */
body.dark-theme .socialBlock.inTerminal .social ul li button::before,
body.dark-theme .socialBlock.inTerminal .social ul li button i{
  filter:invert(1) brightness(1.3);
}

/* =========================
   SOCIAL ICONS — DARK THEME
========================= */

/* не даем общим dark button styles ломать social buttons */
body.dark-theme .socialBlock.inTerminal ul li button {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border: none !important;
}

/* WhatsApp */
body.dark-theme .socialBlock.inTerminal .social ul li button.whatsApp {
    background-image: url('https://smartindexes.com/img/svg/social_icons.svg') !important;
    background-size: 150px auto !important;
    background-position: 5px 4px !important;
    background-repeat: no-repeat !important;
    filter: invert(1) brightness(1.2);
}

body.dark-theme .socialBlock.inTerminal .social ul li button.whatsApp:hover,
body.dark-theme .socialBlock.inTerminal .social ul li button.whatsApp:target {
    background-position: 5px 4px !important;
    opacity: 0.9;
}

/* Telegram */
body.dark-theme .socialBlock.inTerminal .social ul li button.telegram {
    background-image: url('https://smartindexes.com/img/svg/social_icons.svg') !important;
    background-size: 150px auto !important;
    background-position: -78px 5px !important;
    background-repeat: no-repeat !important;
    filter: invert(1) brightness(1.2);
}

body.dark-theme .socialBlock.inTerminal .social ul li button.telegram:hover,
body.dark-theme .socialBlock.inTerminal .social ul li button.telegram:target {
    background-position: -78px 5px !important;
    opacity: 0.9;
}

/* X */
body.dark-theme .socialBlock.inTerminal .social ul li button.socialX {
    background-image: url('https://smartindexes.com/img/svg/social_icons.svg') !important;
    background-size: 150px auto !important;
    background-position: -36px 5px !important;
    background-repeat: no-repeat !important;
    filter: invert(1) brightness(1.2);
}

body.dark-theme .socialBlock.inTerminal .social ul li button.socialX:hover,
body.dark-theme .socialBlock.inTerminal .social ul li button.socialX:target {
    background-position: -36px 5px !important;
    opacity: 0.9;
}

/* Facebook */
body.dark-theme .socialBlock.inTerminal .social ul li button.facebook {
    background-image: url('https://smartindexes.com/img/svg/social_icons.svg') !important;
    background-size: 150px auto !important;
    background-position: -118px 5px !important;
    background-repeat: no-repeat !important;
    filter: invert(1) brightness(1.2);
}

body.dark-theme .socialBlock.inTerminal .social ul li button.facebook:hover,
body.dark-theme .socialBlock.inTerminal .social ul li button.facebook:target {
    background-position: -118px 5px !important;
    opacity: 0.9;
}

.chartExportFooter{
  margin-top: 18px;
  padding-bottom: 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.chartExportFooterLight{
  color: rgba(0, 0, 0, 0.45);
}

.chartExportFooterDark{
  color: rgba(255, 255, 255, 0.55);
}

.chartNoData{
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  font-weight: 300;
}

body:not(.dark-theme) .chartNoData{
  color: rgba(0,0,0,0.45);
}

.sortableMonth{
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    vertical-align:top;
}

.monthHeadLabel,
.forecastHeadLabel {
    display: inline-block;
    line-height: 1.25;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: #419745;
}

.dark-theme .calc-ui table thead th,
.dark-theme .calc-ui table thead th .monthHeadLabel, 
.dark-theme .calc-ui table thead th .forecastHeadLabel{
  color: #b5b5b5 !important;
}

.sortBadge{
    position:relative;  
    display:inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    margin-left: 8px;
    padding: 3px 6px 1px;
    border-radius: 6px;
    border: 1px solid #3f9d45;
    font-size: 9px;
    text-shadow: 0 1px 2px var(--ppi-white);
    font-weight: 700;
    line-height: 1;
    color: #3f9d45;
    /* background: #eaf5e9; */
    background: linear-gradient(to bottom, rgba(234, 245, 233, 1) 0%, rgb(188 232 182) 100%);
    vertical-align:top;
    zoom: 90%;
}
.sortBadge::after{
    content:attr(data-tooltip);

    position:absolute;
    left:50%;
    top:calc(100% + 9px);

    transform:translateX(-50%) translateY(-4px);

    min-width:max-content;
    max-width:220px;

    padding:7px 10px;
    border-radius:6px;

    background:var(--ppi-bg);
    color: var(--ppi-text);

    font-size:12px;
    font-weight:400;
    line-height:1.25;
    text-shadow:none;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    box-shadow:0 6px 18px rgba(0,0,0,.18);
    z-index:9999;

    transition:
        opacity .18s ease 4s,
        visibility 0s linear 4s,
        transform .18s ease 4s;
}

.sortBadge::before{
    content:'';

    position:absolute;
    left:50%;
    top:calc(100% + 4px);

    transform:translateX(-50%) translateY(-4px);

    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid var(--ppi-white);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    z-index:9999;

    transition:
        opacity .18s ease 4s,
        visibility 0s linear 4s,
        transform .18s ease 4s;
}

.sortBadge:hover::after,
.sortBadge:hover::before{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

.sortBadge:not(:hover)::after,
.sortBadge:not(:hover)::before{
    transition-delay:0s;
}
.sortBadge:hover,
.sortBadge:hover span,
.sortBadge:target,
.sortBadge:target span,
.sortBadge:hover .sortBadgeText {
    background: #65bd69;    
    color: #fcfcfc;
    opacity: 1;
    text-shadow: none;
}
.sortBadge:hover,
.sortBadge:target {
    border: 1px solid #3f9d45;  
}

.sortBadgeText {
    margin-right: -2px;  
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .04em;
    color: #5e605d;
}

.sortBadgeIcon {
    font-size: 11px;
    font-weight: 400;
    color: #5e605d;
}

div.enlargeButton{
    display:flex;
    justify-content:flex-end;
    padding:0;
    background:#fcfcfc;
    border-left:1px solid #e6e9ef;
    border-right:1px solid #e6e9ef;
}


.enlargeButton button.enlargeListing {
    display: block;
    width: 100%;
    height: 30px;
    padding: 4px 0;
    background: #fcfcfc;
    border: none;
    border-radius: 0;
    line-height: 10px;
    font-size: 13px;
    color: #737373;
    font-weight: 500;
    text-shadow: 0 1px 2px --ppi-bg;
}

.enlargeButton button.enlargeListing:hover,
.enlargeButton button.enlargeListing:target,
.enlargeButton button.enlargeListing.short:hover,
.enlargeButton button.enlargeListing.short:target{
    background:linear-gradient(to bottom, var(--ppi-green) 0%, var(--ppi-green-dark) 100%);
    border-color:var(--ppi-green-dark);
    color: #fff;
    text-shadow: none;
}

.enlargeButton button.enlargeListing.short{
    background: #ededed;
    border-color: none;
    color: --ppi-text;
}

.forecastTh{
    min-width:170px;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}

.forecastHeadWrap{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
}

.forecastHeadLabel{
    display:inline-block;
    white-space:nowrap;
}

.forecastOnlyHint{
    position: relative;
    top: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #3f9d45;
    background: linear-gradient(to bottom, rgba(234, 245, 233, 1) 0%, rgb(188 232 182) 100%);
    color: #5e605d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    text-shadow: 0 1px 2px --ppi-bg;
    cursor: pointer;
}
.forecastOnlyHint::after{
    content:attr(data-tooltip);

    position:absolute;
    left:50%;
    top:calc(100% + 9px);

    transform:translateX(-50%) translateY(-4px);

    min-width:max-content;
    max-width:220px;

    padding:7px 10px;

    background:var(--ppi-bg);
    color: var(--ppi-text);

    border:1px solid #ddd;
    border-radius:6px;

    font-size:12px;
    font-weight:400;
    line-height:1.25;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    box-shadow:0 6px 18px rgba(0,0,0,.18);

    z-index:9999;

    transition:
      opacity .18s ease 4s,
      visibility 0s linear 4s,
      transform .18s ease 4s;
}

.forecastOnlyHint::before{
    content:'';

    position:absolute;
    left:50%;
    top:calc(100% + 4px);

    transform:translateX(-50%) translateY(-4px);

    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid var(--ppi-bg);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    z-index:9999;

    transition:
      opacity .18s ease 4s,
      visibility 0s linear 4s,
      transform .18s ease 4s;
}

.forecastOnlyHint:hover::after,
.forecastOnlyHint:hover::before{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

div.calc-ui div.card.rates#volatilityCard,
div.calc-ui div.card.rates#forecastsCard,
div.calc-ui div.volatilityHeader.charts,
div.calc-ui div.card.rates.cmaCard {
    width: calc(100% - 36px);
    padding: 10px 18px;
}

.forecastOnlyActive .forecastOnlyHint,
.forecastTh:hover .forecastOnlyHint,
.forecastOnlyActive .forecastOnlyHint{
    background:#65bd69;
    color: #fff;
    text-shadow: none;
}

.forecastOnlyActive{
    background:rgba(112,174,64,.12) !important;
}

/* default table height */
.card.rates:not(#marketOverviewCard) {
    width: calc(100% - 38px);
    min-height: 381px;
    padding: 18px;
    overflow-y: auto;
    overflow-x: hidden;
}

.card.rates.cmaCard {
  min-height:381px;
  height:auto;
  overflow-y:visible;
  overflow-x:visible;
}

.calc-ui .card.rates.cmaCard.enlargeCMAresult {
  min-height: 920px !important;
  height:auto;
  max-height:none;
  overflow:visible;
}

.calc-ui .card.rates.watchlist,
.calc-ui .card.rates.chartsCard {
  width: 100% !important;
  padding: 0 !important;
}

.card.rates.chartsCard.enlargeChartsCard{
    min-height:680px !important;
    height:auto;
}

/* expanded table height */
body.listingExpanded .card.rates:not(#marketOverviewCard) {
    width: 100%;    
    max-height:85vh;
}

.sidePanel ul li.forecastItem{
    align-items:flex-start;
    padding-top:8px;
    margin-top:8px;
    border-top:1px solid rgba(0,0,0,.08);
}

.forecastUnavailableText{
    display:block;
    font-weight:600;
    opacity:.75;
}

.forecastReasonSmall{
    display:block;
    margin-top:3px;
    font-size:11px;
    font-weight:500;
    opacity:.55;
}

.high{
    font-size: 14px;
    font-weight: 300;  
    color:#1e772f;
}

.medium {
    font-size: 14px;
    font-weight: 300;
    color: #944500;
}

.low{
    font-size: 14px;
    font-weight: 300;  
    color:#c0392b;
}

.forecastCell{
    font-weight:600;
    white-space:nowrap;
}

.forecastConfidenceSmall{
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 300;
    opacity: 1;
    white-space: normal;
    line-height: 1em;
    color: #bd403a;
}

.forecastReasonSmall{
    display: block;
    font-size: 14px;
    font-weight: 300;
    opacity: 1;
    white-space: normal;
    line-height: 1.25;
    color: #bd403a;
}

body.dark-theme .sidePanel ul li.forecastItem{
    border-top-color:rgba(255,255,255,.12);
}

.sidePanel ul li.forecastItem b{
    font-weight:600;
}

.sidePanel ul li.forecastItem span span{
    opacity:.8;
}

.forecastItem{
    border-top:1px solid rgba(0,0,0,.08);
    margin-top:8px;
    padding-top:8px;
}

body.dark-theme .forecastItem{
    border-top-color:rgba(255,255,255,.12);
}

/* ===== TERMINAL PANEL ISOLATION ===== */

#trendStatus{
    display:flex;
    flex-direction:column;
    gap:12px;
}

#trendStatus .trendLine{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:nowrap;
}

#trendStatus .trendLabel{
    display: inline-block !important;
    white-space: nowrap;
    color: --ppi-text;
    font-size: 14px;
    font-weight: 300;
}

#trendStatus span{
    float:none !important;
    position:static !important;
}

#trendStatus .positive{
    color: var(--ppi-green-dark) !important;
    font-weight:500;
}

#trendStatus .negative{
    color: var(--ppi-red-flag) !important;
    font-weight: 500;
}

body.dark-theme #trendStatus span,
body.dark-theme .chart-card ul li span,
body.dark-theme #trendStatus .trendLabel {
    font-size: 14px;
    color: #e6e6e6;
}

/* ===== DARK THEME FOOTER ===== */

body.dark-theme footer{
    background:
    linear-gradient(
        to bottom,
        #2a2a2a 0%,
        #1f1f1f 12%,
        #1a1a1a 100%
    );
    border-top:1px solid --ppi-text;
}

/* общий текст */

body.dark-theme footer,
body.dark-theme footer address,
body.dark-theme footer address span,
body.dark-theme footer h4.sectionH4,
body.dark-theme footer div.copyright{
    color:#d7d7d7;
}

/* ссылки */

body.dark-theme footer a,
body.dark-theme footer button{
    color:#cfcfcf;
}

/* hover */

body.dark-theme footer a:hover,
body.dark-theme footer button:hover,
body.dark-theme footer h4:hover{
    color:#72bf44;
}

/* разделители */

body.dark-theme ul.commonURLs li a:after,
body.dark-theme ul.commonURLs li button:after{
    background:#666;
}

/* копирайт */

body.dark-theme div.copyright a{
    color:#cfcfcf;
}

/* логотип слегка ярче */

body.dark-theme a.SmartIndexesLogo {
    opacity: .95;
    filter: invert(1);
}

body.dark-theme footer a.email:before,
body.dark-theme footer a.phoneNumber:before {
    filter: invert(1);  
}

/* payment methods чуть светлее */

body.dark-theme footer .column.six ul.section li a{
    filter: invert(1);
    opacity:.9;
}

/* мобильный аккордеон */

body.dark-theme footer h4.sectionH4::after{
    filter:invert(1) brightness(.8);
}

body.dark-theme footer ul.commonURLs li a, 
body.dark-theme footer ul.commonURLs li button,
body.dark-theme footer ul.section li a {
    color: #cfcfcf !important;
}

footer .column.six ul.section li a {

}

html body.dark-theme footer button[type=button].Feedback {
    background: transparent !important;
    background-color: transparent !important;
    color: #cfcfcf !important;
}

/* =========================
   ApexCharts tooltip dark fix
========================= */

body.dark-theme .apexcharts-tooltip {
    background: #2f2f2f !important;
    border: 1px solid #555 !important;
    color: #f1f1f1 !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45) !important;
}

body.dark-theme .apexcharts-tooltip-title {
    background: #3a3a3a !important;
    border-bottom: 1px solid #555 !important;
    color: #ffffff !important;
}

body.dark-theme .apexcharts-tooltip-series-group {
    background: transparent !important;
    color: #f1f1f1 !important;
}

body.dark-theme .apexcharts-tooltip-text-label,
body.dark-theme .apexcharts-tooltip-text-value,
body.dark-theme .apexcharts-tooltip-text-y-label,
body.dark-theme .apexcharts-tooltip-text-y-value,
body.dark-theme .apexcharts-tooltip-text-z-label,
body.dark-theme .apexcharts-tooltip-text-z-value {
    fill: #f1f1f1 !important;
    color: #f1f1f1 !important;
}

body.dark-theme .apexcharts-xaxistooltip,
body.dark-theme .apexcharts-yaxistooltip {
    background: #2f2f2f !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    display: none !important;
}

.apexcharts-tooltip-marker {
    border-radius: 50% !important;
    margin-right: 10px !important;
}

/* =========================
   Tooltip typography
========================= */

.apexcharts-tooltip {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.apexcharts-tooltip-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 10px 14px !important;
    margin: 0 !important;
}

.apexcharts-tooltip-series-group {
    padding: 6px 14px !important;
    margin: 0 !important;
    min-height: auto !important;
    line-height: 1.15 !important;
}

.apexcharts-tooltip-text {
    font-size: 14px !important;
    line-height: 1.15 !important;
}

.apexcharts-tooltip-text-label,
.apexcharts-tooltip-text-value {
    font-size: 14px !important;
    line-height: 1.15 !important;
}

.apexcharts-tooltip-y-group {
    padding: 0 !important;
    margin: 0 !important;
}

.terminalNotice{
    width: calc(100% - 70px);
    max-width: 1072px;
    margin: 0 auto 20px;  
    padding: 12px;
    border-radius: 8px;
    background: rgb(246,248,250,0.5);
    border: 1px solid rgb(135 135 135 / 6%);
}

.terminalNotice p{
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #737373;
}

.terminalNotice b{
    color: #737373;
    font-size: 12px;
    font-weight: 500;
}

body.dark-theme .terminalNotice{
    background: rgba(36,36,36,0.25);
    border-color: rgba(255, 255, 255, .08);
}

body.dark-theme .terminalNotice p{
    color: #bdbdbd;
    opacity: 0.7;
}
body.dark-theme .terminalNotice b {
    color: #bbb5b5;
}

.socialBlock.inTerminal .shareURL {
  background: transparent;
}
.socialBlock.inTerminal .shareURL.active {
  background: var(--ppi-green);
}

.socialBlock.inTerminal .shareURL,
.socialBlock.inTerminal .shareURL.active {
  border-radius: 6px !important;
  opacity: 1;
}

.calc-ui #formCard button.send em,
.calc-ui #formCard button.send span {
	display: inline-block;
  padding: 5px 2px 0 0;
  font-size: 14px; 
}
.calc-ui #formCard button.send em {
  font-family: Arial, sans-serif;
  font-weight: 500;
  color: #5564b8;
}
.dark-theme .calc-ui #formCard button.send em {
  color: #8b9af0;
}
.dark-theme .calc-ui #formCard button.send span {
  color: var(--ppi-card-bg);
}
.dark-theme .calc-ui #formCard button.send:hover *,
.dark-theme .calc-ui #formCard button.send:target * {
  color: #fff;
}
/* =========================
   PPI TERMINAL DARK FIXES
========================= */

body.dark-theme div#chart,
body.dark-theme div#trendStatus,
body.dark-theme div.sidePanel{
    background: #2b2b2b;
    border-color: #545454;
    color: #e8e8e8;
}

body.dark-theme .chart-card li span,
body.dark-theme .sidePanel span,
body.dark-theme .sidePanel b,
body.dark-theme #trendStatus span,
body.dark-theme .calc-ui table#table.ppi thead tr th:first-child,
body.dark-theme .calc-ui table#table.ppi thead tr th span,
html body.dark-theme .calc-ui table#table.ppi thead tr th#forecastOnlyToggle span.forecastOnlyHint.edgeTooltip {
    color:#cecece;
}
body.dark-theme div.enlargeButton {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    border-left: 1px solid #3a3a3a;
    border-right: 1px solid #3a3a3a;
}
body.dark-theme div.enlargeButton button.enlargeListing {
    background: #323232;
}

body.dark-theme .metric-subtitle{
    color:#bdbdbd !important;
}

body.dark-theme .rateCell:hover{
    background:rgba(112,174,64,.18) !important;
}

body.dark-theme .forecastCell{
    color:#e8e8e8;
}

body.dark-theme .forecastCellActive{
    color:#8bd365;
}

body.dark-theme .forecastReasonSmall{
    color:#ff7a72;
    opacity:1;
}

body.dark-theme .sortBadge{
    background:linear-gradient(to bottom, #2f4f2f 0%, #244024 100%);
    border-color:var(--ppi-green);
    color:#dff5d8;
    text-shadow:none;
}

body.dark-theme .sortBadgeText,
body.dark-theme .sortBadgeIcon{
    color:#dff5d8;
}

body.dark-theme .sortBadge:hover,
body.dark-theme .sortBadge:hover span{
    background:#619c32;
    color:#ffffff;
}

body.dark-theme .forecastItem{
    border-top-color:rgba(255,255,255,.12);
}

body.dark-theme .high{
    color:#8bd365;
}

body.dark-theme .medium{
    color:#f2b84b;
}

body.dark-theme .low{
    color:#ff7a72;
}

body.dark-theme input#searchForm:focus,
body.dark-theme input#searchForm:target,
body.dark-theme select#level2:focus{
    background:#1f1f1f !important;
    border:1px solid #8bd365 !important;
    color:#ffffff !important;
}

body.dark-theme .unitSwitch .slider,
body.dark-theme .currencySwitch .slider{
    background:#3a3a3a !important;
}

body.dark-theme .unitSwitch .labels,
body.dark-theme .currencySwitch .labels{
    color:#cfcfcf !important;
}

body.dark-theme .unitSwitch input:not(:checked) ~ .labels span:first-child,
body.dark-theme .unitSwitch input:checked ~ .labels span:last-child,
body.dark-theme .currencySwitch input:not(:checked) ~ .labels span:first-child,
body.dark-theme .currencySwitch input:checked ~ .labels span:last-child{
  color:#ffffff !important;
}

body.dark-theme .calc-ui table#table.ppi thead tr th, 
body.dark-theme .calc-ui #watchListTable thead tr th, 
body.dark-theme .calc-ui thead#volatilityThead tr th, 
body.dark-theme .calc-ui table#stockOverviewTable thead#stockOverviewThead th,
body.dark-theme div#stockResults table thead#stockThead th, 
body.dark-theme table#stockOverviewTable thead#stockOverviewThead th {
  background:linear-gradient(to bottom, #333 0%, #2b2b2b 100%) !important;
  border-color:#444 !important;
  color: #b5b5b5 !important;
}

body.dark-theme .apexcharts-gridline{
  stroke:#444 !important;
}

body.dark-theme .forecastOnlyHint{
  background:linear-gradient(to bottom, #2f4f2f 0%, #244024 100%);
  border-color: #70af40;
  color:#dff5d8;
}

body.dark-theme .forecastTh:hover .forecastOnlyHint,
body.dark-theme .forecastOnlyActive .forecastOnlyHint{
  background:#619c32;
  color: #fff;
}

body.dark-theme .forecastOnlyActive{
  background:rgba(112,174,64,.18) !important;
}

/* =========================
   PPI TERMINAL DARK UI POLISH
========================= */

/* search icon back in dark theme */
body.dark-theme input#searchForm{
    background-color:#1f1f1f !important;
    background-image:url('../img/svg/gray-search.svg') !important;
    background-size:28px 28px !important;
    background-position:99.5% 3px !important;
    background-repeat:no-repeat !important;
    color:#e8e8e8 !important;
    border-color:#666 !important;
}

body.dark-theme input#searchForm:focus,
body.dark-theme input#searchForm:target{
    background-color:#1f1f1f !important;
    background-image:url('../img/svg/gray-search.svg') !important;
    background-size:28px 28px !important;
    background-position:99.5% 3px !important;
    background-repeat:no-repeat !important;
    border:1px solid #8bd365 !important;
}

/* switch labels */
body.dark-theme .unitSwitch .labels span,
body.dark-theme .currencySwitch .labels span{
    color:#d8d8d8 !important;
    text-shadow:none !important;
}

body.dark-theme .unitSwitch input:not(:checked) ~ .labels span:first-child,
body.dark-theme .unitSwitch input:checked ~ .labels span:last-child,
body.dark-theme .currencySwitch input:not(:checked) ~ .labels span:first-child,
body.dark-theme .currencySwitch input:checked ~ .labels span:last-child{
    color:#ffffff !important;
    text-shadow:none !important;
}

/* remove dark theme text glow */
body.dark-theme,
body.dark-theme button,
body.dark-theme span,
body.dark-theme a,
body.dark-theme li,
body.dark-theme input,
body.dark-theme select,
body.dark-theme .themeToggle,
body.dark-theme .chartButton{
    text-shadow:none !important;
}
body button.themeToggle.terminalTipEdge span,
body.darkTheme button.themeToggle.terminalTipEdge span {
    position: relative;
    top: -2px;
    display: block;
    font-size: 14px;    
}
body:not(.dark-theme) button.themeToggle.terminalTipEdge span {
    color: #111;
}
body.dark-theme button.themeToggle.terminalTipEdge span {
    color: #d8d8d8;
}

/* chart buttons */
body.dark-theme div.functions button:not(.period.selected),
body.dark-theme .columns.panel.buttons button.chartButton{
  background:linear-gradient(to bottom, #3f3f3f 0%, #303030 100%);
  border:1px solid #535353 !important;
  box-shadow:none !important;
  color:#f0f0f0 !important;
  font-weight: 300;    
  line-height: 10px;    
}
html body.dark-theme div.functions button:hover,
html body.dark-theme div.functions button:target,
body.dark-theme .columns.panel.buttons button.chartButton:hover,
body.dark-theme .columns.panel.buttons button.chartButton:target,
html body.dark-theme div.searchOptions button.searchOption:hover,
html body.dark-theme div.searchOptions button.searchOption:target,
body.dark-theme div.functions button.themeToggle.terminalTipEdge.darkTheme:hover,
body.dark-theme div.functions button.themeToggle.terminalTipEdge.darkTheme:target {
    background-color: #5d9732;
    background: #5d9732;
    border:1px solid #5d9732;
    color:#ffffff !important;
}
body.dark-theme .calc-ui #formCard div.functions button.exportReport {
  background-image: url('../img/svg/export.svg');
  background-size: 14px 14px;
  background-position: 6px 10px;
  background-repeat: no-repeat;
}
body.dark-theme .calc-ui #formCard div.functions button.period,
body.dark-theme div.functions button.themeToggle.terminalTipEdge.darkTheme:hover,
body.dark-theme div.functions button.themeToggle.terminalTipEdge.darkTheme:target {
  background-size: 14px 14px;
  background-position: 6px 9px;
  background-repeat: no-repeat;  
}
body.dark-theme .calc-ui #formCard div.functions button.period {
  background-color: transparent;
  background-image: url('../img/svg/period.svg');
}
body.dark-theme .calc-ui #formCard div.functions button.period:hover,
body.dark-theme .calc-ui #formCard div.functions button.period:target {
  background-color: var(--ppi-green-dark);
}
body.dark-theme .columns.panel.buttons button.chartButton span{
    color:#f0f0f0 !important;
    text-shadow:none !important;
}
body.dark-theme .columns.panel.buttons button.chartButton.active{
    background:linear-gradient(to bottom, #70ae40 0%, #5d9732 100%) !important;
    border:1px solid var(--ppi-green); !important;
    color:var(--ppi-white) !important;
}

/* chart card / chart container background */
body.dark-theme .chart-card{
    background:#242424 !important;
    border-color:#444 !important;
}

body.dark-theme div#chart{
    background:#2b2b2b !important;
    border-color:#555 !important;
}

body.dark-theme .apexcharts-canvas,
body.dark-theme .apexcharts-svg{
    background:#2b2b2b !important;
}

/* legend */
body.dark-theme .apexcharts-legend.apexcharts-align-center.apx-legend-position-bottom{
    background: #353535 !important;
    border: 1px solid --ppi-text;
}

body.dark-theme .apexcharts-legend-text{
    color:#e2e2e2 !important;
    text-shadow:none !important;
}

/* download button gradient */
.chartActions {
  position: relative;
  left: 0;  
  display: block;
  width: 100%;
  height: 36px;
}
.chartActions button#downloadChart {
  position: relative;
  left: 0;
}
button#downloadChart,
.downloadChart{
    height: 36px;
    line-height: 10px;    
    background:linear-gradient(to bottom, #f2f2f2 0%, #e2e2e2 100%) !important;
    border:1px solid #ddd;
    color: #111;
    text-shadow:none;
    transition:.18s ease;
}

button#downloadChart:hover,
button#downloadChart:target,
.downloadChart:hover,
.downloadChart:target{
    background:linear-gradient(to bottom, var(--ppi-green) 0%, var(--ppi-green-dark) 100%) !important;
    border-color:var(--ppi-green-dark) !important;
    color:#ffffff !important;
    text-shadow:none !important;
}

body.dark-theme button#downloadChart,
body.dark-theme .downloadChart{
    background:linear-gradient(to bottom, #3f3f3f 0%, #333333 100%) !important;
    border:1px solid #555 !important;
    color:#f0f0f0 !important;
    text-shadow:none !important;
}

body.dark-theme .chart-card .column.right .box{
  position: relative;
  background: transparent !important;
}

body.dark-theme button#downloadChart:hover,
body.dark-theme button#downloadChart:target,
body.dark-theme .downloadChart:hover,
body.dark-theme .downloadChart:target{
    background:linear-gradient(to bottom, var(--ppi-green) 0%, var(--ppi-green-dark) 100%) !important;
    border-color:var(--ppi-green) !important;
    color:#ffffff !important;
    text-shadow:none !important;
}
/* ApexCharts tooltip — force left alignment */

.apexcharts-tooltip{
    text-align:left !important;
}

.apexcharts-tooltip-title{
    text-align:left !important;
}

.apexcharts-tooltip-series-group{
    justify-content:flex-start !important;
    align-items:flex-start !important;
    text-align:left !important;
}

.apexcharts-tooltip-text,
.apexcharts-tooltip-y-group,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value{
    display:block !important;
    width:100% !important;
    text-align:left !important;
}

.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value{
    float:none !important;
}

@media (max-width: 640px) {
    .calc-ui #formCard button {
        font-size: 14px;
    }
    div#level1Toggle {
        max-width: 220px;
        height: 36px;
    }
    div#level1Toggle button {
      width: calc(50% - 1px);
      height: 30px;
      padding: 4px 12px;
      font-size: 14px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
    }
    div#metricToggle button, div#metricToggle button.active {
      width: calc(100% / 3);
      padding-left: 12px;
      padding-right: 10px;
    }
    .calc-ui table#table.ppi thead tr th,
    .calc-ui table#table.ppi thead tr th span.monthHeadLabel,
    .calc-ui table#table.ppi thead tr th .forecastHeadLabel {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: -.02em;
      color: #419745;        
      line-height: 1.5em;
    }
    .calc-ui table#table.ppi td:first-child {
      font-weight: 300;
      color: #111;
      text-align: left;
      letter-spacing: -0.03em;
    }
    .calc-ui table#table.ppi tbody tr td:nth-child(6) {
      width: 160px;
      padding-left: 0;
    }
}
@media (max-width: 550px) {
  div#formCard.card.rightCorners.bottomPanel {
      height: 60px;
  }  
  body div#formCard.card.rightCorners.bottomPanel p, 
  body div#formCard.card.rightCorners.bottomPanel p a,  
  body.dark-theme div#formCard.card.rightCorners.bottomPanel p, 
  body.dark-theme div#formCard.card.rightCorners.bottomPanel p a {
    font-size: 12px;
  }
  .apexcharts-legend.apexcharts-align-center.apx-legend-position-bottom {
    top: 240px !important;
    max-width: 360px;
    margin: 0 auto;
    padding: 4px 0;
    background: transparent !important;
    border-radius: 4px;
    zoom: 100%;
    text-align: left;
  }
  .chart-card .right {
    display: flex;
    align-items: flex-start;
    padding-top: 30px;
  }
  .chartTitle {
    font-size: 16px;
  }
  .socialBlock.inTerminal {
    position: relative;
    top: 10px;
    left: 0;
    display: block;
    width: 200px;
    height: auto;
    margin: 0;
    opacity: 0.8;
  }
  .socialBlock.inTerminal:hover,
  .socialBlock.inTerminal:target {
    opacity: 1;
  }
  .calc-ui table#table.ppi th:first-child, 
  .calc-ui table#table.ppi td:first-child {
    min-width: 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    padding-left: 18px;
  }
  .calc-ui table#table.ppi thead tr th .forecastHeadLabel br {
      display: none;
  }
}
button#mobileMenuBtn:hover,
button#mobileMenuBtn:target {
  background-color: transparent;
}

.edgeTooltip::after{
    left:auto !important;
    right:0 !important;
    transform:translateY(-4px) !important;
}

.edgeTooltip::before{
    left:auto !important;
    right:18px !important;
    transform:translateY(-4px) !important;
}

.edgeTooltip:hover::after,
.edgeTooltip:hover::before{
    transform:translateY(0) !important;
}
.calc-ui table#table.ppi tbody td:first-child{
    max-width:260px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
body .calc-ui table#table.ppi tbody tr.drillBackRow td {
    font-weight: 400 !important;  
    color: #515151 !important;
}
body .calc-ui table#table.ppi tbody tr.drillBackRow:hover td,
body .calc-ui table#table.ppi tbody tr.drillBackRow:target td,
body .calc-ui table#table.ppi tbody tr.drillBackRow td:hover,
body .calc-ui table#table.ppi tbody tr.drillBackRow td:target {
    background: none;
}
body.dark-theme .calc-ui table#table.ppi tbody tr.drillBackRow td {
    color: #c3c3c3 !important;
}
@media(max-width:768px){
    .calc-ui table#table.ppi tbody td:first-child{
        max-width:180px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

div#formCard.card.rightCorners.additional.panelOpened{
    padding-bottom:190px;
}
.hidden {
  display:none;
}

div#notifications.panel{
    height: auto;
    max-height: 420px;
    overflow-y: auto;
}

div#notifications.panel ul li.updatesToggleItem{
    background:transparent;
    padding-top:8px;
}
div#notifications.panel ul li.updatesToggleItem button#updatesExpandToggle {
    height: 30px;
    font-size: 12px;
    font-weight: 300;
}

button.updatesExpandToggle{
    width:100%;
    height:30px;
    padding:4px 10px;
    border-radius:6px;
    border:1px solid #ddd;
    background:#f2f2f2;
    color: var(--ppi-text);
    font-size:12px;
    font-weight:400;
}

button.updatesExpandToggle:hover,
button.updatesExpandToggle:target,
body.dark-theme button.updatesExpandToggle:hover,
body.dark-theme button.updatesExpandToggle:target {
    background:var(--ppi-green);
    border-color:var(--ppi-green);
    color: #fff;
}

body.dark-theme button.updatesExpandToggle{
    background: #333;
    border-color:#555;
    color:#e8e8e8;
}

/* =========================
   MOBILE FILTERS COLLAPSE
========================= */

button.closeFilterPanel{
    display:none;
}
body.dark-theme div.functions.main div.searchSettingsWrap button.searchSettingsToggle {
    background: transparent !important;
    border: none !important;
}

@media(max-width:640px){

    #formCard{
        position:relative;
        transition:max-height .25s ease, padding .25s ease;
    }

    #formCard .grid2.filters{
        position:relative;
    }

    div#formCard.card.rightCorners.filtersCollapsed {
        min-height: 35px !important;
        height: 35px !important;
        padding: 0 !important;
    }

    button.closeFilterPanel{
        display: block;
        width: 100%;
        height: 36px;
        margin: 10px 0 0 0;
        padding: 0 12px;
        border-radius: 0;
        border: none;
        background: #f7f7f7;
        color: var(--ppi-bg);
        font-size: 14px;
        font-weight: 300;
        cursor: pointer;
        text-align: center;
    }
    .dark-theme button#closeFilterPanel {
      background: var(--ppi-bg);
      color: var(--ppi-panel);
    }

    button.closeFilterPanel:hover,
    button.closeFilterPanel:target{
        border-color: var(--ppi-green-dark) !important;
        background:var(--ppi-green-dark) !important;
        color: var(--ppi-green) !important;
    }

    .dark-theme button#closeFilterPanel:hover,
    .dark-theme button#closeFilterPanel:target {
      color: var(--ppi-panel) !important;
    }

    #formCard.filtersCollapsed .choice.main,
    #formCard.filtersCollapsed .functions.main,
    #formCard.filtersCollapsed .functions.additional{
        display:none;
    }

    #formCard.filtersCollapsed .grid2.filters{
        display:block;
    }

    #formCard.filtersCollapsed button.closeFilterPanel{
        position: relative;
        top: -23px;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        background-color: #eaeaea;
        border-radius: 0;
        border: none;
    }

    .dark-theme #formCard.filtersCollapsed button.closeFilterPanel{
        background:#333;
        border-color:#555;
        color:#e8e8e8;
    }

    .dark-theme #formCard.filtersCollapsed button.closeFilterPanel:hover,
    .dark-theme #formCard.filtersCollapsed button.closeFilterPanel:target{
        background:#333;
        border-color:#555;
        color:#46ac27;
    }
}

/* =========================
   MOBILE TOP ACTIONS Z-INDEX FIX
   width < 550px
========================= */

@media(max-width:550px){

    div#formCard.card.rightCorners{
        position:relative;
        z-index:50;
        overflow:visible;
    }

    div#formCard.card.rightCorners div.grid2.filters{
        position:relative;
        z-index:60;
        overflow:visible;
    }

    div#formCard.card.rightCorners div.grid2.filters div.functions.additional{
        position:fixed;
        top:52px;
        right:0;
        z-index:10000;
        overflow:visible;
    }

    div#notifications.panel,
    div.functions.additional div#settings.functions.supported{
        position:fixed !important;
        top:94px;
        right:10px;
        left:auto;
        z-index:10040 !important;
    }

    .searchSettingsPanel{
        z-index:10050;
    }

    .terminalGlossaryPanel{
        z-index:10060;
    }

    .terminalTipTarget::before,
    .terminalTipTarget::after{
        z-index:10070;
    }
}

/* =========================
   MOBILE HEADER STACKING FIX
========================= */

@media(max-width:768px){

    .titlebar.gradient.green{
        position:fixed;
        z-index:30000;
    }

    div#formCard.card.rightCorners{
        z-index: 100;
        margin: 0;
    }

    div.functions.additional div.level.first{
        z-index:30100;
    }

    div#notifications.panel,
    div.functions.additional div#settings.functions.supported{
        z-index:30200 !important;
    }
}

/* Active & hover buttons */
.colorTheme .themeToggle:hover,
.colorTheme .themeToggle:target {
    background: --ppi-green;
    border: 1px solid --ppi-green;
}
.themeToggle.lightTheme:hover {

}
.dark-theme .downloadChart:hover,
.dark-theme .themeToggle:hover,
.dark-theme div.functions button:hover,
.dark-theme div.functions button:target {
  background-color: var(--ppi-green-dark) !important;
  color:#ffffff !important;
}

.dark-theme button.chartButton.active,
.dark-theme #level1Toggle button.active,
.dark-theme #metricToggle button.active,
.dark-theme .chart-card .columns.panel.buttons button.chartButton.active,
.dark-theme button.chartButton.active span,
.dark-theme #level1Toggle button.active span,
.dark-theme #metricToggle button.active span,
.dark-theme .chart-card .columns.panel.buttons button.chartButton.active span,
.dark-theme .chart-card .columns.panel.buttons button.active {
  background: var(--ppi-green-dark) !important;
  color:#ffffff !important;
  box-shadow:none !important;
  line-height: 1em;
}
.chart-card .columns.panel.buttons button.chartButton:hover,
.chart-card .columns.panel.buttons button.chartButton:target,
.dark-theme .chart-card .columns.panel.buttons button.chartButton:hover,
.dark-theme .chart-card .columns.panel.buttons button.chartButton:target,
.functions.buttons button:hover,
.functions.buttons button:target,
.downloadChart:hover,
.downloadChart:target,
.columns.panel.buttons button.chartButton:hover,
.columns.panel.buttons button.chartButton:target {
  background: var(--ppi-green-dark) !important;
  border: 1px solid var(--ppi-green-dark) !important;
  color:#ffffff !important;
  box-shadow:none !important;
  line-height: 1em;    
}

/* Rent Sale Cap Rate buttons */
div#metricToggle button[data-val=cap] {
    width: 102px;
}
.calc-ui button[data-val=commercial],
.dark-theme .calc-ui button[data-val=commercial],
.calc-ui #metricToggle button[data-val=rent],
.dark-theme .calc-ui #metricToggle button[data-val=rent] {
    border-radius: 8px 0 0 8px !important;
}
.calc-ui #metricToggle button[data-val=sales],
.dark-theme .calc-ui #metricToggle button[data-val=sales] {
    border-radius: 0  !important;
}
.calc-ui #metricToggle button[data-val=cap],
.dark-theme .calc-ui #metricToggle button[data-val=cap],
.calc-ui button[data-val=residential],
.dark-theme .calc-ui button[data-val=residential] {
    border-radius: 0 8px 8px 0  !important;
}
.calc-ui .toggle.terminalTipTarget button:hover,
.calc-ui .toggle.terminalTipTarget button:target,
.calc-ui #metricToggle button:hover,
.calc-ui #metricToggle button:target {
    background: var(--ppi-green);
    color: #fff;
}
/* Rent Sale Cap Rate buttons */

#chart.timelineHistogram{
  width:100%;
  aspect-ratio:1 / 1;
  max-height:620px;
  min-height:520px;
}

#chart.timelineHistogram .apexcharts-yaxis text{
  font-size:10px;
}

#chart.timelineHistogram .apexcharts-datalabel{
  transform:translateX(10px);
}

.copySuccessIcon {
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 50%;
  display: block;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  background-image: url('../img/svg/ok-ui.svg');
  background-repeat: no-repeat;
  background-position: 0 -144px;
  background-size: 72px auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(35px) scale(0.85);
  transition:
    opacity 0.28s ease,
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.copySuccessIcon.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.copySuccessIcon.hide {
  opacity: 0;
  transform: translateY(-35px) scale(0.9);
}

.message.requestJSON {
    position: fixed;
    z-index: 100000;
    top: 50%;
    left: 50%;
    width: min(460px, calc(100% - 32px));
    height: fit-content;
    max-height: 280px;
    padding: 20px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translate(-50%, -46%);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.dark-theme .message.requestJSON {
    background-color: rgb(112 112 112 / 32%);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid #555555;
}
.dark-theme .message.requestJSON * {
    color: var(--ppi-white);
}

.message.requestJSON.visible {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.message.requestJSON.hidden {
	display: none;
}

.message.requestJSON .headerLine {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.message.requestJSON .headerLine h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 18px;
}

.message.requestJSON .close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 100px;
    border: 1px solid #b7b7b7;
    font-size: 20px;
    font-weight: 300;
    line-height: 20px;
}

.message.requestJSON .close:hover,
.message.requestJSON .close:target {
    background: transparent;
    border: 1px solid var(--ppi-green);
    color: var(--ppi-green);
}

.message.requestJSON .content {
  min-height: fit-content;
  height: fit-content;
}

.message.requestJSON .content p {
	margin: 0 0 12px;
}

.message.requestJSON .content p:last-child {
	margin-bottom: 0;
}

.message.requestJSON .buttons {
	display: flex;
	justify-content: flex-start;
	margin-top: 20px;
}

.stockHeader {
    position: relative;
    display: flex;
    width: calc(100% - 40px);
    height: 36px;
    margin: 0 0 -10px;
    padding: 20px;
}
.headerBlock,
.stockViewTabs {
    display: inline-block;
}
.headerBlock {
  display: flex;
  width: fit-content;
}
h3#stockHeading {
  margin: 0;
  padding: 5px 0 0 0;
  font-size: 17px;
  font-weight: 400;
}
.dark-theme h3#stockHeading {
  color: #d0d0d0;
}
p#stockLocationPath {
  display: inline-block;
  margin: 5px 0;
}
.stockViewTabs {
    position: relative;
    right: 0;
    float: right;
    width: 124px;
    text-align: right;
}

.stockLocationControls {
    display: block;
    width: calc(100% - 20px);
    margin: 0 20px;
}
.stockLocationControls .stockLocationField {
    display: inline-block;
    width: 300px;
}
.stockLocationControls .stockLocationField label {
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
}
.stockOptions,
.stockLocationActions {
    display: block;
    padding: 20px;
}
.stockOptions {
  padding-top: 0;
}
.stockLocationActions {
  padding: 20px 0;
}

.stockDrawerFilters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 18px 10px;
    position: relative;
    z-index: 20;
}

.stockDrawerColumn{
  position:relative;
  min-width:0;
}

.stockFilterTrigger{
  width:100%;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
  padding:0 24px;
  text-align:left;
}

.stockDrawerColumn button {
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 12px;
  background: #d9ebe1;
}

.stockFilterTriggerText{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0;
  text-align:left;
}

.stockFilterTriggerText {
  display: block;
  width: fit-content;
}

.stockFilterTriggerText strong,
.stockFilterTriggerText em {
    display: inline-block;
    margin: 5px 0 0 0;  
    font-size: 15px;
    font-weight: 300;
    line-height: 15px;
}

.stockFilterTriggerText em{
  display:block;
  margin:3px 0 0;
  padding:0;
  line-height:1.2;
}

div#forecastsPropertySwitch .stockFilterTriggerText strong {
	margin: 0;
}

.stockFilterTriggerText em{
  display:block;
  overflow:hidden;
  color:#777;
  font-size:13px;
  font-style:normal;
  line-height:18px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stockFilterTriggerText em.selected{
  color:#222;
  font-weight:600;
}

.stockFilterArrow{
  position:relative;
  top: -2px;
  right: 0;
  flex:0 0 auto;
  width:5px;
  height:5px;
  margin:0 0 0 18px;
  border-right:2px solid #777;
  border-bottom:2px solid #777;
  transform:rotate(45deg);
}
.dark-theme .stockFilterArrow {
	filter: invert(1);
	opacity: 0.8;
}
.stockFilterArrow {
	transform: rotate(45deg);
	transition: transform .18s ease;
}
.stockFilterTrigger.active .stockFilterArrow {
    top: 2px;
	transform: rotate(225deg);
}
.dark-theme .stockFilterArrow.active:hover,
.dark-theme .stockFilterArrow.active:target,
.dark-theme .stockFilterArrow.active:focus {
  opacity: 1;
}

.stockFilterPanel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  min-width:300px;
  padding:16px;
  box-sizing:border-box;
  border:1px solid #d9d9d9;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  z-index:50;
}

.stockDrawerColumn:last-child .stockFilterPanel{
  right:0;
  left:auto;
}

.stockFilterPanel h4{
  margin:12px 0 12px;
}

.stockLocationLevels,
.stockFilterOptions,
.stockLocationResults {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.stockLocationLevels button,
.stockFilterOptions button,
.stockSearchOption{
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    background: #f4f4f4;
    text-align: left;
    cursor: pointer;
}

.stockLocationLevels button.active span,
.stockFilterOptions button.active span,
.stockSearchOption.active span {
    color: #fff;
}

.stockLocationSearchBlock{
  margin-top:12px;
}

#stockLocationSearch{
    width: 100%;
    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 6px;
}

.stockLocationResults{
    max-height: 168px;
    margin-top: 8px;
    overflow-y: auto;
    background: #fcfcfc;
    border: none;
    border-radius: 6px;
}
.dark-theme .stockLocationResults {
  background: transparent;
}

.stockSearchOption{
  display:flex;
  flex-direction:column;
  gap:3px;
  border-width:0 0 1px;
  border-radius:0;
}

.stockLocationResults button.stockSearchOption {
    padding: 0 12px;
    background: #f8f8f8;
    border-bottom: 1px solid #ebebeb;
    border-radius: 0;  
}

.stockLocationResults button.stockSearchOption.active {
    background: rgb(125 195 87);
    color: #fff;
}
.dark-theme .stockFilterOptions button.active,
.dark-theme .stockLocationResults button.stockSearchOption.active {
    background: rgb(83 132 56);
    border: 1px solid rgb(83 132 56);
}

.stockLocationResults button.stockSearchOption span {
    padding: 10px 0;
    font-size: 15px;
    font-weight: 300;
}
.dark-theme .stockLocationResults button.stockSearchOption span {
  color: var(--ppi-dark-text);
}
button#stockLocationConfirm,
button#stockLocationClear,
button#stockMetricClear,
button#stockScopeClear {
    font-weight: 300;
}
.stockFilterActions button {
  background: #efefef;
}
.dark-theme .stockFilterActions button {
  background: #4f4f4f;
  color: var(--ppi-border);
}
.stockFilterActions button.green.activated {
    background: #cee5be;
    font-weight: 400;
    text-shadow: 0 1px 2px #fff;
    color: #000;
}
.dark-theme .stockFilterActions button.green.activated {
    background: #4c8522;
    color: var(--ppi-dark-text);
}
.stockFilterActions button.green.activated:hover,
.stockFilterActions button.green.activated:target {
    background: #c3e2ac;
}

.stockSearchOption:last-child{
  border-bottom:0;
}

.stockSearchOption span{
  font-size:13px;
  font-weight:600;
}

.stockSearchOption em{
  color:#777;
  font-size:11px;
  font-style:normal;
}

.stockLocationResults button.stockSearchOption em {
    display: none;
}

.stockFilterHint{
  padding:14px;
  color:#777;
  font-size:12px;
}
.dark-theme .stockFilterHint {
  color: #fcfcfc;
}

.stockDraftSelection{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:6px;
  background: #ecf7e3;
}

.stockDraftSelection span{
  color:#777;
  font-size:11px;
}

.stockDraftSelection strong{
    font-size: 14px;
    font-weight: 300;
    color: #000;
}

.stockFilterActions{
  display:flex;
  gap:8px;
  margin-top:14px;
}

.stockFilterActions button{
  flex:1;
}

.stockDrawerColumn .stockFilterActions button#stockLocationBack,
.stockFilterActions button#forecastsPropertyBack.stockLocationBack {
    min-width: 36px !important;
    width: 36px !important;
    padding: 0 !important;
}

.stockDrawerColumn .stockFilterActions button#stockLocationBack:before,
.stockFilterActions button#forecastsPropertyBack.stockLocationBack:before,
.stockFilterActions button#cmaPropertyBack.stockLocationBack:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-image: url('../img/svg/back.svg');
    background-size: 18px auto;
    background-position: 0 0;
    background-repeat: no-repeat;   
}
.dark-theme .stockDrawerColumn .stockFilterActions button#stockLocationBack:before,
.dark-theme .stockFilterActions button#forecastsPropertyBack.stockLocationBack:before,
.dark-theme .stockFilterActions button#cmaPropertyBack.stockLocationBack:before {
  filter:invert(1);
}
.stockDrawerColumn .stockFilterActions button#stockLocationBack:hover,
.stockFilterActions button#forecastsPropertyBack.stockLocationBack:hover,
.stockFilterActions button#cmaPropertyBack.stockLocationBack:hover  {
    width: 58px;
    padding: 0 !important;
    background: var(--ppi-green-dark);
    border: none;
    color: var(--ppi-card-bg);
    filter: contrast(1);
}
.stockDrawerColumn .stockFilterActions button#stockLocationBack:hover:before,
.stockFilterActions button#forecastsPropertyBack.stockLocationBack:hover:before,
.stockFilterActions button#cmaPropertyBack.stockLocationBack:hover:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: 2px;  
    background-image: url('../img/svg/back.svg');
    background-size: 18px auto;
    background-position: 0 0;
    background-repeat: no-repeat;   
    filter: invert(1);  
}

.stockLoader{
  min-height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.dark-theme .stockLoader span,
.dark-theme .chartsFilterTrigger span {
  color: var(--ppi-dark-text);
}

.stockFilterTrigger.active,
.stockFilterTrigger.selected {
	border: 1px solid var(--ppi-green) !important;
}

.stockLoader i{
  width:24px;
  height:24px;
  border:3px solid #d7d7d7;
  border-top-color:#2bbf72;
  border-radius:50%;
  animation:stockLoaderSpin .7s linear infinite;
}

.stockEmptyState{
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#777;
  text-align:center;
}

@keyframes stockLoaderSpin{
  to{
    transform:rotate(360deg);
  }
}

.stockFilterTrigger,
.stockFilterPanel,
.stockSearchOption,
.chartsFilterTrigger {
  padding: 0 12px 12px;
}

body.dark-theme .stockFilterTrigger,
body.dark-theme .stockFilterPanel,
body.dark-theme .stockSearchOption,
body.dark-theme .chartsFilterTrigger {
  background: #1f1f1f;
  border-radius: 6px;
  border: 1px solid #505050;
  color: #e5e5e5;
  overflow: hidden;
}
.stockLocationLevels button,
.stockFilterOptions button {
    padding-top: 10px;
    padding-bottom: 10px;
}
.stockFilterTrigger span,
.chartsFilterTrigger span {
	width: calc(100% - 20px);
    height: 26px;
	padding-top: 12px;
    padding-bottom: 2px;
}
.dark-theme .stockFilterTrigger.selected {
	border-color: var(--ppi-green);
}
body.dark-theme .stockFilterTrigger:hover,
body.dark-theme .chartsFilterTrigger:hover {
  border: 1px solid var(--ppi-green-hover);
}
body.dark-theme .stockFilterTrigger.chosen,
body.dark-theme .stockFilterTrigger.chosen:hover {
  border: 1px solid var(--ppi-green-hover);
}

body.dark-theme .stockFilterPanel {
    background: #333333;
    border: 1px solid rgb(90 90 90 / 25%);
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
}

body.dark-theme div#stockLocationLevelStep h4,
body.dark-theme h4#stockLocationSearchTitle,
body.dark-theme .stockFilterPanel h4 {
  color: var(--ppi-border);
}

body.dark-theme .stockDraftSelection{
  background: #4a721b;
}
body.dark-theme .stockDraftSelection span {
  color: #bdbdbd;
}
body.dark-theme .stockDraftSelection strong{
  color: var(--ppi-card-bg);
}

body.dark-theme .stockLocationLevels button,
body.dark-theme .stockFilterOptions button,
body.dark-theme .stockSearchOption,
body.dark-theme .stockFilterOptions button {
  background: linear-gradient(to bottom, #3f3f3f 0%, #303030 100%);
  border: 1px solid #505050;
  color: var(--ppi-border);
}

body.dark-theme .stockLocationLevels button:hover,
body.dark-theme .stockLocationLevels button:target,
body.dark-theme button.stockSearchOption:hover,
body.dark-theme button.stockSearchOption:target,
body.dark-theme .stockFilterOptions button:hover,
body.dark-theme .stockFilterOptions button:target,
body.dark-theme .stockFilterActions button:hover,
body.dark-theme .stockFilterActions button:target,
body.dark-theme .stockFilterActions button.green.activated:hover,
body.dark-theme .stockFilterActions button.green.activated:target {
  background: var(--ppi-deep-green);
  border: 1px solid var(--ppi-deep-green);
  color: var(--ppi-dark-text);
}
body.dark-theme .stockFilterActions button:hover,
body.dark-theme .stockFilterActions button:target,
body.dark-theme .stockFilterActions button.green.activated:hover,
body.dark-theme .stockFilterActions button.green.activated:target {
  border: none;
}
body.dark-theme .stockFilterOptions button:hover em {
  color: var(--ppi-dark-text);
}
body.dark-theme .stockFilterTriggerText,
body.dark-theme .stockFilterTriggerText strong {
  color: var(--ppi-dark-text);
  overflow: visible;
  letter-spacing: -0.01em;
}
strong#forecastsAreaTriggerValue,
strong#forecastsMetricsTriggerValue {
	position: relative;
	top: -3px;
    display: inline-block;
}
.stockFilterTriggerText strong,
.stockFilterTriggerText em,
.chartsFilter span {
  display: inline-block;
  width: fit-content;
  font-size: 14px;
  line-height: 14px;
}
.stockFilterTriggerText em {
  position: relative;
  top: -2px;
  margin-top: 0;
  padding: 0;
  font-size: 14px;
  line-height: 14px;
}

.stockFilterTriggerText em {
  margin-left: 5px;
  color: var(--ppi-bg);
  text-transform: lowercase;
}
body.dark-theme .stockFilterTriggerText em {
  position: relative;
  top: 1px;  
  color: var(--ppi-dark-theme);
}
body.dark-theme .stockFilterTriggerText em.selected{
  color:#fff;
}

.dark-theme .stockFilterOptions button.active,
.dark-theme .stockFilterOptions button.active {
    background: var(--ppi-green);
    border: 1px solid var(--ppi-green);
    color: var(--stock-chart-text-primary);
}

.stockFilterTrigger.chosen .stockFilterTriggerText strong {
  margin: 0;
  color: #18864b;
  font-weight: 400;
}
.dark-theme .stockFilterTrigger.chosen .stockFilterTriggerText strong {
  color: var(--ppi-dark-text);
}

.stockFilterTrigger.chosen .stockFilterTriggerText em {
  display: none;
}

div#stockResults,
div#stockOverviewResults,
div#vacancyTableWrap {
    display: block;
    margin: 15px 20px 20px 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
}
div#forecastsTableWrap {
    border: 1px solid #ddd;
    border-radius: 6px;
}
.dark-theme div#stockResults, 
.dark-theme div#stockOverviewResults,
.dark-theme div#forecastsTableWrap,
.dark-theme div#vacancyTableWrap,
.dark-theme div#forecastsTableWrap {
    border: 1px solid #505050;
    border-radius: 6px;	
}
div#stockOverviewResults {
  margin-bottom: 20px;
}

.stockFilterTriggerText {
  overflow: hidden;
}

.stockFilterTriggerText strong {
  display:block;
  margin:0;
  padding:0;
  line-height:1.25;
}

@media(max-width:760px){
  .stockDrawerFilters{
    grid-template-columns:1fr;
  }

  .stockFilterPanel{
    position:relative;
    top:auto;
    width:100%;
    min-width:0;
    margin-top:8px;
  }
}

@media (prefers-color-scheme: dark) {
  .stockFilterTrigger.chosen {
    background: rgba(53, 168, 113, .14);
    border-color: #35a871;
  }

  .stockFilterTrigger.chosen .stockFilterTriggerText strong {
    color: #4bc27d;
  }
}

.stockBarTrack {
  fill: #edf0f2;
}

.stockBarValue {
  fill: #35a871;
}

.stockOverviewLocationLink::after {
  content: " >";
}

.stockViewControls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.stockResultsFilter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stockResultsFilter span {
  font-size: 13px;
  color: #6f7479;
}

.stockResultsFilter select {
  min-width: 92px;
}
.dark-theme .stockResultsFilter select {
  background: #1f1f1f !important;
  border: 1px solid #656565;
  color: #b7b7b7;
}
.dark-theme .stockResultsFilter select:hover,
.dark-theme .stockResultsFilter select:target,
.dark-theme .stockResultsFilter select:focus {
  background: #1f1f1f !important;
  border: 1px solid #c0c0c0;
  color: #111;
}

.stockOverviewFilters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
div.card.rates#forecastsCard .stockOverviewFilters {
    margin-left: 0;
}
.vacancyDrawerFilters{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.stockOverviewFilters label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.stockOverviewFilters select {
  width: 100%;
}

.stockOverviewLocationLink {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stockOverviewLocationLink::after {
  content: " >";
}

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

@media (max-width: 760px) {
  .stockViewControls {
    width: 100%;
    justify-content: space-between;
  }

  .stockOverviewFilters {
    grid-template-columns: 1fr;
  }
}

/* Outline */

button:focus,
button:focus-visible,
#stockLocationSearch,
body.dark-theme #stockLocationSearch {
    outline:none !important;
    box-shadow:none !important;
}

.calc-ui .grid2.filters .periodModeBlock select:focus,
.calc-ui .grid2.filters .periodModeBlock select:focus-visible,
.dark-theme .calc-ui .grid2.filters .periodModeBlock select:focus,
.dark-theme .calc-ui .grid2.filters .periodModeBlock select:focus-visible {
	border: 1px solid green;
}

/* Watchlist message */

.watchlistEmptyGuide{
    padding:30px 28px 36px;
}

.watchlistEmptyTitle{
    margin-bottom:18px;
    font-weight:600;
}

.dark-theme .watchlistEmptyTitle,
.dark-theme .watchlistEmptySteps * {
  font-weight: 300;
  color: #fcfcfc;
}

.watchlistEmptySteps{
    margin:0;
    padding-left:22px;
}

.watchlistEmptySteps li{
    margin-bottom:10px;
    font-size: 14px;
    line-height:1.6;
}

.watchlistEmptyWord{
    display:inline-block;
    opacity:0;
    transform:translateY(4px);
    animation:watchlistEmptyWordShow .28s ease forwards;
    animation-delay:var(--watch-word-delay);
}

@keyframes watchlistEmptyWordShow{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media (prefers-reduced-motion: reduce){
    .watchlistEmptyWord{
        opacity:1;
        transform:none;
        animation:none;
    }
}