/* =========================================================
   QUICK LOGIN OVERLAY — PROSILVER STYLE
   ========================================================= */

/* OVERLAY */
#quick-login-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 49;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}


/* =========================================================
   LOGIN PANEL
   ========================================================= */

#quick-login-panel {
  box-sizing: border-box;
  display: none;
  position: fixed;
  margin: 0 auto;
  padding: 0;
  width: 420px;
  max-width: calc(100% - 30px);
  top: 25%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #ecf1f5;
  border: 1px solid #c5cdd3;
  border-radius: 6px;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   PANEL HIGHLIGHT
   ========================================================= */

#quick-login-panel:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0)
  );

  pointer-events: none;
  z-index: 0;
}


/* =========================================================
   HEADER
   ========================================================= */

#quick-login-panel .ql-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 8px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to bottom,#5b7895 0%,#3f5f7b 100%);
  border-bottom: 1px solid #2f475d;
  position: relative;
  z-index: 1;
}


/* =========================================================
   TITLE
   ========================================================= */

#quick-login-panel .ql-header h3 {
  margin: 0;
  padding: 0;
  text-align: left;
  color: #ffffff;
  font-weight: bold;
  font-size: 1em;
  letter-spacing: 0;
}

#quick-login-panel .ql-header h3 a {
  color: #ffffff;
  text-decoration: none;
}

#quick-login-panel .ql-header h3 a:hover {
  color: #ffffff;
  text-decoration: underline;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#quick-login-panel .ql-header .close {
  position: static;
  display: block;
  width: 12px;
  height: 12px;
  background: transparent url("./images/close.png") no-repeat;
  opacity: 0.9;
  filter:
    brightness(0)
    saturate(100%)
    invert(22%)
    sepia(91%)
    saturate(5040%)
    hue-rotate(345deg)
    brightness(89%)
    contrast(91%)
    drop-shadow(0 0 1px #000000);
  flex-shrink: 0;
}

#quick-login-panel .ql-header .close:hover {
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(22%)
    sepia(91%)
    saturate(5040%)
    hue-rotate(345deg)
    brightness(100%)
    contrast(100%)
    drop-shadow(0 0 1px #000000);
}


/* =========================================================
   CONTENT
   ========================================================= */

#quick-login-panel .content {
  overflow: inherit;
  padding: 14px 18px 16px;
  position: relative;
  z-index: 1;
  color: #333333;
}


/* =========================================================
   HORIZONTAL RULE
   ========================================================= */

#quick-login-panel hr {
  margin: 10px 0;
  border: 0;
  height: 1px;
  background: #c9d2da;
}


/* =========================================================
   OPTIONS
   ========================================================= */

#quick-login-panel .ql-options {
  margin: 5px auto 10px;
}

#quick-login-panel .ql-options span {
  vertical-align: middle;
}

#quick-login-panel .ql-options label {
  color: #333333;
}

#quick-login-panel .ql-oauth {
  font-weight: bold;
  margin: 0;
  text-align: center;
  color: #3f5870;
}


/* =========================================================
   INPUTS
   ========================================================= */

#quick-login-panel input[type="text"],
#quick-login-panel input[type="password"] {
  background: #ffffff;
  border: 1px solid #b7c1ca;
  border-radius: 3px;
  padding: 6px 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: #333333;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

#quick-login-panel input[type="text"]::placeholder,
#quick-login-panel input[type="password"]::placeholder {
  color: #999999;
}

#quick-login-panel input[type="text"]:hover,
#quick-login-panel input[type="password"]:hover {
  border-color: #8f9ba5;
}

#quick-login-panel input[type="text"]:focus,
#quick-login-panel input[type="password"]:focus {
  border-color: #5b9bd5;

  box-shadow:
    0 0 0 1px rgba(91, 155, 213, 0.25),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);

  outline: none;
}


/* =========================================================
   LABELS
   ========================================================= */

#quick-login-panel dt label {
  color: #333333;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

#quick-login-panel input[type="submit"] {
  display: inline-block;
  padding: 5px 10px;
  height: auto;
  line-height: 1.2;
  background: linear-gradient(to bottom,#ffffff 0%,#e5e9ec 100%);
  border: 1px solid #aeb7bf;
  border-radius: 3px;
  color: #333333;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

#quick-login-panel input[type="submit"]:hover {
  background: linear-gradient(to bottom,#ffffff 0%,#d8dee3 100%);
  border-color: #8d99a3;
}

#quick-login-panel input[type="submit"]:active {
  background: #d8dde1;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

#quick-login-panel input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.35);
}


/* =========================================================
   LINKS
   ========================================================= */

#quick-login-panel a {
  color: #105289;
}

#quick-login-panel a:hover {
  color: #d31141;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media only screen and (max-width: 700px),
only screen and (max-device-width: 700px) {

  #quick-login-panel {
    width: 320px;
    max-width: calc(100% - 20px);
    top: 12%;
    border-radius: 5px;
  }

  #quick-login-panel:before,
  #quick-login-panel .ql-header {
    border-radius: 4px 4px 0 0;
  }

  #quick-login-panel .ql-header h3 {
    font-size: 1.05em;
  }

  #quick-login-panel .content {
    padding: 10px 14px 14px;
  }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {

  #quick-login-panel {
    width: auto;
    left: 10px;
    right: 10px;
    top: 8%;
  }

  #quick-login-panel .ql-header h3 {
    font-size: 1em;
  }

  #quick-login-panel input[type="text"],
  #quick-login-panel input[type="password"] {
    font-size: 16px;
  }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media only screen and (max-width: 360px),
only screen and (max-device-width: 360px) {

  #quick-login-panel {
    top: 5%;
    border-radius: 4px;
  }

  #quick-login-panel:before,
  #quick-login-panel .ql-header {
    border-radius: 3px 3px 0 0;
  }

  #quick-login-panel .ql-header h3 {
    font-size: 0.95em;
  }
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.phpbb-dark-mode #quick-login-bg {
  background: rgba(0, 0, 0, 0.78);
}