/*
*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
*  Copyright © 2021 casanaut GmbH
*  Do not use this software or replicate without permission of the owner.
*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
*/

/* Inner Styles */

/* ///////////////////// */

/* -------------- */
/* SETUP */
/* DESKTOP */
/* TABLET */
/* MOBILE */
/* MINI-MOBILE */
/* SPECIAL BREAKPOINTS */
/* -------------- */

/* DESKTOP //////////////////////////////////////////////////////////////// */
/*
01. Inner Content
*/

/*
-----------------------------------------------------------------------------

01. Inner Content

-----------------------------------------------------------------------------
*/

/* LOGO HEAD *******************************************************************************/

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
header svg.logo {
  width: 200px;
  display: block;
  margin: 50px auto;
}

/* GENERAL FORM STYLES *******************************************************************************/

form {
  margin: 40px auto;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  max-width: 500px;
}
#wrap.pushed form {
  max-width: 720px;
}
#wrap.pushed form.form-passwordpush {
  pointer-events: none;
  display: none;
}

input[type="text"],
input[type="password"] {
  font-family:"Courier";
  font-weight: 400;
  width: calc(100% - 93px);
  padding: 12px 12px 12px;
  font-size: 26px;
  border-width: 2px;
  border-color: #FF344A;
  border-style: solid;
  border-radius: 10px 0 0 10px;
  background-color: #f7f7f7;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-appearance: none;/* older firefox */
  -webkit-appearance: none; /* safari, chrome, edge and ie mobile */
  appearance: none; /* rest */
}
input[type="text"] {
  width: calc(100% - 42px);
}
form.copied input[type="text"],
form.copied input[type="password"] {
  border-color: #FF344A;
  color: #FF344A;
}

.form-submit {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  color: #fff;
  background: #FF344A;
  border: 0;
  width: auto;
  padding: 15px 25px 15px 25px;
  cursor: pointer;
}
form.copied .form-submit {
  background-color: #FF344A;
}

.error-msg {
  margin-top: -30px;
}

/**** safety notice */
.safety {
  margin: 60px 20px 40px;
}

/* prevention notice */
.prevention {
  margin: 60px 20px 40px;
}

/**** reload page */
.reload {
  margin: 40px 20px;
}


/* Push *******************************************************************************/

.wrap div.pushed,
.wrap.pushed h1,
.wrap.pushed .intro-text,
.wrap.pushed .description-text {
  display: none;
}

.wrap.pushed div.pushed {
  display: block;
  margin-top: 40px;
}

/**** url copy */

div.pushed input[type="text"],
div.pushed input[type="password"] {
  padding: 8px 12px;
  padding-right: 12px;
  border: 0;
  font-size: 18px;
  background: #E8F5E4;
  color: #050505;
}

div.pushed input[type="text"] {
  color: #FF344A;
  background: #ff344a2e;
}


div.pushed .copy {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  font-size: 20px;
  padding: 5px 12px;
  color: #fff;
  cursor: pointer;
}

/* Get *******************************************************************************/

.wrap div.get {
  display: none;
}
.wrap div.request {
  display: block;
  margin: 40px 0 80px;
  min-width: 260px;
}

.wrap.requested div.get {
  display: block;
}
.wrap.requested div.request {
  display: none;
}

/**** Request */
.wrap div.request .button .dashicons-key {
  font-size: 25px;
  position: relative;
  padding-right: 10px;
  top: 4px;
}

/**** Get */
.copy-password {
  text-align: right;
  padding-right: 47px;
}

.copy-password .dashicons-clipboard-text,
.copy-password .dashicons-clipboard-check {
  font-size: 22px;
  position: absolute;
  right: 15px;
  top: 18px;
}

/* PW Tipps *******************************************************************************/

.tipp-wrap hr {
  opacity: 0.4;
}

.tipp-wrap ul {
  list-style: none;
  position: relative;
  padding-left: 35px;
}

.tipp-wrap li::before {
  content: '✔️';
  position: absolute;
  left: 0;
}

.tipp-wrap img.logo {
  width: 180px;
  margin: 30px 0;
}


/* Expired link content / 404 *******************************************************************************/

.expired-image img {
  margin: 40px auto 80px;
  display: block;
  height: 140px;
}

.error-404 {
  text-align: center;
}

.error404 h1 {
  margin: 0px 0 30px 0;
}

.error-404 p a:hover {
  cursor: pointer;
  border-bottom: 1px solid #585758;
  color: #585758;
}


/* TABLET //////////////////////////////////////////////////////////////// */
/*
01. Inner Content
*/

@media only screen and (max-width: 880px) {

  /*
  -----------------------------------------------------------------------------

  01. Inner Content

  -----------------------------------------------------------------------------
  */


}


/* MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Inner Content
*/

@media only screen and (max-width: 580px) {

  /*
  -----------------------------------------------------------------------------

  01. Inner Content

  -----------------------------------------------------------------------------
  */

  /* LOGO HEAD *******************************************************************************/

  header svg.logo {
    width: 180px;
    margin: 30px auto;
  }

  /* GENERAL FORM STYLES *******************************************************************************/

  input[type="password"] {
    width: calc(100% - 87px);
  }

  input[type="text"] {
    width: calc(100% - 41px);
  }

  /* Get *******************************************************************************/

  /**** Get */

  .copy-password {
    padding-right: 28px;
    font-size: 0px;
  }

}

/* MINI-MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Inner Content
*/

@media only screen and (max-width: 430px) {

  /*
  -----------------------------------------------------------------------------

  04. Inner Content

  -----------------------------------------------------------------------------
  */

}


/* SPECIAL BREAKPOINTS //////////////////////////////////////////////////////// */