/* Table of rates */
.calc-ui table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.calc-ui table tbody td {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 14px;
    font-weight: 300;
}
.calc-ui table tbody td:not(:first-child),
.calc-ui table#watchListTable.ppi thead th:not(:first-child),
.calc-ui table#watchListTable.ppi tbody td:not(:first-child) {
  text-align: center;
}
.calc-ui table#stockOverviewTable.ppi tbody#stockOverviewTbody tr td:first-child {
  width: 20px !important;
  padding-left: 10px !important;
  text-align: center;
}
tbody#stockOverviewTbody td.left.stockOverviewLocation, 
tbody#stockOverviewTbody td.left.stockOverviewLocation * {
    text-align: left;
}
tbody#stockOverviewTbody td.left.stockOverviewLocation button {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-weight: 300;
}
tbody#stockOverviewTbody td.left.stockOverviewLocation button:hover,
tbody#stockOverviewTbody td.left.stockOverviewLocation button:target {
  text-decoration: none;
}
tbody#stockOverviewTbody td.left.stockOverviewLocation button:after {
  content: '›';
  position: relative;
  top: 1px;
  display: inline-block;  
  margin-left: 5px;
  font-weight: 300;
  font-size: 18px;
  color: #333;
}
tbody#stockOverviewTbody tr:hover td.left.stockOverviewLocation button:after,
tbody#stockOverviewTbody tr:target td.left.stockOverviewLocation button:after,
tbody#stockOverviewTbody td.left.stockOverviewLocation button:hover:after,
tbody#stockOverviewTbody td.left.stockOverviewLocation button:target:after {
  filter:invert(1);
}
div#stockTableWrap,
div#stockOverviewTableWrap,
div#vacancyTableWrap {
  border-radius: 4px;
  overflow: hidden;
}
tbody#stockTbody,
tbody#stockOverviewTbody {
  background: #fff;
}
.dark-theme tbody#stockTbody, 
.dark-theme tbody#stockOverviewTbody {
  background: #2b2b2b !important
}
.calc-ui table tbody#stockOverviewTbody td {
  height: 34px;
  padding: 0 10px;
}
.calc-ui th, .calc-ui td{
  border-bottom:1px solid #eceef2;
  padding:10px;
  text-align:left;
}
.calc-ui th,
.calc-ui th span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #419745;
}
th.trendTh {
    width: 120px;
}
.dark-theme .calc-ui th span {
  color: #b5b5b5;
}
.calc-ui th span {
  display: inline-block;
}
.dark-theme .calc-ui table thead th {
    background: linear-gradient(rgb(51, 51, 51) 0%, rgb(43, 43, 43) 100%);
}
.calc-ui th:first-child,
.calc-ui td:first-child {
  padding-left: 10px;
}
.calc-ui #watchListTable th:first-child,
.calc-ui #watchListTable td:first-child,
.calc-ui table#liquidityTable thead#liquidityThead th:first-child, 
.calc-ui table#liquidityTable tbody#liquidityTbody td:first-child {
    padding-left: 18px;
}
#table tbody tr.drillRow{
  cursor: pointer;
}
#table tbody tr.drillBackRow td{
  cursor:pointer;
  font-weight:700;
  opacity:.85;
}
#table tbody tr.drillBackRow:hover td{
  text-decoration:underline;
}
table#table.ppi tr.drillBackRow td {
    font-weight: 400 !important;
    font-size: 13px;
}
#table tbody tr.drillRow:hover td:first-child{
  color: #70ae40;
  text-decoration: none;
}
table#table.ppi tbody tr td:first-child {
    text-align: center;
}
.dark-theme #table tbody tr.drillRow:hover td:first-child{
  color: #b6e591;
  text-decoration: none;
}
.dark-theme .titlebar.gradient.green div#settings.functions.supported h5 {
  color: #fcfcfc !important;
}

