/* Spinning loading Icon*/
.loader-container {
    background: #ffffffaa;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    top: 0;
    z-index: 69;
}

.loader {
    --loader-color: #000000aa;
    --loader-size: 40px;
    --loader-speed: 1.5s;
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.loader:after {
    animation: loader-animation var(--loader-speed) linear infinite;
    color: var(--loader-color);
    font-family: "Material Icons";
    font-size: var(--loader-size);
    content: "\e863";
    height: var(--loader-size);
    width: var(--loader-size);
}

@keyframes loader-animation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}[class^=element-],
[class^=element-] * {
	box-sizing: border-box;
	font-family: sans-serif;
    margin: 0;
    padding: 0;
}

[class^=element-] {
    --border-color: #0072E5;
    margin-bottom: 16px;
    z-index: 1;
}

[class^=element-].valid {
	--validity-color: green;
}

[class^=element-].invalid {
	--validity-color: red;
}

/* Scroll bars */
[class^=element-] ::-webkit-scrollbar {
    width: 12px;
  }

[class^=element-] ::-webkit-scrollbar-thumb {
    background-color: #efefef;
    border-radius: 12px;
}

.elements-click-catcher {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
}.element-input label {
	color: var(--validity-color, #b0b0b0);
	display: block;
	font-size: 0;
    line-height: 12px;
	margin-bottom: 8px;
	position: relative;
}

.element-input label:before {
	content: attr(data-label);
	font-size: 1rem;
	transform: translate(0, 22px);
	position: absolute;
	transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), font-size 200ms cubic-bezier(0, 0, 0.2, 1);
}

.element-input label.required:before {
    content: attr(data-label) "*";
}

.element-input label.focused:before,
.element-input label.valued:before {
	color: var(--validity-color, var(--border-color));
	font-size: 0.7rem;
	transform: translate(0,0);
}

.element-input label.valued:before {
	color: inherit;
}

