/*Certain elements change color based on server mode (dev/test/prod), using a dynamic CSS variable (--ffmodecolor) set via JavaScript reading a PHP-generated variable name and value.*/

:root {
	--ffbgcolor: #E4DCC5;
	--ffgrey: #C7C3C3;
	--ffcvplane: #5B86CC;
	--fffloatplane: #BA9F6C;
	--fflandplane: #248C23;
	--ffflyingboat: #5A5B5A;
	--ffmodecolor: black; /* Changes based on server mode (dev/test/prod). */
	--ffmissionicon: #808080;
	--ffred: #D8362B;
	accent-color: var(--ffmodecolor);
}

[v-cloak] {
	display: none;
}
[v-cloak]::before {
	content: "Loading…";
}

@font-face {
	font-family: "BabelStoneMaritime";
	src: url("BabelStoneMaritime.ttf");
}

body {
	background-color: var(--ffbgcolor);
	font-size: 14px;
	line-height: 1.5;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 10px !important;
}

html {
	scroll-behavior: auto;
	overflow-anchor: none;
}

label {
	cursor: pointer;
	font-weight: bold;
}

h1 {
	color: red;
}

td, th {
	border: 1px solid black !important;
}

fieldset {
	border: 1px solid var(--ffgrey);
	margin-bottom: 2em;
	padding: 1em;
	position: relative;
}

legend {
	color: red;
	font-style: italic;
	font-size: medium;
	margin-bottom: 5px;
	border-bottom: none;
	padding-left: 10px;
	padding-right: 10px;
	width: inherit;
}

dd {
	padding-left: 2em;
	padding-bottom: 1em;
}

.nowrap, .sightingSil {
	white-space: nowrap;
}

.noborder {
	border: none;
}

.dotted {
	border: 1px dotted var(--ffmodecolor);
}

.red {
	color: red;
}

.black {
	color: black;
}

.invis {
	display: none;
}

#glanceList, .casualtiesListPlanes, .coachingList {
	list-style-image: url('images/bullet-plane-black.svg');
}

#glanceList li, .casualtiesListPlanes, .coachingList li {
	margin-bottom: .75em;
}

#mainlogo, .basePic img, .carrierPic img {
	border: 1px solid black;
	margin-bottom: .5em;
}

.basePic, .carrierPic {
	margin-right: .5em;
}

.navIcon, .navIconDisabled {
	background: url('images/buttons/topnavbuttons.png') no-repeat 0 0;
	width: 80px;
	height: 80px;
	display: inline-block;
}

.navIcon {
	border: 2px outset #666666;
	cursor: pointer;

	transform: scale(.70);
	margin-left: -7.5px;
	margin-right: -7.5px;
}

#topNavSecondRowButtonsSmall {
	display: none;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	background-color: var(--ffbgcolor);
	min-height: 200px;
}

.screen {
	padding-top: 250px;
}

nav {
	position: sticky;
	top: 250px;
	align-self: flex-start;
	height: fit-content;
	z-index: 10;

	width: 20%;
	min-width: 180px;
	max-width: 250px;
	margin-right: 2em;
}

main {
	margin-left: 2em;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
	.navIcon {
		transform: scale(.6);
		margin-left: -12px;
		margin-right: -12px;
	}
	#topNavSecondRowButtonsLarge {
		display: none;
	}
	#topNavSecondRowButtonsSmall {
		display: inline-block;
	}
	#header {
		min-height: 140px;
	}
}

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
	.navIcon {
		transform: scale(.4);
		margin-left: -22px;
		margin-right: -22px;
		margin-top: -20px;
		margin-bottom: -20px;
		position: relative;
		z-index: 9999;
	}
	#topNavSecondRowButtonsLarge {
		display: none;
	}
	#topNavSecondRowButtonsSmall {
		display: inline-block;
	}
	#topFeedbackButton, #gameIDlabel {
		display: none;
	}
	#phaseButtonGroup {
		margin-top: 2em;
	}
	#gameID {
		white-space: nowrap;
		margin-left: 20px;
		margin-right: -30px;
	}
	#header {
		min-height: 120px;
	}
}

.navIconDisabled {
	border: 3px outset #FFFFFF;
}

.navIcon:hover {
	border: 3px outset #FF0000;
}

#unitNavIconAGs {
	background-position: -0px 0;
}

#unitNavIconmapwrap {
	background-position: -80px 0;
}

#unitNavIconCarriers {
	background-position: -160px 0;
}

#unitNavIconMessages {
	background-position: -240px 0;
}

#unitNavIconSubs {
	background-position: -320px 0;
}

#unitNavIconTFs {
	background-position: -400px 0;
}

#unitNavIconBases {
	background-position: -480px 0;
}

#unitNavIconTargets {
	background-position: -560px 0;
}

#unitNavIconSearch {
	background-position: -640px 0;
}

#unitNavIconResults {
	background-position: -720px 0;
}

#unitNavIconDebrief {
	background-position: -800px 0;
}

#mapnavTabs {
	margin-top: 1em;
	text-align: left;
	padding: 0;
}

.mapnavTab {
	cursor: pointer;
	margin-bottom: 1.5em;
	margin-right: 1em;
}

.mapnavTab.active {
	background-color: red;
}

.TFship {
	display: inline-block;
}


/* Badge colors of plane types depend on where they can land. */
.ptypeLandsOnland .badge {
	background-color: var(--fflandplane) !important;
}

.ptypeLandsOncv .badge {
	background-color: var(--ffcvplane) !important;
}

