:root {
  --climate-x: 85px;
  --climate-y: 105px;
  --economic-x: 260px;
  --economic-y: 100px;
  --social-x: 170px;
  --social-y: 265px;

  --margin-left-info: 350px;

--compass_svg-top: 240px;
--compass_svg-left: 90px;
--icon-container-left: 50px;
--icon-container-top: 200px;
--compass_indicators-left: -150px;
--compass_indicators-top: 0px;
--compass-chart-width: 850px;
--compass-chart-height: 400px;
--compass-theme-content: 800px;
--compass-front-content-width: 650px;

--mobile-only-intro-height: 350px;
}

.compass-front-content-main-mobile {
height: var(--mobile-only-intro-height)!important;
overflow:hidden;

}
.compass-front-content-main-mobile h2 {
font-size:20px;
margin-bottom:10px;
}

.compass-front-content-title {
 display:flex;
 width:100%!important;
 justify-content:space-between;
 margin-top:10px;
 align-items:center;
}

.compass-front-content-title img {
width:90px;
height:90px;
}

.compass-front-content-main span, h2, h3 {
  color:#4C4C4C;
}
.compass-front-content h2 {
  font-size:38px;
}

.compass-indicator-name {
font-size:20px!important;
}
/*=================================================================== */

@media only screen and (min-width: 1501px) {

.ecl-breadcrumbs__link {
    color: #fff;
    display: inline-block;
    font-weight: bold;
    margin-right: 0.33rem!important;
    text-decoration: none;
}

.ecl-breadcrumbs{
    font-size: 14.1px!important;
}

.ecl-breadcrumbs ol{
    font-size: 14.1px!important;
}
#compassLoader { height:500px!important; margin-top:200px;}
#emptyCompass {margin-left:200px;}
#leaf {margin-left:100px;}


#compass-section {
	display: flex!important; 
	flex-direction: row!important; 
	justify-content:center;
	padding: 0;
	margin: 0;
}
#compass-container {
	flex: 0 0 45%;
	width: auto; 
	height: 700px;
	justify-content:space-around ;
	animation: compassRightSlideOut 0.3s ease forwards;
}

#compass-info {
    display: flex;
    /* flex: 40%;
    width: auto; */
    max-height: 800px;
    flex-direction: column;
	}
#compass-info-container {
	flex: 0 0 60%;
	display: flex; 
	flex-direction: column; 
    align-items: flex-end;
	width:10%!important;
	/*justify-content: flex-start;*/
	justify-content: space-evenly;
 /*   margin-left: -200px!important; when isExpanded == false */ 
}

.compass-front-content-main{
display:block!important;
}


.compass-front-content-title {
 display:flex;
 width:100%!important;
 justify-content:space-between;
 margin-top:10px;
 align-items:center;
}

.compass-front-content-title img {
width:90px;
height:90px;
}

.compass-front-content-main span, h2, h3 {
  color:#4C4C4C;
}
.compass-front-content h2 {
  font-size:38px;
}


#qlik-chart {
   --compass-chart-width: 100%!important;
   margin-left: 5px!important;
}
#compass_indicators {
    transform-origin: center, center;
    position: absolute;
    top: var(--compass_indicators-top);
    left: var(--compass_indicators-left);
    display: block;
    z-index: 1;
    overflow: visible;
}
#compass_svg {
    position: absolute;
    top: var(--compass_svg-top);
    left: var(--compass_svg-left);
    z-index: 2;
}

 .ms-link-a, .download-data-button{
   font-size:medium!important;
}
.details-link-a{
   font-size:medium!important;
}

.email_us_container_2col {
    flex-direction: row!important;
}
.compass-front-content-main-mobile{display:none;}
}

/*=======================================================================*/

@media only screen and (min-width: 500px) and (max-width: 1500px) {
#compassLoader { height:500px!important; margin-top:200px;}
#emptyCompass {margin-left:200px;}
#leaf {margin-left:100px;}

#compass-section {
  flex-direction: column!important;
  --compass_svg-left: 90px;
  --compass_indicators-left: -150px;
  --icon-container-left: 50px;
  height: 100%!important;
  
}

#compass-info-container {
  width:100%!important;
  padding-right:20px!important;
  margin-left:0px!important;
}

.compass-theme-content {
  --compass-theme-content:100%!important;
  margin-left:20px!important;
  padding-right:20px!important;
}

