/*-----------------------------------------------------------------------
  BODY
-----------------------------------------------------------------------*/

body {
  font-family: "Roboto", sans-serif;
  margin: 0px;
  overscroll-behavior-y: contain;
  width: 100%;
  height: 100%;
}

/*-----------------------------------------------------------------------
  UI-FIX
-----------------------------------------------------------------------*/

.ui-fix-top{
  position: fixed;
  width: 100%;
  top: 0px;
}

/*-----------------------------------------------------------------------
  UI-TEXT-ALIGN
-----------------------------------------------------------------------*/

.ui-ta-left{
  text-align: left;
}

.ui-ta-right{
  text-align: right;
}

.ui-ta-center{
  text-align: center;
}

.ui-va-top{
  vertical-align: top;
}

.ui-va-bottom{
  vertical-align: bottom;
}

.ui-va-middle{
  vertical-align: middle;
}

/*-----------------------------------------------------------------------
  UI PADDING
-----------------------------------------------------------------------*/

.ui-pad-sm{
  padding: 5px;
}

.ui-pad-md{
  padding: 10px;
}

.ui-pad-lg{
  padding: 15px;
}

.ui-pad-xg{
  padding: 30px;
}

.ui-pad-left-sm{
  padding-left: 5px;
}

.ui-pad-left-md{
  padding-left: 10px;
}

.ui-pad-left-lg{
  padding-left: 15px;
}

.ui-pad-left-xg{
  padding-left: 30px;
}

.ui-pad-right-sm{
  padding-right: 5px;
}

.ui-pad-right-md{
  padding-right: 10px;
}

.ui-pad-right-lg{
  padding-right: 15px;
}

.ui-pad-right-xg{
  padding-right: 30px;
}

.ui-pad-top-sm{
  padding-top: 5px;
}

.ui-pad-top-md{
  padding-top: 10px;
}

.ui-pad-top-lg{
  padding-top: 15px;
}

.ui-pad-top-xg{
  padding-top: 30px;
}

.ui-pad-bottom-sm{
  padding-bottom: 5px;
}

.ui-pad-bottom-md{
  padding-bottom: 10px;
}

.ui-pad-bottom-lg{
  padding-bottom: 15px;
}

.ui-pad-bottom-xg{
  padding-bottom: 30px;
}

/*-----------------------------------------------------------------------
  UI MARGIN
-----------------------------------------------------------------------*/

.ui-margin-sm{
  margin: 5px;
}

.ui-margin-md{
  margin: 10px;
}

.ui-margin-lg{
  margin: 15px;
}

.ui-margin-xg{
  margin: 30px;
}

.ui-margin-left-sm{
  margin-left: 5px;
}

.ui-margin-left-md{
  margin-left: 10px;
}

.ui-margin-left-lg{
  margin-left: 15px;
}

.ui-margin-left-xg{
  margin-left: 30px;
}

.ui-margin-right-sm{
  margin-right: 5px;
}

.ui-margin-right-md{
  margin-right: 10px;
}

.ui-margin-right-lg{
  margin-right: 15px;
}

.ui-margin-right-xg{
  margin-right: 30px;
}

.ui-margin-top-sm{
  margin-top: 5px;
}

.ui-margin-top-md{
  margin-top: 10px;
}

.ui-margin-top-lg{
  margin-top: 15px;
}

.ui-margin-top-xg{
  margin-top: 30px;
}

.ui-margin-bottom-sm{
  margin-bottom: 5px;
}

.ui-margin-bottom-md{
  margin-bottom: 10px;
}

.ui-margin-bottom-lg{
  margin-bottom: 15px;
}

.ui-margin-bottom-xg{
  margin-bottom: 30px;
}

/*-----------------------------------------------------------------------
  UI-TEXT-ALIGN
-----------------------------------------------------------------------*/

.ui-ta-left{
  text-align: left;
}

.ui-ta-right{
  text-align: right;
}

.ui-ta-center{
  text-align: center;
}

.ui-va-top{
  vertical-align: top;
}

.ui-va-bottom{
  vertical-align: bottom;
}

.ui-va-middle{
  vertical-align: middle;
}

/*-----------------------------------------------------------------------
  UI ROUNDING
-----------------------------------------------------------------------*/

.ui-round-sm{
  border-radius: 5px;
}