.calc-ui table#table.ppi tbody tr:not(.drillBackRow):hover td {
    background: var(--ppi-green) !important;
}
.dark-theme .calc-ui table#table.ppi tbody tr:not(.drillBackRow):hover td,
.dark-theme .calc-ui table#watchListTable tbody#watchListTbody tr:hover td,
.dark-theme .calc-ui div#volatilityTableWrap table.ppi tr:hover td,
tbody#stockOverviewTbody tr:hover td,
tbody#stockOverviewTbody td:hover,
table#stockTable.ppi tbody#stockTbody tr:hover td,
table#stockTable.ppi tbody#stockTbody tr td:hover,
table#liquidityTable.ppi tbody#liquidityTbody tr:hover td,
table#liquidityTable.ppi tbody#liquidityTbody tr td:hover {
  background: var(--ppi-deep-green) !important;
  color: #fff;    
}
.dark-theme .calc-ui div#volatilityTableWrap table.ppi tr:hover td,
.dark-theme .calc-ui div#volatilityTableWrap table.ppi tr:hover td *,
table#liquidityTable.ppi tbody#liquidityTbody tr td:hover,
table#liquidityTable.ppi tbody#liquidityTbody tr:hover td *,
table#liquidityTable.ppi tbody#liquidityTbody tr td:hover *,
.dark-theme table#liquidityTable.ppi tbody#liquidityTbody tr:hover td,
.dark-theme table#liquidityTable.ppi tbody#liquidityTbody tr:hover td *,
.dark-theme table#liquidityTable.ppi tbody#liquidityTbody tr td:hover *  {
  color: #fff;
}
.calc-ui table#table.ppi tbody tr.drillBackRow:hover {
  background:transparent !important;
  color: var(--ppi-green);
}
.calc-ui table#table.ppi tbody tr:hover td,
.calc-ui table#table.ppi tbody tr:hover td *,
.calc-ui table#table.ppi tbody tr:hover td span,
.calc-ui table#stockOverviewTable.ppi tbody#stockOverviewTbody tr:hover td,
tbody#stockOverviewTbody tr:hover td,
tbody#stockOverviewTbody tr:hover td *,
tbody#stockOverviewTbody td:hover *{
    color:#fff !important;
}
.calc-ui table#table.ppi th:first-child,
.calc-ui table#table.ppi td:first-child {
    width: 200px;
    padding-left: 18px;
}
.calc-ui table#table.ppi td:first-child {
    color: #000;
    font-weight: 300;
    text-align: left;
}
.calc-ui table#table.ppi thead {
    position: sticky;
    top: -2px;
    z-index: 1;
    background: #ffffff;
    border-bottom: 1px solid #ddd !important;  
}
.calc-ui table#table.ppi thead tr th,
.calc-ui div#volatilityTableWrap table.ppi thead tr th {
    height: 20px;
    padding-top: 7px;
    padding-bottom: 6px;
    background: linear-gradient(to bottom, rgb(232 232 232 / 65%) 0%, rgb(225 225 225 / 30%) 100%);
    border-top: 1px solid #ddd;  
    border-bottom: 1px solid #ddd !important;  
    font-size: 13px;
}
.calc-ui table#table.ppi thead tr th:nth-child(2),
.calc-ui table#table.ppi thead tr th:nth-child(3),
.calc-ui table#table.ppi thead tr th:nth-child(4),
.calc-ui table#table.ppi thead tr th:nth-child(5),
.calc-ui table#table.ppi thead tr th:nth-child(6),
.calc-ui table#table.ppi thead tr th:nth-child(7),
.calc-ui table#table.ppi tbody tr td:nth-child(2),
.calc-ui table#table.ppi tbody tr td:nth-child(3),
.calc-ui table#table.ppi tbody tr td:nth-child(4),
.calc-ui table#table.ppi tbody tr td:nth-child(5),
.calc-ui table#table.ppi tbody tr td:nth-child(6),
.calc-ui table#table.ppi tbody tr td:nth-child(7) {
    width: 120px;
    text-align: center;
}
.calc-ui table#table.ppi thead tr,
.calc-ui table#table.ppi thead tr th,
.calc-ui div#volatilityTableWrap table.ppi thead tr,
.calc-ui div#volatilityTableWrap table.ppi thead tr th {
    border-bottom: 1px solid #e7e7e7 !important;
}
.calc-ui table#table.ppi tbody tr.hasDrillData td:first-child::after {
    content: '›';
    display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 1px;
    color: #333;
    font-weight: 300;
    font-size: 18px;
}
.dark-theme .calc-ui table#table.ppi tbody tr.hasDrillData td:first-child::after {
    content: '›';
    display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 1px;
    color: #fff;
    font-weight: 300;
    font-size: 18px;
}
.calc-ui table#table.ppi tbody tr.hasDrillData:hover td:first-child,
.calc-ui table#table.ppi tbody tr.hasDrillData:hover td:first-child::after,
.calc-ui table#table.ppi tbody tr.drillBackRow:hover td:first-child {
    background: transparent;
    color: #70ae40 !important;
    text-decoration: none;
}

