/* Standard hints (hint, validation
-------------------------------------------------------------- */
img.hint {
    cursor: help;
    display: inline-block;
    vertical-align: top;
    margin: 2px 0 0 5px;
}
img.validation {
    cursor: help;
}
span.required {
    color: #FF0000;
}
div.tooltip {
    box-shadow: none;
    font-family: Arial, Helvetica, sans-serif;    
}
div.tooltip > div:last-child {
    color: #FFFFFF;
    padding: 5px;
}
div.tooltip.hint {
    background-color: #000000;
    border-color: #000000;
}
div.tooltip.hint > div:first-child, div.tooltip.hint > div:first-child::after {
    border-bottom-color: #000000;
}
div.tooltip.validation {
    background-color: #DE2A2A;
    border-color: #DE2A2A;
}
div.tooltip.validation > div:first-child, div.tooltip.validation > div:first-child::after {
    border-bottom-color: #DE2A2A;
}

/* Standard notifications (hint, message, information, highlight)
-------------------------------------------------------------- */
span.message, span.information {
    display: block;
    opacity: 1;
}
.fade > span.message, .fade > span.information {
    opacity: 0;
}
.a-0-5 > span.message, .a-0-5 > span.information:not(.error) {
    transition: all 0.5s;
}
.a-1-5 > span.message, .a-1-5 > span.information:not(.error) {
    transition: all 1.5s;
}
span.highlight {
    display: inline-block;
}
span.message, span.information, div.information {
    margin-bottom: 10px;
}
div.tile span.message, div.tile span.information, div.tile div.information {
    margin-right: 10px;
}
span.information, div.information {
    padding: 8px;
    border: 2px solid;
    box-sizing: border-box;
}
span.highlight, div.highlight {
    padding: 1px;
    border: 1px solid;
    box-sizing: border-box;
}
span.information a, div.information a {
    text-decoration: underline dotted;
}
span.information a:hover, div.information a:hover {
    cursor: pointer;
    text-decoration: underline solid;
}

/* Standard colours (red, yellow, green, blue, grey, white)
-------------------------------------------------------------- */
.bg-green {
    background-color: #D2FFA5;
}
.bg-greenyellow {
    background-color: #E5FFA0;
}
.bg-yellow {
    background-color: #FFF6BF;
}
.bg-grey {
    background-color: #E0E0E0;
}
tr.red, td.red {
    background-color: #FBE3E4;
}
span.information.red, div.information.red, span.highlight.red, div.highlight.red {
    background-color: #FBE3E4;
    border-color: #FBC2C4;
}
span.red, div.red, span.red a, div.red a, span.red a:hover, div.red a:hover {
    color: #8A1F11;
}
tr.yellow, td.yellow {
    background-color: #FFF6BF;
}
span.information.yellow, div.information.yellow, span.highlight.yellow, div.highlight.yellow {
    background: #FFF6BF;
    border-color: #FFD324;
}
span.yellow, div.yellow, span.yellow a, div.yellow a, span.yellow a:hover, div.yellow a:hover {
    color: #514721;
}
tr.green, td.green {
    background-color: #E6EFC2;
}
span.information.green, div.information.green, span.highlight.green, div.highlight.green {
    background: #E6EFC2;
    border-color: #C6D880;
}
span.green, div.green, span.green a, div.green a, span.green a:hover, div.green a:hover {
    color: #264409;
}
tr.blue, td.blue {
    background-color: #D4D4EF;
}
span.information.blue, div.information.blue, span.highlight.blue, div.highlight.blue {
    background: #D4D4EF;
    border-color: #A3A3D8;
}
span.blue, div.blue, span.blue a, div.blue a, span.blue a:hover, div.blue a:hover {
    color: #171844;
}
tr.grey, td.grey {
    background-color: #D0D0D0;
}
span.information.grey, div.information.grey, span.highlight.grey, div.highlight.grey {
    background: #D0D0D0;
    border-color: #A0A0A0;
}
span.grey, div.grey, span.grey a, div.grey a, span.grey a:hover, div.grey a:hover {
    color: #333333;
}
tr.white, td.white {
    background-color: #FFFFFF;
}
span.information.white, div.information.white, span.highlight.white, div.highlight.white {
    background: #FFFFFF;
    border-color: #C0C0C0;
}
span.white, div.white, span.white a, div.white a, span.white a:hover, div.white a:hover {
    color: #333333;
}