.ptypeLandsOnspland .badge {
	background-color: var(--ffflyingboat) !important;
}

.ptypeLandsOnsp .badge {
	background-color: var(--fffloatplane) !important;
}

.ptypeLandsOn {
	overflow: visible;
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: left;
}

.planeStates {
	padding-top: 1.5em;
}

#planeStates h3 {
	font-size: medium;
}

.loginButton {
	clear: both;
	margin-bottom: 20px;
}

#loginForm, #registrationForm {
	padding-bottom: 20px;
}

.pushright {
	margin-right: 15px;
	white-space: nowrap;
}

.messageSender {
	font-weight: bold;
}

.messageDateTime {
	font-style: italic;
	margin-left: 2em;
	font-size: small;
}

.navUnitList, .newGameLists {
	list-style: none;
	height: 15em;
	overflow: auto;
	width: 100%;
	text-align: left;
	white-space: nowrap;
	overflow-x: hidden;
	margin: 0 0 2px 0;
	padding: 0;
}

.navUnitList li {
	padding-right: 1em;
}

#opponentsList .newGameLists {
	height: 19em;
}

.navUnitList label, .newGameLists label {
	display: inline;
}

.navUnitList li, .newGameLists li {
	margin: 0;
	padding: 0;
	width: 100%;
}

.navUnitList li:hover, .newGameLists li:hover {
	background-color: white;
}
	
.newGameLists {
	height: 15em;
	overflow-y: auto;
	margin-bottom: 30px;
}

.newGameLists li {
	padding: 5px;
}

.planeState_Unready {
	margin-right: 3px;
}

.planeState_Launching {
	margin-left: 3px;
}

.planeState_Readying, .planeState_Ready, .planeState_Unreadying {
	margin-right: 3px;
	margin-left: 3px;
}

.pstatus {
	background-color: #CCCCCC;
	min-height: 100px;
	min-width: 120px;
	padding-left: 10px;
	padding-top: 10px;
	border: 1px dotted var(--ffmodecolor);
}

.pstatusOverflow {
	max-height: 250px;
	overflow-y: auto;
}

#planeStates {
	margin-left: 0;
}

.phaseBarInactive {
	color: #888888;
	font-weight: normal;
}

.phaseBarActive {
	color: #FF0000;
	font-weight: bold;
}

#phaseBarTitle {
	font-weight: bold;
}

#scenProgressBar {
	margin-top: 10px;
}

#mapwrap {
	position: absolute;
	top: 0;
	right: 3000px;
}

#FFmap {
	width: 99%;
	height: 600px;
	border: 1px solid black;
}

#mapOptions, #mapNotes {
	padding-top: 10px;
	padding-bottom: 10px;
}

.offScreen {
	position: absolute;
	top: -2000px;
	right: 0;
}

.onScreen {
	position: relative;
	top: 0;
	right: 0;
}

.whatsNew ol, .whatsRecent ol {
	list-style-image: url('images/bullet.png');
}

.gamelistTable th {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}

.gamelistTable td {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: 1px solid var(--ffmodecolor) !important;
}

.copyright {
	margin-top: 30px;
	font-size: small;
}

#settings {
	margin-bottom: 30px;
}

#ajaxIcon {
	display: none;
	color: black;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
}

.ui-draggable {
	z-index: 499;
	cursor: pointer;
}

.mapnavUnitLink, .delRefPoint, .waypointsLink, .viewOnMap, .scuttleButton {
	margin-left: 5px;
	margin-right: 5px;
	cursor: pointer;
}

.waypointsLinkActive {
	margin-left: 5px;
	margin-right: 5px;
	cursor: pointer;
	color: red;
}

.helpIcon, .hideInactiveGameButton, .navLink, .header, .loginButton, .showMission {
	cursor: pointer;
}

.changeMessagesSpan {
	cursor: pointer;
	margin-left: 5px;
	font-size: large;
}

.Baseparts div, .AGplanes div, .TFships div, .sub div {
	display: inline-grid;
	margin-left: 10px;
	margin-right: 10px;
	vertical-align: top;
	font-size: small;
}

.combatAGvsBase .Baseparts div {
	display: inline-block;
}

.combatAGvsBase .AGplanes div {
	display: inline-block;
}

.combatAGvsTF .AGplanes div {
	display: inline-block;
}

.engagementHint, .shortCut {
	font-style: italic;
	color: #777777;
	padding: .5em;
	margin-top: 2em;
}

.TFship {
	margin: 1em;
}

.shipDetails {
	font-size: small;
}

.shipName {
	font-style: italic !important;
}

.subKnots {
	margin-left: 6px;
}

#sightingOptionsForm {
	margin-left: 8em;
	margin-bottom: 2em;
}

#sightingMap {
	margin-top: 2em;
}

.sightingSil {
	margin-right: 2em;
}

.droppableHover {
	border: 2px solid red !important;
	cursor: cell;
}

#sightingOptions label:hover {
	color: red;
	background-color: white;
}

.warnUnengaged {
	border: 2px solid yellow;
}

.combatAGvsTF .AGplanes img, .CAPplanes img {
	width: 75px;
}

.CAPplanes {
	display: block;
}

.AGFieldset label, .AGFieldsetVisible label, .TFFieldsetVisible label, .BaseFieldsetVisible label, .CarrierFieldsetVisible label {
	font-weight: normal;
}

.CarrierFieldset, .BaseFieldset, .TFFieldset, .SubFieldset, .AGFieldset, .EngagementFieldset {
	display: none;
}