.compass-chart-content {
  --compass-theme-content:100%!important;
  margin-left:20px!important;
  padding-right:20px!important;
}

#qlik-chart {
  margin-left:-20px!important;
  --compass-chart-width: 100%!important;
}

#compass-container {
  height:700px!important;	
  margin-top:-100px;
  margin-left:25%;
  width:100%!important;
  animation:none;
}

.compass-front-content {
  --compass-front-content-width: 100%!important;
}
.compass-front-content-main {
    display: block!important;
}

.details-link-a, .ms-link-a, .download-data-button {
    font-size: medium;
}
.email_us_container_2col {
    flex-direction: row!important;
}
.compass-front-content-main-mobile {
    display:none!important;
}

}

/*===================================================================*/

@media only screen and (min-width: 400px) and (max-width: 499.99px) {
#compassLoader { height:300px!important;}
#compass-section {
  flex-direction: column!important;
  height:auto!important;
}
#compass-container {
  height:300px!important;
  width:100%!important;
  --compass_svg-left: 25px;
  --compass_svg-top: 420px;
  animation:none!important;
}

#compass_svg{
  height:200px;
  width:200px;
  margin-left:14px;
}
#icon-container {
 transform: scale(0.65) translateX(-50%);
     --icon-container-top: 390px;
    --icon-container-left: 4px;
    position: absolute!important;
}

#compass_indicators {
display:block!important;
 transform: scale(0.62); 
 --compass_indicators-top: 120px;
 --compass_indicators-left: -185px;
}
#compass-useful-links{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px;
    gap:0px; 
}
#detailsMSlink{
    display: block;
    background-color: rgb(236, 236, 236);
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    margin-right: 10px;
    text-align: -webkit-center;
} 
#indicatorDefLink{
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
	text-align: -webkit-center;
}

.details-link-a, .download-data-button {
    font-size: small!important;
}

#compass-info-container {
  width:100%!important;
  padding-right:10px!important;
  margin-left:0px!important;
}

.compass-chart-content {
  --compass-theme-content:100%!important;
  margin-left:10px!important;
}

#qlik-chart {
  margin-left:-20px!important;
  --compass-chart-width: 100%!important;
  --compass-chart-height: 250px!important;
}

.compass-front-content h2 {
  font-size:24px!important;
}

.compass-front-content {
  --compass-front-content-width: 100%!important;
}

.compass-theme-content {
  --compass-theme-content:100%!important;
  margin-left:10px!important;
  padding-right:10px!important;
  margin-top:10px!important;
}

.compass-theme-content-header h2 {
  font-size:18px!important;
}

.compass-theme-content-header img {
  width:40px!important; 
  height:40px!important;
}
.details-link-a, .download-data-button {
    font-size: small!important;
}
.ecl-breadcrumbs ol {
  font-size:10px;
}

.ecl-breadcrumbs__link{
  margin:0;
}

.flex-item-compass {
width: 30%!important;
}

.compass-front-content-main{ display:none;}
.compass-front-content-main-mobile {display:block!important; margin-top:20px;}
/* #detailsMSlink {display:none;} */

.compass-indicator-header img{
  width:25px!important;
  height:25px!important;
}
.email_us_container_2col {
    flex-direction: row!important;
}

}

/* ========================================================================= */
@media only screen and (min-width: 350px) and (max-width: 399px){
.compass-front-content-main-mobile {
    display: block!important;
    margin-top: 20px;
}

#compass-section {
    flex-direction: column!important;
    height: auto!important;
}

#compass-container {
    height: 300px!important;
    width: 100%!important;
    --compass_svg-left: 0px;
    --compass_svg-top: 450px;
    animation: none !important;
}
#icon-container {
    transform: scale(0.65) translateX(-50%);
    --icon-container-top: 0px;/* was 50*/
    --icon-container-left: 20px;
}
#compass_svg {
    height: 200px;
    width: 200px;
}
#compass_indicators {
    transform: scale(0.615);
    --compass_indicators-top: 150px;
    --compass_indicators-left: -223px!important;
}
#compassLoader {
    height: 300px!important;
}
#compass-info-container {
    width: 100%!important;
    padding-right: 10px!important;
    margin-left: 0px!important;
}
.compass-front-content {
    --compass-front-content-width: 100%!important;
}
.compass-theme-content {
    --compass-theme-content: 100%!important;
    margin-left: 10px!important;
    padding-right: 10px!important;
    margin-top: 30px!important;
}
.compass-chart-content {
    --compass-theme-content: 100%!important;
    margin-left: 10px!important;
}

