SCP-610

iftags -component-backend

module css

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=latin-ext');


 * root {

--five-color: 196,2,51;

--four-color: 255,109,0;

--three-color: 255,211,0;

--two-color: 0,135,189;

--one-color: 0,159,107;

}


 * 1) page-title,

.meta-title {

display: none;

}

.anom-bar-container,

.anom-bar-container * {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 0;

margin: 0;

font-family: 'Roboto', sans-serif;

font-family: var(--title-font, 'Roboto', sans-serif);

}

.anom-bar-container {

width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

position: relative;

}

.anom-bar {

display: -ms-grid;

display: grid;

grid-template-areas:

"top-box"

"bottom-box";

width: 100%;

}

.anom-bar > .top-box {

--wght: 600;

-ms-grid-row: 1;

-ms-grid-column: 1;

display: -ms-grid;

display: grid;

grid-area: top-box;

grid-template-areas:

"top-left-box top-center-box top-right-box";

width: 100%;

-ms-grid-columns: auto 1fr calc(5vw + 5rem);

grid-template-columns: auto 1fr -webkit-calc(5vw + 5rem);

grid-template-columns: auto 1fr -moz-calc(5vw + 5rem);

grid-template-columns: auto 1fr calc(5vw + 5rem);

-ms-grid-rows: 1fr;

grid-template-rows: 1fr;

font-weight: 600;

text-transform: uppercase;

justify-items: stretch;

padding-bottom: 1rem;

}

.top-box .top-left-box {

-ms-grid-row: 1;

-ms-grid-column: 1;

grid-area: top-left-box;

}

.top-left-box > .item {

font-size: -webkit-calc(12px + (20 - 12) * ( (100vw - 300px) / ( 1920 - 960) ));

font-size: -moz-calc(12px + (20 - 12) * ( (100vw - 300px) / ( 1920 - 960) ));

font-size: calc(12px + (20 - 12) * ( (100vw - 300px) / ( 1920 - 960) ));

}

.top-left-box > .number {

font-size: -webkit-calc(25px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));

font-size: -moz-calc(25px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));

font-size: calc(25px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));

}

.top-box .top-center-box {

-ms-grid-row: 1;

-ms-grid-column: 2;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

grid-area: top-center-box;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-moz-box-orient: vertical;

-moz-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

height: 100%;

margin: 0 1rem;

}

.top-center-box > div {

background-color: rgb(0,0,0);

height: 0.5rem;

width: 100%;

margin: 0.125rem;

display: none;

}

.anom-bar-container.american .top-center-box > div {

background-image:

-webkit-repeating-linear-gradient(65deg,

rgb(178,34,52),

rgb(252,252,252) 45%,

rgb(252,252,252) 55%,

rgb(60,59,110) 100%);

background-image:

-moz-repeating-linear-gradient(65deg,

rgb(178,34,52),

rgb(252,252,252) 45%,

rgb(252,252,252) 55%,

rgb(60,59,110) 100%);

background-image:

-o-repeating-linear-gradient(65deg,

rgb(178,34,52),

rgb(252,252,252) 45%,

rgb(252,252,252) 55%,

rgb(60,59,110) 100%);

background-image:

repeating-linear-gradient(25deg,

rgb(178,34,52),

rgb(252,252,252) 45%,

rgb(252,252,252) 55%,

rgb(60,59,110) 100%);

background-attachment: scroll;

}

.anom-bar-container.clear-1 .top-center-box > div {

background-color: rgb(0,159,107);

background-color: rgb(var(--one-color));

}

.anom-bar-container.clear-2 .top-center-box > div {

background-color: rgb(0,135,189);

background-color: rgb(var(--two-color));

}

.anom-bar-container.clear-3 .top-center-box > div {

background-color: rgb(255,211,0);

background-color: rgb(var(--three-color));

}

.anom-bar-container.clear-4 .top-center-box > div {

background-color: rgb(255,109,0);

background-color: rgb(var(--four-color));

}

.anom-bar-container.clear-5 .top-center-box > div {

background-color: rgb(196,2,51);

background-color: rgb(var(--five-color));

}

.anom-bar-container.clear-1 .top-center-box > .bar-one,

.anom-bar-container.clear-2 .top-center-box > .bar-one,

.anom-bar-container.clear-3 .top-center-box > .bar-one,

.anom-bar-container.clear-4 .top-center-box > .bar-one,

.anom-bar-container.clear-5 .top-center-box > .bar-one,

.anom-bar-container.clear-6 .top-center-box > .bar-one {

display: block;

}

.anom-bar-container.clear-2 .top-center-box > .bar-two,

.anom-bar-container.clear-3 .top-center-box > .bar-two,

.anom-bar-container.clear-4 .top-center-box > .bar-two,

.anom-bar-container.clear-5 .top-center-box > .bar-two,

.anom-bar-container.clear-6 .top-center-box > .bar-two {

display: block;

}

.anom-bar-container.clear-3 .top-center-box > .bar-three,

.anom-bar-container.clear-4 .top-center-box > .bar-three,

.anom-bar-container.clear-5 .top-center-box > .bar-three,

.anom-bar-container.clear-6 .top-center-box > .bar-three {

display: block;

}

.anom-bar-container.clear-4 .top-center-box > .bar-four,

.anom-bar-container.clear-5 .top-center-box > .bar-four,

.anom-bar-container.clear-6 .top-center-box > .bar-four {

display: block;

}

.anom-bar-container.clear-5 .top-center-box > .bar-five,

.anom-bar-container.clear-6 .top-center-box > .bar-five {

display: block;

}

.anom-bar-container.clear-6 .top-center-box > .bar-six {

display: block;

}

.anom-bar-container.clear-6 .anom-bar > .top-box {

-ms-grid-columns: auto 1fr calc(5vw + 8rem);

grid-template-columns: auto 1fr -webkit-calc(5vw + 8rem);

grid-template-columns: auto 1fr -moz-calc(5vw + 8rem);

grid-template-columns: auto 1fr calc(5vw + 8rem);

padding-bottom: 1.15em;

}

.anom-bar-container.clear-6 .top-center-box > div {

background-color: rgb(133, 0, 5);

background-color: rgb(var(--swatch-primary, 133, 0, 5));

background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/galactic.jpg");

background-attachment: fixed;

background-size: contain;

background-blend-mode: overlay;

}

.top-box .top-right-box {

-ms-grid-row: 1;

-ms-grid-column: 3;

display: -ms-grid;

display: grid;

grid-area: top-right-box;

grid-template-areas:

"level"

"clearance";

-ms-grid-rows: (1fr)[2];

grid-template-rows: repeat(2, 1fr);

}

