@charset "utf-8";

@font-face {
  font-family: Wells Fargo Sans Semibold;
  src: url(WellsFargoSans_A_SBd.ttf) format("truetype");
}
@font-face {
  font-family: Wells Fargo Sans Regular;
  src: url(WellsFargoSans_A_Rg.ttf) format("truetype");
}


*,body,html{
  font-family: "Wells Fargo Sans Regular" !important;
}
#brand img {
  padding-left: 50px !important;
}

.ping-container {
  width: 80% !important;
  margin: auto !important;
  padding: 0 !important;
  max-width: none !important;
}

.ping-header {
  box-shadow: none !important;
  margin: 0 !important;
  max-width: none !important;
  justify-self: left !important;
  padding: 0 50px 0 50px !important;
  font-size: 2rem !important;
}

.ping-body-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  max-width: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}

.ping-left-container {
  width: 30% !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  border: 1px solid #ccc !important;
  border-radius: 5px;
  max-width: 230px !important;
}

.ping-right-container {
  width: 70% !important;
  padding: 20px 50px !important;
  box-sizing: border-box !important;
  max-width: none !important;
  text-align: left !important;
  justify-items: left !important;
}

.ping-right-container h4 {
  margin-bottom: 10px !important;
}

.ping-right-container hr {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  border-top: 1px solid #ccc !important;
  opacity: 0.7 !important;
  align-self: flex-start !important;
}

.ping-right-container,
.ping-right-container h2,
.ping-right-container h4,
.ping-right-container li {
  color: black !important;
}

.ping-right-container ul {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding-left: 0 !important;
}

.ping-right-container ul li {
  position: relative !important;
  margin-left: 0 !important;
  padding-left: 20px !important;
  line-height: 1.2 !important;
  margin-bottom: 5px !important;
  text-align: left !important;
  display: flex !important;
  align-items: flex-start !important;
  font-size: 14px !important;
}

.ping-right-container ul li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.4em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: black;
}

.ping-right-container a {
  text-decoration: underline !important;
  color: darkblue;
}

.ping-disclaimer-label {
  margin: 0 50px 50px 50px !important;
  font-size: .76470588rem;
  line-height: 1;
}

.sign-on-title {
  color: black;
  width: 100%;
  font-size: 1.5rem;
  text-align: left;
  margin-bottom: 10px !important;
}