#detailsMSlink{
    display: block;
    background-color: rgb(236, 236, 236);
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    margin-right: 10px;
    text-align: -webkit-center;
} 
#indicatorDefLink{
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
	text-align: -webkit-center;

}
.details-link-a, .download-data-button {
    font-size: small!important;
}

.compass-chart-content {
  --compass-theme-content:100%!important;
  margin-left:10px!important;
}

#qlik-chart {
  margin-left:-20px!important;
  --compass-chart-width: 100%!important;
  --compass-chart-height: 250px!important;
}
#compass-useful-links{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px;
    gap:0px; 
}
#detailsMSlink{
    display: block;
    background-color: rgb(236, 236, 236);
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    margin-right: 10px;
    text-align: -webkit-center;
} 
#indicatorDefLink{
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
	text-align: -webkit-center;

}

.compass-front-content h2 {
  font-size:24px!important;
}

.compass-front-content {
  --compass-front-content-width: 100%!important;
}

.compass-theme-content {
  --compass-theme-content:100%!important;
  margin-left:10px!important;
  padding-right:10px!important;
  margin-top:30px!important;
}

.compass-theme-content-header h2 {
  font-size:18px!important;
}

.compass-theme-content-header img {
  width:40px!important; 
  height:40px!important;
}

.ecl-breadcrumbs ol {
  font-size:10px;
}

.ecl-breadcrumbs__link{
  margin:0;
}

.email_us_container_2col {
flex-direction:column-reverse;
align-items:flex-start;
}
.flex-item-compass {
width: 30%!important;
}

.compass-front-content-main{ display:none;}
.compass-front-content-main-mobile {display:block!important; margin-top:20px;}


.compass-theme-content-header img{
  width:30px!important;
  height:30px!important;
}
.email_us_container_2col {
    flex-direction: row!important;
}
}
/*============================================================================*/

@media only screen and (min-width: 300px) and (max-width: 349.99px) {
#compass-section {
    flex-direction: column!important;
    height: auto!important;
}
.compass-front-content-main-mobile {
    --mobile-only-intro-height: 400px;
    display: block!important;
    margin-top: 20px;
}
#compass-container {
    height: 300px!important;
    width: 100%!important;
    --compass_svg-left: -10px;
    --compass_svg-top: 480px;
    animation: none !important;
}
#icon-container {
    transform: scale(0.63) translateX(-50%);
    --icon-container-top: 30px;
    --icon-container-left: -5px;
}
#compass_svg {
    height: 190px;
    width: 190px;
}
#compass_indicators {
    transform: scale(0.6);
    --compass_indicators-top: 175px;
    --compass_indicators-left: -235px!important;
}
#compassLoader {
    height: 300px!important;
}
#compass-info-container {
    width: 100%!important;
    padding-right: 10px!important;
    margin-left: 0px!important;
}
.compass-front-content {
    --compass-front-content-width: 100%!important;
}
.compass-theme-content {
    --compass-theme-content: 100%!important;
    margin-left: 10px!important;
    padding-right: 10px!important;
    margin-top: 10px!important;
}
.compass-chart-content {
    --compass-theme-content: 100%!important;
    margin-left: 10px!important;
}
#compass-useful-links{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px;
    gap:0px; 
}
#detailsMSlink{
    display: block;
    background-color: rgb(236, 236, 236);
    padding: 3px 5px;
    border-radius: 5px;
    margin-right: 10px;
    text-align: -webkit-center;
} 
#indicatorDefLink{
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
	text-align: -webkit-center;

}
.details-link-a, .download-data-button {
    font-size: small!important;
}
.compass-chart-content {
  --compass-theme-content:100%!important;
  margin-left:10px!important;
}

#qlik-chart {
  margin-left:-20px!important;
  --compass-chart-width: 100%!important;
  --compass-chart-height: 250px!important;
}


.compass-front-content-ind-text img {
width: 45px!important;
height: 45px!important;
}
.compass-front-content-ind-text h3 {
  font-size:18px!important;
}

.compass-front-content {
  --compass-front-content-width: 100%!important;
}

.compass-theme-content {
  --compass-theme-content:100%!important;
  margin-left:10px!important;
  padding-right:10px!important;
  margin-top:10px!important;
}

