@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"), local("Arial"), local("Helvetica"), sans-serif;
}
@font-face {
  font-family: LatoLight;
  src: url(./assets/Lato/Lato-Light.ttf) format("truetype");
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: LatoRegular;
  src: url(./assets/Lato/Lato-Regular.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: LatoBold;
  src: url(./assets/Lato/Lato-Bold.ttf) format("truetype");
  font-style: normal;
  font-weight: 800;
}
/*
  INITIAL DARK THEME COLORS

  --color-bg-dark: #121212;
  --color-bg-main: #181818;
  --color-bg-sidebar: #212121;
  --color-bg-emphasis: #323232;
  --color-bg-highlight: #383838;
  --color-bg-border: #4a4a4a;
  --color-bg-medium: #717171;
  --color-bg-contrast: #eee;

  --color-text-main: #fff;
  --color-text-inactive: #717171;
  --color-text-contrast: #555;
  --color-text-black: #111;
*/
:root {
  /* theme */
  --color-bg-main: #2b3040;
  --color-bg-main-rgb: 47, 51, 60;
  --color-bg-glow: #4c5366;
  --color-bg-box: #252935;
  --color-bg-box-rgb: 37, 41, 53;
  --color-bg-box-highlight: #3a3f4a;
  --color-bg-box-emphasis: #1d2029;
  --color-bg-box-emphasis-rgb: 29, 32, 41;
  --color-bg-sidebar: #393d46;
  --color-bg-sidebar-rgb: 57, 61, 70;
  --color-bg-dark: #121417;
  --color-bg-emphasis: #1d2029;
  --color-bg-subtle: #02133b;
  --color-bg-highlight: #434750;
  --color-bg-highlight-rgb: 67, 71, 80;
  --color-bg-highlight-hint: rgba(255, 255, 255, 0.03);
  --color-bg-border: #50545d;
  --color-bg-medium: #7f838c;
  --color-bg-contrast: #ececee;
  --color-text-main: #ececee;
  --color-text-secondary: #c3c3c5;
  --color-text-secondary-rgb: 195, 195, 197;
  --color-text-highlight: #aeb6cd;
  --color-text-inactive: #717178;
  --color-text-inactive-rgb: 113, 113, 120;
  --color-text-contrast: #535358;
  --color-text-black: #121417;
  /* color categories */
  --color-status-cat-0: var(--color-text-secondary);
  --color-status-cat-1: #cc2936;
  --color-status-cat-2: #ffdd15;
  --color-status-cat-3: #1bb14b;
  --color-status-cat-4: #2979ff;
  --color-status-cat-5: #7f3f97;
  --color-status-rgb-cat-0: var(--color-text-secondary-rgb);
  --color-status-rgb-cat-1: 204, 41, 54;
  --color-status-rgb-cat-2: 255, 221, 21;
  --color-status-rgb-cat-3: 27, 177, 75;
  --color-status-rgb-cat-4: 41, 121, 255;
  --color-status-rgb-cat-5: 127, 63, 151;
  --color-status-dark-cat-1: #6e2f3a;
  --color-status-dark-cat-2: #82772c;
  --color-status-dark-cat-3: #276542;
  --color-status-dark-cat-4: #2d4f8a;
  --color-status-dark-cat-5: #4f3860;
  --color-status-dark-rgb-cat-1: 110, 47, 58;
  --color-status-dark-rgb-cat-2: 130, 119, 44;
  --color-status-dark-rgb-cat-3: 39, 101, 66;
  --color-status-dark-rgb-cat-4: 45, 79, 138;
  --color-status-dark-rgb-cat-5: 79, 56, 96;
  /* color statuses */
  --color-logo: #ff9400;
  --color-logo-rgb: 248, 159, 78;
  --color-error: var(--color-status-cat-1);
  --color-error-rgb: var(--color-status-rgb-cat-1);
  --color-success: var(--color-status-cat-3);
  --color-success-rgb: var(--color-status-rgb-cat-3);
  --color-active: var(--color-status-cat-4);
  --color-active-rgb: var(--color-status-rgb-cat-4);
  --color-alternate: var(--color-status-cat-5);
  --color-alternate-rgb: var(--color-status-rgb-cat-5);
  /* sizes */
  --header-height: 6.5rem;
  --subheader-height: 2rem;
  --sidebar-width: 15rem;
  --page-width: 60rem;
  --logo-width: 9rem;
  --strict-gaps: 24px;
}

.standard-layout {
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-bg-main);
  background: radial-gradient(at 0% 30%, var(--color-bg-glow) 30%, var(--color-bg-main) 70%);
  /* background: #fff; */
  color: var(--color-text-main);
  font-size: 16px;
  height: 100vh;
}

textarea {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

textarea::-webkit-scrollbar {
  display: none;
}

.content h1,
.content h2,
.content h3 {
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
  color: rgba(var(--color-logo-rgb), 0.8);
}

.content h4,
.content h5,
.content h6 {
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
  color: var(--color-text-main);
}

.content h1 {
  font-size: 2rem;
}

.content h2 {
  font-size: 1.4rem;
}

.content h3 {
  font-size: 1.2rem;
}

.content h4 {
  font-size: 1.1rem;
}

.content h5 {
  font-size: 1rem;
}

.content h6 {
  font-size: 0.9rem;
}

.content p {
  font-size: 0.9rem;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content p {
  margin-bottom: 1.5rem;
}

.content h2.success {
  color: rgba(var(--color-success-rgb), 0.8);
}

.content h2.error {
  color: rgba(var(--color-error-rgb), 1);
}

.content ul {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
  font-size: 0.9rem;
}

.center {
  text-align: center;
  display: flex;
  justify-content: center;
}

#app #mode-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5rem;
}

#app #mode-select .mode-item {
  background: var(--color-active);
  color: var(--color-text-main);
  text-align: center;
  cursor: pointer;
  user-select: none;
  opacity: 0.7;
  font-size: 1.5rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  height: 12rem;
  width: 12rem;
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

#app #mode-select .mode-item > div {
  transform: rotate(-45deg);
}

#app #mode-select .mode-item:hover {
  opacity: 1;
}

#app #mode-switcher {
  position: fixed;
  z-index: 900;
  background: var(--color-active);
  color: var(--color-text-main);
  text-align: center;
  transform: rotate(-45deg);
  width: 10rem;
  height: 5rem;
  bottom: -1rem;
  right: -3.5rem;
  cursor: pointer;
  user-select: none;
  opacity: 0.5;
}

#app #mode-switcher.admin,
#app #mode-select .mode-item.admin {
  background: var(--color-status-cat-5);
}

#app #mode-switcher:hover {
  opacity: 1;
}

#app #mode-switcher > * {
  font-size: 10px;
  text-align: center;
}

#app #mode-switcher .current-mode {
  margin-top: 0.5rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

#app #mode-switcher .switch-mode {
  text-decoration: underline;
}

/* Full Width Content (Reports List, Settings views, etc) */
#app.full-width.single-column {
  margin: 0 auto 1rem;
  width: 80%;
  max-width: 40rem;
}

#app.full-width #logo {
  width: var(--logo-width);
  margin: 1rem auto;
}

#app.full-width .wide-column {
  margin: 0 auto 1rem;
  width: 80%;
  max-width: 80rem;
  padding: 3rem 0 5rem;
}

#app.full-width .split-column-wrapper {
  margin: 0 auto 1rem;
  width: 80%;
  max-width: 80rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3rem;
}

#app.with-sidebar .mainbar .split-column-wrapper {
  margin: 0 auto 1rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3rem;
  padding: 0 0 1rem;
}

.split-column-wrapper .span-full {
  grid-column: 1/-1;
}

#app.full-width #page-header {
  position: fixed;
  z-index: 600;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: transparent;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr var(--logo-width) 1fr;
  grid-template-areas: "title logo user";
  align-items: center;
}

#app.full-width #page-header #logo {
  grid-area: logo;
}

#app.full-width #page-header #user-info-wrapper {
  grid-area: user;
}

#app.full-width #page-header #page-title {
  grid-area: title;
  display: flex;
  align-items: center;
}

#app.full-width #page-title .page-title {
  margin-top: 0.4rem;
}

#app.full-width #page-title h4 {
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  margin: 0;
  padding: 0;
  line-height: 1;
  opacity: 0.4;
}

#app.full-width #page-title h1 {
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
  font-size: 1.3rem;
  margin: 0.2rem 0 0;
  padding: 0;
  line-height: 1;
}

#app.full-width #page-title a.material-icons {
  display: block;
  font-size: 1.5rem;
  padding: 1rem;
  border-right: 3px solid var(--color-logo);
  margin-right: 1rem;
  cursor: pointer;
  user-select: none;
}

#app.full-width #page-title a.material-icons:hover {
  background: rgba(var(--color-logo-rgb), 0.2);
}

#app.full-width #page-subheader {
  position: fixed;
  top: var(--header-height);
  left: 0;
  background: rgba(var(--color-bg-box-rgb), 0.7);
  /* filter: drop-shadow(0 0 15px rgba(var(--color-bg-main-rgb), 0.7)); */
  filter: drop-shadow(0 0 15px rgba(200, 200, 200, 0.1));
  height: var(--subheader-height);
  width: 100%;
  z-index: 600;
}

#page-subheader ul.subheader-menu {
  list-style-type: none;
  width: 80%;
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

#page-subheader ul.subheader-menu li a {
  cursor: pointer;
  user-select: none;
  display: block;
  width: 100%;
  text-align: center;
  padding: calc(0.4rem - 2px) 0 0.4rem;
  border-top: 2px solid transparent;
}

#page-subheader ul.subheader-menu li.active a {
  border-top: 2px solid var(--color-logo);
}

#page-subheader ul.subheader-menu li a:hover {
  background: rgba(var(--color-logo-rgb), 0.3);
}

/* Navigation Sidebar */
nav#sidebar {
  position: fixed;
  width: var(--sidebar-width);
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  overflow-y: auto;
}

nav#sidebar #logo a {
  display: block;
  cursor: pointer;
  user-select: none;
  width: 8rem;
  margin: 2rem auto 0;
}

nav#sidebar ul#report-nav {
  margin: 3rem 0 5rem;
}

nav#sidebar ul#report-nav.with-progress {
  margin-top: 8.5rem;
}

nav#sidebar ul#report-nav li {
  list-style-type: none;
}

nav#sidebar ul#report-nav li a {
  display: block;
  padding: 0.7rem 1rem 0.7rem 2rem;
  color: var(--color-text-main);
  border-left: 3px solid transparent;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

nav#sidebar ul#report-nav.with-progress li a {
  display: grid;
  grid-template-columns: 1rem auto;
  grid-gap: 1rem;
  align-items: center;
  padding: 0.7rem 1rem 0.7rem 0.5rem;
}

nav#sidebar ul#report-nav.with-progress li a .nav-label {
  margin-top: 0.2rem;
}

nav#sidebar ul#report-nav.with-progress li a .material-icons {
  opacity: 0.5;
}

nav#sidebar ul#report-nav.with-progress li.active a .material-icons,
nav#sidebar ul#report-nav.with-progress li a:hover .material-icons {
  opacity: 1;
}

nav#sidebar ul#report-nav.with-progress li a .material-icons.active {
  color: rgba(var(--color-active-rgb), 1);
}

