@CHARSET "UTF-8";

/* @import url(https://fonts.googleapis.com/css?family=Roboto); */
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-Thin.ttf);
	font-style: normal;
	font-weight: 100;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-Light.ttf);
	font-style: normal;
	font-weight: 300;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-Regular.ttf);
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-Medium.ttf);
	font-style: normal;
	font-weight: 500;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-Bold.ttf);
	font-style: normal;
	font-weight: 700;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-Black.ttf);
	font-style: normal;
	font-weight: 900;
}

@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-ThinItalic.ttf);
	font-style: italic;
	font-weight: 100;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-LightItalic.ttf);
	font-style: italic;
	font-weight: 300;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-Italic.ttf);
	font-style: italic;
	font-weight: 400;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-MediumItalic.ttf);
	font-style: italic;
	font-weight: 500;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-BoldItalic.ttf);
	font-style: italic;
	font-weight: 700;
}
@font-face {
	font-family: Roboto;
	src: url(/intranet/System/Style/Roboto/Roboto-BlackItalic.ttf);
	font-style: italic;
	font-weight: 900;
}

/* Material Font Classes */
.roboto {
	font-family: "Roboto", sans-serif;
}
.materialText.thin {
	font-weight: 100;
}
.materialText.light {
	font-weight: 300;
}
.materialText.regular {
	font-weight: 400;
}
.materialText.medium {
	font-weight: 500;
}
.materialText.bold {
	font-weight: 700;
}
.materialText.black {
	font-weight: 900;
}

/* Material Text Classes */
.materialText {
	font-family: "Roboto", sans-serif;
}

/*
 * *Black* text on light backgrounds
 * Changing to color:rgba so that this only affects the color of text and does not apply oppacity effects to child elements
 */
.materialText.lightBackground {
	/*color: #000000;*/
}
.materialText.primary.lightBackground {
	color:rgba(0,0,0,.87);/*opacity: 0.87;*/
}
.materialText.secondary.lightBackground {
	color:rgba(0,0,0,.54);/*opacity: 0.54;*/
}
.materialText.hint.lightBackground, .materialText.disabled.lightBackground, .materialText.icon.lightBackground {
	color:rgba(0,0,0,.38);/*opacity: 0.38;*/
}
.materialText.divider.lightBackground {
	color:rgba(0,0,0,.12);/*opacity: 0.12;*/
}

/*
 * *White* text on dark backgrounds
 * Changing to color:rgba so that this only affects the color of text and does not apply oppacity effects to child elements
 */
.materialText.darkBackground {
	/*color: #FFFFFF;*/
}
.materialText.primary.darkBackground {
	color:rgba(255,255,255,1);/*opacity: 1.0;*/
}
.materialText.secondary.darkBackground {
	color:rgba(255,255,255,.70);/*opacity: 0.70;*/
}
.materialText.hint.darkBackground, .materialText.disabled.darkBackground, .materialText.icon.darkBackground {
	color:rgba(255,255,255,.50);/*opacity: 0.50;*/
}
.materialText.divider.darkBackground {
	color:rgba(255,255,255,.12);/*opacity: 0.12;*/
}

/*
 * Text elements
 */
.materialTextDisplay4 {
	font-weight: 300;
	font-size: 112px;
}
.materialTextDisplay3 {
	font-weight: 400;
	font-size: 56px;
}
.materialTextDisplay2 {
	font-weight: 400;
	font-size: 45px;
	line-height: 48px;
}
.materialTextDisplay1 {
	font-weight: 400;
	font-size: 34px;
	line-height: 40px;
}
.materialTextHeadline {
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
}
.materialTextTitle {
	font-weight: 500;
	font-size: 20px;
}
.materialTextSubheading, .materialTextSubheading1, .materialTextSubheading2 {
	font-weight: 400;
	font-size: 15px;
}
.materialTextSubheading2 {
	line-height: 28px;
}
.materialTextSubheading1 {
	line-height: 24px;
}
.materialTextBody2 {
	font-weight: 500;
	font-size: 13px;
	line-height: 24px;
}
.materialTextBody1 {
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
}
.materialTextCaption {
	font-weight: 400;
	font-size: 12px;
}
.materialTextButton {
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
}

/* Generic Page Layout */
body.material {
	background-color: #fafafa;
}
body.material #contentBodyWrapper {
	background-color: unset !important;
}
/*
This does not belong here. It has nothing to do with material.
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
*/

#contentBodyWrapper .material{
    display: flex;
    justify-content: center;
    top: 91px;
}

input[type=number] {
    -moz-appearance:textfield;
	-webkit-appearance:textfield;
}
#indexAppHead>h1 {
	cursor: pointer;
}

/* Material Chip */

