ACS Lite by peppo

Link to article: ACS Lite by peppo.

Module Styles

• 
  @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;
  }
  
  #page-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.05rem 0 0 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 {
      -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: 96%;
          -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: 0;
  }
  
  .top-box .top-left-box {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      grid-area: top-left-box;
      padding-left: 0.3rem;
  }
  
  .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: 2em;
  }
  
  .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: 90%;
      margin: 0 1.4rem 0 0.7rem;
      padding: 0px 2rem 0px 0px;
  }
  
  .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 > div {
      height: 1.5rem;
  }
  
  .anom-bar-container.clear-2 .top-center-box > div {
      height: 0.625rem;
  }
  
  .anom-bar-container.clear-3 .top-center-box > div {
      height: 0.333 rem;
  }
  
  .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("http://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);
      margin-left: -40px;
  }
  
  .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: 1.25em;
      line-height: 0.7;
      font-weight: 900;
  }
  
  .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(9px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));
      font-size: -moz-calc(9px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));
      font-size: calc(9px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));
      line-height: 1.75;
      white-space: nowrap;
  }
  
  .top-right-box > .clearance::before {
      position: absolute;
      top: -15%;
      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 {
      box-shadow:none;
      -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 7.6rem;
      grid-template-columns: 1fr 7.6rem;
      grid-gap: 0.5rem;
      width: 100%;
  /* note: bottom container height */
      height: 5rem;
      font-weight: 600;
      margin-top: 0.5rem;
      padding-top: 0rem;
  }
  
  .bottom-box > .text-part {
      -ms-grid-row: 1;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      display: -ms-grid;
      display: grid;
      height: 5.3rem;
      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: 5fr 4fr;
      grid-gap: 0.5rem;
      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;
      margin-top: -0.4rem;
  }
  
  .text-part div {
      padding: 0 0.125rem;
      margin: 0 0 0 0.25rem;
      position: relative;
  visibility:visible;
  }
  
  .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);
  }
  
  .text-part > .main-class > div {
       padding:0.25rem 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% - 1.5rem);
  //    top: -moz-calc(50% - 1.5rem);
  //    top: calc(50% - 1.5rem);
      right: 0.5rem;
      width: 3.5rem;
      height: 3.53125rem;
      margin-right: 1rem;
      -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(--black-monochrome, 12, 12, 12));
      background-color: rgb(252, 252, 252);
  background-color: rgb(var(--white-monochrome, 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(--white-monochrome, 252, 252, 252));
      border-color: rgb(var(--white-monochrome, 252, 252, 252));
      -webkit-filter: invert(1);
              filter: invert(1);
      background-image: url("http://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(--black-monochrome, 12, 12, 12));
      background-color: rgb(252, 252, 252);
  background-color: rgb(var(--white-monochrome, 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("http://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("http://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("http://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(--gray-monochrome, 66, 66, 72),0.15);
      border-left: 0.75rem solid rgba(66, 66, 72 ,1);
      border-left: 0.75rem solid rgba(var(--gray-monochrome, 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(--gray-monochrome, 66, 66, 72),0.15);
      border-left: 0.75rem solid rgba(66, 66, 72 ,1);
      border-left: 0.75rem solid rgba(var(--gray-monochrome, 66, 66, 72),1);
  }
  
  .anom-bar-container.pending .text-part .main-class {
      background-color: rgba(12, 12, 12 ,0.15);
      background-color: rgba(var(--black-monochrome, 12, 12, 12),0.15);
      border-left: 0.75rem solid rgba(12, 12, 12 ,1);
      border-left: 0.75rem solid rgba(var(--black-monochrome, 12, 12, 12),1);
  }
  
  .anom-bar-container.explained .text-part .main-class {
      background-color: rgba(252, 252, 252 ,0.15);
      background-color: rgba(var(--white-monochrome, 252, 252, 252),0.15);
      border-left: 0.75rem solid rgba(12, 12, 12 ,1);
      border-left: 0.75rem solid rgba(var(--black-monochrome, 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(--black-monochrome, 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(--white-monochrome, 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(--black-monochrome, 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(--white-monochrome, 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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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 {
      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;
  }
  
  .danger-diamond {
      position: absolute;
      width: 95%;
      height: 95%;
      top: -30%;
      left: 5%;
      box-shadow:none;
  }
  
  .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 {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      background-image: 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");
      background-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%;
      left: 18.5%;
      background-color: rgb(252, 252, 252);
  background-color: rgb(var(--white-monochrome, 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(--white-monochrome, 252, 252, 252),0.25);
  }
  
  .danger-diamond > .quadrants > .top-quad.pending {
      background-color: rgb(12, 12, 12 ,0.25);
      background-color: rgb(var(--black-monochrome, 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(--gray-monochrome, 66, 66, 72),0.25);
  }
  
  .danger-diamond > .quadrants > .top-quad.explained {
      background-color: rgb(252, 252, 252 ,0.25);
      background-color: rgb(var(--white-monochrome, 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(--gray-monochrome, 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(--black-monochrome, 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(--black-monochrome, 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(--white-monochrome, 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(--gray-monochrome, 66, 66, 72),0.15);
      background-image: url("http://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(--black-monochrome, 12, 12, 12));
      background-image: url("http://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(--white-monochrome, 252, 252, 252));
      background-image: url("http://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(--white-monochrome, 252, 252, 252));
      background-image: url("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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;
  }
  
  .anom-bar > .bottom-box::before {
       background-color: transparent;
       box-shadow: 0 0 0 0 rgb(var(--bright-accent))!important;
  }
  
  .anom-bar-container > .anom-bar > .bottom-box {
      box-shadow: none important;
      visibility: hidden;
  }
  
  .diamond-part {
      visibility:visible;
  }
  
  .text--part {
      visibility:visible;
  }
  
  #page-content > .anom-bar-container > .anom-bar > .bottom-box {
      box-shadow: none important;
  }
  
  .anom-bar > .bottom-box > .diamond-part {
      box-shadow: none !important;
  }
  
  
  // ^^ Trying to fix broken bars appearing on dark themes
  
  @media (max-width: 960px ) {
      .anom-bar > .top-box {
  //        padding-bottom: 1.5em;
           width: 93%
      }
  
      .anom-bar > .bottom-box {
          -ms-grid-columns: 1fr 0.5rem 7.4rem;
          grid-template-columns: 1fr 7.4rem;
          height: 5rem;
          margin-top: 0.5rem;
      }
  
      .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( 10px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));
          font-size: -moz-calc( 10px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));
          font-size: calc( 10px + (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( 10px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));
          font-size: -moz-calc( 10px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));
          font-size: calc( 10px + (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;
      }
  
      .anom-bar > .top-box {
          padding-bottom: 0;
      }
  
      .top-box .top-center-box {
          padding: 0px 5.5rem 0px 0px;
          height: 85%;
      }
  
      .top-box .top-right-box {
          margin-left: -5.7rem;
          align-self: self-start;
          margin-top: 0.1rem;
      }
  
      .bottom-box > .text-part {
          grid-template-areas:
              "main-class main-class"
              "disrupt-class risk-class";
          -ms-grid-rows: 5fr 0.25rem 3fr;
          grid-template-rows: 5fr 3fr;
          -ms-grid-columns: 1 fr 1fr;
          grid-template-columns: 1fr 1fr;
          height: 7rem;
          margin-top:0;
      }
  
      .text-part > .main-class > div {
           padding: 0.1rem 0.5rem;
      }
  
      .anom-bar > .bottom-box {
          -ms-grid-columns: 1fr 0.5rem 0.5rem;
          grid-template-columns: 1fr 9.5rem;
          height: 7rem;
          padding-top: 0rem;
          margin-top:0.1rem;
      }
  
      .anom-bar-container.esoteric .text-part > .main-class::after,
      .text-part > .main-class::after {
      right: 1.25rem;
          height: 2.25rem;
          width: 2.25rem;
      }
  
      .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);
          top: initial;
          border-width: 0.25rem;
      }
  
      .text-part > .main-class::before {
      width: 2.5rem;
      height: 2.53125rem;
          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);
          top: initial;
          right: 0.75rem;
      }
  
      .anom-bar-container.esoteric .text-part > .main-class::after {
  //        top: 0.35rem;
      }
  
      .anom-bar-container.esoteric .text-part > .main-class::before {
  //        top: 0.35rem;
          width: 5rem;
          height: 2.25rem;
          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: 0.5rem 0 0.5rem 0.25rem;
          display: -ms-grid;
          display: grid;
          -ms-grid-rows: 1fr 1fr;
          grid-template-rows: 1fr 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;
      }
  
      .danger-diamond {
          top: -20%;
      }
  
      .text-part div {
          padding: 0 0.125rem;
          margin: 0 0 0 0;
          position: relative;
      }
  
  }
  
  @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;
      }
  
      .anom-bar-container.neutralized .text-part .main-class,
      .anom-bar-container.neutralised .text-part .main-class {
          height: 4.5rem;
      }
  }
  
  @media (max-width: 480px ) {
  
      .text-part > .main-class > div {
            padding:0.1rem;
      }
  
      .bottom-box > .text-part {
          height: 6.5rem;
      }
  
      .anom-bar {
          position: relative;
      }
  
      .anom-bar > .top-box {
          height: 19vw;
          max-height: 19vw;
                  grid-template-areas:
              "top-left-box top-center-box"
              "top-right-box top-right-box";
          -ms-grid-rows: 1fr 1fr 1fr 1fr;
          grid-template-rows: 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 0.2rem 0;
          padding-left: 0em;
          grid-template-columns: auto 1fr 0.4fr;
      }
  
      .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: 2em;
      }
  
      .top-left-box > .number {
          font-size: -webkit-calc(33px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));
          font-size: -moz-calc(33px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));
          font-size: calc(23px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));
      }
  
      .top-box .top-left-box > span {
          width: 100%;
      }
  
      .top-box .top-center-box {
      width: 100%;
          max-width: 48vw;
          margin: 0 0 0 0;
      height: 2rem;
      padding:0;
          grid-area: top-right-box;
      }
  
      .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 1rem;
      height: 2rem;
      grid-area: top-center-box;
      }
  
      .top-right-box > div {
          line-height: 1;
      }
  
      .top-right-box > .level {
          font-size: 4em;
          line-height: 0;
           margin: 0.7rem 0 0 0;
           align-items: baseline;
      }
  
      .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;
          margin: 0.3rem 0 0 0;
      }
  
      .top-right-box > .clearance::before {
          line-height: initial;
          -webkit-box-align: center;
          -webkit-align-items: center;
             -moz-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          width: initial;
          height: initial;
          top: initial;
      }
  
      .anom-bar > .bottom-box {
          position: initial;
          display: initial;
          -ms-grid-columns: 1fr;
          grid-template-columns: 1fr;
          height: 6.5rem;
      }
  
      .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;
      }
  
      .danger-diamond {
          top: 0%;
          height: 45%;
          width: 45%;
          left: unset;
          right: 0;
      }
  
      .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);
          top: initial;
          right: -0.4rem;
      }
  
      .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);
          top: initial;
          right: 0.2rem;
      }
  
      .anom-bar-container.esoteric .text-part > .main-class::before {
  //        top: 0.15rem;
          width: 5rem;
          height: 2.5rem;
          right: 0.5rem;
          -webkit-background-size: 100% 100%;
             -moz-background-size: 100% 100%;
               -o-background-size: 100% 100%;
                  background-size: 100% 100%;
          background-position: left -15px center;
      }
  
      .anom-bar-container.esoteric .text-part > .main-class::after {
          height: 2.5rem;
          width: 2.5rem;
  //        top: 0.2rem;
          right: 0.2rem;
      }
  
      .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.275rem;
      border: 0.10875rem solid rgb(12, 12, 12);
      border: 0.10875rem solid rgb(var(--black-monochrome, 12, 12, 12));
      }
  
      .danger-diamond > .right-icon {
          right: 0.275rem;
      border: 0.10875rem solid rgb(12, 12, 12);
      border: 0.10875rem solid rgb(var(--black-monochrome, 12, 12, 12));
      }
  
      .danger-diamond > .left-icon {
          left: 0.275rem;
      border: 0.10875rem solid rgb(12, 12, 12);
      border: 0.10875rem solid rgb(var(--black-monochrome, 12, 12, 12));
      }
  
      .danger-diamond > .bottom-icon {
          bottom: 0.275rem;
      border: 0.10875rem solid rgb(12, 12, 12);
      border: 0.10875rem solid rgb(var(--black-monochrome, 12, 12, 12));
      }
  }
  
  @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;
              padding:0;
          }
          
      }
  }
  
  .danger-diamond > .arrows, .anom-bar > .bottom-box::before {
      background-color: transparent !important;
  }
  
  .contain-class .class-text::before {
       color: rgb(228 228 228);
  }

Inline Styles

• (none)

Includes

• (none)

CSS Classes

• anom-bar-container

• item-{$item-number}

• clear-{$clearance}

• {$container-class}

• {$secondary-class}

• {$disruption-class}

• {$risk-class}

• {$american}

• anom-bar

• top-box

• top-left-box

• item

• number

• top-center-box

• bar-one

• bar-two

• bar-three

• bar-four

• bar-five

• bar-six

• top-right-box

• level

• clearance

• bottom-box

• text-part

• main-class

• contain-class

• class-category

• class-text

• second-class

• class-category

• class-text

• disrupt-class

• class-category

• class-text

• risk-class

• class-category

• class-text

• diamond-part

• danger-diamond

• arrows

• octagon

• quadrants

• top-quad

• right-quad

• left-quad

• bottom-quad

• top-icon

• right-icon

• left-icon

• bottom-icon

Page Source

[[iftags -component]]
[[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;
}

#page-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.05rem 0 0 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 {
    -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: 96%;
        -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: 0;
}

.top-box .top-left-box {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: top-left-box;
    padding-left: 0.3rem;
}

.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: 2em;
}