nav#sidebar ul#report-nav.with-progress li a .material-icons.default {
  color: rgba(var(--color-logo-rgb), 1);
}

nav#sidebar ul#report-nav li a:hover {
  background: rgba(var(--color-bg-highlight-rgb), 0.3);
  color: var(--color-logo);
}

nav#sidebar ul#report-nav.with-progress li a:hover {
  color: var(--color-logo);
}

nav#sidebar ul#report-nav li.active a {
  color: var(--color-logo);
  background: var(--color-bg-highlight-hint);
  border-left: 3px solid var(--color-logo);
}

#nav-header {
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  background: var(--color-bg-sidebar);
  background: linear-gradient(180deg, rgba(var(--color-bg-sidebar-rgb), 1) 0%, rgba(var(--color-bg-sidebar-rgb), 1) 85%, rgba(var(--color-bg-sidebar-rgb), 0) 100%);
}

#report-progress-wrapper {
  width: calc(var(--sidebar-width) - 2rem);
  padding: 0;
  margin: 2rem 1rem 1rem;
  opacity: 0.6;
}

.progress-bar-container {
  position: relative;
  width: calc(100%);
  margin: 0.3rem 0;
  height: 0.5rem;
  background: rgba(var(--color-active-rgb), 0.2);
}

.progress-bar-filled {
  position: absolute;
  top: 0;
  left: 0;
  width: 64%;
  height: 0.5rem;
  background: rgba(var(--color-active-rgb), 1);
}

#report-progress-wrapper h4 {
  font-size: 0.7rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  text-align: center;
}

#page-header #user-info-wrapper {
  width: 12rem;
  justify-self: end;
}

#user-info-wrapper {
  position: fixed;
  top: 1rem;
  right: 1rem;
}

nav#sidebar #user-info-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 12rem;
  background: var(--color-bg-sidebar);
  background: linear-gradient(180deg, rgba(var(--color-bg-sidebar-rgb), 0) 0%, rgba(var(--color-bg-sidebar-rgb), 1) 15%, rgba(var(--color-bg-sidebar-rgb), 1) 100%);
  display: flex;
  flex-direction: row-reverse;
}

#user-info-wrapper #user-info {
  cursor: pointer;
  user-select: none;
  /* width: calc(var(--sidebar-width) - 2rem); */
  width: 3.5rem;
  overflow-x: hidden;
  background: var(--color-bg-dark);
  padding: 0.5rem 1rem;
  margin: 1rem 1rem 1rem;
  border-radius: 2rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  opacity: 0.6;
  transition: width 200ms ease-in-out;
}

#user-info-wrapper #user-info:hover {
  opacity: 1;
  width: 12rem;
}

#user-info-wrapper #user-info .user-name {
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#user-info-wrapper #user-info .user-text {
  width: 0;
  padding-left: 0.5rem;
}

#user-info-wrapper #user-info:hover .user-text {
  width: calc(var(--sidebar-width) - 4rem);
}

#user-info-wrapper #user-info .user-email {
  font-size: 0.7rem;
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#user-info-wrapper #user-info .user-icon {
  opacity: 0.6;
}

a.with-hover-icon .static-icon {
  display: block;
}

a.with-hover-icon .hover-icon {
  display: none;
}

a.with-hover-icon .close-icon {
  display: none;
}

a.with-hover-icon:hover .static-icon {
  display: none;
}

a.with-hover-icon:hover .hover-icon {
  display: block;
}

.with-hidden-row.isOpen a.with-hover-icon:hover .hover-icon {
  display: none;
}

.with-hidden-row.isOpen a.with-hover-icon:hover .close-icon {
  display: block;
}

/* Section Main Titlebar */
#app.with-sidebar .mainbar {
  margin-left: var(--sidebar-width);
  padding: 0;
}

#app.full-width .content {
  overflow-y: auto;
  padding: 2rem 0 5rem;
  margin: 0 auto;
}

#app.full-width.with-header .content {
  padding-top: calc(var(--header-height) + 1rem);
}

#app.full-width.with-subheader .content {
  padding-top: calc(var(--header-height) + var(--subheader-height) + 1.5rem);
}

#app.section #main .content-wrapper {
  background: var(--color-bg-box);
  background: radial-gradient(at 0% 30%, var(--color-bg-box-highlight) 30%, var(--color-bg-box) 70%);
  filter: drop-shadow(0 0 7px rgba(50, 50, 50, 0.5));
  margin-top: 7.5rem;
  margin-right: 2rem;
  margin-bottom: 2rem;
  z-index: 400;
  position: relative;
  min-height: calc(100vh - 9.5rem);
}

#app.section #main .content-boxes-wrapper {
  margin-top: 7.5rem;
  margin-right: 2rem;
  margin-bottom: 2rem;
  z-index: 400;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 1rem;
  align-items: stretch;
  /* here */
}

#app.section #main .content-box {
  background: var(--color-bg-box);
  background: radial-gradient(at 0% 30%, var(--color-bg-box-highlight) 30%, var(--color-bg-box) 70%);
  filter: drop-shadow(0 0 7px rgba(50, 50, 50, 0.5));
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-rows: 1rem auto;
  grid-gap: 1.5rem;
  justify-items: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

#app.section #main .content-box.align-top {
  align-items: start;
}

.content-box h2 {
  align-self: start;
  justify-self: flex-start;
  font-size: 0.9rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  color: var(--color-text-highlight);
}

#app.section #main .content-box.box-span-3 {
  grid-column-end: span 3;
}

#app.section #main .content-box.box-span-2 {
  grid-column-end: span 2;
}

#app.section #main .content {
  overflow-y: auto;
  padding: 2rem 0 5rem;
  width: calc(100% - 4rem);
  max-width: var(--page-width);
  margin: 0 auto;
}

#app.section #main .content.max-width {
  max-width: calc(100% - 4rem);
}

#app.full-width.with-header .sticky-header > * {
  opacity: 0.6;
}

#app.full-width.with-header .sticky-header {
  background: var(--color-bg-main);
  opacity: 1;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  padding-top: calc(var(--header-height) + 1rem);
  padding-bottom: 0.5rem;
}

#app.full-width.with-subheader .sticky-header > * {
  opacity: 0.6;
}

#app.full-width.with-subheader .sticky-header {
  background: var(--color-bg-main);
  opacity: 1;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  padding-top: calc(var(--header-height) + var(--subheader-height) + 1rem);
  padding-bottom: 0.5rem;
}

#app.section #main .sticky-header > * {
  opacity: 0.6;
}

#app.section #main .sticky-header {
  opacity: 1;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

#app.section #main .content.with-sticky-header {
  padding-top: rem;
}

#app.section #main #content-heading {
  position: fixed;
  z-index: 300;
  top: 0;
  left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
}

#app.section #main #top-title {
  margin: 1rem auto 0.5rem;
  width: 100%;
  display: grid;
  grid-template-columns: auto 10rem;
  grid-gap: 1rem;
}

#app a.admin-preview {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 0.7rem;
}

#app a.admin-preview h4 {
  font-size: 0.7rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  margin-top: 0.1rem;
  margin-bottom: 0;
  background: var(--color-bg-contrast);
  color: var(--color-active);
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
}

#app a.admin-preview .see-preview,
#app a.admin-preview .edit-preview {
  margin-left: 1rem;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}

#app a.admin-preview .see-preview h6,
#app a.admin-preview .edit-preview h6 {
  font-size: 0.7rem;
  padding-top: 0.1rem;
  margin-bottom: 0;
}

#app a.admin-preview .see-preview:hover h6,
#app a.admin-preview .edit-preview:hover h6 {
  text-decoration: underline;
}

#app a.admin-preview .see-preview .see-preview-icon {
  font-size: 1rem;
  margin-right: 0.5rem;
  opacity: 0.5;
}

#app a.admin-preview .edit-preview .edit-preview-icon {
  font-size: 0.7rem;
  margin-left: 0.5rem;
  opacity: 0.5;
}

#app a.admin-preview .see-preview:hover .see-preview-icon,
#app a.admin-preview .edit-preview:hover .edit-preview-icon {
  opacity: 1;
}

#app.section #main #breadcrumbs {
  display: flex;
  align-items: center;
}

#app.section #main #breadcrumbs a.breadcrumb-back {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  padding: 0.3rem;
}

#app.section #main #breadcrumbs a.breadcrumb-back:hover {
  color: var(--color-text-contrast);
  background: var(--color-logo);
}

#app.section #main #breadcrumbs h3,
#app.section #main #breadcrumbs h4 {
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  padding-top: 0.3rem;
  padding-bottom: 0.2rem;
}

#app.section #main #breadcrumbs h3 {
  border-left: 1px solid rgba(var(--color-text-secondary-rgb), 0.3);
  padding-left: 0.5rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

#app.section #main #breadcrumbs h4 {
  margin-left: 0.5rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

#app.section #main #titlebar-wrapper {
  color: var(--color-logo);
}

#app.section #main #titlebar {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#app.section #titlebar h1 {
  font-size: 2rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

#app.section #main #titlebar .title-icons {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

#app.section #main #titlebar .title-icons > * {
  margin-left: 1rem;
}

#app.section #main #titlebar .title-icons a.user-axn {
  line-height: 1;
  cursor: pointer;
  user-select: none;
  opacity: 0.3;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

#app.section #main #titlebar .title-icons a.user-axn:hover {
  color: var(--color-logo);
  opacity: 1;
}

#app.section #main #titlebar .titlebar-text {
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

#app.section #main #titlebar .titlebar-icon {
  font-size: 1.5rem;
  margin-left: 0.5rem;
}

/* Section Main Content */
.items-list ol {
  list-style-type: none;
}

.items-list ol.two-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  grid-gap: 2rem 2em;
  align-items: stretch;
}

.items-list ol > li {
  display: grid;
  grid-template-columns: 3em auto;
  grid-template-rows: auto auto;
  grid-gap: 1em 0;
  grid-template-areas: "number title" "descrip descrip";
}

.items-list.sub-list ol > li {
  margin-bottom: 1rem;
}

.items-list .item-priority,
.items-list .item-title {
  padding: 0.5em 1em;
  font-size: 1.2em;
  display: flex;
  align-items: center;
}