.materialChip {
    align-items: center;
    background-color: #e0e0e0;
    border-radius: 32px;
    display: inline-flex;
    height: 32px;
    width: -moz-fit-content;
	width: -webkit-fit-content;
}
.materialChip > span {
    color: #000;
    font-family: Roboto;
    font-size: 13px;
    font-weight: 400;
    line-height: 32px;
    opacity: 0.87;
    padding-left: 12px;
}
.materialChip > i {
    color: #000;
    cursor: pointer;
    font-size: 20px;
    height: 24px;
    line-height: 24px;
    margin: 0 4px;
    opacity: 0.38;
    text-align: center;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
    width: 24px;
}
.materialChip > i:hover {
    opacity: 0.54;
}

/* Material InformaTip - Works well with One line Text based items
To Use: set a value to data-informatip on the element with a .materialInformatTip class
*/
.materialInformaTip{
	position:relative;
}

.materialInformaTip:after{
	content:'?';
	margin-left:10px;
	font-size:14px;
	color:#999999;
}

.materialInformaTip.noQM:after{
	content:'';
}

.materialInformaTip:hover::before{
	content:attr(data-informatip);
	position:absolute;
	top:20px;
	padding:8px;
    background-color: rgba(97, 97, 97, 1);
	color:#efefef;
	z-index:500;
	min-width:200px;
    font-size:12px;
}

.materialInformaTip.noAfter:after{
	content:'';
	margin-left:0px;
}

.materialInformaTip.leftAlignInformatTip:hover::before{
	right:0px;
}

/* Material Tooltip */
#materialTooltip {
	align-items: center;
    background-color: rgba(97, 97, 97, 1);
    border-radius: 2px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    font-family: Roboto;
    font-size: 10px;
    font-weight: 500;
    justify-content: center;
    line-height: 22px;
    overflow: visible;
    padding: 0 8px;
    position: absolute;
    z-index: 101;
}

/* Material Card */
.materialMenuCard, .materialCard, .materialSettingsCard, .materialTableCard, .materialListCard, .materialCustomCard  {
	background-color: #f5f5f5;
	box-sizing: border-box;
	border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26);
	margin: 5px;
	width: 500px;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}