.compass-theme-content-header h2 {
  font-size:16px!important;
}

.compass-theme-content-header img {
  width:30px!important; 
  height:30px!important;
}
.email_us_container_2col {
    flex-direction: row!important;
}
}

/* ===========================================================================*/

@media only screen and (min-width: 0px) and (max-width: 299.99px) {
#compassLoader { height:300px!important;margin-left:90px!important;}
#compass-section {
  flex-direction: column!important;
  height:auto!important;
}
#compass-container {
  height:300px!important;
  width:100%!important;
  --compass_svg-left: 25px;
  --compass_svg-top: 420px;
  animation:none!important;
}

#compass_svg{
  height:200px;
  width:200px;
  margin-left:14px;
}
#icon-container {
 transform: scale(0.65) translateX(-50%);
     --icon-container-top: 390px;
    --icon-container-left: 4px;
    position: absolute!important;
}

#compass_indicators {
 transform: scale(0.62); 
 --compass_indicators-top: 120px;
 --compass_indicators-left: -185px;
}
#compass-useful-links{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px;
    gap:0px; 
}
#detailsMSlink{
    display: block;
    background-color: rgb(236, 236, 236);
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    margin-right: 10px;
    text-align: -webkit-center;
} 
#indicatorDefLink{
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
	text-align: -webkit-center;

}
.details-link-a, .download-data-button {
    font-size: small!important;
}
#compass-info-container {
  width:100%!important;
  padding-right:10px!important;
  margin-left:0px!important;
}


.compass-chart-content {
  --compass-theme-content:100%!important;
  margin-left:10px!important;
}

#qlik-chart {
  margin-left:-20px!important;
  --compass-chart-width: 100%!important;
  --compass-chart-height: 250px!important;
}


.compass-front-content-ind-text img {
width: 45px!important;
height: 45px!important;
}
.compass-front-content-ind-text h3 {
  font-size:18px!important;
}

.compass-front-content {
  --compass-front-content-width: 100%!important;
}

.compass-theme-content {
  --compass-theme-content:100%!important;
  margin-left:10px!important;
  padding-right:10px!important;
  margin-top:10px!important;
}

.compass-theme-content-header h2 {
  font-size:16px!important;
}

.compass-theme-content-header img {
  width:30px!important; 
  height:30px!important;
}

.email_us_container_2col {
    flex-direction: row!important;
}
}

/* ===========================================================================*/

.ecl-breadcrumbs ol {
   font-size: 14.1px;
}

.ecl-breadcrumbs__link{
  margin:0;
}

.email_us_container_2col {
flex-direction:column-reverse;
align-items:flex-start;
}
.flex-item-compass {
width: 30%!important;
}

.compass-front-content-main{ display:none;}

.compass-front-content-main-mobile {
	--mobile-only-intro-height: 400px;
	display:block; 
	margin-top:20px;
}

#detailsMSlink {display:none;}


.compass-front-content-main-mobile {
display:none;
}

.no-animation {
  animation: none !important;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#compass-section {
  position:relative;
  height: 800px;
  display:flex;
  flex-direction:row;
  align-items: flex-start;
}

#compass-container {
height:700px;	
  width:40%;

  animation: fadeIn ease-in .35s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

  animation: leftSlideIn ease .35s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#compass-info-container {
  width:600px;
  transition-duration: 0.5s;
}


#compass_svg {
  position:absolute;
  top:var(--compass_svg-top);
  left:var(--compass_svg-left);
  z-index:2;
}

#icon-container {
  position: relative;
  top: var(--icon-container-top);
  left:var(--icon-container-left);
  z-index:5;
}

#compass_indicators {
  transform-origin: center, center;
  position:absolute;
  top:var(--compass_indicators-top);
  left:var(--compass_indicators-left);
  display:block;
  z-index:1;
  overflow:visible;
}

