/*[RESPONSIVE-TOUCH]***************************************************************************************************/
*,*{
  touch-action: manipulation;
}
.scrollOnTouch {
  overflow: auto;
}
.scrollable{
  overflow : auto!important;
  -ms-overflow-style:-ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  will-change:transform;
}
/*so u can create an hscroll and vary height*/
.scrollable-y{
  overflow-x : hidden;
  overflow-y : auto!important;
  -ms-overflow-style:-ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  will-change:transform;
}
.scrollable-x{
  overflow-y : hidden;
  overflow-x : auto!important;
  -ms-overflow-style:-ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  will-change:transform;
}

/*[DIALOGS] ***********************************************************************************************************/
/*(SEE POPUPS)*/
/*[DIALOG] ***********************************************************************************************************/
dialog {
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
}

dialog > footer.dialog-footer {
  display: flex;
  background: inherit;
  justify-content: flex-end;
}

/*specificity*/
.dialog-container > dialog.dialog-align-viewport[data-position=viewport] {
  top: 0;
  height: auto;
  bottom: 0;
  margin: 0;
  padding: 0;
  padding-bottom: 30px;
  left: 0;
  right: 0;
}


/*[POPOPVER]***********************************************************************************************************/
/* picker, menu, popup(generic)*/
/* 568 + 16 + 16 = 600 Key MD Point*/
dialog.popover {
  top: 50%;
  left: 50%;
  width: calc(100% - 32px);
  max-width: 568px;
  /*//border: none;
*/  /*//border-bottom: .1rem solid #999;*/
  padding: 16px;
  transform: translate3D(-50%, -50%, 0);
  padding-bottom: 50px;
  padding-top: 90px;
  box-shadow: none;
}

/*turn off the pointy thing*/
dialog.popover::before,
dialog.popover::after {
  display: none;
}

/*show the header*/
dialog.popover > header.dialog-header {
  background-color: var(--blue);
  height: 90px;
  font-size: 25px;
  color: white;
  padding-bottom: 16px;
  padding-top: 16px;
}

/**[POPUP] ************************************************************************************************************/
/**[MENU] *************************************************************************************************************/
dialog.popover.menu {
}
dialog.popover.menu.bottomsheet {
  top: auto;
  bottom: 44px;
  transform: translateY(0);
  padding-bottom: 50px;
  margin: 0;
}

dialog.popover.menu {
  padding-top: 8px;
  padding-bottom: 8px;
}

dialog.popover.menu > header,
dialog.popover.menu > footer {
  display: none;
}

dialog.popover.menu > section > menu > button {
  padding-top: 4px;
  padding-bottom: 4px;
}
/**[PICKER] ***********************************************************************************************************/
/**[DATEPICKER] *******************************************************************************************************/
/**[TIMEPICKER] *******************************************************************************************************/
/**[COLORPICKER] ******************************************************************************************************/
/**[PICKER END] *******************************************************************************************************/

/*[POPOVER] END********************************************************************************************************/

/*[SELECT]*************************************************************************************************************/
/* lookup, selectlist, dropdown*/
dialog.select {
  position: absolute;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  border: none;
  transition: transform .2s ease;
  padding-top: 90px;
  padding-bottom: var(--pageFooterHeightMobile);
  right: 0;
  top: 0;
  animation: slideLeftOut 200ms ease-in-out both;
  max-width: 568px;
}

/*//slide up on open
*/dialog.select[open] {
  animation: slideLeftIn 200ms ease-out both;
}

dialog.select > section {
  height: 100%;
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
}


dialog.select > section:empty::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  content: 'Tap the search field and enter some text to search for \Aor \Apress the search button for the entire list.\A\AYour results will appear here.';
  white-space: pre-wrap;
  padding: 0px 16px 0px 16px;
  text-align: center;
  font-size: 16px;
  color: var(--grayMuted);
}

/*//default dont show
*/dialog.select:not(.dd-search) > header > .input-control.search {
  display: none;
}

dialog.select > footer {
  display: flex;
  background: inherit;
  justify-content: flex-end;
}
/**[LOOKUP] ***********************************************************************************************************/
/**[TAGLIST] ******************************************************************************************************/
/*[DROPDOWN] **********************************************************************************************************/

/*[SELECT] END*********************************************************************************************************/



/*[DIALOGS] END********************************************************************************************************/

/*[CONTROL SPECIFIC LISTS] ********************************************************************************************/
/*[SEARCH LIST] *****************************************************************************************************/
/*[SEARCH BOX] ********************************************************************************************************/
/*[SEARCH BOX] END*****************************************************************************************************/
/*[SEARCH LIST] END*****************************************************************************************************/
/*[INPUT-EDITOR]*******************************************************************************************************/
/*[INPUT-EDITOR] END***************************************************************************************************/
/*[SELECT]*************************************************************************************************************/
/*[SELECT] END*********************************************************************************************************/

/*popup related lists THESE ARE FOR INTERNAL USE ONLY DO NOT USE THESE THEM IN ANY LIST!!!!!!*/
/*[DROPDOWN] **********************************************************************************************************/
/*[DROPDOWN] END*******************************************************************************************************/

/**[LOOKUP/SELECT] **********************************************************************************************************/
/*used by the lookuplist and selectlist controls*/
ol.listview-dropdown,
ol.listview-lookup,
ol.listview-select {
  margin: 0;
  padding: 0;
  min-width: var(--inputWidth);
  min-height: 7.5rem;
  background: var(--white);
}

/*NB 40px line height: 17px text 1px border 11px padding top+bottom NB l+r 15px*/
ol.listview-dropdown > li,
ol.listview-lookup > li,
ol.listview-selectlist > li {
  position: relative;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  margin: 0px;
  padding: 11px 15px 11px 15px;
}

ol.listview-dropdown > li.checked,
ol.listview-lookup > li.checked,
ol.listview-selectlist > li.checked,
ol.listview-dropdown > li.selected,
ol.listview-lookup > li.selected,
ol.listview-xxselectlist > li.selected {
  padding-right: 42px;
}
ol.listview-dropdown > li.checked::after,
ol.listview-lookup > li.checked::after,
ol.listview-selectlist > li.checked::after,
ol.listview-dropdown > li.selected::after,
ol.listview-lookup > li.selected::after,
ol.listview-xxselectlist > li.selected::after {
  border-radius: 100%;
  background-color: green;
  content: '\2714' !important;
  height: 30px;
  width: 30px;
  font-size: 20px;
  position: absolute;
  right: 6px;
  top: 50%;
  margin-top: -15px;
  background-image: none !important;
  color: white;
  text-align: center;
}

.select li:active{
  background-color: var(--btnMetroBackgroundHighlight);
}
/**[LOOKUP/SELECT END**************************************************************************************************/

/*[PICKERS] ***********************************************************************************************************/

/*//date picker
*/dialog.datepicker td.dp,
dialog.datepicker th.dp {
  width: 4rem !important;
  height: 4rem !important;
}

dialog.datepicker th.dp {
  font-size: 10px;
  font-weight: bold;
}

dialog.timepicker > section > .grid-timepicker[data-type=list] {
  display: none;
}

.picker{}

/*[PICKERS] END********************************************************************************************************/

/*[CONTROL SPECIFIC LISTS] END*****************************************************************************************/

/*//needed in ios to enable mouse clicks
*/table.datagrid > thead > tr,
table.datagrid > tbody > tr,
table.datagrid > tfoot > tr {
  cursor: pointer;
}

datagrid{
  grid-template-columns: 100fr;
 -ms-grid-columns: 100fr;
  overscroll-behavior:none;
}