/*----------------------------------------------------------------------------*\
	# Mixins
\*----------------------------------------------------------------------------*/
/*
 * Media queries gebasseerd op de volgende pagina: 
 *  http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 */
/*----------------------------------------------------------------------------*\
	# Variablen
\*----------------------------------------------------------------------------*/
/*
 *
 * Hier zitten alle waardes in die in de hele style sheet veranderd kan worden.
 * Als je een eigen kleur wilt hebben dan moet je een kopie maken van de
 * manager_style.scss en daar de waardes overschrijven.
 *
 */
/*----------------------------------------------------------------------------*\
	# Kleuren
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Base
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Misc
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Form
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Button
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Busy spinner
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Tables
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Normal/default table
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Condensed/small table
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Paginanummering
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Tabs
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Boomstructuur
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Language Selector
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Calendar
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Popup window
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Messagebox
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Manager variablen
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Manager Header
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Manager container
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
	# Manager Misc
\*----------------------------------------------------------------------------*/
.login-body {
  background-color: #333333; }
  .login-body header {
    min-height: 50px;
    background-color: #fff;
    border-top: 4px solid #00BFBF; }

.login-header-logo {
  margin: 8px;
  max-height: 50px; }
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .login-header-logo {
      max-width: 100%; } }

.login-box {
  position: absolute;
  top: 73px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 400px;
  max-height: 260px;
  padding: 20px;
  color: #fff;
  border: 1px solid #00BFBF;
  border-radius: 8px;
  background-color: #00BFBF; }
  .login-box a {
    color: #333333; }
  .login-box h1 {
    color: #fff; }
  .login-box > ul.login-language-select {
    float: right;
    margin: 0px;
    padding: 0px;
    overflow: auto; }
    .login-box > ul.login-language-select li {
      float: left;
      display: block;
      margin: 0px;
      padding: 4px; }
      .login-box > ul.login-language-select li > a {
        color: #fff; }
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .login-box {
      position: static;
      margin: 32px 4px 4px 4px;
      width: auto;
      overflow: auto;
      max-height: none; } }
	  
	  
.login-box-intermix {
  max-height: 350px;
}

.login-field {
  overflow: show;
  height: 74px;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .login-field label {
    display: block; }
  .login-field input {
    padding-left: 36px !important;
    /* Forceer een padding */
    background-repeat: no-repeat;
    background-position: 4px center; }
  .login-field input, .login-field select {
    display: block;
    min-width: 350px;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      .login-field input, .login-field select {
        min-width: 0; } }

.login-field-username {
  background-image: url(/manager/back/gfx/icon_username.png); }

.login-field-password {
  background-image: url(/manager/back/gfx/icon_password.png); }

.login-forgot-password {
  margin: 4px 0;
  float: left; }

.login-buttons {
  float: right;
  overflow: show;
  margin-top: 8px; }

.login-not-supported-box {
  margin: 8px auto;
  max-width: 850px; }
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .login-not-supported-box {
      margin: 8px; } }

.flexbox.boxshadow .login-not-supported-box {
  display: none; }

.login-box.password_expires {
  display: flex;
  flex-direction: column;
  height: fit-content;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
}

.login-box.password_expires h1 {
  margin-bottom: 15px;
}

.login-box.password_expires .password_expires_buttons {
  text-align: right;
  margin-top: 15px;

}