.materialSettingsCard, .materialListCard, .materialCustomCard  {
	width: unset;
	padding: 24px;
	background-color: white;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
	margin-bottom: 16px;
}
.materialCustomCard > *:not(:first-child){
	margin-top: 10px;
}
.materialTableCard {
	width: unset;
	background-color: white;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
	min-width: 50%;
}
.materialTableCardTitle {
	padding: 24px;
}
.materialTableCardTableWrapper {
	width: 100%;
	overflow-y: auto;
}
.materialTableCard table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}
.materialTableCard td,th{
	font-weight: inherit;
	font-size: inherit;
	font-family: inherit;
}
.materialTableCard tr:nth-child(n+1) {
	box-sizing: border-box;
	height: 48px;
	border-bottom: 1px solid #e0e0e0;
}
.materialTableCard tbody td {
	background-color: inherit;
}
.materialTableCard td.materialTableDataNumeric, .materialTableCard th.materialTableDataNumeric {
	text-align: right;
}
.materialTableCard td:first-child, .materialTableCard th:first-child {
    padding-left: 24px;
    padding-right: 24px;
}
.materialTableCard td:first-child:not(.materialTableDataCheckbox), .materialTableCard th:first-child:not(.materialTableDataCheckbox) {
    padding-right: 56px;
}
.materialTableCard td:nth-child(2), .materialTableCard th:nth-child(2) {
    padding-left: 0 !important;
}
.materialTableCard td:last-child, .materialTableCard th:last-child {
	padding-right: 24px;
}
.materialTableCard td:not(:first-child), .materialTableCard th:not(:first-child){
	padding-left: 56px;
}
.materialTableCard tbody tr {
	transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.materialTableCard tbody tr.selected {
	background-color: #f5f5f5;
}
.materialTableCard tbody tr:hover {
	background-color: #eeeeee;
}
.materialTableCardTitle .material-icons {
    cursor: pointer;
    float: right;
    opacity: 0.54;
	transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.materialTableCardTitle .material-icons:hover {
	opacity: 0.87;
}
.materialTableCardFoot {
	align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 56px;
    justify-content: flex-end;
	font-size: 12px;
}
.materialTableCardFoot .rowsPerPage {
	align-items: center;
    display: flex;
	justify-content: flex-end;
	min-width: 64px;
}
.materialTableCardFoot .rowsPerPage select {
	-moz-appearance: none;
    background-color: unset;
    border-style: none;
    font-family: inherit;
    font-size: inherit;
    margin-right: -24px;
    padding-right: 24px;
    text-align: right;
    z-index: 1;
}
.materialTableCardFoot .rowsPerPage div {
	cursor: pointer;
}
.materialTableCardFoot .curPage {
	margin-left: 32px;
}
.materialTableCardFoot .previousPage, .materialTableCardFoot .nextPage {
	opacity: 0.54;
	cursor: pointer;
}
.materialTableCardFoot .previousPage {
	margin-left: 32px;
}
.materialTableCardFoot .nextPage {
	margin-right: 14px;
	margin-left: 24px;
}

.materialTableInput {
    position: absolute;
    background-color: #fafafa;
    padding: 8px 24px 0 24px;
	width: -moz-available;
}
.materialTableInput input {
	font-size: 10pt;
}

.materialTableInput .materialFormInputErrorLabel{
	height: 15px;
	bottom: -1px;
}

.materialCard {
	background-color: #fafafa;
}
.materialMenuCard:hover, .materialCard:hover {
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.materialMenuCard:active, .materialCardClickable:active {
	background-color: #dedede;
}
.materialMenuCardUpper, .materialCardUpper {
	/* background-color: #4CAF50; */
}
.materialMenuCardUpper, .materialMenuCardLower, .materialCardUpper, .materialCardLower {
	box-sizing: border-box;
	padding: 16px;
}
.materialCard {
	box-shadow: none;
	border: 1px solid #dbdbdb;
}
.materialCardUpper {
	padding-top: 24px;
}
.materialCardLower {
	padding-top: 0px;
}
.materialMenuCardTitle, .materialCardTitle {
	box-sizing: border-box;
	font-size: 24px;
	font-family: 'Roboto', sans-serif;
	color: rgba(255,255,255,0.83);
}
.materialCardTitle {
	color: rgba(0,0,0,0.83);
}
.materialMenuCardContent, .materialCardContent {
	box-sizing: border-box;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	color: rgba(0,0,0,0.72);
}
.materialCardContent {
    margin: 0;
    margin-block-end: 0;
    margin-block-start: 0;
}
.materialCardButtonCont {
    display: flex;
	justify-content: flex-end;
    padding: 8px;
}
.materialCardButtonCont>.materialFormFlatButton:first-child {
	margin-left: 0px;
}

/* Material Action Button */
.materialActionPositionFixedBottomRight{
    position:fixed;
	bottom:20px;
	right:20px;
	z-index:2000;
}
.materialActionButtonContainer {
	align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}
.materialActionButtonFlowDown {
	flex-flow: column nowrap;
}
.materialActionButtonFlowDown .materialActionButtonMemberLabel {
	margin-left: 5px;
}
.materialActionButtonFlowUp {
	flex-flow: column-reverse nowrap;
}
.materialActionButtonFlowRight {
	flex-flow: row nowrap;
}
.materialActionButtonFlowLeft {
	flex-flow: row-reverse nowrap;
}
.materialActionButtonFlowLeft .materialActionButtonMember::after {
	right: unset;
	transform: rotate(-45deg) translateY(-45px) translateX(15px);
}
.materialActionPositionFixedBottomRight .materialActionButtonMember::after {
	right: 73px;
	margin-left: 0;
}
.materialActionButton {
    align-items: center;
    border-radius: 30px;
    box-shadow: 0 2px 7px -2px black;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    font-size: 25px;
    height: 35px;
    justify-content: flex-start;
    margin: 6px 3px;
}
.materialActionButtonMember > span {
    margin: 5px;
	width: 25px;
}
.materialActionButton > i {
	width: 25px;
	height: 25px;
	overflow: hidden;
}
.materialActionButtonMember {
	color: rgba(0,0,0,0.53);
	background-color: #e5e5e5;
}
.materialActionButtonMember::after {
    content: attr(data-label);
    font-size: 10px;
    font-weight: bold;
    color: black;
    background-color: #fafafa;
    position: fixed;
    margin-left: 45px;
}
.materialActionButtonMemberLabel {
    box-shadow: 0 2px 7px -2px black;
    color: rgba(0, 0, 0, 0.93);
    font-size: 11px;
    font-weight: bold;
    line-height: 0;
    position: fixed;
    width: -moz-max-content;
	width: -webkit-max-content;
}
.materialActionButtonMemberLabelContent {
    background-color: #efefef;
    border-radius: 2px;
    opacity: 0.93;
}
.materialActionButtonMember:hover {
	box-shadow: 0 2px 7px 0px black;
}
.materialActionButtonMemberHidden {
	width: inherit;
	height: inherit;
	opacity: 0;
	visibility:hidden;
	transition: opacity 0.1s ease-in-out 0s, width 0.1s ease-in-out 0s, height 0.1s ease-in-out 0s, visibility 0.1s ease-in-out 0s !important;
}
.materialActionButtonBase {
	/* Material 400 background-color */
	/* background-color: #42A5F5; */
	color: rgba(255,255,255,0.94);
    height: 45px;
    width: 45px;
	transition: transform 0.1s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
	opacity: 0.5;
	align-items: center;
    justify-content: center;
}
.materialActionButtonBase > span {
    margin: 0;
}
.materialActionButtonBase .material-icons {
    font-size: 32px;
}
.materialActionButtonBase:hover {
	opacity: 1;
}
.materialActionButtonBaseOpen {
	transform: rotate(45deg);
	opacity: 1;
}

/* Generic MaterialForm Elements */
.materialFormModalShadow {
	box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                  0  6px 30px 5px rgba(0, 0, 0, 0.12),
                  0  8px 10px -5px rgba(0, 0, 0, 0.4) !important;
}
	/* MaterialForm */
.materialForm {
	border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26);
    z-index: 10;
}
.materialFormUpper {
	/* background-color: #2196f3; */
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.26);
    color: rgba(255, 255, 255, 0.93);
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    position: relative;
    z-index: 1;
}
.materialFormLower {
	background-color: #f5f5f5;
    padding: 3px 10px 8px;
    position: relative;
    z-index: 0;
}

	/* MaterialConfirmationDialog */
.materialConfirmationDialog, .materialNotificationDialog {
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.52);
    left: calc(50% - 125px);
    position: fixed;
    top: 30%;
    width: 250px;
	border-radius: 2px;
}
.materialConfirmationDialogContent, .materialNotificationDialogContent {
	color: rgba(0, 0, 0, 0.54);
    font-family: "Roboto",sans-serif;
    font-size: 13px;
    padding-bottom: 24px;
    padding-left: 16px;
    padding-right: 16px;
}
.materialConfirmationDialogContent *, .materialNotificationDialogContent *{
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	color: inherit;
	opacity: inherit;
}
.materialConfirmationDialog>.materialFormUpper, .materialNotificationDialog>.materialFormUpper{
	background-color: #f5f5f5;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0.83);
    font-weight: bold;
    padding: 24px 24px 20px;
	border-radius: 2px 2px 0 0;
}
.materialConfirmationDialog>.materialFormLower, .materialNotificationDialog>.materialFormLower{
	/* padding: 0 !important; */
	border-radius: 0 0 2px 2px;
	padding: 0 8px 8px;
}

