.upgradeContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.upgradeContainerNoMargin {
    display: inline-block;
    vertical-align: top;
    height: 300px;
    margin: 0px;
}
.upgradeCard {
    display: inline-block;
    position: relative;
    width: 418px;
    height: 300px;
}
.upgradeTemplate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 418px;
    height: 300px;
}
.upgradeTypeTemplate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 167px;
    height: 300px;
}
.upgradeTypeSingleSlot {
    position: absolute;
    top: 29px;
    left: 31px;
    width: 102px;
    height: 100px;
}
.upgradeTypeDoubleSlotFirst {
    position: absolute;
    top: 24px;
    left: 43px;
    width: 77px;
    height: 78px;
}
.upgradeTypeDoubleSlotSecond {
    position: absolute;
    top: 122px;
    left: 43px;
    width: 77px;
    height: 78px;
}
.upgradeTypeTemplateLeft {
    position: absolute;
    top: 0px;
    left: 253px;
    width: 167px;
    height: 300px;
}
.upgradeTypeSingleSlotLeft {
    position: absolute;
    top: 29px;
    left: 287px;
    width: 102px;
    height: 100px;
}
.upgradeTypeDoubleSlotFirstLeft {
    position: absolute;
    top: 24px;
    left: 299px;
    width: 77px;
    height: 78px;
}
.upgradeTypeDoubleSlotSecondLeft {
    position: absolute;
    top: 122px;
    left: 299px;
    width: 77px;
    height: 78px;
}
.upgradeTextTemplate {
    position: absolute;
    top: 0px;
    left: 166px;
    width: 254px;
    height: 300px;
}
.upgradeTextTemplateLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 254px;
    height: 300px;
}
.customUpgradeNameContainer{
    position: absolute;
    top:124px;
    left:167px;
    width: 239px;
    height: 21px;
    line-height: 18px;
    text-align: center;
    white-space: pre-wrap;
    overflow: hidden;
}
.customUpgradeNameContainerLeft{
    position: absolute;
    top:124px;
    left:13px;
    width: 239px;
    height: 21px;
    line-height: 18px;
    text-align: center;
    white-space: pre-wrap;
    overflow: hidden;
}
.customUpgradeName{
    /*    position: absolute;
        top:124px;
        left:167px;
        width: 239px;*/
    font-family: bankgothic;
    font-size: 16px;
    color: white;
    font-variant: small-caps;
}
.customUpgradeNameLeft{
    /*    position: absolute;
        top:124px;
        left:13px;
        width: 239px;*/
    font-family: bankgothic;
    font-size: 16px;
    color: white;
    font-variant: small-caps;
    /*text-align: center;*/
}
.customUpgradeCardTextContainer{
    position: absolute;
    top:146px;
    left:177px;
    width: 219px;
    height: 138px;
    line-height: 138px;
    text-align: center;
    white-space: pre-wrap;
    overflow: hidden;
}
.customUpgradeCardTextContainerLeft{
    position: absolute;
    top:146px;
    left:21px;
    width: 219px;
    height: 138px;
    line-height: 138px;
    text-align: center;
    white-space: pre-wrap;
    overflow: hidden;
}
.customUpgradeCardText{
    display: inline-block;
    vertical-align: middle;
    line-height: 14px;
    font-family: eurostile;
    font-size: 13px;
    color: black;
    text-align: center;
    margin: 4px;
}
.customUpgradeCardText br {
    margin-bottom: 6px;
}
.customUpgradeCardFlavorText{
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-family: eurostile;
    font-style: italic;
    font-size: 11px;
    color: black;
    text-align: center;
    margin: 4px;
    color: #555;
}
.upgradeRestrictionBoxTemplate {
    position: absolute;
    top: 245px;
    left: 19px;
    width: 126px;
    height: 55px;
}
.upgradeRestrictionBoxTemplateLeft {
    position: absolute;
    top: 245px;
    left: 274px;
    width: 128px;
    height: 55px;
}
.restrictionsCardTextContainer{
    position: absolute;
    top:246px;
    left:19px;
    width: 116px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    margin: 5px;
}
.restrictionsCardTextContainerLeft{
    position: absolute;
    top:246px;
    left:274px;
    width: 118px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    margin: 5px;
}
.restrictionsCardText{
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-family: eurostile;
    font-size: 11px;
    /*font-variant: all-small-caps;*/
    /*font-variant: all-small-caps;*/
    font-style: italic;
    color: black;
    text-align: center;
}
.upgradeAddons{
    position: absolute;
    display: flex;
    flex-direction: column;
    top:142px;
    left:338px;
    width:70px;
    height:150px;
}
.upgradeAddonsLeft{
    position: absolute;
    display: flex;
    flex-direction: column;
    top:142px;
    left:183px;
    width:70px;
    height:150px;
}
.upgradeAttackBlock {
    position: relative;
    height: 77px;
}
.upgradeAttackField {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 64px;
    height: 64px;
}
.attackArc {
    position: absolute;
    top:8px;
    left:11px;
    color: red;
    font-size: 19px;
    width: 19px;
    text-align: center;
}
.attackValue {
    position: absolute;
    top:8px;
    left:39px;
    color: red;
    font-size: 24px;
    font-family: kimberley;
}
.attackRange {
    position: absolute;
    top:37px;
    left:4px;
    width:55px;
    text-align: center;
    color: red;
    font-size: 14px;
    font-family: kimberley;
}
.upgradeStatBlock {
    position: relative;
    height: 50px;
    color: #fcce14;

    text-align: center;
    font-size: 24px;
    font-family: kimberley;
}
.upgradeStatField {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 34px;
    height: 34px;
}

