@media (min-width: 1200px) {
  .container {
    width: 100%;
  }
}

.dataTables_wrapper td:nth-child(2) {
  min-width: 145px;
}

/* LEGACY CSS */
/* apply a natural box layout model to all elements */
*, *:before, *:after {
  box-sizing: border-box;
}

.myRequired {
  color: red;
}

.breathe {
  padding: 20px 0;
}

.breatheBtm {
  padding-bottom: 20px;
}

.section-title {
  text-transform: uppercase;
}

.icon-menu {
  background: black;
  color: white;
  padding: 10px;
  text-transform: uppercase;
  margin-left: -10px;
}

#wrapper {
  padding-left: 250px;
  margin-top: 50px;
}

@media (max-width: 992px) {
  #wrapper {
    padding-left: 200px;
  }
}

.userinfo {
  color: white;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #002890;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1234;
}

@media (max-width: 992px) {
  #sidebar-wrapper {
    width: 200px;
  }
}

.sidebar-nav li {
  line-height: 42px;
  border-bottom: 1px solid #232325;
  color: #999;
}

.sidebar-nav li.grayedOut {
  opacity: 0.3;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  padding-left: 30px;
}

.sidebar-nav li a {
  color: #999;
  text-decoration: none;
  display: block;
  width: 100%;
}

.sidebar-nav li a:hover {
  background: #232325;
  color: white;
}

.sidebar-nav li a.active {
  border-left: 5px solid #19AA8D;
  background: #232325;
  color: white;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav li img {
  margin-right: 10px;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: white;
  background: none;
}

ol.breadcrumb {
  height: 50px;
  line-height: 40px;
  margin: 0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.2);
  text-align: right;
}

.content-header h1 {
  margin: 0 0 0 20px;
  line-height: 65px;
  display: inline-block;
}

.inset {
  padding-left: 20px;
  margin-top: -20px;
}

.branding {
  text-transform: uppercase;
  margin-left: 20px;
  color: white;
}

@media (max-width: 767px) {
  #wrapper {
    padding-left: 0;
  }

  #sidebar-wrapper {
    left: 0;
  }

  #wrapper.active {
    position: relative;
    left: 250px;
  }

  #wrapper.active #sidebar-wrapper {
    left: 250px;
    width: 180px;
  }

  #menu-toggle {
    display: inline-block;
    width: 100%;
    background: black;
    text-align: left;
    padding: 9px;
    border-radius: 0;
  }

  .inset {
    padding: 15px;
  }
}

#login {
  background: #0096B7;
}

.login {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -150px;
  width: 300px;
  height: 300px;
}

.login img {
  text-align: center;
}

.login h1 {
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
  text-align: center;
}

.login a, .login a:active, .login a:focus {
  color: white;
  float: right;
}

.login input {
  width: 100%;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.3);
  outline: none;
  padding: 10px;
  font-size: 13px;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
  -webkit-transition: box-shadow .5s ease;
  transition: box-shadow .5s ease;
}

input:focus {
  box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
}

.table thead,
.table-hover thead {
  background: #0031AE;
  color: white;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after {
  color: white !important;
}

.table th {
  border-top: 0;
}

td .icon-check {
  font-size: 16px;
}

.fa-action {
  float: left;
  margin-right: 8px;
}

.fa-info-circle {
  color: #0096B7;
}

.dynatree-title {
  font-size: 14px;
}

.nav-tabs > li > a {
  border: none;
}

ul.nav-tabs {
  margin-left: -20px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  background: white;
}

ul.nav-tabs li {
  background: transparent !important;
}

ul.nav-tabs li.active a,
ul.nav-tabs li.active:hover a,
ul.nav-tabs li.active:focus a {
  background: #f3f3f4;
}

#link {
  display: block;
  line-height: 1.5;
}

.cbrwidget {
  background: white;
  padding: 5px 50px 30px 50px;
  margin-top: 30px;
}

@media (max-width: 1400px) {
  .cbrwidget {
    padding: 5px 20px 30px 20px;
  }
}

.cbrwidget h3 {
  text-transform: uppercase;
  font-size: 14px;
}

.cbrwidget h3 span {
  font-size: 18px;
}

.cbrwidget img {
  max-width: 100%;
}

.tableCompare a {
  color: white;
}

.tableCompare a:hover {
  color: white;
  text-decoration: none;
}

.tableCompare td,
.tableCompare th {
  min-width: 200px;
}

.tableCompare td:first-child {
  background: white;
}

.powered {
  opacity: 0.2;
}

.toptier {
  background: #87D37C;
  /* green */;
}

.middletier {
  background: #FFA631;
  /* orange */;
}

.bottomtier {
  background: #DC3023;
  /* red */;
}

