/*

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('FONT URL');

/* BACKGROUND */

body {
background: url('BACKGROUND URL') center center fixed;
background-size: 100%;
font-family: 'FONT NAME';
color: #2e2a2b
}

/* MAIN PANEL */

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

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

/* TOPBAR ("Welcome back, ___") */

.topbar {
background: rgba(1, 1, 1, 0.5);
border: none;
border-top: none;
color: #000000;
border-radius: 0px;
}

/* NAVBAR (Den/Crossroads/Etc.) */

.navbar {
background: rgba(1, 1, 1, 0.5);
border-bottom: none;
color: #000000;
border-radius: 0px
}

/* NAVBAR BUTTON TEXT COLOR */

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

/* NAVBAR BUTTON HOVER */

.navbar li a:hover {
background: rgba(1, 1, 1, 0.5) !important;
border-bottom: none;
color: #000000 !important;
border-radius: 0px
}

/* BREADCRUMB (Home / Den) */

.breadcrumb {
background: rgba(1, 1, 1, 0.5) !important;
border: none;
border-radius: 0px
}

/* BREADCRUMB TEXT */

.breadcrumb .active {
color: #000000
}

/* CSS CREDIT */

.breadcrumb::after {
content: "Template by Katie (#106445)";
color: #000000;
position: absolute;
right: 13%; /* (This may need adjusting) */
z-index: 100
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {

.breadcrumb::after {
right: 20%
}
}

@media only screen and (max-width: 991px) and (min-width: 768px) {

.breadcrumb::after {
right: 20%
}
}

@media only screen and (max-width: 767px) {

.breadcrumb::after {
right: 22%
}
}

/* BOOKMARK BUTTON */

input.floatright, input.floatright:hover {
background: rgba(1, 1, 1, 0.5) !important;
border: none !important;
 border-radius: 0px;
color: #000000 !important;
}

/* SWITCH ACCOUNT BUTTON */

button.button, button.button:hover {
background: rgba(1, 1, 1, 0.5);
border: none !important;
border-radius: 0px;
text-shadow: none !important;
color: #000000 !important
}

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

.alert,
.alert-warning,
.alert-danger {
background: rgba(1, 1, 1, 0.5) !important;
border: none;
color: #000000;
border-radius: 0px !important
}

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

h1 {
color: #000000;
font-size: 90px;
text-align: center;
font-family: 'FONT NAME'
}

/* MEDIUM HEADER */

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

/* SMALL HEADER */

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

/* RIGHT SIDE PANEL HEADER */

.sidebar h3 {
color: #000000 !important;
font-size: 26px !important;
font-family: 'FONT NAME'
}
/* RIGHT SIDE PANELS */
.panel {
background: rgba(1, 1, 1, 0.5) !important;
box-shadow: none !important;
border: none !important;
color: #000000 !important;
border-radius: 0px
}

/* ENERGY BAR BACKGROUND */

.progress {
background: rgba(1, 1, 1, 0.5);
color: #000000 !important;
border-radius: 0px !important
}

/* ENERGY BAR COLOR */

.progress-bar {
background: rgba(1, 1, 1, 0.5);
color: #000000 !important;
border-radius: 0px !important
}

/* ENERGY BAR TEXT */

.progress div {
color: #000000 !important
}

/* CHAT */

.s-chat-message:nth-child(even) /* Even Numbered Messages */ {

background: rgba(1, 1, 1, 0.5) !important;
color: #000000 !important;
border: none !important
}

.s-chat-message:nth-child(odd) /* Odd Numbered Messages */ {

background: rgba(1, 1, 1, 0.5) !important;
color: #000000 !important;
border: none !important
}

.s-chat-message__pinned /* Pinned Message */ {

background: rgba(1, 1, 1, 0.5) !important;
color: #000000 !important;
border: none !important
}

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

div#chatMessageContainer {
border: none !important;
}

button#label_currentChannel /* Channel Button ie. Main, Sales */ {

background: rgba(1, 1, 1, 0.5) !important;
color: #000000 !important;
 border: none !important
}

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

/* PANEL BACKGROUND COLOR */

.table {
background: rgba(1, 1, 1, 0.5);
border: none !important;
border-collapse: separate;
border-radius: 0px
}

/* HEADERS COLOR (King Name + Title, "There are _ lions with mutations in _'s
pride.") */

.top,
.bottom,
th {
background: rgba(1, 1, 1, 0.5) !important;
color: #000000 !important;
border-radius: 0px
}

td.bottom a {
text-decoration: none !important
}

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

.inner-table .left {
background: rgba(155, 226, 242, 0.6) !important;
color: #2e2a2b;
border-radius: 0px
}

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