.calc-ui table#table.ppi tbody tr.noDrillData td:first-child{
    color:inherit;
    cursor:default;
}
span.forecastOnlyHint.edgeTooltip {
  height: 12px;  
  margin-left: 4px;
  font-size: 11px;
}
@media(max-width:768px){

    .sortableMonth{
        text-align:center;
        white-space:normal;
        vertical-align:top;
    }

    .monthHeadLabel{
        display:block;
        min-height:20px;
        line-height:1.2;
        text-align:center;
    }

    .sortBadge,
    .forecastOnlyHint {
        display:inline-flex;
        width:fit-content;
        height: 14px;
        margin:4px auto 0;
        position:static;
        top:auto;
    }

    .forecastTh{
        min-width:92px;
        white-space:normal;
    }

    .forecastHeadWrap{
        display:flex;
        flex-direction:column;
        gap:4px;
        align-items:center;
        justify-content:center;
        white-space:normal;
    }

    .forecastHeadLabel{
        display:block;
        white-space:normal;
        line-height:1.2;
        text-align:center;
    }

    .forecastOnlyHint{
        position: static;
        width: fit-content;
        margin: 0 auto;
        height: 13px;
    }
    .calc-ui table#table.ppi thead tr th:nth-child(2), .calc-ui table#table.ppi thead tr th:nth-child(3), .calc-ui table#table.ppi thead tr th:nth-child(4), .calc-ui table#table.ppi thead tr th:nth-child(5), .calc-ui table#table.ppi thead tr th:nth-child(6), .calc-ui table#table.ppi tbody tr td:nth-child(2), .calc-ui table#table.ppi tbody tr td:nth-child(3), .calc-ui table#table.ppi tbody tr td:nth-child(4), .calc-ui table#table.ppi tbody tr td:nth-child(5), .calc-ui table#table.ppi tbody tr td:nth-child(6) {
        padding-left: 0;
        padding-right: 0;
    }
    .calc-ui table#table.ppi thead tr th:nth-child(2), .calc-ui table#table.ppi thead tr th:nth-child(3), .calc-ui table#table.ppi thead tr th:nth-child(4), .calc-ui table#table.ppi thead tr th:nth-child(5), .calc-ui table#table.ppi tbody tr td:nth-child(2), .calc-ui table#table.ppi tbody tr td:nth-child(3), .calc-ui table#table.ppi tbody tr td:nth-child(4), .calc-ui table#table.ppi tbody tr td:nth-child(5) {
        width: 95px !important;
    }
    .chart-card .left {
      min-width: 0;
      width: 100%;
      max-width: 100%;
  }
  .chart-card {
      display: block;
  }
  div#formCard.card.rightCorners.bottomPanel {
    position: relative;
    top: -1px;
    min-height: 32px;
    padding: 0 16px;
  }
  div#formCard.card.rightCorners.bottomPanel p {
    width: fit-content;
    display: inline-block;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  div#formCard.card.rightCorners.bottomPanel p,
  div#formCard.card.rightCorners.bottomPanel p a {
    font-size: 12px;
    color: #666;
  }

}
@media (max-width:550px) {
  .calc-ui th {
    color: #419745;
    font-weight: 500;
    letter-spacing: -.02em;
    vertical-align: top;
    font-size: 12px;
    letter-spacing: -0.04em;
  }
  table#table.ppi tbody tr td {
    padding: 10px;
    vertical-align: top;
    font-size: 13px;
  }
  table#table.ppi tbody tr td.rateCell span {
    margin-left: 0;
    font-size: 10px;
  }
  td.forecastCell.forecastUnavailable span {
    font-size: 11px;
    letter-spacing: -0.01em;
  }
}