.compass-chart-content {
  display:flex;
  flex-direction: column;
  justify-items: flex-start;
  margin-top:50px;
  margin-left:-50px;
  width:var(--compass-theme-content);
  animation: rightSlideIn ease .3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.compass-theme-content {
  display:flex;
  flex-direction: column;
  justify-items: flex-start;
  margin-top:50px;
  margin-left:-50px;
  width: var(--compass-theme-content);
  animation: rightSlideIn ease .3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.first-load-message{
  font-weight: 700;
}

#economic_group, #social_group, #climate_group {
  position:relative;
  z-index:3;
}

#compass-info-container a {
  text-decoration:none!important;
}
#home_group:hover {
  cursor:pointer;
  fill: red;
}
#homeCircle, #homeRect {
  fill: #c2c1c0;
}
.home-gray {
  fill: #c2c1c0;
}
.home-white {
  fill: white;
}
#compass, #economic_btn, #social_btn, #climate_btn{
  transition-duration: 0.5s;
  transition-property: transform;
  transform-origin: center center;
}
#economic_btn:hover, #social_btn:hover, #climate_btn:hover {
  cursor:pointer;
  -webkit-filter:brightness(110%);
  filter:brightness(110%);
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

.slice:hover, .slice_text:hover, .slice_full:hover {
  -webkit-filter: saturate(150%);
  filter: saturate(150%);
  cursor:pointer;
}
.slice_selected {
  -webkit-filter:brightness(115%);
  filter:brightness(115%);
}

.hidden {
  display:none;
}
.visible {
  display:block;
}
.slice_full {
  text-decoration:none!important;
}

#icon-container img {
  width:60px;
  height:60px;
}
#icon-container img:hover {
  cursor:pointer;
}
#economicDiv {
  position:absolute;
  left: var(--economic-x);
  top: var(--economic-y);
  width:60px;
  height:60px;
}
#socialDiv {
  position: absolute;
  left: var(--social-x);
  top: var(--social-y);
  width:60px;
  height:60px;
}
#climateDiv {
  position: absolute;
  left: var(--climate-x);
  top: var(--climate-y);
  width:60px;
  height:60px;
}

@keyframes rightSlideIn {
  0% {
      opacity: 0;
      transform:translateX(5%);
  }
  100% {
      opacity: 1;
      transform:translateX(0%);
  }
}
@keyframes compassRightSlideOut {
  0% {
      opacity: 0;
      transform:translateX(0%);
  }
  100% {
      opacity: 1;
      transform:translateX(-35%);
  }
}
@keyframes compassRightSlideOutTablet {
  0% {
      opacity: 0;
      transform:translateX(0%);
  }
  100% {
      opacity: 1;
      transform:translateX(-30%); /*was -20*/
  }
}
@keyframes compassLeftSlideIn {
  0% {
      opacity: 0;
      transform:translateX(-60%);
  }
  100% {
      opacity: 1;
      transform:translateX(0%);
  }
}
@keyframes leftSlideIn {
  0% {
      opacity: 0;
      transform:translateX(-5%);
  }
  100% {
      opacity: 1;
      transform:translateX(0%); /* was 0*/
  }
}
@keyframes leftSlideInDesktop {
  0% {
      opacity: 0;
      transform:translateX(-5%);
  }
  100% {
      opacity: 1;
      transform:translateX(15%);
  }
}

@keyframes slideInfoContent {
  0% {
      transform:translateX(0%);
  }
  100% {
      transform:translateX(15%);
  }
}
.compass-front-content {
  animation: rightSlideIn ease .3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.compass-front-content, .compass-indicator-content{
  display:block;
  width:var(--compass-front-content-width);
}
.compass-front-content-main span, h2, h3 {
  color:#4C4C4C;
}
.compass-front-content h2 {
  font-size:38px;
}
.compass-front-content h3 {
  font-size:20px;
}
.compass-front-content span {
  font-size:16px;
margin-bottom:10px;
}
.compass-front-content-ind {
  display:flex;
  padding-top: 20px;
  justify-content:space-between;
  align-items:center;
}
.compass-front-content-ind img {
  width:50px;
  height:50px;
padding:5px;
}

.compass-front-content-ind-text a {
display:flex;
align-items:center;
}

.compass-front-content-ind-text h3 {
margin-left: 15px;
font-size: 20px;
font-weight:600;
}

.compass-theme-content-header {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.compass-theme-content-header h2{
  font-size:36px;
}
.compass-theme-content-header img{
  width:50px;
  height:50px;
  margin-bottom:5px;
}
.compass-indicator-header {
  display:flex;
  align-items: center;
  flex-direction:row;
  align-content:center;
}
.compass-indicator-header h2 {
  margin-left:10px;
}
.compass-indicator-header img {
  width:50px;
  height:50px;
  margin-bottom:5px;
}
.economic-border {
  border-bottom: 0.5px solid lightblue;
}
.climate-border {
  border-bottom: 0.5px solid lightgreen;
}
.social-border {
  border-bottom: 0.5px solid #f2ab40;
}
.economic-blue p:first-of-type {
  color:#004494!important;
}
.climate-green p:first-of-type {
  color:#2f9044!important;
}
.social-orange p:first-of-type {
  color:#f2ab40!important;
}

#qlik-chart {
  display:none;
  margin-top:30px;
  width: var(--compass-chart-width);
  height:var(--compass-chart-height);
  margin-left: -50px;
}
.compass-useful-links {
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  padding:10px;
}
.compass-bottom-links {
  font-weight:300;
  color:white;
  cursor: pointer;
}
.bottom-link a:hover {
  color:white;
  text-decoration:none;
  opacity: 0.8;
  -webkit-filter: saturate(120%);
  filter: saturate(120%);
}
.bottom-link a:visited {
  color:white;
  text-decoration:none;
}
#svgExportData {
position: relative;
z-index:9;
}



