﻿form {
    position: relative;
    width: 100%;
    padding: 1.5em;
}
form .svgContainer {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 32px auto 32px;
    border-radius: 50%;
    pointer-events: none;
}
form .svgContainer div {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    border-radius: 50%;
    padding-bottom: 100%;
}
form .svgContainer .mySVG {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
form .svgContainer:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: inherit;
    height: inherit;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 1px #D0D0D0;
    border-radius: 50%;
}
#showPasswordToggle {
    display: block;
    padding: 0 0 0 1.45em;
    position: absolute;
    top: 50%;
    right: 1em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: .90em;
    color: #095fa3;
    font-weight: 700;
    line-height: 13px;
}
#showPasswordToggle input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

#showPasswordToggle .indicator {
    position: absolute;
    top: -.125em;
    left: -.25em;
    height: 1.5em;
    width: 1.5em;
    background-color: #FFF;
    border-radius: 3px;
    border: solid 1px #095fa3;
    visibility: hidden;
}

#showPasswordToggle .indicator:after {
    content: "";
    position: absolute;
    left: .45em;
    top: .115em;
    width: .25em;
    height: .55em;
    border: solid #095fa3;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    visibility: hidden;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

#showPasswordToggle input:checked ~ .indicator:after {
    visibility: hidden;
}
#showPasswordToggle input:focus ~ .indicator, form .inputGroup2 #showPasswordToggle input:hover ~ .indicator {
    border-color: #095fa3;
}
#showPasswordToggle input:disabled ~ .indicator {
    opacity: .5;
}
#showPasswordToggle input:disabled ~ .indicator:after {
    visibility: hidden;
}

.clearFix {
    overflow: auto;
}

.clear {
    clear: both;
}

.login-page .qts-form .field-input {
    height: 52px;
}

.login-page .qts-form .field-label {
    line-height: 28px;
}

.login-page .qts-form .has-label .field-label {
    top: 4px;
}

.login-page .qts-form .form-field {
    height: 52px;
}


.top-logo-pd {
    padding-bottom: 50px;
}

@media screen and (max-width:1024px) {

    .top-logo-pd {
        padding-bottom: 30px;
    }
}

@media screen and (max-width:767px) {
    .top-logo-pd {
        padding-bottom: 20px;
    }
}
/* Change the white to any color */
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus,
.login-page input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