.items-list .item-priority {
  grid-area: number;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

.items-list .item-title {
  grid-area: title;
  justify-content: space-between;
  line-height: 1;
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
}

.items-list .item-description {
  grid-area: descrip;
  font-size: 0.9em;
}

.items-list .item-detail {
  grid-area: descrip;
}

.items-list.logo .item-priority {
  border-left: 3px solid rgba(var(--color-logo-rgb), 1);
  background: rgba(var(--color-logo-rgb), 0.05);
  color: rgba(var(--color-logo-rgb), 0.8);
}

.items-list.logo .item-title {
  background: rgba(var(--color-logo-rgb), 0.2);
}

.items-list.logo .item-title.top-level {
  background: rgba(var(--color-logo-rgb), 0.2);
  cursor: pointer;
  user-select: none;
}

.items-list.logo .item-title.top-level:hover {
  background: rgba(var(--color-logo-rgb), 0.4);
}

.items-list.active .item-priority {
  border-left: 3px solid rgba(var(--color-active-rgb), 1);
  background: rgba(var(--color-active-rgb), 0.05);
  color: rgba(var(--color-active-rgb), 0.8);
}

.items-list.active .item-title {
  background: rgba(var(--color-active-rgb), 0.2);
}

.items-list.active .item-title.top-level {
  background: rgba(var(--color-active-rgb), 0.5);
}

.items-list.success .item-priority {
  border-left: 3px solid rgba(var(--color-success-rgb), 1);
  background: rgba(var(--color-success-rgb), 0.05);
  color: rgba(var(--color-success-rgb), 0.8);
}

.items-list.success .item-title {
  background: rgba(var(--color-success-rgb), 0.2);
}

.items-list.success .item-title.top-level {
  background: rgba(var(--color-success-rgb), 0.5);
}

.items-list.error .item-priority {
  border-left: 3px solid rgba(var(--color-error-rgb), 1);
  background: rgba(var(--color-error-rgb), 0.05);
  color: rgba(var(--color-error-rgb), 1);
}

.items-list.error .item-title {
  background: rgba(var(--color-error-rgb), 0.2);
}

.items-list.error .item-title.top-level {
  background: rgba(var(--color-error-rgb), 0.5);
}

#app.overview .items-list {
  font-size: 0.9rem;
}

#app.overview .items-list ol > li {
  margin-bottom: 0;
}

.overview .score-graph {
  max-height: 16rem;
}

/* Individual Section Styles */
.rounded-box-bg {
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.7);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
}

.truncated-box .truncated-content {
  max-height: 5rem;
  overflow-y: hidden;
}

.truncated-box .truncated-content.objectives-scope {
  max-height: 9.75rem;
}

.truncated-box .truncated-content.score-explanation {
  max-height: 5rem;
}

.truncated-box .truncated-content.nist-explanation {
  max-height: 11rem;
}

.security-gap-analysis .score-graph {
  margin-bottom: 1.5rem;
}

#app.section.executive-summary .executive-summary-wrapper {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-gap: 1.5rem;
  margin-bottom: 1.5rem;
}

#app.section.executive-summary .score-graph {
  align-self: center;
}

#app.section.security-posture #scores {
  display: grid;
  grid-template-columns: 5fr 4fr;
  grid-gap: 3rem;
  margin: 0 0 1.5rem;
}

#app.section.security-posture #scores .bar-description {
  margin-top: 1rem;
  max-height: 5rem;
  overflow-y: hidden;
}

#app.section.security-posture #scores .bar-description p {
  font-size: 0.8rem;
}

.score-explanation {
  margin-top: 1rem;
}

.score-explanation p,
.score-explanation li .score-explanation > * {
  font-size: 0.8rem;
}

.password-field {
  display: none;
}

.abstract-field {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.abstract-field .show-icon {
  visibility: hidden;
  font-size: 0.9rem;
  margin-left: 1rem;
  opacity: 0.8;
}

.abstract-field:hover .show-icon {
  visibility: visible;
}

.see-more-less-link {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.6;
  margin-top: 0.5rem;
}

.see-more-less-link:hover {
  opacity: 1;
}

.see-more-less-link p {
  margin: 0;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  color: var(--color-text-highlight);
}

.see-more-less-link .material-icons {
  width: 2rem;
  color: var(--color-text-highlight);
}

#app.section.critical-attack-paths #main .content img {
  width: 100%;
}

#app.section.security-gap-analysis .analysis-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
  align-items: start;
  margin-bottom: 3rem;
}

#app.section.security-gap-analysis .overview-wrapper p {
  font-size: 0.8rem;
}

#app.section.security-gap-analysis em {
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

.explorer-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
  align-items: start;
}

.explorer-wrapper.mini-explorer {
  width: 100%;
  grid-template-columns: 1fr;
  margin-top: -0.75rem;
}

#app.section.overview .explorer-wrapper {
  font-size: 0.9rem;
}

#app.section.overview .explorer-wrapper .score-bar-container {
  padding: 0 1rem;
  height: 4rem;
}

#app.section.overview .explorer-wrapper .score-bar-container .score-name {
  height: 2.2em;
}

#app.section.overview .explorer-wrapper .score-bar-container .score-category {
  bottom: calc(0.5rem);
}

#app.section.technical-findings #main .content .lists-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3rem;
  margin: 0 0 3rem;
}

.overview .donut-chart-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

/* Score Bar Graph */
.score-bar-container {
  font-family: "system", sans-serif;
  padding: 1em;
  color: #eee;
  position: relative;
  height: 5em;
  display: flex;
  align-items: center;
  background: transparent;
}

.explorer-parent-level .score-bar-container {
  border-radius: 1em 0 0 1em;
  cursor: pointer;
  user-select: none;
}

.explorer-child-level {
  background: rgba(var(--color-active-rgb), 0.15);
  border-radius: 1em;
}

.score-bar-container.selected {
  background: rgba(var(--color-active-rgb), 0.15);
}

.explorer-parent-level .score-bar-container:hover {
  background: rgba(var(--color-active-rgb), 0.1);
  border-radius: 1em;
}

.mini-explorer .explorer-parent-level .score-bar-container:hover {
  background: transparent;
}

.score-bar-container .score-value {
  z-index: 50;
  position: absolute;
  top: 1em;
  left: 1em;
  width: 3em;
  height: 3em;
  border-radius: 1.5em;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.score-bar-container .score-value div {
  text-align: center;
  font-size: 1.5em;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  line-height: 1;
}

.score-bar-container .score-name {
  z-index: 60;
  font-size: 0.9em;
  padding-left: calc(3em + 1em);
  padding-right: 0.5em;
  text-overflow: ellipsis;
  height: 3em;
  overflow: hidden;
  line-height: 1.5;
  hyphens: auto;
}

.score-bar-container .score-category {
  z-index: 60;
  position: absolute;
  bottom: calc(1em + 0.25em);
  right: calc(1em + 0.5em);
  font-size: 0.9em;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

.score-bar-container .score-progress-container {
  position: absolute;
  left: calc(1.5em + 1em);
  top: calc(1.5em + 1em);
  width: calc(100% - 1.5em - 1em - 1em);
  height: 1.5em;
  z-index: 10;
}

.score-bar-container .score-progress-bar {
  height: 1.5em;
}

.score-bar-container .score-progress-bar.w50 {
  width: 50%;
}

.score-bar-container .score-progress-bar.w64 {
  width: 64%;
}

.score-bar-container .score-progress-bar.w79 {
  width: 79%;
}

.score-bar-container .score-progress-bar.w92 {
  width: 92%;
}

.score-bar-container .score-progress-bar.w28 {
  width: 28%;
}

.score-bar-container .score-progress-bar.w96 {
  width: 96%;
}

.score-bar-container .score-progress-bar.w44 {
  width: 44%;
}

.score-bar-container .score-progress-bar.w21 {
  width: 21%;
}

.score-bar-container .score-progress-bar.w59 {
  width: 59%;
}

.score-bar-container .score-progress-bar.w88 {
  width: 88%;
}

.score-bar-container .score-progress-bar.w71 {
  width: 71%;
}

.score-bar-container.cat-1 .score-value {
  background: rgba(var(--color-status-rgb-cat-1), 1);
}

.score-bar-container.cat-1 .progress-bar {
  background: rgba(var(--color-status-rgb-cat-1), 0.5);
}

.score-bar-container.cat-1 .score-progress-container {
  background: rgba(var(--color-status-rgb-cat-1), 0.2);
}

.score-bar-container.cat-1 .score-progress-bar {
  background: rgba(var(--color-status-rgb-cat-1), 0.5);
}

.score-bar-container.cat-2 .score-value {
  background: rgba(var(--color-status-rgb-cat-2), 1);
  color: #555;
}

.score-bar-container.cat-2 .progress-bar {
  background: rgba(var(--color-status-rgb-cat-2), 0.5);
}

.score-bar-container.cat-2 .score-progress-container {
  background: rgba(var(--color-status-rgb-cat-2), 0.2);
}

.score-bar-container.cat-2 .score-progress-bar {
  background: rgba(var(--color-status-rgb-cat-2), 0.5);
}

.score-bar-container.cat-3 .score-value {
  background: rgba(var(--color-status-rgb-cat-3), 1);
}

.score-bar-container.cat-3 .progress-bar {
  background: rgba(var(--color-status-rgb-cat-3), 0.5);
}

.score-bar-container.cat-3 .score-progress-container {
  background: rgba(var(--color-status-rgb-cat-3), 0.2);
}

.score-bar-container.cat-3 .score-progress-bar {
  background: rgba(var(--color-status-rgb-cat-3), 0.5);
}

.score-bar-container.cat-4 .score-value {
  background: rgba(var(--color-status-rgb-cat-4), 1);
}

.score-bar-container.cat-4 .progress-bar {
  background: rgba(var(--color-status-rgb-cat-4), 0.5);
}

.score-bar-container.cat-4 .score-progress-container {
  background: rgba(var(--color-status-rgb-cat-4), 0.2);
}

.score-bar-container.cat-4 .score-progress-bar {
  background: rgba(var(--color-status-rgb-cat-4), 0.5);
}

.score-bar-container.cat-5 .score-value {
  background: rgba(var(--color-status-rgb-cat-5), 1);
}

.score-bar-container.cat-5 .progress-bar {
  background: rgba(var(--color-status-rgb-cat-5), 0.5);
}

.score-bar-container.cat-5 .score-progress-container {
  background: rgba(var(--color-status-rgb-cat-5), 0.2);
}

.score-bar-container.cat-5 .score-progress-bar {
  background: rgba(var(--color-status-rgb-cat-5), 0.5);
}

#app.section.security-gap-analysis .section-table {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 0 1rem;
  grid-template-areas: "title title" "strengths weaknesses";
}

#app.section.security-gap-analysis .section-table .subsection-title {
  grid-area: title;
  background: var(--color-bg-emphasis);
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: auto 3rem 5rem;
}

#app.section.security-gap-analysis .section-table .subsection-title h3 {
  color: var(--color-text-main);
  text-align: center;
  padding: 0.5rem 0;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
  margin: 0;
}

#app.section.security-gap-analysis .section-table .subsection-title em {
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

#app.section.security-gap-analysis .section-table .subsection-title h4 {
  background: rgba(var(--color-status-rgb-cat-3), 0.2);
  margin: 0;
  padding: 0.5rem 0;
  align-self: center;
  text-align: center;
  font-size: 1.2rem;
}

