.upgradeContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
}
.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;
}
.upgradeTextTemplate {
    position: absolute;
    top: 0px;
    left: 166px;
    width: 254px;
    height: 300px;
}
.upgradeTextTemplateLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 254px;
    height: 300px;
}
.customUpgradeName{
    position: absolute;
    top:124px;
    left:167px;
    width: 239px;
    font-family: bankgothic;
    font-size: 16px;
    color: white;
    font-variant: small-caps;
    text-align: center;
}
.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: 142px;
    line-height: 142px;
    text-align: center;
    white-space: pre-wrap;
}
.customUpgradeCardTextContainerLeft{
    position: absolute;
    top:146px;
    left:21px;
    width: 219px;
    height: 142px;
    line-height: 142px;
    text-align: center;
    white-space: pre-wrap;
}
.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: 13px;
    /*font-variant: all-small-caps;*/
    font-variant: 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;
}
.dialContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
    /*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;
}
.tileContainer {
    display: inline-block;
    vertical-align: top;
    margin: 24px;
    /*margin-top: 144px;*/
}
.tile {
    display: inline-block;
    position: relative;
}
.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-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;
}
.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: 389px;
    left: 7px;
    width: 26px;
    height: 26px;
}
.customShipAbility{
    position: absolute;
    top:273px;
    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;
}
.customPilotName{
    position: absolute;
    top: 135px;
    left: 52px;
    width: 195px;
    font-family: bankgothic;
    font-size: 14px;
    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);
}
.customPilotCaption{
    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);
}
.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;
}
.pilotAbilityArea-linked{
    position: absolute;
    display: flex;
    top:182px;
    width: 213px;
    height: 142px;
    color: black;
    text-align: center;
}
.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;
}