.top-right-box > .level {

-ms-grid-row: 1;

-ms-grid-column: 1;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: end;

-webkit-align-items: flex-end;

-moz-box-align: end;

-ms-flex-align: end;

align-items: flex-end;

grid-area: level;

font-size: 2.5em;

line-height: 0.5;

}

.top-right-box > .clearance {

-ms-grid-row: 2;

-ms-grid-column: 1;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: start;

-webkit-align-items: flex-start;

-moz-box-align: start;

-ms-flex-align: start;

align-items: flex-start;

position: relative;

width: 100%;

height: 100%;

grid-area: clearance;

font-size: -webkit-calc(12px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));

font-size: -moz-calc(12px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));

font-size: calc(12px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));

line-height: 1.5;

white-space: nowrap;

}

.top-right-box > .clearance::before {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.anom-bar-container.clear-6 .top-right-box > .clearance::before {

content: "Cosmic Top-Secret";

}

.anom-bar-container.clear-5 .top-right-box > .clearance::before {

content: "Top-Secret";

}

.anom-bar-container.clear-4 .top-right-box > .clearance::before {

content: "Secret";

}

.anom-bar-container.clear-3 .top-right-box > .clearance::before {

content: "Confidential";

}

.anom-bar-container.clear-2 .top-right-box > .clearance::before {

content: "Restricted";

}

.anom-bar-container.clear-1 .top-right-box > .clearance::before {

content: "Unrestricted";

}

.anom-bar > .bottom-box {

--wght: 600;

-ms-grid-row: 2;

-ms-grid-column: 1;

display: -ms-grid;

display: grid;

grid-area: bottom-box;

grid-template-areas:

"text-part diamond-part"

"text-part diamond-part";

-ms-grid-rows: 1fr 0.5rem 1fr;

grid-template-rows: 1fr 1fr;

-ms-grid-columns: 1fr 0.5rem 6rem;

grid-template-columns: 1fr 6rem;

grid-gap: 0.5rem;

width: 100%;

height: 6rem;

font-weight: 600;

-webkit-box-shadow: 0 -0.5rem 0 0 rgb(12, 12, 12);

-moz-box-shadow: 0 -0.5rem 0 0 rgb(12, 12, 12);

box-shadow: 0 -0.5rem 0 0 rgb(12, 12, 12);

-webkit-box-shadow: 0 -0.5rem 0 0 rgb(var(--swatch-menubg-black-color, 12, 12, 12));

-moz-box-shadow: 0 -0.5rem 0 0 rgb(var(--swatch-menubg-black-color, 12, 12, 12));

box-shadow: 0 -0.5rem 0 0 rgb(var(--swatch-menubg-black-color, 12, 12, 12));

margin-top: -0.5rem;

padding-top: 0.25rem;

}

.bottom-box > .text-part {

-ms-grid-row: 1;

-ms-grid-row-span: 3;

-ms-grid-column: 1;

display: -ms-grid;

display: grid;

height: 6rem;

grid-area: text-part;

grid-template-areas:

"main-class disrupt-class"

"main-class risk-class";

-ms-grid-rows: 1fr 0.25rem 1fr;

grid-template-rows: 1fr 1fr;

-ms-grid-columns: auto 0.25rem 1fr;

grid-template-columns: 3fr 2fr;

grid-gap: 0.25rem;

text-transform: uppercase;

-webkit-box-pack: stretch;

-webkit-justify-content: stretch;

-moz-box-pack: stretch;

-ms-flex-pack: stretch;

justify-content: stretch;

-webkit-box-align: stretch;

-webkit-align-items: stretch;

-moz-box-align: stretch;

-ms-flex-align: stretch;

align-items: stretch;

}

.text-part div {

padding: 0 0.125rem;

margin: 0 0 0 0.25rem;

position: relative;

}

.text-part > .main-class {

-ms-grid-row: 1;

-ms-grid-row-span: 3;

-ms-grid-column: 1;

position: relative;

grid-area: main-class;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-moz-box-orient: vertical;

-moz-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-shadow: 0.25rem 0 0 0 rgba(0,0,0,0);

-moz-box-shadow: 0.25rem 0 0 0 rgba(0,0,0,0);

box-shadow: 0.25rem 0 0 0 rgba(0,0,0,0);

}

.anom-bar-container:not(.esoteric) .text-part > .main-class {

padding-right: 3.5rem;

}

.anom-bar-container.esoteric .text-part > .main-class {

padding-right: 2rem;

}

.text-part > .main-class::before {

content: "";

position: absolute;

top: -webkit-calc(50% - 2.25rem);

top: -moz-calc(50% - 2.25rem);

top: calc(50% - 2.25rem);

right: 0.5rem;

width: 3.53125rem;

height: 3.53125rem;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

border: 0.25rem solid rgb(12, 12, 12);

border: 0.25rem solid rgb(var(--swatch-menutxt-dark-color, 12, 12, 12));

background-color: rgb(252, 252, 252);

background-color: rgb(var(--swatch-background, 252, 252, 252));

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: contain;

background-position: center center;

}

.anom-bar-container.esoteric .text-part > .main-class::before {

top: 0.5rem;

right: 1.25rem;

width: 5rem;

-webkit-border-radius: -webkit-calc(3.53125rem / 2);

-moz-border-radius: -moz-calc(3.53125rem / 2);

border-radius: calc(3.53125rem / 2);

background-color: rgb(252, 252, 252);

background-color: rgb(var(--swatch-background, 252, 252, 252));

border-color: rgb(var(--swatch-background, 252, 252, 252));

-webkit-filter: invert(1);

filter: invert(1);

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/esoteric-icon.svg");

-webkit-background-size: 75% 75%;

-moz-background-size: 75% 75%;

-o-background-size: 75% 75%;

background-size: 75% 75%;

background-repeat: no-repeat;

background-position: left -10px center;

}

.anom-bar-container.esoteric .text-part > .main-class::after {

content: "";

position: absolute;

top: 0.5rem;

right: 0.25rem;

width: 3.53125rem;

height: 3.53125rem;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

border: 0.25rem solid rgb(12, 12, 12);

border: 0.25rem solid rgb(var(--swatch-menutxt-dark-color, 12, 12, 12));

background-color: rgb(252, 252, 252);

background-color: rgb(var(--swatch-background, 252, 252, 252));

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: contain;

background-position: center center;

}

.anom-bar-container.{$secondary-class} .text-part > .main-class::after {

background-image: url("{$secondary-icon}");

}

.anom-bar-container.explained .text-part > .main-class::before,

.anom-bar-container.pending .text-part > .main-class::before,

.anom-bar-container.neutralized .text-part > .main-class::before,

.anom-bar-container.neutralised .text-part > .main-class::before {

display:none;

}

.anom-bar-container.keter .text-part > .main-class::before {

background-color: rgb(196,2,51);

background-color: rgb(var(--five-color));

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keter-icon.svg");

}

.anom-bar-container.euclid .text-part > .main-class::before {

background-color: rgb(255,211,0);

background-color: rgb(var(--three-color));

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/euclid-icon.svg");

}

.anom-bar-container.safe .text-part > .main-class::before {

background-color: rgb(0,159,107);

background-color: rgb(var(--one-color));

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/safe-icon.svg");

}

.text-part > .main-class > div {

width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

}

.anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text {

font-size: -webkit-calc( 6px + (11 - 6) * ( (100vw - 400px) / ( 800 - 400) ));

font-size: -moz-calc( 6px + (11 - 6) * ( (100vw - 400px) / ( 800 - 400) ));

font-size: calc( 6px + (11 - 6) * ( (100vw - 400px) / ( 800 - 400) ));

position: relative;

}

.anom-bar-container:not(.esoteric) .text-part > .main-class > .contain-class > .class-text {

font-size: -webkit-calc(10px + (18 - 10) * ( (100vw - 400px) / ( 800 - 400) ));

font-size: -moz-calc(10px + (18 - 10) * ( (100vw - 400px) / ( 800 - 400) ));

font-size: calc(10px + (18 - 10) * ( (100vw - 400px) / ( 800 - 400) ));

}

.anom-bar-container:not(.esoteric) .text-part > .main-class > .second-class {

display: none;

}

.text-part > .disrupt-class {

-ms-grid-row: 1;

-ms-grid-column: 3;

grid-area: disrupt-class;

}

.text-part > .risk-class {

-ms-grid-row: 3;

-ms-grid-column: 3;

grid-area: risk-class;

}

.text-part > .disrupt-class,

.text-part > .risk-class {

overflow: hidden;

}

.anom-bar-container.esoteric .text-part .main-class {

background-color: rgba(66, 66, 72 ,0.15);

background-color: rgba(var(--swatch-menubg-dark-color, 66, 66, 72),0.15);

border-left: 0.75rem solid rgba(66, 66, 72 ,1);

border-left: 0.75rem solid rgba(var(--swatch-menubg-dark-color, 66, 66, 72),1);

}

.anom-bar-container.neutralized .text-part .main-class,

.anom-bar-container.neutralised .text-part .main-class {

background-color: rgba(66, 66, 72 ,0.15);

background-color: rgba(var(--swatch-menubg-dark-color, 66, 66, 72),0.15);

border-left: 0.75rem solid rgba(66, 66, 72 ,1);

border-left: 0.75rem solid rgba(var(--swatch-menubg-dark-color, 66, 66, 72),1);

}

.anom-bar-container.pending .text-part .main-class {

background-color: rgba(12, 12, 12 ,0.15);

background-color: rgba(var(--swatch-menutxt-dark-color, 12, 12, 12),0.15);

border-left: 0.75rem solid rgba(12, 12, 12 ,1);

border-left: 0.75rem solid rgba(var(--swatch-menutxt-dark-color, 12, 12, 12),1);

}

.anom-bar-container.explained .text-part .main-class {

background-color: rgba(252, 252, 252 ,0.15);

background-color: rgba(var(--swatch-background, 252, 252, 252),0.15);

border-left: 0.75rem solid rgba(12, 12, 12 ,1);

border-left: 0.75rem solid rgba(var(--swatch-menutxt-dark-color, 12, 12, 12),1);

}

.anom-bar-container.keter .text-part .main-class,

.anom-bar-container.amida .text-part .disrupt-class,

.anom-bar-container.critical .text-part .risk-class {

background-color: rgba(196,2,51,0.15);

background-color: rgba(var(--five-color),0.15);

border-left: 0.5rem solid rgba(196,2,51,1);

border-left: 0.5rem solid rgba(var(--five-color),1);

}

.anom-bar-container.ekhi .text-part .disrupt-class,

.anom-bar-container.danger .text-part .risk-class {

background-color: rgba(255,109,0,0.15);

background-color: rgba(var(--four-color),0.15);

border-left: 0.5rem solid rgba(255,109,0,1);

border-left: 0.5rem solid rgba(var(--four-color),1);

}

.anom-bar-container.euclid .text-part .main-class,

.anom-bar-container.keneq .text-part .disrupt-class,

.anom-bar-container.warning .text-part .risk-class {

border-left: 0.5rem solid rgba(255,211,0,1);

border-left: 0.5rem solid rgba(var(--three-color),1);

background-color: rgba(255,211,0,0.15);

background-color: rgba(var(--three-color),0.15);

}

.anom-bar-container.vlam .text-part .disrupt-class,

.anom-bar-container.caution .text-part .risk-class {

border-left: 0.5rem solid rgba(0,135,189,1);

border-left: 0.5rem solid rgba(var(--two-color),1);

background-color: rgba(0,135,189,0.15);

background-color: rgba(var(--two-color),0.15);

}

.anom-bar-container.safe .text-part .main-class,

.anom-bar-container.dark .text-part .disrupt-class,

.anom-bar-container.notice .text-part .risk-class {

background-color: rgba(0,159,107,0.15);

background-color: rgba(var(--one-color),0.15);

border-left: 0.5rem solid rgba(0,159,107,1);

border-left: 0.5rem solid rgba(var(--one-color),1);

}

.anom-bar-container.neutralized .text-part,

.anom-bar-container.neutralised .text-part,

.anom-bar-container.pending .text-part,

.anom-bar-container.explained .text-part {

-ms-grid-columns: 1fr;

grid-template-columns: 1fr;

}

.text-part .disrupt-class::after,

.text-part .risk-class::after,

.text-part .disrupt-class::before,

.text-part .risk-class::before {

content: "";

position: absolute;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

border: 0.25rem solid rgb(12, 12, 12);

border: 0.25rem solid rgb(var(--swatch-menutxt-dark-color, 12, 12, 12));

width: 2.5rem;

height: 2.5rem;

top: -webkit-calc(50% - 1.5rem);

top: -moz-calc(50% - 1.5rem);

top: calc(50% - 1.5rem);

font-size: 2em;

background-color: rgb(252, 252, 252);

background-color: rgb(var(--swatch-background, 252, 252, 252));

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: contain;

background-position: center center;

}

.text-part .disrupt-class::after,

.text-part .risk-class::after {

right: 0.15em;

}

.text-part .disrupt-class::before,

.text-part .risk-class::before {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: start;

-webkit-justify-content: flex-start;

-moz-box-pack: start;

-ms-flex-pack: start;

justify-content: flex-start;

background-color: rgb(12, 12, 12);

background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));

