/* DEFAULTS */
html, body {
    background-color: #F5F6F7;
    background-image: none;
}
body {
	color: #54585A;
	font-family: OpenSans-Regular, Helvetica, Arial, sans-serif;
	font-size: 14px;
}

/* Hyperlinks */
a,
a:visited {
    color: #1C6394;
    size: 13px;
}
.ping-error a,
.ping-error a:visited {
    color: #333333;
    text-decoration: underline;
}

/* HEADER (h2) */
.ping-header {
    background-color: #1C6394;
    box-shadow: 0px 0px 8px -3px;
}
.ping-header h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 100;
    /* center the text vertically */
    margin-top: -30px;
    padding-bottom: 15px;
}
@media (max-width: 900px), (max-device-width: 900px) {
    .ping-header h2 {
        /* center the text vertically */
        padding-bottom: 0;
    }
}

.ping-container{
    max-width: 480px;
	margin: 0 auto;
}

.body-container {
	max-width: 480px;
	margin: 0 auto;
	box-shadow: 0px 0px 8px -3px #404040;
}

.ping-body-container {
    max-width: 100%;

    /* get rid of the space between the header and the login form */
    margin-bottom: 0;
    margin-top: -10px;
    padding-bottom: 25px;
    box-shadow: 0px 0px 8px -3px;
}

#ping-loggingout {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:40%;
}
#logging-out-container {
    max-width: 480px;
    margin: 0 auto;
}
#logging-out-container #ping-header {
    padding-top: 25px;
    text-align: center;
    color: #001829;
}
#logging-out-container #mainMessage {
    text-align: center;
}

/* Primary Button (Login) */
.ping-button.normal {
    width: 100%;
    background-color:#1C6394;
}
.ping-button:hover {
	background-color: #207098
}
.ping-second-button.normal {
	width: 100%;
	background-color: #E7E8EA;
	color: #1C6394;
}
.ping-second-button:hover {
	background-color: #cfcfcf;
}

.ping-secondary-button.normal {
    width: 100%;
    border: 1px solid #adb1b3;
    background-color: white;
    color: #2996cc;
}

.ping-secondary-button:hover {
	background-color: #cfcfcf;
}


/* Input Fields */
input[type=text],
input[type=text]:hover,
input[type=email],
input[type=email]:hover,
input[type=password],
input[type=password]:hover,
input[type=email],
input[type=email]:hover,
input[type=tel],
input[type=tel]:hover {
    background-color: unset;
    border: 0;
    border-bottom: 1px solid #858B97;
    min-height: 48px;
	align-content: flex-start;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus{
    /* background-color: unset;
    border: 1px solid #298FC2;
    border-bottom: 1px solid #858B97;
    box-shadow: 0px 0px 4px -1px #298FC2; */
    border: 1px solid#CED1D5;
    padding-left: 15px;
    box-shadow: 0px 0px 4px -1px #298FC2;
}

.required::before {
    /* disable the default styling */
    background-color: unset;
    width: 0;
}
.required input.required {
    background-color: #FFFFA1;
}

/* password pages */
.password-requirements {
    border-top: 0;
}
.password-requirements .requirements-message {
    display: inline-block;
    padding-top: 5px;
    transition: none;
}
.password-requirements ul li {
    list-style: disc;
}

/* moving icons to inside of textboxes */
#username,
#username-icon,
#password,
#password-icon,
#password-toggle,
#email,
#tel {
    display: inline;
}

#username-icon,
#password-icon {
    margin-top: 13px;
    margin-right: -35px;
    padding-top: 5px;
}

#username,
#password
{
    width: 100%;
    padding-top: 7px;
    margin-bottom: 0;
    position: relative;
    z-index: 9998;
}

#email,
#tel {
    width: 100%;
    padding-top: 7px;
    margin-bottom: 0;
    position: relative;
}

#password-toggle {
    cursor: pointer;
    float: right;
    margin-left: -15px;
    margin-top: -28px;
    padding-right: 8px;
    z-index: 9999;
    position: relative;
    margin-left: -15px
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
}

/* Secondary Buttons (Create Account, Update Account) */
.secondary-buttons-container {
    background-color: #E7E8EA;
    border: 0;
    display: table;
    overflow: hidden;
    padding: 0;
    width: 100%;
}
.secondary-buttons-container > div {
    background-color: #E7E8EA;
    border: 1px solid #CED1D5;
    color: #1C6394;
    display: table-cell;
    font-size: 12pt;
    text-align: center;
}

/* Footer */
body .ping-signin .ping-footer-container .ping-footer .ping-credits,
body .ping-password .ping-footer-container .ping-footer .ping-credits {
    visibility: visible;
    background-image: url(/pa/assets/images/powered-by-ipipeline.png);
    max-width: 150px;
    height: 20px;
}
.ping-credits {
    visibility: visible;
    background-image: url(/pa/assets/images/powered-by-ipipeline.png);
    max-width: 150px;
    height: 20px;
}
/* Icons */
body .fa {
    color: #CCC;
    max-height: 21px;
}

.ping-input-link a {
    text-decoration: underline;
} 