.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: 90%;
    margin: 0 1.4rem 0 0.7rem;
    padding: 0px 2rem 0px 0px;
}

.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 > div {
    height: 1.5rem;
}

.anom-bar-container.clear-2 .top-center-box > div {
    height: 0.625rem;
}

.anom-bar-container.clear-3 .top-center-box > div {
    height: 0.333 rem;
}

.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("http://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);
    margin-left: -40px;
}

.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: 1.25em;
    line-height: 0.7;
    font-weight: 900;
}

.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(9px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));
    font-size: -moz-calc(9px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));
    font-size: calc(9px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) ));
    line-height: 1.75;
    white-space: nowrap;
}

.top-right-box > .clearance::before {
    position: absolute;
    top: -15%;
    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 {
    box-shadow:none;
    -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 7.6rem;
    grid-template-columns: 1fr 7.6rem;
    grid-gap: 0.5rem;
    width: 100%;
/* note: bottom container height */
    height: 5rem;
    font-weight: 600;
    margin-top: 0.5rem;
    padding-top: 0rem;
}

.bottom-box > .text-part {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    display: -ms-grid;
    display: grid;
    height: 5.3rem;
    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: 5fr 4fr;
    grid-gap: 0.5rem;
    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;
    margin-top: -0.4rem;
}

.text-part div {
    padding: 0 0.125rem;
    margin: 0 0 0 0.25rem;
    position: relative;
visibility:visible;
}

.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);
}