#app.section.security-gap-analysis .section-table .subsection-title h5 {
  background: rgba(var(--color-status-rgb-cat-3), 0.4);
  margin: 0;
  padding: 0.5rem 0;
  align-self: center;
  text-align: center;
  font-size: 1.2rem;
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-1 h4 {
  background: rgba(var(--color-status-rgb-cat-1), 0.2);
  color: var(--color-status-cat-1);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-2 h4 {
  background: rgba(var(--color-status-rgb-cat-2), 0.2);
  color: var(--color-status-cat-2);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-3 h4 {
  background: rgba(var(--color-status-rgb-cat-3), 0.2);
  color: var(--color-status-cat-3);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-4 h4 {
  background: rgba(var(--color-status-rgb-cat-4), 0.2);
  color: var(--color-status-cat-4);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-5 h4 {
  background: rgba(var(--color-status-rgb-cat-5), 0.2);
  color: var(--color-text-secondary);
}

#app.section.security-gap-analysis .section-table .subsection-title h5.cat-1 {
  background: rgba(var(--color-status-rgb-cat-1), 0.4);
  color: rgba(255, 255, 255, 0.4);
}

#app.section.security-gap-analysis .section-table .subsection-title h5.cat-2 {
  background: rgba(var(--color-status-rgb-cat-2), 0.4);
  color: rgba(255, 255, 255, 0.4);
}

#app.section.security-gap-analysis .section-table .subsection-title h5.cat-3 {
  background: rgba(var(--color-status-rgb-cat-3), 0.4);
  color: rgba(255, 255, 255, 0.4);
}

#app.section.security-gap-analysis .section-table .subsection-title h5.cat-4 {
  background: rgba(var(--color-status-rgb-cat-4), 0.4);
  color: rgba(255, 255, 255, 0.4);
}

#app.section.security-gap-analysis .section-table .subsection-title h5.cat-5 {
  background: rgba(var(--color-status-rgb-cat-5), 0.4);
  color: rgba(255, 255, 255, 0.4);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-1 {
  background: rgba(var(--color-status-rgb-cat-1), 0.2);
  border-left: 3px solid var(--color-status-cat-1);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-2 {
  background: rgba(var(--color-status-rgb-cat-2), 0.2);
  border-left: 3px solid var(--color-status-cat-2);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-3 {
  background: rgba(var(--color-status-rgb-cat-3), 0.2);
  border-left: 3px solid var(--color-status-cat-3);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-4 {
  background: rgba(var(--color-status-rgb-cat-4), 0.2);
  border-left: 3px solid var(--color-status-cat-4);
}

#app.section.security-gap-analysis .section-table .subsection-title.cat-5 {
  background: rgba(var(--color-status-rgb-cat-5), 0.2);
  border-left: 3px solid var(--color-status-cat-5);
}

#app.section.security-gap-analysis .section-table ul {
  padding: 0.5rem 1rem;
}

.section-table-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}

.section-table-heading .list-title {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  text-align: center;
}

.section-table-heading .list-title.strengths {
  background: rgba(var(--color-success-rgb), 0.1);
}

.section-table-heading .list-title.weaknesses {
  background: rgba(var(--color-error-rgb), 0.1);
}

.section-table .strengths {
  grid-area: strengths;
  background: rgba(var(--color-bg-highlight-rgb), 0.4);
}

.section-table .weaknesses {
  grid-area: weaknesses;
  background: rgba(var(--color-bg-highlight-rgb), 0.4);
}

#app.section.security-gap-analysis .section-table ul li {
  margin: 0 1rem 0.5rem;
  font-weight: 400;
}

/* Forms! */
.form-input {
  margin: 0 0 2rem;
}

.form-input.table-field {
  margin: 0;
  font-size: 0.7rem;
}

.form-input.inline-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  align-items: center;
}

.form-input input,
.form-input textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-bg-border);
  border-radius: 0.5rem;
}

.form-input.table-field textarea {
  padding: 0.5rem;
}

.form-input.table-field textarea::placeholder {
  opacity: 0.3;
}

.form-label {
  display: block;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.form-input.inline-input .form-label {
  margin: 0;
}

.form-label.report-labels {
  display: grid;
  grid-template-columns: auto 5.5rem;
  justify-content: space-between;
  align-items: flex-end;
}

.form-label .small-label {
  font-size: 0.8rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
  text-align: center;
}

.form-table ul {
  display: grid;
  grid-template-columns: 5rem 7rem 2fr 3fr;
  grid-gap: 0 0.25rem;
  border-top: 1px solid var(--color-bg-contrast);
  margin: 0;
  padding: 0;
  font-size: 0.7rem;
}

.form-table ul li.table-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: inherit;
  grid-gap: inherit;
  margin: 0;
  padding: 0.5rem;
  background: var(--color-bg-emphasis);
  border-bottom: 1px solid var(--color-bg-contrast);
  border-left: 1px solid var(--color-bg-contrast);
  border-right: 1px solid var(--color-bg-contrast);
  max-width: calc(100%);
}

.form-table ul li.table-row .table-cell {
  white-space: nowrap;
  overflow: hidden;
}

.form-table ul li.table-row .table-cell > div {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-list {
  margin: 0 auto 4rem;
}

.form-list ul {
  list-style-type: none;
  padding: 0;
}

.form-list li {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--color-logo);
  margin: 0 0 1rem;
}

.form-list li.cat-1 {
  border-left-color: var(--color-status-cat-1);
}

.form-list li.cat-2 {
  border-left-color: var(--color-status-cat-2);
}

.form-list li.cat-3 {
  border-left-color: var(--color-status-cat-3);
}

.form-list li.cat-4 {
  border-left-color: var(--color-status-cat-4);
}

.form-list li.cat-5 {
  border-left-color: var(--color-status-cat-5);
}

.form-list li a.row-icon {
  display: grid;
  grid-template-columns: auto 5.5rem;
  align-items: stretch;
  min-height: 5.5rem;
  padding-left: 1.5rem;
  background: rgba(var(--color-bg-box-rgb), 0.7);
  filter: drop-shadow(0 0 15px rgba(200, 200, 200, 0.1));
  cursor: pointer;
  user-select: none;
}

.form-list li a.row-icon:hover {
  background: var(--color-bg-box-emphasis);
  color: var(--color-logo);
}

.form-list li.cat-1 a.row-icon:hover {
  color: var(--color-status-cat-1);
}

.form-list li.cat-2 a.row-icon:hover {
  color: var(--color-status-cat-2);
}

.form-list li.cat-3 a.row-icon:hover {
  color: var(--color-status-cat-3);
}

.form-list li.cat-4 a.row-icon:hover {
  color: var(--color-status-cat-4);
}

.form-list li.cat-5 a.row-icon:hover {
  color: var(--color-status-cat-5);
}

.form-list li a.row-icon > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.form-list li a.row-icon > h3 {
  padding: 1rem;
}

.form-list li a.row-icon .item-name {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0 1rem;
  grid-template-areas: "title title" "date grade";
}

.form-list li a.row-icon .item-name h2 {
  grid-area: title;
  width: 100%;
}

.form-list li a.row-icon .item-name p {
  grid-area: date;
}

.form-list li a.row-icon .item-name .grade-value {
  grid-area: grade;
  text-align: right;
}

.form-list li.cat-1 a.row-icon .item-name .grade-value {
  color: var(--color-status-cat-1);
}

.form-list li.cat-2 a.row-icon .item-name .grade-value {
  color: var(--color-status-cat-2);
}

.form-list li.cat-3 a.row-icon .item-name .grade-value {
  color: var(--color-status-cat-3);
}

.form-list li.cat-4 a.row-icon .item-name .grade-value {
  color: var(--color-status-cat-4);
}

.form-list li.cat-5 a.row-icon .item-name .grade-value {
  color: var(--color-status-cat-5);
}

.form-list li a.row-icon .item-icon {
  background: rgba(var(--color-logo-rgb), 0.2);
  align-self: stretch;
}

.form-list li.cat-1 a.row-icon .item-icon {
  background: rgba(var(--color-status-rgb-cat-1), 0.2);
}

.form-list li.cat-2 a.row-icon .item-icon {
  background: rgba(var(--color-status-rgb-cat-2), 0.2);
}

.form-list li.cat-3 a.row-icon .item-icon {
  background: rgba(var(--color-status-rgb-cat-3), 0.2);
}

.form-list li.cat-4 a.row-icon .item-icon {
  background: rgba(var(--color-status-rgb-cat-4), 0.2);
}

.form-list li.cat-5 a.row-icon .item-icon {
  background: rgba(var(--color-status-rgb-cat-5), 0.2);
}

.form-list li a.row-icon .item-icon .material-icons {
  font-size: 2rem;
  color: var(--color-logo);
}

