@import "fonts/roihu.scss";

// override bootstrap default variables
$font-family-base: roihu;
$font-size-root: 16px;
$headings-font-weight: 600;
$font-size-h1: 2.25rem;
$font-size-h2: 1.5rem;
$font-size-h3: 1.25rem;
$font-size-h4: 1.1rem;
$font-size-h5: 1.1rem;

$body-bg: #f3f3f3;
$body-color: #01335f;

$brand-primary: #3aa5e1;
$navbar-dark-color:                 rgba(0,77,144,.5);
$navbar-dark-hover-color:           rgba(0,77,144,.75);
$navbar-dark-active-color:          rgba(0,77,144,1);
$navbar-dark-disabled-color:        rgba(0,77,144,.25);
$navbar-light-color:                rgba(0,77,144,.5);
$navbar-light-hover-color:          rgba(0,77,144,.75);
$navbar-light-active-color:         rgba(0,77,144,1);
$navbar-light-disabled-color:       rgba(0,77,144,.25);
$nav-tabs-link-active-bg:           #fff;
$navbar-light-color:                #004d90;
$modal-backdrop-opacity:            .5;

body {
  font-family: $font-family-base, sans-serif;
}

.navbar {
  background-image: linear-gradient(90deg,#f4f7fa,#e5edf2);

  .navbar-brand {
    background-image: url(~q42-cms-components/images/nedwin-logo.png);
  }
}

// Production label
.environment-production:after {
  content: 'Productie';
  display: inline-block;
  background-color: firebrick;
  padding: 50px 40px 10px 40px;
  color: white;
  margin-left: 10px;
  position: fixed;
  top: -20px;
  right: -60px;
  transform: rotate(45deg);
  z-index: 1001; // put on top of .navbar-full
}