.launchAllButton {
	margin-bottom: 6px;
}

.badge {
	font-size: x-small;
}
.countBadge {
	margin-right: .25em;
	margin-left: 0;
}

.jqimessage label:hover {
	color: red !important;
	background-color: #CCCCCC !important;
}

.engagementSideSeparatorAGvsAG {
	display: block;
	height: 24px;
	background: url('images/mg-rounds.gif') no-repeat scroll center;
	border: none;
	clear: both;
	padding: 20px;
}

.engagementSideSeparatorAGvsTF, .engagementSideSeparatorAGvsBase {
	display: block;
	height: 30px;
	background: url('images/bombs.gif') no-repeat scroll center;
	border: none;
	clear: both;
	padding: 20px;
}

.engagementSideSeparatorTFvsTF {
	display: block;
	height: 30px;
	background: url('images/shells-and-torps.gif') no-repeat scroll center;
	border: none;
	clear: both;
	padding: 20px;
}

.engagementSideSeparatorSubvsTF {
	display: block;
	height: 15px;
	background: url('images/torps.gif') no-repeat scroll center;
	border: none;
	clear: both;
	padding: 20px;
}

.battlestations {
	margin-bottom: 8em;
	border: none;
}

.agDisperse {
	display: none;
	border: 2px groove red;
	width: 450px;
	height: 160px;
	padding: 1em;
}

.agArc {
	float: left;
	height: 100px;
	width: 100px;
}

#massRecallButton {
	margin-top: 6px;
}

.upgradeGame {
	background-color: red;
	color: white;
	padding-left: 1em;
	padding-right: 1em;
	cursor: pointer;
}

.filterMenu, .sortNav, #messagesButtons {
	margin-top: 20px;
}

#massRecallButton {
	margin-top: 20px;
	margin-bottom: 20px;	
}

#searchMessages {
	margin-bottom: 20px;
}

#SubOpsAll {
	margin-top: 30px;
}

.progress-bar-danger {
	background-color: #8E8D8D;
}

#autoAdvanceOptions li {
	cursor: pointer;
	padding-left: 1em;
	position: relative;
}

#autoAdvanceOptions li:hover {
	color: red !important;
	background-color: #CCCCCC !important;
	position: relative;
}

#autoAdvanceOptions li.selected {
	color: red !important;
	background-color: #CCCCCC !important;
	position: relative;
}





.helpTabLink {
	font-size: large;
	border-bottom: 1px solid blue;
}

.helpTabLink:hover {
	background-color: white;
}

.helpArticleLink {
	padding: .5em;
}

.helpArticleLink:hover {
	background-color: white;
}

.helpArticleLink:after {
	content: ", ";
}

.helpArticleLink:last-child:after {
	content: "";
}

.helpPage .helpArticle {
	margin-bottom: 2em;
}

#helpIndex {
	border-bottom: 2px dashed red;
	margin-bottom: 2em;
	padding-bottom: 2em;
}

#helpTabLinks li {
	margin-top: 20px;
}

.helpItem {
	font-size: 150%;
	font-style: italic;
	color: var(--ffmodecolor);
}

.helpTable, .helpTable th, .helpTable td {
	border: 1px solid #aaaaaa !important;
}

.missionHint {
	color: #888;
}

.missionChoice {
	text-indent: -24px;
	padding-left: 20px;
	line-height: 1em;
}

.missionLabel, .missionLabelDisabled {
	color: black;
	margin-left: 35px;
}

p.missionChoice label:hover {
	background-color: white !important;
}

p.missionChoice input {
	cursor: pointer;
}

.phaseButtonAutoWidth {
	width: 140px !important;
}

.loginLabel {
	cursor: auto;
}

.Ship_Not_Attacking_Ships {
	opacity: .3;
}

#fieldsetsMessages {
	font-family: "Special Elite", Courier;
}

.BaseDefendingAG {
	border: 1px solid black;
	width: 120px;
	height: 90px;
}

.DefendingCAPimage {
	border: none;
	height: 75px;
}

#newGame {
	display: none;
}

.disabledNewGameChoice {
	font-style: italic;
	font-size: 80%;
}

li .fa-question-circle {
	cursor: pointer;
	font-size: 125%;
}

.toTopArrow {
	position: absolute;
	bottom: 0;
	right: 0;
	color: var(--ffgrey);
	cursor: pointer;
}

#invitationInvalid {
	color: red;
	background-color: yellow;
	padding: 2em;
	margin: 2em;
}

.scrolled {
	border-bottom: 1px dashed white;
	margin-bottom: 14px;
}

#Messagenavlist label, #Messagenavlist i {
	font-size: 80%;
}

.messageTypeCount {
	font-size: 75%;
}

#sightingsDone {
	font-size: 150%;
}

.mayNotRate {
	display: none;
}

.planesDetails {
	white-space: normal;
}

#sightingReportAdminButton {
	margin-bottom: 20em;
}

#AGs, #TFs, #Subs, #Bases, #Carriers, #Messages {
	min-height: 500px;
}

#gameUpdatedMsg {
	padding-top: .75em;
	padding-bottom: .5em;
	margin-bottom: .5em;
	color: blue;
	background-color: yellow;
	font-weight: bold;
	width: 100%;
}

#newAG, #newTF {
	width: 125px;
	margin-left: -15px;
}





#distanceTable {
	height: 40em;
	width: 100%;
	overflow: auto;
}

