.sp-custom-widget {
    position: relative;
    padding: 0;
    margin: 0;
    background-image: url("../img/universal-header-statuspal.f00509407e27.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    height: 100%;
    min-height: 28px;
    min-width: 28px;
    position: relative;
    border: none;
    outline: none;
    background-color: transparent;
}

.counter {
    height: 16px;
    width: 16px;
    position: absolute;
    top: 5px;
    right: -5px;
    background-color: white;
    color: black;
    text-indent: 0;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    padding: 2px 0 0 0;
    box-sizing: border-box;
}

.sp-has-unread .counter {
  background-color: rgb(255, 149, 110) !important;
}

.sp-custom-widget:hover {
  cursor: pointer;
}

.sp-custom-data-container {
  display: none;
  max-height: 80vh;
  max-width: 50vw;
  background-color: transparent;
  color: #fff;
  text-align: center;
  font-size: 1em;
  line-height: 1.2em;
  z-index: 1;
  overflow-y: scroll;
  padding: 0 0.5em;
}

.sp-event {
  width: 100%;
  max-width: 300px;
  padding: 1em;
  margin-bottom: 1em;
  background-color: #1C2A34;
  box-sizing: border-box;
}

.sp-event p {
  margin-bottom: 1em;
}

.sp-event a {
  color: white;
}

.sp-event-type-scheduled {
  /* background-color: #93BBC8; */
  border-bottom: 4px solid #1f77b4;
}

.sp-event-type-minor {
  /* background-color: orange; */
  border-bottom: 4px solid #D18500;
}

.sp-event-type-major {
  /* background-color: #FF0000; */
  border-bottom: 4px solid #990000;
}

.position-middle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.position-top-right {
  position: fixed;
  top: calc(50px + 60px + 2em); /* universal top-header + local navbar + 2em */
  right: 2em;
  transform: translate(0, 0);
}

.position-bottom-right {
  position: fixed;
  bottom: 2em;
  right: 2em;
  transform: translate(0, 0);
}