div.sign-container {
    display: block;
    position: relative;
}

span.sign {
    position: absolute;
    top: 0;
    z-index: 10;
    display: block;
    padding: 14px;
    font-size: 12px;
    color: #767676;
    border-radius: 0 4px 0 4px;
}

div.note {
    padding-left: 3em;
    padding: 17px;
    margin-left: 4em;
    margin-right: 17px;
    border-top: solid 3px;
    border-left: solid 3px;
    border-bottom: solid 3px white;
}
div.note-container {
    position: relative;
    margin-right: 6em;
}

.glyph {
    font-size: 2em;
}

.s-fire {
    color:#f04124;
}

div.s-fire>div {
    color: black;
    background-color: #FDCBC3;
    border-color: #ea2f10;
}

.s-alert {
    color: #e99002;
}

div.s-alert>div {
    color: black;
    background-color: #FFFFAD;
    border-color: darkorange;
}

.note>a.urlextern {
    font-weight: bold;
}

.s-globe {
    color:#B075FF;
}

div.s-globe>div {
    color: #6900AD;
    background-color: #F3EAFF;
    border-color:#B075FF;
}

.s-info-sign {
    color: #5bc0de;
}

div.s-info-sign>div {
    color: black;
    background-color: #E1F8FF;
    border-color: #3db5d8;
}

.s-question-sign {
    color: #43ac6a;
}

div.s-question-sign>div {
    color: white;
    background-color: #43ac6a;
    border-color:#3c9a5f;
}

.s-education {
    color: #006687;
}

div.s-education>div {
    color: white;
    background-color: black;
    border-color:#006687;
}

.triangle {
    position: absolute;
    top:0;
    right: 0;
    width:17px;
    height: 100%;
    -webkit-clip-path: polygon(0 0, 100% 17px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 17px, 100% 100%, 0 100%);
    border-bottom: solid 3px;
    border-right: solid 3px;
    border-top: solid 3px;
}

.triangle:before {
    content: "";
    top: -3px;
    right: -3px;
    width: 0px;
    height: 0px;
    position:absolute;
    border-bottom: 17px solid #484848;
    border-right: 17px solid transparent;
    border-radius: 0 0 0 5px;
}

.triangle:after {
    content: "";
    position: absolute;
    top: -3px;
    right:-3px;
    width: 0px;
    height: 0px;
    border-top: 17px solid #fff; 
    border-left: 17px solid transparent;
}

/* NEW CSS THEME*/

.w3-panel {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 10px;
}

.w3-panel>p {
    margin-bottom: 0.2em;
}

.blackglyph {
    font-size: 160%;
    padding: 1%;
    margin-bottom: inherit;
    vertical-align: middle;
}

.n-title {
    font-size: 1.2em;
    font-weight: bold;
    /*vertical-align: middle;*/
}

.n-info-sign {
    background-color: #d9edf7;
    border-left: 6px solid #2183b3;
    color: #2183b3;
}

.n-education {
    background-color: #000000;
    border-left: 6px solid #02a2d6;
    color: #ffffff;
}

.n-question-sign {
    background-color: #dff0d8;
    border-left: 6px solid #3c763d;
    color: #3c763d;
}

.n-fire {
    background-color: #f2dede;
    border-left: 6px solid #da5856;
    color: #a94442;
}

.n-alert {
    background-color: #fcf8e3;
    border-left: 6px solid #ffeb3b;
    color: #8a6d3b;
}

.n-globe {
    background-color: #f3eaff;
    border-left: 6px solid #b075ff;
    color: #8f3cff;
}

.n-globe>p>a.urlextern {
    color: #2f28ff;
}