@charset "utf-8";

/* CSS Document */



:root {

	--theme-color: #1DB954;

	--theme-color-darker: #15843C;

	--theme-color-lighter: #38E073;

}



/* ---------- Template Structure ---------- */



	html, body {

		background-color: #F9F9F9;

		width: 100%;

		height: 100% !important;

		margin: 0px;

		padding: 0px;

		font-family: arial;

		font-size: 0px;

	}

	

	p {

		margin: 0px;

		padding: 0px;

	}

	

	#mainWrapper {

		min-width: 100%;

		height: 100% !important;

	}

	

	#mainWrapper #leftWrapper {

		width: 50%;

		min-height: 100% !important;

		float: left;

		background-color: #FCFCFC;

		position: relative;

	}

	

	#mainWrapper #rightWrapper {

		float: right;

		width: 50%;

		background-color: var(--theme-color);

		min-height: 100% !important;

		position: relative;

	}

	

	#mainWrapper #leftWrapper #loginWrapper {

		position: absolute;

		width: 400px;

		min-height: 450px;

		top: 50%;

		left: 50%;

		transform: translate(-50%,-50%);

		font-size: 16px;

		font-family: Montserrat;

	}

	

	#mainWrapper #leftWrapper #loginWrapper p.title {

		font-size: 30px;

		font-weight: bold;

		margin-bottom: 10px;

	}

	

	#mainWrapper #leftWrapper #loginWrapper p.formLabel {

		font-weight: bold;

		margin-bottom: 5px;

	}

	

	#mainWrapper #leftWrapper #loginWrapper p.formLabel.required::after {

		content: " *";

		color: #F00;

		font-weight: bold;

	}

	

	#mainWrapper #leftWrapper #loginWrapper input[type="text"], #mainWrapper #leftWrapper #loginWrapper input[type="password"] {

		width: 100%;

		font-size: 16px;

		outline: none;

		border: 1px solid #CCC;

		padding: 12px 20px 12px 20px;

		box-sizing: border-box;

		border-radius: 25px;

		color: #AAA;

		font-family: Montserrat;

		transition: ease all 0.2s;

	}

	

	#mainWrapper #leftWrapper #loginWrapper input[type="text"]:focus, #mainWrapper #leftWrapper #loginWrapper input[type="password"]:focus {

		border: 1px solid var(--theme-color);

		transition: ease all 0.2s;

	}

	

	#mainWrapper #leftWrapper #loginWrapper button {

		width: 100%;

		line-height: 40px;

		font-size: 16px;

		background-color: var(--theme-color);

		border-radius: 25px;

		border: 0px;

		outline: 0px;

		font-family: Montserrat;

		color: #FFF;

		cursor: pointer;

		transition: ease all 0.2s;

	}

	

	#mainWrapper #leftWrapper #loginWrapper button:hover {

		background-color: var(--theme-color-darker);

		transition: ease all 0.2s;

	}

	

	#mainWrapper #leftWrapper #loginWrapper input[type="checkbox"] {

		width: 16px;

		height: 16px;

		margin: 0px;

		padding: 4px 0px 4px 0px;

		vertical-align: middle;

		cursor: pointer;

	}

	

	#mainWrapper #leftWrapper #loginWrapper input[type="checkbox"]:enabled:checked {

		background-color: var(--theme-color);

	}

	

	#mainWrapper #leftWrapper #loginWrapper span.rememberMe {

		line-height: 24px;

		margin-left: 10px;

	}

	

	#mainWrapper #leftWrapper #loginWrapper span.forgotPassword {

		color: var(--theme-color);

		cursor: pointer;

		line-height: 24px;

		transition: ease all 0.2s;

	}

	

	#mainWrapper #leftWrapper #loginWrapper span.forgotPassword:hover {

		color: var(--theme-color-darker);

		transition: ease all 0.2s;

	}

	

	#mainWrapper #leftWrapper #footerWrapper {

		position: absolute;

		bottom: 0px;

		width: 100%;

		height: 40px;

		color: #BBB;

		text-align: center;

		font-size: 14px;

		line-height: 40px;

	}

	

	

	

	

	

	

	#mainWrapper #rightWrapper #content {

		position: absolute;

		width: 500px;

		min-height: 450px;

		top: 50%;

		left: 50%;

		transform: translate(-50%,-50%);

		font-size: 16px;

		font-family: Montserrat;

	}

	

	#mainWrapper #rightWrapper #content #logoWrapper {

		text-align: center;

		margin-bottom: 40px;

	}

	

	#mainWrapper #rightWrapper #content p.title {

		font-size: 40px;

		color: #FFF;

		font-weight: bold;

	}

	

	#mainWrapper #rightWrapper #content #splashButtonWrapper {

		text-align: center;

		margin-top: 50px;

	}

	

	#mainWrapper #rightWrapper #content #splashButtonWrapper button {

		font-size: 16px;

		background-color: #FFF;

		border-radius: 25px;

		border: 0px;

		outline: 0px;

		font-family: Montserrat;

		color: var(--theme-color);

		cursor: pointer;

		transition: ease all 0.2s;

		padding: 15px 25px 15px 25px;

		font-weight: bold;

	}

	

	#mainWrapper #rightWrapper #content #splashButtonWrapper button:hover {

		background-color: var(--theme-color-darker);

		color: #FFF;

	}