BODY,
HTML {
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
}

#wrapper{
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	overflow: hidden;
	background-color: #111111;
}

#leftcol,
#rightcol {
	width: 50%;
	height: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
	float: left;
	color: white;
	
}

#leftcol {
	background-color: #061ab1; 
}

#rightcol {
	margin-left: 50%;
	background-color: #c8e7f2;
}

#leftcolcontent,
#rightcolcontent {
	position: relative;
	top: 52%;
	-ms-transform: translateY(-50%);
  transform: translateY(-50%);
	text-align: center;
}

#lefttekst1 {
	font-family: NewsonGLS-Bold, sans-serif;
    font-size: 30px;
}

#recoverlefttekst1 {
    font-family: NewsonGLS-Bold, sans-serif;
    font-size: 30px;
    margin-top: 0px;
    padding-bottom: 94px;
}

.myorange.boldtekst {
    font-size: 14px !important;
    margin-top:20px;
}

img {
    zoom: 1.8;
    margin-top: 20px;
}

#rightcolcontent {
	padding-top: 120px; /* alter until this is below the getstarted text */
	padding-left: 350px;
}

#loginform,
#recoverform {
    width: 360px;
    height: 203px;
    background-color: white;
    padding: 25px 0px 0px 0px;
    border: solid 1px lightgrey;
    border-radius: 10px;
    margin-top:20px;
    margin-left:calc(50% - 352px);
}

#recoverform {
    height: 153px;
    background-color: white;
}


#inputfield {
	display: inline-block;
	text-align: left;
}

#recoveryarrow {
	position: absolute;
	width: 1000px; /* just a crazy number to have space for sure */
	height: 1000px;
	bottom: calc(50% + 30px); /* alter the px amount to perfectly align the dots! */
	background-position: left bottom;
	background-repeat: no-repeat;
	left: calc(50% - 250px); /* alter as needed to align it with the form. */
}

#arrow {
	position: absolute;
	width: 1000px; /* just a crazy number to have space for sure */
	height: 1000px;
	bottom: calc(50% + 30px); /* alter the px amount to perfectly align the dots! */
	background-position: left bottom;
	background-repeat: no-repeat;
	left: calc(50% - 250px); /* alter as needed to align it with the form. */
}

#impressum {
	position: absolute;
	bottom: 20px;
	right: 20px;
	color: var(--black);
    text-align: right;
    margin-right: 30px;
}

#impressum a {
	font-family: NewsonGLS-Bold, sans-serif !important;
	color: var(--black) !important;
}

/*#getstarted {
	font-family: NewsonGLS-Bold, sans-serif;
	position: absolute;
	bottom: -7px;  alter to align with the dot
	margin-left: 100px;
	font-size:30px;
	font-weight: 800;
	color: var(--black);
}*/

#getstarted {
    font-family: NewsonGLS-Bold, sans-serif;
    position: absolute;
    bottom: -1px;
    margin-left: 94px;
    font-size: 21px;
    font-weight: 800;
    color: var(--black);
}

#loginbutton {
    margin-left: 180px;
    margin-top: -4px;
}

button.loginsubmit {
	font-family: NewsonGLS-Regular, Arial, sans-serif;
	font-size: 13px;
	border-radius: 400px;
	left:30px;
}

.loginsubmit:hover {
    background-color: var(--pumpkin2);
	color: var(--black);
	border-color: var(--pumpkin2);
	text-decoration: underline;
}

button {
  width: 110px;
  height: 48px;
  border-radius: 0px;
  background-color: var(--mango);
  font-family: NewsonGLS-Regular, Arial, sans-serif;
  font-size: 14px;
  color: var(--black);
  margin: 0;
  cursor: pointer;
  border: hidden !important;
}

#forgotpass {
    color: var(--black);
    text-align: right;
    margin-right: 30px;
}

#forgotpass a {
	font-family: NewsonGLS-Bold, sans-serif !important;
	color: var(--black) !important;
}

#noaccount {
    color: var(--black);
    text-align: right;
    margin-right: 30px;
}

#noaccount a {
	font-family: NewsonGLS-Bold, sans-serif !important;
	color: var(--black) !important;
}

.InputWrapper.dynamiclabels {
    margin-top: 11px;
    margin-bottom: 18px;
}

.recoverloginsubmit {
    width: 100px !important;
    border-radius: 20px !important; 
}
.recoverloginback {
    width: 100px !important;
    border-radius: 20px !important; 
    margin-left: -55% !important;
}

.recoverloginsubmit:hover {
    background-color: var(--pumpkin2);
    color: var(--black);
    border-color: var(--pumpkin2);
}

.recoverloginback:hover {
    background-color: var(--pumpkin2);
    color: var(--black);
    border-color: var(--pumpkin2);
}