/** Trends & color signals **/

.trendCell.positive{
  color: #4b8921;
  font-weight: 300;
}

.trendCell.negative{
  color:#ef624d;
  font-weight: 300;
}

.trendCell.slowing{
  color: #e3932c;
  font-weight: 300;
}

.trendCell.neutral{
  color:#000;
}

.trendCell.limited{
  color: #5c5c5c;
}

.empty {
  color: #111;
}

body .calc-ui table#table.ppi tbody tr.green.drillRow.hasDrillData td:nth-child(6) {
    color: #4b7c33 !important;
} 
.dark-theme .calc-ui table#table.ppi tbody tr.green.drillRow.hasDrillData td:nth-child(6),
.dark-theme .calc-ui table#table.ppi tbody tr.down.drillRow.hasDrillData td:nth-child(6) {
    color: #96c380 !important;
    font-weight: 300;
    cursor: pointer;
}
body .calc-ui table#table.ppi tbody tr.down.noDrillData td:nth-child(6) {
    color: #db4718 !important;
}
body .calc-ui table#table.ppi tbody tr.down.noDrillData td:nth-child(6) {
    color: #FF5722 !important;
}
.dark-theme .calc-ui table#table.ppi tbody tr.down.noDrillData td:nth-child(6) {
  color: #FF5722 !important;
}
body .calc-ui table#table.ppi tbody tr.red.drillRow.hasDrillData td:first-child:hover,
body .calc-ui table#table.ppi tbody tr.red.drillRow.hasDrillData td:first-child:hover::after, 
body .calc-ui table#table.ppi tbody tr.red.noDrillData td:first-child:hover::after, 
body .calc-ui table#table.ppi tbody tr.green.drillRow.hasDrillData td:nth-child(6):hover::after { 
  color: #fff !important;
}
.dark-theme .calc-ui table#table.ppi tbody tr.hasDrillData td:hover:first-child,
.dark-theme .calc-ui table#table.ppi tbody tr.hasDrillData td:target:first-child,
.dark-theme .calc-ui table#table.ppi tbody tr.green.noDrillData td:target:first-child, 
.dark-theme .calc-ui table#table.ppi tbody tr.green.drillRow.hasDrillData td:nth-child(6):target {
    color: #dfeedd !important;
    font-weight: 300;
    cursor: pointer;
}
body .calc-ui table#table.ppi tbody tr.hasDrillData:hover td:first-child,
body .calc-ui table#table.ppi tbody tr.hasDrillData:target td:first-child,
body .calc-ui table#table.ppi tbody tr.hasDrillData:hover td:last-child,
body .calc-ui table#table.ppi tbody tr.hasDrillData:target td:last-child,
body .calc-ui table#table.ppi tbody tr.hasDrillData:hover td:first-child:after,
body .calc-ui table#table.ppi tbody tr.hasDrillData:target td:first-child:after,
body .calc-ui table#table.ppi tbody tr.green.drillRow.hasDrillData:hover td:nth-child(6),
body .calc-ui table#table.ppi tbody tr.down.noDrillData:hover td:nth-child(6) {
    color: #fff !important;
}

/** Trend filtering **/
.trendTh{
  position:relative;
}

.trendFilterBtn{
  border:0;
  background:transparent;
  color:#2f8f3a;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}

.trendFilterIcon{
  margin-left:6px;
  opacity:.75;
}

.trendFilterPanel{
  position:absolute;
  right:0;
  top:100%;
  z-index:50;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  padding:8px;
  min-width:140px;
}
div#vacancyLevelFilterPanel {
    width: 200px;
}
.dark-theme .trendFilterPanel {
  background: #333333;
  border: 1px solid #3f3f3f;
}

.trendFilterPanel button{
  display: block;
  width: 100%;
  height: 30px;
  background: transparent;
  padding: 2px 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  border: 0;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
}

.trendFilterPanel button:hover{
  background:#d8f0c8;
  color: #111;
}
.dark-theme .trendFilterPanel button:hover {
  background:#27ae60;
  color: #fff;
}

