body {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    color: #454649;
    padding: 0px;
	margin: 0px;
}


.wrapper { 
display: grid; 
grid-template-columns: repeat(3, 1fr); 
grid-template-rows: repeat(4, 1fr); 
grid-template-rows: 60px;
grid-column-gap: 0px;
grid-row-gap: 60px; 
padding: 0px;
margin: 0px;
}


.head_1 { 
	grid-area: 1 / 1 / 2 / 3;
	background-color: #454649;
	padding:12px;
} 

.head_2 { grid-area: 1 / 3 / 2 / 4; 
	background-color: #454649;
	padding:12px;
	color: #fff;
	text-align: right;
} 

.head_2 a {
	color: #fff;
}

.information { 
	grid-area: 2 / 1 / 3 / 3; 
	padding: 12px;
	margin-left: 20px;	
}

.tools { 
	grid-area: 2 / 3 / 3 / 4; 
	border-radius: 15px 50px 30px;
	background: #E2B73C;
	padding: 20px 20px;
	margin-right: 20px;
	} 

.staff_img {
	float: right;
	position: relative;
	image-width: 100px;
}

.lower_1 {
	grid-area: 3 / 1 / 4 / 2;
	border-radius: 15px 50px 30px;
	background: #454649;
	padding: 20px 20px;
	margin-left: 20px;
	margin-right: 20px;
	color: #fff;
} 

.lower_2 { 
	grid-area: 3 / 2 / 4 / 3;
	border-radius: 30px 50px 15px;
	background: #E2B73C;
	padding: 20px 20px;
	margin-right: 20px;	
} 

.lower_3 { 
	grid-area: 3 / 3 / 4 / 4;
	border-radius: 15px 50px 30px;
	background: #454649;
	padding: 20px 20px;
	margin-right: 20px;		
} 

.footer { 
	grid-area: 4 / 1 / 5 / 4;
	background-color: #AFACB5;
	padding: 20px;
	color: #fff;
	font-size: 14px;
	text-align: right;
} 


table {
  table-layout: fixed;
  width: 80%;
  border-collapse: collapse;
  border: none;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 5px;
}

.main-head{
    height: 150px;
    background: #FFF;
   
}

.sidenav {
    height: 100%;
    background-color: #454649;
    overflow-x: hidden;
    padding-top: 20px;
}


.main {
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
}

@media screen and (max-width: 450px) {
    .login-form{
        margin-top: 20%;
    }

    .register-form{
        margin-top: 10%;
    }
}

@media screen and (min-width: 768px){
    .main{
        margin-left: 40%; 
    }

    .sidenav{
        width: 40%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
    }

    .login-form{
        margin-top: 80%;
    }

    .register-form{
        margin-top: 20%;
    }
}


.login-main-text{
    margin-top: 20%;
    padding: 60px;
    color: #fff;
}

.login-main-text h2{
    font-weight: 300;
}

.btn-black{
    background-color: #e1b63c !important;
    color: #fff;
}
h2.control_panel {
  display: block;
  font-size: 1.5em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.submit-btn {
	border: none;
	border-radius: 5px;
	background-color: #454649;
	color: #fff;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
}

.submit-btn:hover {
	transition-duration: 0.4s;
	background-color: #fff;
	color: #454649;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.field {
	width: 200px;
	padding: 10px 15px;
	margin: 8px 0;
	box-sizing: border-box;
	font-size: 16px;
	color: #454649;
}