:root {
  /*Derive notes styles from jsapplication menu styles*/
  --notes-background-color: var(--jsa-bg-color);
  --notes-color: var(--jsa-color);
  --notes-color-error: var(--jsa-color-error);
  --notes-border-color: var(--jsa-bd-color);
  --notes-border: 1px solid var(--notes-border-color);
  --notes-border-radius: 0;
  --notes-z-index: 3000;
  --notes-top-margin: var(--jsa-app-title-bar-h);
  /*--notes-padding-left: calc(var(--icon-w)+var(--padding)); does not work. Why?*/
  --notes-padding-left: 2rem;

  --notes-success-icon: url(../img/notes-success.svg);
  --notes-info-icon: url(../img/notes-info.svg);
  --notes-warning-icon: url(../img/notes-warning.svg);
  --notes-error-icon: url(../img/notes-error.svg);
}

.tool-notes {
  background-image: url(../img/tool-notes.svg);
  font-size: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tool-notes-info-bubble {
  width: auto;
  height: auto;
}

.tool-notes-info-bubble-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tool-notes-info-bubble-container .notes-list {
  width: 100%;
  height: auto;
  max-height: 18rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.tool-notes-info-bubble-container .clear-button {
  margin-top: var(--padding);
}

.note {
  color: var(--notes-color);
  background-color: var(--notes-background-color);
  background-size: var(--jsa-icon-w-s) var(--jsa-icon-w-s);
  background-position-x: var(--jsa-padding);
  background-position-y: var(--jsa-padding);
  padding: var(--jsa-padding);
  padding-left: var(--notes-padding-left);
  background-repeat: no-repeat;
}

.note h2 {
  font-size: 0.5rem;
  font-weight: normal;
  color: var(--notes-color);
}

.note-success {
  background-image: var(--notes-success-icon);
}

.note-info {
  background-image: var(--notes-info-icon);
}

.note-warning {
  background-image: var(--notes-warning-icon);
}

.note-error {
  background-image: var(--notes-error-icon);
}

/*Override bootstrap notify styles*/
/*!important is necessary since notify defines styles inline*/
.notifyjs-bootstrap-success {
  font-weight: normal !important;
  text-shadow: none !important;
  color: var(--notes-color) !important;
  background-color: var(--notes-background-color) !important;
  background-image: var(--notes-success-icon) !important;
  border: var(--notes-border) !important;
  border-radius: var(--notes-border-radius) !important;
  background-size: var(--jsa-icon-w-s) var(--jsa-icon-w-s) !important;
  padding: var(--jsa-padding) !important;
  padding-left: var(--notes-padding-left) !important;
}

.notifyjs-bootstrap-info {
  font-weight: normal !important;
  text-shadow: none !important;
  color: var(--notes-color) !important;
  background-color: var(--notes-background-color) !important;
  background-image: var(--notes-info-icon) !important;
  border: var(--notes-border) !important;
  border-radius: var(--notes-border-radius) !important;
  background-size: var(--jsa-icon-w-s) var(--jsa-icon-w-s) !important;
  padding: var(--jsa-padding) !important;
  padding-left: var(--notes-padding-left) !important;
}

.notifyjs-bootstrap-warn {
  font-weight: normal !important;
  text-shadow: none !important;
  color: var(--notes-color) !important;
  background-color: var(--notes-background-color) !important;
  background-image: var(--notes-warning-icon) !important;
  border: var(--notes-border) !important;
  border-radius: var(--notes-border-radius) !important;
  background-size: var(--jsa-icon-w-s) var(--jsa-icon-w-s) !important;
  padding: var(--jsa-padding) !important;
  padding-left: var(--notes-padding-left) !important;
}

.notifyjs-bootstrap-error {
  font-weight: normal !important;
  text-shadow: none !important;
  color: var(--notes-color-error) !important;
  background-color: var(--notes-background-color) !important;
  background-image: var(--notes-error-icon) !important;
  border: var(--notes-border) !important;
  border-radius: var(--notes-border-radius) !important;
  background-size: var(--jsa-icon-w-s) var(--jsa-icon-w-s) !important;
  padding: var(--jsa-padding) !important;
  padding-left: var(--notes-padding-left) !important;
}

.notifyjs-corner {
  top: var(--notes-top-margin) !important;
  z-index: var(--notes-z-index) !important;
}
