:root {
  /* Default theme variables */
  --theme-brand: #dc281e;
  --theme-primary: #3B4F5A;
  --theme-link: #20a8d8;
  --theme-paper: #F5F5F5;
  --theme-paper-light: #9a9a9c;
  --theme-paper-ultralight: #cfd8dc;
  --theme-border-light: #E1E1E1;

  /* Dark theme variables */
  --theme-dark-high: #211f20;
  --theme-dark-medium: #323232;
  --theme-border-dark: #323232;

  /* Font Variables */
  --theme-font-small: 0.8em;

  /* Legacy - TO DEPRECATE and REMOVE */
  --red: #dc281e;
  --maroon: #781428;
  --salmon: #f0645a;
  --black: #000000;
  --charcoal: #323232;
  --darkgrey: #3c505a;
  --midgrey: #a0a0a0;
  --lightgrey: #dcdcdc;
  --paper: #f5f5f5;
  --white: #ffffff;

  /* react-mdc-web npm module theme (rewrite some color) */
  --mdc-theme-secondary: #3B4F5A !important;
  --mdc-theme-primary: #3B4F5A !important;
  --mdc-theme-secondary-dark: #323232 !important;
}

/**
 * Nucleus Core
 * @version v1.0.0
 */

/* Resets */
*:focus { outline: none;}
/* Utilities */
.center { text-align: center;}
a { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; }
a:active, a:hover { outline-width: 0; text-decoration: underline;}
*, *::before, *::after { box-sizing: inherit; }
@-ms-viewport { width: device-width; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
[tabindex="-1"]:focus { outline: none !important; }
table { border-collapse: collapse; }
.nav-tabs>li>a { border-radius: 0; cursor: pointer;}
.app-header,.app-footer,.sidebar,.main,.aside-menu {
  transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s;
}

*::-webkit-scrollbar { width: 8px; height: 8px; background-color: #efefef;}
*::-webkit-scrollbar-thumb { border-radius: 0px; width: 4px; background-color: #afafaf;}

html.dark *::-webkit-scrollbar { background-color: var(--theme-dark-high);}
html.dark *::-webkit-scrollbar-thumb { background-color: #555;}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  color: var(--theme-primary);
  -webkit-font-smoothing: antialiased;
}

body.app {
  font-family: "Roboto", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  font-weight: 700;
  line-height: 1.1;
}

h1 {
  font-size: 2em;
  margin: 1rem 0;
  color: var(--theme-primary);
}

h2 {
  font-size: 1.5em;
  font-weight: normal;
  margin: 0.5rem 0;
  color: var(--theme-primary);
}

h2 {
  font-size: 1.5em;
  font-weight: normal;
  margin: 0.5rem 0;
  color: var(--theme-primary);
}

strong, b { font-weight: 500;}

small { font-size: var(--theme-font-small);}

.desc {
  padding:20px;
  font-size: var(--theme-font-small);
}

a.nohover:hover, a.cardhover:hover {
  text-decoration: none;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: var(--theme-link);
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
  a:hover {
    color: var(--theme-link);
  }

/* Decorative elements */

mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: var(--theme-font-small);
  color: var(--theme-primary);
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}

hr {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* LAYOUT */

.app-body {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  padding-bottom:50px;
}

.app-body .main {
  flex: 1;
  min-width: 0;
  margin-left: 210px;
  background: #FFF;
}

.sidebar-hidden .app-body .main {
  margin-left: 10px;
}

.app-body .main.hide-left-filters .container-fluid {
  padding: 0;
}

.app-body .main.hide-left-filters {
  margin-left: 0;
}

.app .app-body .main .container-fluid {
  padding: 0 0 0 30px;
}

.app.app-search-page-container .app-body .main .container-fluid {
  padding: 0;
}

.app.details .main {
  margin-left: 0;
}

.app.details .main .container-fluid {
  padding-right: 30px;
}

.container-fluid > .ErrorHandler {
  margin-top: 80px;
}

body.dark .app-body .main {
  background: var(--theme-dark-high);
}

#cmpp-content {
  margin-top:90px;
}

/* COMMON ElEMENTS */

.mat_id {
  display:block;
  overflow:none;
  font-size:0.75em;
  word-wrap: break-word;
}

body.dark .btn-default,
body.dark .btn-default:active,
body.dark .btn-default:focus,
body.dark .btn-default[disabled],
body.dark .btn-default[disabled]:hover {
  background-color: transparent;
  border: 0.5px solid var(--theme-link);
  color: var(--theme-link);
}

body.dark .btn-default:hover:not([disabled]) {
  background-color: var(--theme-dark-high);
}

body.dark .btn-default.btn-details:hover:not([disabled]) {
  background-color: var(--theme-dark-medium);
}

body.dark .btn-default[disabled] {
  opacity: 0.65;
}

body.dark .btn-default:active:not([disabled]) {
  opacity: .8;
}

div.mdc-checkbox:after, div.mdc-checkbox:before, div.mdc-radio:after, div.mdc-radio:before {
  background-color: rgba(59, 79, 90, 0.14);
}

.fa.fa-circle-check {
  color: #86dc1e;
}
.fa.fa-circle-exclamation-point,
.fa.fa-close-circle,
.fa.fa-lock-open,
.fa.fa-circle-times {
  color: #dc281e;
}
.fa.fa-circle-three-dot,
.fa.fa-user-check,
.fa.fa-circle-spinner {
  color: #20a8d8;
}
.fa.fa-circle-help {
  color: #6c7284;
}
.fa.fa-clock-time-five,
.fa.fa-queued,
.fa.fa-circle-chart,
.fa.fa-on-hold-circle {
  color: #e67e22;
}

.fa.fa-angle-double-right {
  color: var(--midgrey);
  margin-bottom: 3px;
}