/* BizAppJS_Version="1.0.21.1231" */
/* Required style for HTML and BODY to allow the App content to stretch out to full height */
html, body {
  margin: 0px;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

app {
  display: block;
  height: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
}

/*
Commonly used style classes
*/

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.selected {
  background-color : royalblue;
  color : white;
}

.no-select {
  user-select : none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select : none;
  cursor : default;
}

/*
Data Validation Error
*/
.validation-error {
  outline: 2px solid red;
  color:red;
}

.validation-pending {
  outline: 2px solid orange;
}

.validation-error-sign {
  position: relative;
  margin-left:4px;
  color:red;
  display:inline-block;
  user-select : none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select : none;
  cursor : default;  
}

/* The following three css classes are for displaying validation error at the top of the input field.  This is the default.  */
.validation-error-sign .validation-error-msg-top {
  visibility: hidden;
  min-width: 150px;
  max-width: 550px;
  background-color: white;
  color: red;
  border:2px solid red;
  text-align: center;
  border-radius: 6px;
  padding: 5px 3px;
  position: absolute;
  z-index: 1;
  bottom: 120%;
  right: 50%;
  
  margin-right:-10px;
}

.validation-error-sign .validation-error-msg-top::after {
  content: " ";
  position: absolute;
  top: 100%;
  
  right: 20px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: red transparent transparent transparent;  
}

.validation-error-sign:hover .validation-error-msg-top {
  visibility: visible;
}


/* The following three css classes are for displaying validation error at the bottom of the input field.  add "validation-error-at-bottom" attribute to the input field  */
.validation-error-sign .validation-error-msg-bottom {
  visibility: hidden;
  min-width: 150px;
  max-width: 550px;
  background-color: white;
  color: red;
  border:2px solid red;
  text-align: center;
  border-radius: 6px;
  padding: 5px 3px;
  position: absolute;
  z-index: 1;
  top: 120%;
  right: 50%;
  margin-right:-10px;
}

.validation-error-sign .validation-error-msg-bottom::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  right: 20px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent red transparent;  
}

.validation-error-sign:hover .validation-error-msg-bottom {
  visibility: visible;
}

/*
ListView related styles
*/

listview {
  display: block;
  border: 1px solid sliver;
  padding: 4px;
  overflow: auto;
}

listview .selected {
  background: azure;
  color: navy;
  font-weight: bold;
}

listview itemtemplate {
  background: white;
  color: black;
}

listview .tile {
  display: inline-block;
  margin: 6px;
  vertical-align: top;
  border: 1px solid silver;
  border-radius: 4px;
  box-shadow: 2px 2px 5px 3px silver;
}

/*
TreeView related styles
*/

treeview {
  display: block;
  padding: 4px;
  overflow: auto;  
}

treeview .selected {
  background: azure;
  color: navy;
  font-weight: bold;  
}


branchcontent {
  display: block;
  margin-left: 20px;
}


/*
TabPanel related styles
*/

tabpanel {
  display : block;  
}

.tab-header {
  display : inline-block;
  padding : 4px 6px;
  margin-right: 1px;
  user-select : none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select : none;
  cursor : default;
  border-radius : 8px 8px 0px 0px;
  border : 2px solid silver;  
}

.tab-header-selected {
  color : black;
  background-color : white;
  border-bottom-color : yellow;
}

.tab-header-unselected {
  color : white;
  background-color : rgba(128,128,128,1.0);
  border-bottom-color : silver;
}

.tab-header-unselected:hover {
  color: yellow;
  border : 2px solid yellow;  
}

.tab-item-container {
  border : 1px solid silver;
  padding : 8px;
  background-color : white;
  position : absolute;  
}

/* backscreen is the CSS class for the Dialog overlay background */
.backscreen {
  background-color : rgba(192, 192, 192, 0.5);
  position : fixed;
  left : 0px;
  top : 0px;
  width : 100%;
  height : 100%;
}


.backscreen-red {
  background-color : rgba(255, 0, 0, 0.5);
  background-blend-mode: luminosity;
  position : fixed;
  left : 0px;
  top : 0px;
  width : 100%;
  height : 100%;
}

/* ItemsContainer */

.itemscontainer-header {
  border: 1px solid gray;
  border-radius: 4px;
}

.itemscontainer-content {
  border: 1px solid silver;
  overflow: auto;
}

/* HoverDropMenu */

hoverdropmenu {
  position: relative;
  display: inline-block;
  margin-top: 4px;

}

hoverdropmenu menu-header {
  background-color: #808080;
  color: white;
  padding: 12px;
  font-size: 14px;
  border: 1px solid #404040;
  cursor: pointer;
}


hoverdropmenu menu-content {
  display: none;
  position: absolute;
  cursor: pointer;
  top:30px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

hoverdropmenu menu-content menu-item {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

hoverdropmenu menu-content menu-item:hover {background-color: #808080; color:white;}

hoverdropmenu:hover menu-header {background-color: #A0A0A0}

/* Split Panel */
vsplitbar {
  width:3px;
  display:block;
  background-image: linear-gradient(to right, #404040,white, white, #404040);
  cursor: col-resize;
}

hsplitbar {
  height:3px;
  display:block;
  background-image: linear-gradient(to bottom, #404040, white, white, #404040);
  cursor: row-resize;
}