:root {
    --cyclone_Cyan: rgb(0, 162, 229);
    --cyclone_Blue: rgb(22, 65, 148);
    --cyclone_Green: rgb(149, 193, 31);
    --cyclone_Yellow: rgb(255, 204, 0);
    --cyclone_Red: rgb(233, 79, 53);
    --cyclone_White: rgb(255, 255, 255);
    --cyclone_Grey: rgb(157, 157, 156);
    --cyclone_LightGrey: rgb(235, 235, 235);
    --cyclone_Black: rgb(0, 0, 0);
    /* colors from https://www.first.org/tlp/#Usage */
    --tlp-red: rgb(255, 43, 43);
    --tlp-amber: rgb(255, 192, 0);
    --tlp-green: rgb(51, 255, 0);
    --tlp-clear: rgb(255, 255, 255);
    --tlp-background: rgb(0, 0, 0);
}

/* color classes */

.cyclone_Cyan {
    color: var(--cyclone_Cyan) !important;
}
.cyclone_Blue {
    color: var(--cyclone_Blue) !important;
}
.cyclone_Green {
    color: var(--cyclone_Green) !important;
}
.cyclone_Yellow {
    color: var(--cyclone_Yellow) !important;
}
.cyclone_Red {
    color: var(--cyclone_Red) !important;
}
.cyclone_White {
    color: var(--cyclone_White) !important;
}
.cyclone_Grey {
    color: var(--cyclone_Grey) !important;
}
.cyclone_LightGrey {
    color: var(--cyclone_LightGrey) !important;
}
.cyclone_Black {
    color: var(--cyclone_Black) !important;
}

/* important due to print styles * background removal + #000 color */
.tlp-red,
.tlp-amber,
.tlp-green,
.tlp-clear {
    background-color: var(--tlp-background) !important;
    padding: 0 0.25em;
    margin: 0 0.2em;
    font-weight: bold;
}
.tlp-red {
    color: var(--tlp-red) !important;
}
.tlp-amber {
    color: var(--tlp-amber) !important;
}
.tlp-green {
    color: var(--tlp-green) !important;
}
.tlp-clear {
    color: var(--tlp-clear) !important;
}

/* TLP */
tlp-red,
tlp-white,  /* keep for backwards compatibility */
tlp-clear,
tlp-amber,
tlp-green {
    margin: 0 0 10px;
    display: block;
}

tlp-red:after,
tlp-red:before,
tlp-red-inline:after,
tlp-red-inline:before,
tlp-amber:after,
tlp-amber:before,
tlp-amber-inline:after,
tlp-amber-inline:before,
tlp-green:after,
tlp-green:before,
tlp-green-inline:after,
tlp-green-inline:before,
tlp-white:after,
tlp-white:before,
tlp-white-inline:after,
tlp-white-inline:before,
tlp-clear:after,
tlp-clear:before,
tlp-clear-inline:after,
tlp-clear-inline:before {
    background-color: var(--tlp-background);
    padding: 0 0.25em;
    margin: 0 0.2em;
    font-weight: bold;
}

tlp-red:after,
tlp-red:before,
tlp-red-inline:after,
tlp-red-inline:before {
    color: var(--tlp-red);
    content: "TLP:RED"; /* attr(title);*/
}
tlp-amber:after,
tlp-amber:before,
tlp-amber-inline:after,
tlp-amber-inline:before {
    color: var(--tlp-amber);
    content: "TLP:AMBER"; /* attr(title);*/
}
tlp-green:after,
tlp-green:before,
tlp-green-inline:after,
tlp-green-inline:before {
    color: var(--tlp-green);
    content: "TLP:GREEN"; /* attr(title);*/
}
tlp-white:after,
tlp-white:before,
tlp-white-inline:after,
tlp-white-inline:before,
tlp-clear:after,
tlp-clear:before,
tlp-clear-inline:after,
tlp-clear-inline:before {
    color: var(--tlp-clear);
    content: "TLP:CLEAR"; /* attr(title);*/
}
tlp-red:after,
tlp-red-inline:after {
    content: "/TLP:RED";
}
tlp-amber:after,
tlp-amber-inline:after {
    content: "/TLP:AMBER";
}
tlp-green:after,
tlp-green-inline:after {
    content: "/TLP:GREEN";
}
tlp-white:after,
tlp-white-inline:after,
tlp-clear:after,
tlp-clear-inline:after {
    content: "/TLP:CLEAR";
}