.form-list li a.row-icon .item-icon .item-score {
  font-size: 2rem;
  color: var(--color-logo);
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

.form-list li.cat-1 a.row-icon .item-icon .icon-detail {
  color: var(--color-status-cat-1);
}

.form-list li.cat-2 a.row-icon .item-icon .icon-detail {
  color: var(--color-status-cat-2);
}

.form-list li.cat-3 a.row-icon .item-icon .icon-detail {
  color: var(--color-status-cat-3);
}

.form-list li.cat-4 a.row-icon .item-icon .icon-detail {
  color: var(--color-status-cat-4);
}

.form-list li.cat-5 a.row-icon .item-icon .icon-detail {
  color: var(--color-status-cat-5);
}

.form-list h2 {
  color: var(--color-text-main);
  margin-bottom: 0;
  font-size: 1rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

.form-list h3 {
  color: var(--color-text-main);
  margin-bottom: 0;
  font-size: 0.9rem;
  font-weight: 600;
  align-self: center;
  text-transform: uppercase;
}

.form-list h3.active {
  color: var(--color-active);
}

.form-list h3.success {
  color: var(--color-success);
}

.form-list h3.error {
  color: var(--color-error);
}

.form-list h4 {
  color: var(--color-text-main);
  margin-bottom: 0;
  font-size: 0.9rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

.form-list p {
  margin-bottom: 0;
  font-size: 0.9rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

.form-list li a.row-icon > .mfa-status {
  display: flex;
  align-items: center;
  justify-content: start;
}

.form-list li a.row-icon > .mfa-status.success {
  color: var(--color-success);
}

.form-list li a.row-icon > .mfa-status.inactive {
  color: var(--color-text-inactive);
}

.form-list li a.row-icon > .mfa-status .material-icons {
  margin-right: 0.5rem;
}

.form-list li a.row-icon > .mfa-status {
  margin: 0.2rem 0 0;
}

.form-files .file-item {
  display: grid;
  grid-template-columns: 1.5rem auto 1.5rem;
  grid-gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.form-files .file-item:hover {
  background: var(--color-bg-highlight);
}

.form-files .file-item .file-icon {
  color: var(--color-bg-medium);
  font-size: 1.5rem;
}

.form-files .file-item h4 {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
}

.form-files .file-item .trash-icon {
  color: var(--color-error);
  font-size: 1rem;
  opacity: 0.5;
  cursor: pointer;
  user-select: none;
}

.form-files .file-item .trash-icon:hover {
  opacity: 1;
}

.form-files .file-upload {
  display: grid;
  grid-template-columns: 1.5rem auto;
  grid-gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.form-files .file-upload:hover {
  background: rgba(var(--color-active-rgb), 0.1);
}

.form-files .file-upload h4 {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
  color: var(--color-active);
}

.form-files .file-upload .upload-icon {
  font-size: 1.5rem;
  color: var(--color-active);
  opacity: 0.6;
}

.form-files .file-upload:hover h4 {
  text-decoration: none;
}

.form-files .file-upload:hover .upload-icon {
  opacity: 1;
}

.section-status-msg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-main);
  cursor: pointer;
  user-select: none;
}

.section-status-msg.success-status {
  color: var(--color-success);
}

.section-status-msg.error-status {
  color: var(--color-error);
}

.section-status-msg.default-status {
  color: var(--color-logo);
}

.section-status-msg .msg-label {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

.section-status-msg .material-icons {
  font-size: 0.7rem;
  opacity: 0.75;
  margin-right: 0.5rem;
}

.form-field-element {
  margin-bottom: 2rem;
}

.form-field-element p {
  font-size: 0.8rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

h5.field-title {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.field-toggle,
.field-checkbox {
  display: grid;
  grid-template-columns: 1rem auto;
  grid-gap: 1rem;
  align-items: center;
  grid-template-areas: "icon label";
}

.field-toggle.reverse-order,
.field-checkbox.reverse-order {
  grid-template-columns: auto 1rem;
  grid-template-areas: "label icon";
}

.field-toggle .field-label,
.field-checkbox .field-label {
  margin-top: 0.1rem;
  font-size: 0.9rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
  grid-area: label;
}

.field-item {
  margin: 0.25rem 1rem;
  cursor: pointer;
  user-select: none;
}

.field-item .field-icon {
  grid-area: icon;
  opacity: 0.7;
}

.field-item:hover .field-icon {
  opacity: 1;
}

.title-icons .field-toggle.status-active {
  color: var(--color-active);
}

.split-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  align-items: start;
}

.toggle-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 18rem;
  margin: 0 auto 1rem;
}

.toggle-wrapper .toggle-option {
  text-align: center;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  padding: 0.5rem 0;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.toggle-wrapper .toggle-option.default {
  border: 2px solid var(--color-logo);
  color: var(--color-logo);
}

.toggle-wrapper .toggle-option.default:hover {
  background: rgba(var(--color-logo-rgb), 0.3);
}

.toggle-wrapper .toggle-option.default.isSelected {
  color: var(--color-text-main);
  background: var(--color-logo);
}

.toggle-wrapper .toggle-option.default.isSelected:hover {
  background: var(--color-logo);
}

.toggle-wrapper .toggle-option.toggle-left {
  border-right: none;
  border-radius: 2rem 0 0 2rem;
}

.toggle-wrapper .toggle-option.active {
  border: 2px solid var(--color-active);
  color: var(--color-active);
}

.toggle-wrapper .toggle-option.active:hover {
  background: rgba(var(--color-active-rgb), 0.3);
}

.toggle-wrapper .toggle-option.active.isSelected {
  color: var(--color-text-main);
  background: var(--color-active);
}

.toggle-wrapper .toggle-option.active.isSelected:hover {
  background: var(--color-active);
}

.toggle-wrapper .toggle-option.toggle-right {
  border-left: none;
  border-radius: 0 2rem 2rem 0;
}

/* BUTTONS */
.action-btns {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.action-btns > * {
  margin-left: 2em;
}

a.btn {
  cursor: pointer;
  user-select: none;
}

/* .title-btn */
a.btn.title-btn {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(var(--color-logo-rgb), 0.3);
  color: var(--color-text-main);
}

a.btn.title-btn:hover {
  background: rgba(var(--color-logo-rgb), 0.6);
}

a.btn.title-btn.save-btn {
  background: rgba(var(--color-success-rgb), 0.3);
}

a.btn.title-btn.save-btn:hover {
  background: rgba(var(--color-success-rgb), 0.6);
}

a.btn.title-btn.cancel-btn {
  background: rgba(var(--color-error-rgb), 0.3);
}

a.btn.title-btn.cancel-btn:hover {
  background: rgba(var(--color-error-rgb), 0.6);
}

a.btn.title-btn.active-btn {
  background: rgba(var(--color-active-rgb), 0.3);
}

a.btn.title-btn.active-btn:hover {
  background: rgba(var(--color-active-rgb), 0.6);
}

a.btn.title-btn .btn-label {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
}

a.btn.title-btn .material-icons {
  font-size: 1rem;
  opacity: 0.5;
  margin-right: 0.5rem;
}

a.btn.title-btn:hover .material-icons {
  opacity: 0.75;
}

/* .row-btn */
a.btn.row-btn {
  background: rgba(var(--color-action-rgb), 0.4);
  display: grid;
  grid-template-columns: 1rem auto;
  grid-gap: 0.5rem;
  height: 2rem;
  padding: 0 1rem;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

a.btn.row-btn .material-icons {
  font-size: 1rem;
  opacity: 0.7;
  text-align: center;
  justify-self: center;
}

a.btn.row-btn:hover .material-icons {
  opacity: 1;
}

a.btn.row-btn .btn-label {
  margin-top: 0.1rem;
  text-align: center;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

a.btn.row-btn:hover {
  background: rgba(var(--color-action-rgb), 1);
}

a.btn.row-btn.add-btn {
  background: rgba(var(--color-success-rgb), 0.4);
}

a.btn.row-btn.add-btn:hover {
  background: rgba(var(--color-success-rgb), 1);
}

a.btn.row-btn.remove-btn {
  background: rgba(var(--color-error-rgb), 0.4);
}

a.btn.row-btn.remove-btn:hover {
  background: rgba(var(--color-error-rgb), 1);
}

a.btn.row-btn.alt-btn {
  background: rgba(var(--color-alternate-rgb), 0.4);
}

a.btn.row-btn.alt-btn:hover {
  background: rgba(var(--color-alternate-rgb), 1);
}

/* .axn-btn */
a.btn.axn-btn {
  background: rgba(var(--color-action-rgb), 0.2);
  border: 1px solid rgba(var(--color-action-rgb), 0.5);
  display: grid;
  grid-template-columns: 1em auto;
  grid-gap: 0.5em;
  align-items: center;
  width: 12em;
  padding: 0.5em 1em;
  min-height: 3em;
}

a.btn.axn-btn:hover {
  background: rgba(var(--color-action-rgb), 0.5);
}

a.btn.axn-btn.add-btn {
  background: rgba(var(--color-success-rgb), 0.2);
  border: 1px solid rgba(var(--color-success-rgb), 0.5);
}

a.btn.axn-btn.add-btn:hover {
  background: rgba(var(--color-success-rgb), 0.5);
}

a.btn.axn-btn.remove-btn {
  background: rgba(var(--color-error-rgb), 0.2);
  border: 1px solid rgba(var(--color-error-rgb), 0.5);
}

a.btn.axn-btn.remove-btn:hover {
  background: rgba(var(--color-error-rgb), 0.5);
}

a.btn.axn-btn.alt-btn {
  background: rgba(var(--color-alternate-rgb), 0.2);
  border: 1px solid rgba(var(--color-alternate-rgb), 0.5);
}

a.btn.axn-btn.alt-btn:hover {
  background: rgba(var(--color-alternate-rgb), 0.5);
}

a.btn.axn-btn .material-icons {
  opacity: 0.7;
}

a.btn.axn-btn .btn-label {
  margin-top: 0.1em;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
  text-align: center;
  font-size: 1.1em;
  opacity: 0.7;
}

a.btn.axn-btn:hover .material-icons,
a.btn.axn-btn:hover .btn-label {
  opacity: 1;
}

/* Specific Forms */
#clients-list.form-list .client-item a.row-icon,
#users-list.form-list .user-item a.row-icon {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 4rem;
  align-items: center;
  padding-left: 1.5rem;
}

#clients-list.form-list .client-heading,
#users-list.form-list .users-heading {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 4rem;
  align-items: center;
  padding-left: 1.5rem;
  border-left: 3px solid transparent;
  margin-bottom: 0.5rem;
  opacity: 0.4;
}

#clients-list.form-list .client-heading > *,
#users-list.form-list .users-heading > * {
  padding: 0 1rem;
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 600;
}

#clients-list.form-list .client-item a.row-icon .client-users,
#clients-list.form-list .client-item a.row-icon .client-reports {
  display: block;
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 500;
}

#clients-list.form-list .client-item a.row-icon .client-users {
  display: block;
}

#clients-list.form-list .client-item a.row-icon .client-reports {
  display: block;
}

.hidden-row {
  padding: 1rem 1rem 1rem 2.5rem;
  padding-left: 1.5rem;
  background: var(--color-bg-emphasis);
}

.with-hidden-row .hidden-row {
  display: none;
}

.with-hidden-row.isOpen .hidden-row {
  display: block;
}

.with-hidden-row.isOpen .hidden-row.user-edit-row {
  display: grid;
}

.with-hidden-row.isOpen .hidden-row.removed-user-row {
  display: flex;
  justify-content: center;
}

.removed-user-row .row-btn {
  width: 10rem;
}

.user-edit-row {
  grid-template-columns: auto 10rem;
  grid-gap: 2rem;
  align-items: stretch;
}

.user-edit-row .edit-user-form {
  background: var(--color-bg-main);
  padding: 1rem 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr 2rem 2rem;
  grid-gap: 1rem;
  align-items: center;
}

.user-edit-row .edit-user-form .row-btn {
  display: flex;
  justify-content: center;
  padding: 0.25rem;
}

.user-edit-row .edit-user-form .row-btn.cancel-btn {
  background: rgba(var(--color-error-rgb), 0.2);
}

.user-edit-row .edit-user-form .row-btn.cancel-btn:hover {
  background: rgba(var(--color-error-rgb), 0.6);
}

.user-edit-row .edit-user-form .row-btn.success-btn {
  background: rgba(var(--color-success-rgb), 0.2);
}

.user-edit-row .edit-user-form .row-btn.success-btn:hover {
  background: rgba(var(--color-success-rgb), 0.6);
}

.user-edit-row .edit-user-form .row-btn .material-icons {
  font-size: 1.5rem;
}

.user-edit-row .row-btn {
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

.hidden-row .row-btns {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* CMMI */
.nist-top-level .nist-parent {
  display: grid;
  grid-template-columns: auto 2rem 2rem 1rem;
  grid-gap: 0.5rem;
  align-items: center;
  padding: 1rem 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  margin: 0 0 0.5rem;
}

/* .nist-top-level .nist-parent.isSelected {
  border-top: 1px solid var(--color-text-main);
  border-left: 1px solid var(--color-text-main);
  border-right: 1px solid var(--color-text-main);
} */
.nist-top-level .nist-parent.cat-0 {
  background: rgba(var(--color-status-rgb-cat-0), 0.2);
}

.nist-top-level .nist-parent.cat-1 {
  background: rgba(var(--color-status-rgb-cat-1), 0.2);
}

.nist-top-level .nist-parent.cat-2 {
  background: rgba(var(--color-status-rgb-cat-2), 0.2);
}

.nist-top-level .nist-parent.cat-3 {
  background: rgba(var(--color-status-rgb-cat-3), 0.2);
}

.nist-top-level .nist-parent.cat-4 {
  background: rgba(var(--color-status-rgb-cat-4), 0.2);
}

.nist-top-level .nist-parent.cat-5 {
  background: rgba(var(--color-status-rgb-cat-5), 0.2);
}

.nist-top-level .nist-parent.cat-0:hover,
.nist-top-level .nist-parent.cat-0.isSelected {
  background: rgba(var(--color-status-rgb-cat-0), 1);
  color: var(--color-text-contrast);
}

.nist-top-level .nist-parent.cat-1:hover,
.nist-top-level .nist-parent.cat-1.isSelected {
  background: rgba(var(--color-status-rgb-cat-1), 1);
}

.nist-top-level .nist-parent.cat-2:hover,
.nist-top-level .nist-parent.cat-2.isSelected {
  background: rgba(var(--color-status-rgb-cat-2), 1);
  color: var(--color-text-contrast);
}

.nist-top-level .nist-parent.cat-3:hover,
.nist-top-level .nist-parent.cat-3.isSelected {
  background: rgba(var(--color-status-rgb-cat-3), 1);
}

.nist-top-level .nist-parent.cat-4:hover,
.nist-top-level .nist-parent.cat-4.isSelected {
  background: rgba(var(--color-status-rgb-cat-4), 1);
}

.nist-top-level .nist-parent.cat-5:hover,
.nist-top-level .nist-parent.cat-5.isSelected {
  background: rgba(var(--color-status-rgb-cat-5), 1);
}

.nist-top-level .nist-parent .nist-parent-score {
  text-align: right;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

.nist-top-level .nist-parent .nist-parent-icon {
  font-size: 1rem;
}

.subtitle-row {
  display: grid;
  grid-template-columns: auto 10rem;
  grid-gap: 1rem;
  align-items: start;
}

.subnav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.subtitle-row .section-score-component {
  display: grid;
  grid-template-columns: auto 3rem;
  align-items: stretch;
  user-select: none;
  margin-right: 1rem;
  margin-bottom: 1rem;
  width: 8.5rem;
  height: 2.5rem;
  border-bottom: 2px solid var(--color-bg-main);
}

.subtitle-row .section-score-component.subnav-item {
  cursor: pointer;
}

.subtitle-row .section-score-component.overall-wrapper {
  background: var(--color-bg-emphasis);
  height: 2.5rem;
  width: 10rem;
  grid-template-columns: auto 3rem 2rem;
}

.target-score-wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.target-score-wrapper .target-score-item {
  font-size: 0.7rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.target-score-wrapper .target-score-item.target-min {
  background: rgba(var(--color-status-rgb-cat-3), 0.6);
}

.target-score-wrapper .target-score-item.target-max {
  background: rgba(var(--color-status-rgb-cat-4), 0.4);
}

.subnav > .subnav-item.active {
  border-bottom: 2px solid var(--color-logo);
}

.subnav > .subnav-item:hover {
  border-bottom: 2px solid rgba(var(--color-logo-rgb), 0.4);
}

.subtitle-row .section-score-component.cat-1 {
  background: rgba(var(--color-status-rgb-cat-1), 0.3);
}

.subtitle-row .section-score-component.cat-2 {
  background: rgba(var(--color-status-rgb-cat-2), 0.3);
  color: var(--color-text-contrast);
}

.subtitle-row .section-score-component.cat-3 {
  background: rgba(var(--color-status-rgb-cat-3), 0.3);
}

.subtitle-row .section-score-component.cat-4 {
  background: rgba(var(--color-status-rgb-cat-4), 0.3);
}

.subtitle-row .section-score-component.cat-5 {
  background: rgba(var(--color-status-rgb-cat-5), 0.3);
}

.subtitle-row .section-score-component h2 {
  font-size: 0.9rem;
  color: var(--color-text-main);
  margin: 0;
}

.subtitle-row .section-score-component .section-title-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.2rem 0 0.6rem;
  background: var(--color-bg-highlight);
}

.subtitle-row .section-score-component.overall-wrapper .section-title-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.25;
}

.subtitle-row .section-score-component.overall-wrapper .section-title-nav a {
  display: block;
  cursor: pointer;
  user-select: none;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.subtitle-row .section-score-component.overall-wrapper .section-title-nav a:hover em {
  color: var(--color-logo);
  text-decoration: underline;
}

.subtitle-row .section-score-component .subnav-score {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  text-align: center;
}

.subtitle-row .section-score-component.overall-wrapper .subnav-score {
  font-size: 1.5rem;
}

.subtitle-row .section-score-component .subnav-score.cat-1 {
  background: var(--color-status-cat-1);
}

.subtitle-row .section-score-component .subnav-score.cat-2 {
  background: var(--color-status-cat-2);
  color: var(--color-text-contrast);
}

.subtitle-row .section-score-component .subnav-score.cat-3 {
  background: var(--color-status-cat-3);
}

.subtitle-row .section-score-component .subnav-score.cat-4 {
  background: var(--color-status-cat-4);
}

.subtitle-row .section-score-component .subnav-score.cat-5 {
  background: var(--color-status-cat-5);
}

.subtitle-row .section-score-component .subnav-incomplete {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 0.4;
  background: var(--color-bg-subtle);
}

.nist-table {
  padding-top: 2rem;
}

.nist-table h2,
.nist-table h3 {
  margin: 0;
  font-size: 1rem;
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
  color: var(--color-text-main);
}

.nist-row {
  display: grid;
  grid-template-columns: 1rem 4rem auto repeat(3, 7rem) 8rem;
  grid-gap: 1rem;
  align-items: center;
  background: var(--color-bg-emphasis);
  padding: 0 0 0 1rem;
  margin: 0 0 0.3rem;
}

.nist-row.nist-control {
  padding: 0.5rem 1rem;
}

.nist-row.nist-header {
  padding: 0.5rem 1rem;
  align-items: end;
  background: transparent;
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
}

.nist-row.nist-child {
  background: rgba(var(--color-status-rgb-cat-0), 0.2);
}

.nist-row.nist-child.cat-1 {
  background: rgba(var(--color-status-rgb-cat-1), 0.2);
}

.nist-row.nist-child.cat-2 {
  background: rgba(var(--color-status-rgb-cat-2), 0.2);
}

.nist-row.nist-child.cat-3 {
  background: rgba(var(--color-status-rgb-cat-3), 0.2);
}

.nist-row.nist-child.cat-4 {
  background: rgba(var(--color-status-rgb-cat-4), 0.2);
}

.nist-row.nist-child.cat-5 {
  background: rgba(var(--color-status-rgb-cat-5), 0.2);
}

.nist-row h3 {
  font-size: 0.9rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  color: var(----color-text-secondary);
}

.nist-row h2 {
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
  font-size: 0.8rem;
}

#app.with-sidebar .mainbar .split-column-wrapper.cmmi-overview {
  padding-top: 2rem;
}

.score.bigger-score {
  display: grid;
  grid-template-columns: 3rem 5rem 3rem;
  grid-gap: 1rem;
  align-items: center;
  font-size: 1.5rem;
  width: 17rem;
  margin: 0 auto 2rem;
  padding: 1rem 2rem;
  background: var(--color-bg-emphasis);
  border-radius: 1rem;
}

.modify-ctrls {
  display: grid;
  grid-template-columns: auto 1.5rem;
  grid-template-rows: 1fr 1fr;
  grid-gap: 0 0.2rem;
  grid-template-areas: "num up" "num down";
  align-items: center;
}

.modify-ctrls .score-mod {
  grid-area: num;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--color-logo);
  border-radius: 0.5rem;
}

.modify-ctrls .score-mod.success {
  color: var(--color-success);
}

.modify-ctrls .score-mod.error {
  color: var(--color-error);
}

.modify-ctrls .score-mod .score-mod-icon {
  font-size: 1rem;
}

.modify-ctrls .score-mod p {
  margin: 0.1rem 0 0;
  font-weight: 900;
}

.modify-ctrls .modify-score-up {
  grid-area: up;
}

.modify-ctrls .modify-score-down {
  grid-area: down;
}

.modify-ctrls .modify-score-icon {
  cursor: pointer;
  user-select: none;
  padding: 0.1rem 0;
  line-height: 0.5;
}

.score .modify-score-icon.inactive {
  opacity: 0.4;
}

.score .modify-score-icon:hover {
  background: var(--color-bg-highlight);
}

.score .modify-score-icon.inactive:hover {
  background: transparent;
}

.score {
  grid-column: 4/-1;
  display: flex;
  justify-content: flex-end;
}

.score .nist-section-icon {
  width: 3rem;
  background: var(--color-bg-subtle);
  text-align: center;
  font-size: 1rem;
  padding: 0.3rem 0.5rem 0.2rem;
}

.score .category-score {
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  text-align: center;
  background: var(--color-status-cat-3);
  padding: 0.1rem 0.5rem 0;
  width: 3rem;
}

.score .category-score.cat-1 {
  background: var(--color-status-cat-1);
}

.score .category-score.cat-2 {
  background: var(--color-status-cat-2);
}

.score .category-score.cat-3 {
  background: var(--color-status-cat-3);
}

.score .category-score.cat-4 {
  background: var(--color-status-cat-4);
}

.score .category-score.cat-5 {
  background: var(--color-status-cat-5);
}

.target-scores {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  align-items: start;
}

.nist-row .nist-expand-icon {
  line-height: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.nist-row.isOpen .nist-expand-icon {
  transform: rotate(90deg);
  margin-top: -0.5rem;
}

.nist-header .header-label.section-name {
  grid-column-end: span 2;
}

.maturity-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1rem);
  grid-template-rows: 1rem auto;
  grid-gap: 0.5rem 2px;
}

.maturity-box {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-bg-border);
  cursor: pointer;
  user-select: none;
}

.maturity-wrapper .maturity-label {
  grid-column: 1/-1;
  text-align: center;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  display: none;
}

.maturity-label.maturity-label-0 {
  color: var(--color-status-cat-0);
}

.maturity-label.maturity-label-1 {
  color: var(--color-status-cat-1);
}

.maturity-label.maturity-label-2 {
  color: var(--color-status-cat-2);
}

.maturity-label.maturity-label-3 {
  color: var(--color-status-cat-3);
}

.maturity-label.maturity-label-4 {
  color: var(--color-status-cat-4);
}

.maturity-label.maturity-label-5 {
  color: var(--color-status-cat-5);
}

.maturity-wrapper.value-0 .maturity-label.maturity-label-0 {
  display: block;
}

.maturity-wrapper.value-1 .maturity-label.maturity-label-1 {
  display: block;
}

.maturity-wrapper.value-2 .maturity-label.maturity-label-2 {
  display: block;
}

.maturity-wrapper.value-3 .maturity-label.maturity-label-3 {
  display: block;
}

.maturity-wrapper.value-4 .maturity-label.maturity-label-4 {
  display: block;
}

.maturity-wrapper.value-5 .maturity-label.maturity-label-5 {
  display: block;
}

.maturity-wrapper.value-0 .maturity-box.maturity-0 {
  background: var(--color-status-cat-0);
  border: none;
}

.maturity-wrapper.value-1 .maturity-box.maturity-0 {
  background: var(--color-status-cat-1);
  border: none;
}

.maturity-wrapper.value-1 .maturity-box.maturity-1 {
  background: var(--color-status-cat-1);
  border: none;
}

.maturity-wrapper.value-2 .maturity-box.maturity-0 {
  background: var(--color-status-cat-2);
  border: none;
}

.maturity-wrapper.value-2 .maturity-box.maturity-1 {
  background: var(--color-status-cat-2);
  border: none;
}

.maturity-wrapper.value-2 .maturity-box.maturity-2 {
  background: var(--color-status-cat-2);
  border: none;
}

.maturity-wrapper.value-3 .maturity-box.maturity-0 {
  background: var(--color-status-cat-3);
  border: none;
}

.maturity-wrapper.value-3 .maturity-box.maturity-1 {
  background: var(--color-status-cat-3);
  border: none;
}

.maturity-wrapper.value-3 .maturity-box.maturity-2 {
  background: var(--color-status-cat-3);
  border: none;
}

.maturity-wrapper.value-3 .maturity-box.maturity-3 {
  background: var(--color-status-cat-3);
  border: none;
}

.maturity-wrapper.value-4 .maturity-box.maturity-0 {
  background: var(--color-status-cat-4);
  border: none;
}

.maturity-wrapper.value-4 .maturity-box.maturity-1 {
  background: var(--color-status-cat-4);
  border: none;
}

.maturity-wrapper.value-4 .maturity-box.maturity-2 {
  background: var(--color-status-cat-4);
  border: none;
}

.maturity-wrapper.value-4 .maturity-box.maturity-3 {
  background: var(--color-status-cat-4);
  border: none;
}

.maturity-wrapper.value-4 .maturity-box.maturity-4 {
  background: var(--color-status-cat-4);
  border: none;
}

.maturity-wrapper.value-5 .maturity-box.maturity-0 {
  background: var(--color-status-cat-5);
  border: none;
}

.maturity-wrapper.value-5 .maturity-box.maturity-1 {
  background: var(--color-status-cat-5);
  border: none;
}

.maturity-wrapper.value-5 .maturity-box.maturity-2 {
  background: var(--color-status-cat-5);
  border: none;
}

.maturity-wrapper.value-5 .maturity-box.maturity-3 {
  background: var(--color-status-cat-5);
  border: none;
}

.maturity-wrapper.value-5 .maturity-box.maturity-4 {
  background: var(--color-status-cat-5);
  border: none;
}

.maturity-wrapper.value-5 .maturity-box.maturity-5 {
  background: var(--color-status-cat-5);
  border: none;
}

.maturity-wrapper .maturity-box.maturity-0:hover {
  background: rgba(var(--color-status-rgb-cat-0), 0.6);
}

.maturity-wrapper .maturity-box.maturity-1:hover {
  background: rgba(var(--color-status-rgb-cat-1), 0.6);
}

.maturity-wrapper .maturity-box.maturity-2:hover {
  background: rgba(var(--color-status-rgb-cat-2), 0.6);
}

.maturity-wrapper .maturity-box.maturity-3:hover {
  background: rgba(var(--color-status-rgb-cat-3), 0.6);
}

.maturity-wrapper .maturity-box.maturity-4:hover {
  background: rgba(var(--color-status-rgb-cat-4), 0.6);
}

.maturity-wrapper .maturity-box.maturity-5:hover {
  background: rgba(var(--color-status-rgb-cat-5), 0.6);
}

/* Strategic Roadmap */
.project-row {
  display: grid;
  grid-template-columns: 18rem 1.5rem 1.5rem auto 7rem 4rem;
  grid-gap: 1rem;
  align-items: center;
  background: var(--color-bg-emphasis);
  padding: 0.5rem 1rem;
  margin: 0 0 0.2rem;
}

.project-row .centered {
  text-align: center;
}

.project-row .project-span {
  grid-column-end: span 2;
}

.project-row .project-click-target {
  cursor: pointer;
  user-select: none;
}

.project-row.project-header {
  background: transparent;
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  opacity: 0.6;
}

.project-row .project-description.form-input,
.project-row .project-quarter.form-input,
.project-row .project-length.form-input {
  margin: 0;
}

.project-row .project-section,
.project-row .project-quarter {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.25rem 0.5rem;
  color: var(--color-text-contrast);
  background: var(--color-bg-contrast);
  border-radius: 0.5rem;
}

.project-row select.dropdown {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  width: 100%;
}

.project-row .dropdown option {
  color: var(--color-text-contrast);
}

.project-row .project-length {
  text-align: center;
}

.project-add-btn {
  margin: 1rem 0 2rem;
  font-size: 0.7rem;
}

/* Control Table */
.control-row {
  display: grid;
  grid-template-columns: 1.5rem 1.5rem 1.5rem 5rem auto 5rem;
  grid-gap: 1rem;
  align-items: center;
  background: var(--color-bg-emphasis);
  padding: 0.5rem 1rem;
  margin: 0 0 0.2rem;
}

.control-row .centered {
  text-align: center;
}

.control-row .first-label {
  grid-column-end: span 3;
}

.control-row .control-click-target {
  cursor: pointer;
  user-select: none;
}

.control-row.control-header {
  background: transparent;
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  opacity: 0.6;
}

.control-row .control-priority {
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  background: var(--color-bg-contrast);
  color: var(--color-text-contrast);
  border-radius: 0.5rem;
  padding-top: 0.1rem;
  visibility: hidden;
}

.control-row .control-sort-wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 2px;
  visibility: hidden;
}

.control-row.isSelected .control-priority,
.control-row.isSelected .control-sort-wrapper {
  visibility: visible;
}

.control-row .control-sort-wrapper .control-sort {
  padding: 0.25rem;
  line-height: 0.5;
}

.control-row .control-sort-wrapper .control-sort.inactive {
  opacity: 0.4;
}

.control-row .control-sort-wrapper .control-sort:hover {
  background: var(--color-bg-highlight);
}

.control-row .control-sort-wrapper .control-sort.inactive:hover {
  background: transparent;
}

.control-row .control-impact {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  color: var(--text-contrast);
  border-radius: 0.5rem;
}

.control-row .control-impact.impact-bad {
  background: rgba(var(--color-error-rgb), 0.5);
}

.control-row .control-impact.impact-good {
  background: rgba(var(--color-success-rgb), 0.5);
}

.control-row .control-impact p {
  margin: 0.1rem 0 0 0.3rem;
}

.control-row .control-impact .material-icons {
  font-size: 0.8rem;
  opacity: 0.6;
}

.control-row .control-description-wrapper {
  grid-column: 4/-1;
  display: none;
}

.control-row.isSelected .control-description-wrapper {
  display: block;
}

.control-row .control-selected-icon {
  display: none;
}

.control-row .control-unselected-icon {
  display: block;
}

.control-row.isSelected .control-selected-icon {
  display: block;
}

.control-row.isSelected .control-unselected-icon {
  display: none;
}

/* Table Data from RSA Component */
.data-table {
  margin-bottom: 1.5rem;
}

.data-table.two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0 0.2rem;
}