/* Make first column and row of distances table sticky but allow others to scroll as needed. */
/* https://forums.asp.net/t/2151772.aspx?how+do+I+create+an+HTML+table+with+frozen+heading+First+two+row+and+left+column+Employee+Name+ */
#distanceTable {
	table-layout: fixed;
	width: 100%;
	border-collapse: separate !important;
}

/*fixed the first column*/
#distanceTable td:first-child, th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

/* fixed the first two rows*/
#distanceTable thead tr th {
	position: sticky;
	top: 0;
}
#distanceTable thead tr th:first-child {
	z-index: 2;
}

/*#distanceTable tbody tr:first-child td {
	position: sticky;
	top: 40px;
	background-color: white;
}*/

#distanceTable tbody tr:first-child td:first-child {
	z-index: 3; 
}

#distanceTable th {
	color: var(--ffmodecolor);
	white-space: nowrap;
	opacity: 1;
	background-color: white;
	border: 1px solid #DDDDDD !important;
}

#distanceTable td {
	white-space: nowrap;
	opacity: 1;
	text-align: center;
	border: 1px solid #BBBBBB !important;
	padding: 1em;
}

#distanceTable td:hover {
	color: white;
	background-color: var(--ffmodecolor);
}

#distanceTable tr:nth-child(even) {
	background: #EEE;
}

#distanceTable tr:nth-child(odd) {
	background: #FFF;
}

#distanceTable col:first-child {
	background: #FFF;
}

#distanceTable col:nth-child(2n+3) {
	background: #EEE;
}

#distanceTable tr td:first-child {
	color: var(--ffmodecolor);
	white-space: nowrap;
	opacity: 1;
	background-color: white;
	border: 1px solid #DDDDDD !important;
	font-weight: bold;
	text-align: left;
}

#distanceTable .fa {
	cursor: pointer;
	color: black;
	margin-left: .5em;
	font-size: 75%;
}





/*Top left empty cell.*/
#dt00 {
	background-color: var(--ffbgcolor);
	border: none;
}

#ajaxSpinner {
	position: fixed;
	left: 0;
	bottom: 0;
}

#ajaxTimer {
	position: fixed;
	color: #999;
	left: 1em;
	bottom: 0;
	font-size: 75%;
}

.focusMap {
	cursor: pointer;
}

.rangeCircleWidget {
	margin-top: 1em;
	white-space: nowrap !important;
}

.rangeCircleWidget label {
	font-size: 80%;
}

/* Show damaged ships by rotating and translating their icons. */

.damagedVessel {
	max-height: 100px;
	overflow: hidden;
	border-bottom: 1px solid black;
	text-align: center;
}

.rotatedImageCriticalDamage1 {
	transform: rotate(15deg) translate(25%);
}
.rotatedImageCriticalDamage2 {
	transform: rotate(-15deg) translate(-25%);
}

.rotatedImageHeavyDamage1 {
	transform: rotate(10deg) translate(25%);
}
.rotatedImageHeavyDamage2 {
	transform: rotate(-10deg) translate(-25%);
}

.rotatedImageModerateDamage1 {
	transform: rotate(4deg) translate(3px, 3px);
}
.rotatedImageModerateDamage2 {
	transform: rotate(-4deg) translate(3px, 3px);
}

.rotated180 {
	transform: rotate(180deg);
}

.rotated90 {
	transform: rotate(90deg);
}

.rotated90planeData {
	padding-left: 6em;
}

.rotated90planeData .badge {
	margin-left: 4em;
}

.text-right {
	text-align: right;
}

.sightingReport {
	padding-bottom: 1em;
}

.sightingReportOptionButtons {
	padding-bottom: 2em;
}

.noSightings {
	margin-top: 2em;
	margin-left: 2em;
	margin-right: 2em;
	font-size: 125%;
	padding-bottom: 1em;
}

.shipLoc {
	padding: 1em;
}

svg {
	overflow: visible !important;
}

svg.targetLine {
	position: absolute;
	z-index: -999;
	width: 100%;
	height: 100%;
}

.canDrag {
	cursor: pointer;
}

/* Fading elements in and out, from https://vuejs.org/v2/guide/transitions.html. */
.fade-enter-active, .fade-leave-active {
	transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity: 0;
}

.colSort {
	cursor: pointer;
}

.siteColor, legend, .phaseBarActive {
	color: var(--ffmodecolor);
}


/*Instead of using standard Bootstrap button colors based on their classnames, use our own.*/
#phaseButtonGroup button, #phaseButtonGroup button:hover {
	background-color: var(--ffmodecolor);
	border-color: black;
	color: white;
	z-index: 1001;
}

.waitButton {
	background-color: var(--ffgrey) !important;
	color: black !important;
	cursor: not-allowed;
}


/*Plane-status boxes reflect server mode too.*/
.planeBoxActive {
	border: 2px solid var(--ffmodecolor);
	border-radius: 5px;
}
.planeBoxInactive {
	border: 1px dotted var(--ffmodecolor);
	border-radius: 5px;
}




.margin1emRight {
	margin-right: 1em;
}

.marginHalfemRight {
	margin-right: .5em;
}

.attention {
	padding: 1em;
	color: white;
	background-color: blue;
	width: 100%;
	text-align: center;
}

.hint {
	padding: 1em;
	color: red;
	background-color: white;
	width: 100%;
	text-align: left;
}

.supportBox {
	margin-top: 1em;
	margin-bottom: 4em;
	border: 1px solid red;
	padding: 2em;
	font-size: 150%;
}