.text-part > .main-class > div {
     padding:0.25rem 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% - 1.5rem);
//    top: -moz-calc(50% - 1.5rem);
//    top: calc(50% - 1.5rem);
    right: 0.5rem;
    width: 3.5rem;
    height: 3.53125rem;
    margin-right: 1rem;
    -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(--black-monochrome, 12, 12, 12));
    background-color: rgb(252, 252, 252);
background-color: rgb(var(--white-monochrome, 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(--white-monochrome, 252, 252, 252));
    border-color: rgb(var(--white-monochrome, 252, 252, 252));
    -webkit-filter: invert(1);
            filter: invert(1);
    background-image: url("http://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(--black-monochrome, 12, 12, 12));
    background-color: rgb(252, 252, 252);
background-color: rgb(var(--white-monochrome, 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("http://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("http://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("http://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(--gray-monochrome, 66, 66, 72),0.15);
    border-left: 0.75rem solid rgba(66, 66, 72 ,1);
    border-left: 0.75rem solid rgba(var(--gray-monochrome, 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(--gray-monochrome, 66, 66, 72),0.15);
    border-left: 0.75rem solid rgba(66, 66, 72 ,1);
    border-left: 0.75rem solid rgba(var(--gray-monochrome, 66, 66, 72),1);
}

.anom-bar-container.pending .text-part .main-class {
    background-color: rgba(12, 12, 12 ,0.15);
    background-color: rgba(var(--black-monochrome, 12, 12, 12),0.15);
    border-left: 0.75rem solid rgba(12, 12, 12 ,1);
    border-left: 0.75rem solid rgba(var(--black-monochrome, 12, 12, 12),1);
}

.anom-bar-container.explained .text-part .main-class {
    background-color: rgba(252, 252, 252 ,0.15);
    background-color: rgba(var(--white-monochrome, 252, 252, 252),0.15);
    border-left: 0.75rem solid rgba(12, 12, 12 ,1);
    border-left: 0.75rem solid rgba(var(--black-monochrome, 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(--black-monochrome, 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(--white-monochrome, 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(--black-monochrome, 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(--white-monochrome, 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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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 {
    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;
}

.danger-diamond {
    position: absolute;
    width: 95%;
    height: 95%;
    top: -30%;
    left: 5%;
    box-shadow:none;
}

.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 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: 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");
    background-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%;
    left: 18.5%;
    background-color: rgb(252, 252, 252);
background-color: rgb(var(--white-monochrome, 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(--white-monochrome, 252, 252, 252),0.25);
}

.danger-diamond > .quadrants > .top-quad.pending {
    background-color: rgb(12, 12, 12 ,0.25);
    background-color: rgb(var(--black-monochrome, 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(--gray-monochrome, 66, 66, 72),0.25);
}

.danger-diamond > .quadrants > .top-quad.explained {
    background-color: rgb(252, 252, 252 ,0.25);
    background-color: rgb(var(--white-monochrome, 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(--gray-monochrome, 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(--black-monochrome, 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(--black-monochrome, 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(--white-monochrome, 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(--gray-monochrome, 66, 66, 72),0.15);
    background-image: url("http://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(--black-monochrome, 12, 12, 12));
    background-image: url("http://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(--white-monochrome, 252, 252, 252));
    background-image: url("http://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(--white-monochrome, 252, 252, 252));
    background-image: url("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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("http://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;
}

.anom-bar > .bottom-box::before {
     background-color: transparent;
     box-shadow: 0 0 0 0 rgb(var(--bright-accent))!important;
}

.anom-bar-container > .anom-bar > .bottom-box {
    box-shadow: none important;
    visibility: hidden;
}

.diamond-part {
    visibility:visible;
}

.text--part {
    visibility:visible;
}

#page-content > .anom-bar-container > .anom-bar > .bottom-box {
    box-shadow: none important;
}

.anom-bar > .bottom-box > .diamond-part {
    box-shadow: none !important;
}


// ^^ Trying to fix broken bars appearing on dark themes

@media (max-width: 960px ) {
    .anom-bar > .top-box {
//        padding-bottom: 1.5em;
         width: 93%
    }

    .anom-bar > .bottom-box {
        -ms-grid-columns: 1fr 0.5rem 7.4rem;
        grid-template-columns: 1fr 7.4rem;
        height: 5rem;
        margin-top: 0.5rem;
    }

    .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( 10px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));
        font-size: -moz-calc( 10px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));
        font-size: calc( 10px + (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( 10px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));
        font-size: -moz-calc( 10px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) ));
        font-size: calc( 10px + (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;
    }

    .anom-bar > .top-box {
        padding-bottom: 0;
    }

    .top-box .top-center-box {
        padding: 0px 5.5rem 0px 0px;
        height: 85%;
    }

    .top-box .top-right-box {
        margin-left: -5.7rem;
        align-self: self-start;
        margin-top: 0.1rem;
    }

    .bottom-box > .text-part {
        grid-template-areas:
            "main-class main-class"
            "disrupt-class risk-class";
        -ms-grid-rows: 5fr 0.25rem 3fr;
        grid-template-rows: 5fr 3fr;
        -ms-grid-columns: 1 fr 1fr;
        grid-template-columns: 1fr 1fr;
        height: 7rem;
        margin-top:0;
    }

    .text-part > .main-class > div {
         padding: 0.1rem 0.5rem;
    }

    .anom-bar > .bottom-box {
        -ms-grid-columns: 1fr 0.5rem 0.5rem;
        grid-template-columns: 1fr 9.5rem;
        height: 7rem;
        padding-top: 0rem;
        margin-top:0.1rem;
    }

    .anom-bar-container.esoteric .text-part > .main-class::after,
    .text-part > .main-class::after {
    right: 1.25rem;
        height: 2.25rem;
        width: 2.25rem;
    }

    .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);
        top: initial;
        border-width: 0.25rem;
    }

    .text-part > .main-class::before {
    width: 2.5rem;
    height: 2.53125rem;
        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);
        top: initial;
        right: 0.75rem;
    }

    .anom-bar-container.esoteric .text-part > .main-class::after {
//        top: 0.35rem;
    }

    .anom-bar-container.esoteric .text-part > .main-class::before {
//        top: 0.35rem;
        width: 5rem;
        height: 2.25rem;
        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: 0.5rem 0 0.5rem 0.25rem;
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: 1fr 1fr;
        grid-template-rows: 1fr 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;
    }

    .danger-diamond {
        top: -20%;
    }

    .text-part div {
        padding: 0 0.125rem;
        margin: 0 0 0 0;
        position: relative;
    }

}

@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;
    }

    .anom-bar-container.neutralized .text-part .main-class,
    .anom-bar-container.neutralised .text-part .main-class {
        height: 4.5rem;
    }
}

@media (max-width: 480px ) {

    .text-part > .main-class > div {
          padding:0.1rem;
    }

    .bottom-box > .text-part {
        height: 6.5rem;
    }

    .anom-bar {
        position: relative;
    }

    .anom-bar > .top-box {
        height: 19vw;
        max-height: 19vw;
                grid-template-areas:
            "top-left-box top-center-box"
            "top-right-box top-right-box";
        -ms-grid-rows: 1fr 1fr 1fr 1fr;
        grid-template-rows: 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 0.2rem 0;
        padding-left: 0em;
        grid-template-columns: auto 1fr 0.4fr;
    }

    .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: 2em;
    }

    .top-left-box > .number {
        font-size: -webkit-calc(33px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));
        font-size: -moz-calc(33px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));
        font-size: calc(23px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) ));
    }

    .top-box .top-left-box > span {
        width: 100%;
    }

    .top-box .top-center-box {
    width: 100%;
        max-width: 48vw;
        margin: 0 0 0 0;
    height: 2rem;
    padding:0;
        grid-area: top-right-box;
    }

    .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 1rem;
    height: 2rem;
    grid-area: top-center-box;
    }

    .top-right-box > div {
        line-height: 1;
    }

    .top-right-box > .level {
        font-size: 4em;
        line-height: 0;
         margin: 0.7rem 0 0 0;
         align-items: baseline;
    }

    .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;
        margin: 0.3rem 0 0 0;
    }

    .top-right-box > .clearance::before {
        line-height: initial;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: initial;
        height: initial;
        top: initial;
    }

    .anom-bar > .bottom-box {
        position: initial;
        display: initial;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        height: 6.5rem;
    }

    .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;
    }

    .danger-diamond {
        top: 0%;
        height: 45%;
        width: 45%;
        left: unset;
        right: 0;
    }

    .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);
        top: initial;
        right: -0.4rem;
    }

    .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);
        top: initial;
        right: 0.2rem;
    }

    .anom-bar-container.esoteric .text-part > .main-class::before {
//        top: 0.15rem;
        width: 5rem;
        height: 2.5rem;
        right: 0.5rem;
        -webkit-background-size: 100% 100%;
           -moz-background-size: 100% 100%;
             -o-background-size: 100% 100%;
                background-size: 100% 100%;
        background-position: left -15px center;
    }

    .anom-bar-container.esoteric .text-part > .main-class::after {
        height: 2.5rem;
        width: 2.5rem;
//        top: 0.2rem;
        right: 0.2rem;
    }

    .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.275rem;
    border: 0.10875rem solid rgb(12, 12, 12);
    border: 0.10875rem solid rgb(var(--black-monochrome, 12, 12, 12));
    }

    .danger-diamond > .right-icon {
        right: 0.275rem;
    border: 0.10875rem solid rgb(12, 12, 12);
    border: 0.10875rem solid rgb(var(--black-monochrome, 12, 12, 12));
    }

    .danger-diamond > .left-icon {
        left: 0.275rem;
    border: 0.10875rem solid rgb(12, 12, 12);
    border: 0.10875rem solid rgb(var(--black-monochrome, 12, 12, 12));
    }

    .danger-diamond > .bottom-icon {
        bottom: 0.275rem;
    border: 0.10875rem solid rgb(12, 12, 12);
    border: 0.10875rem solid rgb(var(--black-monochrome, 12, 12, 12));
    }
}

@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;
            padding:0;
        }
        
    }
}

.danger-diamond > .arrows, .anom-bar > .bottom-box::before {
    background-color: transparent !important;
}

.contain-class .class-text::before {
     color: rgb(228 228 228);
}
[[/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"]]
[http://www.scp-wiki.net/classification-committee-memo 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]]

[[iftags +component]]
+ Check Page Source for Code

Alternate version of the [[[https://scp-wiki.wikidot.com/component:anomaly-class-bar|Anomaly Classification Bar.]]] This version is intended to take up less space and feel less intrusive.

Template:

> [[include :scp-wiki:component:acs-peppo-lite
> 
> |item-number= 0000
> |clearance= 1
> |container-class= keter
> |secondary-class= esoteric
> |secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aacs-peppo-lite/truculent-icon3.svg
> |disruption-class= keneq
> |risk-class= warning
> 
> ]]

[[[scp-4703|See an example here]]]
[[/iftags]]