:root {
  --card-border-radius-vert: 5px;
  
  /*
  --Rebel-color : #b22a2e;
  --Empire-color : #1072a9;
  --Scum-color : #4e5735;
  */
  
 --mixed-color : #795948;
 
 --Rebel-color : rgb(187, 26, 27);
 --RebelAlliance-color : rgb(187, 26, 27);
 --Resistance-color : rgb(254, 159, 49);
 --Empire-color : rgb(45, 82, 115);
 --GalacticEmpire-color : rgb(45, 82, 115);
 --FirstOrder-color : rgb(69, 68, 67);
 --Scum-color : rgb(243, 202, 23);
 --Upgrade-color : #edec51;
 
 --PageBackground-color : rgb(21, 21, 21);
 --CardBackground-color : rgb(40, 39, 39);
 
 --Highlight-color : rgb(255, 0, 52);
 --Highlight-color-val : 255,0,52;
 --Alert-color : red;

 --Upgrade-height : 120px; 

}

.Highlight-color,
.Highlight-color-background{
background-color:var(--Highlight-color) !important; 
}


.Rebel-color{
color: var(--Rebel-color) !important; 
}

.RebelAlliance-color{
color: var(--RebelAlliance-color) !important; 
}

.Resistance-color{
color: var(--Resistance-color) !important;  
}

.Empire-color{
color: var(--Empire-color) !important; 
}




.GalacticEmpire-color{
color: var(--GalacticEmpire-color) !important; 
}

.FirstOrder-color{
color: var(--FirstOrder-color) !important; 
}

.Scum-color{
color: var(--Scum-color) !important;  
}

@media only screen and (min-width: 993px) {
  #toast-container {
    bottom: 20px !important;
    left: 20px !important;
    max-width: 86%;
  }
}

@font-face {
  font-family: AbilityTextTags;
  src: url("../fonts/AbilityTextTags-b8446ca7e3c78cfccfd80129b9fffd9f.woff2"), url("fonts/AbilityTextTags-9dba850ca34c5da30c9f09ca933d3e2d.woff"), url("fonts/AbilityTextTags-f846c4a20f4f605051fafa9132e6d64a.ttf");
  font-style: normal;
  font-weight: 400;
}

@font-face {
    font-family: 'KimberleyBlack';
    src: url('../fonts/kimberleybl.eot');
    src: url('../fonts/kimberleybl.eot') format('embedded-opentype'),
         url('../fonts/kimberleybl.woff') format('woff'),
         url('../fonts/kimberleybl.ttf') format('truetype'),
         url('../fonts/kimberleybl.svg#KimberleyBlack') format('svg');		 
}



.icon-card-size{

font-size:1.2em !important;	
}



body {
font-family: 'Roboto', sans-serif;
background-color:var(--PageBackground-color);
color:#ddd;
}


.FabAction-bg{
background-color:#666;
}

.FabAction-color{
color:#222;
}




.ico-font-size{
font-size:12px;
color:#ddd;
}

.card.horizontal .card-image img {
width : 100%;
}

.card-image-vert {
height : var(--Upgrade-height);
}

.card-image-vert img{
height : var(--Upgrade-height);
}

.card-content-vert {
height : calc(var(--Upgrade-height) * 2 + 18px);
}

.card--horizontal .card-image {

    max-width: 592px;
    min-width: 60px;
    width: 45%;

}


.table {
    display: table;
    padding: 5px;
	margin:auto;
	text-align:center;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    padding: 5px;
    width: auto;
    margin: 5px;
	
	line-height: 32px;
}

.row .col {
padding:0;
}
	  

.card{
background-color: transparent;
	border-radius:0px;
	margin:0;
	
	
}

.title-build-row{
//margin:5px;padding:4px;
}
	  
.card--background {
background-color: var(--CardBackground-color);
background-image: url(../images/bg_hash_top-dca2c5ab1b2e.png);
background-size: 7px;
background-repeat: repeat-x;
background-position: top left;
border-bottom-right-radius:4px;
}