#footer {
	margin-bottom: 6em;
}

.endGameButton, .revertGameButton {
	margin-right: 1em;
}

.newUnitHintContainer {
	font-style: italic;
	padding: .5em;
	border: 1px dotted var(--ffmodecolor);
}

.newUnitHint {
	margin: 0;
	padding: 1em;
}

.navFieldset {
	padding-top: 0;
	margin-right: 0;
	padding-right: 0;
	width: 120%;
}

.newUnitDropArea {
	padding-top: 0;
	margin-right: 0;
	padding-right: 0;
	width: 120%;
	margin-bottom: 1em;
	text-align: center;
}

#AGnavlist, #TFnavlist {
	margin-top: .5em;
}

.unitNavLegend {
	margin: 0;
	padding: 0;
}

.navDivider {
	margin-left: 1em;
	margin-right: 1em;
}

.quickpickPlanes {
	margin-left: .5em;
	margin-right: .5em;
	padding: .5em;
	min-width: 3em;
}

.br {
	display: block;
	white-space: nowrap;
}

/*https://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite/16080995*/
.biggerSprite {
	/*background-size: 150% 150%;*/
	zoom: 1.5;
	-moz-transform: scale(1.5);
	-moz-transform-origin: 0 0;
	display: inline-block;
}

.mainMap {
	width: 99%;
	height: 800px;
	border: 1px solid black;
}

.sightingsMap {
	width: 99%;
	height: 400px;
	border: 1px solid black;
}

#unitFilters {
	margin-top: .5em;
	margin-bottom: .5em;
}

.legendMapIcon, .legendRehomeIcon, .legendEyeIcon {
	margin-left: .5em;
	margin-right: .5em;
	cursor: pointer;
}

.legendWeatherIcon {
	margin-left: .5em;
	margin-right: .5em;
}

.crHitsLosses {
	background-color: rgba(255, 255, 255, 0.80);
	border: 1px solid black;
	padding: .5em;
	font-weight: bold;
	margin-top: .5em;
	border-radius: 5px;
}

.topNavSeparator {
	margin: 0;
	padding: 0;
	
}

.topNavSeparator::after {
	content: '';
	position: absolute;
	eft: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, transparent, var(--ffmodecolor));
	pointer-events: none;
}



/* Make all three sections of top nav equal in height. */
#topNav {
	display: flex;
	align-items: stretch;
	padding-bottom: 0;
	margin-bottom: 0;
}

#flag, #navIcons, #progress {
	flex: 0 1 auto;
}

#flagIcon {
	border: none;
}

#Messagenavlist li {
	width: 100%;
	display: flex;
	line-height: 1em !important;
	margin-bottom: .5em;
}

#Messagenavlist li span:nth-of-type(2) { 
	text-align: left;
	flex-shrink: 1;
	flex-grow: 1;
	padding-left: .5em;
}




#Carriernavlist li {
	width: 100%;
	display: flex;
	line-height: 1em !important;
	margin-bottom: .5em;
}

#Carriernavlist li span:nth-of-type(2) { 
	text-align: left;
	flex-shrink: 1;
	flex-grow: 1;
	padding-left: .5em;
}

#Carriernavlist li span:nth-of-type(3), #Carriernavlist li span:nth-of-type(4) {
	margin-right: .5em;
}

#Basenavlist li {
	width: 100%;
	display: flex;
	line-height: 1em !important;
	margin-bottom: .5em;
}

#Basenavlist li span:nth-of-type(2) { 
	text-align: left;
	flex-shrink: 1;
	flex-grow: 1;
	padding-left: .5em;
}

#Basenavlist li span:nth-of-type(3), #Basenavlist li span:nth-of-type(4) {
	margin-right: .5em;
}

#TFnavlist li, #AGnavlist li, #Subnavlist li {
	width: 100%;
	display: flex;
	line-height: 1em !important;
	margin-bottom: .5em;
}

#TFnavlist li span:nth-of-type(2), #AGnavlist li span:nth-of-type(2), #Subnavlist li span:nth-of-type(2) { 
	text-align: left;
	flex-shrink: 1;
	flex-grow: 1;
	padding-left: .5em;
}

#Subnavlist li span:nth-of-type(3) {
	margin-right: .5em;
}

#TFnavlist li span:nth-of-type(3), #TFnavlist li span:nth-of-type(4) {
	margin-right: .5em;
}

#AGnavlist li span:nth-of-type(3), #AGnavlist li span:nth-of-type(4) {
	margin-right: .5em;
}


.mapnav li {
	width: 100%;
	display: flex;
	line-height: 1.25em !important;
	margin-bottom: .5em;
}

.mapnav li span:nth-of-type(2) { 
	text-align: left;
	flex-shrink: 1;
	flex-grow: 1;
	padding-left: .25em;
}

.mapnav li span:nth-of-type(3) {
	margin-right: .25em;
}

.mapnav li span:nth-of-type(4) {
	margin-right: .25em;
}

.mapnav li span:nth-of-type(5) {
	margin-right: .25em;
}

.squeezeLong {
	font-size: 85%;
}

.squeezeLonger {
	font-size: 75%;
}

.unitNavLabel {
	max-width: 21em;
	overflow: hidden;
	margin-right: .5em;
}

.mapNavLabel {
	margin-left: .75em;
}

.combatReportItem {
	margin-top: .5em;
	margin-bottom: .75em;
}

