:root{
    --html-background-color: #f2f3fa;
    --positive-cell-color-light-light:#93e5d7;
    --positive-cell-color-light-dark:#3cbba6;
    --negative-cell-color-light-light:#ffabb1;
    --negative-cell-color-light-dark:#f85d69;
    --positive-cell-color-dark-dark:#165650;
    --positive-cell-color-dark-light:#33b39e;
    --negative-cell-color-dark-dark:#7d2b39;
    --negative-cell-color-dark-light:#ad2c39;
    --zero-cell-color:#8f93a5;
    --dark-border-color:#434651;
    --light-border-color:#e0e3eb;
		--logo-background-color:transparent;
    --heatmap-heading-color:#fff;
    --text-color:#000;
}
* {
    font-family: -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif;
}

#heatmap {
    background-color: #fff;
    color: #d1d4dc;
    text-align: center;
    height: 100%;
    width: 100%;
    border-spacing: 0px;
    font-size: 12px;
    border-collapse: collapse;
		overflow:hidden;
		border-radius: 3px;

}
body.dark tr td,body.dark tr th{
  background-color: #fff;
  border-bottom: 1px solid var(--dark-border-color);
  border-right: 1px solid var(--dark-border-color);
  font-weight: 500;
  left: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  background: #1e222d;
	 padding: 15px;
}
body.light tr th {
  background-color: #fff;
  border-bottom: 1px solid var(--light-border-color);
  border-right: 1px solid var(--light-border-color);
  font-weight: 500;
  overflow: hidden;
  position: sticky;
  top: 0;
  left:0;
  background: #fff;
  color: var(--text-color);
  padding: 15px;
}
body.light tr td {
  background-color: #fff;
  border-bottom: 1px solid var(--light-border-color);
  border-right: 1px solid var(--light-border-color);
  font-weight: 500;
  background: #fff;
  color: var(--text-color);
  padding: 15px;
}
tr th, tr td:first-child {
      color: var(--heatmap-heading-color);
      font-weight: 700;
  }
tr img {
    border-radius: 10px;
    margin-right: 5px;
}
tr div{
  display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
thead{
  display: table-row-group;
}
body.dark tr td.mystyle1{
  color: #fff;
  background-color: var(--positive-cell-color-dark-light);
}
body.dark tr td.mystyle2{
  background-color: var(--positive-cell-color-dark-dark);
  color: #fff;
}
body.dark tr td.mystyle11{
  background-color: var(--negative-cell-color-dark-dark);
  color: #fff;
}
 body.dark tr td.mystyle22{
  background-color: var(--negative-cell-color-dark-light);
  color: #fff;
}
body.dark tr td.mystyle3{
  background-color: var(--zero-cell-color);
  color: #fff; 
}
body.light tr td.mystyle1{
  color: #fff;
  background-color: var(--positive-cell-color-light-light);
}
body.light tr td.mystyle2{
  background-color: var(--positive-cell-color-light-dark);
  color: #fff;
}
 body.light tr td.mystyle11{
  background-color: var(--negative-cell-color-light-light);
  color: #fff;
}
 body.light tr td.mystyle22{
  background-color: var(--negative-cell-color-light-dark);
  color: #fff;
}
body.light tr td.mystyle3{
  background-color: var(--zero-cell-color);
  color: #fff; 
}
body.dark tr th, body tr td:first-child {
  border-top: 1px solid var(--dark-border-color);
  border-left: 1px solid var(--dark-border-color);
}
body.light tr th, body tr td:first-child {
  border-top: 1px solid var(--light-border-color);
  border-left: 1px solid var(--light-border-color);
}

body.transparent table#heatmap, body.transparent tr td, body.transparent tr th {
    background: transparent;
}
body table tr td.l__p{
  background: url(../../img/logo_thaurus.png),var(--logo-background-color);
    background-size: 80px 30px;
    background-position: center;
    background-repeat: no-repeat;
}