width: 3rem;

height: 3rem;

top: -webkit-calc(50% - 1.5rem);

top: -moz-calc(50% - 1.5rem);

top: calc(50% - 1.5rem);

border: 0;

right: 1rem;

text-align: left;

font-size: 1em;

padding-left: 0.5rem;

color: rgb(252, 252, 252);

color: rgb(var(--swatch-text-general, 252, 252, 252));

}

.anom-bar-container.amida .text-part .disrupt-class::before,

.anom-bar-container.critical .text-part .risk-class::before {

content: "5";

}

.anom-bar-container.ekhi .text-part .disrupt-class::before,

.anom-bar-container.danger .text-part .risk-class::before {

content: "4";

}

.anom-bar-container.keneq .text-part .disrupt-class::before,

.anom-bar-container.warning .text-part .risk-class::before {

content: "3";

}

.anom-bar-container.vlam .text-part .disrupt-class::before,

.anom-bar-container.caution .text-part .risk-class::before {

content: "2";

}

.anom-bar-container.dark .text-part .disrupt-class::before,

.anom-bar-container.notice .text-part .risk-class::before {

content: "1";

}

.anom-bar-container.amida .text-part .disrupt-class::after,

.anom-bar-container.critical .text-part .risk-class::after {

background-color: rgb(196,2,51);

background-color: rgb(var(--five-color));

}