.roundedTextInput, select.tfSpeed, .detachInput, #loginForm input {
	padding-left: .5em;
	border-radius: 4px;
}

.combatAGvsBase .Baseparts div {
	padding: 2px;
	margin: 2px;
}

#detachPlanesContainer {
	font-size: 90%;
	padding: 1em;
	margin-top: 1em;
}

.sightingOptionButton {
	margin-top: .5em;
	margin-top: .5em;
}

#shipsTable .shipListImage  {
	display: inline-block;
	margin-top: 1em;
	margin-bottom: 1em;
	vertical-align: bottom;
}

#shipsTable .shipRow td:first-child {
	text-align: center !important;
	margin-bottom: 0;
	padding-bottom: 0;
}

.TFshipsEngagement div {
	display: inline-block;
	margin-left: 1px;
	margin-right: 1px;
	vertical-align: top;
	font-size: small;
}

.goToUnitListing {
	cursor: pointer;
	margin-left: 1em;
}

.infoBoxIcon {
	cursor: pointer;
	margin-right: 1em;
}

.infoBoxPlanesList {
	margin-top: 1em;
	margin-bottom: 1em;
}

.infoBoxPlaneName {
	font-weight: bold;
	font-style: italic;
	margin-right: 1em;
}

.infoBoxPlaneItem {
	margin-top: .5em;
	margin-bottom: .5em;
	margin-left: 1em;
}

.sunk {
	text-decoration: line-through;
	cursor: not-allowed;
}

.sunkLabel {
	font-size: 80%;
	font-style: italic;
}

.launchButtonContainer {
	margin-top: .5em;
}

.launchButtonContainer button {
	margin-left: .25em;
	margin-right: .25em;
	margin-bottom: .5em;
	margin-top: .5em;
}

.canClick {
	cursor: pointer;
}

.clickedOnce {
	background-color: var(--ffgrey);
}

#mapNavButtonsContainer {
	margin-bottom: 1em;
	text-align: center;
}

#mapNavButtonsContainer button {
	margin-bottom: .5em;
}

.distancesTableRadioButton {
	margin-left: .5em;
	margin-right: .5em;
}

#distanceTable th {
	padding: 1em;
}

#distancesTableTitle {
	font-size: 150%;
}

.distanceNavSep {
	margin-top: .5em;
	margin-bottom: .5em;
	width: 66%;
}

.fa-info-circle {
	cursor: pointer;
	color: var(--ffmodecolor);
}

.screenHelp {
	background-color: white;
	margin-bottom: 2em;
	border: 1px solid var(--ffmodecolor);
	padding: 1em;
}

.subSprite {
	margin-left: -100px;
}

.subSpriteEngage {
	transform: scaleX(-1);
	margin-left: 175px;
}

.subSpriteResults {
	transform: scaleX(-1);
	margin-left: -150px;
}

#scenarios, #scenariosNotes {
	height: 18em;
}

#opponentsList, #opponentsNotes {
	height: 27em;
}

.opponentsListRibbons {
	margin-left: 1.5em;
}

.proposeGameMiddleRow {
	height: 10em;
}

.randomScenButton {
	margin-left: .5em;
	margin-bottom: .5em;
}

.futureShip:not(:last-child)::after {
	content: ", ";
}

.flagsFont {
	font-family: "BabelStoneMaritime";
	font-size: 1.2em;
	letter-spacing: .2em;
}

#signalflagsFooter {
	margin-top: 2em;
	margin-bottom: 3em;
}

.optionDiv {
	margin-top: 1em;
	margin-bottom: 2em;
	text-align: left;
}

.inMemorium {
	border: 2px solid var(--ffgrey);
	padding: 1em;
	margin-bottom: 1em;
	margin-bottom: 2em;
}

.casualtyBaseIcon {
	display: inline-block;
	cursor: pointer;
}

#planesTableContainer {
	overflow-y: auto;
	height: 600px;
}

#planesTable th {
	position: sticky;
	top: 0;
	width: 100%;
	background-color: var(--ffbgcolor);
}

.planesTableCol1 {
	width: 100px !important;
	padding-left: 2em !important;
}

.noCursor {
	cursor: not-allowed;
}

.casualtiesParens {
	font-size: 75%;
}

.awaitingCombatResults {
	font-size: 125%;
	padding: 2em;
	border: 1px solid var(--ffmodecolor);
	margin-bottom: 12em;
}

.basesDamageTable td, .basesDamageTable th {
	padding: .5em;
	border: 1px solid var(--ffgrey) !important;
}

.unitVP {
	font-size: 80%;
	color: #999999;
	font-style: italic;
}

.launcherName:not(:last-child)::after {
	content: " & ";
}

.planeIDgameButton {
	margin-right: 1.5em;
	margin-top: 1em;
}

.playerRatingStar {
	margin-right: .5em;
	cursor: pointer;
}

.footerBar {
	margin-top: 1em;
	margin-bottom: 1em;
}


#adminBar {
	background-color: #CCCCCC;
	padding-bottom: .5em;
	padding-top: .25em;
	border: 1px solid var(--ffmodecolor);
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	text-align: center;
	margin: 0 auto;
	max-width: 50%;
	font-size: 75%;
}

#adminBar button {
	margin-left: .5em;
	margin-right: .5em;
}

.adminBarVs {
	margin-left: .5em;
	margin-right: .5em;
}

#adminBar .adminBarRow {
	margin-top: 1em;
}

.adminBarToggleButton {
	margin-right: 3em;
}

