/**
 *  !!! COPY-PASTED FROM APERTO !!!
 */
/* ===================================================
BREAKPOINT SETTINGS
=================================================== */
/* ---------------------------------------------------
Transitions
--------------------------------------------------- */
/**
 * Colors
 */
/**
 * Typography
 */
/**
 * Radius
 */
/**
 * Link
 */
/**
 * Animation
 */
/**
 * Shadow
 */
/**
 * Section
 */
/**
 * Input
 */
/**
 * Breakpoints
 */
/**
 * Box
 */
/* Bulma Utilities */
@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
:host {
  display: inline-block;
}

.bal-hint-icon {
  user-select: none;
  cursor: pointer;
  background: #003399;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bal-hint-icon span {
  color: #ffffff;
  font-weight: 700;
  font-family: MetaPro, Arial, sans-serif;
  font-size: 15px;
  margin-top: -1px;
}
.bal-hint-icon:hover {
  background: #002b82;
}

.bal-hint-content {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #003399;
  color: #ffffff;
  padding: 30px;
  min-width: 280px;
}
.bal-hint-content .title {
  color: #ffffff;
}
.bal-hint-content .buttons {
  margin-top: 30px;
}

@media screen and (min-width: 720px), print {
  .bal-hint-content {
    position: absolute;
    margin-left: 40px;
    top: -20px;
    bottom: initial;
    left: initial;
    right: initial;
    box-shadow: 0 0 10px 0 rgba(0, 33, 98, 0.15);
  }
}