.materialConfirmationDialog>.materialFormLower>.materialConfirmationDialogContent{
	max-height: 300px;
	overflow-y: auto;
}

.materialConfirmationDialog>.materialFormLower>.materialFormFlatButtonCont, .materialNotificationDialog>.materialFormLower>.materialFormFlatButtonCont{
	display: flex;
    flex-flow: row-reverse nowrap;
    height: unset;
    justify-content: flex-start;
    margin-top: 0;
    width: unset;
}
.materialConfirmationDialog>.materialFormLower>.materialFormFlatButtonCont>.materialFormFlatButton, .materialNotificationDialog>.materialFormLower>.materialFormFlatButtonCont>.materialFormFlatButton{
	position: unset;
	float: unset;
    font-size: 14px;
}

.materialHappyDialog{
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.52);
    left: calc(50% - 125px);
    position: fixed;
    top: 0;
    width: 250px;
    border-radius: 2px;
	z-index:2000;
}

/* Material Form Container*/
.materialFormContainer, .materialFormListContainer {
	background-color: #f5f5f5;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26);
    overflow: auto;
    z-index: 5;
}

.materialContainer{
    background-color: #f5f5f5;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26);
    z-index: 5;
}

.materialFormContainerUpper, .materialFormListContainerUpper {
	/* Material Design 700 Color */
	/* background-color: #7b1fa2; */
	/* background-color: #388E3C; */
	border-radius: 2px 2px 0 0;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.26);
    color: rgba(255, 255, 255, 0.93);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 16px;
    padding: 14px;
    position: relative;
    z-index: 4;
}
.materialFormContainerUpperIcon, .materialFormListContainerUpperIcon {
	color: rgba(255, 255, 255, 0.93);
    float: right;
    position: relative;
}
.materialFormContainerUpperIcon:hover, .materialFormListContainerUpperIcon:hover {
	cursor: pointer;
}
.materialFormContainerLower, .materialFormListContainerLower {
    height: calc(100% - 58px);
    padding: 3px 10px 10px;
    position: relative;
    z-index: 3;
}
	/* MaterialFormList */

.materialFormListContainerLower {
    padding: 4px 0 10px;
}
.materialFormList {
	height: 100%;
    overflow-y: auto;
    width: 100%;
}
.materialFormListItem {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.72);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 16px;
    padding: 13.5px 16px;
}

