:root
{
	--bg-color: #282828;
	--head-foot-color: #111;
	--accent-color: #818181;
	--text-color: #f1f1f1;
}

body
{
	color: var(--text-color);
	background-color: var(--head-foot-color);
}

p
{
	font-size: 18px;
}

button
{
	font-size: 17px;
}

#page-container
{
	background-color: var(--bg-color);
	position: relative;
	min-height: 100vh;
	/*max-width: 1200px;
	margin: auto;*/
	/*margin: 0 50px;*/
	transition: 0.5s;
}

#header
{
	background-color: var(--head-foot-color);
}

#header-top
{
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 4px solid var(--accent-color);
	overflow: auto;
}

#header-left
{
	padding-left: 220px;
	float: left;
}

#header-right
{
	padding-left: 25px;
	padding-right: 25px;
	float: right;
}

#content-wrap
{
	padding-bottom: 90px;
	padding-top: 50px;
	padding-left: 50px;
	padding-right: 50px;
	overflow: auto;
}

.content-left
{
	float: left;
	padding-right: 50px;
	padding-bottom: 50px;
}

.content-right
{
	float: left;
}


#footer
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--head-foot-color);
}

#footer-border
{
	border-top: 4px solid var(--accent-color);
}

#footer-left
{
	float: left;
	text-align: left;
	padding: 10px 25px;
}

#footer-right
{
	float: right;
	text-align: right;
	padding: 10px 25px;
}

.point
{
	cursor: pointer;
}

.date-form
{
	display: inline;
	font-family: Verdana;
	font-size: 20px;
}

.left
{
	float: left;
}

.right
{
	float: right;
}

#loading
{
	height: 30px;
	width: 300px;
}

.form-label
{
	display: inline-block;
	margin-bottom: 5px;
}

.form-text
{
	margin-bottom: 10px;
}

.partner
{
	margin-bottom: 10px;
	width: 326px;
	margin-right: 10px;
}

.partner-label
{
	display: inline-block;
	margin-bottom: 5px;
	width: 336px;
}


/* Menu Icon Settings */
#menu-icon
{
	float: left;
	cursor: pointer;
	padding-left: 25px;
}
.menu-bar
{
	width: 30px;
	height: 4px;
	background-color: var(--accent-color);
}
#menu-icon:hover .menu-bar
{
	background-color: var(--text-color);
}
#menu-bar-top
{
	margin-top: 8px;
	margin-bottom: 6px;
}
#menu-bar-mid
{
	margin: 6px 0;
}
#menu-bar-bot
{
	margin-top: 6px;
}
/* End Menu Icon Settings */


/* Login Box Settings */
#login-box
{
	display: table;
	padding: 20px;
    border: 3px solid var(--text-color);
    border-radius: 15px;
	font-family: Verdana;
	font-size: 16px;
	text-align: center;
	margin: auto;
}
#login-button
{
	display: block;
	padding: 8px;
	border: 3px solid var(--text-color);
    border-radius: 15px;
	margin: auto;
	margin-top: 20px;
	outline: none;
	background-color: #818181;
	color: var(--text-color);
	font-family: Verdana;
	font-size: 16px;
	font-weight: bold;
}
#login-button:hover
{
	background-color: lightblue;
	cursor: pointer;
	color: var(--head-foot-color);
}
#login-user
{
	display: inline-block;
	padding-bottom: 7px;
	font-weight: bold;
}
#login-pass
{
	display: inline-block;
	padding-top: 13px;
	padding-bottom: 7px;
	font-weight: bold;
}
#login-top
{
	display: inline-block;
	font-weight: bold;
	padding-bottom: 7px;
}
#login-label
{
	display: inline-block;
	font-weight: bold;
	padding-top: 13px;
	padding-bottom: 7px;
}
#login-input
{
	
}
/* End Login Box Settings */


/* Dashboard Settings */
.dash
{
	margin: auto;
	width: fit-content;
	cursor: default;
}
.dash-head
{
	display: table;
	width: -webkit-fill-available;
	font-size: 30px;
	font-weight: bold;
	min-width: 300px;
	padding: 10px 20px 10px 20px;
	border: 4px solid var(--text-color);
	border-radius: 20px;
	color: var(--text-color);
	background-color: var(--accent-color);
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 25px;
}
.dash-head-left
{
	float: left;
	padding-right: 25px;
}
.dash-head-right
{
	float: right;
	display: flex;
	margin-top: 4px;
}
.dash-row
{
	display: table;
}
.dash-title
{
	font-size: 22px;
	font-weight: bold;
	padding: 0 0 10px 49px;
	color: var(--text-color);
}
.dash-item
{
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
}
.dash-label
{
	font-size: 18px;
	font-weight: bold;
	min-width: 300px;
	padding: 10px 20px 10px 20px;
	border: 4px solid var(--text-color);
	border-bottom: none;
	border-radius: 20px 20px 0 0;
	color: var(--text-color);
	background-color: var(--accent-color);
	transition: 0.3s;
}
.dash-tile
{
	font-size: 30px;
	font-weight: bold;
	min-width: 300px;
	padding: 10px 20px 10px 20px;
	border: 4px solid var(--text-color);
	border-radius: 0 0 20px 20px;
	color: var(--text-color);
	background-color: var(--accent-color);
	transition: 0.3s;
}
.dash-button:hover .dash-label, .dash-button:hover .dash-tile
{
	background-color: #737373;
}
/* End Dashboard Settings */


/* Table Settings */
.back-button, .back-button:visited
{
	font-family: Verdana;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	background-color: aliceblue;
	color: black;
	border: 1px solid black;
	padding: 1px 6px;
	cursor: pointer;
	margin: 0;
}
.back-button:hover
{
	background-color: lightblue;
}

.button
{
	font-family: Verdana;
	font-size: small;
	font-weight: normal;
	text-decoration: none;
	background-color: aliceblue;
	color: black;
	border: 1px solid black;
	padding: 1px 6px;
	cursor: pointer;
	margin: 0;
}
.button:hover
{
	background-color: lightblue;
}
.warning:hover
{
	background-color: lightcoral;
}
table, th, td
{
	text-align: left;
	font-size: 14px;
	border: 3px solid black;
	border-collapse: collapse;
}
table
{
	background-color: var(--accent-color);
	outline: 3px solid var(--accent-color);
}
th, td
{
	padding: 3px 5px;
}
form
{
	margin: 0;
}
/* End Table Settings */


/* Menu Settings */

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--head-foot-color);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: var(--accent-color);
  display: block;
  transition: 0.3s;
  white-space: nowrap;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: var(--text-color);
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* End Menu Settings */


/* Loading Wheel */

.loader {
  border: 10px solid #f3f3f3; /* Light grey */
  border-top: 10px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




/* OVERRIDES */
.left-space
{
	margin-left: 20px;
}
.first-line
{
	display: inline-block;
}
.top
{
	padding-top: 30px;
}
.bot
{
	padding-bottom: 20px;
}