:root,
:root.theme-default{
  --logon-blue: #1787C0;
  --logon-indigo: #6610f2;
  --logon-purple: #7630EA;
  --logon-pink: #d63384;
  --logon-red: #dc3545;
  --logon-orange: #fd7e14;
  --logon-yellow: #FEC901;
  --logon-pale-yellow: #fffacd;
  --logon-green: #01A982; /*#198754;*/
  --logon-dark-green: #00634c;
  --logon-teal: #20c997;
  --logon-cyan: #0dcaf0;
  --logon-white: #fff;
  --logon-black: #000;
  --logon-gray: #6c757d;
  --logon-gray-dark: #333;
  
  --logon-gray-050: rgb(249, 249, 249); 	/* F9 */
  --logon-gray-100: rgb(242, 242, 242); 	/* F2 */
  --logon-gray-150: rgb(235, 235, 235); 	/* EB */
  --logon-gray-200: rgb(221, 221, 221); 	/* DD */
  --logon-gray-250: rgb(206, 206, 206); 	/* CE */
  --logon-gray-300: rgb(191, 191, 191); 	/* BF */
  --logon-gray-350: rgb(175, 175, 175); 	/* AF */
  --logon-gray-400: rgb(159, 159, 159); 	/* 9F */
  --logon-gray-450: rgb(143, 143, 143); 	/* 8F */
  --logon-gray-500: rgb(127, 127, 127); 	/* 7F */
  --logon-gray-550: rgb(111, 111, 111); 	/* 6F */
  --logon-gray-600: rgb(95, 95, 95); 		/* 5F */
  --logon-gray-650: rgb(83, 83, 83); 		/* 53 */
  --logon-gray-700: rgb(71, 71, 71); 		/* 47 */
  --logon-gray-750: rgb(59, 59, 59); 		/* 3B */
  --logon-gray-800: rgb(48, 48, 48); 		/* 30 */
  --logon-gray-850: rgb(36, 36, 36); 		/* 24 */
  --logon-gray-900: rgb(24, 24, 24); 		/* 18 */
  --logon-gray-950: rgb(12, 12, 12); 		/* 0C */
  
    
  --logon-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --logon-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --logon-body-font-family: var(--logon-font-sans-serif);
  --logon-body-color: var(--logon-gray-850);
  --logon-body-bg: var(--logon-gray-100);;
  --logon-body-font-size: 10pt;

  --logon-success: #198754;
  --logon-info: #0dcaf0;
  --logon-warning: #ffc107;
  --logon-danger: #dc3545;
  
  --logon-button-color: #FFF;
  --logon-button-background: #D35400;
  --logon-button-background-hover: #BA4A00;
}
:root.theme-dark{
  --logon-body-color: var(--logon-gray-250);
  --logon-body-bg: var(--logon-gray-800);
  --logon-green: #00634c;
  
  --logon-button-color: #FFF;
  --logon-button-background: #82708A; /*#3498DB;*/
  --logon-button-background-hover: #856094; /*#1E7EBE;*/
}
html, body {
	border-collapse: collapse;
	font-family:  var(--logon-body-font-family);
	font-size: var(--logon-body-font-size);
	margin:0px;
	color: var(--logon-body-color);
	font-style:normal;
	font-variant:normal;
	background-color: var(--logon-body-bg);
}

.login-div {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 50vh;
}
.login-div>table>tbody>tr>td {
	padding: 2px 5px 4px 2px;
	text-align: left;
}
.legacy-nav {
	margin: 10px;
}
.legacy-nav > a {
	color: var(--logon-body-color);
	text-decoration: none;
	padding: 5px;
}
.legacy-nav > a:hover {
	color: var(--logon-blue);
	text-decoration: underline;
}
.logon-btn {
	display: block;
	cursor: pointer;
	position: absolute;
	top: 12px;
	right: 20px;
}
.logon-btn>a {
	display: inline-block;
	position: relative;
	color: var(--logon-button-color);
	text-decoration: none;
	font-family: "GothamBold", sans-serif;
	padding: 0 18px;
	font-size: 14px;
	line-height: 40px;
	transform-style: preserve-3d;
	background-color: var(--logon-button-background);
	cursor: pointer;
	border-radius: 6px;
	transition: transform 0.3s ease-out;
}
.logon-btn>a:hover {
	background-color:  var(--logon-button-background-hover);
	font-weight: 500;
	transform: translateY(-4px);
}