/* The Modal (background) */
.App-Window {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background:#ffff;
  animation: fadeEffect 0.7s; /* Fading effect takes 1 second */
}

.modal-content{
	border-top:30px solid #2E277E;
	position:relative;
	height:100%;
	width:100%;
}

/* The Close Button */
.close {
	position:absolute;
	top:0;
	left:0;
	color: #2E277E;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.logout_Btn{
	position:absolute;
	top: 0;
	right: 0;
	color: #2E277E;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.user-dashboard-container{
}

.user-profilecard{
	position:relative;
	height:220px;
	width:280px;
	box-shadow: 0 0 4px;
	border-radius:6px;
	margin: auto;
	width: 90%;
	margin-top:40px;
	border-top:15px solid #2E277E;
}

.profile-photo{
	position: absolute;
	height:120px;
	width:120px;
	top:0%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.profile-photo img{
	height:100%;
	width:100%;
	border-radius:100%;
	object-fit:cover;
	border:6px solid #fff;
}

.profile-info{
 margin-top:20%;
 max-width:225px;
 margin-left:25%;
}

.dashboard-menu-items{
	margin: auto;
	width: 90%;
}

.dashboard-menu-item{
	position:relative;
	height:100px;
	width:100px;
	box-shadow: 0 0 5px;
	background:#A6CBF7;
	cursor:pointer;
}

.dashboard-menu-item:hover{
	background:#F4F6F6;
	color:black;
}

.dashboard-menu-item-text{
	position: absolute;
	top:50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);	
	font-weight:600;
	text-align:center;
}

@media only screen and (max-width: 400px) {
  /* For mobile phones: */
	.dashboard-menu-item{
		height:75px;
		width:75px;
	}
	
	.dashboard-menu-item-text{
		font-size:12px;
	}
}