/* Darken the overlay */
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  opacity: 0.8;
}

/* Set the main backgound color */
.shepherd-content {
  background: var(--bs-light);
  border-radius: 12px;
  font-family: var(--ACZ-font-family) !important;
}

/* Add a thicker, rounder border */
.shepherd-element {
  border-radius: 15px;
  border: 3px solid silver;
  transition: opacity var(--ACZ-transition-delay);
  max-width: 400px;
}

/* Match rounding in header, tamp down the padding */
.shepherd-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  min-height: 45px;
  height: 45px;
  max-height: 45px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.shepherd-title {
  color: white;
  margin-left: 35px !important;
  flex: 1 1 auto;
}
.shepherd-has-title .shepherd-content .shepherd-header {
  background: var(--bs-dark);
}

/* Adjust the close button */
.shepherd-cancel-icon {
  font-size: 4em;
  font-weight: 700;
  height: 45px;
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
}
.shepherd-cancel-icon > span {
  display: flex;
  width: auto;
  height: auto;
  /* this is used to offset the button - seems to be font specific? */
  margin-top: var(--ACZ-shepherd-top);
}


/* Maybe someone wants to copy this text, like to report a typo or something */
.shepherd-title,
.shepherd-text {
  user-select: text;
}
.shepherd-title > img {
  user-select: none;
}

/* Adjust the footer and in particular the button arrangement */
.shepherd-footer {
  padding: 5px;
  justify-content: space-between;
}
.shepherd-button:hover,
.shepherd-button {
  border-radius: 9px;
  margin-right: 5px;
  border: 3px solid silver !important;
}
/* if only one button, push it right */
.shepherd-button:last-child {
  margin-left: auto;
}

/* Make arrows same color as border */
.shepherd-arrow:after,
.shepherd-arrow:before {
  background: silver;
}

/* if a logo is supplied, make sure it is sized appropriately */
#shepherd-logo > img {
  width: 35px;
  height: 35px;
}