.Enzoic {
    border: 1px solid #c6c6c6;
    box-sizing: border-box;
    color: #090809;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    position: relative;
}

.Enzoic-input {
    border: none;
    box-sizing: border-box;
    font-size: 18px;
    padding: 14px 0 12px 14px;
    width: calc(85% - 28px);
}

.Enzoic-input:not(:focus).is-password-invalid {
    color: #D1462F;
}

.Enzoic-input:focus {
    outline: none;
}

.Enzoic-strength-desc {
    color: transparent;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    text-align: right;
    transition: color 250ms ease-in-out;
    max-width: 130px;
    padding: 1px 4px !important;
    margin: 0 6px 0 0;
    display: inline;
    background: transparent;
    font: bold normal normal 11px/20px Helvetica Neue, Helvetica, "MS Sans Serif" !important;
    border-radius: 10px !important;
    cursor: pointer;
}

.Enzoic-strength-desc img {
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.Enzoic.is-strength-0 .Enzoic-strength-desc {
    color: #FFFFFF;
    background-color: #ff0000;
}

.Enzoic.is-strength-1 .Enzoic-strength-desc {
    color: #FFFFFF;
    background-color: #ff0000;
}

.Enzoic.is-strength-2 .Enzoic-strength-desc {
    color: #FFFFFF;
    background-color: #ff0000;
}

.Enzoic.is-strength-3 .Enzoic-strength-desc {
    color: #FFFFFF;
    background-color: #57B8FF;
}

.Enzoic.is-strength-4 .Enzoic-strength-desc {
    color: #FFFFFF;
    background-color: #2FBF71;
}

.Enzoic.is-strength-5 .Enzoic-strength-desc {
    color: #FFFFFF;
    background-color: #2FBF71;
}

.Enzoic.loading .Enzoic-strength-desc {
    color: #FFFFFF;
    background-color: transparent;
}

.Enzoic-strength-bar {
    box-sizing: border-box;
    height: 2px;
    position: relative;
    top: 1px;
    right: 1px;
    transition: width 300ms ease-out;
    width: 0;
}

.Enzoic.is-strength-0 .Enzoic-strength-bar {
    background: #ff0000;
    width: 20%;
}

.Enzoic.is-strength-1 .Enzoic-strength-bar {
    background: #D1462F;
    width: 20%;
}

.Enzoic.is-strength-2 .Enzoic-strength-bar {
    background: #D1462F;
    width: 40%;
}

.Enzoic.is-strength-3 .Enzoic-strength-bar {
    background: #57B8FF;
    width: 60%;
}

.Enzoic.is-strength-4 .Enzoic-strength-bar {
    background: #2FBF71;
    width: 80%;
}

.Enzoic.is-strength-5 .Enzoic-strength-bar {
    background: #2FBF71;
    width: calc(100% + 2px);
}

.Enzoic-spinner {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background-color: #333;

    border-radius: 100%;
    -webkit-animation: Enzoic-sk-scaleout 1.0s infinite ease-in-out;
    animation: Enzoic-sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes Enzoic-sk-scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes Enzoic-sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 100% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
          opacity: 0;
      }
}

.Enzoic-tooltip-root {
    padding: 0;
    visibility: hidden;
    transition: visibility 0.3s ease-out, opacity 0.3s ease-out;
    min-width: 260px;
}

.Enzoic-tooltip-root.show {
    visibility: visible;
    transition: opacity 0.3s ease-out;
}

.Enzoic-tooltip {

}

.Enzoic-tooltip-title {
    padding: 10px;
    font-weight: bold;
}

.Enzoic-tooltip-subtitle {
    font-weight: bold;
    padding-top: 14px;
}

.Enzoic-tooltip-body {
    padding: 10px;
}

.Enzoic-tooltip.is-strength-0 .Enzoic-tooltip-title {
    color: #FFFFFF;
    background-color: #ff0000;
}

.Enzoic-tooltip.is-strength-1 .Enzoic-tooltip-title {
    color: #FFFFFF;
    background-color: #ff0000;
}

.Enzoic-tooltip.is-strength-2 .Enzoic-tooltip-title {
    color: #FFFFFF;
    background-color: #ff0000;
}

.Enzoic-tooltip.is-strength-3 .Enzoic-tooltip-title {
    color: #FFFFFF;
    background-color: #57B8FF !important;
}

.Enzoic-tooltip.is-strength-4 .Enzoic-tooltip-title {
    color: #FFFFFF;
    background-color: #2FBF71;
}

.Enzoic-tooltip.is-strength-5 .Enzoic-tooltip-title {
    color: #FFFFFF;
    background-color: #2FBF71;
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}