/*/ Container /*/
.strength-container {
    margin-bottom: 25px;
		width: auto;
    height: auto;
    padding: 10px 25px;
    background: #0a0e31;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35),
        0 8px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Montserrat', sans-serif;
    color: #a6a8b6;
}

/*/ Title /*/
.strength-container h2.title {
    text-align: center;
    font-size: 1.75rem;
    margin: 10px -5px;
    margin-bottom: 30px;
    color: #fff;
}

/*/ Result Container /*/
.strength-data-container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 60px;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas: 'Strength Crack-Time';
}
.Strength {
    grid-area: Strength;
    width: 100%;
}
.Crack-Time {
    grid-area: Crack-Time;
    width: 100%;
}

.strength,
.cracktime {
    padding: 10px;
    text-transform: capitalize;
}
.subtitle {
    color: #fff;
    font-weight: 500;
    margin-bottom: 3px;
}
[data-power='5'] {
    color: #a7a7a7;
}
[data-power='0'],
[data-power='1'] {
    color: #dc3545;
}
[data-power='2'] {
    color: #ffc107;
}
[data-power='3'] {
    color: #17a2b8;
}
[data-power='4'] {
    color: #175ddc;
}

/*/ Password Input /*/
.password {
    position: relative;
    width: 100%;
    height: max(65px, auto);
    display: flex;
    margin-bottom: 8px;
}
.result__info {
    position: absolute;
    bottom: 4px;
    color: #fff;
    font-size: 0.8rem;
    transition: all 150ms ease-in-out;
    transform: translatey(200%);
    opacity: 0;
}
.strength__viewbox {
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    text-align: start;
    line-height: 1.6;
    word-wrap: break-word;
    padding: 15px 15px;
    border: 2px solid transparent;
    border-color: #777777;
    outline: none;
}
.strength__viewbox:hover,
.strength__viewbox:focus {
    border-color: #4062f6;
}

/*/ Button /*/
.btn.calculate {
    user-select: none;
    position: relative;
    width: 100%;
    min-width: 200px;
    height: 50px;
    margin: 10px 0;
    border-radius: 8px;
    color: #fff;
    border: none;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-weight: bold;
    text-transform: capitalize;
    cursor: pointer;
    transition: all 150ms ease;
    padding: 0 10px;
}
.btn.calculate:active {
    transform: translatey(-3%);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08);
}