.adminBarOption {
	margin-right: 1.5em;
	white-space: nowrap;
}

#feedbackDirections {
	font-style: italic;
	text-align: left;
	font-size: .75em;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	color: red;
}

.splashThumbnail {
	height: 150px;
	width: 200px;
	margin: .5em;
	border: 1px solid white;
}




.fMapLabel {
	color: blue;
	margin-top: -5px;
	white-space: nowrap;
}

.eMapLabel {
	color: red;
	margin-top: -5px;
	white-space: nowrap;
}

.baseMapLabel {
	margin-top: -1px;
}

.refPointMapLabel, .rulerMapLabel {
	color: black;
	margin-top: -1px;
	white-space: nowrap;
}

.vue2leaflet-map {
	border: 1px solid black;
}

.mapLabel {
	margin-top: .15em;
	font-size: 90%;
}

.mapInfoWindow {
	font-size: 100%;
}



/* Prevent Leaflet's zoom control, scale, and attribution lines from floating over top of top nav bar. */
.leaflet-top, .leaflet-left, .leaflet-right, .leaflet-bottom {
	z-index: 400;
}



.btnReadyAll {
	margin-bottom: 1em;
	border: 1px solid var(--ffmodecolor);
}

.btnReadyAllBases, .btnReadyAllShips {
	margin-bottom: 1em;
	margin-top: 2em;
	border: 1px solid var(--ffmodecolor);
}

#invProgContainer {
	margin-top: 2em;
	margin-bottom: 2em;
	border: 2px dashed var(--ffmodecolor);
	padding: 2em;
}

.invProgTitle {
	font-size: 150%;
	margin-bottom: 1em;
}

.invProgWait {
	color: var(--ffmodecolor);;
}

.invProgDone {
	color: black;
}

.protoAGdata {
	font-style: italic;
}

.disperseOr {
	font-style: italic;
	font-size: 100%;
	color: #555555;
}

.disperseShiftRight {
	margin-left: 3em;
}

.VsStrFilter {
	font-size: 85%;
}

.VsWrapper {
	white-space: nowrap;
}

.mapnav .fa {
	margin-left: .5em;
	margin-right: 0;
	cursor: pointer;
}

span.missionIcon {
	font-size: 80% !important;
	color: var(--ffmissionicon) !important;
	margin-left: .25em !important;
	margin-right: .25em !important;
	font-weight: normal !important;
}

.vsSep {
	font-size: 80% !important;
	font-weight: normal !important;
}

.pageEngagementTurn {
	margin-left: .5em;
	font-style: italic;
}

.cLogRef {
	font-size: 75%;
	color: #888888;
}

.combatLogPre {
	font-weight: bold;
}

.combatLogPreToggle {
	font-style: italic;
	cursor: pointer;
}

#removeRefPointsTable td {
	border: 0 !important;
	padding: 5px !important;
}

#removeRefPointsTable .pinIcon {
	cursor: pointer;
}

.FTMPnote {
	font-style: italic;
}



#planesTable .ptName {
	max-width: 12em;
}

#planesTable .ptNumber {
	max-width: 6em;
	text-align: right;
}

#planesTable .ptRoleStr {
	max-width: 16em;
	min-width: 8em;
}

#planesTable .ptLandsOnStr {
	max-width: 16em;
	min-width: 8em;
}

#planesTable .ptOrdStr {
	max-width: 24em;
	min-width: 12em;
}

#planesTable .ptLost {
	max-width: 24em;
	min-width: 12em;
}

.carrierLeftNavDetails {
	font-size: 75%;
}

.vs-notify .experimental {
	color: white !important;
	background: var(--ffred) !important;
	border-left-color: black !important;
}

#freeGameLimitsReached {
	margin-top: 5em;
	font-size: 200%;
}

#freeGameLimitsReached p {
	margin-bottom: 2em;
}

.gamesListButton.active {
	color: var(--ffmodecolor);
}

.CAPlink {
	text-decoration: underline;
	cursor: pointer;
}

.agsOnCAPtable td, th {
	padding: .5em;
	border: 1px solid #555555;
}

.scenLink:link, .scenLink:visited, .scenLink:hover, .scenLink:active {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.flipHoriz {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.center {
	width: 100%;
	display: flex;
	justify-content: center;
}

.PType_Flying_Sighting {
	margin-left: 1em;
}

.coaching-star {
	color: yellow;
	background-color: blue;
	padding: 5px;
	padding-top 10px;
	margin-bottom: 1em;
}

.rightNum {
	text-align: right;
	padding-right: 2em !important;
}

.videoHint {
	text-align: left;
	font-style: italic;
}

.refPointPins2cols {
	width: 300px;
	height: 150px;
	column-count: 2;
	column-gap: 20px;
	overflow: hidden;
	padding: 10px;
	text-align: justify;
}

.mission2 {
	font-size: 80%;
	font-style: italic;
}

.readyingButtonsSeparator {
	vertical-align: 25%;
	display: inline-block;
}

.readyingButtons .fa-info-circle {
	margin-left: .5em;
}

.freeGamesExceeded {
	font-size: 150%;
	margin-bottom: 2em;
	padding-left: 6em;
	padding-right: 6em;
	text-align: left;
}

.sightingNotification {
	text-align: center;
	margin-bottom: 3em;
}

.unitDistancesTable td {
	padding: .5em;
	border-color: var(--ffmodecolor) !important;
}

.unitDistancesTable th {
	padding: .5em;
	text-align: center;
	border-color: var(--ffmodecolor) !important;
}

.unitDistancesTable {
	border-color: var(--ffmodecolor) !important;
}

#distancesTableNote {
	font-size: 150%;
	color: red;
	margin-bottom: 20em;
	margin-top: 4em;
}

.mapTooltip {
	font-size: 150%;
}

.topNavSecondRowButtons, #opponentRibbons {
	margin-bottom: 1em;
}