.materialFormListItemIcon,
.materialFormListItemIconRight {
	color: rgba(0, 0, 0, 0.63);
    float: right;
    line-height: inherit !important;
    position: relative;
	margin-left: 15px;
}

.materialFormListItemIcon:focus,
.materialFormListItemIconRight:focus{
	color: rgba(0, 0, 0, 0.63);
}

.materialFormListItemIcon:hover,
.materialFormListItemIconRight:hover, .materialFormTableRowIcon:hover {
	cursor: pointer;
	color: rgba(0, 145, 234, 0.93);
}
.materialFormListItemIcon{
	float:none;
	margin:0px;
}
.materialFormListItemIcon.disabled,
.materialFormListItemIconRight.disabled{
	cursor: default;
	color: rgba(0, 0, 0, 0.3);
}
.materialFormListItemIcon.disabled:hover,
.materialFormListItemIconRight.disabled:hover{
	color: rgba(0, 0, 0, 0.3);
}
.materialFormListItem:hover{
	background-color: #E0E0E0;
	cursor: pointer;
}
.materialFormListItem:active,.materialFormListItemSelected{
	background-color: #BDBDBD;
}
/* Material Form Table*/
.materialFormTable {
	width: 100%;
	color: rgba(0, 0, 0, 0.83);
    font-size: 15px;
}
.materialFormTable>tbody>tr>td {
    padding:10px;
	border-top:1px solid rgba(0,0,0,0.26);
	border-bottom:0px;
}
.materialFormTable>thead>tr>th {
    font-family: 'Roboto', sans-serif;
    text-align: center;
	padding:10px;
}
.materialFormTableRowIcon {
	color: rgba(0, 0, 0, 0.63);
    line-height: inherit !important;
}
.materialFormTableRowOdd {
	background-color: rgba(0, 0, 0, 0.15) !important;
}
.materialFormTableData {
	font-family: 'Roboto', sans-serif;
	/* font-size: 11pt; */
	text-align: center;
}
.materialFormTableData.alignTextLeft {
    text-align: left;
}
.materialFormTableData.alignTextRight {
    text-align: right;
}
.materialFormTableModalWrapper {

}

	/* MaterialConfigurationForm */
.materialConfigurationForm {
	height: 500px;
    margin-top: 10px;
    min-width: 900px;
    position: relative;
    width: 75%;
	z-index: 1;
}

	/* MaterialFormInput and MaterialFormSelect */
.materialFormInputLabel{
	position: relative;
	top: 3px;
	font-family: 'Roboto', sans-serif;
    font-size: 12px;
}
.materialFormInputErrorLabel, .materialFormSelectErrorLabel {
	position: relative;
	bottom: -3px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	width: 100%;
	color: #F44336;
	display:inline-block;
}
.materialFormInput,.materialFormSelect{
	background-color: transparent;
    border-color: rgba(0,0,0,0.12);
    border-style: none none solid;
	font-size: 16px;
    border-width: 0 0 1px;
    font-family: 'Roboto', sans-serif;
	padding-bottom: 1px;
    width: 100%;
}

.materialFormSelectIcon {
    margin-left: -20px;
    margin-top: 5px;
    opacity: 0.72;
    pointer-events: none;
    position: absolute;
}

/*
Firefox placeholder text with anything less than a 1 opacity fails contrast tests, even with 1 it fails but not nearly as bad
*/
.materialFormInput {
	color: rgba(0,0,0);	/* Default text color is faded, but will be adjusted to opaque if JS is triggered */
	height: 35px;
}

textarea.materialFormInput{
    margin-top:7px;
	min-height:70px;
}

/* This is a div that is in the place of a textarea.materialFormInput. We have to use these rules to make it behave properly. */
.materialFormTextAreaFake {
    height: unset;
    padding: 7px 1px;
}

.materialFormInput:focus,.materialFormSelect:focus {
	border-color: rgba(0, 145, 234, 0.72);
	border-width: 0 0 2px;		/* Set bottom border width to 2px so it's emphasized */
	padding-bottom: 0px;		/* To preserve spacing of the elements, we decrease bottom padding to 0px */

}
.materialFormInput:invalid,.materialFormSelect:invalid {
	border-color: #F44336 !important;
	border-width: 0 0 2px;		/* Set bottom border width to 2px so it's emphasized */
	padding-bottom: 0px;		/* To preserve spacing of the elements, we decrease bottom padding to 0px */
	box-shadow: none;			/* Disable built-in User Agent box-shadow so we only see our styling */
}
.materialFormSelect{
	color: rgba(0,0,0,.54);	/* Firefox placeholder text with anything less than a 1 opacity fails contrast tests, even with 1 it fails but not nearly as bad */
	height: 35px;				/* We have to use height of 36px instead of 35px because selects are super weird like that. */
}
.materialFormSelect.withSize{
	height:auto;
}
.materialFormSelect  option {
	height: 36px;				/* We want all of the options to be the same height as the select itself, so we apply height of 36px */
	display: flex;				/* Since we want the text content of the options to be centered, we have to make them flex boxes. Using line-height doesn't work. */
	align-items: center;		/* This will vertically center the text content of the option since it's a flexbox */
}
.materialFormSelect, .materialFormSelect option, .materialFormSelect optgroup{
	-webkit-appearance : none; 	/* To gain control over the appearance on WebKit */
	-moz-appearance : none; 	/* To gain control over the appearance on Gecko */
	font-style: normal;
	font-family: "Roboto";
}
.materialFormSelect optgroup {
	font-weight: 500;
}
.materialFormOption.placeholder {
	color: rgba(0, 0, 0, 0.33); /* See previous comment about opacity + selects being special. */
}

