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

.dxe-Html {
	height: 100%;
}

.dxe-Body {
	background-color: var(--background);
}

.dxe-Body-Dialog {
	background-color: var(--background);
	overflow-x: hidden;
	margin: 0px;
}

.dxe-PageBody {
	background-color: var(--background);
	padding: 0px 22px 0px 22px;
	margin: 0px;
}

.dxe-NavigationBody {
	background-color: var(--background);
	padding: 4px 22px 0px 22px;
	margin: 0px;
}

.dxe-NavigationLeft {
	float: left; 
	display: flex;
}

.dxe-NavigationRight {
	float: none; 
	overflow: hidden; 
	text-align:right;
}

.dxe-HomeContent {
	background-color: var(--background);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
}

.dxe-Page {
	position: relative;
}

.dxe-PageTop {
	position: absolute;
	top: 15px;
}

.dxe-PageLeft {
	left: 0px;
	width: 215px;
}

.dxe-PageRight {
	right: 0px;
}

.dxe-PageMain {
	position: absolute;
	top: 75px;
	width: 100%;
}

.dxe-FramePageDiv {
	position: relative;
	top: 0px;
}

.dxe-FrameNavigationDiv {
	position: relative;
	bottom: 0px;
	height: 39px;
	border-top: 1px solid var(--seperator-line);
}

.dxe-FramePage {
	display: block;
	width: 100%;
	height: calc(100vh - 39px); /*39px is the height of the FrameNavigation*/
	border: none;
}

.dxe-FrameNavigation {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

.dxe-FrameFiling {
	display: block;
	width: 100%;
	height: calc(100vh - 96px);
	border: none;
	padding: 0px;
	width: 100%;
}

.dxe-Overlay {
	height: calc(100vh - 70px);
}

.dxe-ButtonContainer {
	width: 100%;
	position: relative;
	left: -5px;
}

.dxe-ButtonContainerRight {
	bottom: 0;
	width: 100%;
	padding-left: 10px;
	padding-bottom: 15px;
	text-align: right; 
	margin-right: -4px; 
	font-size: 0px;
}

.dxe-ButtonContainerDialog {
	position: fixed;
	bottom: 1px;
	right: 0px;
}

.dxe-DropDown {
	color: var(--font-color);
	background-color: var(--control-background-light);
	border-color: var(--button-border-color);
	border-style: solid;
	border-width: 1px;
	width: 100%;
	height: 34px;
	padding-left: 2px;
}

.dxe-DropDown:focus {
	outline: none;
}

.dxe-DropDown:disabled {
    opacity: 0.3;
}

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

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

.dxe-Section { }

.dxe-SectionLabel {
	vertical-align: text-bottom;
	font-size: 16px;
}

.dxe-InnerSection { }

#sectionCheckbox ~ #sectionButtonClose {
	display: inline;
}

#sectionCheckbox ~ #sectionButtonOpen {
	display: none;
}

#sectionCheckbox:checked ~ #sectionButtonClose {
	display: none;
}

#sectionCheckbox:checked ~ #sectionButtonOpen {
	display: inline;
}

.dxe-Text {
	vertical-align: text-bottom;
	font-size: 16px;
}

.dxe-Text-About {
	vertical-align: text-bottom;
	font-size: 16px;
	position: absolute;
	bottom: 0px;
	width: 100%;
	left: var(--indent-about);
	padding-left: 30px;
	padding-bottom: 30px;
	color: var(--font-color-about);
}

.dxe-Small {
	font-size: small;
}

.dxe-Big-Button {
	min-width: 50px;
	height: 50px;
	padding-top: 6px;
	padding-left: 5px;
	padding-right: 7px;
	border-style: none !important;
	background-color: var(--button-background) !important;
}

.dxe-Small-Button {
	min-width: 25px;
	height: 25px;
	padding-left: 5px;
	padding-right: 5px;
	border-style: none !important;
	background-color: var(--button2-background) !important;
}

.dxe-Medium-Button {
	vertical-align: bottom;
}

.dxe-Big-Button:hover,
.dxe-Link-Button:hover,
.dxe-Small-Button:hover {
	background-color: var(--button2-hoover) !important;
}

.dxe-Big-Button:disabled {
	background-color: var(--button-disabled) !important;
}

.dxe-Small-Button:disabled {
	background-color: var(--button2-disabled) !important;
}

.dxe-Taskpane-Button {
	min-width: 30px;
	padding-left: 5px;
	padding-right: 5px;
	border-style: none !important;
	background-color: var(--background) !important;
}

