* {
    outline: none;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
    justify-content: center;
    margin: auto;
    display:block;
    background-color:#fcfcfc ;
	 margin: 0px;
    display:block;
}
body{
	padding-top:72px;
	background-color:#EFEFF4;
}

.top-nav{
	 position:fixed;
    width:100%;
    height:70px;
    top:0px;
	 left:0px;
	 right:0px;
    background:white;
    color:gray;
	 line-height: 70px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
}
.grid-container {
	display: grid;
	grid-template-columns: auto 130px;
}
.top-nav img{
	height:60px;
	margin:5px;
}
.top-nav a{
	margin-right:2px;
	text-decoration:none;
}
.icon {
	color:gray;
	font-size:30px;
	margin-right:5px;
}
#myLinks {
	display:none;
	top:72px;
	position:fixed;
	left:0px;
	width:100%;
	background:gray;
	padding-bottom:8px;
}
.links {
	width:100%;
	height:20px;
	background:gray;
	color:white;	
	display:block;
	padding:5px;
	text-decoration:none;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


.sidebar {
	position:fixed;
	width:180px;
	height:100%;
	background:#28282B;
	padding:5px;
	left:0px;
	top:70px;
}

.sidebar-btn {
	display:block;
	width:100%;
	max-width:160px;
	height:30px;
	margin:10px;
	justify-content:center;
	color:white;
	border-radius:5px;
	border:none;
	text-align:left;
	line-height: 30px;
	font-size:13px;
	padding-left:5px;
}

.sidebar-btn:hover {
	background:#1E62FF;

}

.sidebar img{
	width:20px;
	height:20px;
	vertical-align: middle;
}

.content {
	 padding-left:200px;
	 padding-right:10px;
    margin:auto;
    display:block;
	 justify-content:center;
}

.title {
	margin:20px;
}
.title h1 {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color:#484848;
	font-weight:300px;
	margin:0px;
	padding:0px;
}

.title a {
	color:#1E62FF;
	background-color: transparent;
	border-collapse:collapse;
	border-width:1px;
	border-color: gray;
	border-radius:2px;
	padding:5px;
}
#btn-NewCustomer {
	margin-top:15px;
}
	
.content img {
		margin-top:18px;
		height:34px;
	}

.customer {
	 display:block;
    max-height: 70px;
    margin-bottom: 8px;
    background-color: white;
    border-radius: 2px;
    box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.28);
}

.customer:hover {
	background:lightgray;
}

.customer h1{
    font-size: 20px;
    font-weight: bold;
    text-align: left;
	 margin:0px;
	 padding:0px;
	 padding-top:7px
}
.customer h2{
    font-size: 17px;    
    font-weight: 400;
    text-align: left;
    margin:0px;
	 padding:0px;
	padding-bottom:5px;
}
.customer a{
    text-decoration: none;
    color: white;
    background-color: #1E62FF;
    padding-left:10px;
    padding-right:10px; 
	 padding-top:5px;
    padding-bottom: 5px;
    margin-left:10px;
    border-radius: 5px;
}

.grid {
    display: grid;
    grid-template-columns: auto 30%;
    padding-left:10px;
    padding-right: 10px;
    padding-bottom: 5px;
}

#info {
    text-align: left;
}
#btns {
    padding-top: 23px;
	 padding-right:10px;
    text-align: right;
}



.controls {
    margin-bottom: 20px;
    background-color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    font-weight:100;
    color:gray;
    width: 100%;
    height: 45px;
    border: none;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right:0px;
    border-radius: 10px;
}
.button {
    background-color: #1948BF;
    border-radius:25px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 60px;
    margin-bottom:20px;
    display:block;
    width:300px;
    justify-content:center;
    border:none;
    font-size:20px;
    font-weight:100;
    color:white;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    -webkit-appearance: none;   
}
table {
    width:100%;
    text-align:center;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
td,  th {
    border: 0px solid #ddd;
    padding: 8px;
}
tr:nth-child(even){background-color:#E8E8E8;}
tr:hover .data  {background-color: #ddd;}
th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: gray;
    color: white;
    border: 0px solid #ddd;
    text-align:center;
}
input {
    height:30px;
    border-radius:25px;
    border:none;
    padding-left:10px;
    padding-right:10px;
    background-color:lightgray;
}
.btnFind {
    background-color: #1948BF;
    border-radius:25px;
    width:100px;
    height:35px;
    border:none;
    font-weight:bold;
	  font-size:12px;
    color:white;
    -webkit-appearance: none;   
}

.btnFind:hover {
	background-color:transparent;
	border-width:2px;
	border-style:solid;
	boder-collapse: collapse;
	border-color:#1948BF;
	color:#1948BF;
}

.findBar {
	background-color:transparent !important;
}
.findBar:hover {
	background-color:transparent !important;
}

/*DATE PLACE HOLDER */
input[type="date"]::before {
	color: black;
	content: attr(placeholder);
}
input[type="date"] {
	-webkit-appearance:none;
	color: black;
	width:100px;
}
input[type="date"]:focus,
input[type="date"]:valid {
	color: black;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}