.statSymbol {
    position: absolute;
    top:6px;
    left:2px;
    width: 30px;
    font-size: 16px;
    text-align: center;
}
.statValue {
    position: absolute;
    top:6px;
    left:36px;
    font-size: 24px;
    font-family: kimberley;
}
.upgradeActionBlock {
    position: relative;
    height: 50px;
    color: white;
    text-align: center;
    font-size: 24px;
    font-family: kimberley;
}
.upgradeActionField {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 67px;
    height: 34px;
}
.upgradeActionSymbol {
    position: absolute;
    top:4px;
    left:2px;
    width: 65px;
    font-size: 18px;
}
.upgradeArt {
    position: absolute;
    top: 0px;
    left: 168px;
    width: 240px;
    height: 121px;
    /*    object-fit: cover;*/
}
.upgradeArtLeft {
    position: absolute;
    top: 0px;
    left: 11px;
    width: 241px;
    height: 121px;
    /*    object-fit: cover;*/
}
.upgradeCostTextContainer{
    position: absolute;
    top:278px;
    left:17px;
    width: 118px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    margin: 5px;
}
.upgradeCostTextContainerLeft{
    position: absolute;
    top:278px;
    left:274px;
    width: 118px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    margin: 5px;
}
.upgradeCostText{
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-family: eurostile;
    font-size: 11px;
    /*font-variant: all-small-caps;*/
    font-variant: small-caps;
    color: black;
    text-align: center;
}
.keyword {
    font-variant: small-caps;
    font-weight: bold;
}
.offline {
    /*font-size: large;*/
    font-style: italic;
    font-weight: bold;
}
textarea, input, select {
    margin: 4px;
}

.shipContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.shipContainerNoMargin {
    display: inline-block;
    vertical-align: top;
    height: 418px;
    margin: 0px;
}
.standardLoadoutContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.standardLoadoutContainerNoMargin {
    display: inline-block;
    vertical-align: top;
    height: 330px;
    margin: 0px;
}
.standardLoadoutCard {
    display: inline-block;
    position: relative;
    width: 570px;
    height: 330px;
    line-height: 1;
}
.standardLoadoutImg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 570px;
    height: 330px;
}
/*.dialContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
    margin-top: 144px;
}
.dialContainerNoMargin {
    display: inline-block;
    vertical-align: top;
    height: 208px;
    margin: 0px;
    margin-top: 144px;
}
.dial {
    display: inline-block;
    position: relative;
    width: 208px;
    height: 208px;
}
.dialManeuver {
    font-family: kimberley;
    font-size: 18px;
    line-height:24px;
    position: absolute;
    top: 10px;
    left: 99px;
    width: 10px;
    height: 94px;
    text-align: center;
}
.dialDivider {
    position: absolute;
    top: 0px;
    left: 103px;
    width: 2px;
    height: 70px;
}
.dialLabel {
    font-family: eurostile;
    font-size: 18px;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 10px;
    height: 20px;
    text-align: center;
    color: white;
    
}
.tileContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
    margin-top: 144px;
}
.tileContainerNoMargin-tiny {
    display: inline-block;
    vertical-align: top;
    height: 183px;
    margin: 0px;
    margin-top: 144px;
}
.tileContainerNoMargin-small {
    display: inline-block;
    vertical-align: top;
    height: 189px;
    margin: 0px;
    margin-top: 144px;
}
.tileContainerNoMargin-small {
    display: inline-block;
    vertical-align: top;
    height: 189px;
    margin: 0px;
    margin-top: 144px;
}
.tileContainerNoMargin-medium {
    display: inline-block;
    vertical-align: top;
    height: 279px;
    margin: 0px;
    margin-top: 144px;
}
.tileContainerNoMargin-large {
    display: inline-block;
    vertical-align: top;
    height: 375px;
    margin: 0px;
    margin-top: 144px;
}
.tileContainerNoMargin-long {
    display: inline-block;
    vertical-align: top;
    height: 583px;
    margin: 0px;
    margin-top: 144px;
}
.tileContainerNoMargin-huge {
    display: inline-block;
    vertical-align: top;
    height: 1058px;
    margin: 0px;
    margin-top: 144px;
}
.tile {
    display: inline-block;
    position: relative;
}
.tileDiv-tiny {
    display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 183px;
    height: 183px;
}
.tileDiv-small {
    display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 189px;
}
.tileDiv-medium {
    display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 252px;
    height: 279px;
}
.tileDiv-large {
    display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 338px;
    height: 375px;
}
.tileDiv-long {
    display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 252px;
    height: 583px;
}
.tileDiv-huge {
    display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 378px;
    height: 1058px;
}
.tile-tiny {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 183px;
    height: 183px;
}
.tile-small {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 189px;
}
.tile-medium {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 252px;
    height: 279px;
}
.tile-large {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 338px;
    height: 375px;
}
.tile-long {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 252px;
    height: 583px;
}
.tile-huge {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 378px;
    height: 1058px;
}
.tileName-small{
    position: absolute;
    top: 153px;
    left: 0px;
    width: 159px;
    font-family: bankgothic;
    font-size: 10px;
    color: white;
    font-variant: small-caps;
    text-align: center;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.tileInitiative-small{
    position: absolute;
    top: 114px;
    left: 10px;
    width: 20px;
    font-family: kimberley;
    font-size: 32px;
    color: #f57e20;
    text-align: center;
}
.tileIcon-small {
    position: absolute;
    top: 118px;
    left: 127px;
    width: 26px;
    height: 26px;
}
.tileName-medium{
    position: absolute;
    top: 251px;
    left: 0px;
    width: 252px;
    font-family: bankgothic;
    font-size: 10px;
    color: white;
    font-variant: small-caps;
    text-align: center;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.tileInitiative-medium{
    position: absolute;
    top: 210px;
    left: 8px;
    width: 20px;
    font-family: kimberley;
    font-size: 32px;
    color: #f57e20;
    text-align: center;
}
.tileIcon-medium {
    position: absolute;
    top: 212px;
    left: 220px;
    width: 26px;
    height: 26px;
}
.tileName-large{
    position: absolute;
    top: 341px;
    left: 0px;
    width: 338px;
    font-family: bankgothic;
    font-size: 10px;
    color: white;
    font-variant: small-caps;
    text-align: center;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.tileInitiative-large{
    position: absolute;
    top: 291px;
    left: 12px;
    width: 20px;
    font-family: kimberley;
    font-size: 32px;
    color: #f57e20;
    text-align: center;
}
.tileIcon-large {
    position: absolute;
    top: 288px;
    left: 295px;
    width: 36px;
    height: 36px;
}
.tileName-huge{
    position: absolute;
    top: 1030px;
    left: 0px;
    width: 378px;
    font-family: bankgothic;
    font-size: 10px;
    color: white;
    font-variant: small-caps;
    text-align: center;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.tileInitiative-huge{
    position: absolute;
    top: 970px;
    left: 29px;
    width: 20px;
    font-family: kimberley;
    font-size: 32px;
    color: #f57e20;
    text-align: center;
}
.tileEngagementSymbol{
    position: absolute;
    top: 1000px;
    left: 24px;
    width: 20px;
    font-size: 14px;
    color: red;
    text-align: center;
}
.tileEngagementNumber{
    position: absolute;
    top: 1000px;
    left: 38px;
    width: 20px;
    font-family: kimberley;
    font-size: 19px;
    color: #f57e20;
    text-align: center;
}
.tileIcon-huge {
    position: absolute;
    top: 980px;
    left: 319px;
    width: 36px;
    height: 36px;
}*/
.shipCard {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 418px;
    line-height: 1;
}
.shipTemplate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 418px;
}

