@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
#application-loading-overlay {
  backdrop-filter: blur(8px);
  z-index: 9999;
  background: #0f172afa;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  transition: opacity .6s, visibility .6s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

#application-loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

#application-loading-spinner {
  border: 6px solid #1e293b;
  border-top-color: #60a5fa;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: 1s linear infinite spin;
  box-shadow: 0 0 30px #60a5fa66;
}

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

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

#application-loading-overlay p {
  color: #60a5fa;
  letter-spacing: .5px;
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: 600;
}

#application-div *, #application-div :before, #application-div :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#application-div {
  color: #e2e8f0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 20px;
  margin-bottom: 3rem;
  padding: 2.5rem;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  position: relative;
  box-shadow: 0 25px 50px #00000080;
}

#application-div .applicant-form {
  flex-direction: row;
  gap: 2rem;
  display: flex;
}

#application-div #status-bar {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  flex-shrink: 0;
  align-self: flex-start;
  width: 220px;
  padding: 1.5rem;
  transition: all .3s;
  position: sticky;
  top: 150px;
  box-shadow: 0 10px 20px #0006;
}

#application-div .apply-form {
  flex-grow: 1;
}

#application-div .form-section-div {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  max-width: 80%;
  margin: 2rem auto;
  padding: 2rem;
  transition: all .4s;
  overflow: hidden;
}

#application-div .form-section-div:hover {
  border-color: #60a5fa;
  box-shadow: 0 12px 30px #60a5fa26;
}

#application-div .form-section-div > p:first-child {
  color: #60a5fa;
  letter-spacing: -.02em;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

#application-div .open-up {
  animation: .7s cubic-bezier(.4, 0, .2, 1) forwards openUp;
}

#application-div .close-up {
  animation: .5s cubic-bezier(.4, 0, .2, 1) forwards closeDown;
}

@keyframes openUp {
  from {
    opacity: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  to {
    opacity: 1;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@keyframes closeDown {
  from {
    opacity: 1;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  to {
    opacity: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
}

#application-div .slide-in {
  opacity: 0;
  animation: .6s cubic-bezier(.4, 0, .2, 1) forwards slideIn;
  transform: translateX(-40px);
}

#application-div .slide-out {
  opacity: 1;
  animation: .4s cubic-bezier(.4, 0, .2, 1) forwards slideOut;
  transform: translateX(0);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

#application-div .form-row1 {
  animation-delay: .1s;
}

#application-div .form-row2 {
  animation-delay: .2s;
}

#application-div .form-row3 {
  animation-delay: .3s;
}

#application-div .form-row4 {
  animation-delay: .4s;
}

#application-div .form-row5 {
  animation-delay: .5s;
}

#application-div .form-row6 {
  animation-delay: .6s;
}

#application-div .form-row7 {
  animation-delay: .7s;
}

#application-div .form-row8 {
  animation-delay: .8s;
}

#application-div .form-row9 {
  animation-delay: .9s;
}

#application-div .form-row-private1 {
  animation-delay: .1s;
}

#application-div .form-row-private2 {
  animation-delay: .2s;
}

#application-div .form-row-private3 {
  animation-delay: .3s;
}

#application-div .form-row-private4 {
  animation-delay: .4s;
}

#application-div .form-row-private5 {
  animation-delay: .5s;
}

#application-div .form-row-private6 {
  animation-delay: .6s;
}

#application-div .form-row-private7 {
  animation-delay: .7s;
}

#application-div .form-row-private8 {
  animation-delay: .8s;
}

#application-div .form-row-landlord1 {
  animation-delay: .1s;
}

#application-div .form-row-landlord2 {
  animation-delay: .2s;
}

#application-div .form-row-landlord3 {
  animation-delay: .3s;
}

#application-div .form-row-landlord4 {
  animation-delay: .4s;
}

#application-div .form-row-landlord5 {
  animation-delay: .5s;
}

#application-div .form-row-landlord6 {
  animation-delay: .6s;
}

#application-div .form-row-employment1 {
  animation-delay: .1s;
}

#application-div .form-row-employment2 {
  animation-delay: .2s;
}

#application-div .form-row-employment3 {
  animation-delay: .3s;
}

#application-div .form-row-employment4 {
  animation-delay: .4s;
}

#application-div .form-row-employment5 {
  animation-delay: .5s;
}

#application-div .form-row-employment6 {
  animation-delay: .6s;
}

#application-div .form-row, #application-div .form-row-private, #application-div .form-row-landlord, #application-div .form-row-employment, #application-div .form-row-questioner {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  display: flex;
}

#application-div .form-row p, #application-div .form-row-private p, #application-div .form-row-landlord p, #application-div .form-row-employment p, #application-div .form-row-questioner p {
  color: #cbd5e1;
  margin-bottom: .5rem;
  font-size: 1rem;
  font-weight: 500;
}

#application-div input, #application-div select, #application-div textarea {
  color: #fff;
  background: #0f172a;
  border: 1.5px solid #475569;
  border-radius: 12px;
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  transition: all .3s;
}

#application-div input::placeholder, #application-div textarea::placeholder {
  color: #64748b;
}

