:root
{
	--altTextColor: 255, 255, 255;
	--errorColor: 181, 33, 20;
	--primaryAccentColor: 222, 196, 99;
	--primaryColor: 181, 33, 20;
}

body
{
	background: rgba(var(--primaryColor), 1);
	color: #FFFFFF;
	color: rgba(var(--altTextColor), 1);
	font-family: Roboto, sans-serif !important;
	height: auto;
}

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

.errorMessage
{
	color: red;
	color: rgba(var(--errorColor), 1);
	font-weight: bold;
}

.form
{
	border-radius: 4px;
	width: 500px;
}

.form
{
	background: #FFFFFF;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24) !important;
	padding: 45px;
	text-align: center;
	z-index: 1;
}

.form label, #RememberMultiFactorContainer
{
	text-align: left;
}

#RememberMultiFactorContainer
{
	margin-top: 20px;
}

.field-validation-valid + .k-input, .k-tooltip + .k-input, #otpCodeContainer
{
	margin-top: 15px;
}

.k-tooltip-error
{
	position: relative;
	text-align: left;
}

.k-textbox.k-input.k-input-solid
{
	height: 45px;
}

.form .k-input, .form #backToLoginButton
{
	background: #F2F2F2;
	border: none;
}

.form button, .form #backToLoginButton
{
	align-content: center;
	background: #B52114;
	background: rgba(var(--primaryColor), 1);
	border: 0;
	border-radius: 4px;
	color: #FFFFFF;
	cursor: pointer;
	font-family: Roboto, sans-serif !important;
	font-size: 14px;
	height: 45px;
	margin: 15px 0 15px;
	text-decoration: none;
	width: 100%;
}

.form button:hover, .form button:active
{
	background: rgba(0, 113, 117, 0.68);
	background: rgba(var(--primaryColor), 0.69);
}

#backToLoginButton
{
	display: none;
	letter-spacing: normal;
	text-transform: none;
	word-spacing: normal;
}

#forgotContainer
{
	display: none;
	margin-top: 2%;
}

#message
{
	display: none;
}

.fakeBoxToStopChromeFromAutoFillPassword
{
	border: none;
	height: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 0;
}

a, a:visited
{
	color: #FFFFFF;
	color: rgba(var(--altTextColor), 1);
	text-decoration: none;
}

a:hover
{
	color: #BF0059;
	color: rgba(var(--primaryAccentColor), 1);
}

.margin-all-2
{
	margin: 2%;
}

.color-black
{
	color: black !important;
}

.highlightLetter
{
	color: #BF0059;
	color: rgba(var(--primaryAccentColor), 1);
}

/* #region Custom Grid */
.gridWrapper
{
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	height: 100vh;
	width: 100vw;
}

@media screen and (max-width: 800px)
{
	.gridWrapper
	{
		grid-template-columns: 1fr 2fr 1fr;
	}
}

.gridItem
{
	place-self: center center;
}

div[class*=" gridWrapper"] .gridItem .k-input[role=combobox],
div[class^="gridWrapper"] .gridItem .k-input[role=combobox]
{
	color: #000000;
}

div[class*=" gridWrapper"] .gridItem .k-input[readonly],
div[class^="gridWrapper"] .gridItem .k-input[readonly]
{
	color: #787878;
}

div[class*=" gridWrapper"] .gridItem label,
div[class^="gridWrapper"] .gridItem label
{
	margin: 13px 0 3px 0;
}

div[class*=" gridWrapper"] .gridItem .k-combobox,
div[class^="gridWrapper"] .gridItem .k-combobox,
div[class*=" gridWrapper"] .gridItem .k-datepicker,
div[class^="gridWrapper"] .gridItem .k-datepicker,
div[class*=" gridWrapper"] .gridItem .k-numerictextbox,
div[class^="gridWrapper"] .gridItem .k-numerictextbox,
div[class*=" gridWrapper"] .gridItem .k-dropdown,
div[class^="gridWrapper"] .gridItem .k-dropdown,
div[class*=" gridWrapper"] .gridItem .k-timepicker,
div[class^="gridWrapper"] .gridItem .k-timepicker,
div[class*=" gridWrapper"] .gridItem .k-textarea,
div[class^="gridWrapper"] .gridItem .k-textarea,
div[class*=" gridWrapper"] .gridItem .k-listbox,
div[class^="gridWrapper"] .gridItem .k-listbox
{
	width: 100%;
}

div[class*=" gridWrapper"] .gridItem .k-checkbox,
div[class^="gridWrapper"] .gridItem .k-checkbox
{
	height: 24px;
	width: 24px;
}

div[class*=" gridWrapper"] .gridItem .k-checkbox::before,
div[class^="gridWrapper"] .gridItem .k-checkbox::before
{
	font-size: 16px;
	height: 16px;
	width: 16px;
}

div[class*=" gridWrapper"] .gridItem.pull-top-left,
div[class^="gridWrapper"] .gridItem.pull-top-left
{
	place-self: start start
}

div[class*=" gridWrapper"] .gridItem.pull-center-left,
div[class^="gridWrapper"] .gridItem.pull-center-left
{
	place-self: center start
}

div[class*=" gridWrapper"] .gridItem.pull-bottom-left,
div[class^="gridWrapper"] .gridItem.pull-bottom-left
{
	place-self: end start
}

div[class*=" gridWrapper"] .gridItem.pull-top-center,
div[class^="gridWrapper"] .gridItem.pull-top-center
{
	place-self: start center
}

div[class*=" gridWrapper"] .gridItem.pull-center-center,
div[class^="gridWrapper"] .gridItem.pull-center-center
{
	place-self: center center
}

div[class*=" gridWrapper"] .gridItem.pull-bottom-center,
div[class^="gridWrapper"] .gridItem.pull-bottom-center
{
	place-self: end center
}

div[class*=" gridWrapper"] .gridItem.pull-top-right,
div[class^="gridWrapper"] .gridItem.pull-top-right
{
	place-self: start end
}

div[class*=" gridWrapper"] .gridItem.pull-center-right,
div[class^="gridWrapper"] .gridItem.pull-center-right
{
	place-self: center end
}

div[class*=" gridWrapper"] .gridItem.pull-bottom-right,
div[class^="gridWrapper"] .gridItem.pull-bottom-right
{
	place-self: end end
}

/* #endregion Custom Grid */

.blackText
{
	color: #000000;
}