@font-face {
    font-family: 'Gothicum';
    src: url('https://www.slbloodlust.com/assets/fonts/gothicum.ttf') format('truetype');
}

.fontTest {
    font-family: 'Gothicum', Tahoma, Geneva, sans-serif;
}

/*--------------------------------------------------------------
Main Page Body
--------------------------------------------------------------*/
body{   background-color: #101010;
        background-image: url("https://www.slbloodlust.com/assets/img/bg_lion.jpg");
        background-repeat: repeat;
        background-position: center top; 
        color: #000000;
        font-size: 12px; }
		

/*--------------------------------------------------------------
Main Page Links
--------------------------------------------------------------*/
a:link{ color: #990000; text-decoration: none; }
a:visited{ color: #990000; text-decoration: none; }
a:hover{ color: #990000; text-decoration: none; }
a:active{ color: #990000; text-decoration: none; }

/*--------------------------------------------------------------
Layout Building Blocks
--------------------------------------------------------------*/
.container{ padding: 0px;
            border: solid 1px #000000;
            background-color: #202020;
            --bs-gutter-x: 0.0rem;
			
}
.row{       --bs-gutter-x: 0.0rem;}
.colPad{    padding: 5px;}
.colPadNoB{   
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 0px;
}
.content{   border: solid 1px #000000;
            background-color: #FFFFFF;
            text-align: center;
            line-height: 1.3;
            height: 100%; width: 100%;}
			
.whiteBG{   border: solid 1px #000000;
            background-color: #FFFFFF;
            text-align: center;
            line-height: 1.3;}
.redHR{     color: #990000;
            background-color: #990000;
            height: 1px; width: 100%;
}


            
.styled-Table{
    text-align: left;
}

.contentLeftAlignWidePadding{
    border: solid 1px #000000;
    background-color: #FFFFFF;
    text-align: left;
    line-height: 1.3;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
}


/*--------------------------------------------------------------
Header & Navigation Bar
--------------------------------------------------------------*/
#headerFooter{  padding-left: 10px;
                padding-right: 10px;
                font-size: 12px;
                line-height: 1.5;
                color: #FFFFFF;
                text-decoration: none;
                background-color: #191919; }
				
#headerFooterLink{ color: #FFFFFF; }
#headerFooterLink a:link{ color: #757575; }
#headerFooterLink a:visited{ color: #757575; }
#headerFooterLink a:hover{ color: #FFFFFF; }
#headerFooterLink a:active{ color: #FFFFFF; }
#headerNav{     font-size: 14px; vertical-align: middle;
                background-color: #303030; opacity: 0.95; 
                padding-left: 10px; padding-right: 10px;
                padding-top: 2px; padding-bottom: 2px;}
#headerNav a:link{ color: #ffffff; background-color: #303030; }
#headerNav a:visited{ color: #ffffff; background-color: #303030; }
#headerNav a:hover{ color: #990000; background-color: #303030; }
#headerNav a:active{ color: #990000; background-color: #303030; }
.navbar-toggler{ color: #ffffff; float: right; }
.navbar-toggler:focus{ box-shadow: none; }
.navbar .dropdown-menu{ background-color: #303030; padding: 0px; font-size: 14px;}


.indexTopPlayersTable{
	font-size: 11px;
	color: #000000;
	width: 100%;
	margin: 0px;
	padding: 0px;
	line-height: 1.0;
}
.indexTopPlayersTable td{
	line-height: 1.2;
	padding: 0px;
    border-top: solid 1px #20202025;
}
.indexTopPlayersTable caption{
	caption-side: top;
	text-align:center;
	font-size: 12px;
}
/*--------------------------------------------------------------
Profile Page Navigation Pills
--------------------------------------------------------------*/
.profilePills{  border-radius: 0px;
                vertical-align: middle;
                text-align: center;
                line-height: 1;
                font-size: 12px; }
                
.profilePills .nav-link{
                background-color: #303030;
                color: #FFFFFF;
                border-radius: 0px;
                border: solid 1px #000000;
                width: 25%; } /*4 Rows = 25%*/
                
.profilePills .nav-link:hover{
                background-color: #202020;
                color: #990000;
                border-radius: 0px;
                border: solid 1px #000000; }
                
.profilePills .nav-link.active{
                background-color: #202020;
                color: #990000;
                border-radius: 0px;
                border: solid 1px #000000; }
                


@media only screen and (max-width: 576px) {
    .profilePills .nav-link { width: 100%;}
}

/*--------------------------------------------------------------
Bootstrap Icons
--------------------------------------------------------------*/
.bi-hourglass-split{          color: #bcb380; margin-right: 1px; }
.bi-bar-chart-line-fill{          color: #bcb380; margin-right: 1px; }
.bi-book-half{          color: #bcb380; margin-right: 1px; }
.bi-book-fill{          color: #bcb380; margin-right: 1px; }
.bi-pin-map-fill{          color: #bcb380; margin-right: 1px; }
.bi-hourglass-bottom{          color: #bcb380; margin-right: 1px; }
.bi-suitcase-lg{          color: #bcb380; margin-right: 1px; }
.bi-tag{          color: #bcb380; margin-right: 1px; }
.bi-flag-fill{          color: #bcb380; margin-right: 1px; }
.bi-music-note-beamed{          color: #bcb380; margin-right: 1px; }
.bi-shield-lock-fill{          color: #bcb380; margin-right: 1px; }
.bi-star-fill{          color: #bcb380; margin-right: 1px; }
.bi-lightning-fill{          color: #bcb380; margin-right: 1px; }
.bi-shield-fill{        color: #bcb380; margin-right: 1px; }
.bi-shield-shaded{        color: #bcb380; margin-right: 1px; }
.bi-people-fill{        color: #bcb380; margin-right: 1px; }
.bi-dash-circle-fill{        color: #bcb380; margin-right: 1px; }
.bi-plus-circle-fill{        color: #bcb380; margin-right: 1px; }
.bi-people{        color: #bcb380; margin-right: 1px; }
.bi-person-fill{        color: #bcb380; margin-right: 1px; }
.bi-person-fill-check{        color: #bcb380; margin-right: 1px; }
.bi-person{        color: #bcb380; margin-right: 1px; }
.bi-person-hearts{        color: #bcb380; margin-right: 1px; }
.bi-journals{        color: #bcb380; margin-right: 1px; }
.bi-award-fill{         color: #bcb380; margin-right: 1px; }
.bi-briefcase-fill{         color: #bcb380; margin-right: 1px; }
.bi-bookmark-dash-fill{ color: #bcb380; margin-right: 1px; }
.bi-cloud-sun-fill{ color: #bcb380; margin-right: 1px; }
.bi-moon-stars-fill{ color: #bcb380; margin-right: 1px; }
.bi-bookmark-plus-fill{ color: #bcb380; margin-right: 1px; }
.bi-droplet-half{          color: #bcb380; margin-right: 1px; }
.bi-shield-fill-plus{          color: #bcb380; margin-right: 1px; }
.bi-droplet-fill{          color: #bcb380; margin-right: 1px; }
.bi-geo-alt-fill{       color: #990000; margin-right: 1px; }
.bi-geo-alt-fill:link{       color: #990000; margin-right: 1px; }
.bi-geo-alt-fill:visited{       color: #990000; margin-right: 1px; }
.bi-geo-alt-fill:hover{       color: #990000; margin-right: 1px; }
.bi-geo-alt-fill:active{       color: #990000; margin-right: 1px; }

/*--------------------------------------------------------------
Health Bar
--------------------------------------------------------------*/
.progress #barBlack{        background-color: #202020; }

.progress #barHuman{        background-color: #009900; }	
.progress #barHunter{       background-color: #007000; }	

.progress #barElohim{       background-color: #cc6600; }	
.progress #barDemon{        background-color: #660066; }



.progress #barTraditionalist{  background-color: #A9A9A9; }
.progress #barAnarchist{    background-color: #3b3b3b; }

.progress #barVampire{
background: rgb(82,0,0);
background: linear-gradient(90deg, rgba(82,0,0,1) 0%, rgba(144,26,26,1) 44%, rgba(88,3,3,1) 100%);
background-color: #8c0a0a;
}	
.progress #barLycan{        background-color: #143d66; }	
.progress #barFae{        	background-color: #7d8f4a; }	
.progress #barElf{        	background-color: #b8b16c; }	

.progress #barMage{         background-color: #ab9b63; }
.progress #barDarkMage{     background-color: #5b5166; }
.progress #barLiche{     	background-color: #4a3b44; }
.progress #barChangeling{   background-color: #6d8f4a; }	
.progress #barGhoul{        background-color: #690808; }	
.progress #barDhampir{      background-color: #690808; }	
.progress #barCambion{      background-color: #660033; }
.progress #barKinfolk{      background-color: #009999; }
.progress #barHalfling{     background-color: #949e5d; }

.progress #barWraith{       background-color: #808080; }
.progress #barRisen{       	background-color: #3b3b3b; }
.progress #barRevenant{     background-color: #5c2d2d; }
.progress #barLostSoul{     background-color: #303030; }

.progress #barSkillExp{
background: rgb(140, 125, 84);
background: linear-gradient(90deg, rgba(140, 125, 84) 0%, rgba(196, 177, 126) 44%, rgba(140, 125, 84) 100%);
background-color: #8c7d54;
}	










.progress{      width: 100%;
                background-color: #202020;
                position: relative;
                border-radius: 0px; }
.progress span{ position: absolute;
                top: -1.5;
                z-index: 2;
                text-align: center;
                width: 100%;
                color: white;}
.bar{ z-index: 1; position: absolute; }

.progress #barEvil{      
background: rgb(82,0,0);
background: linear-gradient(90deg, rgba(82,0,0,1) 0%, rgba(144,26,26,1) 44%, rgba(88,3,3,1) 100%);
background-color: #8c0a0a;
	color: #000000;

}
.progress #barGood{      
background: rgb(0,8,82);
background: linear-gradient(90deg, rgba(0,8,82,1) 0%, rgba(26,125,144,1) 44%, rgba(14,3,88,1) 100%);
	background-color: #1a7d90;
	color: #000000;
}
.progress #barNeutral{
background: rgb(4,82,0);
background: linear-gradient(90deg, rgba(4,82,0,1) 0%, rgba(7,140,8,1) 50%, rgba(3,88,21,1) 100%);
	background-color: #078c08; 
	color: #000000;
}	

@media only screen and (max-width: 992px) {
    #healthCon { width: 40%;}
}
@media only screen and (max-width: 768px) {
    #healthCon { width: 50%;}
}
@media only screen and (max-width: 576px) {
    #healthCon { width: 60%;}
}


.familyTree{
    line-height: 1.0;
    padding: 0px;
    font-size: 12px;
}

/*--------------------------------------------------------------
Border Styles
--------------------------------------------------------------*/
.npcDynastyTable{
    width: 100% !important;
	height: 50px;
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    text-align: center;
    border-color: #000000;
    background-color: #FFFFFF;
}

.npcDynastyTable thead{
    background-color: #303030;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-top: transparent;
    border-bottom: solid 1px #000000;
}
.npcDynastyTable tr{
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
	border-bottom: transparent;
}
.npcDynastyTable td{
	padding: 0px;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
	border-bottom: transparent;
}

.generationsRankTable{
	font-size: 12px;
}
.generationsRankTable #genTableRow{
	font-size: 11px;
}


.populationTable{
	font-size: 11px;
	color: #000000;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
.populationTable td{
	line-height: 1.1;
	padding: 0px;
    border-top: solid 1px #20202025;
}
.alignmentTable{
	width: 100%;
	margin:0px;
	padding: 0px;
	text-align: left;
}

.historyTable{
	font-size: 12px;
	width: 100%;
	margin:0px;
	padding: 0px;
	text-align: left;
}

.statsTable{font-size: 11px;
            text-align: left;
            color: #000000;
            width: 100%;
            margin: 0px;
            padding: 0px;}
.statsTable tbody tr{
            background-color: #FFFFFF;
            border-color: #00000050;
            overflow: hidden;
            white-space: nowrap;}
.statsTable thead tr{           background-color: #303030; }
.statsTable thead tr a:link{    color: #FFFFFF; display: block; }
.statsTable thead tr a:visited{ color: #FFFFFF; }
.statsTable thead tr a:hover{   color: #FFFFFF; }
.statsTable thead tr a:active{  color: #FFFFFF; }

.lineageTable{
    width: 100% !important;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    text-align: left;
    border-color: #000000;
    background-color: #FFFFFF;
}

.lineageTable thead{
    background-color: #303030;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-top: transparent;
    border-bottom: transparent;
}
.lineageTable tr{
    border-top: transparent;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
}

#nav-tab{
    background-color: #303030;
    border-radius: 0px;
    vertical-align: middle;
    text-align: middle;
    line-height: 1;
    white-space: nowrap;
}

#nav-tab .nav-link{
    background-color: #303030;
    color: #FFFFFF;
    border-radius: 0px;
    text-align: middle;
    border: solid 1px #000000;
}
#nav-tab .nav-link:hover{
    background-color: #202020;
    color: #990000;
    border-radius: 0px;
}
#nav-tab .nav-link.active{
    background-color: #202020;
    color: #990000;
    border-radius: 0px;
}

#dataTableContainer a:link{
    color: #303030;
}

#dataTableContainer a:visited{
    color: #303030;
}

#dataTableContainer a:hover{
    color: #990000;
}

#dataTableContainer a:active{
    color: #990000;
}



/*--------------------------------------------------------------
Data Tables -  Pagination Buttons
--------------------------------------------------------------*/
.dataTables_wrapper .dataTables_paginate{
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-top: transparent;
    border-bottom: transparent;
}

.dataTables_wrapper{
    background-color: #303030;
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
}
.dataTables_wrapper .pagination{
    background-color: #303030;
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
    border-bottom: solid 1px #000000;
}

.pagination .page-link:link{
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: none; 
    background-color: #303030;
    border-radius: 0px;
    border: transparent;
	font-size: 12px;
}

.pagination .page-link:visited{
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: none; 
    background-color: #303030;
    border-radius: 0px;
    border: transparent;
}



.pagination .page-link:focus{  
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: none; 
    background-color: #303030;
    border-radius: 0px;
    border: transparent;
}

.pagination .page-item.active{  
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: none; 
    background-color: #303030;
    border-radius: 0px;
    border: transparent;
}
.pagination .page-link:disabled{
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: none; 
    background-color: #303030;
    border-radius: 0px;
    border: transparent;
}
.pagination .page-link:hover{  
    color: #990000;
    text-decoration: none;
    box-shadow: none; 
    background-color: #202020;
    border-radius: 0px;
    border: transparent;
}
/*--------------------------------------------------------------
Border Styles
--------------------------------------------------------------*/
.noBorder{  border: transparent; }
.noBorderL{ border-left: transparent; }
.noBorderR{ border-right: transparent; }
.noBorderT{ border-top: transparent; }
.noBorderB{ border-bottom: transparent; }
.noBorderX{ border-left: transparent;
            border-right: transparent; }
.noBorderY{ border-top: transparent;
            border-bottom: transparent; }
.borderL{   border-left: solid 1px #000000; }
.borderR{   border-right: solid 1px #000000; }
.borderB{   border-bottom: solid 1px #000000; }
.borderT{   border-top: solid 1px #000000; }

/*--------------------------------------------------------------
Padding Styles
--------------------------------------------------------------*/
.pad5{ padding: 5px; }
.padSides50{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 50px;
	padding-left: 50px;
}
.npcBioText{
	font-size: 12px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 50px;
	padding-left: 50px;
}
.npcBioHeader{
	font-size: 12px;
}









 /* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
} 

.coloredHR{
    height: 2px; width: 100%;
}