.od-password-visibility {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
    position: relative;
    width: 100%;
}

.od-password-visibility > input[type="password"][data-kb-password-visibility-ready="1"],
.od-password-visibility > input[type="text"][data-kb-password-visibility-ready="1"] {
    box-sizing: border-box;
    grid-area: 1 / 1;
    min-width: 0;
    padding-inline-end: 48px;
    width: 100%;
}

.od-password-visibility > .od-password-visibility__toggle,
.od-phone-account__form .od-password-visibility__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    box-sizing: border-box;
    color: #52625a;
    cursor: pointer;
    display: inline-flex;
    font-size: 0;
    height: 38px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    max-width: 40px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    z-index: 2;
}

.od-password-visibility > .od-password-visibility__toggle:hover,
.od-phone-account__form .od-password-visibility__toggle:hover {
    background: rgba(32, 122, 69, .09);
    color: #155c33;
}

.od-password-visibility > .od-password-visibility__toggle:focus-visible {
    box-shadow: 0 0 0 2px #207a45;
    outline: 0;
}

.od-password-visibility > .od-password-visibility__toggle svg {
    fill: none;
    height: 21px;
    pointer-events: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 21px;
}

.od-phone-history {
    background: #fff;
    border: 1px solid #d7dfda;
    border-radius: 12px;
    padding: clamp(18px, 3vw, 28px);
}

.od-phone-history__current {
    background: #f2f7f4;
    border-radius: 8px;
    margin: 0 0 18px;
    padding: 12px 14px;
}

.od-phone-history__status {
    color: #5a675f;
    display: block;
    font-size: .92rem;
    margin-top: 4px;
}

.od-phone-history__list {
    border-top: 1px solid #e3e9e5;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.od-phone-history__item {
    border-bottom: 1px solid #e3e9e5;
    display: grid;
    gap: 4px;
    padding: 14px 0;
}

.od-phone-history__date,
.od-phone-history__source {
    color: #66736b;
    font-size: .9rem;
}

/*
 * WPUF používa pre neznáme vlastné sekcie všeobecnú ikonu dokumentu.
 * Pre sekciu histórie ju nahradíme telefónom bez závislosti od aktuálne
 * zvolenej knižnice ikon v OceanWP.
 */
.wpuf-account-nav a.wpuf-account-nav-item[href*="section=phone-history"] > svg {
    display: none;
}

.wpuf-account-nav a.wpuf-account-nav-item[href*="section=phone-history"]::before {
    background-color: currentColor;
    content: "";
    display: inline-block;
    flex: 0 0 24px;
    height: 24px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.79%2019.79%200%200%201%202.12%204.18%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.79%2019.79%200%200%201%202.12%204.18%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    width: 24px;
}

@media (max-width: 620px) {
    .od-phone-account__form .od-password-visibility__toggle {
        width: 40px;
    }
}