/* grid container */
.left-sidebar-grid {
	display: grid;
	grid-template-areas:
		'header'
		'main-content'
		'left-sidebar'
		'footer';
}

/* general column padding */
.left-sidebar-grid>* {
	padding: 1rem;
}

/* assign columns to grid areas */
.left-sidebar-grid>.header {
	grid-area: header;
	background: darkblue;
	font-size: larger;
	color: white;
	text-align: right;
}

.left-sidebar-grid>.main-content {
	grid-area: main-content;
	background: #fff;
}

.left-sidebar-grid>.left-sidebar {
	grid-area: left-sidebar;
	background: #999999;
	padding: 10%;
	font-size: larger;
}

.left-sidebar-grid>.right-sidebar {
	grid-area: right-sidebar;
	background: #c5ed77;
}

.left-sidebar-grid>.footer {
	grid-area: footer;
	background: #000;
}

/* tablet breakpoint */
@media (min-width:768px) {
	.left-sidebar-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			'header header header'
			'left-sidebar main-content main-content'
			'footer footer footer';
	}
}

html {
	background: #000;
	font-family: "Futura", sans-serif;
}

.close {
	position: absolute;
	right: 25px;
	top: 0;
	color: #000;
	font-size: 35px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: red;
	cursor: pointer;
}

.animate {
	-webkit-animation: animatezoom 0.6s;
	animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes animatezoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

@media screen and (max-width: 300px) {
	span.psw {
		display: block;
		float: none;
	}

	.cancelbtn {
		width: 100%;
	}
}

.bblock {
	display: block;
	width: 100%;
	border: none;
	background-color: navy;
	padding: 14px 28px;
	font-size: small;
	cursor: pointer;
	text-align: center;
}

.wblock {
	display: block;
	width: 100%;
	border: none;
	background-color: #DDDDDD;
	padding: 14px 28px;
	font-size: smaller;
	color: #000000;
	cursor: pointer;
	text-align: center;
}
.modal {
	 display: none;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         /* additional styles for the modal */
      }
      .modal {
         width: 500px;
         #height: 400px;
         background-color: #ffffff;
         border: 1px solid #cccccc;
         padding: 20px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         box-shadow: 0px 0px 10px #cccccc;
         border-radius: 10px;
         z-index:1000;
      }
/*
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 10px;
	right: 10px;
	top: 10px;
	width: 80%;
	height: 40%;
	overflow: auto;
	#background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
	padding-top: 30px;
}


.modal-content {
	background-color: #fefefe;
	margin: 5% auto 15% auto;
	border: 1px solid #888;
	padding: 10px;
	width: 80%;
}
*/

input[type=text],
input[type=password] {
	width: 30%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

button:hover {
	opacity: 0.8;
}

.loginbtn {
	width: auto;
	padding: 10px 18px;
	background-color: green;
}

.cancelbtn {
	width: auto;
	padding: 10px 18px;
	background-color: #f44336;
}
.tables{

  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  color: white;
  border: 1px solid black;
  padding: 8px;

}