@font-face
{
	font-family : "Roboto";
	font-weight : 300;
	src         : url("../fonts/Roboto-300.ttf") format("truetype");
}

@font-face
{
	font-family : "Roboto";
	font-weight : 400;
	src         : url("/Content/fonts/Roboto-400.ttf") format("truetype");
}

@font-face
{
	font-family : "Roboto";
	font-weight : 500;
	src         : url("../fonts/Roboto-500.ttf") format("truetype");
}

@font-face
{
	font-family : "Roboto";
	font-weight : 700;
	src         : url("/Content/fonts/Roboto-700.ttf") format("truetype");
}


*,
*::before,
*::after,
p, label
{
	margin     : 0;
	padding    : 0;
	box-sizing : border-box;
}

body
{
	/*height: 100vh;*/
}

.login-bg
{
	background-image  : url("../img/background-blue.png");
	background-repeat : no-repeat;
	background-size   : cover;
}

.login-box
{
	border           : solid 1px black;
	width            : 420px;
	height           : 420px;
	font-family      : Roboto;
	font-size        : 18px;
	color            : #000000;
	background-color : white;
	box-shadow       : 3px 3px 5px #888888;
}

.login-image
{
	width  : auto;
	height : 35px;
	margin : 10px 0 10px 19px;
}

.login-header
{
	background-color : #e0e7eb;
	height           : 60px;
	border-bottom    : solid 1px #76b1d6;
}

.login-body
{
	background-color : white;
	height           : 323px;
	width            : 320px;
	margin           : 0 35px;
	display          : flex;
	flex-flow        : row;
	align-content    : center;
	justify-content  : center;
}

.login-footer
{
	background-color : #d2d2d2;
	height           : 35px;
	justify-content  : flex-end;
	align-self       : flex-end;

}

.login-body-row
{
	width : 100%
}

.login-sign-in-header-text
{
	color       : black;
	font-size   : 18px;
	font-weight : bold;
	margin      : 15px 0;
	width       : 320px;
}

.space
{
	margin : 15px 0;
}

.login-label
{
	font-family : Roboto;
	font-size   : 18px;
	color       : #000000;
}

.login-text-input
{
	display   : flex;
	flex-flow : row;
	flex-wrap : wrap;
	padding   : 5px 0;
}

.sponsor-container
{
	height : 80%;
}

.sponsor-text-input
{
	display         : flex;
	flex-wrap       : wrap;
	flex-direction  : column;
	justify-content : space-around;
	padding         : 5px 0;
	height          : 100%;
}

.sponsor-text-input label
{
	font-size : 12px;
	width     : 100%;
	/*        margin: 0 15px;*/
}

.sponsor-text-input select
{
	font-size : 15px;
}

.login-text-input label
{
	font-size : 10px;
	width     : 100%;
	/*        margin: 0 15px;*/
}

.sameSize > input
{
	width : 100px;
}

.login-text-input input
{
	border-left   : 0;
	border-right  : 0;
	border-top    : 0;
	border-bottom : solid 1px black;
	outline       : none;
	font-size     : 14px;
	width         : 320px;
	/*        margin: 0 15px;*/
	/*width: 100%;*/
}

input:focus
{
	outline : none;
}

.login-message
{
	font-family   : Roboto;
	font-size     : 10px;
	color         : red;
	height        : 60px;
	margin-top    : 10px;
	margin-bottom : 10px;
}

.login-checkbox
{
	padding : 5px 0 5px 0;
}

.login-checkbox input
{
	align-self : center;
}

.login-checkbox label
{
	margin     : 0 5px;
	font-size  : 14px;
	align-self : center;
}

.login-reset-password
{
	text-decoration-line : underline;
	font-family          : Roboto;
	font-size            : 14px;
	color                : #0973b6;
	padding              : 5px 0;
}

#myModal
{
	display : none;
}

.login-reset-content
{
	width : 585px;
}

.login-reset-header
{
	background-color : #FFFFFF;
	border-bottom    : solid #0973b6 1px;
	height           : 35px;
}

.login-reset-header-text
{
	font-family  : Roboto;
	font-size    : 16px;
	font-weight  : normal;
	color        : #0973b6;
	align-self   : center;
	padding-left : 5px;
}

.login-reset-body
{
	font-family : Roboto;
	font-size   : 14px;
	font-weight : normal;
	color       : #333333;
	/*    background-color: #EEEEEE;*/
	padding     : 35px;
}

.login-reset-body-text
{
	font-family : Roboto;
	font-size   : 14px !important;
	font-weight : normal;
	color       : #333333;
}

.login-reset-footer
{
	background-color : #d2d2d2;
	height           : 35px;
	justify-content  : flex-end;
	align-self       : flex-end;
}

.loginButton
{
	border           : 0;
	border-left      : solid white 1px;
	background-color : #999999;
	height           : 35px;
	padding          : 0 20px;
	font-size        : 14px;
	color            : white;
	background-image : none !important;
}


.loginAspxButton
{
	border           : 0;
	border-left      : solid white 1px;
	background-color : #999999;
	height           : 35px;
	font-size        : 14px;
	color            : white;
	background-image : none !important;
	text-transform: none !important;
	width: 98px !important;
	padding: 0 !important;
	font-weight: unset;
	display: flex;
}
.loginAspxButton > div
{
	padding: 0 !important;
}

.buttonDisabled
{
	background-color : #d4d4d4;
	cursor           : not-allowed;
}