.anom-bar-container.amida .text-part .disrupt-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/amida-icon.svg");

}

.anom-bar-container.critical .text-part .risk-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/critical-icon.svg");

}

.anom-bar-container.ekhi .text-part .disrupt-class::after,

.anom-bar-container.danger .text-part .risk-class::after {

background-color: rgb(255,109,0);

background-color: rgb(var(--four-color));

}

.anom-bar-container.ekhi .text-part .disrupt-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/ekhi-icon.svg");

}

.anom-bar-container.danger .text-part .risk-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/danger-icon.svg");

}

.anom-bar-container.keneq .text-part .disrupt-class::after,

.anom-bar-container.warning .text-part .risk-class::after {

background-color: rgb(255,211,0);

background-color: rgb(var(--three-color));

}

.anom-bar-container.keneq .text-part .disrupt-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keneq-icon.svg");

}

.anom-bar-container.warning .text-part .risk-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/warning-icon.svg");

}

.anom-bar-container.vlam .text-part .disrupt-class::after,

.anom-bar-container.caution .text-part .risk-class::after {

background-color: rgb(0,135,189);

background-color: rgb(var(--two-color));

}

.anom-bar-container.vlam .text-part .disrupt-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/vlam-icon.svg");

}

.anom-bar-container.caution .text-part .risk-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/caution-icon.svg");

}

.anom-bar-container.dark .text-part .disrupt-class::after,

.anom-bar-container.notice .text-part .risk-class::after {

background-color: rgb(0,159,107);

background-color: rgb(var(--one-color));

}

.anom-bar-container.dark .text-part .disrupt-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/dark-icon.svg");

}

.anom-bar-container.notice .text-part .risk-class::after {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/notice-icon.svg");

}

.text-part .main-class {

border-width: 1em !important;

}

.text-part > div .class-category {

--wght: 500;

position: relative;

font-weight: 500;

left: 0;

}

.anom-bar-container.esoteric .contain-class > .class-category {

max-width: 55% !important;

}

.anom-bar-container.explained .second-class,

.anom-bar-container.explained .disrupt-class,

.anom-bar-container.explained .risk-class,

.anom-bar-container.explained .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.explained .danger-diamond > .quadrants > .right-quad,

.anom-bar-container.explained .danger-diamond > .left-icon,

.anom-bar-container.explained .danger-diamond > .right-icon,

.anom-bar-container.neutralized .second-class,

.anom-bar-container.neutralized .disrupt-class,

.anom-bar-container.neutralized .risk-class,

.anom-bar-container.neutralized .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.neutralized .danger-diamond > .quadrants > .right-quad,

.anom-bar-container.neutralized .danger-diamond > .left-icon,

.anom-bar-container.neutralized .danger-diamond > .right-icon,

.anom-bar-container.neutralised .second-class,

.anom-bar-container.neutralised .disrupt-class,

.anom-bar-container.neutralised .risk-class,

.anom-bar-container.neutralised .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.neutralised .danger-diamond > .quadrants > .right-quad,

.anom-bar-container.neutralised .danger-diamond > .left-icon,

.anom-bar-container.neutralised .danger-diamond > .right-icon,

.anom-bar-container.pending .second-class,

.anom-bar-container.pending .disrupt-class,

.anom-bar-container.pending .risk-class,

.anom-bar-container.pending .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.pending .danger-diamond > .quadrants > .right-quad,

.anom-bar-container.pending .danger-diamond > .left-icon,

.anom-bar-container.pending .danger-diamond > .right-icon {

display: none;

}

.text-part .contain-class,

.text-part .second-class,

.text-part .disrupt-class,

.text-part .risk-class {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-moz-box-orient: horizontal;

-moz-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

line-height: 1;

}

.text-part .contain-class > div,

.text-part .second-class > div,

.text-part .disrupt-class > div,

.text-part .risk-class > div {

width: 100%;

}

.text-part > div > .class-category,

.anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-category {

font-size: 0.75em;

}

.anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-text,

.text-part > .disrupt-class > .class-text,

.text-part > .risk-class > .class-text {

font-size: -webkit-calc( 8px + (12 - 8) * ( (100vw - 400px) / ( 800 - 400) ));

font-size: -moz-calc( 8px + (12 - 8) * ( (100vw - 400px) / ( 800 - 400) ));

font-size: calc( 8px + (12 - 8) * ( (100vw - 400px) / ( 800 - 400) ));

}

.bottom-box > .diamond-part {

-ms-grid-row: 1;

-ms-grid-row-span: 3;

-ms-grid-column: 3;

width: 100%;

padding-top: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

position: relative;

grid-area: diamond-part;

padding-left: 1rem;

-webkit-box-shadow: -0.5rem 0 0 0 rgb(12, 12, 12);

-moz-box-shadow: -0.5rem 0 0 0 rgb(12, 12, 12);

box-shadow: -0.5rem 0 0 0 rgb(12, 12, 12);

-webkit-box-shadow: -0.5rem 0 0 0 rgb(var(--swatch-menubg-black-color, 12, 12, 12));

-moz-box-shadow: -0.5rem 0 0 0 rgb(var(--swatch-menubg-black-color, 12, 12, 12));

box-shadow: -0.5rem 0 0 0 rgb(var(--swatch-menubg-black-color, 12, 12, 12));

}

