/* MBOKA_POCKET_PASSWORD_GUIDE_STYLE_K25 */

.mp-pw-wrapper {
  display:block;
  width:100%;
  position:relative;
  flex:1;
  min-width:0;
}

.mp-pw-wrapper input {
  width:100% !important;
  padding-right:88px !important;
}

.mp-pw-eye {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#247e79;
  font-size:12px;
  font-weight:650;
  cursor:pointer;
  padding:7px 5px;
}

.mp-pw-guide {
  margin-top:10px;
  width:100%;
  font-family:inherit;
}

.mp-pw-guide [hidden] {
  display:none !important;
}

.mp-pw-meter {
  height:5px;
  background:#e5eaf0;
  border-radius:100px;
  overflow:hidden;
  margin-bottom:9px;
}

.mp-pw-fill {
  height:100%;
  width:0;
  border-radius:inherit;
  background:#d85b5b;
  transition:width .2s ease;
}

.mp-pw-meter[data-level="3"] .mp-pw-fill {
  background:#d69b32;
}

.mp-pw-meter[data-level="4"] .mp-pw-fill {
  background:#169579;
}

.mp-pw-feedback {
  font-size:12px;
  font-weight:700;
  color:#526579;
}

.mp-pw-feedback[data-valid="true"] {
  color:#16836d;
}

.mp-pw-rules {
  display:grid;
  gap:7px;
  list-style:none;
  padding:0;
  margin:12px 0;
}

.mp-pw-rules li {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#718096;
}

.mp-pw-rules li span {
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  border:1px solid #cbd5df;
  border-radius:50%;
  flex-shrink:0;
}

.mp-pw-rules li[data-valid="true"] {
  color:#16836d;
}

.mp-pw-rules li[data-valid="true"] span {
  border-color:#16836d;
}

.mp-pw-help {
  font-size:11px;
  line-height:1.5;
  margin-top:7px;
  color:#64748b;
}