/* popups and notifications to be used globally with unified style */
 
 /* announcement - traffic cone*/
 .announcement {
    padding: 20px;
    margin: 15px;
    font-size: 21px;
    border-radius: 3px;
    background-color: #e2e200;
    /* magenta complementary */
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%);
}

.announcement p {
    overflow: hidden;
}

.announcement p:before {
    content: "";
    display: block;
    /*display: inline-block;*/
    background: url(/sfsites/c/resource/SS_Logos/images/tbd.svg) no-repeat;
    background-size: contain;
    /*content: url(/sfsites/c/resource/SS_Logos/images/tbd.svg);*/
    float: left;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    margin-right: 15px;
    /*to match padding of announcement*/
    margin-top: 10px;
    /* magic number to move it down, don't know why needed*/
}

/* quickTip - light bulb*/
.quickTip {
    padding: 20px;
    margin: 15px;
    font-size: 21px;
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%);
}

.quickTip p {
    overflow: hidden;
}

.quickTip .tipHeader {
    font-weight: bold;
}

.quickTip:before {
    content: "";
    display: block;
    /*display: inline-block;*/
    background: url(/sfsites/c/resource/SS_Icons/img/quick-tip.svg) no-repeat;
    background-size: contain;
    /*content: url(/sfsites/c/resource/SS_Logos/images/tbd.svg);*/
    float: left;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    margin-right: 15px;
    /*to match padding of announcement*/
    margin-top: 5px;
    /* magic number to move it down, don't know why needed*/
}

.announcement .itemBody ol,
.quickTip .itemBody ol {
	list-style-position: outside;
	text-align: left;
}

.announcement .itemBody ul,
.quickTip .itemBody ul {
	list-style-position: outside;
	list-style-type: square;
	text-align: left;
}

.announcement .itemBody li,
.quickTip .itemBody li {
	text-align: left;
}

.announcement .itemBody ul>li::marker,
.quickTip .itemBody ul>li::marker {
	color: rgb(226, 0, 116);
}

.announcement .itemBody ol>li::marker,
.quickTip .itemBody ol>li::marker {
	color: rgb(226, 0, 116);
	font-weight: bold;
}
/* TODO: add blueish info with i in circle */
/* TODO: add orange warning with ! in triangle */
/* TODO: unify box formatting */