.fa-sort {
  font-size: 14px;
  color: white;
  float: right;
}

.fa-filter {
  font-size: 28px !important;
  margin-right: 10px;
  color: #333;
  opacity: 0.2;
}

.fa-sign-out {
  font-size: 20px;
}

@media (max-width: 767px) {
  .contentpanel {
    padding: 0;
  }
}

.panel-heading {
  border-radius: 0;
}

.form-buttons {
  background: #F7F7F7;
  border-bottom: 1px solid #d3d7db;
}

.form-buttons form-group:first-child {
  margin-top: 0;
}

.form-bordered .form-group {
  padding: 15px 0;
  border-top: 1px solid #d3d7db;
}

.form-group.noBorder {
  border-top: 1px solid white !important;
}

input[type=checkbox].form-control,
input[type=radio].form-control {
  height: auto;
  width: auto;
}

select.form-control {
  height: 34px;
}

pre {
  background: #1d1f21;
  color: white;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  position: relative;
  overflow: auto;
}

pre:before {
  content: attr(rel);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #E18728;
  font-weight: bold;
  padding: 5px 0;
  text-indent: 15px;
}

pre[rel] {
  padding-top: 33px;
}

.dual-control {
  width: 9%;
  float: left;
  text-align: center;
  padding-top: 50px;
}

.dual-control input[type=button] {
  padding: 0 8px;
  line-height: 24px;
  cursor: pointer;
  height: 26px;
  margin: 2px 1px;
}

.btnDualRight {
  margin-right: 5px !important;
}

.nav > li > span > a,
.nav > li > span > .grayLink {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.nav > li > span > a:hover,
.nav > li > span > a:focus,
.nav > li > span > .grayLink:hover,
.nav > li > span > .grayLink:focus {
  text-decoration: none;
  background-color: #eee;
}

.grayLink {
  opacity: 0.4;
  color: gray;
  font-style: italic;
}

.overlay {
  position: absolute;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.overlay.bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow-y: hidden;
  -webkit-transition: height 0.5s ease-in-out , overflow 0.5s ease-in-out;
  transition: height 0.5s ease-in-out , overflow 0.5s ease-in-out;
  padding: 0;
}

.tooltip-inner {
  word-wrap: break-word;
}

/* END OF LEGACY CSS */
/* TOP VARIABLES*/
body {
  margin: 0;
  padding: 0;
  font-family: manrope, -apple-system, BlinkMacSystemFont,'Source Sans Pro', 'open sans', 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f6f7f8;
  font-size: 14px;
  letter-spacing: .2px;
  /* can be overloaded in js react components! */
  overflow-x: hidden;
}

.cbrrequired:before {
  color: red;
  content: '*';
  margin-right: 5px;
}

/* MENU TOGGLE */
#menu-toggle {
  display: block;
  z-index: 9999;
  position: fixed;
  top: 15px;
  left: 220px;
  color: #A2B4BC;
  text-decoration: none;
  z-index: 9999;
}

#menu-toggle.toggled {
  left: 0;
  top: 0;
}

#menu-toggle.toggled:after {
  content: "\f0c9";
  font-family: FontAwesome;
  font-size: 29px;
  line-height: 51px;
  background: #A2B4BC;
  color: white;
  padding: 11px 11px;
}

#menu-toggle:after {
  content: "\f00d";
  font-family: FontAwesome;
}

#menu-toggled {
  display: none;
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  color: #A2B4BC;
  text-decoration: none;
}

#menu-toggled:after {
  content: "\f0c9";
  font-family: FontAwesome;
  font-size: 25px;
  line-height: 50px;
  background: #A2B4BC;
  color: white;
  padding: 13px 13px;
}

/* SIDEBAR */
#sidebar-wrapper {
  width: 250px;
  background: #002890;
  height: 100vh;
  padding-top: 20px;
  z-index: 99;
  position: fixed;
}

#sidebar-wrapper.toggled {
  width: 0;
  display: none;
}

.ofs-logo {
  width: 150px;
  margin: -10px 0 10px 20px;
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav i.fa {
  margin-right: 10px;
}

.sidebar-nav li a {
  text-indent: 20px;
  line-height: 40px;
  display: block;
  text-decoration: none;
  color: #999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: white;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a.active {
  border-left: 5px solid #19AA8D;
  background: #232325;
  color: white;
}

/* TOPBAR */
.navbar {
  z-index: 66;
  background: white;
  margin-bottom: 0;
}

.appLogout {
  float: right;
  display: block;
  background: #d1a7a7;
}

.appLogout:hover {
  background: #d48c8c;
}

.appLogout li {
  width: 50px;
  height: 50px;
}

.appLogout a {
  color: white !important;
  font-size: 20px;
}

.topbar-button {
  background: none;
  border: none;
}

/* TUTORIAL */
#tutorial {
  position: absolute;
  top: 90px;
  right: 60px;
  z-index: 39;
}

