html
{
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
}

section {
	height: 100vh;
	/* width: 100vw;  */
	scroll-snap-align: start;
  }
  
body {
    background: url("../images/background.jpg") no-repeat fixed top left;
    background-color: #111111;
	
    background-repeat: no-repeat;
	background-size: cover;
	color: white;
	
}

h1
{
	text-align: left;
	color: white;
	border-bottom: 1px solid #ffffff;
}

.amountLabel
{
	display: inline;
}

.detailFont
{
	font-size: 10pt;
}

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

.main-panel
{
	margin: auto;
	width: 60%;
}

.tinyFont
{
	font-family: "Roboto";
	font-size: 10pt;
	text-shadow: 0 0 12px;
	color: white;
}

.largeFont{
	font-size: 24pt;
	font-weight: 500;
	font-family: "Roboto";
	text-shadow: 0 0 12px;
	color: white;
}

#financial-info-panel{
	border-radius: 15px;
	background-color: rgba(0,0,0,.45);
	z-index: 2;
	position: relative;
	font-family: "Roboto";
	font-weight: 60;
	margin: 0;
	color: white;
}

.grid{
	font-weight: 40;
	width: 100%;
	margin-top: 60px;
	margin-bottom: 60px;
}

.grid-title
{
	font-weight: bold;
}

.grid-item{
	text-align: left;


	margin-bottom: 10px;
}

.ui-widget
{
	font-family: "Roboto" !important;
}

.ui-widget-content
{
	color: white !important;
	background: none !important;
	border: none !important;
}

.ui-widget-header
{
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	background: none !important;
	border-radius: 0px !important;

}

.ui-tabs-tab
{
	border: 1px solid !important;
	border-bottom-width: 0px !important;
	background: none !important;
	margin-bottom: 0px !important;

	font-weight: bold !important;
}

#stocksTable
{
	color: white;
	width: 100%;
}

.lossStock
{
	color: salmon;
}

td
{
	text-align: center;
}

/* datatables styles */
table.dataTable thead,
table.dataTable tfoot
{
	color: white;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate
{
	color: white !important;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
 background-color: rgb(255,255,255,0.1) !important;
 color: white;
}
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even {
 background-color: rgb(255,255,255,0.2) !important;
 color: white;
}
/* sorting column colour */
table.dataTable.order-column tbody tr>.sorting_1,
table.dataTable.order-column tbody tr>.sorting_2,
table.dataTable.order-column tbody tr>.sorting_3,
table.dataTable.display tbody tr>.sorting_1,
table.dataTable.display tbody tr>.sorting_2,
table.dataTable.display tbody tr>.sorting_3 {
 background-color: rgb(255,255,255,0.05) !important;
}

table.dataTable .dataTables_wrapper .dataTables_paginate .paginate_button {
 color: white !important;
}



.item-title
{
	font-weight: bold;
}

.grid-container {
  display: grid;
    
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  grid-template-columns: auto auto auto;
}





.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
  
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  flex-basis: auto; /* auto fit content */
  /* background-color: tomato; */
  padding: 5px;
width: 250px;
  /* height: 200px; */
  margin-top: 10px;
  color: white;
  text-align: left;
}