.ui-round-md{
  border-radius: 10px;
}

.ui-round-lg{
  border-radius: 15px;
}

.ui-round-xg{
  border-radius: 30px;
}

.ui-round-top-sm{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.ui-round-top-md{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.ui-round-top-lg{
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.ui-round-top-xg{
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.ui-round-bottom-sm{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.ui-round-bottom-md{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.ui-round-bottom-lg{
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.ui-round-bottom-xg{
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

/*-----------------------------------------------------------------------
  UI BORDER
-----------------------------------------------------------------------*/
.ui-border-none{
  border-width: 0px;
}

/*-----------------------------------------------------------------------
  UI COLORS
-----------------------------------------------------------------------*/

.ui-fg-black{
  color: black;
}

.ui-bg-black{
  background-color: black;
}

.ui-fg-white{
  color: white;
}

.ui-bg-white{
  background-color: white;
}

.ui-fg-blue{
  color: blue;
}

.ui-bg-blue{
  background-color: blue;
}

.ui-fg-red{
  color: red;
}

.ui-bg-red{
  background-color: red;
}

.ui-fg-green{
  color: green;
}

.ui-bg-green{
  background-color: green;
}

.ui-fg-gray{
  color: gray;
}

.ui-bg-gray{
  background-color: #808080;
}

.ui-fg-orange{
  color: orange;
}

.ui-bg-orange{
  background-color: orange;
}

.ui-bg-gray-soft{
  background-color: #E0E0E0;
}

/*-----------------------------------------------------------------------
  UI FONTS
-----------------------------------------------------------------------*/

.ui-fs-sm{
  font-size: 12px;
}

.ui-fs-nm{
  font-size: 16px;
}

.ui-fs-md{
  font-size: 18px;
}

.ui-fs-lg{
  font-size: 24px;
}

.ui-fs-xg{
  font-size: 36px;
}

.ui-fw-bold{
  font-weight: bold;
}

.ui-ft-italic{
  font-style: italic;
}

/*-----------------------------------------------------------------------
  UI-WIDTHS
-----------------------------------------------------------------------*/

.ui-wd-sm{
  width: 100px;
}

/*-----------------------------------------------------------------------
  UI FLEX
-----------------------------------------------------------------------*/

.ui-flex-row-all{
  display: flex;
  flex-direction: row ;
  justify-content: space-between;
}

.ui-flex-row-center{
  display: flex;
  flex-direction: row ;
  justify-content: center;
}

.ui-flex-row-left{
  display: flex;
  flex-direction: row ;
  justify-content: flex-start
}

.ui-flex-row-right{
  display: flex;
  flex-direction: row ;
  justify-content: flex-end
}

.ui-flex-col-all{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ui-flex-col-center{
  display: flex;
  flex-direction: column ;
  align-items: center;
}

.ui-flex-col-left{
  display: flex;
  flex-direction: column ;
  align-items: start;
}

.ui-flex-col-right{
  display: flex;
  flex-direction: column ;
  align-items: end;
}

/*-----------------------------------------------------------------------
  UI FIX
-----------------------------------------------------------------------*/

.ui-fixed-top{
  position: fixed;
  top: 0px;
}

.ui-fixed-bottom{
  position: fixed;
  bottom: 0px;
  width: 100%;
}

/*-----------------------------------------------------------------------
  UI TABLE
-----------------------------------------------------------------------*/

.ui-table-grid{
  border-collapse: collapse;
  /*
  border: none;
  border: 1px solid gray;  
  border-style: solid;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-spacing: 1px;
  border-style: solid;
  border-collapse: collapse;
  border-spacing: 0px;
  border: 1px solid black;;
  width: 100%;
  max-width: 1080px;
  */
}

.ui-table-grid td {
  border: 1px solid gray;  
  border-style: solid;
  padding: 10px;
  /*
  border-collapse: collapse;
  border-spacing: 0px;
  border: 1px solid black;;
  width: 100%;
  max-width: 1080;
  */
}

/*-----------------------------------------------------------------------
  UI MISC
-----------------------------------------------------------------------*/

.ui-hidden{
  visibility: hidden;
}

.ui-text-dn{
  text-decoration:none;
}

.ui-icons{
  fill: orange;
  /*height:42px;
  width:42px;*/


}

.ui-material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  /*direction: ltr;*/
}