.ping-input-link.ping-pass-change.account-actions {
    padding: 0;
}
.account-actions a {
    text-decoration: underline;
} 
.account-actions > div {
    padding: 0px;
}
a.help-link {
    text-decoration: underline;
}
.help-section {
	width: 100%;
	text-align: center;
}

/* Error Message */
.ping-messages {
    margin-bottom: 15px;
}
.ping-messages > div.ping-error {
    background-color: #FCD7D5;
    color: #333;
    line-height: 1.5em;
    padding: 5px;
}
.ping-messages-error {
    background-color: #FCD7D5;
    color: #333;
    line-height: 1.5em;
    padding: 5px;
    word-wrap: break-word;
    margin: 0;
    margin-bottom:25px;
}

.ping-messages-warning {
    background-color: #fcf8e3;
    margin-bottom: 15px;
}

/* spacing on the change password error message */
.ping-messages > div li:first-child {
    margin: 15px 0 0 0;
}
.ping-messages > div li:last-child {
    margin: 0 0 15px 0;
}

.ping-loader {
	border: 16px solid #3498db;
	border-radius: 50%;
	border-top: 16px solid #f3f3f3;
	width: 60px;
	height: 60px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}
.ping-error-messages {
	margin-top: 25px;	
	margin-bottom: 15px;
	align-content: flex-start;
	overflow-wrap: break-word;
	text-align: left;
	font-size: 14px;	
	color: #54585A;
}

.ping-messages-bold {
    font-weight: bold;
}

.ping-input-label {
    text-transform: none;
}

.ping-buttons-container{
    margin: 20px 0 0 0;
    width: 100%;
}

.ping-buttons {
    display: block;
}

.required:before {
    content: unset;
}
.required.error:before {
    content: unset;
}

.ping-input-container.required > input{
    background-color: #ffffa1;
}

.change-password-registration {
    text-align: left;
}

.inline-message.notice:before, .inline-message.warning:before {
    content: unset;
}

.inline-message.notice{
    padding: 15px;
}

label .change-password-registration-div,
.ping-input-label .tooltip-text.type-requirements.place-top,
.ping-input-container .change-password-registration-div {
    margin: 0;
    float: none;
    position: relative;
    visibility: visible;
    font-size: 14px;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    text-transform: none;
    white-space: normal;
    font-weight: normal;
    color: #2996cc;
    padding: 15px 0 0;
    display: block;
    border: none;
    background-color: transparent;
    border-top: 1px solid #c2c6ca;
    padding-top: 0;
    word-break: normal;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}
label .change-password-registration-div.no-border,
.ping-input-label .tooltip-text.type-requirements.place-top.no-border,
.ping-input-container .change-password-registration-div.no-border {
  border-top: none;
}
label .change-password-registration-div.open .title:before,
.ping-input-label .tooltip-text.type-requirements.place-top.open .title:before,
.ping-input-container .change-password-registration-div.open .title:before {
    display: inline-block;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
label .change-password-registration-div .title,
.ping-input-label .tooltip-text.type-requirements.place-top .title,
.ping-input-container .change-password-registration-div .title {
    color: #2996cc;
    font-weight: normal;
    padding: 10px 0;
}
label .change-password-registration-div .title:before,
.ping-input-label .tooltip-text.type-requirements.place-top .title:before,
.ping-input-container .change-password-registration-div .title:before {
    display: inline-block;
    position: inherit;
    content: 'v';
    padding: 0;
    font-family: "iconfont";
    font-size: 12px;
    text-transform: none;
    pointer-events: none;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
label .change-password-registration-div.open .change-password-content,
.ping-input-label .tooltip-text.type-requirements.place-top.open .change-password-content,
.ping-input-container .change-password-registration-div.open .change-password-content {
    display: block;
}
label .change-password-registration-div .change-password-content,
.ping-input-label .tooltip-text.type-requirements.place-top .change-password-content,
.ping-input-container .change-password-registration-div .change-password-content {
    display: none;
}
.change-password-requirements{
    color: #929aa1;
    font-size: 12px;
    margin-top: 0px;
    margin-left: 0px;
    visibility: visible;
    filter: alpha(opacity=90);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    opacity: 0.9;
    padding-bottom: 15px;
    text-align: left;
}
.change-password-requirements > div{
    padding: 3px 0;
}

input[required].new-password:valid {
    background-color: #ffffff;
}
input[required].new-password:invalid {
    background-color: #ffffa0;
}
input[required].verify-password:valid {
    background-color: #ffffff;
}
input[required].verify-password:invalid {
    background-color: #ffffa0;
}
input[required].recovery-input:valid {
    background-color: #ffffff;
}
input[required].recovery-input:invalid {
    background-color: #ffffa0;
}
input[required].update-account-field:valid {
    background-color: #ffffff;
}
input[required].update-account-field:invalid {
    background-color: #ffffa0;
}

/* Safari */
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.copyright {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #475152;
}
.ping-copyright {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #475152;
}
#currentYear {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #475152;
}
a[href="https://www.ipipeline.com/terms-of-service/"]{
    color: #17516D;
}