.wrapper
{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loginexternallayout
{
	display: grid;
    grid-template-columns: 630px 825px;
    grid-template-rows: 100%;
    gap: 0px 0px;
	
	grid-template-areas: 'loginlayout loginprocedure';
}

.loginlayout
{
	grid-area: loginlayout;
	display: grid;
    grid-template-columns: 300px 50px 280px;
    grid-template-rows: 107px 160px 70px 120px;
    gap: 0px 0px;
	
	grid-template-areas: 'loginwelcome logingap loginlogo' 'loginnick logingap logintitle' 'loginpwd logingap loginmessage' 'loginpwd logingap loginsubmit';
	
	-webkit-box-shadow: 0px 0px 10px 2px #303827;
	-moz-box-shadow: 0px 0px 10px 2px #303827;
	box-shadow: 0px 0px 10px 2px #303827;
		
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

.loginwelcome { grid-area: loginwelcome; background-color: #052a3b; -webkit-border-top-left-radius: 15px; -moz-border-radius-topleft: 15px; border-top-left-radius: 15px; text-align: center; padding: 28px; color: #ffffff; font-size: 30px; }
.loginnick { grid-area: loginnick; background-color: #052a3b; padding-top: 100px; }
.loginpwd { grid-area: loginpwd; background-color: #052a3b; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-left-radius: 15px; }
.logingap { grid-area: logingap; background-color: #052a3b; background-image: url('https://procenterlab.com/gis/modules/login/images/gap.png'); }
.loginlogo { grid-area: loginlogo; background-color: #052a3b; -webkit-border-top-right-radius: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px; padding: 15px; }
.logintitle { grid-area: logintitle; background-color: #052a3b; color: #ffffff; text-align: center; font-size: 30px; padding-top: 30px; }
.loginmessage { grid-area: loginmessage; display: flex; align-items: center; justify-content: center; background-color: #052a3b; color: #ffffff; }
.loginmessagetxt { display: none; }
.loginsubmit { grid-area: loginsubmit; background-color: #052a3b; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; text-align: center; }
.loginlogoimg { width: 250px; height: 71px; }
.logininput { border: 1px solid #888888; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-left: 20px; width: 250px; height: 40px; }

.loginprocedure { grid-area: loginprocedure; margin-left: 20px }
.loginprocedureimg { width: 805px; }