.Container{
width: 100%;
padding: 0px 10px 0px 10px;
//border: 1px dashed #808080;
border-radius: 5px;
margin: 5px 0px 5px 0px;
//background-color: rgba(60, 60, 60, 0.3);

}

.container-summary{
font-family: 'Roboto';
font-size:1.3em;
font-weight:400;
text-transform: uppercase;
color: #ddd;
line-height: 1em;
letter-spacing: .03rem;	
padding:5px;overflow:hidden;	
}	

.container-summary-desc{
	display:inline-block;
}

.container-summary-desc-container1{
	font-size:16px;
	
}

.container-summary-desc-container2{
	font-size:14px;
}	

.container-summary-desc-upgrade{
		font-size:12px;		
}
	
.container-summary-desc-upgrade-ico{
font-size:16px;
}

.card .card-content{
border-radius: 0px 0px 0px 0px;
border-bottom-right-radius: var(--card-border-radius-vert);
}



.card-container-vert{
//background-color:white;
//border:1px solid red;
overflow:hidden;
//border-radius:5px;
border-radius: var(--card-border-radius-vert);
padding-bottom:5px;
margin:6px;
}

.card-container-hori{
//background-color:white;
//border:1px solid red;
overflow:hidden;
//border-radius:5px;
border-radius: var(--card-border-radius-vert);
padding-right:5px;
margin:6px;
}

.card-container-hori-boxset{
//background-color:white;
//border:1px solid red;
overflow:hidden;
//border-radius:5px;
border-radius: var(--card-border-radius-vert);
//padding-right:5px;
margin:6px;

box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.3);
}

.card-container-extra{
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
height:calc(100% - 50px);
}

.card-content-border{
	position:relative;
	border-top: 2px solid #ddd;
	//text-align:center;

}

.card-content-bottom{
	position:absolute;
	left:3px;
	bottom:-13px;
	width:100%;
}

.card-content-bottom-pico{
vertical-align:middle;height:25px;
}
	  
.card-content-bottom-text{	  
padding-left:1px;
font-family: 'Oswald', sans-serif;
 font-weight:400;
font-size:0.7em;
color: #ddd;
text-transform: uppercase;
letter-spacing: .06rem
}

.card-upgrade-bottom-text{
	padding-left:2px;
font-family: 'Oswald', sans-serif;
 font-weight:400;
font-size:0.7em;
color: #ddd;
text-transform: uppercase;
letter-spacing: .06rem;
vertical-align:1px;
}

.card-boxset-bottom-text{
	padding-left:2px;
font-family: 'Oswald', sans-serif;
 font-weight:400;
font-size:0.7em;
color: #ddd;
text-transform: uppercase;
letter-spacing: .06rem;
vertical-align:1px;
}

.card-list-text{
	padding-left:2px;
font-family: 'Oswald', sans-serif;
 font-weight:400;
font-size:1em;
color: #ddd;
text-transform: uppercase;
letter-spacing: .06rem;
vertical-align:1px;
}


.card-image--upgrade {
//border-radius: 0px 0 0 0px;
width:40%;margin-top:auto;margin-bottom:auto;
}

.card-image--boxset {
//border-radius: 0px 0 0 0px;
width:43%;margin-top:auto;margin-bottom:auto;
}

	  
.card-image--upgrade-image {
	height:auto;width:auto;position:relative;z-index:5;
}

