/*
  Free to use CSS template by Katie (#106445).
  This code may be altered, edited, or re-uploaded. 
  This template may be used to create paid codes (pre-mades and commissions).
  Please do NOT remove this credit, unless your coding becomes unrecognizable from this one! 
*/


/* FONT (From Google Fonts) */

@import url('https://fonts.google.com/specimen/Poppins');

/* BACKGROUND */

body {
	background: url('https://th.bing.com/th/id/R.98f3d864aebb6255784ec6635b223fb3?rik=J2uPw5OAB43xmA&riu=http%3a%2f%2fwallpapercave.com%2fwp%2fM3Q3VV5.jpg&ehk=QmpucXU7%2fxVK0v7P5zy0191x18FlgMn10ac%2bTJ%2fYUio%3d&risl=&pid=ImgRaw&r=0') center center fixed;
	background-size: 100%;
	font-family: 'Poppins', sans-serif;
	color: #000000;
}


/* FEED ALL, PLAY ALL */

.feature {
	background: rgba(154, 40, 135, 0.7) !important;
	color: #9a2887 !important;
	border: none !important;
	border-radius: 5px !important;
}


/* TOPBAR ("Welcome back, ___"), NAVBAR (Den/Crossroads/Etc.) */

.topbar {
	background: rgba(100, 0, 70, 0.8);
	border: none;
	border-top: none;
	color: #640046;
	border-radius: 5px;
	font-family: FONT CSS HERE;
}

.navbar {
	background: rgba(154, 40, 135, 0.7);
	border-bottom: none;
	font-family: FONT CSS HERE;
	color: #9a2887;
	border-radius: 5px;
}

.navbar li a {
	color: #000000 !important;
}

/* NAVBAR HOVER COLOR */

.navbar li a:hover {
	background: rgba(129, 5, 125, 0.7) !important;
}


/* MAIN PANEL */

/* RIGHT SIDE */
.container.main {
	background: rgba(0, 0, 0, 0.6);
	border: none;
	box-shadow: none;
	border-radius: 5px;
}

/* LEFT SIDE */
.col-md-9 {
	background: none;
}


/* BREADCRUMB (Home / Den) */

.breadcrumb {
	background: rgba(0, 0, 0, 0.6);
}

.breadcrumb .active {
	color: #000000;
}


/* ALERTS (ie. "Your lionesses have returned from hunting!") */

.alert {
	background: rgba(0, 0, 0, 0.6);
	border: none;
	color: #000000;
}

.alert-warning,
.alert-danger {
	background: rgba(0, 0, 0, 0.6);
	color: #000000;
}


/* "King Dynasty, Pride Dynasty, Achievements, Showcase" Panels */

.feature,
div.left {
	background: rgba(0, 0, 0, 0.6);
	border: none;
}


/* ENERGY BARS, ACHIEVEMENTS, & BOOKMARKS */

.panel {
	background: rgba(0, 0, 0, 0.6) !important;
	box-shadow: none !important;
	border: none !important;
	color: #000000 !important;
}

/* ENERGY BAR BACKGROUND */
.progress {
	background: rgba(0, 0, 0, 0.6);
	color: #000000 !important;
}

/* ENERGY BAR TEXT */
.progress div {
	color: #000000 !important;
}

/* ENERGY BAR COLOR */
.progress-bar {
	background: rgba(0, 0, 0, 0.6);
	color: #000000 !important;
}


/* CHAT */

.s-chat-message:nth-child(even) {
	background: #000000 !important;
	border: none !important;
}

.s-chat-message:nth-child(odd) {
	background: #000000 !important;
	border: none !important;
}

/* PINNED MESSAGE */
.s-chat-message__pinned {
	background: #000000 !important;
	color: #000000 !important;
	border: none !important;
}

.s-chat-message_timestamp {
	color: #000000 !important;
}

div#chatMessageContainer {
	border: none !important;
}

/* CURRENT CHANNEL TAB (MAIN, SALES, ETC.) */
button#label_currentChannel {
	border: none !important;
	background: #000000 !important;
}


/* BIGGEST HEADER ("___"'s DEN) */

h1 {
	color: #000000;
	font-size: 72px;
	text-align: center;
}


/* MEDIUM HEADER */

h2 {
	color: #000000;
	font-size: 24px;
	text-align: center;
}


/* SMALL HEADER */

h3 {
	color: #000000 !important;
	font-size: 14px !important
}


/* LION INFO TABLE (Level, Stats, Branch, Territory Count, Etc.) */


/* PANEL BACKGROUND COLOR */
.table {
	background: rgba(0, 0, 0, 0.6);
	border: none !important;
	border-collapse: separate;
	border-radius: 5px;
}


/* HEADERS COLOR (King Name + Title, "There are _ lions with mutations in _'s pride.") */
.top,
.bottom,
th {
	background: rgba(0, 0, 0, 0.6) !important;
	color: #000000 !important;
	border-radius: 5px;
}