.data-table .data-grid {
  display: grid;
  grid-template-columns: 1rem 3rem 4rem 5rem 4rem 3rem auto;
  grid-gap: 1rem;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.data-table .data-table-heading {
  align-items: end;
}

.data-table.leaked-credentials .data-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-table.hosts-tested .data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-table.cloud-compliance .data-grid {
  grid-template-columns: auto repeat(4, 5rem);
}

.data-table.external-pen-test .data-grid {
  grid-template-columns: auto;
}

.data-table.recommendations .data-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.data-table.findings .data-grid {
  grid-template-columns: 1rem repeat(4, 5rem) auto;
}

.data-table .data-grid .data-table-center {
  text-align: center;
}

.data-table .data-table-heading {
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.data-table .data-table-heading .span-end {
  grid-column: 3/-1;
}

.data-table .data-table-row {
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.7);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin: 0 0 0.2rem;
}

.data-table .data-table-row:hover {
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.9);
}

.data-table .data-table-row.isOpen .data-table-toggle {
  transform: rotate(90deg);
  margin-top: -0.5rem;
}

.data-table .data-table-row .data-table-hidden-row {
  display: none;
  grid-column: 1/-1;
  margin-left: 2rem;
}

.data-table .data-table-row.isOpen .data-table-hidden-row {
  display: block;
}

