*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.container_loginpage{
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center; 
	top: 40px;
	bottom: 110px;
	width: 100%;
}

.container{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 350px;
	height: 450px;
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 5px 30px black;
}

.form{
	position: absolute;
	top: 80px;
	left: 55%;
	width: 350px;
	height: 500px;
	background-color: #fcf8f5;
	box-shadow: 0 5px 30px black;
}

.form2{
	align-items: center; 
	position: flex;
	top: 80px;
	width: 30%;
	background-color: #fcf8f5;
}

.btn button {
  padding: 3px;
  margin: 30px 0px 40px 30px;
  border-style: none;
  background-color: transparent;
  color: #797c83;
  font-size: 18px;
  font-weight: 550;
}
.btn button:hover{
	/*
  text-decoration: underline;
  text-decoration-color: #5697ad;
  */
  color: #195d4e;
}
.btn button:focus {
  border-bottom: 2px solid #5697ad;
}

.formGroup{
  display: flex;
  justify-content: center;
}
.formGroup input{
  border: none;
  width: 80%;
  border-bottom: 1px solid #5697ad;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
  background-color: transparent;
  color: #797c83;
}
input:focus {
  outline: none !important;
  border-bottom: 2px solid #75bda7;
  font-weight: bold;
  color: #797c83;
}
::placeholder {
  color: #797c83;
}

 

.text{
  color: rgb(199, 197, 197);
  font-size: 13px;
}
.btn2{
  padding: 10px;
  width: 150px;
  border-radius: 20px;
  background-color: #92c3ae;
  border-style: none;
  color: #5c6761;
  font-weight: 600;
}
.btn2:hover{
  background-color: rgba(10, 136, 43, 0.5);
}

 
/* hide signup form */
.login{
  display: none;
}
 
/* Login form code */
.login{
  margin-top: 40px;
}
.login .checkBox{
  margin-top: 30px !important;
}


.topnav {
	background-color: #75bda7;
	position: fixed;
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	box-shadow: 0 0 25px 0 black;
	z-index: 10000;
}

.topnav img {
	height: 35px;
	margin-left: 40px;
	display: flex;      /* sit die logos mooi in middel verticvally */
}

.topnav * {
	display: inline;
}

.topnav-right li{     /* hierdie is vir die signup/login page se nav bar */
	float: right;
	margin-right: 40px;
	font-size: 18px;
	font-family: Calibri;
}

.topnav-right {
	display:inline-block;
	width: 100%;
}

.form errorMsgs {
	font-size: 18px;
	display: flex;
	justify-content: center;
	font-family: Calibri;
	padding: 15px;
}


.Heading {
	font-family: "Lucida Console", "Courier New", monospace;
	font-size: 35px; 
	text-shadow: 0px 0px 8px rgb(150, 250, 150);
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 7%;
	left: 15%;
	width: 70%;
	height: 90px;
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 5px 30px black;
	border-radius: 25px;
}


.Footer {
	justify-content: center;
	padding: 10px 10px 10px 20px;  
	position: fixed;
	width: 100%;
	height: 110px;
	background-color: #75bda7;
	align-items: center;
	bottom: 0;
}


.Footer .text1{
	display: flex;
	font-family: "Lucida Console", "Courier New", monospace;
	font-size: 13px; 
	justify-content: center;
	align-items: center;
	color: #195d4e;
	font-weight: bold;
}


.Footer .text2{
	display: flex;
	font-family: "Lucida Console", "Courier New", monospace;
	font-size: 12px; 
	justify-content: center;
	align-items: center;
	color: #fefefe;
	font-weight: bold;
}

.wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  -ms-flex-direction: column;
}

a {
  border: none;
  font-size: 14px;
  font-weight: bold;
  background-color: transparent;
  color: #797c83;
}

.login_text1{
	font-family: "Arial", "Helvetica", "sans-serif";
	font-size: 12px;
	color: #272e29;
	font-weight: 600;
}

.swal2-title {
  font-family: "Arial", "Helvetica", "sans-serif" !important;
}
.swal2-html-container {
  font-family: "Arial", "Helvetica", "sans-serif";
}