.danger-diamond {

position: absolute;

width: 95%;

height: 95%;

top: 2.5%;

left: 5%;

}

.danger-diamond a {

color: rgba(0,0,0,0);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

z-index: 3;

}

.danger-diamond br {

display: none;

}

.danger-diamond > .arrows {

--danger-diamond-arrows: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 160' xml:space='preserve'%3E%3Cpath fill='%23010101' d='M136.1,133.3l23.9-23.9V51.2l-24-24l19.1-19.1l4.9,4.9l0-12.9l-12.9,0l4.9,4.9L133,24.2l-24-24H51l-24,24 L8,5.2l4.9-4.9L0,0.2l0,12.9l4.9-4.9L24,27.3l-24,24v58.2l23.9,23.9l-19,19L0,147.3l0,12.9l12.9,0L8,155.3l19-19l23.9,23.9h58.4 l23.9-23.9l19,19l-4.9,4.9l12.9,0l0-12.9l-4.9,4.9L136.1,133.3z M155.7,53v54.6l-22.6,22.6l-50-50L133,30.3L155.7,53z M52.8,4.5 h54.4l22.7,22.7L80,77.2L30.1,27.3L52.8,4.5z M4.3,107.6V53L27,30.3L77,80.2l-50,50L4.3,107.6z M107.4,155.9H52.6L30,133.3l50-50 l50,50L107.4,155.9z'/%3E%3C/svg%3E%0A");

position: absolute;

width: 100%;

height: 100%;

z-index: 1;

background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));

-webkit-mask-image: var(--danger-diamond-arrows);

mask-image: var(--danger-diamond-arrows);

-webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

}

.danger-diamond > .octagon {

width: 100%;

height: 100%;

position: absolute;

text-align: center;

z-index: 0;

-webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);

clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);

}

.danger-diamond > .quadrants {

position: absolute;

width: 96%;

height: 96%;

top: 0;

left: 0;

}

.danger-diamond > .quadrants > div {

width: 67.5%;

padding-bottom: 50%;

position: absolute;

top: 2.25%;

left: 18.5%;

background-color: rgb(252, 252, 252);

background-color: rgb(var(--swatch-background, 252, 252, 252));

-webkit-clip-path: polygon(22% 0, 77% 0, 100% 31%, 50% 100%, 0 31%);

clip-path: polygon(22% 0, 77% 0, 100% 31%, 50% 100%, 0 31%);

-webkit-transform-origin: bottom center;

-moz-transform-origin: bottom center;

-ms-transform-origin: bottom center;

-o-transform-origin: bottom center;

transform-origin: bottom center;

}

.danger-diamond > .quadrants > .left-quad {

-webkit-transform: rotate(270deg);

-moz-transform: rotate(270deg);

-ms-transform: rotate(270deg);

-o-transform: rotate(270deg);

transform: rotate(270deg);

}

.danger-diamond > .quadrants > .right-quad {

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-o-transform: rotate(90deg);

transform: rotate(90deg);

}

.danger-diamond > .quadrants > .bottom-quad {

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

.danger-diamond > .quadrants > .bottom-quad.none {

background-color: rgb(252, 252, 252 ,0.25);

background-color: rgb(var(--swatch-background, 252, 252, 252),0.25);

}

.danger-diamond > .quadrants > .top-quad.pending {

background-color: rgb(12, 12, 12 ,0.25);

background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12),0.25);

}

.danger-diamond > .quadrants > .top-quad.neutralized,

.danger-diamond > .quadrants > .top-quad.neutralised {

background-color: rgb(66, 66, 72 ,0.25);

background-color: rgb(var(--swatch-menubg-medium-dark-color, 66, 66, 72),0.25);

}

.danger-diamond > .quadrants > .top-quad.explained {

background-color: rgb(252, 252, 252 ,0.25);

background-color: rgb(var(--swatch-background, 252, 252, 252),0.25);

}

.anom-bar-container.esoteric .danger-diamond > .quadrants > .top-quad {

background-color: rgb(66, 66, 72 ,0.15);

background-color: rgb(var(--swatch-menubg-medium-dark-color, 66, 66, 72),0.15);

}

.anom-bar-container.keter .danger-diamond > .quadrants > .top-quad,

.anom-bar-container.amida .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.critical .danger-diamond > .quadrants > .right-quad  {

background-color:rgba(196,2,51,0.25);

background-color: rgb(var(--five-color),0.25);

}

.anom-bar-container.ekhi .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.danger .danger-diamond > .quadrants > .right-quad {

background-color:rgba(255,109,0,0.25);

background-color: rgb(var(--five-color),0.25);

}

.anom-bar-container.euclid .danger-diamond > .quadrants > .top-quad,

.anom-bar-container.keneq .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.warning .danger-diamond > .quadrants > .right-quad {

background-color:rgba(255,211,0,0.25);

background-color: rgb(var(--three-color),0.25);

}

.anom-bar-container.vlam .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.caution .danger-diamond > .quadrants > .right-quad {

background-color:rgba(0,135,189,0.25);

background-color: rgb(var(--two-color),0.25);

}

.anom-bar-container.safe .danger-diamond > .quadrants > .top-quad,

.anom-bar-container.dark .danger-diamond > .quadrants > .left-quad,

.anom-bar-container.notice .danger-diamond > .quadrants > .right-quad {

background-color:rgba(0,159,107,0.25);

background-color: rgb(var(--one-color),0.25);

}

.anom-bar-container.clear-5 .danger-diamond > .center-circle::before {

content: "5";

}

.anom-bar-container.clear-4 .danger-diamond > .center-circle::before {

content: "4";

}

.anom-bar-container.clear-3 .danger-diamond > .center-circle::before {

content: "3";

}

.anom-bar-container.clear-2 .danger-diamond > .center-circle::before {

content: "2";

}

.anom-bar-container.clear-1 .danger-diamond > .center-circle::before {

content: "1";

}

.danger-diamond > .top-icon,

.danger-diamond > .right-icon,

.danger-diamond > .left-icon,

.danger-diamond > .bottom-icon {

position: absolute;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

width: 33%;

height: 33%;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

border: 0.1875rem solid rgb(12, 12, 12);

border: 0.1875rem solid rgb(var(--swatch-menubg-black-color, 12, 12, 12));

overflow: hidden;

z-index: 2;

}