.trendFilterOption{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:0;
  background:#f3f3f3;
  padding:8px 10px;
  margin-bottom:4px;
  border-radius:8px;
  text-align:left;
  cursor:pointer;
}

.trendFilterOption.selected{
  background:#d8f0c8;
}
.dark-theme .trendFilterPanel .trendFilterOption.selected {
    background: #4CAF50;
    color: #fff;
}
.dark-theme .trendFilterPanel .trendFilterOption .checkBox {
  opacity: 0.5;
}

.trendFilterOption .checkBox{
  display: inline-block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 2px 5px 0 0;
  border-radius: 4px;
  background: #e8e8e8;
  font-size: 12px;
  font-weight: 300;
  color: #0b8f45;
  vertical-align: top;
}
.calc-ui .trendFilterOption span { 
  display: inline-block;
  height: 14px;
  padding-top: 2px;
  line-height: 14px;
  font-weight: 300 !important;  
  color: #333;  
}

.dark-theme .trendFilterPanel .trendFilterOption span {
  color: #dcdcdc;
}

.trendFilterOption.selected span {
  color: #111;
}
.dark-theme .trendFilterOption.selected span {
  color: #fff;
}
.dark-theme .calc-ui table#table.ppi thead tr th .trendFilterPanel .trendFilterOption.selected .checkBox {
  opacity: 1;
}

.dark-theme .calc-ui table#table.ppi tbody tr td.minus {
  color: #cdeef5;
}
/** Trend filtering **/

.periodHeaderTitle{
  display:block;
  line-height:1.1;
}

.periodHeaderDate{
  display:block;
  margin-top:3px;
  font-size:12px;
  font-weight:500;
  color:#777;
}
.periodHeaderDateOnly{
  display:block;
  font-weight:600;
  color:#2f8f3a;
}
button.trendFilterBtn {
  height: 18px;
  padding: 0;
  background: transparent;
}
.dark-theme button.trendFilterBtn {
  color: #b5b5b5 !important;
}
.calc-ui button.trendFilterBtn:hover {
  background:transparent;
  opacity:0.7;
}
.calc-ui th span.trendFilterIcon {
  position: relative;
  top: -11px;
  left: -4px;
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url('../img/svg/funnel-sprite.svg');
  background-size: auto 14px;
  background-repeat: no-repeat;
  background-position: 0 0;
  border: none;
  font-size: 0;
}
.dark-theme .calc-ui th span.trendFilterIcon {
  background-position: -12px 0;
}
#chart.vertical{
  min-height:760px;
}

#chart.vertical .apexcharts-xaxis text{
  transform:none !important;
}

.dark-theme .calc-ui table#watchListTable tbody#watchListTbody tr:hover td *,
.dark-theme .calc-ui table#watchListTable tbody#watchListTbody tr:hover td.forecastCell.forecastCellActive,
.dark-theme .calc-ui table#watchListTable tbody#watchListTbody tr:hover td.empty.rateCell.watchListRateCell {
  color: var(--ppi-white) !important;
}
.dark-theme .calc-ui div#volatilityTableWrap table.ppi thead tr th {
  border-bottom: 1px solid #444 !important;
}
.volatilityDirectionCell {
	white-space: nowrap;
	text-align: center;
}

.volatilityDirectionCell .upPeriods {
	color: #4caf50;
	font-weight: 600;
}

.volatilityDirectionCell .downPeriods {
	color: #e85444;
	font-weight: 600;
}

div#stockResults table thead#stockThead th,
table#stockOverviewTable thead#stockOverviewThead th {
    padding: 5px 10px;
    background: #f3f3f3;
    font-size: 12.5px;
    color: #333;
}
div#stockResults table thead#stockThead th:not(:first-child) {
    text-align: center;
}

div#stockResults tr.total td {
    background: #eaf6f0;
    border-bottom: 0;
}
.dark-theme div#stockResults tr.total td {
  background: #464646;
}
.dark-theme div#stockResults tr.total td * {
  color: var(--ppi-white);
}

div#stockResults tr.total td strong {
    font-weight: 400;
}

.calc-ui table thead#vacancyThead th {
    font-size: 12px;
    letter-spacing: -0.02em;
}