@media screen {
  /* these rules are required for full backdrop coverage */
  html,body {
    margin: 0;
  }
  body {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
  }
  
  /* this is primarily a workaround for Mobile Safari */
  body.impact-tours-modal-open {
    cursor: pointer;
  }
}

@media print {
  .impact-tours {
    display: none;
  }
}

.impact-tours {
  font-family: sans-serif;
}

.impact-tours .tour-summary {
  position: fixed;
  bottom: 25px; right: 25px;
  z-index: 999996;
  
  background: #C73859;
  color: white;
  font-weight: bold;
  padding: 11px 12px;
  font-size: 14px;
}

.impact-tours .tour-all-reports {}

.impact-tours .tours-menu {
  position: fixed;
  margin: 30px auto;
  width: 500px;
  left: 0px; right: 0px;
  top: 0px; min-height: 200px;
  z-index: 999998;
  
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  background: white;
  padding: 15px;
}

.impact-tours .tours-menu .tours-list {
  padding: 0px;
}

.impact-tours .tours-menu .tours-list li {
  display: block;
  margin: 10px 10px 10px 0px;
  padding: 22px;
  
  background: lightgray;
  border: 1px solid #ccc;
  border-radius: 2px;
  color: #666;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  cursor: pointer;
}
.impact-tours .tours-menu .tours-list li:hover {
  background: rgba(0,0,0,0.1);
}




.impact-tours .tour-steps-menu {
  position: fixed;
  bottom: 25px; right: 25px;
  z-index: 999997;
  
  color: white;
  background: #C73859;
  border-radius: 2px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);

  min-width: 300px;
  padding:22px;
}

.impact-tours .tour-steps-menu .tour-name {
  font-weight: bold;
  margin-bottom: 5px;
}


.impact-tours .tour-steps-menu .tour-steps {
  list-style-position: inside;
  padding: 0;
}

.impact-tours .tour-steps-menu .tour-steps li {
  cursor: pointer;
  padding: 2px 0px;
}

.impact-tours .tour-steps-menu .tour-steps li:hover {
  background: rgba(255,255,255,0.1);
}
  
.impact-tours .tour-steps-menu .tour-steps li a {
  text-decoration: none;
  color: inherit;
}
.impact-tours .tour-steps-menu .tour-steps li.most-recent a::after {
  content: "Resume tour";
  
  margin-left: 1ex;
  font-weight: bold;
  
  color: #C73859;
  background: white;
  border-radius: 2px;
  padding: 0 5px;
}
.impact-tours .tour-steps-menu .tour-steps li:first-child.most-recent a::after {
  content: "Start here";
}

.impact-tours .tour-step-display {
  z-index: 999999;
  width: 350px; min-height: 250px;
  padding: 20px;
  
  color: white;
  background: rgba(0,0,0,0.93);     /* was @bg-color */
  border-radius: 4px;
}

.impact-tours .tour-step-display.centered {
  position: fixed;
  margin: auto;
  left: 0; right: 0;
  top: 15%;
}

.impact-tours .tour-step-display.anchored {
  position: absolute;
}
.impact-tours .tour-step-display.anchored::after {      /* anchor triangle */
  content: "";
  position: absolute;
  left: 0; right: 0; margin: auto;
  top: 0; bottom: 0;
  width: 0; height: 0;
  
  border-style: solid;
  border-width: 12px;     /* was @anchor-size */
  border-color: transparent;
}

.impact-tours .tour-step-display.anchored.leftwards {
  margin-left: 12px;
}
.impact-tours .tour-step-display.anchored.leftwards::after {
  right: 100%; left: auto;
  border-left-width: 0;
  border-right-color: rgba(0,0,0,0.93);
}

.impact-tours .tour-step-display.anchored.rightwards {
  margin-left: -12px;
}
.impact-tours .tour-step-display.anchored.rightwards::after {
  left: 100%; right: auto;
  border-right-width: 0;
  border-left-color: rgba(0,0,0,0.93);
}

.impact-tours .tour-step-display.anchored.downwards {
  margin-top: -12px;
}
.impact-tours .tour-step-display.anchored.downwards::after {
  top: 100%; bottom: auto;
  border-bottom-width: 0;
  border-top-color: rgba(0,0,0,0.93);
}

.impact-tours .tour-step-display.anchored.upwards {
  margin-top: 12px;
}
.impact-tours .tour-step-display.anchored.upwards::after {
  bottom: 100%; top: auto;
  border-top-width: 0;
  border-bottom-color: rgba(0,0,0,0.93);
}


.impact-tours button {
  cursor: pointer;
  padding: 6px 12px;
  border: 0;
  color: black;
  background: white;
}

.impact-tours .tour-step-display {
  font-size: 1.1em;
}

.impact-tours .tour-step-display h4 {
  margin-top: 0px;
  font-weight: bold;
}
.impact-tours .tour-step-display p {
  color: #f2f2f2;
}
.impact-tours .tour-step-display button {
  margin-top: 8px;
  font-size: inherit;
  
  color: white;
  font-weight: bold;
  background: rgba(255,255,255,0.18);
  border-radius: 0;
}

.impact-tours .tour-step-display .tour-next-title{
  color: #C73859;
  text-decoration: none;
}


.impact-tours .tour-backdrop {
  position: absolute;
  z-index: 999000;
  top: 0; bottom: 0;
  left: 0; right: 0;
}
.impact-tours .tour-backdrop:not(.panelized) {
  background: rgba(0,0,0,0.375);
}
.impact-tours .tour-backdrop .backdrop-panel {
  position: absolute;
  background: rgba(0,0,0,0.375);
  
  /* NOTE: these are defaults, JS makes adjustments to each */
  top: 0; bottom: 0;
  left: 0; right: 0;
}
.impact-tours .scroll-target {
    visibility: hidden;
    position: absolute;     /* all dimensions assigned by JS */
}