.card-image--boxset-image {
	height:auto;width:auto;position:relative;z-index:5;
	filter: drop-shadow(5px 5px 2px #111);
}

.card-image--boxset-image_not_selected {
filter: grayscale(100%);
opacity:0.7;	
}	
	  
.card-image--upgrade-mask {
	height:auto;
	width:auto;
	z-index:10;
}	  
	  
.card-upgrade-text {
border-left: 2px solid #edec51;
padding-top:2px;
padding-left:0px;
padding-right:10px;
position:relative;
vertical-align:middle;
width:60%;	
max-height: var(--Upgrade-height);
}

.card-boxset-text {
border-left: 3px solid #edec51;
padding-top:2px;
padding-left:0px;
padding-right:10px;
position:relative;
vertical-align:middle;
width:60%;	
}


.card-upgrade-ico {	  
font-size:14px;
}
	  
.container_name {
font-family: 'Roboto Condensed', sans-serif;
font-weight:600;
text-transform: uppercase;
color: #ddd;
line-height: 1em;
padding-left:5px;
padding-right:10px;
letter-spacing: .07rem;
padding-top:5px;
font-size:16px;
overflow: hidden;
width: calc(100% - 5px);
}  

.card--horizontal .card-stacked {
    max-width: 55%;
}


.card_name {
font-family: 'Roboto Condensed', sans-serif;
font-weight:600;
text-transform: uppercase;
color: #ddd;
line-height: 1em;
//padding-left:5px;
padding-right:10px;
margin-bottom:8px;
letter-spacing: .07rem;
padding-top:5px;
font-size:12px;
overflow: hidden;
width: calc(100% - 5px);
}

.card--horizontal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100px;
	//
	position:relative;
	//margin-right:1px;
	background-color:var(--CardBackground-color);
	overflow: visible;
	border-bottom-right-radius:var(--card-border-radius-vert);
}

.card--horizontal .card-image img {
//width:300px;
width:100%;
height:var(--Upgrade-height);
object-fit: cover;
}

.card_text {
display:block;
font-family: 'Roboto Condensed', sans-serif;
font-weight:400;
//text-transform: uppercase;
color: #ddd;
line-height: 1em;
//padding-left:5px;
padding-right:10px;
letter-spacing: .07rem;
//padding-top:5px;
font-size:11px;
//overflow: hidden;
//width: calc(100% - 5px);
width: 100%;
//height: calc(var(--Upgrade-height) - 40px);


}

.container_text {
display:block;
font-family: 'Roboto Condensed', sans-serif;
font-weight:400;
//text-transform: uppercase;
color: #ddd;
line-height: 1em;
padding-left:5px;
padding-right:10px;
letter-spacing: .07rem;
padding-top:5px;
font-size:13px;
//overflow: hidden;
//width: calc(100% - 5px);
width: 100%;
height: 60px;

 -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
 overflow-y: hidden;"

}


.card .card-content{
padding: 12px;
}

.card-upgrade-value{
	display:inline-block;
}

.card-upgrade-action{
	position:absolute;right:-4px;top:3px;
}

.card-boxset-action{
	position:absolute;right:5px;bottom:-1px;
}

.card-upgrade-action-size{
font-size:20px !important;
}

.card-upgrade-action-aspect {
display:block;
position:relative;
z-index:1;
height:20px;
border-radius:10px;
margin-bottom:12px;
}

.card-boxset-action-size{
font-size:18px !important;
}

.card-upgrade-bottom{
	position:absolute;left:5px;bottom:-2px;
}

.card-boxset-bottom{
	position:absolute;left:5px;bottom:2px;
}

.card-boxset-value{
	position:absolute;left:5px;bottom:20px;
	padding-right:5px;
}




.card--horizontal-boxset {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 120px;
	position:relative;
	//margin-right:1px;
	background-color: var(--CardBackground-color);
	overflow: visible;
}


.cardhorizontal  {
border-radius: 0px 0px 0px 0px;
border-bottom-right-radius: var(--card-border-radius-vert);

}




.borderRight {
	position: absolute;
    border-left: 6px solid #282727;
    right: -5px;
    box-sizing: border-box;
    top: 0;
    border-bottom: 6px solid transparent;
    height: 90px;
    width: 0px;
    //border-radius: 5px;
	background-image: url(../images/bg_hash_top-dca2c5ab1b2e.png);
background-size: 7px;
background-repeat: repeat-x;
background-position: top left;
}