/* verdict legend */
#verdict_legend {
display:flex;
}

#verdict-info-icon {
width:75px;
height:75px;
opacity:20%;
margin-right:25px;
}

#verdict_legend_infotext {
display:flex;
flex-direction:row;
align-items:center;
}

#verdict_legend_infotext img {
width:40px;
height:40px;
margin-right:10px;
}		

#verdict_legend_items {
display:flex;
flex-direction:row;
justify-content:flex-start;
gap:50px;
margin-top:5px;
}

#verdict_legend_items img {
width:40px;
height:40px;
margin-right:5px;
}		


.flex-container-compass {
	width:auto;
	display: flex;
	flex-direction: column;
}
.flex-row-compass {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	border-bottom: .25px solid lightblue;
}

.tableheader-light-compass{
	background-color:#7FABDF;
	color: white;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:12px;
	align-content:flex-start;
}

.flex-item-compass {
	padding:.5em .5em .5em 2em;
	border-left: .25px solid lightblue;
	width:15%;
}



/*  ============= LOADER =========== */
#compassLoader {
  position: absolute;
  height:700px;
  width:700px;
  background: white;
  z-index:9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transform:translateX(-180px);

}

#emptyCompass {
  
  width: 200px;
  height: auto;
  animation: fadeIn ease-in .3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#leaf {
  position: absolute;
  top: 50%;
  left: 49.5%;
  width: 30px; /* Adjust size of the leaf */
  height: auto;
  transform: translate(-50%, -50%); /* Center the leaf */
  transform-origin: center center; /* Set rotation origin */
  animation: rotateLeaf 1.5s infinite linear; /* Rotate animation */

}

@keyframes rotateLeaf {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

#popupText {
	width:100%; 
	height:100vh; 
	position:absolute; 
	background-color:rgba(255, 255, 255, 0.9); 
	display:none; 
	justify-content:center; 
	align-items:center;
	font-size:20px;
	z-index:999;
}

/* ============================ context menu ==================================== */

#contextMenu {
  position: fixed;
  background-color: #fff; /* Background color */
  border: 1px solid #ccc; /* Border color */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Box shadow for a subtle elevation effect */
  max-width: 200px; /* Maximum width of the menu */
  font-family: Arial, sans-serif; /* Choose a suitable font */
  z-index: 1000; /* Ensure the menu appears above other elements */
}

#contextMenu div {
  padding: 8px; /* Padding for each menu item */
  cursor: pointer;
  transition: background-color 0.3s; /* Smooth transition for hover effect */

  /* Define styles for unselected and hover states */
  color: #333; /* Text color for unselected state */
}

#contextMenu div:hover {
  background-color: #f0f0f0; /* Background color on hover */
  color: #000; /* Text color on hover */
}

.context-menu-icon {
width:20px;
height:20px;
margin-right:10px;
}

#contextMenuViewData {
margin-top:30px;
width:100%;
height:var(--compass-chart-height);
overflow: scroll;
}

#viewDataTable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #efefef;
  font-size:14px;
}

#viewDataTable th, #viewDataTable td {
  padding: 3px;
  text-align: left;
   border: 1px solid #efefef;
}

#viewDataTable th {
  background-color: #f2f2f2;
}

#viewDataTable tr:nth-child(even) {
  background-color: #f9f9f9;
}

#viewDataTable {
max-height:var(--compass-chart-height);
overflow: scroll;
}