.customShipName{
    position: absolute;
    top: 397px;
    left: 52px;
    width: 195px;
    font-family: bankgothic;
    font-size: 9px;
    color: white;
    font-variant: small-caps;
    text-align: center;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.customShipIcon {
    position: absolute;
    top: 392px;
    left: 7px;
    width: 26px;
    height: 26px;
}
.customShipAbility{
    position: absolute;
    bottom: 95px;
    left:4px;
    width: 239px;
    color: black;
    text-align: center;
}
.customShipAbility-linked{
    position: absolute;
    top:273px;
    left:10px;
    width: 193px;
    color: black;
    text-align: center;
}
.customShipAbilityName{
    font-family: eurostile;
    font-style: italic;
    font-weight: 800;
    font-size: 13px;
    font-variant: small-caps;
    text-align: center;
}
.customShipAbilityText{
    font-family: eurostile;
    font-size: 13px;
    text-align: center;
}
.shipActions {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    top: 188px;
    left: 255px;
    width: 44px;
    height: 201px;
}
.shipActions-linked {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    top: 190px;
    left: 222px;
    width: 78px;
    height: 201px;
}
.shipActions-huge {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    top: 204px;
    left: 255px;
    width: 44px;
    height: 184px;
}
.shipActionBlock {
    position: relative;
    height: 50px;
    color: white;
    text-align: center;
    font-size: 18px;
    font-family: kimberley;
}

.shipStats {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    top: 327px;
    left: 0px;
    width: 254px;
    height: 62px;
}
.shipStats-linked {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    top: 327px;
    left: 0px;
    width: 224px;
    height: 62px;
}
.shipStatBlock {
    position: relative;
    width: 42px;
}
.shipStatField {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 34px;
    height: 34px;
}

.shipStatSymbol {
    position: absolute;
    top:9px;
    left:6px;
    width: 30px;
    font-size: 19px;
    text-align: center;
}
.shipStatValue {
    position: absolute;
    top:34px;
    left:7px;
    width: 30px;
    font-size: 24px;
    font-family: kimberley;
    text-align: center;
}
.shipActionLine {
    position: absolute;
    left:255px;
    width: 45px;
    height: 2px;
}
.shipActionLine-linked {
    position: absolute;
    left:222px;
    width: 78px;
    height: 2px;
}
.shipActionLine-1-of-1 {
    top:279px;
}
.shipActionLine-1-of-2 {
    top:247px;
}
.shipActionLine-2-of-2 {
    top:314px;
}
.shipActionLine-1-of-3 {
    top:229px;
}
.shipActionLine-2-of-3 {
    top:279px;
}
.shipActionLine-3-of-3 {
    top:330px;
}
.shipActionLine-1-of-4 {
    top:221px;
}
.shipActionLine-2-of-4 {
    top:261px;
}
.shipActionLine-3-of-4 {
    top:301px;
}
.shipActionLine-4-of-4 {
    top:341px;
}
.shipActionLine-1-of-1-huge {
    top:287px;
}
.shipActionLine-1-of-2-huge {
    top:252px;
}
.shipActionLine-2-of-2-huge {
    top:319px;
}
.shipActionLine-1-of-3-huge {
    top:236px;
}
.shipActionLine-2-of-3-huge {
    top:283px;
}
.shipActionLine-3-of-3-huge {
    top:332px;
}
.shipActionLine-1-of-4-huge {
    top:232px;
}
.shipActionLine-2-of-4-huge {
    top:270px;
}
.shipActionLine-3-of-4-huge {
    top:308px;
}
.shipActionLine-4-of-4-huge {
    top:346px;
}
.dialTable {


    border-collapse: collapse;
    text-align: center;
}
.dialTable th {
    font-size: 12px;
    width: 40px;
    border: 1px solid;
}
.dialTable td {

    width: 40px;
    border: 1px solid;

}
.maneuverButton {
    font-size: 20px;
    background-color: darkgrey;
}
.greyManeuver {
    color: grey;
}
.blueManeuver {
    color: blue;
}
.whiteManeuver {
    color: white;
}
.redManeuver {
    color: red;
}
.purpleManeuver {
    color: violet;
}
.pilotContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.pilotPointsOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 418px;
}
.pilotPointsText {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 40px;
    height: 18px;
    font-size: 16px;
    font-family: kimberley;
    color: white;
    text-align: center;
}
.standardLoadoutPointsOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 570px;
    height: 330px;
}
.standardLoadoutPointsText {
    position: absolute;
    top: 7px;
    left: 296px;
    width: 40px;
    height: 18px;
    font-size: 16px;
    font-family: kimberley;
    color: white;
    text-align: center;
}
.upgradePointsOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 418px;
    height: 300px;
}
.upgradePointsText {
    position: absolute;
    top: 4px;
    left: 0px;
    width: 35px;
    height: 18px;
    font-size: 16px;
    font-family: kimberley;
    color: white;
    text-align: center;
}
.upgradePointsTextWide {
    position: absolute;
    top: 4px;
    left: 0px;
    width: 165px;
    height: 18px;
    font-size: 16px;
    font-family: kimberley;
    color: white;
    text-align: center;
}
/*.pilotPointsLegacy {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 40px;
    font-size: 32px;
    font-family: kimberley;
    color: white;
    text-align: center;
}
.pilotPointsLoadout {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 40px;
    height: 18px;
    font-size: 16px;
    font-family: kimberley;
    color: white;
    text-align: center;
}*/
.customPilotNameContainer{
    position: absolute;
    top: 129px;
    left: 52px;
    width: 195px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.customPilotName{
    display: inline-block;
    vertical-align: middle;
    font-family: bankgothic;
    font-size: 14px;
    line-height: 12px;
    color: white;
    font-variant: small-caps;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.customPilotCaptionContainer{
    position: absolute;
    top: 164px;
/*    left: 52px;
    width: 195px;*/
    left: 73px;
    width: 152px;
    height: 13px;
    line-height: 12px;
    text-align: center;
}
.customPilotCaption{
    font-family: eurostile;
    font-style: italic;
    font-size: 10px;
    color: white;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.customPilotInitiative{
    position: absolute;
    top: 132px;
    left: 10px;
    width: 20px;
    font-family: kimberley;
    font-size: 32px;
    color: #f57e20;
    text-align: center;
}
.customPilotInitiativeHuge{
    position: absolute;
    top: 134px;
    left: 10px;
    width: 20px;
    font-family: kimberley;
    font-size: 28px;
    color: #f57e20;
    text-align: center;
    line-height: 56%;
}
.customPilotEngagementSymbol{
    color: red;
    font-size: 11px;
    position: absolute;
    top: 156px;
    left: 8px;
}
.customPilotEngagementNumber{
    font-family: kimberley;
    color: #f57e20;
    font-size: 18px;
    position: absolute;
    top: 154px;
    left: 21px;
    width: 10px;
    text-align: center;
}
.customPilotArt {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 130px;
    z-index: -1;
    border-radius: 10px 10px 0px 0px;
}
.pilotAbilityArea{
    position: absolute;
    display: flex;
    top: 182px;
    width: 245px;
    height: 142px;
    color: black;
    text-align: center;
    overflow: hidden;
}
.pilotAbilityArea-linked{
    position: absolute;
    display: flex;
    top:182px;
    width: 213px;
    height: 142px;
    color: black;
    text-align: center;
    overflow: hidden;
}
.pilotAbilityArea hr,
.pilotAbilityArea-linked hr {
    height: 1px;
    border: none;
    background: black;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
.pilotAbilityDivs{
    margin:auto;
}
.customPilotAbility{
    position: relative;
    color: black;
    text-align: center;
    font-size: 13px;
    margin: 0px 14px;
}
.customPilotText{
    position: relative;
    font-style: italic;
    font-size: 11px;
    color: black;
    text-align: center;
    margin: 0px 14px;
}
.customPilotShipAbility{
    position: relative;
    color: black;
    text-align: center;
    margin: 0px 14px;
}
.customPilotSlots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    height: 24px;
    line-height: 26px;
    width: 216px;
    transform: translate(-50%,0);
    background-color: black;
    color: whitesmoke;
    text-align: right;
    font-size: 20px;
    padding: 0px 2px 2px 0px;
}

.customPilotCost {

    background-color: black;
    color: white;
    width: 36px;
    display: block;
    bottom: 2px;

    position: absolute;
    bottom: 2px;
    right: 2px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    width: 36px;
    height: 18px;
    overflow: visible;
    white-space: nowrap;

}
.quickBuildContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.standardUpgradesList {
    width: 250px;
}
.customUpgradesList {
    width: 250px;
}
.thumbnail {
    width: 120px;
}
.thumbnail-blackbackground {
    width: 120px;
    background-color: black;
}
#cropperContainer {
    /*display: block;*/
    /*max-width: 100%;*/
    width: 300px;
}
#cropperImage {
    display: block;
    max-width: 100%;
    /*width: 300px;*/
}
.conditionContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.conditionContainerNoMargin {
    display: inline-block;
    vertical-align: top;
    height: 418px;
    margin: 0px;
}
.conditionCard {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 418px;
}
.conditionTemplate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 418px;
}
.conditionNameContainer{
    position: absolute;
    top: 31px;
    left: 30px;
    width: 239px;
    height: 19px;
    line-height: 17px;
    text-align: center;
}
.conditionName{
    font-family: bankgothic;
    font-size: 14px;
    color: white;
    font-variant: small-caps;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.conditionAbilityContainer{
    position: absolute;
    top:66px;
    left:56px;
    width: 188px;
    height:224px;
}
.conditionAbility{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    color: black;
    text-align: center;
}
.conditionAbility br {
    margin-bottom: 6px;
}
.conditionArt{
    position: absolute;
    top: 294px;
    left: 110px;
    width: 80px;
    height: 92px;
    z-index: -1;
}
.conditionChitContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.conditionChitContainerNoMargin {
    display: inline-block;
    vertical-align: top;
    height: 127px;
    margin: 0px;
}
.conditionChit {
    display: inline-block;
    position: relative;
    width: 109px;
    height: 127px;
}
.conditionChitImage {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 102px;
    height: 118px;
    z-index: -1;
}




/*Remote*/
.remoteContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.remoteContainerNoMargin {
    display: inline-block;
    vertical-align: top;
    height: 418px;
    margin: 0px;
}
.remoteCard {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 418px;
}
.remoteTemplate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 418px;
}
.remoteNameContainer{
    position: absolute;
    top: 135px;
    left: 52px;
    width: 195px;
    height: 19px;
    line-height:17px;
    text-align: center;
}
.remoteName{
    font-family: bankgothic;
    font-size: 14px;
    color: white;
    font-variant: small-caps;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.remoteCaption{
    position: absolute;
    top: 164px;
    left: 52px;
    width: 195px;
    font-family: eurostile;
    font-style: italic;
    font-size: 10px;
    color: white;
    text-align: center;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}
.remoteInitiative{
    position: absolute;
    top: 132px;
    left: 11px;
    width: 20px;
    font-family: kimberley;
    font-size: 32px;
    color: #f57e20;
    text-align: center;
}
.remoteAbilityContainer{
    position: absolute;
    top: 188px;
    left: 8px;
    width: 283px;
    height: 127px;
}
.remoteAbility{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    color: black;
    text-align: center;
    font-family: eurostile;
    font-size: 13px;
    width: 283px;
}
.remoteAbility br {
    margin-bottom: 6px;
}
.remoteFlavorText{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    font-style: italic;
    font-size: 11px;
    color: black;
    text-align: center;
    /*margin: 0px 14px;*/
}
.remoteArt {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 130px;
    z-index: -1;
    border-radius: 10px 10px 0px 0px;
}
.remoteStats {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    top: 323px;
    left: 0px;
    width: 300px;
    height: 62px;
}
.remoteStatBlock {
    position: relative;
    width: 42px;
}
.remoteAttackStatBlock {
    position: relative;
    width: 70px;
}
.remoteStatField {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 34px;
    height: 34px;
}
.remoteAttackStatFrame {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 64px;
    height: 61px;
}
.remoteOrdnanceSymbol {
    position: absolute;
    top:8px;
    left:33px;
    width: 30px;
    font-size: 14px;
    text-align: center;
}
.remoteAttackRange {
    position: absolute;
    top:43px;
    left:33px;
    width: 30px;
    text-align: center;
    font-size: 14px;
    font-family: kimberley;
    color: white;
}
.remoteStatSymbol {
    position: absolute;
    top:9px;
    left:6px;
    width: 30px;
    font-size: 19px;
    text-align: center;
}
.remoteStatValue {
    position: absolute;
    top:34px;
    left:7px;
    width: 30px;
    font-size: 24px;
    font-family: kimberley;
    text-align: center;
}
.remoteTokenContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.remoteToken-tiny {
    position: absolute;
    width: 92px;
    height: 110px
}
.remoteTokenImg-tiny {
    position: relative;
    left: 6px;
    top: 9px;
    width: 80px;
    height: 92px;
    z-index: -1;
}
.remoteToken-device {
    position: absolute;
    width: 155px;
    height: 160px;
}
.remoteTokenImg-device {
    position: relative;
    left: 4px;
    top: 16px;
    width: 146px;
    height: 140px;
    z-index: -1;
}
.remoteToken-commando {
    position: absolute;
    width: 172px;
    height: 172px;
}
.remoteTokenImg-commando {
    position: relative;
    left: 3px;
    top: 3px;
    width: 166px;
    height: 166px;
    z-index: -1;
}
.remoteToken-sensor {
    position: absolute;
    width: 191px;
    height: 243px;
}
.remoteTokenImg-sensor {
    position: relative;
    left: 3px;
    top: 3px;
    width: 184px;
    height: 236px;
    z-index: -1;
}
.remoteToken-buzzdroid {
    position: absolute;
    width: 155px;
    height: 201px;
}
.remoteTokenImg-buzzdroid {
    position: relative;
    left: 3px;
    top: 3px;
    width: 149px;
    height: 195px;
    z-index: -1;
}
.remoteToken-pentagon {
    position: absolute;
    width: 242px;
    height: 230px;
}
.remoteTokenImg-pentagon {
    position: relative;
    left: 7px;
    top: 4px;
    width: 227px;
    height: 221px;
    z-index: -1;
}
.remoteToken-large-round {
    position: absolute;
    width: 334px;
    height: 339px;
}
.remoteTokenImg-large-round {
    position: relative;
    left: 5px;
    top: 4px;
    width: 323px;
    height: 317px;
    z-index: -1;
}
.remoteRulesContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.remoteRulesDiv {
    width: 430px;
    /*height: 100px;*/
    border-style: double;
    border-color: black;
    border-radius: 10px;
}
.remoteRulesHeader {
    /*width: 500px;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.remoteRulesStatsVerticalBox{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.remoteRulesStats {
    position: relative;
    /*width: 109px;*/
    height: 60px;
    margin: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px 15px;
    background: url("../img/remote-rules-stats-background.png") no-repeat;
    background-size: 100% 100%;
}
.remoteRulesStatsFieldDiv {
    display: inline-block;
    top:0px;
    left:0px;
    width: 30px;
}
.remoteRulesStatsBackground {
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}
.remoteRulesInitBox {
    position: absolute;
    top:4px;
    left:3px;
    width: 30px;
    height: 52px;
}
.remoteRulesInit {
    position: absolute;
    top:12px;
    left:3px;
    width: 30px;
    font-size: 36px;
    color: #f57e20;
    font-family: kimberley;
    text-align: center;
}
.remoteTypes {
    display: block;
    vertical-align: middle;
    line-height: 14px;
    font-family: eurostile;
    font-size: 13px;
    color: black;
    text-align: center;
    margin: 4px;
}
.remoteRulesTitle{
    display: block;
    vertical-align: middle;
    /*line-height: 14px;*/
    font-family: eurostile-bold;
    font-weight: bold;
    font-size: 20px;
    color: #004761;
    text-align: center;
    margin: 8px;
}
.remoteRulesBody {
    display: block;
    line-height: 14px;
    font-family: eurostile;
    font-size: 13px;
    color: black;
    margin: 4px 18px 14px 18px;
}
.remoteTokenRulesContainer {
    display: inline-block;
    vertical-align: top;
    margin: 4px;
}
.remoteRulesToken {
    position: absolute;
    /*margin: 4px;*/
    height: 100px;
}
/*.remoteRulesTokenImg {
    position: relative;
    margin: 4px;
    top: 2px;
    left: 2px;
    height: 96px;
    z-index: -1;
}*/
.remoteRulesTokenImg-tiny {
    position: relative;
    left: 4px;
    top: 9px;
    width: 74px;
    height: 82px;
    z-index: -1;
}
.remoteRulesTokenImg-device {
    position: relative;
    left: 3px;
    top: 9px;
    width: 91px;
    height: 89px;
    z-index: -1;
}
.remoteRulesTokenImg-commando {
    position: relative;
    left: 1px;
    top: 1px;
    width: 98px;
    height: 97px;
    z-index: -1;
}
.remoteRulesTokenImg-sensor {
    position: relative;
    left: 1px;
    top: 1px;
    width: 77px;
    height: 98px;
    z-index: -1;
}
.remoteRulesTokenImg-buzzdroid {
    position: relative;
    left: 1px;
    top: 1px;
    width: 75px;
    height: 98px;
    z-index: -1;
}
.remoteRulesTokenImg-pentagon {
    position: relative;
    left: 3px;
    top: 1px;
    width: 98px;
    height: 96px;
    z-index: -1;
}
.remoteRulesTokenImg-large-round {
    position: relative;
    left: 2px;
    top: 1px;
    width: 94px;
    height: 95px;
    z-index: -1;
}
/*.remoteToken-large-round {
    position: absolute;
    width: 334px;
    height: 339px;
}
.remoteTokenImg-large-round {
    position: relative;
    left: 5px;
    top: 4px;
    width: 323px;
    height: 317px;
    z-index: -1;
}*/





.deviceTokenContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.deviceToken-tiny {
    position: absolute;
    width: 92px;
    height: 110px
}
.deviceTokenImg-tiny {
    position: relative;
    left: 6px;
    top: 9px;
    width: 80px;
    height: 92px;
    z-index: -1;
}
.deviceToken-device {
    position: absolute;
    width: 155px;
    height: 160px;
}
.deviceTokenImg-device {
    position: relative;
    left: 4px;
    top: 16px;
    width: 146px;
    height: 140px;
    z-index: -1;
}
.deviceToken-commando {
    position: absolute;
    width: 172px;
    height: 172px;
}
.deviceTokenImg-commando {
    position: relative;
    left: 3px;
    top: 3px;
    width: 166px;
    height: 166px;
    z-index: -1;
}
.deviceToken-sensor {
    position: absolute;
    width: 191px;
    height: 243px;
}
.deviceTokenImg-sensor {
    position: relative;
    left: 3px;
    top: 3px;
    width: 184px;
    height: 236px;
    z-index: -1;
}
.deviceToken-buzzdroid {
    position: absolute;
    width: 155px;
    height: 201px;
}
.deviceTokenImg-buzzdroid {
    position: relative;
    left: 3px;
    top: 3px;
    width: 149px;
    height: 195px;
    z-index: -1;
}
.deviceToken-pentagon {
    position: absolute;
    width: 242px;
    height: 230px;
}
.deviceTokenImg-pentagon {
    position: relative;
    left: 7px;
    top: 4px;
    width: 227px;
    height: 221px;
    z-index: -1;
}
.deviceToken-large-round {
    position: absolute;
    width: 334px;
    height: 339px;
}
.deviceTokenImg-large-round {
    position: relative;
    left: 5px;
    top: 4px;
    width: 323px;
    height: 317px;
    z-index: -1;
}
.deviceRulesContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.deviceRulesDiv {
    width: 430px;
    /*height: 100px;*/
    border-style: double;
    border-color: black;
    border-radius: 10px;
    color: white;
    background-color: white;
}
.deviceRulesHeader {
    /*width: 500px;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.deviceRulesStatsVerticalBox{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.deviceRulesStats {
    position: relative;
    /*width: 109px;*/
    height: 60px;
    margin: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px 15px;
    background: url("../img/device-rules-stats-background.png") no-repeat;
    background-size: 100% 100%;
}
.deviceRulesStatsFieldDiv {
    display: inline-block;
    top:0px;
    left:0px;
    width: 30px;
}
.deviceRulesStatsBackground {
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}
.deviceRulesInitBox {
    position: absolute;
    top:4px;
    left:3px;
    width: 30px;
    height: 52px;
}
.deviceRulesInit {
    position: absolute;
    top:12px;
    left:3px;
    width: 30px;
    font-size: 36px;
    color: #f57e20;
    font-family: kimberley;
    text-align: center;
}
.deviceTypes {
    display: block;
    vertical-align: middle;
    line-height: 14px;
    font-family: eurostile;
    font-size: 13px;
    color: black;
    text-align: center;
    margin: 4px;
    margin-top: 14px;
}
.deviceRulesTitle{
    display: block;
    vertical-align: middle;
    /*line-height: 14px;*/
    font-family: eurostile-bold;
    font-weight: bold;
    font-size: 20px;
    color: #004761;
    text-align: center;
    margin: 8px;
}
.deviceRulesBody {
    display: block;
    line-height: 14px;
    font-family: eurostile;
    font-size: 13px;
    color: black;
    margin: 4px 18px 14px 18px;
    text-align: center;
}
.deviceTokenRulesContainer {
    display: inline-block;
    vertical-align: top;
    margin: 4px;
}
.deviceRulesToken {
    position: absolute;
    /*margin: 4px;*/
    height: 100px;
    z-index: 1;
}
/*.deviceRulesTokenImg {
    position: relative;
    margin: 4px;
    top: 2px;
    left: 2px;
    height: 96px;
    z-index: -1;
}*/
.deviceRulesTokenImg-tiny {
    position: relative;
    left: 4px;
    top: 9px;
    width: 74px;
    height: 82px;
    /*z-index: -1;*/
}
.deviceRulesTokenImg-device {
    position: relative;
    left: 3px;
    top: 9px;
    width: 91px;
    height: 89px;
    /*z-index: -1;*/
}
.deviceRulesTokenImg-commando {
    position: relative;
    left: 1px;
    top: 1px;
    width: 98px;
    height: 97px;
    /*z-index: -1;*/
}
.deviceRulesTokenImg-sensor {
    position: relative;
    left: 1px;
    top: 1px;
    width: 77px;
    height: 98px;
    /*z-index: -1;*/
}
.deviceRulesTokenImg-buzzdroid {
    position: relative;
    left: 1px;
    top: 1px;
    width: 75px;
    height: 98px;
    /*z-index: -1;*/
}
.deviceRulesTokenImg-pentagon {
    position: relative;
    left: 3px;
    top: 1px;
    width: 98px;
    height: 96px;
    /*z-index: -1;*/
}
.deviceRulesTokenImg-large-round {
    position: relative;
    left: 2px;
    top: 1px;
    width: 94px;
    height: 95px;
    /*z-index: -1;*/
}


.damageCardContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.damageCardContainerNoMargin {
    display: inline-block;
    vertical-align: top;
    height: 418px;
    margin: 0px;
}
.damageCard {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 418px;
}
.damageCardTemplate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 418px;
}
.damageCardNameContainer{
    position: absolute;
    top: 24px;
    left: 30px;
    width: 239px;
    height: 54px;
    line-height: 26px;
    text-align: center;
}
.damageCardName{
    position: absolute;
    font-family: bankgothic;
    font-size: 32px;
    color: black;
    font-variant: small-caps;
    top:50%;
    transform: translateY(-50%);
/*    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);*/
}
.damageCardType{
    position: absolute;
    top: 85px;
    left: 30px;
    width: 239px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    font-family: kimberley;
    font-style: italic;
    font-size: 24px;
    color: black;
}
.damageCardCount{
    position: absolute;
    top: 388px;
    left: 30px;
    /*width: 50px;*/
    height: 22px;
    line-height: 12px;
    text-align: left;
    font-family: eurostile;
    font-size: 12px;
    font-weight: 800;
    color: black;
}
.damageCardAbilityContainer{
    position: absolute;
    top:106px;
    left:40px;
    width: 220px;
    height:224px;
}
.damageCardAbility{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    color: black;
    text-align: center;
    font-family: eurostile;
    font-size: 18px;
}
.damageCardAbility br {
    margin-bottom: 6px;
}


.gamePieceContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.gamePieceContainerNoMargin {
    display: inline-block;
    vertical-align: top;
/*    height: 418px;*/
    margin: 0px;
}
.gamePiece {
    display: inline-block;
    position: relative;
/*    width: 300px;
    height: 418px;*/
}



.cardPackContainer {
    display: block;
    vertical-align: top;
    margin: 24px;
    /*    border-style: solid;
        border-width: 1px;
        border-color: black;*/

}
.cardPackDiv {
    max-width: 960px;
}
.cardPackTileDiv {
    max-width: 480px;
    height: 280px;
    overflow: hidden;
    display: inline-block;
}
.cardPackBanner {
    width: 960px;
}
.cardPackTileBanner {
    max-width: 480px;
}

.cardPackHeader {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.cardPackTitle{
    display: block;
    vertical-align: middle;
    /*line-height: 14px;*/
    font-family: eurostile-bold;
    font-weight: bold;
    font-size: 64px;
    color: black;
    text-align: center;
    margin: 8px;
}
.cardPackByLine{
    display: block;
    vertical-align: middle;
    /*line-height: 14px;*/
    font-family: eurostile-bold;
    font-weight: bold;
    font-size: 32px;
    color: black;
    text-align: center;
    margin: 4px;
}
.cardPackVersion{
    display: block;
    vertical-align: middle;
    /*line-height: 14px;*/
    font-family: eurostile-bold;
    font-size: 20px;
    color: black;
    text-align: center;
    margin: 4px;
}
.cardPackBody {
    display: block;
    font-family: eurostile;
    /*font-size: 18px;*/
    color: black;
    text-align: left;
    margin: 8px;
}
.toolbar-button{
    margin: 4px;
    width: 40px;
    height: 40px;
}
.toolbar-button-with-tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

.toolbar-button-with-tooltip .toolbar-button-tooltiptext {
    visibility: hidden;
    font-size: 14px;
    width: 100px;
    background-color: yellow;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    /*opacity: 0;*/
    /*margin-left: -120px;*/
    transition-property: visibility;
    transition-delay: 0.5s;
    -moz-transition-property: visibility;
    -moz-transition-delay: 0.5s;
}

.toolbar-button-with-tooltip:hover .toolbar-button-tooltiptext {
    visibility: visible;
    transition-property: visibility;
    transition-delay: 0.5s;
    -moz-transition-property: visibility;
    -moz-transition-delay: 0.5s;
    /*    opacity: 0;
        transition: 2s all;
        -moz-transition: 2s all;*/
    /*content: '';*/
}
/*.toolbar-button-with-tooltip:hover:after .toolbar-button-tooltiptext {
    visibility: visible;
    opacity: 1;
        transition: opacity  0s linear 1s;
        -moz-transition: opacity;
        -moz-transition-duration: 0s;
    transition: 2s all;
    -moz-transition: 2s all;
    -moz-transition-delay: 1s;
    transition-delay: 1s;
    content: 'tooltip';
}*/
.toolbar-button-img {
    position: relative;
    top: 2px;
    /*left: 4px;*/
    height: 22px;
    width: 22px;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}