/*------------------------------------------------------------------
PAGETYPES.LESS

Different pagetypes to use in the content. Made for consistency 
between products.

- Blank
    - Summary
    - Sidebar
- Default
    - Summary
    - Sidebar
        - Navigation
        - Filters
- Search -> TODO
- Tabcontrol
    - Summary
- Login
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
CONFIG.LESS

Contains variables for rules which are applied more than once.
Variables which are only needed in one file are kept in that file.
Almost every .less file imports this file and mixins.less

Uses a few lessCSS color funtions.
More info: http://lesscss.org/
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
MIXINS.LESS

Contains frequently used rules and helpers for prefixing.
Mixins which are only needed in one file are kept in that file.
Almost every .less file imports this file and config.less

More info: http://lesscss.org/
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
CONFIG.LESS

Contains variables for rules which are applied more than once.
Variables which are only needed in one file are kept in that file.
Almost every .less file imports this file and mixins.less

Uses a few lessCSS color funtions.
More info: http://lesscss.org/
-------------------------------------------------------------------*/
.pagetype-blank,
.pagetype-default,
.pagetype-search,
.pagetype-tabcontrol,
.pagetype-login {
  position: relative;
  z-index: 1;
  margin: 15px;
  *zoom: 1;
}
.pagetype-blank:before,
.pagetype-default:before,
.pagetype-search:before,
.pagetype-tabcontrol:before,
.pagetype-login:before,
.pagetype-blank:after,
.pagetype-default:after,
.pagetype-search:after,
.pagetype-tabcontrol:after,
.pagetype-login:after {
  display: table;
  content: "";
}
.pagetype-blank:after,
.pagetype-default:after,
.pagetype-search:after,
.pagetype-tabcontrol:after,
.pagetype-login:after {
  clear: both;
}
/* Summary on top of the page for pagetypes: Blank, Default, Filter and Tabcontrol */

.summary {
  position: relative;
  padding: 15px;
  margin-bottom: 15px;
  background: white;
}
.summary.stick {
  width: calc(100% - 60px);
  border-bottom: solid 1px #d8d8d8;
  margin-bottom: 0;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}
/* Keep the element in view when scrolling down the page */

.keep-in-view {
  -ms-zoom: 1;
  zoom: 1;
  /* For intellisense */

}
.keep-in-view.stick {
  position: fixed;
}
/* Wrapper around the content and sidebar for fake equal height */