.ping-custom-button {
  background-color: #d71e28 !important;
  color: white !important;
  outline: #d71e28 !important;
  font-weight: 600 !important;
  padding: 0 60px !important;
  font-size: 1rem;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.ping-custom-button:hover {
  background-color: #b01c24 !important;
  color: white;
  outline: #b01c24 !important;
}

.ping-custom-button:focus {
  background-color: #b01c24 !important;
  color: white !important;
  outline: 3px solid #d71e28 !important;
  box-shadow: 0 0 0 2px white !important;
  cursor: pointer !important;
}

.ping-input-container {
  position: relative !important;
  margin-bottom: 12px !important;
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
  padding: 8px 8px !important;
  background-color: white !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ping-input-container input {
  width: 100% !important;
  height: 30px !important;
  padding: 10px 0 8px 0 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  z-index: 1 !important;
}

.ping-input-container:focus-within {
  border: 2px solid rgb(100, 53, 131) !important;
  border-bottom: 4px solid rgb(93, 53, 131)  !important;
  border-radius: 4px !important;
  background-color: #f5f5f5 !important;
}

.ping-input-container:focus-within input {
  background-color: transparent !important;
}
.ping-custom-input-label {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: all 0.2s ease-out !important;
  pointer-events: none !important;
/*  color: #666 !important; */
  z-index: 0 !important;
  font-size: 18px !important;

}

.ping-input-container input:focus ~ .ping-custom-input-label,
.ping-input-container input:not(:placeholder-shown) ~ .ping-custom-input-label {
  top: 8px !important;
  left: 12px !important;
  transform: translateY(0) !important;
  font-size: 11px !important;
  color: #000 !important;
}

.password-container {
  position: relative !important;
}

input[type="text"],
input[type="password"],
textarea,
input[type="tel"],
input[type="email"],
input[type="date"] {
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ping-buttons {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

@media screen and (max-width: 768px) {
  .ping-container {
    width: 95% !important;
    display: block  !important;
  }

  .ping-header {
    padding: 20px 20px 0 20px !important;
    font-size: 1.5rem !important;
  }

  .ping-body-container {
    flex-direction: column !important;
    align-items: center !important;
  }

  .ping-left-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  .ping-right-container {
    width: 100% !important;
    padding: 20px !important;
  }

  .ping-disclaimer-label {
    margin: 20px !important;
  }
}

/* For even smaller screens */
@media screen and (max-width: 480px) {
  .ping-header {
    font-size: 1.2rem !important;
  }

  .ping-container {
    width: 100% !important;
    display: block  !important;

  }

  .ping-left-container,
  .ping-right-container {
    padding: 15px !important;
  }

  .ping-custom-button {
    padding: 0 15px !important;
  }

  .sign-on-title {
    font-size: 1.2rem;
  }

  .ping-disclaimer-label {
    margin: 10px !important;
    font-size: 0.9rem !important;
  }
}

/* Fix for alternative authentication sources display on mobile */
@media screen and (max-width: 768px) {
  .columns-2 {
    display: block !important;
  }

  .content-column.column-1,
  .content-column.column-2 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .columns-separator {
    display: none !important;
  }

  .alt-auth-source-column {
    padding-top: 20px !important;
    margin-top: 20px !important;
    border-top: 1px solid #ccc !important;
  }
}

/* Ensure form elements are properly sized on mobile */
@media screen and (max-width: 480px) {
  .ping-input-container {
    margin-bottom: 15px !important;
  }

  .ping-input-container input {
    height: 30px !important;
  }

  .ping-buttons {
    margin-top: 20px !important;
  }
}

/* Additional fixes for button and text alignment */
@media screen and (max-width: 768px) {
  #wfLogoStripParent {
    text-align: center;
  }

  #brand img {
    padding-left: 0 !important;
  }

  .ping-buttons {
    display: flex !important;
    justify-content: center !important;
    margin: 5px 0 !important;
  }

  .ping-right-container h2,
  .ping-right-container h4 {
    text-align: center !important;
  }

  .ping-right-container ul {
    margin: 15px auto !important;
    max-width: 300px !important;
  }
}

/* ERROR BOX */

.ping-custom-messages{
  padding:20px 50px 0px 50px;
}
/* Error message styling */
.ping-custom-error-box {
  width: 100%;
  border: 2px solid #d71e28;
  border-radius: 4px;
  background-color: #fff;
  margin-bottom: 24px;
  padding: 15px;
  box-sizing: border-box;
}

.ping-custom-error-header {
  color: #000000;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.ping-custom-error-content {
  color: #333;
  font-size: 0.95rem;
  line-height: 1.4;
}

.ping-custom-error-content ul {
  margin: 10px 0 10px 20px !important;
  padding-left: 0 !important;
}

.ping-custom-error-content li {
  margin-bottom: 5px;
  position: relative;
  padding-left: 15px;
  list-style-type: none;
}

.ping-custom-error-content li:before {
  content: ".";
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 0.5;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {
  .ping-custom-error-box {
    margin-bottom: 15px;
    padding: 12px;
  }

  .ping-custom-error-header {
    font-size: 1rem;
  }

  .ping-custom-error-content {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 480px) {
  .ping-custom-error-box {
    padding: 10px;
  }
}

.ping-custom-error-content li {
  margin-bottom: 5px !important;
  position: relative !important;
  padding-left: 20px !important;
  list-style-type: none !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.4 !important;
}

.ping-custom-error-content li:before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: black !important;
}

.custom-bold{
  font-weight: 700 !important;
}

.ping-right-container p,
.ping-right-container h2,
.ping-right-container h4 {
  text-align: left !important;
}

@media screen and (max-width: 768px) {
  .ping-right-container h2,
  .ping-right-container h4,
  .ping-right-container p {
    text-align: left !important;
  }
}

.ping-right-container ul li ul li::before {
  width: 5px;
  height: 5px;
  background-color: black;
}
 
.nested-list-container ul li {
  display: block !important;
}

p {
    margin: 1em 0 1em 0 !important;
	font-size: 0.8rem !important;
 }