#option-buttons .btn-success {
	color: #fff;
	background-color: var(--ffmodecolor);
	border-color: #black;
}

::backdrop {
	opacity: 0.75;
}

.dialogContainer {
	border-color: var(--ffmodecolor);
	box-shadow: 0 0 10px rgba(0,0,0,0.25);
	border-radius: 8px;
	padding: 2em;
}

.dialogBody {
	margin-top: 1em;
	margin-bottom: 1em;
}

.dialogHeader {
	color: var(--ffmodecolor);
	text-align: center;
	border-bottom: 1px solid;
	border-color: var(--ffmodecolor);
}

.dialogFooter {
	border-top: 1px solid;
	border-color: var(--ffmodecolor);
	padding-top: 2em;
}

dialog tr:hover {
	background-color: #DDDDDD;
}

.missionOption {
	display: block;
}

.missionOptionIneligible {
	color: #888888;
}

#missionsDialog .dialogBody, #rehomeDialog .dialogBody {
	min-width: 500px;
	text-align: left;
	max-height: 20em;
	overflow-y: scroll;
	overflow-x: auto;
	white-space: nowrap;
}

.missionDialogToggleButton {
	margin-right: 1em;
}

.missionDialogWarning {
	max-width: 500px;
	color: red;
}

.carrierTFnum {
	font-size: 80%;
	color: #999999;
	margin-left: .5em;
}

#mapButtonContainer {
	margin-top: 1.5em;
}

#mapButtonContainer .btn {
	margin-right: 2em;
	margin-bottom: 2em;
}

.timeZone {
	color: #888888;
}

.btn-xs {
	padding: 0.25rem 0.4rem;
	font-size: 0.75rem;
	line-height: 1.5;
	border-radius: 0.2rem;
}

.table, .table thead, .table tbody, .table tr, .table th, .table td {
	background-color: var(--ffbgcolor);
}

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

#gameGlance a, #gameDetails a, #fieldsetsCasualties a, .helpTabLink, .helpArticleLink a {
	text-decoration: underline;
	color: var(--ffmodecolor);
}

#gameGlance a.btn {
	color: white;
	text-decoration: none;
}

fieldset {
	border: 1px solid var(--ffgrey);
	padding: 1.5em;
	position: relative;
	margin-bottom: 2em;
	overflow: visible !important;
}

fieldset ul:first-of-type, fieldset p:first-of-type {
	margin-top: 2em;
}

legend {
	float: none;
	width: auto;
	padding: 0 10px;
	margin-bottom: 0;
	position: absolute;
	top: -0.8em;
	left: 1em;
	color: var(--ffmodecolor);
	background-color: var(--ffbgcolor);
	font-size: 1em;
	font-weight: normal;
	display: inline-block;
}

.dialogHeader p {
	color: black;
}

.dialogHeader a {
	color: var(--ffmodecolor);
	text-decoration: underline;
}

.btn-secondary {
	background-color: #e9ecef !important;
	color: #212529 !important;
	border-color: #ced4da !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: #d6d8db !important;
	border-color: #c6c8ca !important;
}

.btn-info {
	background-color: #2c3e50 !important;
	color: #ffffff !important;
	border-color: #263645 !important;
}

.btn-info:hover,
.btn-info:focus {
	background-color: #1f2e3c !important;
	border-color: #1a2734 !important;
}

.btn-success {
	background-color: var(--ffmodecolor) !important;
	color: white !important;
	border-color: var(--ffmodecolor) !important;
}

.btn-success:hover,
.btn-success:focus {
	background-color: white !important;
	color: var(--ffmodecolor) !important;
	border-color: black !important;
}

.btn-danger {
	background-color: black !important;
	color: white !important;
	border-color: black !important;
}

.btn-danger:hover,
.btn-danger:focus {
	background-color: white !important;
	color: black !important;
	border-color: black !important;
}

.topNavSecondRowButtons button {
	margin-bottom: .5em;
}

.navFieldset {
	padding-right: 1em;
}

.flexContainer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5em;
}

.flexItem {
	flex: 1 1 24%;
	min-width: 180px;
}

.flexItem5 {
	flex: 1 1 19%;
	min-width: 180px;
}

.flexContainer ul:first-of-type, .flexContainer p:first-of-type, #sightingResponses p:first-of-type {
	margin-top: 0;
}

.disperseLabel {
	font-size: 150%;
	color: var(--ffmodecolor);
}

#Sightings {
	min-height: 600px;
	margin-left: 5em;
	margin-right: 5em;
	vertical-align: top;
	gap: 5em;
}

/*Fade units as they scroll under the header.*/
.fadeFieldset {
	transition: opacity 0.5s ease-out;
}

#whatsNewList li, #whatsRecentList li {
	margin-bottom: 1em;
}

#sightingResponses {
	max-height: 21em;
	overflow-y: auto !important;
}

#sightingResponses legend {
	position: unset;
}

.mapTooltip {
	font-size: 80%;
}

.reportDitchingButton {
	color: var(--ffmodecolor);
}

fieldset.MessageFieldset p:first-of-type {
	margin-top: 1.5em;
}