/* ----- Mobile First Media Queries ----- */

/* --- Dashboard ---*/

.dashboard-head  {
	margin: auto;
	width: auto;
	padding: 0em;
	background: #4A1B4F;
	position: relative;
	overflow: hidden;
}

.dashboard-logo {
	order: -1;
}

.dashboard-head h2  {
	border: none;
	font-size: 4rem;
	width: 80%;
	font-weight: 800;
	color: #FC296E;
	padding-bottom: 0;
	margin: 3rem 0;
}

.dashboard-head img  {
	/* height: 20rem; */
}

ul.dashboard-nav {      
    margin:1.5rem 0;     
    padding:0;     
    list-style:none;
    display: flex;
    flex-flow: row wrap;
	height: 100%;
}

ul.dashboard-nav li {
    border-right:  0.1rem solid rgba(0, 0, 0, 0.1); 
    text-align: center;
    margin: 0;
    transition:all .25s ease-in-out;
    width: 50%;
}

ul.dashboard-nav li:last-child { 
    border-right: none
} 

ul.dashboard-nav li a {     
    text-decoration:none;     
    padding:1.0rem;
    margin: 0 1rem;
    border-radius: 0.5rem;
    background-color: rgba(56, 3, 62, 0); 
    transition:all .25s ease-in-out
}

ul.dashboard-nav li.active a {     
    background-color: rgba(56, 3, 62, 1);
    color: #BFF01A
}

ul.dashboard-nav li a:hover {  
    background-color: rgba(56, 3, 62, 1); 
} 

ul.dashboard-nav li a:active { 
    background-color: #3f46b0; 
}  

ul.dashboard-nav li a {  
    display: block;
} 

ul.dashboard-nav li span {  
    display: block;
    width: 40px;
	height: 40px;
	margin: 0 auto;
} 

ul.dashboard-nav li span:before {     
    height:40px;   
    width:40px;
    margin: 0 auto 0.5rem auto;
}

ul.dashboard-nav li.db-dashboard span:before {     
    content: url(../../../assets/img/icons/dashboard.svg);
}

ul.dashboard-nav li.db-profile span:before {     
    content: url(../../../assets/img/icons/profile.svg);
}

ul.dashboard-nav li.db-organisation span:before  {     
    content: url(../../../assets/img/icons/organisation.svg);
}

ul.dashboard-nav li.db-events span:before  {     
    content: url(../../../assets/img/icons/events.svg);
}

ul.dashboard-nav li.db-news span:before  {     
    content: url(../../../assets/img/icons/news.svg);
}

ul.dashboard-nav li.db-offers span:before  {     
    content: url(../../../assets/img/icons/offers.svg);
}

ul.dashboard-nav li.db-jobs span:before {     
    content: url(../../../assets/img/icons/jobs.svg);
}

ul.additem {     
    width:100%;
    border: none;
    margin: 1rem 0 0 0;
}

ul.additem li {     
    border: none;
    width: 100%;
}

ul.additem li a, ul.dashboard-nav li.active ul.additem li a {
	background-color: transparent;
	background-image: url(../../../assets/img/icons/additem-2.svg);
	background-repeat: no-repeat;
	background-position:left top;
	background-size: 5rem 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	display: block;
	margin: 0.5rem auto; 
    padding:0;
	transition: background-image .25s ease-in-out;
}

ul.additem li a:hover, ul.dashboard-nav li.active ul.additem li a:hover {
	background-color: transparent;
	background-image: url(../../../assets/img/icons/additem-2.svg);
	background-position:right top;
	display: block;
}

ul.additem li a span {
	display: none;
}

.approved {
	font-weight: 800;
	color: rgb(171, 216, 21);
}

.pending {
	font-weight: 800;
	color: #FC296E;
}

ul.additem {     
    width:100%;
    border: none;
    margin: 1rem 0 0 0;
}

ul.additem li {     
    border: none;
    width: 100%;
}

.pending {
	background: url(../../../assets/img/icons/pending.svg) no-repeat 0.5rem;
	background-position:0;
	display: inline;
	line-height: 1.1;
	padding-left: 2.75rem;
    background-size: 19px auto;
    margin: 0;
}

.approved {
	background: url(../../../assets/img/icons/approved.svg) no-repeat 0.5rem;
	background-position:0;
	display: inline;
	line-height: 1.1;
	padding-left: 2.75rem;
    background-size: 19px auto;
    margin: 0;
}

.edit {
	background: url(../../../assets/img/icons/edit.svg) no-repeat 0.5rem;
	background-position:right;
	display: block;
	line-height: 1.1;
	padding-left: 0rem;
    background-size: 20px auto;
    margin: 0;
    width:100%;
    height: 20px;
    transition: all .25s ease-in-out;
}

.edit:hover {
    transform: scale(1.25);;
    
}

/* --- Responsive Table ---*/
	
table.res {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
}

table.res thead {
	border: none;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	padding:1.2rem 1.5rem;
}

table.res tr {
	background-color: #F4F2F5;
	border-bottom: 4px solid #FC296E;
	display: block;
	margin-bottom: 2rem;
}

table.res td {
	display: block;
	text-align: right;
	padding:1.2rem 1.5rem;
}

table.res td::before {
	content: attr(data-label);
	float: left;
	font-weight: bold;
}

/* Larger than mobile screen */
@media (min-width: 45.0rem) {
	
	ul.dashboard-nav li {
	    width: 33%;
	}
	
	/* --- Responsive Table ---*/

	table.res {
		table-layout: fixed;
		border: 0;
		width: 100%;
		white-space: normal;
	}
	
	table.res thead {
		border: none;
		clip:auto;
		height: auto;
		margin: auto;
		overflow:scroll;
		padding: 0;
		position: relative;
		border-bottom: 4px solid #FC296E;	
	}
	
	table.res thead tr {
		border-bottom: none;
		
	}
	
	table.res tr {
		background-color: transparent;
		border-bottom: 1px solid #D1D1D1;
		margin-bottom: 0rem;
		display: flex;
		align-items: flex-start;
		flex-wrap: nowrap;
		height: 100%;
		align-items: center;
	}
	
	table.res tr:nth-child(even) {
		background-color: #F4F2F5;
	}
		
	table.res th,
	table.res td {		
		text-align: left;
		padding:1.2rem 1.5rem;
		border-bottom: none;
		width: 25%;
	}
	
	table.res.four th,
	table.res.four td {		
		text-align: left;
		padding:1.2rem 1.5rem;
		border-bottom: none;
		width: 25%;
	}
	
	table.res.four th:first-child,
	table.res.four td:first-child {		
		flex-grow: 1;
		min-width: 40%;
	}
	
	table.res td::before {
		content: none;
		float: none;
	}
	
	
	.edit {
		background-position:0;
	    width:20px;
	}

}

/* Larger than tablet screen */
@media (min-width: 80.0rem) {
	
	/* --- Dashbaord --- */
	
	.dashboard-head  { 
		height: 20rem;
	}

	.dashboard-logo {
		text-align: right;
		order: 1;
	}

	.dashboard-head img  {
		height: 20rem;
	}
	
	ul.dashboard-nav li {
	    width: auto;
	}
	
}

/* Larger than desktop screen */
@media (min-width: 120.0rem) { 
	
	
}