.danger-diamond > .top-icon {

top: 0.25rem;

left: 33.5%;

}

.danger-diamond > .right-icon {

right: 0.25rem;

top: 33.5%;

}

.danger-diamond > .left-icon {

left: 0.25rem;

top: 33.5%;

}

.danger-diamond > .bottom-icon {

bottom: 0.25rem;

left: 33.5%;

}

.anom-bar-container.neutralized .danger-diamond > .top-icon,

.anom-bar-container.neutralised .danger-diamond > .top-icon,

.anom-bar-container.pending .danger-diamond > .top-icon,

.anom-bar-container.explained .danger-diamond > .top-icon {

width: 65%;

height: 65%;

top: 17.5%;

left: 17.5%;

border-width: 0.3625rem;

}

.anom-bar-container.pending .danger-diamond > .top-icon {

background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));

}

.anom-bar-container:not(.esoteric) .danger-diamond > .bottom-icon {

display: none;

}

.danger-diamond > .top-icon::before,

.danger-diamond > .right-icon::before,

.danger-diamond > .left-icon::before,

.danger-diamond > .bottom-icon::before {

content: "";

position: absolute;

width: 100%;

height: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

top: 0;

left: 0;

}

.anom-bar-container.neutralized .danger-diamond > .top-icon,

.anom-bar-container.neutralised .danger-diamond > .top-icon {

background-color: rgb(252, 252, 252);

background-color: rgb(var(--swatch-background, 252, 252, 252));

}

.anom-bar-container.neutralized .danger-diamond > .top-icon::before,

.anom-bar-container.neutralised .danger-diamond > .top-icon::before {

background-color: rgba(66, 66, 72 ,0.15);

background-color: rgba(var(--swatch-menubg-medium-dark-color, 66, 66, 72),0.15);

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/neutralized-icon.svg");

-webkit-background-size: 110% 110%;

-moz-background-size: 110% 110%;

-o-background-size: 110% 110%;

background-size: 110% 110%;

background-position: center center;

}

.anom-bar-container.pending .danger-diamond > .top-icon::before {

background-color: rgb(12, 12, 12);

background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/pending-icon.svg");

}

.anom-bar-container.explained .danger-diamond > .top-icon::before {

background-color: rgb(252, 252, 252);

background-color: rgb(var(--swatch-background, 252, 252, 252));

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/explained-icon.svg");

}

.anom-bar-container.esoteric .danger-diamond > .top-icon::before {

background-color: rgb(252, 252, 252);

background-color: rgb(var(--swatch-background, 252, 252, 252));

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/esoteric-icon.svg");

-webkit-filter: invert(1);

filter: invert(1);

}

.anom-bar-container.keter .danger-diamond > .top-icon::before,

.anom-bar-container.amida .danger-diamond > .left-icon::before,

.anom-bar-container.critical .danger-diamond > .right-icon::before {

background-color: rgb(196,2,51);

background-color: rgb(var(--five-color));

}

.anom-bar-container.keter .danger-diamond > .top-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keter-icon.svg");

}

.anom-bar-container.amida .danger-diamond > .left-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/amida-icon.svg");

}

.anom-bar-container.critical .danger-diamond > .right-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/critical-icon.svg");

}

.anom-bar-container.ekhi .danger-diamond > .left-icon::before,

.anom-bar-container.danger .danger-diamond > .right-icon::before {

background-color: rgb(255,109,0);

background-color: rgb(var(--four-color));

}

.anom-bar-container.ekhi .danger-diamond > .left-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/ekhi-icon.svg");

}

.anom-bar-container.danger .danger-diamond > .right-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/danger-icon.svg");

}

.anom-bar-container.euclid .danger-diamond > .top-icon::before,

.anom-bar-container.keneq .danger-diamond > .left-icon::before,

.anom-bar-container.warning .danger-diamond > .right-icon::before {

background-color: rgb(255,211,0);

background-color: rgb(var(--three-color));

}

.anom-bar-container.euclid .danger-diamond > .top-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/euclid-icon.svg");

}

.anom-bar-container.keneq .danger-diamond > .left-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keneq-icon.svg");

}

.anom-bar-container.warning .danger-diamond > .right-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/warning-icon.svg");

}

.anom-bar-container.vlam .danger-diamond > .left-icon::before,

.anom-bar-container.caution .danger-diamond > .right-icon::before {

background-color: rgb(0,135,189);

background-color: rgb(var(--two-color));

}

.anom-bar-container.vlam .danger-diamond > .left-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/vlam-icon.svg");

}

.anom-bar-container.caution .danger-diamond > .right-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/caution-icon.svg");

}

.anom-bar-container.safe .danger-diamond > .top-icon::before,

.anom-bar-container.dark .danger-diamond > .left-icon::before,

.anom-bar-container.notice .danger-diamond > .right-icon::before {

background-color: rgb(0,159,107);

background-color: rgb(var(--one-color));

}

.anom-bar-container.safe .danger-diamond > .top-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/safe-icon.svg");

}

.anom-bar-container.dark .danger-diamond > .left-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/dark-icon.svg");

}

.anom-bar-container.notice .danger-diamond > .right-icon::before {

background-image: url("https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/notice-icon.svg");

}

.anom-bar-container.{$secondary-class} .danger-diamond > .bottom-icon::before {

background-image: url("{$secondary-icon}");

background-size: contain;

}

@media (max-width: 960px ) {

.anom-bar > .top-box {

padding-bottom: 1.5em;

}

.anom-bar > .bottom-box {

-ms-grid-columns: 1fr 0.5rem 6rem;

grid-template-columns: 1fr 6rem;

height: 6rem;

}

.anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-text, .text-part > .disrupt-class > .class-text, .text-part > .risk-class > .class-text {

font-size: -webkit-calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));

font-size: -moz-calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));

font-size: calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));

}

.anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-text {

font-size: -webkit-calc( 12px + (18 - 12) * ( (100vw - 400px) / ( 960 - 300) ));

font-size: -moz-calc( 12px + (18 - 12) * ( (100vw - 400px) / ( 960 - 300) ));

font-size: calc( 12px + (18 - 12) * ( (100vw - 400px) / ( 960 - 300) ));

}

.anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text {

font-size: -webkit-calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));

font-size: -moz-calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));

font-size: calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));

}

.anom-bar-container:not(.esoteric) .text-part > .main-class > .contain-class > .class-text {

font-size: -webkit-calc( 20px + (40 - 20) * ( (100vw - 400px) / ( 960 - 300) ));

font-size: -moz-calc( 20px + (40 - 20) * ( (100vw - 400px) / ( 960 - 300) ));

font-size: calc( 20px + (40 - 20) * ( (100vw - 400px) / ( 960 - 300) ));

}