.borderBottomLeft {
    
    position: absolute;
   
    border-right: 6px solid transparent;
  
    left: 0;
    box-sizing: border-box;
    bottom: -5px;
    border-top: 6px solid #282727;
    height: 0;
    width: 55%;
    //border-radius: 5px;
}

.borderBottomRight {
    
    position: absolute;
   
    border-left: 6px solid transparent;
  
    right: 0;
    box-sizing: border-box;
    bottom: -5px;
    border-top: 6px solid #282727;
    height: 0;
    width: 30%;
    //border-radius: 5px;
}

.faction_name {
    border-top: 2px solid rgba(170,170,170,0.25);
    border-bottom: 2px solid rgba(170,170,170,0.25);
    //margin: 3.04em 0 1.52em;
    padding: 0.65rem 12px 0.4rem;
    //box-sizing: border-box;
	color: #ddd;


}

.faction_name_text{
font-size: 1.15rem;
line-height: 1.35rem;

letter-spacing: 0.08rem;
text-transform: uppercase;
	padding-top:10px;
	display:inline-block;
	width:100%;
}

.faction_name_text_code_label{
font-size:12px;
//font-size: 0.5em;
}

.faction_name_text_code{
text-transform: none;
}

.add-pilot-label{
text-align:center;
}


.add-pilot-label-link{

 font-family: 'Roboto', sans-serif;
 font-size:1.15rem;
 font-weight:400;
text-transform: uppercase;
color: #ddd;
width:100%;
//border-radius:4px;
}



nav {

background-color:#222;
background-image: linear-gradient(to bottom right, rgba(var(--Highlight-color-val), 1), rgba(var(--Highlight-color-val), 0) 55%);
padding-top: 1px;
}

.tabs{
background-color:#282727;

}

.tab:first-child {
border-left:0px solid #333 !important;
}

.tab:last-child {
border-right:0px solid #333 !important;
}

.tab {
border-right:1px solid #333 !important;
border-top:1px solid #333 !important;
}

.tab a.active {
  color:rgb(252, 234, 37)!important;
  
  //background-color:#448AFF!important;
}
.tabs .tab a:hover {
  background-color: #bcaaa4!important;
  color:#FFFFFF!important;
}
.tabs .tab a {
  color: #efebe9!important;
}
.tabs .indicator{
  background-color:transparent !important;
  //border-radius:5px;
  //height:10px;
  //border:2px solid red;
}

.rebel {
background-color:#000000;
}

.rebel:after {
  content: "";
  position: absolute;
  //left: 50%;
  bottom: 0;
  width: 100px;
  margin: 0 0 0 -50px;
  border-bottom: 2px solid transparent;
}

.empire:after {
  content: "";
  position: absolute;
  //left: 50%;
  bottom: 0;
  width: 100px;
  margin: 0 0 0 -50px;
  border-bottom: 2px solid transparent;
}

.config:after {
  content: "";
  position: absolute;
  //left: 50%;
  bottom: 0;
  width: 100px;
  margin: 0 0 0 -50px;
  border-bottom: 2px solid transparent;
}

 .starfield {
  position:fixed;
  width:200px;
  height:100%;
  top:0;
  background-repeat:repeat-y;
  z-index:-10;
 }
 .starfield.star-left {
 height:1700px;
  left:0;
  background-position:left center;
  background-size:100% auto;
  background-image:url(../images/bg_starsL-fd4661a3ccea.png)
 }
 .starfield.star-right {

  right:0;
  height:1700px;
  background-position:right center;
  background-size:auto 100%;
  background-image:url(../images/bg_starsR-655c85e404d4.png)
 }
 
 .tab-back{
 border-bottom:2px solid red;
 }
 
.icon-value{
font-family: 'KimberleyBlack';
font-size:15px;
}

.icon-value-range{
font-family: 'KimberleyBlack';
font-size:10px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}