#application-div input:focus, #application-div select:focus, #application-div textarea:focus {
  background: #1e293b;
  border-color: #60a5fa;
  outline: none;
  box-shadow: 0 0 0 4px #60a5fa4d;
}

#application-div button:not([type]), #application-div button[type="button"], #application-div button[type="submit"] {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border: none;
  border-radius: 12px;
  margin: 1rem .5rem 0;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all .3s;
}

#application-div button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px #3b82f666;
}

#application-div button[type="submit"] {
  background: linear-gradient(90deg, #16a34a, #22c55e);
  width: 100%;
  max-width: 400px;
  margin: 2rem auto 0;
  padding: 16px 40px;
  font-size: 1.2rem;
  display: block;
}

#application-div #personal-info-complete-p, #application-div [id$="-complete-p"] {
  color: #fff;
  background: #22c55e;
  border-radius: 50px;
  margin-top: 1rem;
  padding: 8px 20px;
  font-size: .9rem;
  font-weight: bold;
  display: inline-block;
}

#application-div #status-bar {
  z-index: 50;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  flex-shrink: 0;
  align-self: flex-start;
  width: 220px;
  padding: 1.5rem;
  transition: all .3s;
  position: sticky;
  top: 150px;
  box-shadow: 0 10px 20px #0006;
}

#application-div #status-bar:hover {
  border-color: #60a5fa;
}

#application-div .status {
  color: #cbd5e1;
  align-items: center;
  margin: .5rem 0;
  font-size: .95rem;
  display: flex;
}

#application-div .status-indicator {
  border: 2px solid #475569;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  margin-right: 1rem;
  transition: all .3s;
}

#application-div .inbetween {
  height: 20px;
  margin-top: -.5rem;
  margin-bottom: -.5rem;
  margin-left: .7rem;
}

#application-div .status-indicator[style*="blue"] {
  box-shadow: 0 0 8px #22c55e80;
  background: #22c55e !important;
  border-color: #22c55e !important;
}

#application-div .form-section-esign {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  max-width: 80%;
  margin: 2rem auto;
  padding: 2rem;
  overflow: hidden;
}

#application-div #authorization-disclaimer {
  text-align: center;
  background: #0f172a;
  border: 1px solid #475569;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
}

#application-div #authorization-disclaimer h3 {
  color: #60a5fa;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

#application-div #authorization-disclaimer p {
  color: #94a3b8;
  margin-bottom: 1rem;
  font-size: .95rem;
}

#application-div #authorization-disclaimer hr {
  border: none;
  border-top: 1px solid #475569;
  margin: 1rem 0;
}

#application-div #sig-display {
  background: #fff;
  border: 2px solid #475569;
  border-radius: 12px;
  max-width: 100%;
  margin: 1rem auto;
  display: block;
  box-shadow: 0 4px 10px #0000004d;
}

#application-div #signature-div {
  z-index: 1000;
  text-align: center;
  background: #1e293b;
  border: 2px solid #60a5fa;
  border-radius: 16px;
  flex-direction: column;
  gap: 1rem;
  width: 90%;
  max-width: 500px;
  padding: 2rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 60px #000000b3;
  display: flex !important;
}

#application-div #signature-div p {
  color: #94a3b8;
  font-size: .95rem;
}

#application-div #sig-canvas {
  background: #fff;
  border: 3px solid #334155;
  border-radius: 12px;
  width: 100%;
  height: 200px;
  margin: 1rem 0;
}

#application-div #sig-image {
  background: #fff;
  border: 2px solid #475569;
  border-radius: 12px;
  max-width: 100%;
  margin: 1rem auto;
  display: block;
  box-shadow: 0 4px 10px #0000004d;
}

#application-div #sig-dataUrl {
  display: none;
}

@media (width <= 768px) {
  #application-div .applicant-form {
    flex-direction: column;
  }

  #application-div #status-bar {
    width: 100%;
    margin: 0 0 2rem;
    padding: 1rem;
    position: static;
  }

  #application-div .form-section-div {
    max-width: 100%;
  }

  #application-div {
    border-radius: 16px;
    padding: 1.5rem;
  }

  #application-div .form-section-div {
    margin: 1.5rem 0;
    padding: 1.5rem;
  }

  #application-div .form-section-div > p:first-child {
    font-size: 1.3rem;
  }

  #application-div button[type="submit"] {
    padding: 16px;
    font-size: 1.1rem;
  }

  #application-div input, #application-div select, #application-div textarea {
    font-size: 1rem;
  }

  #application-div #signature-div {
    gap: .75rem;
    padding: 1.5rem;
  }

  #application-div #sig-canvas {
    height: 160px;
  }
}

@media (width <= 480px) {
  #application-div .form-row p {
    font-size: .9rem;
  }

  #application-div #authorization-disclaimer h3 {
    font-size: 1.1rem;
  }
}

@media (width <= 700px) {
  #application-div .form-section-esign {
    width: 100%;
    max-width: 100%;
  }
}

.listing-item {
  width: 30%;
}

@media screen and (width <= 900px) {
  .listing-item {
    width: 100%;
  }
}

.MuiDataGrid {
  display: block;
}