body{
  background-color: #fff;
  overflow: hidden;
}

.d-flex{
  display: flex;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: end;
}

.vertical-align-container {
  margin-top: calc(8vw);
}

h4 {
  color: #1b3544;
  justify-self: center;
}

.align-items-center{
  align-items: center;
}

.row {  
  transition: justify-content 0.5s ease-in-out; /* Add a transition for the centering alignment */
}

.logo-col{
  width: 40%;
}


.fill-space{
  width: 20%;
}

.col-6 {
  width: 50%;
}

.no-padding {
  padding: 0px !important;
}

.mt-2 {
  margin-top: 0.5em;
}

.mb-5 {
  margin-bottom: 4em;
}

form input {
  background-color: #f3f3f5 !important;
  text-align: start;
  height: 40px;
}

.external-logo{
  float: right;
  width: 120px;
  height: 59px;
}

.img-background{
  height: 100vh;
  width: 50vw;
  border-radius: 20px 0 0 20px; 
}

.fw-bold{
  font-weight: bold;
}

#main-btn{
  background-color: #1b3544;
  color: #fff;
  margin: auto;
}
#create-user-form > #main-btn {
  width: 70%;
}
.form-field{
  margin: 20px auto;
}

#recaptcha {
  margin: auto;
  display: table;
  margin-bottom: 20px;
}
#create-success {
  width: 300px;
  margin: auto;
}
#create-success > p {
  text-align: center;
}
#forgot-my-password-link {
  color: #1b3544;
  text-align: end;
  display: block;
}

.password-field-container {
  position: relative;
}

.password-toggle-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  width: 20px;
  height: 20px;
  fill: #888;
  user-select: none;
}

.password-toggle-icon.is-visible {
  fill: #193B4F
}


#password.form-control {
  padding-right: 40px;
}

.form-control.icon-padding {
  padding-left: 40px;
}

.input-container {
  position: relative;
}

.icon {
  width: 20px;
  height: 20px;
}

.input-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 10;
  fill: #888;
  pointer-events: none;
}

.form-control {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 16px;
  height: 40px;
}



/* Default styles (for desktop and larger screens) */
.container {
  display: flex;
  height: 300px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  
  /* Vertically center the item by default */
  align-items: center; 
  justify-content: center; /* Also horizontally centers */
}

.vertically-aligned-item {
  padding: 20px;
  background-color: #007bff;
  color: white;
}

/* Media query for phones (e.g., screens up to 600px wide) */
@media (max-width: 600px) {
  .container {
    /* Override the vertical alignment for phones */
    align-items: flex-start; /* This moves the item to the top */
  }
}