.inner-table .right {
background: none;
border-radius: 0px !important
}

td.right {
border-radius: 0px !important
}

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

/* Affects the color behind "_ Unsorted", "_ Pregnant Lionesses", "View Pride
Overview", and cave/mound names */
.cave-grid,
.mound-grid {
background: rgba(1, 1, 1, 0.5);
border: none !important;
border-radius: 0px !important
}

/* FEED ALL, PLAY ALL */

.feature {
background: rgba(1, 1, 1, 0.5) !important;
color: #000000 !important;
border: 1px solid #000000 !important;
border-radius: 0px !important
}

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

.feature,
div.left {
background: rgba(1, 1, 1, 0.5);
border: none;
border-radius: 0px !important
}

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

.table .left {
background: rgba(1, 1, 1, 0.5);
border-radius: 0px
}

/* Color behind the content of the elements listed above */

input,
select,
textarea {
background: rgba(1, 1, 1, 0.5) !important;
border: none !important;
border-radius: 0px !important;
color: #000000 !important;
box-shadow: none !important;
text-shadow: none !important
}

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

.item-header {
background: rgba(1, 1, 1, 0.5) !important;
color: #000000 !important;
border-radius: 0px !important;
}

.item {
background: rgba(1, 1, 1, 0.5) !important;
border: none !important;
border-radius: 0px !important
}
/* ACCOUNT OPTIONS ON/OFF TOGGLE SWITCH */

div.slider.round /* Background */ {
background: #000000 !important
}

div.slider.round::before /* Circle Part */ {

background: #000000 !important
}

/* Copyright, Terms of Service, CoC, etc. */

div.container.footer.center.white.visible-lg.visible-md.visible-sm,
div.container.footer.center.white.visible-lg.visible-md.visible-sm a {
color: #000000 !important;
text-shadow: none !important
}

/* LINK COLOR */

a:link,
a:visited {
color: #ffffff !important
}

/* LINK HOVER COLOR */

a:hover {
color: #ffffff !important
}

/* BOX CONTAINER */

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

/* BOXES */

.smallbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #000000;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 150px;
width: 28.4%;
overflow: auto
}

.mediumbox {
float: left;
 background: rgba(1, 1, 1, 0.5);
color: #000000;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 150px;
width: 43.8%;
overflow: auto
}

.largebox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #000000;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 150px;
width: 90%;
overflow: auto
}

/* HOVER BOXES */

.smallhoverbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #000000;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 50px;
width: 28.4%;
overflow: auto;
transition: 3s
}

.smallhoverbox:hover {
height: 150px;
width: 28.4%;
}

.mediumhoverbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #000000;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 50px;
width: 43.8%;
overflow: auto;
transition: 3s
}
.mediumhoverbox:hover {
height: 150px;
width: 43.8%;
}

.largehoverbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #000000;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 150px;
width: 90%;
overflow: auto;
transition: 3s
}

.largehoverbox:hover {
height: 150px;
width: 90%;
}

/* SCROLL BAR */

/* WIDTH */

::-webkit-scrollbar {
width: 10px
}

/* BACKGROUND */

::-webkit-scrollbar-track {
background: #ffffff
}

/* "THUMB" */

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

/* LION AND USER AVATAR OPACITY */

div#lion_image {
opacity: 1
}

table#player img {
opacity: 1
}
/* CIRCULAR LION AND USER AVATAR */

div#lion_image {
border-radius: 50% !important;
overflow: hidden;
margin-top: 15px; /* May need adjusting */
margin-left: 12px /* May need adjusting */
}

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('LOGO REPLACER URL')
}

/* CAVE / MOUND IMAGES */

div.cave-grid>img /* Pregnant Lionesses */ {

content: url('IMAGE URL') !important
}

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

a[href$="lionoverview.php?id=PLAYER ID"]>div.cave-grid>img /* Pride Overview */ {

content: url('IMAGE URL') !important
}

a[href$="unsorted.php?id=PLAYER ID"]>div.cave-grid>img /* Unsorted */ {

content: url('IMAGE URL') !important
}

.mound-grid img /* Mound(s) */ {

background: url("IMAGE URL");
width: 0;
height: 0;
padding-top: 80px;
padding-right: 130px
}

/* MAKES BOXES/DESCRIPTION SHOW ON MOBILE */

@media only screen and (max-width: 767px) {

.container.main .hidden-xs {
display: block !important;
}
}

@media only screen and (max-width: 991px) and (min-width: 768px) {

display: block !important;
}
@media only screen and (min-width: 1200px) {
div.quote {
width: 790px;
}
}