.buttonEnabled
{
	background-color : #999999;
	cursor           : default;
}

.change-password-text-input
{
	display   : flex;
	flex-flow : row;
	flex-wrap : wrap;
	padding   : 5px 0;
}

.change-password-text-input label
{
	font-size : 10px;
	width     : 100%;
	/*        margin: 0 15px;*/
}

.change-password-text-input input
{
	border-left   : 0;
	border-right  : 0;
	border-top    : 0;
	border-bottom : solid 1px black;
	outline       : none;
	font-size     : 14px;
	width         : 260px;
	/*        margin: 0 15px;*/
	/*width: 100%;*/
}

.failure-notification
{
	font-family : Roboto;
	font-size   : 13px !important;
	font-weight : normal;
	color       : #f00;
	display     : inline;
}

.failure-summary
{
	font-family : Roboto;
	font-size   : 11px !important;
	font-weight : normal;
	color       : #f00;
	display     : block !important;
}

.failure-summary ul
{
	list-style-type : none;
	margin-bottom   : 0;
}

.change-password-error
{
	font-family : Roboto;
	font-size   : 11px !important;
	font-weight : normal;
	color       : #f00;
	height      : auto;
	display     : block !important;
}

.user-access-error
{
	font-family : Roboto;
	font-size   : 13px !important;
	font-weight : normal;
	color       : #f00;
	display     : inline;
	margin-top  : 0
}

.cp-row
{
	display        : flex;
	flex-direction : row;
	flex-wrap      : nowrap;
	width          : auto;
}

.password-condition-text
{
	font-family : Roboto;
	font-size   : 11px !important;
	font-weight : normal;
	color       : #333333;
	width       : 320px;
	margin-left : -15px;
	margin-top  : 0;
	list-style  : none;
}

.password-condition-text ul li
{
	list-style : none;
}


.pwd-condition-check
{
	margin-right : 10px;
	color        : green;
	font-size    : 11px;
}

.pwd-condition-uncheck
{
	margin-right : 10px;
	color        : red;
	font-size    : 11px;
}

.password-visibility
{
	visibility : hidden;
}

.password-visibility:before
{
	visibility       : visible;
	display          : inline-block;
	content          : "";
	width            : 14px !important;
	height           : 14px;
	background-image : url("../img/visibility.svg");
	background-size  : 14px;
}

.password-visibility:checked:before
{
	background-image : url("../img/visibility_off.svg");
	/*        //background-size: 12px;*/
}

.pwd-visibile
{
	background-image : url("../img/visibility.svg");
	background-size  : 12px;
}

.pwd-not-visibile
{
	background-image : url("../img/visibility_off.svg");
	background-size  : 12px;
}








/*Material Design text field by kkimura*/

.input-contain
{
		position : relative;
}

.textFieldId
{
		outline   : 0;
		width     : 100%;
		height    : 22px;
		font-size : 14px;
}

.textFieldId:focus
{
		outline : none;
}

.textFieldId:focus + .placeholder-text .text,
:not(input[value=""]) + .placeholder-text .text
{
		font-size : 10px;
		transform : translate(0, -100%);
}

input:-webkit-autofill + .placeholder-text .text
{

		color     : black;
		font-size : 10px;
		transform : translate(0, -100%);
}

.textFieldId:focus + .placeholder-text .text
{
		border-color : black;
}

.textFieldId:focus + .placeholder-text .text
{
    color: black;
}

:is(input[value=""]) + .placeholder-text .text
{
    color: #949494;
}

.placeholder-text
{
		position         : absolute;
		top              : 0;
		bottom           : 0;
		left             : 0;
		right            : 0;
		background-color : transparent;
		pointer-events   : none;
		display          : flex;
		align-items      : center;
		height           : 22px;
}

.text
{
		display          : flex;
		font-size        : 14px;
		background-color : transparent;
		transform        : translate(0);
		transition       : transform 0.15s ease-out, font-size 0.15s ease-out, background-color 0.2s ease-out, color 0.15s ease-out;
}

.asterik,
.invalidText
{
		color : #D7282F;
}

.asterik
{
		display         : flex;
		align-items     : center;
		justify-content : center;
		width           : 12px;
}

.validUnderLine
{
		border-width : 0 0 1px;
		border-color : black;
}

.validUnderLine:hover
{
		border-width : 0 0 2px;
		border-color : black;
}

.validUnderLine:focus
{
		border-width : 0 0 2px;
		border-color : #0973B6;
}

.invalidUnderLine
{
		border-width : 0 0 1px;
		border-color : #D7282F;
}

.invalidUnderLine:focus,
.invalidUnderLine:hover
{
		border-width : 0 0 2px;
		border-color : #D7282F;
}

.validText
{
		color : black;
}

.textFieldId, .placeholder-text
{
		font-size : 14px;
}

.password-required-class:after,
.username-required-class:after
{
		height      : 15px;
		width: 150px;
		font-family : Roboto;
		font-size   : 13px !important;
		font-weight : normal;
		color       : #F00;
		display     : flex;
		content: "";
}

input[value=""]  ~ .username-required-class:after
{

		content: "User Name is required.";
}
input[value=""]  ~ .password-required-class:after
{

		content: "Password is required.";
}

input:-webkit-autofill ~ .password-required-class:after,
input:-webkit-autofill ~ .username-required-class:after
{
		content: "";
}

.emptyHeight{
		height: 0;
}