/* CONTENT */
#page-content-wrapper {
  padding: 38px 0 0;
  margin-bottom: 16px;
  width: 100%;
  z-index: 0;
}

#page-content-wrapper .full-width-in-page-content-wrapper {
  border-right: 0;
  border-left: 0;
  margin-right: -15px;
  margin-left: -15px;
}

#page-content-wrapper .full-width-in-page-content-wrapper .padding-container {
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  #page-content-wrapper {
    padding: 38px 9px 0 274px;
    margin-bottom: 24px;
  }

  #page-content-wrapper.toggled {
    padding: 38px 0 0;
  }

  #page-content-wrapper:not(.toggled) .full-width-in-page-content-wrapper {
    margin-right: -24px;
    margin-left: -24px;
  }

  #page-content-wrapper:not(.toggled) .full-width-in-page-content-wrapper .padding-container {
    padding-right: 24px;
    padding-left: 24px;
  }
}

/* FOOTER*/
/* FREEZE */
#notificationBar {
  background: #19AA8D;
  position: fixed;
  top: 86%;
  min-height: 14%;
  right: 0;
  left: 0;
  padding: 20px 20px 20px 15%;
  z-index: 9999;
}

.notificationIcon {
  font-size: 50px;
}

#notificationOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .95;
  background: #19AA8D;
  z-index: 7777;
}

#notificationOverlayContent {
  position: absolute;
  height: 600px;
  width: 800px;
  left: 50%;
  top: 50%;
  margin-top: -300px;
  margin-left: -400px;
  z-index: 9999;
  font-size: 25px;
}

/* RATING STARS */
.rating {
  border: none;
  float: left;
}

.rating > input {
  display: none;
}

.rating > label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > label {
  color: #ddd;
  float: right;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #FFD700;
}

/* hover previous stars in list */
.rating > label {
  cursor: pointer;
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #FFED85;
}

ul.listRecipe {
  list-style-type: none;
}

ul.listRecipe li:before {
  content: "\f054";
  font-family: FontAwesome;
  color: #999;
}

/* JOB STAR */
.fa-star {
  color: #FFB500;
}

.badge {
  margin-right: 5px;
}

.badge-pilot {
  background: #FB4 !important;
  color: white !important;
}

.badge-internal {
  background: #14a9d4 !important;
  color: white !important;
}

.badge-alpha {
  background: #F80 !important;
  color: white !important;
}

.badge-beta {
  background: #A40 !important;
  color: white !important;
}

/* Full-size badges in the Post-Run Actions table (Bootstrap defaults to 75%) */
.container-table-post-run-actions .badge {
  font-size: 100%;
}

/* Keep the Type/Status badge colours fixed on row hover. Without this the row hover
   background bleeds through the badge and it becomes unreadable (e.g. the grey
   "Disabled" badge disappears against the hovered row). */