.decal1 {
    content: "";
    display: block;
    position: absolute;
    width: 47px;
    height: 47px;
    opacity: 0.06;
    z-index: 1;
    background-image: url(../images/decal-a67af2e7d567.png);
    background-size: 300% 200%;
    width: 65.8px;
    height: 65.8px;
    background-position: -200% 0;
    left: -32px;
    bottom: -32px;
}


.decal2 {
    content: "";
    display: block;
    position: absolute;
    width: 47px;
    height: 47px;
    opacity: 0.06;
    z-index: 1;
    background-image: url(https://static-mh.content.disney.io/starwars/assets/shared/decal-a67af2e7d567.png);
    background-size: 300% 200%;
    background-position: -300% 0 ;
    right: 10px;
    top: -12px;
}



.card-stat__value {
    position: relative;
    text-align: center;
    line-height: 1.2 em;
   // letter-spacing: -2px;
  //  color: #c4a0ca;
    font-family: KimberleyBlack;
    font-size: 1.19rem;
}

.card-stat__value_small {
    position: relative;
    text-align: center;
    line-height: 1.2 em;
   // letter-spacing: -2px;
  //  color: #c4a0ca;
    font-family: KimberleyBlack;
    font-size: 1rem;
}

.card-stat__recurring-value {
    position: absolute;
    top: .5rem;
    right: -.5rem;
    font-size: .38rem;}



.add-pilot-label-link:hover{


color: white;
}



.row-build{
margin:5px;border : 1px dashed #383737;
border-radius: 4px;
padding:4px;
}
	


.upgrade-color{
color: var(--Upgrade-color);
}	

.red-value{
color:#fc2223;
}
.green-value{
color:#6ab842;
}

.yellow-value{
color:#f4f118;
}

.blue-value{
color:#88ccd6;
}

.purple-value{
color:#c4a0ca;
}

.orange-value{
color:#e77e29;
}

.noshadow {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}

.Rebel-insigna:before {
  content: "\f006";
}

.RebelAlliance-insigna:before {
  content: "\f006";
}

.Resistance-insigna:before {
  content: "\f006";
}

.Empire-insigna:before {
  content: "\f008";
}

.GalacticEmpire-insigna:before {
  content: "\f008";
}

.FirstOrder-insigna:before {
   content: "\f08A";
}

.Scum-insigna:before {
  content: "\f00A";
}


.collapsible {
	border:none;
}

.collapsible-header {

    border-radius: 5px 5px 5px 5px;
    line-height: 1.5;
    padding: 1rem;
background-color: var(--CardBackground-color);
background-image: url(../images/bg_hash_top-dca2c5ab1b2e.png);
background-size: 7px;
background-repeat: repeat-x;
background-position: top left;
border-bottom: none;

}

.collapsible-body {

    display: none;
    border-bottom: 1px solid var(--CardBackground-color);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2rem;
    border-left: 1px solid var(--CardBackground-color);
    border-right: 1px solid var(--CardBackground-color);
	border-radius: 0px 0px 5px 5px;
    margin-top: -5px;
}

.list-cardli {
margin-bottom:1px;
}



.quantity_info {
position:relative;
top:35px;
left:11px;
z-index:2000;
font-size:12px;
width:35px;
text-transform:none;
margin-top:-20px;
border-radius:2px;
text-shadow: 0px 0px 6px #000000;
background-color:grey;
text-align: center;
opacity:0.8;
height:20px;
	
}

.editable_text {
text-decoration:underline;
}

.card_name_text {
line-height: 1em;
padding-left: 10px;
height: calc(var(--Upgrade-height) - 30px);

 -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
 overflow-y: hidden;"
}

.card_info {
text-align:center;
width:70%;
margin:auto;
}

.action_btn {
border : 1px dashed var(--Highlight-color);
}

@media only screen and (max-width: 992px) {
  .card_info  {
    width: 95%;
  }
}