.content-wrapper {
  position: relative;
  *zoom: 1;
  z-index: -1;
  /* Sidebar which is used in pagetypes: Blank & Default */

  /* Main part of the page */

  /* For two column layout with a bit more padding between the sidebar and content */

}
.content-wrapper:before,
.content-wrapper:after {
  display: table;
  content: "";
}
.content-wrapper:after {
  clear: both;
}
.content-wrapper .sidebar {
  position: static;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  float: left;
  width: 199px;
  padding: 0;
  /* Create the illusion of two equal height columns */

  /* Navigatie */

}
.content-wrapper .sidebar:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  z-index: -1;
  content: '';
  background: #f7f7f7;
  width: 199px;
  border-right: "1px" solid #d8d8d8;
}
.content-wrapper .sidebar #nav-trigger {
  content: "";
  display: block;
  visibility: hidden;
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  padding: 5px 0 5px 5px;
  margin-left: 200px;
}
.content-wrapper .sidebar #nav-trigger-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #6f6f6f;
}
.content-wrapper .sidebar #nav-trigger-icon:hover {
  border-right-color: #555555;
  border-left-color: #555555 !important;
}
.content-wrapper .sidebar ul.nav {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
  list-style: none;
  padding: 0;
  margin: 0;
  *zoom: 1;
  width: 199px;
}
.content-wrapper .sidebar ul.nav:before,
.content-wrapper .sidebar ul.nav:after {
  display: table;
  content: "";
}
.content-wrapper .sidebar ul.nav:after {
  clear: both;
}
.content-wrapper .sidebar ul.nav li {
  border-bottom: 1px solid #eaeaea;
}
.content-wrapper .sidebar ul.nav li > a {
  display: block;
  padding: 5px 10px;
  color: #333333;
  text-decoration: none;
  border-left: 5px solid transparent;
}
.content-wrapper .sidebar ul.nav li > a:hover {
  background: #eaeaea;
}
.content-wrapper .sidebar ul.nav li.active {
  margin: -1px 0 0 0;
  border-bottom-color: #d8d8d8;
  border-top: 1px solid #d8d8d8;
}
.content-wrapper .sidebar ul.nav li.active > a {
  font-family: 'Segoe UI Semibold', 'Segoe UI', 'Lucida Grande', Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #555555;
  border-left-color: #555555;
  background: white;
}
.content-wrapper .sidebar ul.nav li.active > a:hover {
  background: white !important;
}
.content-wrapper .sidebar ul.nav .badge {
  background: none;
  color: #6f6f6f;
  float: right;
  margin-top: 3px;
  font-size: 0.7em;
}
.content-wrapper .sidebar .sidebar-content {
  margin: 10px 5px 10px 5px;
}
.content-wrapper .content {
  padding: 15px;
}
.content-wrapper .sidebar + .content {
  margin-left: 200px;
  padding-left: 22.5px;
  -moz-transition: margin 0.2s ease;
  -o-transition: margin 0.2s ease;
  -webkit-transition: margin 0.2s ease;
  transition: margin 0.2s ease;
}
.content-wrapper .content.hidebar {
  margin-left: 7px;
}
.content-wrapper .sidebar.hide {
  width: 20px;
}
.content-wrapper .sidebar.hide #nav-trigger {
  padding: 5px 5px 5px 3px;
  margin-left: 0;
}
.content-wrapper .sidebar.hide #nav-trigger-icon {
  border-right: 0;
  border-left: 6px solid #6f6f6f;
}
.content-wrapper .sidebar.hide:before {
  width: 19px;
}
.content-wrapper .sidebar.hide > *:not(#nav-trigger):not(.keep-in-view-anchor) {
  display: none;
}
/* Filter fields */

.filters .field,
.filters .filter-panel {
  border-bottom: 1px solid #eaeaea;
  width: calc(100% -  20px);
  float: left;
  margin: 5px 0 5px 0;
  padding: 5px 10px 10px 5px;
  border-left: 5px solid transparent;
  -webkit-transition: background-color 1s, border-left 1s;
  transition: background-color 1s, border-left 1s;
}
.filters .field.active,
.filters .filter-panel.active {
  border-left: 5px solid #009beb;
  background-color: white;
  -webkit-transition: background-color 1s, border-left 1s;
  transition: background-color 1s, border-left 1s;
  border-bottom: none;
  margin-bottom: 6px;
}
.filters .field.active .field-validation-error,
.filters .filter-panel.active .field-validation-error {
  display: none;
}
.filters .field .field-validation-error,
.filters .filter-panel .field-validation-error {
  color: #d49418;
}
.filters .field.filter-panel-error,
.filters .filter-panel.filter-panel-error {
  border-left: 5px solid #d49418;
  background-color: #fffae5;
}
.filters .field:last-child,
.filters .filter-panel:last-child {
  border-bottom: none;
}
.filters .field .label,
.filters .filter-panel .label {
  float: none;
  font-family: 'Segoe UI Semibold', 'Segoe UI', 'Lucida Grande', Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #3d3d3d;
  margin-bottom: 2px;
}
.filters .field > i,
.filters .filter-panel > i {
  position: relative;
  float: right;
  margin: 5px -3px 0 5px;
  cursor: pointer;
  color: #c3c3c3;
}
.filters .field > i:hover,
.filters .filter-panel > i:hover {
  color: #004452;
}
.filters .field .input .more,
.filters .filter-panel .input .more {
  -ms-zoom: 1;
  zoom: 1;
}
.filters .field .input .more-link,
.filters .filter-panel .input .more-link,
.filters .field .input .less-link,
.filters .filter-panel .input .less-link {
  display: inline-block;
  padding: 2px 5px 2px 0;
}
.filters .field .input .description,
.filters .filter-panel .input .description {
  margin: 0 0 5px 0;
  font-style: italic;
}
.filters .field .input .datepicker,
.filters .filter-panel .input .datepicker {
  width: 72px;
}
.filters .field .input .ui-datepicker-trigger,
.filters .filter-panel .input .ui-datepicker-trigger {
  display: none;
}
.filters .field .input .ui-slider,
.filters .filter-panel .input .ui-slider {
  margin-top: 10px;
}
/* Blank page without background with an optional summary & sidebar */

