:root {
    /*Derive notes styles from jsapplication menu styles*/
    --notes-background-color: var(--background-color-light);
    --notes-color: var(--color-light);
    --notes-color-error: #ff0000;
    --notes-border-color: var(--border-color-light);
    --notes-border: 1px solid var(--notes-border-color);
    --notes-border-radius: 0;
    --notes-z-index: 3000;
    --notes-top-margin: var(--menu-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: 5rem;
    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(--icon-w) var(--icon-h);
    padding: var(--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);
}


/*Overrite 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(--icon-w) var(--icon-h) !important;
    padding: var(--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(--icon-w) var(--icon-h) !important;
    padding: var(--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(--icon-w) var(--icon-h) !important;
    padding: var(--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(--icon-w) var(--icon-h) !important;
    padding: var(--padding) !important;
    padding-left: var(--notes-padding-left) !important;
}

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