/*
This is CSS pulled from the old site to make the Mitre Matrix work. Its just in here
too be stored somewhere local. It should be embedded along with the HTML and JS in an HTML Module inside of a style tag
*/

@import url(https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,400;0,500;0,700;0,900;1,400;1,500;1,700&family=Space+Grotesk:wght@400;500;700&display=swap);

.HtmlModule {
  line-height: 0.95;
  text-align: left;
}

  .HtmlModule button {
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .HtmlModule .container,
  .HtmlModule .container-fluid,
  .HtmlModule .container-lg,
  .HtmlModule .container-md,
  .HtmlModule .container-sm,
  .HtmlModule .container-xl {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%
  }

  @media(min-width: 576px) {

    .HtmlModule .container,
    .HtmlModule .container-sm {
      max-width: 540px
    }
  }

  @media(min-width: 768px) {

    .HtmlModule .container,
    .HtmlModule .container-md,
    .HtmlModule .container-sm {
      max-width: 720px
    }
  }

  @media(min-width: 992px) {

    .HtmlModule .container,
    .HtmlModule .container-lg,
    .HtmlModule .container-md,
    .HtmlModule .container-sm {
      max-width: 960px
    }
  }

  @media(min-width: 1200px) {

    .HtmlModule .container,
    .HtmlModule .container-lg,
    .HtmlModule .container-md,
    .HtmlModule .container-sm,
    .HtmlModule .container-xl {
      max-width: 1140px
    }
  }

  .HtmlModule .mitre-matrix {
    background-color: #06151b;
    color: #fff
  }

  .HtmlModule .mitre-matrix .clickable-cell {
    color: #fff
  }

  .HtmlModule .mitre-matrix .container {
    padding-bottom: 64px
  }

  .HtmlModule .mitre-matrix .container:first-child {
    padding-top: 64px
  }

  .HtmlModule .mitre-matrix .container a {
    text-decoration: underline
  }

  @media(min-width: 768px) {
    .HtmlModule .mitre-matrix .container {
      display: flex
    }

    .HtmlModule .mitre-matrix__evals-container--flex-right {
      flex: 0 1 30%
    }
  }

  .HtmlModule .mitre-matrix__intro-container {
    line-height: 26px;
    padding-right: 40px
  }

  @media(min-width: 768px) {
    .HtmlModule .mitre-matrix__intro-container--flex-left {
      flex: 0 1 70%
    }
  }

  .mitre-matrix__mitre-eval-btn-description {
    line-height: 26px;
    margin-bottom: 20px;
    margin-top: 45px
  }

  .mitre-matrix__mitre-eval-item.btn {
    background: var(--color-button-bg);
    color: white;
  }

  @media(min-width: 768px) {
    .HtmlModule .mitre-matrix__mitre-eval-btn-description {
      margin-top: unset
    }
  }

  .HtmlModule .mitre-matrix--full-width {
    width: 100%
  }

  .HtmlModule .mitre-matrix__table {
    overflow: scroll;
    padding: 0 16px 32px;
    width: 100%
  }

  .HtmlModule .mitre-matrix__table.mitre-matrix__table--desktop-only {
    display: none
  }

  @media(min-width: 768px) {
    .HtmlModule .mitre-matrix__table.mitre-matrix__table--desktop-only {
      display: block
    }
  }

  .HtmlModule .mitre-matrix__table table {
    width: 100%
  }

  .HtmlModule .mitre-matrix__table table tr {
    border-top: 1px solid #0e5f5d;
    vertical-align: top
  }

  .HtmlModule .mitre-matrix__table table tr td,
  .HtmlModule .mitre-matrix__table table tr th {
    padding: 8px;
    vertical-align: middle
  }

  .HtmlModule .mitre-matrix__table table tr td:nth-child(2n),
  .HtmlModule .mitre-matrix__table table tr th:nth-child(2n) {
    background-color: #1e282c
  }

  .HtmlModule .mitre-matrix__table table tr th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase
  }

  .HtmlModule .mitre-matrix__table table tr th:nth-child(2n-1) {
    background-color: #0e5f5d
  }

  .HtmlModule .mitre-matrix__table table tr td {
    font-size: 12px;
  }

  .HtmlModule .mitre-matrix__table table tr td.clickable-cell {
    position: relative
  }

  .HtmlModule .mitre-matrix__table table tr td.clickable-cell.active-cell,
  .HtmlModule .mitre-matrix__table table tr td.clickable-cell:focus,
  .HtmlModule .mitre-matrix__table table tr td.clickable-cell:hover {
    background-color: #52d7c7;
    color: #000;
    cursor: pointer
  }

  .HtmlModule .mitre-matrix__table table tr td.active-eval-cell {
    background: #06151b;
    box-shadow: inset 0 0 0 2px #e27b36;
    position: unset
  }

  .HtmlModule .mitre-matrix__table td.clickable-cell[aria-pressed=true] .mitre-matrix__table__td-detail {
    display: block
  }

  .HtmlModule .mitre-matrix__col:nth-child(n+8) .mitre-matrix__child .mitre-matrix__child__detail {
    transform: translateX(-75%)
  }

  .HtmlModule .mitre-matrix__col:nth-child(n+8) .mitre-matrix__child:nth-child(n+5) .mitre-matrix__child__detail {
    top: 0;
    transform: translateX(-75%) translateY(-100%)
  }

  .HtmlModule .mitre-matrix__col .mitre-matrix__child:nth-child(n+9) .mitre-matrix__child__detail {
    top: 0;
    transform: translateY(-100%)
  }

  .HtmlModule .mitre-matrix__table tr td:nth-child(n+5) .mitre-matrix__table__td-detail {
    transform: translateX(-75%)
  }

  .HtmlModule .mitre-matrix__table tr:nth-child(n+9) td .mitre-matrix__table__td-detail {
    top: 0;
    transform: translateY(-100%)
  }

  .HtmlModule .mitre-matrix__table tr:nth-child(n+9) td:nth-child(n+5) .mitre-matrix__table__td-detail {
    transform: translateX(-75%) translateY(-100%)
  }

  .HtmlModule .mitre-matrix__table__td-detail {
    background-color: #fff;
    box-sizing: border-box;
    color: #000;
    display: none;
    height: auto;
    left: 0;
    line-height: 1.1;
    padding: 14px;
    position: absolute;
    top: 100%;
    width: 400%;
    z-index: 200
  }

  .HtmlModule .mitre-matrix__table__td-detail:hover {
    cursor: auto
  }

  .mitre-matrix-modal__content a,
  .HtmlModule .mitre-matrix__table__td-detail a {
    background-color: transparent;
    box-shadow: 2px 0 0 transparent, -2px 0 0 transparent;
    color: #0e5f5d;
    font-weight: 600;
    text-decoration: underline;
    transition: background-color .3s, box-shadow .3s, color .3s
  }

  .mitre-matrix-modal__content a:focus,
  .mitre-matrix-modal__content a:hover,
  .HtmlModule .mitre-matrix__table__td-detail a:focus,
  .HtmlModule .mitre-matrix__table__td-detail a:hover {
    background-color: #0e5f5d;
    box-shadow: 2px 0 0 #0e5f5d, -2px 0 0 #0e5f5d;
    color: #fff
  }

  .mitre-matrix-modal__content li,
  .mitre-matrix-modal__content ol,
  .mitre-matrix-modal__content p,
  .mitre-matrix-modal__content ul,
  .HtmlModule .mitre-matrix__table__td-detail li,
  .HtmlModule .mitre-matrix__table__td-detail ol,
  .HtmlModule .mitre-matrix__table__td-detail p,
  .HtmlModule .mitre-matrix__table__td-detail ul {
    margin-bottom: 12px;
    margin-top: 12px
  }

  .mitre-matrix-modal__content li:first-child,
  .mitre-matrix-modal__content ol:first-child,
  .mitre-matrix-modal__content p:first-child,
  .mitre-matrix-modal__content ul:first-child,
  .HtmlModule .mitre-matrix__table__td-detail li:first-child,
  .HtmlModule .mitre-matrix__table__td-detail ol:first-child,
  .HtmlModule .mitre-matrix__table__td-detail p:first-child,
  .HtmlModule .mitre-matrix__table__td-detail ul:first-child {
    margin-top: 0
  }

  .mitre-matrix-modal__content li:last-child,
  .mitre-matrix-modal__content ol:last-child,
  .mitre-matrix-modal__content p:last-child,
  .mitre-matrix-modal__content ul:last-child,
  .HtmlModule .mitre-matrix__table__td-detail li:last-child,
  .HtmlModule .mitre-matrix__table__td-detail ol:last-child,
  .HtmlModule .mitre-matrix__table__td-detail p:last-child,
  .HtmlModule .mitre-matrix__table__td-detail ul:last-child {
    margin-bottom: 0
  }

  .mitre-matrix-modal__content ol,
  .mitre-matrix-modal__content ul,
  .HtmlModule .mitre-matrix__table__td-detail ol,
  .HtmlModule .mitre-matrix__table__td-detail ul {
    padding-left: 20px
  }

  .mitre-matrix-modal__content ol,
  .HtmlModule .mitre-matrix__table__td-detail ol {
    list-style-type: decimal
  }

  .mitre-matrix-modal__content ul,
  .HtmlModule .mitre-matrix__table__td-detail ul {
    list-style-type: circle
  }

  .HtmlModule .mitre-matrix__threats {
    box-sizing: border-box;
    display: none;
    font-size: 0;
    padding: 24px 8px 8px;
    width: 100%
  }

  @media(min-width: 768px) {
    .HtmlModule .mitre-matrix__threats {
      overflow: scroll;
      padding-top: 0;
      white-space: nowrap
    }
  }

  .HtmlModule .mitre-matrix__threats.mitre-matrix__threats--visible[aria-expanded=true] {
    display: block
  }

  .HtmlModule .mitre-matrix__threats__item {
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-family: Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 14px;
    margin-top: 16px;
    padding: 0 0 16px;
    text-align: center;
    width: 50%
  }

  @media(min-width: 768px) {
    .HtmlModule .mitre-matrix__threats__item {
      margin-right: 16px;
      margin-top: 0;
      width: 100px
    }
  }

  .HtmlModule .mitre-matrix__threats__item img {
    border-radius: 50%;
    box-shadow: 0 2px 13px 0 transparent;
    display: block;
    height: auto;
    margin: 8px auto 0;
    max-width: 72px;
    transition: box-shadow .3s;
    width: calc(100% - 24px)
  }

  .HtmlModule .mitre-matrix__threats__item.mitre-matrix__threats__item--active,
  .HtmlModule .mitre-matrix__threats__item:focus,
  .HtmlModule .mitre-matrix__threats__item:hover {
    cursor: pointer
  }

  .HtmlModule .mitre-matrix__threats__item.mitre-matrix__threats__item--active img,
  .HtmlModule .mitre-matrix__threats__item:focus img,
  .HtmlModule .mitre-matrix__threats__item:hover img {
    box-shadow: 0 2px 13px 0 #9ee44d
  }

  .HtmlModule .mitre-matrix__threats__item.mitre-matrix__threats__item--active .mitre-matrix__threats__item__name,
  .HtmlModule .mitre-matrix__threats__item:focus .mitre-matrix__threats__item__name,
  .HtmlModule .mitre-matrix__threats__item:hover .mitre-matrix__threats__item__name {
    opacity: 1
  }

  .mitre-matrix-modal .mitre-matrix__threats {
    display: block;
    margin-top: -24px;
    padding: 0
  }

  .mitre-matrix-modal .mitre-matrix__threats__item:hover {
    cursor: auto
  }

  .mitre-matrix-modal .mitre-matrix__threats__item img {
    box-shadow: none;
    margin: 0 auto 8px
  }

 .mitre-matrix-modal .mitre-matrix__threats__item .mitre-matrix__threats__item__name {
    color: #000;
    opacity: 1
  }

  @media(min-width: 576px) {
    .mitre-matrix-modal .mitre-matrix__threats__item {
      width: 33.3333333333%
    }
  }

  .mitre-matrix-modal .for-both-container {
    border-bottom: 1px solid #46b2a5;
    margin-bottom: 16px;
    padding-bottom: 16px
  }

  .mitre-matrix-modal--hide-consolidation,
  .mitre-matrix-modal--hide-eval,
  .mitre-matrix-modal--hide-technique {
    display: none
  }

  .HtmlModule .mitre-matrix__mitre-eval-item {
    text-transform: unset
  }

  .mitre-matrix-modal__content__subheading {
    margin-bottom: 16px
  }

  .HtmlModule .mitre-matrix__threats__item.mitre-matrix__threats__item--electrum.stale-red .mitre-matrix__threats__item__name {
    transition: opacity 2.5s
  }

  .HtmlModule .mitre-matrix__threats__item.mitre-matrix__threats__item--electrum.stale-red img {
    transition: box-shadow 2.5s
  }

  .HtmlModule .mitre-matrix__threats__item__name {
    transition: opacity .3s
  }

  @media(min-width: 768px) {
    .HtmlModule .mitre-matrix__threats__item__name {
      opacity: 0
    }
  }

  .HtmlModule .mitre-matrix__nav {
    box-sizing: border-box;
    font-size: 0;
    padding: 0 16px
  }

  .HtmlModule .mitre-matrix__nav.mitre-matrix__nav--visible {
    display: block
  }

  @media(min-width: 768px) {
    .HtmlModule .mitre-matrix__nav.mitre-matrix__nav--visible {
      display: none
    }
  }

  .HtmlModule .mitre-matrix__nav li,
  .HtmlModule .mitre-matrix__nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0
  }

  .HtmlModule .mitre-matrix__nav li {
    display: inline-block;
    width: 50%
  }

  .HtmlModule .mitre-matrix__nav li button {
    color: #fff;
    display: block;
    font-size: 18px;
    overflow: hidden;
    padding-bottom: 12px;
    position: relative;
    text-align: center;
    width: 100%
  }

  .HtmlModule .mitre-matrix__nav li button:after {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    transform: translateY(4px);
    transition: transform .3s, background-color .3s, color .3s;
    width: 100%
  }

  .HtmlModule .mitre-matrix__nav li button[aria-selected=true]:after {
    background-color: #52d7c7;
    transform: none
  }

  .HtmlModule .mitre-matrix__nav li button:focus,
  .HtmlModule .mitre-matrix__nav li button:hover {
    color: #52d7c7;
    cursor: pointer
  }

  .HtmlModule .mitre-matrix__nav li button:focus:after,
  .HtmlModule .mitre-matrix__nav li button:hover:after {
    background-color: #52d7c7
  }

  .mitre-matrix-modal {
    background-color: rgba(0, 0, 0, .3);
    box-sizing: border-box;
    height: 100%;
    left: 0;
    opacity: 1;
    overflow: scroll;
    padding: 132px 24px 24px;
    position: fixed;
    top: 0;
    transition: opacity .3s;
    width: 100%;
    z-index: 999999999
  }

  @media(min-width: 768px) {
    .mitre-matrix-modal {
      display: none
    }
  }

  .mitre-matrix-modal[aria-hidden=true] {
    opacity: 0;
    pointer-events: none;
    transition: none
  }

  .mitre-matrix-modal[aria-hidden=true] .mitre-matrix-modal__content {
    opacity: 0;
    transform: translateY(32px);
    transition: none
  }

  .mitre-matrix-modal__dismisser {
    border: 1px solid transparent;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px
  }

  .mitre-matrix-modal__dismisser:focus,
  .mitre-matrix-modal__dismisser:hover {
    cursor: pointer
  }

  .mitre-matrix-modal__dismisser:after,
  .mitre-matrix-modal__dismisser:before {
    background-color: #000;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    width: 50%
  }

  .mitre-matrix-modal__dismisser:after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg)
  }

  .mitre-matrix-modal__content {
    background-color: #fff;
    border: 1px solid #52d7c7;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 530px;
    opacity: 1;
    padding: 32px;
    position: relative;
    transform: translateY(0);
    transition: transform .3s .3s, opacity .3s .3s;
    width: 100%
  }

  .mitre-matrix-modal__popover-content {
    margin-top: 16px
  }

  .mitre-matrix-modal__content__title {
    font-family: Encode Sans, sans-serif;
    text-transform: uppercase
  }

  .mitre-matrix-modal__content__subtitle,
  .mitre-matrix-modal__content__title {
    box-sizing: border-box;
    font-size: 20px;
    margin-bottom: 24px;
    padding-right: 24px;
    width: 100%
  }

  .mitre-matrix-modal__content__subtitle {
    font-weight: 700
  }

  .mitre-matrix-modal__content__subheading {
    text-transform: uppercase
  }

  .mitre-matrix-modal__content__lockup {
    font-size: 0;
    margin-bottom: 16px
  }

  .mitre-matrix-modal__content__lockup img {
    display: inline-block;
    vertical-align: middle;
    width: 32px
  }

  .mitre-matrix-modal__content__lockup div {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    padding-left: 16px;
    vertical-align: middle
  }

  .mitre-matrix-modal__content__row {
    font-size: 0;
    margin-bottom: 16px
  }

  .mitre-matrix-modal__content__row>div {
    display: inline-block;
    font-family: Encode Sane;
    font-size: 14px;
    line-height: 18px;
    vertical-align: top;
    width: 50%
  }

  .mitre-matrix-modal__content__row>div:first-child {
    font-weight: 700
  }

  .mitre-matrix-modal__content__row>div>div {
    margin-bottom: 16px
  }

  .mitre-matrix-modal__content__row>div>div:last-child {
    margin-bottom: 0
  }

  .mitre-matrix-modal__compare-eval {
    height: 60px;
    margin-top: 40px;
    padding-top: 20px;
    position: relative
  }

  .mitre-matrix-modal__compare-eval:after {
    border-top: 1px solid #46b2a5;
    bottom: 0;
    content: " ";
    left: -32px;
    position: absolute;
    right: -32px;
    top: 0;
    z-index: -1
  }

  .HtmlModule .compare-against-eval {
    opacity: 0;
    position: absolute;
    z-index: 1000
  }

  .HtmlModule .compare-against-eval+label:before {
    background-color: #fff;
    border: 2px solid #46b2a5;
    content: "";
    display: inline-block;
    height: 25px;
    left: -40px;
    margin-right: 10px;
    position: absolute;
    vertical-align: text-top;
    width: 25px
  }

  .HtmlModule .compare-against-eval:checked+label:before {
    background-color: #46b2a5
  }

  .HtmlModule .compare-against-eval:checked+label:after {
    background: #06151b;
    box-shadow: 2px 0 0 #06151b, 4px 0 0 #06151b, 4px -2px 0 #06151b, 4px -4px 0 #06151b, 4px -6px 0 #06151b, 4px -8px 0 #06151b;
    content: "";
    height: 3px;
    left: -33px;
    position: absolute;
    top: 11px;
    transform: rotate(45deg);
    width: 3px
  }

  .HtmlModule .mitre-matrix__eval__title {
    border-top: 1px solid #46b2a5;
    padding-top: 16px
  }

  .HtmlModule .mitre-matrix__eval__title>div {
    padding-left: 0
  }

  .mitre-matrix-modal__compare-eval-title {
    display: inline;
    font-size: 20px;
    font-weight: 700;
    left: 40px;
    line-height: 24px;
    position: absolute;
    vertical-align: middle
  }

  body.mg-scroll-lock-mobile {
    overflow: hidden
  }

  @media(min-width: 768px) {
    body.mg-scroll-lock-mobile {
      overflow: auto
    }
  }

  .HtmlModule .mitre-matrix__accordion {
    display: none;
    font-size: 0;
    margin: 0 auto;
    max-width: 720px;
    padding-top: 24px
  }

  .HtmlModule .mitre-matrix__accordion.mitre-matrix__accordion--visible[aria-expanded=true] {
    display: block
  }

  .HtmlModule .mitre-matrix__accordion__row {
    overflow: hidden;
    transition: height .3s
  }

  .HtmlModule .mitre-matrix__accordion__row[aria-expanded=true] .mitre-matrix__accordion__row__title {
    color: #fff
  }

  .HtmlModule .mitre-matrix__accordion__row[aria-expanded=true] .mitre-matrix__accordion__row__title:after {
    border-color: #fff;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg)
  }

  .HtmlModule .mitre-matrix__accordion__row__title {
    color: #52d7c7;
    display: block;
    font-size: 18px;
    outline: none !important;
    padding: 24px;
    position: relative;
    text-align: left;
    transition: color .3s;
    width: 100%
  }

  .HtmlModule .mitre-matrix__accordion__row__title:focus,
  .HtmlModule .mitre-matrix__accordion__row__title:hover {
    color: #fff;
    cursor: pointer
  }

  .HtmlModule .mitre-matrix__accordion__row__title:focus:after,
  .HtmlModule .mitre-matrix__accordion__row__title:hover:after {
    border-color: #fff
  }

  .HtmlModule .mitre-matrix__accordion__row__title:focus:before {
    display: block
  }

  .HtmlModule .mitre-matrix__accordion__row__title:after {
    border-right: 2px solid #52d7c7;
    border-top: 2px solid #52d7c7;
    content: "";
    height: 16px;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(135deg);
    transition: border-color .3s, transform .3s;
    width: 16px
  }

  .HtmlModule .mitre-matrix__accordion__row__title:before {
    border: 2px solid #fff;
    content: "";
    display: none;
    height: calc(100% - 24px);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: calc(100% - 16px)
  }

  .HtmlModule .mitre-matrix__accordion__row__children {
    box-sizing: border-box;
    display: block;
    padding: 0 24px
  }

  .HtmlModule .mitre-matrix__accordion__row__children__item {
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-family: Encode Sans, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 8px;
    outline: none !important;
    padding: 8px;
    text-align: left;
    transition: color .3s, background-color .3s;
    vertical-align: top;
    width: 50%
  }

  .HtmlModule .mitre-matrix__accordion__row__children__item:focus,
  .HtmlModule .mitre-matrix__accordion__row__children__item:hover {
    background-color: #52d7c7;
    color: #06151b;
    cursor: pointer
  }

  .HtmlModule .matrix .container-fluid .promo-plain,
  .HtmlModule .matrix .container-lg .promo-plain,
  .HtmlModule .matrix .container-md .promo-plain,
  .HtmlModule .matrix .container-sm .promo-plain,
  .HtmlModule .matrix .container-xl .promo-plain {
    padding-top: 160px
  }

  .HtmlModule .service-header+.mitre-matrix {
    margin-top: -120px;
    padding-top: 120px
  }

  @media(min-width: 768px) {
    .HtmlModule .service-header+.mitre-matrix {
      margin-top: -164px;
      padding-top: 164px
    }
  }

  .HtmlModule .container.container--after-matrix {
    margin-top: 64px
  }

  .HtmlModule .container.container--after-matrix .large-cta {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 100vw
  }

  .HtmlModule .container.container--after-matrix img {
    margin: 0 auto
  }