/* Make box sizing predictable */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: sans-serif;
}

@media (min-width: 1000px) {
	.flex-container {
	  display: flex;
	  height: 100vh; /* Full height */
	}

	.left-column, .right-column {
	  width: 50%;
	}
}
@media (max-width: 1000px) {
	.right-column {min-height: 300px;}
}


/* Left content */
.left-column {
  padding: 40px 20px;
  background-color: #ffffff;
}

/* Right column with background image */
.right-column {
  position: relative;
  background-image: url('images/03.jpg'); /* Replace with your image path */
  background-size: cover;
  background-position: center;
}

/* Overlay for the background image */
.right-column .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
  z-index: 0;
}

/* Content in the right column (on top of overlay) */
.right-column .content {
  position: relative;
  z-index: 1;
  color: white;
  padding: 2rem;
}


.page-header {padding-bottom: 40px;}
.page-header .portal-logo {width: 150px; height: auto; display: block; margin: 0 auto;}
#portal-register-form .form-heading {font-size: 1.4em; font-weight: 500; margin: 0; padding: 20px 20px 40px 20px; text-align: center;}

#portal-register-form {
	background-image: url('images/loading.gif');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 60px 60px;
	min-height: 300px;
  }