/* Block of color where "Territory Description, Player Name, Avatar URL" etc. are */

.table .left {
	background: rgba(0, 0, 0, 0.6)
}

/* Affects the color behind your territory description, player name, etc. */

input,
select,
textarea {
	background: rgba(0, 0, 0, 0.6) !important;
	border: none !important;
	border-color: black;
	border-radius: 5px;
	box-shadow: none !important;
	color: black !important;
	text-shadow: none !important;
}


/* Color behind "Level, Stats, Branch, Territory" etc. */

.inner-table .left {
	background: rgba(0, 0, 0, 0.6) !important;
}


/* Color behind the number of all of the things above */

.inner-table .right {
	background: rgba(0, 0, 0, 0.6)
}

/* IGNORE */
.right_odd {
	background: none !important;
}


/* ACCOUNT OPTIONS PANELS  (Friend Requests Toggles, etc.) */

.item-header {
	background: rgba(0, 0, 0, 0.6) !important;
	color: #000000  !important;
}

.item {
	background: rgba(0, 0, 0, 0.6) !important;
	border: none !important;
}


/* BEETLE MOUND TOPBAR (Where it says Beetle Training Grounds, Beetle Battling, etc.) */

.sub_menu {
	background: rgba(0, 0, 0, 0.6) !important;
}

.sub_menu_item_selected {
	background: rgba(0, 0, 0, 0.6) !important;
}


/* Affects the color behind "_ Unsorted", "_ Pregnant Lionesses", etc. and cave/mound names */

.cave-grid,
.mound-grid {
	background: rgba(0, 0, 0, 0.6);
	border: none !important;
}


/* LINKS & LINK HOVER COLOR */

a:link,
a:visited {
	color: #000000 !important;
}

a:hover {
	color: #000000 !important;
}


/* BOXES (Copy paste to add more or less) */

.boxcontainer {
	background: none;
	height: auto;
	padding: 0px;
	display: flex;
	justify-content: center
}

.Box1 {
	float: left;
	background: rgba(0, 0, 0, 0.6);
	color: #000000 ;
	padding: 15px;
	border: none;
	border-radius: 5px;
	margin: 5px;
	height: 300px;
	width: 350px;
	overflow: auto;
	margin-bottom: 25px;
	transition: 1s /* HOW FAST HOVER BOX EXPANDS TO FULL SIZE */7
}

/* HOVER BOX (SIZE WHEN HOVERING OVER) */
.Box1:hover {
	overflow-y: auto;
}

.Box2 {
	float: left;
	background: rgba(0, 0, 0, 0.6);
	color: #000000 ;
	padding: 15px;
	border: none;
	border-radius: 5px;
	margin: 5px;
	height: 300px;
	width: 350px;
	overflow: hidden;
	margin-bottom: 25px;
	transition: 1s /* HOW FAST HOVER BOX EXPANDS TO FULL SIZE */
}

/* HOVER BOX (SIZE WHEN HOVERING OVER) */
.Box2:hover {
	overflow-y: auto;
}


/* SCROLL BAR */

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}


/* SCROLL BAR BACKGROUND */

::-webkit-scrollbar-track {
	background: #000000;
}


/* SCROLL BAR "THUMB" */

::-webkit-scrollbar-thumb {
	background: #000000;
	border-radius: 4px;
}


/* LION AND USER AVATAR OPACITY */

div#lion_image {
	opacity: 0.6;
}

table#player img {
	opacity: 0.6;
}


/* CIRCULAR LION AND USER AVATAR */

div#lion_image {
	border-radius: 50% !important;
	overflow: hidden;
	margin-top: 19px;
	margin-left: 6px;
}

table#player img {
	border-radius: 50% !important;
	overflow: hidden;
}


/* LIODEN LOGO REPLACER */

div.container.main>div:nth-child(1)>nav>div.navbar-header>a>img {
	content: url('IMAGE URL HERE');
}


/* PREGNANT LIONESSES */

div.cave-grid>img {
	content: url('https://puu.sh/EJV1D/dfefa228df.png')!important;
}


/* CAVES (Copy paste to add more) */

a[href$="CAVE ID HERE"]>div.cave-grid>img {
	content: url('IMAGE URL HERE')!important;
}


/* UNSORTED */

a[href$="unsorted.php?id=USERID"]>div.cave-grid>img {
	content: url('IMAGE URL HERE')!important;
}


/* PRIDE OVERVIEW */

a[href$="lionoverview.php?id=USERID"]>div.cave-grid>img {
	content: url('IMAGE URL HERE')!important;
}


/* MOUNDS */

.mound-grid img {
	background: url('IMAGE URL HERE');
	width: 0;
	height: 0;
	padding-top: 80px;
	padding-right: 130px;
}