/**
 * Password strength indicator
 */
.passwordFormElement input {
    width : 100%;
}

#pwdstrength {
    position      : relative;
    width         : 100%;
    height        : 5px;
    margin-top    : 5px;
    margin-bottom : 20px;
    border-radius : 3px;
    background: linear-gradient(to right, #6eb732 0%, #a1e34e 25%, #cbfe63 50%, #edfd69 65%, #ff0200 100%); /* W3C */
}

#pwdcontainer {
    right      : 0;
    top        : 0;
    font-size  : 1px;
    height     : 5px;
    position   : absolute;
    width      : 100%;
    transition : width 0.3s ease-out 0s;
    background : #e5e5e3;
}

#pwdtext {
    position    : absolute;
    left        : 0;
    top         : 10px;
    font-size   : 14px;
    width       : 100%;
    height      : 16px;
    padding     : 2px 0;
    line-height : 18px;
    text-align  : right;
}

#pwdtext span {
    font-weight : bold;
}

/**
 * Tabs
 */
.tabbar {
    border-bottom   : 1px solid var(--line-color);
    margin-bottom   : 3rem;
    display         : grid;
    grid-auto-flow  : column;
    justify-content : left;
    grid-column-gap : 2rem;
}


.tabbar a {
    font-weight      : 500;
    text-transform   : uppercase;
    padding          : 1rem 2rem;
    color            : var(--body-text-color);
    display          : grid;
    grid-auto-rows   : 1fr 1fr;
    grid-row-gap     : 0.5rem;
    justify-items    : center;
    border-bottom    : 5px solid transparent;
    background-image : none;
    transition       : color .2s ease;
    margin-bottom    : -1px;
    position         : relative;
}


.tabbar a:hover {
    color : var(--blue-color);
}

.tabbar a.selected {
    color               : var(--blue-color);
    border-bottom-color : var(--blue-color);
}

.tabbar a.selected::after {
    display   : block;
    content   : '\25E2';
    position  : absolute;
    top       : 100%;
    left      : 50%;
    transform : translate(-50%, -60%) rotate(45deg);
    width     : 10px;
    height    : 10px;
    color     : var(--blue-color);
}

/**
 * iPhone-style slider for a two-state switcher
 */
.switcher {
    float         : right;
    position      : relative;
    width         : 60px;
    height        : 20px;
    border-radius : 10px;
    border        : 1px solid #999;
    background    : linear-gradient(to bottom, #ccc 0%, #eee 40%, #eee 100%);
    box-shadow    : 1px 1px 1px #999 inset;
    margin-bottom : 10px;
    cursor        : pointer;
}

.switcher div {
    position      : absolute;
    left          : 1px;
    top           : 1px;
    width         : 16px;
    height        : 16px;
    border-radius : 8px;
    border        : 1px solid #999;
    box-shadow    : 1px 1px 0 #999;
    background    : linear-gradient(to bottom, #a8d1f7 0%, #cfe6fc 50%, #99c1e8 51%, #6296c9 100%);
    transition    : left 0.3s linear 0s;
}

.switcher .switcherRight {
    left : 41px;
}

.checkbox {
    --size         : 14px;
    display        : inline-block;
    width          : var(--size);
    height         : var(--size);
    position       : relative;
    vertical-align : middle;
}


.checkbox input {
    appearance : none;
    box-sizing : border-box;
}

.checkbox input::before {
    border-radius : calc(var(--size) * 0.2);
    border        : 1px solid var(--blue-color);
    text-align    : center;
    position      : absolute;
    top           : 50%;
    left          : 0;
    display       : grid;
    align-items   : center;
    align-content : center;
    content       : '';
    color         : var(--light-text-color);
    transform     : translateY(-50%);
    background    : var(--light-text-color);
    height        : var(--size);
    width         : var(--size);
    font-size     : calc(var(--size) * 0.7);
    box-sizing    : border-box;
}

.checkbox input:checked::before {
    background : var(--blue-color);
    border     : 1px solid var(--blue-color);
    content    : "\2714";
    animation  : growFont 0.3s ease;
    box-sizing : border-box;
}

.checkbox.partialChecked input::before {
    content : "";
}

.checkbox.partialChecked input::after {
    content    : '';
    display    : block;
    height     : 2px;
    width      : calc(var(--size) * 0.6);
    position   : absolute;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    z-index    : 2;
    background : var(--light-text-color);
}

@keyframes growFont {
    0% {
        font-size : 0;
    }
    100% {
        font-size : calc(var(--size) * 0.7);
    }
}