.text-part > .main-class {

-ms-grid-row: 1;

-ms-grid-row-span: 1;

-ms-grid-column: 1;

}

.text-part > .disrupt-class {

-ms-grid-row: 3;

-ms-grid-column: 1;

}

.text-part > .risk-class {

-ms-grid-row: 5;

-ms-grid-column: 1;

}

}

@media (max-width: 875px ) {

.text-part > div {

padding: 0.25rem 0;

}

.anom-bar-container.pending .bottom-box > .text-part,

.anom-bar-container.neutralized .bottom-box > .text-part,

.anom-bar-container.neutralised .bottom-box > .text-part,

.anom-bar-container.explained .bottom-box > .text-part {

height: 6rem;

}

.bottom-box > .text-part {

grid-template-areas:

"main-class"

"disrupt-class"

"risk-class";

-ms-grid-rows: 2fr 0.25rem 1fr 0.25rem 1fr;

grid-template-rows: 3fr 2fr 2fr;

-ms-grid-columns: 1fr;

grid-template-columns: 1fr;

height: 8rem;

}

.anom-bar > .bottom-box {

-ms-grid-columns: 1fr 0.5rem 8rem;

grid-template-columns: 1fr 8rem;

height: 8rem;

}

.anom-bar-container.esoteric .text-part > .main-class::after,

.text-part > .main-class::after {

height: 3rem;

width: 3rem;

}

.text-part .disrupt-class::after,

.text-part .risk-class::after {

height: 1.75rem;

width: 1.75rem;

}

.anom-bar-container.esoteric .text-part > .main-class::after,

.text-part > .main-class::after,

.text-part .disrupt-class::after,

.text-part .risk-class::after {

top: -webkit-calc(50% - 1.125rem);

top: -moz-calc(50% - 1.125rem);

top: calc(50% - 1.125rem);

border-width: 0.25rem;

}

.text-part > .main-class::before {

height: 2.5rem;

width: 2.5rem;

border-width: 0.25rem;

top: -webkit-calc(50% - 1.45rem);

top: -moz-calc(50% - 1.45rem);

top: calc(50% - 1.45rem);

}

.text-part .disrupt-class::before,

.text-part .risk-class::before {

height: 2.25rem;

width: 2.25rem;

top: -webkit-calc(50% - 1.125rem);

top: -moz-calc(50% - 1.125rem);

top: calc(50% - 1.125rem);

right: 0.75rem;

}

.anom-bar-container.esoteric .text-part > .main-class::after {

top: 0.15rem;

}

.anom-bar-container.esoteric .text-part > .main-class::before {

top: 0.15rem;

width: 5.75rem;

height: 3rem;

right: 1.25rem;

-webkit-background-size: 100% 100%;

-moz-background-size: 100% 100%;

-o-background-size: 100% 100%;

background-size: 100% 100%;

background-position: left -20px center;

}

.anom-bar-container.esoteric .contain-class > .class-category {

max-width: 100% !important;

}

.anom-bar-container.pending .bottom-box > .text-part,

.anom-bar-container.neutralized .bottom-box > .text-part,

.anom-bar-container.neutralised .bottom-box > .text-part,

.anom-bar-container.explained .bottom-box > .text-part {

-ms-grid-rows: 1fr;

grid-template-rows: 1fr;

grid-template-areas: "main-class";

}

.text-part .disrupt-class,

.text-part .risk-class {

padding-left: 0.25rem;

display: -ms-grid;

display: grid;

-ms-grid-columns: auto 1fr;

grid-template-columns: auto 1fr;

}

.text-part .disrupt-class *,

.text-part .risk-class * {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

}

@media (max-width: 875px ) and (min-width: 480px ) {

.anom-bar-container.pending .anom-bar > .bottom-box,

.anom-bar-container.neutralized .anom-bar > .bottom-box,

.anom-bar-container.neutralised .anom-bar > .bottom-box,

.anom-bar-container.explained .anom-bar > .bottom-box {

-ms-grid-columns: 1fr 6rem;

grid-template-columns: 1fr 6rem;

height: 6rem;

}

}

@media (max-width: 480px ) {

.anom-bar {

position: relative;

}

.anom-bar > .top-box {

height: 40vw;

max-height: 40vw;

grid-template-areas:

"."

"top-left-box"

"top-center-box"

"top-right-box"

".";

-ms-grid-rows: 1fr 1fr 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

font-size: -webkit-calc(5px + (10 - 5) * ( (100vw - 300px) / ( 480 - 300) ));

font-size: -moz-calc(5px + (10 - 5) * ( (100vw - 300px) / ( 480 - 300) ));

font-size: calc(5px + (10 - 5) * ( (100vw - 300px) / ( 480 - 300) ));

margin: 0 0 1rem 0;

padding-left: 1em;

}

.top-box .top-left-box {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-moz-box-orient: vertical;

-moz-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

line-height: 1;

}

.top-left-box > .item {

font-size: 3em;

}

.top-box .top-left-box > span {

width: 100%;

}

.top-box .top-center-box {

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-moz-box-orient: horizontal;

-moz-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

width: 100%;

max-width: 48vw;

margin: 0 0 0 -0.15rem;

height: 2rem;

}

.top-center-box > div {

height: 25%;

margin: 0.15rem 0.15rem 0 0.15rem;

}

.top-box .top-right-box {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-moz-box-orient: vertical;

-moz-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

width: 100%;

max-width: 48vw;

margin: 0 0 0 -0.15rem;

height: 3rem;

}

.top-right-box > div {

line-height: 1;

}

.top-right-box > .level {

font-size: 4em;

}

.top-right-box > .clearance {

line-height: 1.5;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

font-size: -webkit-calc(14px + (14 - 10) * ( (100vw - 400px) / ( 480 - 300) ));

font-size: -moz-calc(14px + (14 - 10) * ( (100vw - 400px) / ( 480 - 300) ));

font-size: calc(14px + (14 - 10) * ( (100vw - 400px) / ( 480 - 300) ));

width: initial;

height: 1.5rem;

}

.top-right-box > .clearance::before {

line-height: 0.5;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

width: initial;

height: initial;

position: initial;

}

.anom-bar > .bottom-box {

position: initial;

-ms-grid-columns: 1fr;

grid-template-columns: 1fr;

height: 8rem;

}

.anom-bar-container:not(.esoteric) .text-part > .main-class::before {

width: 2.5rem;

height: 2.5rem;

top: -webkit-calc(50% - 1.475rem);

top: -moz-calc(50% - 1.475rem);

top: calc(50% - 1.475rem);

right: 0.5rem;

}

.text-part > div > .class-category,

.anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-category {

font-size: 1em;

}

.text-part .disrupt-class,

.text-part .risk-class {

font-size: 0.9em;

}

.text-part > .main-class::after,

.text-part .disrupt-class::after,

.text-part .risk-class::after {

height: 2rem;

width: 2rem;

top: -webkit-calc(50% - 1.25rem);

top: -moz-calc(50% - 1.25rem);

top: calc(50% - 1.25rem);

}

.text-part > .main-class::before,

.text-part .disrupt-class::before,

.text-part .risk-class::before {

height: 2.5rem;

width: 2.5rem;

font-size: 1rem;

top: -webkit-calc(50% - 1.25rem);

top: -moz-calc(50% - 1.25rem);

top: calc(50% - 1.25rem);

right: 1.5rem;

}

.anom-bar-container.esoteric .text-part > .main-class::before {

top: 0.15rem;

width: 4.5rem;

height: 2.5rem;

right: 1rem;

-webkit-background-size: 100% 100%;

-moz-background-size: 100% 100%;

-o-background-size: 100% 100%;

background-size: 100% 100%;

background-position: left -10px center;

}

.anom-bar-container.esoteric .text-part > .main-class::after {

height: 2.5rem;

width: 2.5rem;

}

.bottom-box > .diamond-part {

position: absolute;

top: 0;

right: 0;

width: 40vw;

height: 40vw;

padding: 0;

}

.diamond-part * {

background-repeat: no-repeat;

}

.top-box .top-left-box {

-ms-grid-row: 2;

-ms-grid-column: 1;

}

.top-box .top-center-box {

-ms-grid-row: 3;

-ms-grid-column: 1;

}

.top-box .top-right-box {

-ms-grid-row: 4;

-ms-grid-column: 1;

}

.anom-bar-container.pending .anom-bar > .bottom-box,

.anom-bar-container.neutralized .anom-bar > .bottom-box,

.anom-bar-container.neutralised .anom-bar > .bottom-box,

.anom-bar-container.explained .anom-bar > .bottom-box {

height: 6rem;

}

.danger-diamond > .top-icon {

top: 0.375rem;

}

.danger-diamond > .right-icon {

right: 0.375rem;

}

.danger-diamond > .left-icon {

left: 0.375rem;

}

.danger-diamond > .bottom-icon {

bottom: 0.375rem;

}

}

@supports not (--css: variables) {

.anom-bar {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-flow: column nowrap;

-moz-box-orient: vertical;

-moz-box-direction: normal;

-ms-flex-flow: column nowrap;

flex-flow: column nowrap;

}

.anom-bar > .top-box {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-moz-box-orient: horizontal;

-moz-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

}

.top-box .top-center-box {

-webkit-box-flex: 2;

-webkit-flex-grow: 2;

-moz-box-flex: 2;

-ms-flex-positive: 2;

flex-grow: 2;

}

.anom-bar > .bottom-box {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

}

.bottom-box > .text-part {

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-moz-box-flex: 1;

-ms-flex-positive: 1;

flex-grow: 1;

width: 100%;

}

.anom-bar-container .text-part .main-class {

overflow: hidden;

}

.anom-bar-container .text-part .disrupt-class,

.anom-bar-container .text-part .risk-class {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-moz-box-orient: horizontal;

-moz-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: start;

-webkit-justify-content: flex-start;

-moz-box-pack: start;

-ms-flex-pack: start;

justify-content: flex-start;

}

.anom-bar-container .text-part .disrupt-class .class-category,

.anom-bar-container .text-part .risk-class  .class-category {

-webkit-flex-shrink: 4;

-ms-flex-negative: 4;

flex-shrink: 4;

}

.bottom-box > .diamond-part {

width: 6rem;

height: 6rem;

-webkit-box-flex: 0;

-webkit-flex-grow: 0;

-moz-box-flex: 0;

-ms-flex-positive: 0;

flex-grow: 0;

-webkit-flex-shrink: 0;

-ms-flex-negative: 0;

flex-shrink: 0;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

}

@media (max-width: 480px ) {

.anom-bar > .top-box {

height: 6rem;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-moz-box-orient: vertical;

-moz-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

width: -webkit-calc(100% - 40vw);

width: -moz-calc(100% - 40vw);

width: calc(100% - 40vw);

}

.top-box .top-left-box {

display: initial;

}

.top-box > * {

width: 100%;

height: auto;

}

.top-box .top-center-box {

-webkit-box-flex: 0;

-webkit-flex-grow: 0;

-moz-box-flex: 0;

-ms-flex-positive: 0;

flex-grow: 0;

}

}

}

/module

div_ class="anom-bar-container item-{$item-number} clear-{$clearance} {$container-class} {$secondary-class} {$disruption-class} {$risk-class} {$american}"

div_ class="anom-bar"

div_ class="top-box"

div_ class="top-left-box"

span class="item"Item#:/span span class="number"{$item-number}/span

/div

div_ class="top-center-box"

div_ class="bar-one"

/div

div_ class="bar-two"

/div

div_ class="bar-three"

/div

div_ class="bar-four"

/div

div_ class="bar-five"

/div

div_ class="bar-six"

/div

/div

div_ class="top-right-box"

div_ class="level"

Level{$clearance}

/div

div_ class="clearance"

/div

/div

/div

div_ class="bottom-box"

div_ class="text-part"

div_ class="main-class"

div_ class="contain-class"

div_ class="class-category"

Containment Class:

/div

div_ class="class-text"

{$container-class}

/div

/div

div_ class="second-class"

div_ class="class-category"

Secondary Class:

/div

div_ class="class-text"

{$secondary-class}

/div

/div

/div

div_ class="disrupt-class"

div_ class="class-category"

Disruption Class:

/div

div_ class="class-text"

{$disruption-class}

/div

/div

div_ class="risk-class"

div_ class="class-category"

Risk Class:

/div

div_ class="class-text"

{$risk-class}

/div

/div

/div

div_ class="diamond-part"

div_ class="danger-diamond"

link to memo]

div_ class="arrows"

/div

div_ class="octagon"

/div

div_ class="quadrants"

div_ class="top-quad"

/div

div_ class="right-quad"

/div

div_ class="left-quad"

/div

div_ class="bottom-quad"

/div

/div

div_ class="top-icon"

/div

div_ class="right-icon"

/div

div_ class="left-icon"

/div

div_ class="bottom-icon"

/div

/div

/div

/div

/div

/div

/iftags