.data-table .data-table-hidden-row .data-table-label {
  font-size: 0.7rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  color: var(--color-logo);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.data-table .data-table-hidden-row .data-table-detail {
  margin-bottom: 1rem;
}

/* New RSA Stuff */
.top-split-content {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: repeat(2, auto);
  grid-gap: 2rem;
  margin-bottom: 1.5rem;
}

.top-split-content.data-breaches {
  grid-template-columns: 3fr 2fr;
  margin-bottom: 0;
}

.top-split-content.attack-surface {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0;
}

.risk-donut-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-gap: 1rem;
  align-items: center;
  align-self: start;
}

.overview .risk-donut-wrapper {
  align-self: center;
}

.risk-donut-wrapper h2,
.risk-donut-wrapper h3 {
  grid-column: 1/-1;
}

.donut-graph-legend {
  display: grid;
  grid-template-columns: 1rem auto;
  grid-gap: 0.5rem 0.5rem;
  align-items: center;
  padding: 1rem;
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.7);
  border-radius: 0.4rem;
}

.risk-donut-wrapper .donut-graph {
  max-width: 12rem;
}

.donut-graph-legend .risk-legend-box {
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
}

.donut-graph-legend .risk-legend-box.cat-1 {
  background: var(--color-status-cat-1);
}

.donut-graph-legend .risk-legend-box.cat-2 {
  background: var(--color-status-cat-2);
}

.donut-graph-legend .risk-legend-box.cat-3 {
  background: var(--color-status-cat-3);
}

.donut-graph-legend .risk-legend-box.cat-4 {
  background: var(--color-status-cat-4);
}

.donut-graph-legend .risk-legend-box.cat-5 {
  background: var(--color-status-cat-5);
}

.donut-graph-legend .risk-label em {
  font-weight: 800;
  font-family: LatoBold, system, sans-serif;
  margin-right: 0.2rem;
}

.donut-graph-legend .risk-label.cat-1 em {
  color: var(--color-status-cat-1);
}

.donut-graph-legend .risk-label.cat-2 em {
  color: var(--color-status-cat-2);
}

.donut-graph-legend .risk-label.cat-3 em {
  color: var(--color-status-cat-3);
}

.donut-graph-legend .risk-label.cat-4 em {
  color: var(--color-status-cat-4);
}

.donut-graph-legend .risk-label.cat-5 em {
  color: var(--color-status-cat-5);
}

.owasp-stack-wrapper {
  max-height: 11.5rem;
  overflow-y: hidden;
}

.owasp-stack-wrapper .stack-grid {
  display: grid;
  grid-template-columns: 7rem auto;
  grid-gap: 0.5rem;
  align-items: center;
}

.owasp-stack-wrapper .stack-grid .align-right {
  justify-content: stretch;
  text-align: right;
}

.stack-graph-header {
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.stack-label {
  justify-self: end;
  text-align: right;
  font-family: LatoBold, system, sans-serif;
  font-weight: 600;
  font-size: 0.9em;
}

.stack-row {
  margin-bottom: 0.5rem;
}

.split-column .table-findings-wrapper {
  grid-column: 1/-1;
}

.evidence-examples-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 1.5rem;
}

.evidence-examples-wrapper .evidence-wrapper {
  background: var(--color-logo);
  border: 2px solid var(--color-logo);
  cursor: pointer;
  user-select: none;
}

.evidence-examples-wrapper .evidence-wrapper img:hover {
  opacity: 0.9;
}

ul.risk-counts li {
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  font-size: 0.9em;
}

ul.risk-counts li em {
  font-family: LatoBold, system, sans-serif;
  font-weight: 600;
  margin-right: 0.3rem;
  color: var(--color-logo);
}

.top-item-wrapper {
  display: grid;
  grid-template-columns: 14rem auto;
  grid-gap: 1.5rem;
}

ul.risk-counts {
  padding: 1rem 1.5rem;
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.8);
  border-radius: 0.4rem;
  list-style-type: none;
}

