/*
---

name: Password Widget

description: Styles for Inform 2.0 Password Widget

provides: [CSS.PasswordWidget]

...
*/
fieldset .passwordStrength {
  right: 8px;
}
fieldset fieldset .passwordStrength {
  right: 0;
}
fieldset fieldset legend.passwordGroup, fieldset fieldset legend.emailGroup {
  float: left;
  position: relative;
  overflow: hidden;
}
fieldset fieldset .group.passwordGroup label, fieldset fieldset .group.emailGroup label {
  float: left;
  padding: 0;
  width: 31.81818%;
  margin-right: 2.27273%;
  text-align: right;
  text-align: left;
}
fieldset fieldset .group.passwordGroup .note, fieldset fieldset .group.emailGroup .note {
  float: left;
}
fieldset fieldset .group.passwordGroup .showPassword, fieldset fieldset .group.emailGroup .showPassword {
  float: right;
  width: auto;
  margin-right: 0;
}
fieldset fieldset .group.passwordGroup .showPassword label, fieldset fieldset .group.emailGroup .showPassword label {
  width: auto;
  margin-right: 0;
  float: none;
}
fieldset fieldset .group.passwordGroup .field, fieldset fieldset .group.emailGroup .field {
  position: relative;
}
fieldset fieldset .group.passwordGroup .field.checkbox, fieldset fieldset .group.emailGroup .field.checkbox {
  padding-bottom: 0;
}

.passwordGroup .pass {
  position: relative;
}
.passwordGroup .tip span strong {
  display: inline;
  padding: 0;
}

.informInline .passwordGroup.group input.text, .informInline .emailGroup.group input.text {
  width: 65.90909%;
}

.passwordField {
  position: relative;
}

.passwordStrength {
  background-color: #FFF;
  border: 1px solid #8A8A8A;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  display: none;
  padding: 10px 14px;
  position: absolute;
  right: 0px;
  width: 180px;
  bottom: -32px;
  z-index: 1;
}
.passwordStrength:after, .passwordStrength:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #8A8A8A;
  height: 0;
  width: 0;
  top: -10px;
  left: 50%;
  background: transparent;
  content: '';
  position: absolute;
}
.passwordStrength:after {
  border-top: 2px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 11px solid #FFF;
}
.passwordStrength p {
  display: block;
  font-size: 1.1em;
  line-height: 1.455;
  padding: 0;
}
.passwordStrength p:after {
  clear: both;
  content: "";
  display: table;
}
.passwordStrength p span {
  float: left;
}
.passwordStrength p strong {
  float: right;
}
.passwordStrength .indicator {
  background-color: #DDD;
  display: block;
  height: 6px;
  background-image: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAGAQMAAAAbqfXiAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///////9VfPVsAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAFnRFWHRDcmVhdGlvbiBUaW1lADEyLzE4LzE0o0oC0AAAABtJREFUCJljYGBgsAPiGiD+wcDA+IEBAmgtBgCW5w/TzftCSgAAAABJRU5ErkJggg==);
}
.passwordStrength .indicator div {
  height: 6px;
  background-image: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAGAQMAAAAbqfXiAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///////9VfPVsAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAFnRFWHRDcmVhdGlvbiBUaW1lADEyLzE4LzE0o0oC0AAAABtJREFUCJljYGBgsAPiGiD+wcDA+IEBAmgtBgCW5w/TzftCSgAAAABJRU5ErkJggg==);
}