.element-input input[type=text],
.element-input input[type=number],
.element-input input[type=password],
.element-input input[type=email] {
    background: transparent;
	border: solid  var(--validity-color, #000000);
	border-width: 0 0 1px 0;
	display: block;
	height: 32px;
	font-size: 1rem;
	padding: 0 4px;
	width: 100%;
}

.element-input input[type=text]:focus,
.element-input input[type=number]:focus,
.element-input input[type=password]:focus,
.element-input input[type=email]:focus {
	outline: 0;
	border-color: var(--validity-color, var(--border-color));
	border-bottom-width: 2px;
}
.element-input input[type=text]:disabled,
.element-input input[type=number]:disabled,
.element-input input[type=password]:disabled,
.element-input input[type=email]:disabled {
    background: none;
    border: none;
}

.element-input input[type=text]::placeholder,
.element-input input[type=number]::placeholder,
.element-input input[type=password]::placeholder,
.element-input input[type=email]::placeholder {
	opacity: 0;
}

.element-input input[type=text]:focus::placeholder,
.element-input input[type=number]:focus::placeholder,
.element-input input[type=password]:focus::placeholder,
.element-input input[type=email]:focus::placeholder {
	opacity: 0.5;
}@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./login7.woff2") format("woff2"), url("./login7.woff") format("woff");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
/* roboto-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./login.woff2) format('woff2'), url(./login.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-cyrillic-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./login2.woff2) format('woff2'), url(./login2.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-greek-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAXMABIAAAAACeAAAAVwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGiYbIBw2BmAANAhUCYM8EQwKg2iDSgsQABIUATYCJAMcBCAFgnQHIAyCSRt8CAieB2WbnmbLuYAwwpK8+iIe4P3r89wHDZaakNWCmB8R66SEWr+ILhpijnTqf6QAyyF8GVAOAPOWtmNg6llFXANTaQXCgXMubThOj6JRPCJsEWW3o1/4wX411uruvta/9FF8Zz50qenu3hVxmf4QIi1dRSzhkcR0SqA1QoiwzI2uAUbffgtBpA0YCssEQRChiaaAgMpAFvDsmKQshIEEer1l/u1J0Sbi8P6OJsQc3VHd6N0nlHe1MAhFbvPNcXJVWKNNekPqCYVx/lj8nqMi5BY4Pd6hectSY5E2Lll8SMf/HJXfEKEOfCtEMjEFBEHtpSkbjBK4aB1MIEjT/t9z/+W3j8FgVyeNWdDn7wh7b19l7pQoyFW8FXcx+P9D4NE2ErMMk4kskmVMCiwyG5ZhhyC7qZ19JoMatwj00/I0GG/uexT/v7K+Ysx9JXVwiRoC1yHR9VGAy9QQcXVQbqOGmOvEACWZm5EnyicLnfULjlggc0ldeRXQEqImnlS9kL8XAZndegKyuixM77OP24/Mzw9QQ7Kfha4v9OEOadjJ0qBYxN896pRbZI6ly/PS82Bs9iiYPpuaWJZEw83lXbg5G5JRslr2VFWPDtfbPBryeqZk5eKg/CqRD2Oz8tcvgJMiFi4RC6PWb9fnkzx74cWAeELYJFCSObI1tnxBfqwo2lPppazn26eGKDWU3KLMvOioppPNX6y4euc5FBq4y6Emd99OYa6zfpnpUhjE4Y/qoWtWQ4tIHr845ZA6bDc+AOSaR/sb6c9Otrh6uj3cUdDVKESNWgCK/GzxKQiLFKJeTz+QgzZKTIUcA2Nz9h2ppBhtbSQxfsjAtk4xoD1oes5gXYPe8UWmx+HjwQeNPfi2Wv/952vDpV/80Njw3WfWXv5IL3662ucz8dd9se78QkPd6ihDH61ZfS/s/KK0fjE+sgih+YDL5pz1vnH249tjfOAcLqZOTdvY/3jL1Hy3vqvcu358ODj2/etmVHfcdW+1t2X6R08H6p3BTzz87uDo6/H/vD/2scffaEf/ThphsXX6jLtDvp7cx6bvFUbnpWbFBWgOekJEip6LgFz63wtE+H/fXrpM++P7m8wAgZk/NJnacWXJLOW1rWO16C5ouY7SRE5T8x0iJ7MpntZyQJtPS2tuKXZpKqNf728OLK1FiJj72rq99z4Ho7G9hTQm0sqlhiEBKlWXfTDq1zbQcaP1HosN1zo/TqWGAGGywdQJhaSfHo9wDdfhs78cJKBZ5glRluQQEG030P7t9IdL+03+rRhRIHjxxwF7IsRHYeWXv0f991G5d9GJAKUIBPIT/jUpF/wa9f/Ccm9YiMnjjap8MPxDeomeuKM1ffn/fWHktrCSBT3iY20i0fZ0BBSOAgtJiYMAUDBoOigYaTtuMB4PJjiY2lFfMDPaqZe2rfYTKVcYVUK+QIPiwY175iFi5Yq4Em50vIyNq4cbYFLL2Fyqwbe4aq5Kx+XgZMhZco180ZCv3b5iqtyXD9VCUsquRpcNT74CH3LW95hzWKkvV3KxoHLNhF5fxylXMNkCLk6rio/XJGRzZWquGi/JysTM3sUM+4wfckMBveM4zKV1U1VT4QMTqQI/IFSPuDBgopvEnkF6u7kQ4gJdWIvWjkeivDg/OWNxRqSXxIolJclBKluW+uwutDVlWXtxjIc9y9fPPiBAxIqR2jR/O1ZmRftILVjVU5bo4zjbmDxi6XLWfHj/+sMns5ZFfyP9jLWD9pU5CFi/MC+Fo8Vo/+XhjzuFH9jQ3a32p2/nQ0fiTr60oFFwFV18KrXSKp2m/+AsuvlQKqXRIVOncITG9B6cRRdfSqt0RP8hVHTzrZOuHdwJDHdwJwA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAATgAA4AAAAABVwAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABRAAAAB8AAAAmAEYABkdQT1MAAAFkAAAAIAAAACBEcExrR1NVQgAAAYQAAAA2AAAANpMNggRPUy8yAAABvAAAAE0AAABgk1Pg+GNtYXAAAAIMAAAAKQAAADQAER+gZ2FzcAAAAjgAAAAMAAAADAAIABNnbHlmAAACRAAAARQAAAEUnMv0r2hlYWQAAANYAAAANgAAADb8atJ6aGhlYQAAA5AAAAAfAAAAJAq6BadobXR4AAADsAAAABwAAAAcE+3/e2xvY2EAAAPMAAAAEAAAABAA0AE9bWF4cAAAA9wAAAAgAAAAIAI3AwluYW1lAAAD/AAAAM0AAAF0GlU5EHBvc3QAAATMAAAAEwAAACD/bQBkeNpjYGRgYuBjgAAxII8NiEGQCcjnAWEgmwEABhIATQAAAQAAAAoAEgAUAAFERkxUAAwAAAAAAAQAAAAA//8AAAABAAAACgAkACYABERGTFQAHmN5cmwAImdyZWsAImxhdG4AIgAAAAAACAAAAAAAAAAA//8AAAAAeNpjYGZpY5zAwMrAwDqL1ZiBgVEeQjNfZEhjYmBgAGIocGBABe7+/u4MDvK+8r5sDP8YGNLYZzExKDAwzgfJsVixbmBQAEJmAPBXCrcAAAB42mNgYGACYmYgFgGSjGCahUEBSLMAIZAv7/v/P4R8sBMszwAAVmAGzQAAAAABAAIACAAC//8ADwAFAGQAAAMoBbAAAwAGAAkADAAPAAAhIREhAxEBAREBAyEBNQEhAyj9PALENv7u/roBDOQCA/7+AQL9/QWw+qQFB/19Anf7EQJ4/V4CXogCXgAAAgB2/+wFCQXEABEAHwAAARQCBCMiJAInNTQSJDMyBBIVJxACIyICBxUUEjMyEjcFCZD++LCs/vaTApIBC6yvAQuQv9C7ttED07m6zAMCqdb+waipATnOadIBQqup/r/VAgEDARX+6/Zr+/7hAQ/9AAIAbwRwAskF1gAFAA0AAAETMxUDIwEzFRYXByY1AZF0xN9Z/t6oA1BJsgSUAUIV/sMBUlt7VTtfu////jL/7AVPBdYAJgAERgAABwAF/cMAAAABAAAAAiMS6JlwgF8PPPUAGQgAAAAAAMTwES4AAAAA1QFS9Pob/dUJMAhzAAAACQACAAAAAAAAeNpjYGRgYM/5x8PAwOn5S/qfF6cBUAQVsAMAb4UEbwADjABkAAAAAAAAAAAB+wAABYAAdgMgAG8Fxv4yAAAAKQApACkAKQBhAH4AigABAAAABwCPABYAVAAFAAEAAAAAAA4AAAIAAiQABgABeNpdjgNyAwAURF/tXqAcdVQbgzo2hrFtXSYHyemyMeabu8A2SdZYWd8BgjDOV9gnOM5XOSQ7ztfm+utz+QYXtMf5Jsd0x/khXnr8UKJMhyoZUqSpc849t9xJzjFQkqTIk1BlokiMa2Vf5CXnuKdXtWGVoCar0pSPc61OiaisLtOUFA3yRKjiH+7VyFCiOMS85o4HXviYMnhZuL9a+iBUSZl3biStoVxrUpbFNE2oKlElpWmejHoJitRIyG6wYuKHP+x45K+G+Ld9LnwzhgAAAHjaY2BmAIP/WQwpDFgAACofAdEA) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* roboto-greek-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./login6.woff2) format('woff2'), url(./login6.woff) format('woff');
  unicode-range: U+0370-03FF;
}

/* roboto-vietnamese-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./login4.woff2) format('woff2'), url(./login5.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-latin-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./login5.woff2) format('woff2'), url(./login4.woff) format('woff');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-latin-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./login3.woff2) format('woff2'), url(./login3.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}* {
	box-sizing: border-box;
	font-family: "Roboto", Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

#root {
    align-items: center;
	display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

#login-container {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	padding: 4px;
	position: relative;
}

#login-stage {
	background-color: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
	flex-grow: 1;
	max-width: 500px;
	padding: 16px;
	position: relative;
}

.login-row {
	position: relative;
}

.login-row input[type=password] {
	padding-right: 48px;
}

button.visibility-btn {
	background: transparent;
	border: 1px solid transparent;
    bottom: 0;
    color: #0000008a;
    cursor: pointer;
	font-size: 0;
    height: 32px;
    position: absolute;
    right: 12px;
}

button.visibility-btn:hover {
	color: #000000c4;
}

button.visibility-btn:before {
	content: "\e8f4";
	font-family: "Material Icons";
	font-size: 24px;
}

button.visibility-btn.hide:before {
	content: "\e8f5";
}

button[type=submit] {
	background: var(--button-color, #0072E5);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	margin: 32px 0 0;
	min-width: 64px;
	outline: 0px;
	padding: 4px 16px;
	text-transform: uppercase;
	transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
	user-select: none;
	width: 100%;
  }

  button[type=submit]:hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
  }

  button[type=submit]:active {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
  }

  .login-error {
	align-items: center;
	background-color: #fdeded;
    color: #5f2120;
	column-gap: 12px;
    display: flex;
    font-size: 0.875rem;
    letter-spacing: .15px;
    line-height: 1.5;
    padding: 6px 16px;
	position: relative;
  }

  .login-error:before {
	color: #d32f2f;
	content: "\e001";
	font-size: 1.2rem;
	font-weight: bold;
	font-family: "Material Icons";
	/* position: absolute; */
  }