pre {
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.6);
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  padding: 1rem;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  user-select: none;
  position: relative;
}

pre:hover {
  background: var(--color-bg-box-emphasis);
}

pre .hidden-button {
  font-size: 0.8rem;
  visibility: hidden;
  position: absolute;
  top: 1em;
  right: 1em;
  background: rgba(var(--color-active-rgb), 0.3);
  font-family: LatoRegular, system, sans-serif;
  font-weight: 400;
  padding: 0.4em 1em;
  border-radius: 0.5em;
}

pre:hover .hidden-button {
  visibility: visible;
}

pre .hidden-button:hover {
  background: rgba(var(--color-active-rgb), 0.7);
}

code {
  display: block;
  font-size: 0.8rem;
}

/* Recommendations */
.data-table.recommendations {
  margin-bottom: 1.5rem;
}

.data-table.recommendations .data-table-heading {
  background: rgba(var(--color-bg-highlight-rgb), 0.5);
  padding: 0.25rem 1rem;
  margin-bottom: 1rem;
}

.data-table.recommendations .data-table-row {
  background: rgba(var(--color-logo-rgb), 0.05);
}

.data-table.recommendations .data-table-row:hover {
  background: rgba(var(--color-logo-rgb), 0.05);
  cursor: unset;
}

.improvement_recommendations .item-detail {
  padding-left: 3rem;
}

.improvement_recommendations ol > li.isCollapsed .item-detail {
  display: none;
  margin-bottom: 0;
}

.improvement_recommendations ol > li.isCollapsed .collapsed-icon {
  transform: rotate(90deg);
}

.sub-recommendations-label {
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  opacity: 0.6;
  background: rgba(var(--color-bg-highlight-rgb), 0.5);
  padding: 0.25rem 1rem;
  margin-bottom: 1rem;
}

.data-table.recommendations .data-table-row ul {
  padding-left: 1rem;
}

.improvement_recommendations .items-list ul.item-description {
  padding: 1rem 1rem 1rem 4rem;
  background: rgba(var(--color-active-rgb), 0.05);
}

.improvement_recommendations .items-list ul {
  margin-bottom: 1rem;
}

.improvement_recommendations .items-list ul {
  margin-bottom: 1rem;
}

.improvement_recommendations .items-list ul > li {
  list-style-type: disc;
  font-size: 1rem;
}

/* Report Sections */
.report-sections-wrapper .report-section-heading,
.report-sections-wrapper .report-section-row {
  display: grid;
  grid-template-columns: 1.5rem 2fr 1fr 1.5rem;
  grid-gap: 1rem;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.report-sections-wrapper .report-section-heading {
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.report-sections-wrapper .report-section-heading .span-end {
  grid-column: 3/-1;
}

.report-sections-wrapper .report-section-row {
  background: var(--color-bg-emphasis);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin: 0 0 0.2rem;
}

.report-sections-wrapper .report-section-row.isDisabled {
  opacity: 0.5;
}

.report-sections-wrapper .report-section-row .row-label {
  font-weight: 200;
}

.report-sections-wrapper .report-section-row .row-note {
  font-size: 0.8rem;
}

.report-sections-wrapper .report-section-row.isOpen .toggle-icon {
  transform: rotate(90deg);
}

.report-sections-wrapper .hidden-section {
  margin-left: 3rem;
  margin-bottom: 1rem;
}

.report-sections-wrapper .report-sections-heading {
  margin: 0 1rem 0.5rem 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-sections-wrapper .report-sections-heading h5,
.report-sections-wrapper .report-sections-heading h6 {
  margin: 0;
}

/* Strategic Roadmap */
.roadmap-container {
  position: relative;
  width: 95%;
  margin: 0 auto;
  padding: 2rem 0;
  display: grid;
  grid-template-columns: 2fr repeat(5, minmax(0, 3fr));
  grid-template-rows: repeat(2, 3rem) repeat(5, 9rem);
}

.roadmap-container .legend-item {
  padding: 0.75rem 1rem;
  text-align: right;
  font-size: 1rem;
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

.roadmap-container .heading-style {
  text-align: center;
  font-weight: 900;
  font-size: 1rem;
  padding: 0.75rem;
}

.roadmap-container .year-heading {
  text-align: center;
  font-family: LatoBold, system, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  padding: 0.75rem;
  grid-column-end: span 2;
  background: rgba(var(--color-bg-highlight-rgb), 0.7);
}

.roadmap-container .year-heading.isOdd {
  grid-column-end: span 3;
  background: rgba(var(--color-bg-box-rgb), 0.7);
}

.roadmap-container .quarter-heading {
  text-align: center;
  font-family: LatoBold, system, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  padding: 0.75rem;
  background: transparent;
}

.roadmap-container .quarter-heading.isOdd {
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.25);
}

.roadmap-container .quarter-score {
  background: transparent;
}

.roadmap-container .quarter-score div {
  text-align: center;
  font-family: LatoBold, system, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  padding: 0.5rem;
  background: var(--color-status-cat-4);
}

.roadmap-container .quarter-score.isOdd {
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.25);
}

.roadmap-container .section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid var(--color-bg-medium);
  text-align: center;
  font-size: 0.8rem;
  font-family: LatoBold, system, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  padding: 0.5rem 1rem;
}

.roadmap-container .table-cell {
  background: transparent;
  border-top: 2px solid var(--color-bg-medium);
}

.roadmap-container .table-cell.isOdd {
  background: rgba(var(--color-bg-box-emphasis-rgb), 0.25);
}

.projects-overview .project-wrapper {
  font-size: 0.75rem;
  margin: 0 0 1.5rem;
  width: calc(100%);
}

.roadmap-container .project-wrapper {
  font-size: 0.75rem;
  margin: 1rem 0;
  width: calc(100%);
}

.projects-overview .project-wrapper {
  width: 100%;
}

.roadmap-container .project-wrapper.len-2 {
  width: calc(100% * 2);
}

.roadmap-container .project-wrapper.len-3 {
  width: calc(100% * 3);
}

.roadmap-container .project-wrapper.len-4 {
  width: calc(100% * 4);
}

.roadmap-container .project-wrapper.isSecondRow {
  margin: 5rem 0 1rem;
}

.roadmap-container .project-row .project-sort-wrapper .project-sort {
  padding: 0.25rem;
  line-height: 0.5;
}

.roadmap-container .project-row .project-sort-wrapper .project-sort.inactive {
  opacity: 0.4;
}

.roadmap-container .project-row .project-sort-wrapper .project-sort:hover {
  background: var(--color-bg-highlight);
}

.roadmap-container .project-row .project-sort-wrapper .project-sort.inactive:hover {
  background: transparent;
}

.projects-overview .project-container,
.roadmap-container .project-container {
  color: var(--color-text-main);
  background: rgba(var(--color-status-rgb-cat-0), 0.2);
  position: relative;
  height: 3.5em;
  margin: 0.25em 0 2em 2.25em;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* .roadmap-container .project-wrapper.cat-1 .project-container { background: rgba(var(--color-status-rgb-cat-1), 0.4); }
.roadmap-container .project-wrapper.cat-2 .project-container { background: rgba(var(--color-status-rgb-cat-2), 0.4); }
.roadmap-container .project-wrapper.cat-3 .project-container { background: rgba(var(--color-status-rgb-cat-3), 0.4); }
.roadmap-container .project-wrapper.cat-4 .project-container { background: rgba(var(--color-status-rgb-cat-4), 0.4); }
.roadmap-container .project-wrapper.cat-5 .project-container { background: rgba(var(--color-status-rgb-cat-5), 0.4); } */
.projects-overview .project-id,
.roadmap-container .project-id {
  position: absolute;
  top: -0.25em;
  left: -2em;
  width: 4em;
  height: 4em;
  border-radius: 2em;
  color: var(--color-text-main);
  background: var(--color-status-cat-0);
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.projects-overview .project-wrapper.cat-1 .project-id,
.roadmap-container .project-wrapper.cat-1 .project-id {
  background: var(--color-status-dark-cat-1);
}

.projects-overview .project-wrapper.cat-2 .project-id,
.roadmap-container .project-wrapper.cat-2 .project-id {
  background: var(--color-status-dark-cat-2);
}

.projects-overview .project-wrapper.cat-3 .project-id,
.roadmap-container .project-wrapper.cat-3 .project-id {
  background: var(--color-status-dark-cat-3);
}

.projects-overview .project-wrapper.cat-4 .project-id,
.roadmap-container .project-wrapper.cat-4 .project-id {
  background: var(--color-status-dark-cat-4);
}

.projects-overview .project-wrapper.cat-5 .project-id,
.roadmap-container .project-wrapper.cat-5 .project-id {
  background: var(--color-status-dark-cat-5);
}

.roadmap-container .project-id.isLightBG {
  color: var(--color-bg-highlight);
}

.roadmap-container .project-id.hasBorder {
  border: 2px solid var(--color-bg-contrast);
}

.projects-overview .project-id div,
.roadmap-container .project-id div {
  text-align: center;
  font-size: 2em;
  font-weight: 900;
  line-height: 1;
}

.projects-overview .project-id .material-icons,
.roadmap-container .project-id .material-icons {
  display: none;
  font-size: 3em;
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  text-align: center;
  opacity: 0.4;
}

.projects-overview .project-title,
.roadmap-container .project-title {
  padding-left: 3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 3em;
  display: flex;
  align-items: center;
  width: calc(100% - 2rem);
}

.roadmap-container .project-title {
  font-size: 0.9rem;
}

.projects-overview .project-title {
  font-size: 0.9rem;
}

/* Cloud Compliance */
.vuln-wrapper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 2rem auto;
  margin-bottom: 2rem;
}

.overview .vuln-wrapper {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 2rem 1fr 1fr;
  width: 100%;
}

.vuln-wrapper .vuln-header {
  grid-column: 1/-1;
  background: var(--color-bg-emphasis);
  display: flex;
  justify-content: center;
  align-items: center;
}

.overview .vuln-wrapper .vuln-header {
  font-size: 0.9rem;
}

.vuln-wrapper .vuln-label {
  font-family: LatoLight, system, sans-serif;
  font-weight: 200;
}

.vuln-wrapper .vuln-value {
  font-family: LatoBold, system, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0 1rem;
}

.vuln-wrapper .vuln-cell {
  text-align: center;
  padding: 0.5rem 0;
}

.overview .vuln-wrapper .vuln-cell {
  padding: 1rem 0;
}

.overview .vuln-wrapper .vuln-cell.primary {
  grid-column-end: span 3;
}

.overview .vuln-wrapper .vuln-cell.secondary {
  grid-column-end: span 2;
}

.vuln-wrapper .vuln-cell.vuln-1 {
  background: rgba(var(--color-error-rgb), 0.8);
}

.vuln-wrapper .vuln-cell.vuln-2 {
  background: rgba(var(--color-error-rgb), 0.5);
}

.vuln-wrapper .vuln-cell.vuln-3 {
  background: rgba(var(--color-error-rgb), 0.3);
}

.vuln-wrapper .vuln-cell.vuln-4 {
  background: rgba(var(--color-error-rgb), 0.1);
}

.vuln-wrapper .vuln-cell.vuln-5 {
  background: rgba(var(--color-active-rgb), 0.2);
}