/*  ................................. PAGE...................................*/  

.admin-page{
	width:100%;
	display:flex;
	flex-direction:row;
}

/*  ................................. ICONS...................................*/  

.admin-back-icon {
	margin-left:1.5rem;
	margin-top:1.5rem;
}

.admin-icon {
	padding-left:0.5rem;
}

 .admin-icon img {
	width:1.5rem;
	height:1.5rem;
}

.admin-icon img:hover {
	cursor:pointer;
}

/*  ................................. NAV...................................*/    

.admin-navbar {
     background-color: var(--whitecolor);
 }

.admin-navbar .navbar-header {
	text-align: center;
}

.admin-navbar .admin-navigation {
	margin-top:4rem;
	padding:0;
	background-color: var(--whitecolor);
	padding-top:1rem;
	min-height:75vh;
}			

 .admin-navbar .admin-navigation .admin-menu{
	margin:0;
	width:90%;
	margin-left:5%;
	margin-right:5%;
	padding-top:2rem;
}		

 .admin-navbar .admin-navigation .admin-menu .admin-menuitem {
	display:flex;
	flex-direction:row;
	align-items: center;
	margin:0;
	border-bottom: 0.2rem solid var(--lightgreycolor); 
	height:3.5rem;
	width:100%;
}
	
.admin-navbar .admin-navigation .admin-menu .admin-menuitem:hover{
	background-color:var(--lightgreycolor);
}

.admin-navbar .admin-navigation .admin-menu .admin-menuitem .admin-menuitem-label {
	color: var(--blackcolor);
	font-weight:300;
	font-size:1.2rem;
	padding-left:5%;
}  


/*  .................................FORM DATA...................................*/ 

.admin-data{
	background-color: var(--lightgreycolor);
}

.admin-data .admin-form .form-header {
	text-align: center;
}

.admin-data .admin-form {
	display:flex;
	flex-direction:column;
	margin:auto;
	width:70%;
}

.admin-data .admin-form .admin-form-data {
	float:left;
	width:100%;
	margin-top:2rem;
}

.admin-data .admin-form .admin-form-controller {
	margin-top:5rem;
}

.admin-data .admin-form .admin-form-menu .admin-form-menuitem {
	display:flex;
	background-color: var(--whitecolor);
	border-bottom: 0.2rem solid var(--lightgreycolor); 
	flex-direction:row;
	align-items: center;
	height:3.5rem;
	padding-left:5%;
	width:95%;
}

.admin-data  .admin-form .admin-form-menu .admin-form-menuitem:hover{
	background-color:var(--lightbluecolor);
}

.admin-data .admin-form .admin-form-menu .admin-form-menuitem .admin-form-menuitem-label {
	color: var(--blackcolor);
	font-weight:300;
	font-size:1.2rem;
	width:80%;
	padding-left:10%;
}  

/*............................................ TABLE................................... */

.admin-table table {
    border-collapse: collapse;
    width: 100%;
}

.admin-table table, .admin-table th, .admin-table td {
    border: 0.15rem solid var(--darkgreycolor);
	color:var(--darkgreycolor);
}

.admin-table th, .admin-table td {
    padding: 0.5rem;
    text-align: left;
}

.modal {
    display: inline-block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

.close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}




/*............................................ MEDIA QUERIES................................... */

@media (max-width: 65rem)
{
	.admin-data{
		width:100%;
	}
	
	.admin-navbar{
		width:0%;
	}
	
	.admin-menuitem-label{
		display:none;
	}
	
	.navbar-header{
		/*visibility:hidden; */
	}
	
	.admin-form-menu{
		display:block;
	}	

	#admin-back-button{
		display:inline-block;
	}
}

@media (min-width: 65rem)
{
	.admin-data{
		width:70%;
	}
	
	.admin-navbar{
		width:30%;
	}

	.admin-menuitem-label{
		display:flex;
	}
	
	.navbar-header{
		/*visibility:visible;*/
	}

	.admin-form-menu{
		display:none;
	}	

	#admin-back-button{
		display:none;
	}
}