/*
  Lightbox specific
*/

body.has-lightbox
{
  overflow: hidden;
}

.lightbox
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  background-color: rgba( 0, 0, 0, .5 );
}

.lightbox,
.lightbox *
{
  box-sizing: border-box;
}

.lightbox .content
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
}

.lightbox .close
{
  position: absolute;
  right: 25px;
  top: 25px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  background: url(../img/popup-close.png);
  border: 0;
  cursor: pointer;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  z-index: 99;
  transition: transform .2s;
}

.lightbox .close:hover
{
  transform: scale( 1.05 ) rotate( 5deg );
}

/*
  Login & register specific
*/

.lightbox .logreg
{
  position: relative;
  width: 463px;
  margin: 0;
  padding: 10px 10px 20px 10px;
  background: url(../img/login-bg.png) no-repeat;
  text-align: left;
}

/* add the top of the bg rotated 180 deg to the bottom of the form to neatly 'end' the paper */
.lightbox .logreg:after
{
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  bottom: -7px;
  left: 0;
  background: url(../img/login-bg.png) no-repeat 0 0;
  transform: rotate( 180deg );
  width: 100%;
}

.logreg .title
{
  width: 370px;
  min-height: 94px;
  margin: 10px 0 0 20px;
  padding: 10px 0 0 120px;
  background: transparent url(../img/yoleo-head.png) 0 0 no-repeat;
  font: 22px FunktionRegular, Georgia, serif;
  color: #1f1f1f;
  text-shadow: 0 1px rgba( 255, 255, 255, .2 );
}

#content .logreg .title
{
  color: #1f1f1f;
}

.logreg .tabs
{
  position: relative;
  width: 380px;
  height: 40px;
  margin-top: -15px;
  z-index: 100;
  cursor: pointer;
  background: transparent url(../img/home/form-tabs-bg.png) top right no-repeat;
}

.logreg .register,
.logreg .forgot
{
  display: none;
}

.logreg .with-tabs.toggled .tabs
{
  background-position: right -50px;
}

.logreg .with-tabs.toggled .login
{
  display: none;
}

.logreg .with-tabs.toggled .register
{
  display: block;
}

.logreg .login .button,
.logreg .register .button
{
  width: 100%;
}

.logreg .form,
.logreg .forgot .success
{
  width: 400px;

  margin: 0 auto;
  padding: 20px 25px;

  overflow-x: hidden;
  background: #ffffff url(../img/home/forms-paper-bg.jpg);
  background-size: cover;
  border-radius: 4px;
  background-clip: padding-box;
  box-shadow: 0 3px 10px 2px rgba(0, 0, 0, .1);
}

.lightbox .logreg .form,
.lightbox .logreg .forgot .success
{
  max-height: 518px;
  overflow-y: auto;
}

.logreg .with-tabs .button
{
  font-size: 34px;
  margin-left: -3px;
}

.logreg .form.register,
.logreg .forgot .success.register
{
  display: none;
}

.logreg .school .form.login .submit input
{
  background-image: url(../img/btn-inloggen.png);
}

.logreg label,
.logreg fieldset legend
{
  color: #1e5297;
  font-family: 'Short Stack', Georgia, serif;
  display: block;
  font-size: 1.035em;
  margin: 0 0 10px 0;
}

.logreg label .help
{
  font-size: .8em;
}
.logreg .checkbox
{
  margin-top: 10px;
}

.logreg input[type="checkbox"] + label
{
  display: inline;
  margin-left: 5px;
}

.logreg input[type="checkbox"] + label,
.logreg .input.checkbox label
{
  font-family: Arial, sans-serif;
  font-size: .9em;
}

.logreg fieldset label
{
  font-family: Arial, sans-serif;
  color: black;
  font-size: 1.2em;
  cursor: pointer;
}

.logreg input
{
  margin-bottom: 10px;
}

.logreg input[type="text"],
.logreg input[type="password"],
.forgot input
{
  border-radius: 4px;
  background: #eee;
  background: rgba(200, 200, 200, .2);
  padding: 0 5px;
  border: 1px solid silver;
  height: 40px;
  line-height: 40px;
  color: black;
  font-size: 1.2em;
  width: 100%;
}

.logreg .password-link
{
  display: block;
  text-decoration: none;
  margin-top: 15px;
  color: #666;
  font-size: .9em;
  text-align: center;
}

.logreg a.als-school
{
  display: block;
  margin: 14px 20px 10px 20px;
  width: 356px;
  color: white;
  font: 15px Arial, sans;
  text-align: center;
}

#content .sidebar .logreg a.als-school
{
  color: #603914;
}

.logreg .forgot .title
{
  margin-bottom: 20px;
  padding-top: 20px;
}

.logreg .forgot .submit
{
  text-align: center;
}

#content .logreg .forgot button
{
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  width: auto;
}

#content .logreg .forgot .cancel
{
  margin-left: 1em;
  background-image: linear-gradient(#e86328 0%,#db2728 100%);
}

.logreg .forgot .message,
.logreg .forgot .error,
.logreg .forgot .success
{
  display: none;
}

.logreg .forgot[state="submit"] input,
.logreg .forgot[state="submit"] button
{
  pointer-events: none;
  opacity: .5;
}

.logreg .forgot[state="success"] .success,
.logreg .forgot[state="success"] .message,
.logreg .forgot[state="error"] .error
{
  display: block;
}

.logreg .forgot .error
{
  color: white;
  background: linear-gradient(#e86328 0%,#db2728 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  border-radius: 6px;
  padding: 6px 12px;
  text-align: center;
  border: 2px solid white;
}

.logreg .submit
{
  margin-top: 20px;
}

body.url-scholen #content .sidebar
{
  width: 400px;
}

#school-forms .form a
{
  color: black;
  font-weight: normal;
}

#school-forms .tabs
{
  background: transparent url(../img/form-tabs-bg-brown.jpg) top right no-repeat;
  z-index: 100;
}

#school-forms .toggled .tabs,
#school-forms .tabs.toggled
{
  background-position: right -58px;
}

#school-forms .form
{
  background: transparent url(../img/forms-paper-bg-brown.jpg);
  background-size: 110%;
}

#school-forms .form label,
#school-forms .form  fieldset legend
{
  color: black;
}

.logreg .message
{
  margin-bottom: 1em;
  border: 2px solid #603914;
  border-radius: 5px;
  padding: 15px;
  background: rgba( 255, 255, 255, .5 );
  color: #1f1f1f;
  box-shadow: 0 1px 4px rgba( 0, 0, 0, .1 );
}

.logreg .message h2
{
   font: 22px FunktionRegular, Georgia, serif;
   margin: 0;
   text-shadow: 0 1px rgba( 255, 255, 255, .2 );
   color: #603914;
}

.logreg .message p
{
  margin: 10px 0 0 0;
}

.logreg .message.success
{
  border-color: #387c3b
}

.logreg .message.success h2
{
  color: #387c3b
}

.logreg .message.error
{
  border-color: #d14025;
}

.logreg .message.error h2
{
  color:#d14025;
}

.lightbox .logreg form .input.checkbox::after,
.lightbox .logreg form .input .input-wrap::after
{
  right: -.95em;
}

form .error-message
{
  margin-bottom: 1em;
}

form .input.checkbox .error-message
{
  font-size: .9em;
  margin: .3em 0 .5em 0;
}