.pagetype-blank .sidebar {
  padding-top: 1px;
}
.pagetype-blank .sidebar:before {
  border: solid 1px #d8d8d8;
}
.pagetype-blank .content {
  padding: 0;
}
.pagetype-blank .content > .pnl:last-child {
  margin-bottom: 0;
}
.pagetype-blank .sidebar + .content {
  padding: 0 0 0 7.5px;
}
/* Full width page with an optional summary & sidebar */

.pagetype-default .content-wrapper {
  background: white;
}
.pagetype-default .content-wrapper .sidebar ul.nav li.active {
  margin-right: -1px;
}
.pagetype-default .sidebar:before {
  border-right: solid 1px #d8d8d8;
}
/* Tabcontrol with an optional summary */

.pagetype-tabcontrol {
  border: none;
}
.pagetype-tabcontrol > .summary {
  border-bottom: none;
  border-color: #d8d8d8;
  margin-bottom: 0;
}
.pagetype-tabcontrol > .tabcontrol {
  border-color: #d8d8d8;
  z-index: -1;
}
.pagetype-tabcontrol > .tabcontrol > .ui-tabs-nav {
  background: #e0e0e0;
}
.pagetype-tabcontrol > .tabcontrol > .ui-tabs-nav li.ui-tabs-active {
  border-left-color: #d8d8d8;
  border-right-color: #d8d8d8;
}
.pagetype-tabcontrol > .tabcontrol > .ui-widget-content {
  padding: 15px;
}
.pagetype-tabcontrol > .summary + .tabcontrol > .ui-tabs-nav {
  background: white;
  padding-left: 15px;
}
.pagetype-login .content-wrapper {
  background: white;
  max-width: 600px;
  margin: auto;
}
@media (max-width: 1024px) {
  .content-wrapper .sidebar > a#nav-trigger {
    visibility: visible;
  }
}
body > nav {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  padding-top: 40px;
  background-color: #009beb;
  z-index: 4;
  width: 70px;
}
body > nav a {
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
  margin: 0 0 1px 0;
  position: relative;
  height: 55px;
}
body > nav a:link,
body > nav a:hover,
body > nav a:focus,
body > nav a:visited {
  color: white;
}
body > nav a.active .menu-icon {
  background-color: #007dbc;
}
body > nav a:hover .menu-icon,
body > nav a:focus .menu-icon {
  background-color: #007dbc;
}
body > nav a:hover .menu-text,
body > nav a:focus .menu-text {
  transform: translate(99%, 0);
}
body > nav a .menu-icon {
  z-index: 50;
  display: block;
  background-color: #009beb;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  font-size: 32px;
  transition: background-color 0.2s;
  padding-top: 6px;
}
body > nav a .menu-icon i {
  font-size: 30px;
}
body > nav a .menu-text {
  z-index: 5;
  display: block;
  background-color: #007dbc;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 17px 1em;
  transform: translate(0, 0);
  transition: transform 0.3s ease-in;
  font-size: 17px;
  white-space: nowrap;
}
body > nav ~ header.page-header {
  z-index: 3;
  margin-left: 70px;
}
body > nav ~ div.page-breadcrumb {
  z-index: 2;
  margin-left: 70px;
}
body > nav ~ main.page-content-wrapper {
  z-index: 1;
  margin-left: 70px;
}
body > nav ~ main.page-content-wrapper .summary.stick {
  width: calc(100% - 130px);
}
body > nav ~ footer.page-footer {
  z-index: 1;
  margin-left: 70px;
}