/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~ Product and property of Titan Informatics LLC ~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* NAVIGATION START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
:root {
	--background: #f4f4f4;
	--background-white: #fff;
	--text-color: #252525;
	--border: 1px solid #d5d5d5;
	--background-hover: rgba(0, 0, 0, 0.05);
}

ul[data-name="navigation"] {
	width: 100%;
	list-style: none;
	text-transform: capitalize;
	position: relative; 
	float: left;
	border-top: var(--border);
	border-bottom: var(--border);
}

ul[data-name="navigation"] ul {
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: height 0.3s ease, opacity 0.3s ease;
	border: unset;
	display: none;
}

ul[data-name="navigation"] ul.active {
	display: block;
	opacity: 1;
}

ul[data-name="navigation"] ul.active a {
	padding-left: 40px;
}

ul[data-name="navigation"] li {
	width: 100%;
	border-bottom: var(--border);
	cursor: pointer;
}

ul[data-name="navigation"] li:nth-last-of-type(1) {
	border-bottom: unset;
}

ul[data-name="navigation"] li li {
	border-top: var(--border);
	border-bottom: unset;
}

ul[data-name="navigation"] a {
	width: 100%;
	position: relative; 
	float: left;
	text-decoration: unset;
	padding: 12.5px 20px;
	color: var(--text-color);
	box-sizing: border-box;
}

ul[data-name="navigation"] a:hover {
	background: var(--background-hover);
	transition: 0.2s;
}

ul[data-name="navigation"] a.dropdown {
	padding: 16px 40px 16px 20px;
}

ul[data-name="navigation"] a.dropdown::after {
	font-family: "Font Awesome 6 Sharp";

	font-size: 0.938rem;
	font-weight: 400;

	content: "\2b";
	position: absolute;
	top: 50%;
	right: 17.5px;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
	transform-origin: center;
}

ul[data-name="navigation"] a.active.dropdown::after {
	transform: translateY(-50%) rotate(45deg);
}







/*
ul[data-name="navigation"] li.dropdown i {
	font-family: "Font Awesome 6 Sharp";
	font-size: 1rem;
	font-weight: 600;
	content: "\2b";
	position: absolute;
	top: 17px; right: 18px;
	transition: 0.25s linear;
	cursor: default;
}
ul[data-name="navigation"] li.active.dropdown i {
	transform: rotate(45deg);
}
*/
ul[data-name="navigation"] li a::before,
ul[data-name="navigation"] li a::after {
	line-height: 1.5rem;
	position: relative;
	float: left;
	cursor: pointer;
}
ul[data-name="navigation"] li a::before {
	font-family: "Font Awesome 6 Sharp";
	font-size: 1.5rem;
	font-weight: 300;
	min-width: 30px;
	margin-right: 10px;
	text-align: center;
}
ul[data-name="navigation"] a[title="Articles"]::before {content: "\f1ea";}
ul[data-name="navigation"] a[title="Articles"]::after {content: "Articles";}
ul[data-name="navigation"] a[title="Pages"]::before {content: "\e1d8";}
ul[data-name="navigation"] a[title="Pages"]::after {content: "Pages";}
ul[data-name="navigation"] a[title="Categories"]::before {content: "\e479";}
ul[data-name="navigation"] a[title="Categories"]::after {content: "Categories";}
ul[data-name="navigation"] a[title="Sliders"]::before {content: "\e237";}
ul[data-name="navigation"] a[title="Sliders"]::after {content: "Sliders";}
ul[data-name="navigation"] a[title="Advertisements"]::before {content: "\f641";}
ul[data-name="navigation"] a[title="Advertisements"]::after {content: "Advertisements";}

ul[data-name="navigation"] a[title="Polls"]::before {content: "\f772";}
ul[data-name="navigation"] a[title="Polls"]::after {content: "Polls";}

ul[data-name="navigation"] a[title="Staff"]::before {content: "\f509";}
ul[data-name="navigation"] a[title="Staff"]::after {content: "Staff";}

ul[data-name="navigation"] a[title="Roles"]::before {content: "\f0c0";}
ul[data-name="navigation"] a[title="Roles"]::after {content: "Roles";position: absolute;/*top: 0;*/left: 55px;}

ul[data-name="navigation"] a[title="Members"]::before {content: "\f0c0";}
ul[data-name="navigation"] a[title="Members"]::after {content: "Members";}
ul[data-name="navigation"] a[title="Subscribers"]::before {content: "\e591";}
ul[data-name="navigation"] a[title="Subscribers"]::after {content: "Subscribers";}



ul[data-name="navigation"] a[title="Settings"]::before {content: "\f013";}
ul[data-name="navigation"] a[title="Site"]::before {content: "\f0e8";}
ul[data-name="navigation"] a[title="Site"]::after {content: "Site";}
ul[data-name="navigation"] a[title="PHPMailer"]::before {content: "\f48b";}
ul[data-name="navigation"] a[title="PHPMailer"]::after {content: "PHPMailer";}
ul[data-name="navigation"] a[title="Emails"]::before {content: "\f674";}
ul[data-name="navigation"] a[title="Emails"]::after {content: "Emails";}
ul[data-name="navigation"] a[title="Database"]::before {content: "\f1c0";}
ul[data-name="navigation"] a[title="Database"]::after {content: "Database";}



ul[data-name="navigation"] create {
	/*height: 100%;
	position: relative;
	float: right;
	margin: -50px 0 -10px -15px;*/
	position: absolute;
	top: 0;right: 0;
}
ul[data-name="navigation"] create::before {
	font-family: "Font Awesome 6 Sharp";
	font-size: 0.938rem;
	font-weight: 400;
	content: "\2b";
	min-width: 50px;
	min-height: 49px;
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background: #fff;
	/*background: rgba(255, 255, 255, 0.7);*/
	-webkit-transition: color 0.15s;
	-webkit-transition: background 0.15s;
	transition: color 0.15s;
	transition: background 0.15s;
	border-left: var(--border);
	/*border: 1px solid rgba(0, 0, 0, 0.1);
	border-right: unset;*/
}
ul[data-name="navigation"] create:hover::before {
	color: #fff;
	background: #3b9bd5;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ NAVIGATION ENDS */