html {
	font-family: var(--myfont-family);
	color: var(--font-color);
	font-size: var(--font-size);
	overflow: hidden;
}

.dxe-ContentTable {
	padding: 0px 10px 0px 15px;
	height: calc(100% - 95px);
	overflow-x: hidden;
	overflow-y: auto;
}

.dxe-Content {
	background-color: var(--background);
	height: 100%;
	width: 100%;
}

.dxe-header{
    height: 34px;
    padding-top: 10px;
	margin: 0px 15px;
}

.dxe-header-headline {
	height: 34px;
	padding-top: 10px;
	margin: 0px 15px;
	font-size: var(--font-size-headline);
	font-weight: 700;
}

.dxe-Footer {
	position: fixed;
	bottom: 10px;
	height: 34px;
	right: 23px;
}

.dxe-Fieldset {
	border: none;
	margin: 0px;
	padding: 0px;
}

.dxe-error {
	color: red;
}

.dxe-Table {
	display: table;
	width: 100%;
	background-color: var(--background);
	border: hidden;
	border-spacing: 0px 5px;
	margin-top: -5px;
}

.dxe-TableHeadRow {
	display: table-row;
	width: 100%;
}

.dxe-TableHeadCell {
	display: table-cell;
	width: 20%;
	padding: 10px;
	margin-bottom: 2px;
	background-color: var(--background-tablehead);
	height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--font-color-tablehead);
	font-weight: var(--font-weight-tablehead);
}

.dxe-TableRow {
	display: table-row;
	width: 100%;
}

.dxe-TableCell {
	display: table-cell;
	width: 20%;
	max-width: 0;
	padding: 10px;
	margin-bottom: 2px;
	background-color: var(--control-background-light);
	height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dxe-TableCell-First {
	display: table-cell;
	width: 18px;
	padding: 10px;
	margin-bottom: 2px;
	background-color: var(--control-background-light);
	height: 18px;
	white-space: nowrap;
}

.dxe-TableCell-Second {
	display: table-cell;
	padding: 10px;
	margin-bottom: 2px;
	background-color: var(--control-background-light);
	height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dxe-Circle {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
	vertical-align: sub;
}

/*MeatBall Menu start*/
/* Dropdown Button */
.dropbtn {
	background-color: var(--control-background-light);
	border: none;
	cursor: pointer;
	color: var(--font-color);
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
	font-weight: 700;
	color: var(--control-background);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	overflow: visible;
	color: var(--font-color);
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	right: 8px;
	display: none;
	position: absolute;
	background-color: var(--control-background-light);
	z-index: 1;
	transform: translateY(var(--transform-y));
}

/* Links inside the dropdown */
.dropdown-content div {
	color: var(--font-color);
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content div:hover {
	background-color: var(--control-background);
	color: var(--control-foreground);
	cursor: pointer;
}

.show {
	display: block;
}
/*MeatBall Menu end*/

.dxe-link {
	color: var(--font-color);
	text-decoration: none;
	display: block;
}

.dxe-action:hover,
.dxe-link:hover {
	cursor: pointer;
}

.dxe-Text {
	margin: 1.2rem 0 .3rem;
	font-size: var(--font-size);
}

.dxe-Text-small {
	font-size: var(--font-size-small);
}

.dxe-DropDown {
	border-bottom-left-radius: 3px;
	background: var(--control-background-light);
	border: solid transparent;
	color: var(--font-color);
	width: 100%;
	height: 34px;
	outline: none;
	font-family: var(--myfont-family);
}

.dxe-DropDown-Input {
	background-color: var(--control-background-light);
	position: absolute;
	top: 0px;
	width: 98%;
	height: 34px;
	border: solid transparent;
	color: var(--font-control);
	width: calc(100% - 34px);
	outline: none;
	font-family: var(--myfont-family);
}


.dxe-label {
	display: block;
	padding-bottom: 0.5em;
	font-weight: 400;
}

.dxe-button-footer {
	border-radius: .2rem;
	border-style: var(--button-border-style);
	border-color: var(--button-border-color);
	border-width: var(--button-border-width);
	font-weight: var(--button-font-weight);
	background: var(--control-background);
	color: var(--control-foreground);
	height: 32px;
	min-width: 96px;
	padding: 0 12px;
	margin-left: 5px;
}

.dxe-button-footer:hover {
	background: var(--control-hoover);
}

.dxe-button-footer-left {
	position: fixed;
	left: 18px;
}

.dxe-button-footer:disabled {
	background-color: var(--control-disabled);
}

input[type="checkbox"] {
	position: absolute;
	right: 38px;
	display: none;
}

input[type="checkbox"] + * {
	display: inline-block;
	line-height: 1em;
	height: 1em;
	width: 1em;
	border: 0.0625em solid #666;
	right: 38px;
}

input[type="checkbox"] + *:before {
	content: "";
	position: relative;
	display: block;
	transition: all 0.5s;
	color: var(--control-background-light);

}

input[type="checkbox"] + i {
	border-radius: 0.25em;
	background: var(--control-background-light);
}

input[type="checkbox"] + i:before {
	content: "\2713";
	color: var(--control-background-light);

	transform: scale(0.9);
}

input[type="checkbox"]:checked + i {
	background: var(--control-background);
}

input[type="checkbox"]:checked + i:before {
	transform: scale(0.9);
}

.dxe-text-input {
	background: var(--control-background-light);
	border: 0 solid transparent;
	border-radius: 3px;
	outline: none;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
}

.dxe-text-input:focus {
	border-bottom-color: var(--control-background);
	border-bottom-width: .2rem
}

.dxe-Overlay {
	height: 100%;
	z-index:2;
	background-color: var(--background);
	opacity: 0.8;
}

.dxe-status-display {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 70px;
	margin-left: -125px;
	margin-top: -35px;
	text-align: center;
	z-index:2;
}

.dxe-status-spinner {
	width: 28px;
	margin-top: 10px;
	margin-left: 111px;
	z-index:2;
}

.ms-spinner-circle{
	background-color: var(--waiting-spinner);
}

/* scrollbar - Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar: var(--scrollbar) transparent;
}

/* scrollbar - Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar);
  border-radius: 20px;
  border: 3px solid transparent;
}