.dxe-Link-Button {
	min-width: 24px;
	height: 26px;
	padding: 4px;
	border-style: none;
	background-color: var(--background);
	position: relative;
	left: -5px;
	bottom: -5px;
}

.dxe-Link-Button > img {
	width: 18px;
	height: 18px;
}

.dxe-Link-Label {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	vertical-align: middle;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	left: -5px;
	width: 200px;
	display: inline-block;
}

.dxe-Taskpane-Button:hover {
	background-color: var(--button2-hoover) !important;
}

.dxe-Taskpane-Button:disabled {
	background-color: var(--button2-disabled) !important;
}

.dxe-Taskpane-Button[disabled] * {
	opacity: 0.5;
}

.dxe-Dialog-Action {
	margin: 0px 4px;
}

.dxe-Button {
	width: inherit;
	text-align: left;
	background-color: var(--background) !important;
	border-style: none !important;
	padding: 5px;
}

.dxe-Button:hover {
	background-color: var(--control-hoover) !important;
}

.dxe-Button:disabled {
	background-color: var(--background) !important;
}

.dxe-Button[disabled] * {
	color: var(--control-disabled) !important;
}

.dxe-Button > img {
	width: 18px;
	height: 18px;
	margin-right: 2px;
}

.dxe-Dialog-Button {
	width: inherit;
	padding: 0px 16px;
	text-align: center;
	background-color: var(--background) !important;
	border-color: var(--button-border-color) !important;
	border-style: solid !important;
	border-width: 1px !important;
}

.dxe-Dialog-Button:hover {
	background-color: var(--control-hoover) !important;
}

.dxe-Dialog-Button:disabled {
	background-color: var(--background) !important;
}

.dxe-Dialog-Button[disabled] * {
	color: var(--control-disabled) !important;
}

.dxe-Button-Label {
	color: var(--font-color) !important;
	vertical-align: top;
	font-weight: normal;
}

.dxe-Button-Label:hover {
	vertical-align: top;
	font-weight: normal;
}

.dxe-Label {
	vertical-align: text-bottom;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.dxe-LabelCaption {
	vertical-align: baseline;
	font-weight: 600;
}

.dxe-Checkbox,
.dxe-RadioButton {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.dxe-Checkbox > input,
.dxe-RadioButton > input { /* HIDE ORG RADIO */
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.dxe-RadioButton > i { /* RADIO STYLES; DEFAULT <i> STYLE */
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	transition: 0.2s;
	box-shadow: inset 0 0 0 9px var(--control-background-light);
	border: 1px solid var(--neutralPrimary);
	background-color: var(--control-background-light);
	margin: 5px 2px 5px 0px;
}

.dxe-RadioButton > input:checked + i { /* (RADIO CHECKED) <i> STYLE */
	box-shadow: inset 0 0 0 4px var(--control-background-light);
	background-color: var(--checkbox-background);
	border-color: var(--checkbox-background);
}

.dxe-RadioButton > i:hover { /* HOVER <i> STYLE */
	box-shadow: inset 0 0 0 4px var(--control-background-light);
	background-color: var(--checkbox-hoover);
}

.dxe-LabelCaption::after,
.dxe-Checkbox::after,
.dxe-RadioButton::after { /* Line Break after the lable */
	content: "\a";
	white-space: pre;
}

.dxe-Checkbox > i { /* CHECKBOX STYLES; DEFAULT <i> STYLE */
	line-height: 1.3em;
	height: 1.2em;
	width: 1.2em;
	vertical-align: middle;
	border: 0.0625em solid #666;
	border-radius: 0.15em;
	margin: 5px 2px 5px 0px;
}

.dxe-Checkbox > input:checked + i {/* (CHECKBOX CHECKED) <i> STYLE */
	background-color: var(--checkbox-background);
	border-color: var(--checkbox-background);
}

.dxe-Checkbox > input:disabled + i {
	border-color: var(--checkbox-border);
}

.dxe-Checkbox > input:not([disabled]) + i:hover:before { /* HOVER <i> STYLE */
	color:var(--checkbox-hoover);
}

.dxe-Checkbox > i:before {
	content: "\E73E";
	color: var(--control-background-light);
	margin-left: 2px;
}

.dxe-Error {
	border-style: solid !important;
	border-color: red;
}

.dxe-Icon {
	color: var(--font-color);
	font-size: 18px;
	margin-top: 2px;
}

.dxe-Image {
	margin-top: 2px;
}