.container-table-post-run-actions tbody tr:hover .badge-success {
  background-color: #28a745 !important;
  color: #ffffff !important;
}
.container-table-post-run-actions tbody tr:hover .badge-secondary {
  background-color: #6c757d !important;
  color: #ffffff !important;
}
.container-table-post-run-actions tbody tr:hover .badge-light {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

/* Shrink columns so the table fits the page width without horizontal scroll.
   The shared JobTable CSS forces a 240-320px min/max width per cell, which is
   far wider than this table needs now that the Type columns are gone. */
.container-table-post-run-actions {
  overflow-x: hidden;
}
.container-table-post-run-actions .table-base > thead > tr > th,
.container-table-post-run-actions .table-base > tbody td {
  min-width: 0;
  max-width: none;
}

/* Inline-action column: just wide enough for the three-dots button. */
.container-table-post-run-actions .three-dots-col,
.container-table-post-run-actions .three-dots-dropdown {
  width: 32px;
  padding-left: 4px;
  padding-right: 4px;
}

/* On row hover the shared JobTable CSS shrinks the id-cell link to calc(100% - 80px) to make
   room for inline-action icons that slide in. This table has no such icons, so the reservation
   only clips the link text on hover. Keep the full width so the text stays fully visible. */
.container-table-post-run-actions tbody tr:hover .id-cell > div > div {
  max-width: 100%;
}

/* Match the inline-action icon look-and-feel used elsewhere in the platform. */
.container-table-post-run-actions .prab-toggle .fa {
  width: 16px;
  height: 16px;
  filter: invert(30%);
}

/* STEPWIZARD */

.stepwizard {
  display: flex;
}

.stepwizard-step {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.stepwizard .btn-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.stepwizard-step p {
  margin-top: 10px;
  text-align: center;
}

.stepwizard-step:not(:last-of-type):after {
  content: '';
  height: 1px;
  left: calc(50% + 15px);
  background: black;
  position: absolute;
  top: 15px;
  width: 100%;
}

[id^='step-']:not(#step-1) {
  display: none;
}

.help-block {
  padding-left: 10px;
}

a.moreInfo {
  text-decoration: none;
}

a.moreInfo:before {
  content: "\f0da";
  font-family: FontAwesome;
  position: relative;
  left: -5px;
}

a.moreInfo[aria-expanded="true"]:before {
  content: "\f0d7";
  font-family: FontAwesome;
  position: relative;
  left: -5px;
}

.toolWidget {
  border: 1px solid #B3B3B3;
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}

.toolWidget:hover {
  box-shadow: 0px 3px 7px 0px #a8a8a8;
}

.toolWidget-content > a:hover {
  text-decoration: none;
}

.toolWidget-exec {
  height: 130px;
}

.toolWidget-logo {
  height: 80px;
  width: 80px;
  background: white;
  border-radius: 80px;
  top: 20%;
  left: 50%;
  margin-left: -40px;
  color: rgba(90, 90, 90, 0.5);
  position: relative;
}

.toolWidget:hover .toolWidget-logo {
  color: #5a5a5a;
}

.toolWidget-logo > .fa {
  font-size: 35px;
  margin: 22px 0 0 25px;
}

.toolWidget-details {
  background: white;
  padding: 20px;
  position: relative;
  min-height: 225px;
}

.toolWidget-warning {
  position: relative;
  top: -75px;
  text-align: center;
  background: rgba(25, 170, 141, 0.8);
  color: white;
  padding: 8px;
  box-shadow: 0px 3px 7px 0px #a8a8a8;
}

.recipeContainer {
  max-width: 1470px;
}

.recipeCategory {
  margin-bottom: 40px;
}

img[alt^="(recipe)"] {
  width: 100% !important;
  height: auto !important;
  border: 1px solid black;
}

.recipeGoals ul {
  margin: 0 !important;
  padding: 0;
}

.recipeGoals li {
  list-style-type: none;
  border-bottom: 1px solid #D8D8D8;
  padding-bottom: 15px;
  margin: 15px 0;
}

.recipeNotes {
  padding: 15px;
  border: 1px solid #97c1da;
  border-radius: 3px;
  background-color: #d8ebf8;
  font-style: italic;
  margin-top: 35px;
}

/* TABLES */
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 0;
}

/* PAGINATE */
.paginate_button:hover {
  background: none !important;
  border: none !important;
}

/* USER GUIDE */
.userGuideEntry {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.userGuideEntry:before {
  content: ">";
  margin-right: 5px;
}

#recipeNotes {
  padding: 15px;
  border: 1px solid #97c1da;
  border-radius: 3px;
  background-color: #d8ebf8;
  font-style: italic;
  margin-top: 35px;
}

img[alt^="(recipe)"] {
  width: 100% !important;
  height: auto !important;
  border: 1px solid black;
}

#recipeGoals ul {
  margin: 0 !important;
  padding: 0;
}

#recipeGoals li {
  list-style-type: none;
  border-bottom: 1px solid #D8D8D8;
  padding-bottom: 15px;
  margin: 15px 0;
}


/* Fix to prevent systematic horizontal scrolling in tables */
div.table-responsive > div.dataTables_wrapper > div.row {
  margin:0
}

div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
  padding-left:0
}

div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
  padding-right:0
}

div.table-responsive table td > div > a {
  font-weight: 600;
}

/* FIX DBD */
#org-input {
  z-index: 2;
}

.dbd-package--table.table thead th {
  color: white;
}

table.table.data-breach-table .cell .cell--title,
table.table.data-breach-table .cell .cell--value {
  font-size: 14px;
  line-height: 20px;
}

table.table.data-breach-table tr.header td a .cell {
  font-size: 14px;
}

.box-title-and-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.box-title-and-buttons > div {
  display: flex;
}

.box-title-and-buttons .btn {
  margin-left: 12px;
  height: 32px;
}

.pseudo-link {
   color: #1853EB;
   cursor: pointer;
 }

.pseudo-link:hover,
.pseudo-link:focus,
.pseudo-link:active {
  text-decoration: underline;
}

.pseudo-link > i {
  margin-right: 4px;
}

.color-grey {
  color: #919B9F;
}

.font-weight-semibold {
  font-weight: 600;
}

#loader {
  position: fixed;
  top: 45%;
  left: 50%;
}

.cursor-pointer {
  cursor: pointer;
}

.inline-beta {
  display: flex;
  align-items: center;
}

.inline-beta > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.inline-beta .badge {
  height: 16px;
}