/* Material Form Switch */
.materialFormSwitch {
	display: flex;
	height: 20px;
	width: 35px;
	align-items: center;
	cursor: pointer;
}
.materialFormSwitch > input {
	display: none;
}
.materialFormSwitchOn>.materialFormSwitchTrack::after {
	background-color: inherit;
	margin-left: 16px;
}
.materialFormSwitchOn>.materialFormSwitchTrack::before {
	background-color: inherit;
}
.materialFormSwitchDisabled:not(.darkBackground) > .materialFormSwitchTrack::after {
	background-color: #bdbdbd;
	opacity: 1;
}
.materialFormSwitchDisabled:not(.darkBackground) > .materialFormSwitchTrack::before {
	background-color: #000000;
	opacity: .12;
}
.materialFormSwitch.darkBackground:not(.materialFormSwitchOn):not(.materialFormSwitchDisabled)>.materialFormSwitchTrack::after {
	background-color: #BDBDBD;
	opacity: 1;
}
.materialFormSwitch.darkBackground:not(.materialFormSwitchOn):not(.materialFormSwitchDisabled)>.materialFormSwitchTrack::before {
	background-color: #FFFFFF;
	opacity: 0.30;
}
.materialFormSwitchDisabled.darkBackground > .materialFormSwitchTrack::after {
	background-color: #424242;
	opacity: 1;
}
.materialFormSwitchDisabled.darkBackground > .materialFormSwitchTrack::before {
	background-color: #FFFFFF;
	opacity: 0.10;
}
.materialFormSwitchOn>.darkBackground>.materialFormSwitchTrack::after {
	background-color: inherit;
	opacity: 1.0;
}
.materialFormSwitchOn>.darkBackground>.materialFormSwitchTrack::before {
	background-color: inherit;
	opacity: 0.50;
}
.materialFormSwitchTrack::after {
    background-color: #fafafa;
    border-radius: 20px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
    content: " ";
    height: 20px;
    margin-left: -1px;
    opacity: 1;
    position: absolute;
    margin-top: -10px;
    transition: all 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 20px;
    z-index: 1;
}
.materialFormSwitchTrack::before {
    background-color: #000000;
    border-radius: 10px;
    content: " ";
    height: 12px;
    opacity: 0.38;
    position: absolute;
    margin-top: -6px;
    width: 35px;
    z-index: 0;
	transition: all 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Material Form Radio Button */
.materialFormRadioButton {
    height: 20px;
    width: 20px;
	border-radius: 20px;
	cursor: pointer;
	background-color: transparent;
}
.materialFormRadioButton > input {
	display: none;
}
.materialFormRadioButtonDisabled>.materialFormRadioButtonInner::before{
	border-color: rgba(0,0,0,0.26);
}
.materialFormRadioButtonDisabled>.materialFormRadioButtonInner::after {
	background-color: rgba(0,0,0,0.26);
}
.materialFormRadioButtonDisabled.darkBackground>.materialFormRadioButtonInner::before{
	border-color: rgba(255,255,255,0.30);
}
.materialFormRadioButtonDisabled.darkBackground>.materialFormRadioButtonInner::after {
	background-color: rgba(255,255,255,0.30);
}
.materialFormRadioButtonInner::before, .materialFormRadioButtonInner::after {
	transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
	box-sizing: border-box;
    content: "";
	position: absolute;
}
.materialFormRadioButton.darkBackground:not(.materialFormRadioButtonOn):not(.materialFormRadioButtonDisabled)>.materialFormRadioButtonInner::before {
	border: 2px solid rgba(255,255,255,0.70);
}
.materialFormRadioButtonInner::before {
    border: 2px solid rgba(0,0,0,0.54);
    border-radius: 20px;
    height: 20px;
    opacity: 1;
    width: 20px;
}
.materialFormRadioButtonOn>.materialFormRadioButtonInner::before {
	border-color: inherit;
}
.materialFormRadioButtonInner::after {
    background-color: inherit;
    border-radius: 10px;
    height: 0px;
    margin-left: 10px;
    margin-top: 10px;
    opacity: 1;
    width: 0px;
}
.materialFormRadioButtonOn>.materialFormRadioButtonInner::after {
	width: 10px;
	height: 10px;
	margin-left: 5px;
	margin-top: 5px;
}

/* Material Form Checkbox */
.materialFormCheckbox {
	width: 21px;
	height: 21px;
	cursor: pointer;
}
.materialFormCheckbox > input {
	display: none;
}
.materialFormCheckboxDisabled:not(.darkBackground)>.materialFormCheckboxInner {
	color: #000000 !important;
	border-color: #000000 !important;
	opacity: 0.26;
}
.materialFormCheckboxDisabled.darkBackground>.materialFormCheckboxInner {
	color: #ffffff !important;
	border-color: #ffffff !important;
	opacity: 0.30;
}
.materialFormCheckboxInner {
	width: 0px;
	height: 0px;
	border: unset;
}
.materialFormCheckboxInner::before, .materialFormCheckboxInner::after {
	transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
	border-radius: 3px;
}
.materialFormCheckbox:not(.materialFormCheckboxOn):not(.darkBackground)>.materialFormCheckboxInner::before {
	background-color: transparent;
	border-color: rgba(0,0,0,0.54);
}
.materialFormCheckbox:not(.materialFormCheckboxOn)>.materialFormCheckboxInner::after {
	background-color: transparent;
}
.materialFormCheckbox:not(.materialFormCheckboxOn).darkBackground>.materialFormCheckboxInner::before {
	background-color: transparent;
	border-color: rgba(255,255,255,0.70);
}
.materialFormCheckbox.materialFormCheckboxOn > .materialFormCheckboxInner::after {
	opacity: 1;
}
.materialFormCheckboxInner::before {
	content: "";
	width: 21px;
	height: 21px;
	border: 2px solid;
	border-color: inherit;
	border-radius: 3px;
	position: absolute;
}
.materialFormCheckboxInner::after {
	content: "check_box";
    display: block;
    font-size: 25px;
    height: 17px;
    line-height: 21px;
    margin-left: -2px;
    opacity: 0;
    text-align: center !important;
    width: 17px;
}

/* MaterialFormCheckboxContainer */
div.materialFormCheckboxContainer{
    margin-top:10 15px 0 0;
}
span.materialFormCheckboxContainer{
	align-items: center;
    display: flex;
}
.materialFormCheckboxContainer > label {
	margin-left: 5px;
	margin-bottom: 0px;
}

	/* MaterialFormFlatButton */
.materialFormFlatButtonCont {
	/* height: 40px; */
	display: flex;
	flex-flow: row-reverse;
    margin-top: 10px;
    width: 100%;
}
.materialFormFlatButtonContSpacer {
	flex-grow: 1;
}
.materialFormFlatButton {
	border-radius: 2px;
	background-color: initial !important;
	/* color: rgba(0, 145, 234, 0.72); */
	opacity: 0.72;
    /* float: right; */
    font-family: 'Roboto', sans-serif;
    font-size: 12pt;
    margin-left: 8px;
    padding: 8px;
    /* position: relative; */
    text-transform:uppercase;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.materialFormFlatButton:hover {
	background-color: rgba(0,0,0,.12) !important;
	cursor: pointer;
}
.materialFormFlatButton:active {
	background-color: rgba(0,0,0,.40) !important;
	cursor: pointer;
}

a.materialFormFlatButton{
	color: rgba(0, 145, 234, 0.72);
}

a.materialFormFlatButton:hover{
    color: rgba(0, 145, 234, 0.72);
}
/* MaterialFormRaisedButton */
.materialFormRaisedButton {
    align-items: center;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
	cursor: pointer;
    display: flex;
    height: 36px;
    padding: 0 16px;
	transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: -moz-fit-content;
	width: -webkit-fit-content;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.materialFormRaisedButton:hover {
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
.materialFormRaisedButton:active {
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
}
input[type="submit"].materialFormRaisedButton{
	border:0px;
}

.materialFormProcessing{
	display:flex;
	align-items:center;
	margin-top:15px;
}

.materialFormProcessing.inForm{
	margin:0 0 15px 0;
}

.materialFormProcessing span{
	margin-right:24px;
}

/* Menu Items */
.materialMenuItem {
	padding: 12px 0;
	display: flex;
	align-items: center;
}
.materialMenuItem:not(:LAST-CHILD) {
	border-bottom: 1px solid #e0e0e0;
}
.materialMenuItemText {
	flex-grow: 1;
}

/*
 *	Material Color
 */
.background {
	background-color: var(--color);
}
.border {
	border-color: var(--color);
}
.color {
	color: var(--color);
}

:host,:root {
	--color-200-red: #EF9A9A;
	--color-400-red: #EF5350;
	--color-500-red: #F44336;
	--color-700-red: #D32F2F;

	--color-200-blue: #90CAF9;
	--color-400-blue: #42A5F5;
	--color-500-blue: #2196F3;
	--color-700-blue: #1976D2;

	--color-200-light-blue: #81D4FA;
	--color-400-light-blue: #29B6F6;
	--color-500-light-blue: #03A9F4;
	--color-700-light-blue: #0288D1;

	--color-200-green: #A5D6A7;
	--color-400-green: #66BB6A;
	--color-500-green: #4CAF50;
	--color-700-green: #388E3C;

	--color-200-purple: #CE93D8;
	--color-400-purple: #AB47BC;
	--color-500-purple: #9C27B0;
	--color-700-purple: #7B1FA2;
}

/* Color Themes */
.material200Red {
	--color: var(--color-200-red);
}
.material400Red {
	--color: var(--color-400-red);
}
.material500Red {
	--color: var(--color-500-red);
}
.material700Red {
	--color: var(--color-700-red);
}

.material200Blue {
	--color: var(--color-200-blue);
}
.material400Blue {
	--color: var(--color-400-blue);
}
.material500Blue {
	--color: var(--color-500-blue);
}
.material700Blue {
	--color: var(--color-700-blue);
}

.material200LightBlue {
	--color: var(--color-200-light-blue);
}
.material400LightBlue {
	--color: var(--color-400-light-blue);
}
.material500LightBlue {
	--color: var(--color-500-light-blue);
}
.material700LightBlue {
	--color: var(--color-700-light-blue);
}

.material200Green {
	--color: var(--color-200-green);
}
.material400Green {
	--color: var(--color-400-green);
}
.material500Green {
	--color: var(--color-500-green);
}
.material700Green {
	--color: var(--color-700-green);
}

.material200Purple {
	--color: var(--color-200-purple);
}
.material400Purple {
	--color: var(--color-400-purple);
}
.material500Purple {
	--color: var(--color-500-purple);
}
.material700Purple {
	--color: var(--color-700-purple);
}

.materialBackgroundInherit {
	background-color: inherit;
}
.materialBackgroundUnset {
	background-color: unset;
}


/**
 * AutoComplete styles
 */
.materialFormInputContainer.autocomplete ul{
	display: none;
	position: absolute;
	border: 1px outset black;
	z-index: 9999;
}
.materialFormInputContainer.autocomplete li{
	padding: 5px;
	background-color: #f5f5f5;
	white-space: pre;
	cursor: default;

	height: 36px;				/* We want all of the options to be the same height as the select itself, so we apply height of 36px */
	display: flex;				/* Since we want the text content of the options to be centered, we have to make them flex boxes. Using line-height doesn't work. */
	align-items: center;		/* This will vertically center the text content of the option since it's a flexbox */
}
.materialFormInputContainer.autocomplete li.highlighted {
	background-color: #3399FF;
	color: white;
}

/**
 * Int Spinner styles
 */
.materialFormInputContainer.intSpinner .decrement{
	float: left;
	margin: 3px;
	cursor: pointer;
}

.materialFormInputContainer.intSpinner .increment{
	float: right;
	margin: 3px;
	cursor: pointer;
}

/**
 * Modal Styles
 */

.materialModalCover{
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 15;
}

.ui_cover {
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 1999;
	left: 0;
	top: 0;
}

._cover {
	background-color: rgba(0, 0, 0, 0.5);
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 15;
	left: 0;
	top: 0;

	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
}
._spinner {
	z-index: 101;
}

/**
 * Material Context Menu Styles
 */
/* Cover is a transparent div that fits the page, prevents scrolling, and allows proper positioning of the context menu. */
.material-context-menu-cover {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0px;
	background-color: transparent;
	z-index: 2000;
}

.material-context-menu {
	border-radius: 6px;
	margin-top: 8px;
	min-width: 180px;
	color: rgb(55, 65, 81);
	box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	background-color: white;
}
.material-context-menu-item {
	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.00938em;
	color: inherit;
	line-height: 1.5;
	padding: 6px 16px;
	cursor: pointer;
	user-select: none;

	display: flex;
	flex-flow: row;
	align-items: center;
}
.material-context-menu-item:hover {
	background-color: rgba(0, 0, 0, 0.04);
}
.material-context-menu-item .material-icons {
	font-size: 18px;
	color: rgba(0, 0, 0, 0.6);
	margin-right: 12px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}