:root
{
	--main-background-color: #09154f;
	--dark-grey-background: #252525;
	--epidemic-green: #00a94f;
	--board-width-percentage: 80.5%;
	--button-background: #0e7aa8;
	--button-background-bright: #1799d1;
}
*
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	cursor: default;
}
html
{
	height: 100%;
	background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
html.blueGradient
{ background: linear-gradient(to bottom right, #054583, #072560, var(--main-background-color)) }
body
{
	font-family: 'Electrolize', sans-serif;
	color: #fff;
	font-size: 16px;
	
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */

	max-width: 1920px;
}
body:not(#index)
{
	min-width: 1024px;
	overflow-x: hidden;
	overflow-y: hidden;
}
input, select { background-color: #fff }
input[type='text'],
input[type='password']
{ cursor: text }
.text-green
{ color: var(--epidemic-green) }
#lobby {
	--lobby-padding: 30px;
	--lobby-full-width: 560px;
	--lobby-content-width: 480px;
	--lobby-control-border-radius: 4px;

	padding: var(--lobby-padding);
	padding-right: 0;
	background: transparent;
}
#lobby,
#lobby > .content .button
{ font-family: 'Ropa sans', sans-serif }
#header
{
	width: var(--lobby-full-width);
}
#header,
#lobby .tooltip,
#lobby .roleCard,
#btnPlay:not(.btnDisabled):hover,
#gameInProgress .button:not(.btnDisabled):hover
{ filter: drop-shadow(5px 5px 5px #000) }
#btnPlay:not(:hover),
#btnPlay:hover,
#gameInProgress .button:not(:hover),
#gameInProgress .button:hover
{ transition: filter .2s }
#header p { padding-bottom: 4px }
#header *
{ margin-left: var(--lobby-padding) }
#header > div
{
	background: linear-gradient(to right, var(--epidemic-green), #008D41);
	margin-left: calc(-1 * var(--lobby-padding));
	clip-path: polygon(0 0, var(--lobby-full-width) 0, calc(var(--lobby-padding) + var(--lobby-content-width)) 100%, 0 100%);
}
#header h1
{
	font-family: 'Audiowide', sans-serif;
	font-size: 40px;
}
#lobby #header,
#lobby form
{
	margin-bottom: var(--lobby-padding);
}
#lobby form > label, .button.inlineButton
{
	font-size: 20px;
}
#lobby input:not([type='radio']),
.inlineButton
{ height: 24px }
#lobby > .content > h1,
#lobby h2,
#lobby h3
{ font-weight: 400 }
#lobby .roleCard h3
{ font-weight: 700 }
#lobby > .content > h1,
#lobby h2
{ font-family: 'Audiowide' }
#lobby #warningsContainer
{
	display: inline-block;
	padding: 3px;
	background-color: var(--dark-grey-background);
	border: 2px solid rgb(204, 26, 29);
	border-radius: 8px;
	margin-top: var(--lobby-padding);
	max-width: 70%;
}
#lobby #warningsContainer h3
{ 
	font-size: 30px;
}
#lobby > .content > h1
{
	font-size: 30px;
}
#lobby > .content > p
{
	margin-bottom: calc(var(--lobby-padding)/2);
}
#lobby h2
{
	font-size: 22px;
	margin: calc(var(--lobby-padding)*2) 0 6px 0;
}
#lobby form:not(.inlineForm) > *:not(a)
{
	display: block;
}
#lobby a
{ display: inline-block }
#lobby form:not(.inlineForm) *:not(label)
{
	border-radius: var(--lobby-control-border-radius);
}
#lobby form:not(.inlineForm) input, #lobby form:not(.inlineForm) .button
{
	width: calc(var(--lobby-content-width)*0.5);
}
#lobby form:not(.inlineForm) label
{
	margin-top: 8px;
}
#lobby > .content .button:not(.inlineButton)
{
	font-size: 26px;
	line-height: 26px;
	height: 46px;
	overflow: visible;
	padding: 10px 0;
}
#btnLogIn,
#btnCreateAccount
{
	font-size: 26px;
	padding: 4px 0;
}
#btnLogIn,
#btnCreateAccount,
#btnForgotPassword,
#btnConfirmNewPassword
{
	margin: 16px 0 0 0;
}
.inlineForm,
.nowrap
{
	white-space: nowrap;
}
.inlineForm > *
{
	vertical-align: middle;
}
.inlineForm label { width: calc(var(--lobby-content-width) * 0.3) }
#lobby .validationError
{
	color: #ef282a;
	font-size: 16px;
}
.validationError::before
{
	content: "* ";
}
.inlineForm .validationError
{
	position: absolute;
	margin-left: calc(var(--lobby-content-width) * 0.3)
}
.inlineForm input[type='text']
{
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 0 2px;
	text-align: center;
}
#frmPasswordRecovery #txtEmailOrUsername
{ text-align: left }
.inlineForm .inlineButton
{
	display: inline-block;
	width: auto;
	padding: 2px 4px;
	margin-left: -3px;
	border-top-right-radius: var(--lobby-control-border-radius);
	border-bottom-right-radius: var(--lobby-control-border-radius);
}
.inlineForm .inlineButton:nth-last-of-type(2)
{
	margin-right: 3px;
	border-radius: unset;
}
.inlineForm .loadingGif
{
	display: inline-block;
	width: 23px;
	margin-bottom: -3px;
	margin-left: 2px;
}
.inlineForm .loadingGif img { width: 100%; padding: 0 }
#btnAttemptAccess img
{
	width: 32%;
	max-height: 100%;
}
#disclaimer { width: var(--lobby-content-width) }

#txtVerificationCode,
#btnVerify
{ width: 100px }
#resendCode .loadingGif
{
	width: 20%;
	text-align: left;
	margin-top: 5px;
}

.divInputControl
{
	display: block;
	margin-bottom: 32px;
}
.divInputControl label
{
	font-size: 18px;
}
#lobby .subtitle { font-size: 20px }
input[type='radio'] { margin: 10px 5px 0 0 }
#lobby .info
{
	font-size: 15px;
	margin-left: 8px;
}
select
{
	margin-left: 5px;
	border-radius: var(--lobby-control-border-radius);
}
#btnPlay,
#gameInProgress .button
{
	font-family: 'Audiowide', 'Ropa sans', sans-serif !important;
	width: var(--lobby-content-width);
	margin-left: 0;
	border-radius: var(--lobby-control-border-radius);
}
#lobby > .content .button .loadingGif
{
	width: 80%;
	margin-left: 10%;
	margin-top: 16px;
}
#lobby > .content .button .loadingGif img { width: 30px }
#lobby > .content .button.btnDisabled
{
	background-color: #0a597a;
	color: #aaa;
}
#gameInProgress { width: var(--lobby-content-width) }
#gameInProgress > div:not(.button)
{
	display: inline-block;
	vertical-align: top;
	margin: 15px;
	margin-left: 0;
}
#gameInProgress h3
{
	font-weight: 400;
	font-family: 'Audiowide', sans-serif;
	font-size: 22px;
	width: var(--lobby-content-width);
}
#gameInProgress > div > p
{
	font-size: 20px;
	margin-top: 5px;
	border-bottom: 2px solid #fff;
}
#lobby .roleTag
{
	padding: 2px 5px;
	margin-top: 5px;
}
#gameInProgress .roleTag
{
	display: inline-block;
	cursor: default;
}
#roleSelector .roleTag
{
	cursor: pointer;
	text-align: center;
}
#roleSelector
{
	width: var(--lobby-content-width);
	display: flex;
}
.roleBucket
{
	width: 50%;
}
.roleBucket:first-of-type
{
	border-right: 1px solid #fff;
	padding-right: 5px;
	margin-right: 5px;
}
#lobby .roleTag:hover { text-decoration: none }
#gameInProgress .button
{
	display: inline-block;
	width: 40%;
	font-size: 20px;
}
#btnResumeGame,
#btnConfirmAbandon,
#btnAbandon > .confirmationButton
{ margin-right: 2% }
#btnAbandonGame,
#btnAbandon > .confirmationButton
{ background-color: rgb(204, 26, 29) }
#btnAbandon > .confirmationButton:hover
{ background-color: #ef282a }

.smallText { font-size: 12px }
.largeText { font-size: 18px }
.whiteText { color: #fff !important }
.italics { font-style: italic }
.copyable
{
	-webkit-touch-callout: text; /* iOS Safari */
	-webkit-user-select: text;   /* Chrome/Safari/Opera */
	-khtml-user-select: text;    /* Konqueror */
	-moz-user-select: text;      /* Firefox */
	-ms-user-select: text;       /* Internet Explorer/Edge */
	
	cursor: text;
}
#container
{
	min-width: 1024px;
	max-width: 1920px;
}
html,
#curtain,
.veil,
.darkBlueBackground
{ background-color: var(--main-background-color) }
.centeredText { text-align: center }
#curtain
{
	position: fixed;
	width: 100%;
	height: 1080px;
	z-index: 50;
	padding: 5px;
}
#curtain *:not(#loading)
{ text-align: center }
#curtain h2,
#curtain h3,
#curtain h4,
#curtain label
{ font-family: 'Oswald', sans-serif }
#curtain h1 { font-size: 60px }
#curtain h2 { font-size: 26px }
#curtain h3,
#curtain h4
{ font-weight: 400 }
#curtain h3 { font-size: 16px }
#curtain .button
{
	width: 26%;
	padding: 1%;
	margin: 3% 37%;
	font-size: 20px;
}
#warningsContainer .button
{
	font-size: 30px;
	padding: 8px 0;
	margin-top: 10px;
}
#warningsContainer h4
{ font-size: 18px }
#warningsContainer label
{ font-size: 18px }

#fullscreenRecommendation
{
	z-index: 39;
	position: fixed;
	width: 100%;
	top: 36%;
	filter: drop-shadow(0px 0px 10px #fff);
	text-align: center;
	padding: 10px 0;
}
#fullscreenRecommendation h2
{ font-size: 30px }
#fullscreenRecommendation h3
{
	font-size: 24px;
	margin-bottom: 20px;
}
#fullscreenRecommendation label
{ font-size: 20px }
#fullscreenRecommendation .button
{
	width: 25%;
	margin: 0 37.5%;
	font-size: 28px;
	padding: 5px 0;
}

.pinpointRect,
.infectionRateHighlight,
.outbreaksHighlight,
.autoTreatCircle,
.autoTreatCureMarker,
#quarantineArea
{
	pointer-events: none;
}

.pinpointRect
{
	position: absolute;
	z-index: 1;
	border: 2px solid red;
}
#boardImg, #boardContainer
{
	position: absolute;
	width: var(--board-width-percentage);
}
#boardImg
{
	z-index: 0;
}
#boardContainer
{
	z-index: 1;
	font-size: 0;
	overflow: hidden;
	border-bottom: 1px solid #fff;
}
#boardContainer > div,
#boardContainer > .pawn,
#boardContainer > .researchStation,
#boardContainer > .diseaseCube
{ position: absolute }
#boardContainer > .diseaseCube.infecting,
#boardContainer > .diseaseCube.removing
{ z-index: 7 }

#travelPathArrowContainer
{
	position: relative;
	z-index: 6;
	opacity: 0.7;
	filter: drop-shadow(0px 0px 3px #fff);
	pointer-events: none;
}
#travelPathArrow.invalid { background-color: darkred !important }
#boardContainer > .pawn
{
	z-index: 4;
	width: 1.6%;
}
.pawn.ui-draggable:not(.ui-draggable-disabled) { cursor: grab }
.pawnArrow,
#resilientPopulationArrow,
#governmentGrantArrow
{
	width: 3%;
	background-color: transparent;
	z-index: 7;
	pointer-events: none;
}
.pawnArrow.dispatch { width: 2% }
.pawnArrow > div,
#resilientPopulationArrow > div,
#governmentGrantArrow > div
{
	width: 100%;
	height: 100%;
}
.pawnArrow > div,
#governmentGrantArrow > div
{
	clip-path: polygon(50% 30%, 100% 10%, 50% 100%, 0 10%);
}
.pawnArrow.dispatch > div { clip-path: polygon(50% 30%, 100% 10%, 50% 100%, 0 10%) }
#resilientPopulationArrow,
#governmentGrantArrow
{
	width: 4%;
	filter: drop-shadow(0px 0px 3px #fff);
}
#resilientPopulationArrow > div { clip-path: polygon(50% 0%, 100% 90%, 50% 70%, 0 90%) }
.researchStation
{
	z-index: 3;
	width: 3%;
}
.researchStation img
{
	width: 100%;
	pointer-events: none;
}
.researchStation.relocatable,
.grantStation
{
	cursor: grab;
}
.dragging,
.pawn.ui-draggable.dragging
{ cursor: grabbing }
.grantStation
{
	z-index: 6;
	opacity: 0.7;
}
.diseaseCube
{
	z-index: 5;
	background-color: transparent !important;
}
.cubeToRemove
{
	cursor: pointer;
	z-index: 6;
}
.diseaseCube *
{
	width: 100%;
	height: 100%;
	margin-bottom: -100%;
	pointer-events: none;
}
.cubeSlash, .cubeBackground { background: #fff }
.diseaseCube.y .cubeSlash, .diseaseCube.y .cubeBackground { background: #000 }
.cubeSlash { clip-path: polygon(6% 0, 0 6%, 45% 50%, 0 94%, 6% 100%, 50% 56%, 94% 100%, 100% 94%, 56% 50%, 100% 6%, 94% 0, 50% 44%) }
.cubeBackground { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) }
.cubeTop { clip-path: polygon(50% 4%, 94% 25%, 50% 48%, 6% 25%) }
.cubeLeft { clip-path: polygon(4% 74%, 48% 96%, 48% 52%, 4% 28%) }
.cubeRight { clip-path: polygon(96% 74%, 52% 96%, 52% 52%, 96% 28%) }

.diseaseCube.y .cubeTop,
.diseaseCube.y .cubeRight,
.diseaseCube.y .cubeLeft
{ background: #fded3c }
.yBorder { border: 2px solid #fded3c }
.diseaseCube.r .cubeTop,
.diseaseCube.r .cubeRight,
.diseaseCube.r .cubeLeft
{ background: #ef282a }
.rBorder { border: 2px solid #ef282a }
.diseaseCube.u .cubeTop,
.diseaseCube.u .cubeRight,
.diseaseCube.u .cubeLeft
{ background: #405fb1 }
.uBorder { border: 2px solid #405fb1 }
.diseaseCube.b .cubeTop,
.diseaseCube.b .cubeRight,
.diseaseCube.b .cubeLeft
{ background: #212121 }
.bBorder { border: 2px solid #000 }

.groupInfRate .diseaseCube
{
	vertical-align: middle;
	display: inline-block;
	width: 9%;
	margin-right: 4%;
}
.diseaseCube.w * { background-color: #fff }
.diseaseCube.w .cubeBackground { background-color: #000 }

.hidden,
#btnCancelAction.hidden
{ display: none !important }
.y:not(.diseaseCube)
{
	background: linear-gradient(to right,
		#cab900,	
		#fded3c,
		#fded3c,
		#cab900);
	color:black;
}
.u:not(.diseaseCube)
{
	background: linear-gradient(to right,
		#3254af,	
		#405fb1,
		#405fb1,
		#3254af)
}
.b:not(.diseaseCube)
{
	background: linear-gradient(to right,
		#0e0e0e,	
		#212121,
		#212121,
		#0e0e0e)
}
.r:not(.diseaseCube):not(span)
{
	background: linear-gradient(to right,
		#b10e10,	
		#ef282a,
		#ef282a,
		#b10e10)
}
.white{background-color:#fff}
.black{background-color:#000}
.epidemic:not(.substep),
.epidemicFull,
#fullscreenRecommendation
{
	background: linear-gradient(to right,
		#007738,	
		var(--epidemic-green),
		var(--epidemic-green),
		#007738)
}
.lightGreen { color: var(--epidemic-green) }
.lightGreenBackground { background-color: var(--epidemic-green) }
.darkGreenBorder { border: 2px solid #01863f }
.researchStationBackground { background-color: #e9cf94 }
span.r, p.r {color: #ef282a; background: none !important }
.eventCard,
.eventCardFull
{
	background: linear-gradient(30deg, 
		gray,
		#fff,
		gray,
		#fff,
		gray,
		#fff,
		gray,
		#fff,
		gray);
	color: #000;
}
.eventCard.unavailable:active { background: #8a181a }

#boardContainer > .eventCardFull,
#contingencyWrapper
{ width: 18% }
.eventCardFull
{
	padding-bottom: 3px;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	overflow: hidden;
}
.eventCardFull h5
{
	display: inline;
	font-size: 12px;
	font-weight: 400;
	padding: 5px 2px 2px 2px;
	background-color: #000;
	color: #fff;
	border-bottom-right-radius: 5px;
}
.eventCardFull h3 { padding-bottom: 5px }
.eventCardFull img { border-top: 2px solid #000 }
.eventCardFull img,
.eventCardFull > p:first-of-type
{ border-bottom: 2px solid #000 }
.eventCardFull > p { padding: 2px 5px }
.eventCardFull > p:first-of-type
{
	background-color: #000;
	color: #fff;
	text-align: center;
	padding: 0;
	margin-bottom: 3px;
}
#contingencyWrapper
{
	padding: 8px;
	padding-top: 2px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
#contingencyWrapper > h2
{
	font-size: 16px;
	color: #000;
}
#contingencyWrapper > .eventCardFull
{
	width: 100%;
	border: 1px solid #fff;
}
.pawnArrow.airlift > div,
.airlift:not(.pawnArrow),
#resilientPopulationArrow > div,
#governmentGrantArrow > div,
.eventArrow
{
	background: linear-gradient(to bottom right, 
		#fff,
		gray,
		#fff,
		gray,
		#fff,
		gray,
		#fff,
		gray) !important
}

#topPanel,
.bottomPanelDiv:not(#cureMarkerContainer)
{
	background-color: var(--dark-grey-background);
}
#topPanel > div
{
	display: inline-block;
	vertical-align: top;
}

#eventHistoryContainer
{
	width: 27.5%;
	z-index: 2;
}
#eventHistoryContainer > div:not(#undoingIndicator)
{
	display: inline-block;
	vertical-align: top;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}
#eventHistory { background-color: var(--dark-grey-background) }
.eventHistoryButton
{
	width: 6%;
	background-color: #0c658b;
	text-align: center;
}
.eventHistoryButton img
{
	width: 100%;
	height: 100%;
}
.eventHistoryButton.btnDisabled img
{ opacity: 0.5 }
#btnUndo
{
	width: 9%;
	border-right: 1px solid #fff;
}
#undoingIndicator
{
	text-align: right;
	font-family: 'Ropa sans', sans-serif;
	font-size: 18px;
}
#undoingIndicator > *
{
	margin-top: 2%;
	vertical-align: bottom;
}
#undoingIndicator img
{
	width: 9%;
}
.eventHistoryButton:hover
{
	cursor: pointer;
	background-color: #1282b3;
}
.eventHistoryButton.btnDisabled { background-color: #064058 }
.eventHistoryButton.btnDisabled:hover
{
	cursor: default;
	background-color: #064058 !important;
}
#eventHistory
{
	width: 79%;
	white-space: nowrap;
	overflow: hidden;
	border-top: none;
	border-bottom: none;
}
#eventHistory > div
{
	display: inline-block;
	width: 15%;
	height: 99%;
	margin: 1px;
	margin-left: 0;
	border-radius: 20%;
	overflow: hidden;
}
#eventHistory img
{
	width: 100%;
	height: 100%;
}
.tooltip > .content
{
	background-color: var(--dark-grey-background);
	padding: 4px;
}
.tooltip  p { margin: 4px 0 }
.tooltip .warning { font-size: 22px; vertical-align: super; }

.eventTypeTooltip
{
	pointer-events: none;
}
.eventTypeTooltip h3,
.eventDetails .title
{
	font-family: 'Exo 2', sans-serif;
	font-size: 18px;
}
.eventTypeTooltip .actionNotPossible
{
	color: #666;
	text-align: center;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	padding: 1px 0;
}
.eventTypeTooltip p
{
	margin-top: 3px;
}
.eventTypeTooltip h3 + p
{
	border-top: 1px solid #fff;
	padding-top: 5px;
}
.eventTypeTooltip .specialAbilityRule
{
	margin-top: 10px;
	border-top: 1px dashed #fff;
	padding-top: 5px;
}
.eventDetails
{
	font-size: 16px;
	background-color: transparent;
}
.eventDetails .title
{
	text-align: center;
	border-bottom: 1px solid #fff;
	margin: -2px 0 3px 0;
}
.eventDetails  .title > .eventTypeInfo
{
	float: right;
	font-size: 13px;
	line-height: 18px;
	margin-left: 5px;
}
.eventDetails  .title > .eventTypeInfo:hover,
.info:hover,
.whiteTextShadow
{ text-shadow: 0px 0px 3px #fff }
.eventDetails .playerCard
{
	margin: 2px 0;
	width: 100%;
}

.eventDetails .cubes { white-space: nowrap }
.eventDetails .diseaseCube
{
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 3px;
	margin-bottom: 3px;
}
.eventDetails .cubes > * { vertical-align: middle }
.eventDetails .locatable:hover { text-decoration: underline }
.eventDetails .infectionCard
{
	font-size: 14px;
	margin-bottom: 6px;
}
.eventDetails .infectionCard .cityName
{
	margin-top: 3px;
	white-space: nowrap;
	margin-left: 20%
}

.eventDetails .column
{
	display: inline-block;
	vertical-align: top;
}
.eventDetails .column:first-of-type { width: 80% }
.eventDetails .column:last-of-type
{
	padding-left: 2px;
	width: 20%;
	overflow: visible;
}
.eventDetails .column:last-of-type p:first-of-type { border-bottom: 1px solid #fff }
.eventDetails .hand { padding: 4px 0 }
.eventDetails .populationRank
{
	font-size: 22px;
	position: absolute;
}

.indent-1,
.eventTypeTooltip li
{ margin-left: 12px }
.indent-2 { margin-left: 30px }

#cureMarkerContainer
{
	width: 20.3%;
	left: 29.8%;
	border: none;
}
#cureMarkerContainer .title
{
	font-family: 'Oswald', sans-serif;
	font-size: 19px;
	border-bottom: 1px solid var(--epidemic-green);
}
#cureMarkerContainer .infoContainer
{
	display: block;
	margin-bottom: -3px;
}
#cureMarkerContainer .info
{
	font-size: 11px;
	vertical-align: text-bottom;
}
.cureMarker
{
	position: absolute;
	width: 6%;
	z-index: 2;
}
#cureMarkerY { margin-left: 29.65% }
#cureMarkerR { margin-left: 34.65% }
#cureMarkerU { margin-left: 39.64% }
#cureMarkerB { margin-left: 44.2% }
.bottomPanelDiv
{
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	z-index: 2;
}
#researchStationSupplyContainer
{
	width: 16%;
	left: 52%;
}
#researchStationSupplyContainer .title
{
	margin-bottom: 6px;
}
#researchStationSupplyContainer > *:not(.title)
{
	vertical-align: middle;
}
#researchStationSupplyContainer .researchStation
{
	display: inline-block;
	width: 20%;
	margin-left: 5%;
	margin-top: -2px;
}
#researchStationSupplyCount
{
	display: inline-block;
	color: #fff;
	font-size: 18px;
	margin-left: 31.5%;
}

.noGlow { transition: filter 0.3s }
.smallGlow,
.mediumGlow,
.bigGlow
{ transition: filter 0.5s }
.noGlow { filter: drop-shadow(0px 0px -1px #fff) }
.smallGlow { filter: drop-shadow(0px 0px 2px #fff) }
.mediumGlow { filter: drop-shadow(0px 0px 6px #fff) }
.bigGlow { filter: drop-shadow(0px 0px 10px #fff) }

.warning-mild-bigGlow { filter: drop-shadow(0px 0px 6px yellow) }
.warning-mild-smallGlow { filter: drop-shadow(0px 0px 2px yellow) }
.warning-mild-bigGlow,
.warning-mild-smallGlow
{ transition: filter 1s }
.warning-moderate-bigGlow { filter: drop-shadow(0px 0px 8px orange) }
.warning-moderate-smallGlow { filter: drop-shadow(0px 0px 3px orange) }
.warning-moderate-bigGlow,
.warning-moderate-smallGlow
{ transition: filter .5s }
.warning-critical-bigGlow { filter: drop-shadow(0px 0px 10px red) }
.warning-critical-smallGlow { filter: drop-shadow(0px 0px 4px red) }
.warning-critical-bigGlow,
.warning-critical-smallGlow
{ transition: filter .25s }

#playerDeckContainer
{
	width: 14%;
	left: 68%;
	z-index: 8;
}
#playerDeckContainer img
{
	width: 40%;
	margin: 2% 30%;
}
#playerDiscardContainer
{
	width: 18%;
	left: 82%;
	z-index: 7;
}
#removedPlayerCards
{
	border-top: 1px solid #fff;
	margin-top: 10px;
}
#topPanel
{
	width: 36%;
	left: 44%;
	overflow-y: hidden;
}
#topPanel > div
{
	padding-bottom: 2px;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}
#topPanel .title, #infectionDiscardContainer .title, .bottomPanelDiv .title
{
	font-size: 13px;
	text-align: center;
	padding-top: 3px;
	border-bottom: 1px solid #fff;
}
#cubeSupplies { width: 56% }
#topPanel .info,
.bottomPanelDiv .info
{
	font-size: 11px;
	line-height: 13px;
	vertical-align: text-top;
}
.cubeSupply
{
	display: inline-block;
	width: 25%;
}

.cubeSupply p, #researchStationSupplyCount
{
	font-family: 'B612 Mono', monospace;
}
.cubeSupply p
{
	font-size: 15px;
	text-align: center;
	margin-top: -3px;
}
.cubeSupply .diseaseCube
{
	width: 64%;
	margin: 0 18%;
}
#infectionDeckContainer { width: 44% }
#infectionDeckContainer img
{
	position: relative;
	z-index: 4;
	width: 36%;
	border-radius: 100%;
	margin: 1.5% 32% 0.5% 32%;
}
#infectionDiscardContainer
{
	position: absolute;
	left: 80%;
	width: 20%;
	background-color: var(--dark-grey-background);
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	overflow: hidden;
	z-index: 9;
}
#removedInfectionCards
{
	margin-top: 10px;
	border-top: 1px solid #fff;
}

#infDiscardVeil
{
	position: absolute;
	background-color: var(--dark-grey-background);
	z-index: 10;
}
.infDiscardCardback, .forecastCardback
{
	position: absolute;
	width: 10.6%;
	opacity: 0.1;
}
.drawnInfectionCard, .infDiscardCardback, .forecastCardback { pointer-events: none }
.drawnInfectionCard, .drawnPlayerCard { position: absolute }
.drawnPlayerCard { z-index: 2 }
.marker { position: absolute }
.marker > img { width: 100% }
#infectionRateMarker
{
	top: 18.4%;
	left: 63.96%;
	width: 3.15%;
}
.infectionRateHighlight, .outbreaksHighlight
{
	position: absolute;
	background-color: #000;
	z-index: 10;
	opacity: 0.5;
}
.infectionRateHighlight.top
{
	width: 100%;
	height: 17.8%;
}
.infectionRateHighlight.right
{
	top: 17.8%;
	height: 9.6%;
	left: 89.5%;
	width: 10.5%;
}
.infectionRateHighlight.left
{
	top: 17.8%;
	height: 9.6%;
	width: 63.6%;
}
.infectionRateHighlight.bottom
{
	width: 100%;
	top: 27.4%;
	height: 72.6%;
}
#outbreaksMarker
{
	top: 54.4%;
	left: 2.8%;
	width: 3%;
}
#outbreaksMarker img { transform: rotate(45deg) }
.outbreaksHighlight.top
{
	width: 100%;
	height: 50.4%;
}
.outbreaksHighlight.right
{
	top: 50.4%;
	height: 49.6%;
	left: 10.3%;
	width: 89.7%;
}
.outbreaksHighlight.bottom
{
	top: 95%;
	height: 5%;
	width: 10.3%;
}
#outbreaksTrackHighlight
{
	position: absolute;
	z-index: 10;
	background-color: #8a181a;
	top: 50.4%;
	width: 10.3%;
	height: 44.6%;
}

#rightPanel,
#sideMenu,
#sideMenuTitle,
.infectionCardContents
{ width: 19.5% }
#rightPanel
{
	float: right;
	border-left: 1px solid #fff;
}
#rightPanel .tooltip
{ max-width: 180px }
.scrollable { overflow-y: scroll }
#indicatorContainer
{
	padding: 1px 0;
	background-color: #353535;
	border: none;
	overflow: hidden;
}
#indicatorContainer span:not(.roleTag, .disabled) {margin-left: 15px;}
#indicatorContainer
{
	text-align: center;
}
#indicatorContainer > * { margin-bottom: 1px }
#roleIndicator
{
	font-weight: 700;
	font-size: 16px;
	padding-bottom: 2px;
}
#stepIndicator { font-size: 14px }
#stepIndicator .info
{
	font-size: 11px;
	float: left;
	margin-left: 5px;
}
#stepIndicator .info + span { margin-left: -14px }
#stepIndicator .eventCardInfo { font-size: 12px }
#roleIndicator,
.playerPanel .role
{ font-family: 'Oswald', 'Electrolize', sans-serif }

.action:not(.step), .destination
{
	display: block;
	padding: 5px;
	border: 1px solid #4ec6e1;
	border-top: none;
}
.infectionStatus
{
	padding: 5px 0;
	text-align: center;
	background-color: var(--dark-grey-background);
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}
.infectionStatus p:first-of-type{font-size: 22px;}
.groupInfRate
{
	display: inline-block;
	width: 100%;
	margin: 8px 0;
	padding: 0;
}
.infectionCard
{
	width: 100%;
	margin-bottom: 5px;
}
#infectCitiesContainer > .infectionCard,
#infectCitiesContainer > .btnContinue
{ margin-top: 20px }
.infectionCardContents { position: relative }
.infectionCard *
{
	position: absolute;
	pointer-events: none;
}
.infectionCardImg
{
	width: 100%;
}
.cityName
{
	margin-left: 20%;
	color: #000;
	font-family: 'Audiowide', 'Electrolize', sans-serif;
	font-weight: 700;
	transition: background-color .4s;
}
.cityName.concealed
{ color: var(--main-background-color) }
#forecastCards .cityName.concealed
{ color: var(--dark-grey-background) }

.veil
{
	width: 89.52%;
	left: 10.48%;
	z-index: 5;
	margin-top: -2px;
}
#infectionDiscardContainer .infectionCard
{
	display: block;
	padding-left: 1%;
	width: 100%;
	margin-top: 2px;
}
#infectionDiscardContainer .infectionCardContents { width: 100% }
#epidemicContainer > .epidemicFull
{
	width: 98%;
	overflow: hidden;
}
#boardContainer > .epidemicFull
{
	width: 24%;
	pointer-events: none;
}
#boardContainer > .epidemicFull > div
{ background: transparent }
.epidemicFull h2
{
	font-size: 16px;
	text-align: center;
	padding: 3px 0;
	border-bottom: 2px solid #fff;
}
.epidemicFull.pending h2 { border-bottom: none }
.epidemicFull > div
{
	padding: 6px 10px;
	background-color: #007034;
	transition: background-color 0.5s;
}
.epidemicFull > div.highlighted
{
	background-color: var(--epidemic-green);
	transition: background-color 0.5s;
}
.epidemicFull h3 { font-size: 14px }
.epidemicFull h3 > * { vertical-align: middle }
.epidemicFull h3 img
{
	width: 16px;
	margin-left: 8px;
}
#epidemicContainer .epidemicFull > div:not(.highlighted) h3
{
	color: rgb(189, 189, 189);
}
.epidemicFull p
{
	font-size: 10px;
	font-weight: 700;
	padding: 3px 0 0 12px;
	color: yellow;
}
#epidemicContainer .epidemicFull > div:not(.highlighted) p { color: rgb(172, 172, 1) }
#playerPanelContainer
{
	width: 44.3%;
}
.playerPanel
{
	vertical-align: top;
	margin-right: 0.75%;
	color: #fff;
	text-align: center;
	border: 1px solid #fff;
	border-top: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: #353535;
	overflow: hidden;
	position: relative;
	z-index: 6;
}
.playerPanel-2 { width: 49.1% }
.playerPanel-2 .role
{ font-size: 16px }
.playerPanel-3 .role
{ font-size: 14px }
.playerPanel-3 { width: 32.4% }
.playerPanel-4 { width: 24.1% }
.playerPanel-4 .role { font-size: 14px }
#playerPanelContainer .playerPanel:not(.hidden) { display: inline-block }
.playerPanel.transparent { opacity: 0.4 }
.playerPanel.transparent:hover,
.playerPanel.transparent.collapsed{ opacity: 1 }
.transparent,
.playerPanel:not(.transparent)
{ transition: opacity 0.4s }

.name, .role
{
	width: 100%;
	padding-top: 1px;
	padding-bottom: 2px;
}
.name
{
	font-family: 'Ropa Sans', sans-serif;
	font-size: 12px;
	line-height: 14px;
}
.role
{
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.role *:not(.playerCard.eventCard.contingency)
{
	pointer-events: none;
	line-height: 24px;
}
.btnCollapseExpand
{
	background-color: #353535;
}
.btnCollapseExpand > .numCardsInHand
{
	font-size: 11px;
	font-family: 'Ropa Sans', sans-serif;
	padding: 1px 0;
}
.btnCollapseExpand > div
{
	font-family: 'Times New Roman', Times, serif;
	font-size: 18px;
	line-height: 9px;
	
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg); /* Safari */
	-moz-transform: rotate(-90deg); /* Firefox */
	-ms-transform: rotate(-90deg); /* IE */
	-o-transform: rotate(-90deg); /* Opera */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
}
.btnCollapseExpand > *
{
	pointer-events: none;
}
.btnCollapseExpand:hover
{
	background-color: #444;
	cursor: pointer;
}
.playerCard,
.epidemicFull > h2,
.eventCardFull > h3
{ font-family: 'Audiowide', 'Electrolize', sans-serif; }
.playerCard
{
	width: 98%;
	text-align: center;
	white-space: nowrap;
	margin: 2px 1%;
	border: none;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	font-size: 10px;
	overflow: hidden;
}
.playerCard:not(.b):not(.eventCard):not(.epidemic):not(.template):not(.notLocatable),
.infectionCard:not(.template):not(.notLocatable),
.playerPanel .role.locatable *:not(.eventCard),
#roleIndicator,
.roleTag
{ cursor: url("../images/target_black.png"), auto }

.playerCard.b:not(.notLocatable),
.eventDetails .locatable { cursor: url("../images/target_white.png"), auto }

.playerCard:not(.b):not(.eventCard):not(.epidemic):not(.template):not(.notLocatable):hover,
.infectionCard:not(.template):not(.notLocatable):hover .cityName,
.playerPanel .role.locatable *:not(.eventCard):hover,
#roleIndicator:hover,
.roleTag:not(.playerOption):hover,
.playerCard.b:not(.notLocatable):hover,
.eventDetails .locatable:hover
{ text-decoration: underline; }

.playerCard * { pointer-events: none }
.playerPanel > .playerCard:first-of-type { margin-top: 4px }
.playerPanel .playerCard.eventCard:not(.unavailable) { cursor: pointer }
#cardDrawContainer .button,
#infectCitiesContainer .button
{
	margin-bottom: 5px;
}
#cardDrawContainer .playerCard
{
	width: 98%;
	height: 24px;
	line-height: 24px;
	font-size: 16px;
	padding-top: 1px;
	font-weight: 700;
	overflow: hidden;
}
#cardDrawContainer .playerCard,
.epidemicFull
{
	margin: 20px 1%;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
#cardDrawContainer > h2
{
	font-family: 'Oswald', 'Electrolize', sans-serif;
	font-size: 28px;
	text-align: center;
}
.discardPrompt { padding: 5px 5% }
.cardsToKeep .instructions
{
	font-size: 12px;
	margin: -2px 0 3px 0;
	padding: 0 0 3px 0;
	border-bottom: 1px solid #fff;
}
.discardPrompt p span
{
	float: right;
	padding: 0 2px;
}
.discardPrompt .playerCard:not(.locatable),
#discardStepContainer .playerCard
{
	margin-bottom: 2px;
	cursor: pointer !important;
}
.cardsToKeep > p
.discardSelections > p
{
	margin: 0 2% 3px 2%;
}
.discardPrompt .discardSelections
{
	width: 100%;
	margin: 0;
	padding: 0;
	min-height: 30px;
}
.discardSelections .specialAbilityTag { width: 96% }
.discardPrompt .cardsToKeep
{
	min-height: 85px;
	padding-bottom: 3px;
}
.cardsToKeep .playerCard:last-of-type { margin-bottom: 0 !important }
.btnConfirm { margin: 10px 0 5px 0 }
.scientist:not(.pawnArrow),
.pawnArrow.scientist > div
{
	background-image: linear-gradient(to bottom, #f6f6f7, #9ccdd1);
	color: #000;
}
.roleCard.scientist{ background-image: linear-gradient(to top, #f6f6f7, #9ccdd1) }
.scientistBorder { border: 2px solid #f6f6f7 }

.researcher:not(.pawnArrow),
.pawnArrow.researcher > div
{ background-image: linear-gradient(to bottom, #966c4b, #2a2017) }
.researcherBorder { border: 2px solid #574319 }

.quarantineSpecialist:not(.pawnArrow),
.pawnArrow.quarantineSpecialist > div
{ background-image: linear-gradient(to bottom, #398044, #043d0a) }
.quarantineSpecialistBorder { border: 2px solid #006951 }

.operationsExpert:not(.pawnArrow),
.pawnArrow.operationsExpert > div,
#btnOperationsFlight
{ background-image: linear-gradient(to bottom, #aad37a, #407f48) }
.operationsExpertBorder { border: 2px solid #8dc73f }

.medic:not(.pawnArrow),
.pawnArrow.medic > div,
.autoTreatCircle
{ background-image: linear-gradient(to bottom, #ffb55c, #c56023) }
.autoTreatCircle
{
	position: absolute;
	clip-path: circle();
	opacity: 0;
	z-index: 1;
}
.medicBorder { border: 2px solid #f68426 }

.dispatcher:not(.pawnArrow),
.pawnArrow.dispatcher > div,
.pawnArrow.dispatch > div,
.dispatch:not(.pawnArrow),
#btnDispatchPawn
{ background-image: linear-gradient(to bottom, #ec84b5, #964967) }
.dispatcherBorder { border: 2px solid #ec84b5 }

.contingencyPlanner:not(.pawnArrow),
.pawnArrow.contingencyPlanner:not(.dispatch) > div,
#btnPlanContingency,
#contingencyWrapper
{ background-image: linear-gradient(to bottom, #76d9da, #0b6f90) }
.role.contingencyPlanner > .playerCard
{
	font-family: 'Audiowide', 'Electrolize', sans-serif;
	border: 1px solid #fff;
}
.contingencyPlannerBorder { border: 2px solid #67c8c6 }

.roleCard
{
	width: 20%;
	border-radius: 8px;
}
#lobby .roleCard
{ width: 16% }
.roleCard,
#boardContainer > .eventCardFull,
#boardContainer > .epidemicFull,
#contingencyWrapper,
.tooltip
{
	position: absolute;
	z-index: 12;
	filter: drop-shadow(0px 0px 6px #000);
	font-family: 'Electrolize', sans-serif;
	font-size: 12px;
	max-width: 30%;
}
.tooltip:not(.hoverableTooltip)
{ pointer-events: none }
.roleCard,
.eventCardFull
{ font-size: 14px }
.roleCard h3
{
	margin-top: 8px;
	padding: 2px 0;
	background-color: #fff;
	color: #000;
}
.roleCard h3,
.eventCardFull h3
{
	font-size: 14px;
	text-align: center;
}
.rolePortrait { border-bottom: 2px solid #fff }
.rolePortrait,
.eventCardFull img
{
	display: block;
	width: 100%;
}
.roleCard ul,
.eventCardFull h5,
.eventCardFull p { font-family: 'Ropa Sans', sans-serif }
.roleCard ul
{
	list-style: inside;
	padding: 4%;
	padding-left: 14%;
}
.roleCard li
{
	text-indent: -12%;
	padding-bottom: 5px;
}
.roleCard li span
{
	position: relative;
	left: -5%;
}
.button
{
	width: 80%;
	text-align: center;
	font-family: 'Exo 2';
	font-size: 14px;
	padding: 3px;
	margin-left: 10%;
	background-color: var(--button-background);
	cursor: pointer;
}
.button:not(.btnDisabled):active,
.eventHistoryButton:not(.btnDisabled):active
{
	background-color: #046f9c;
}
#cardDrawContainer .button,
#infectCitiesContainer .button,
#epidemicContainer .button
{
	margin-top: 12.5%;
	font-family: 'Exo 2', sans-serif;
	font-size: 18px;
}

.button-secondary-color { background-color: var(--button-background-bright) }
.button.flashing,
.button-secondary-color { transition: background-color 0.6s }

.button:not(.btnDisabled):not(.materialButton):hover,
.button:not(.btnDisabled):not(.materialButton):focus,
.btnSkip:hover,
#btnUndo:hover
{ background-color: var(--button-background-bright) }
.button:not(.flashing),
.button:hover,
.btnSkip:hover,
#btnUndo:hover
{ transition: background-color 0.2s }
.button * { pointer-events: none }
.disabled, .btnDisabled, .scientist.button.btnDisabled
{
	color: #777;
}
.btnDisabled
{
	background-color: #064058;
	cursor: default;
}
.btnDisabled:hover,
.btnDisabled:focus
{ background-color: #064058 }

.loadingGif
{
	display: block;
	text-align: center;
}
.loadingGif img { width: 8% }
.actionCategory h2
{
	font-size: 12px;
	margin: 3px 0 0 2px;
}
.actionButton,
.actionPromptOption
{
	width: 100%;
	margin: 0 0 2px 0;
	padding: 0;
	font-family: 'Exo 2', sans-serif;
	font-size: 18px;
}
.actionCategory > .btnDisabled
{ cursor: default }
.actionButton * { display: inline-block }
.actionButton *:not(.actionInfo)
{
	vertical-align: middle;
	pointer-events: none;
}
.actionButton > .actionIcon
{
	width: 16.5%;
	padding: 2px 0;
	margin: 0 2%;
}
.actionIcon img
{
	width: 96%;
	padding: 0 2%;
	border-radius: 15%;
}
.actionIcon img[src='../images/loading.gif'] { background-color: #0d2c5b }
.actionName
{
	width: 66%;
	font-size: 16px;
	text-align: left;
}
.actionInfo
{
	width: 5%;
	margin: 0 2%;
	font-size: 11px;
	pointer-events: all;
}
.actionButton:not(.btnDisabled) .actionInfo:hover
{
	color: #000;
	cursor: pointer;
}
.btnDisabled .actionInfo:hover { color: #fff }

.specialAbilityRule::before
{
	content: "* ";
}
.button.scientist .specialAbilityRule
{
	color : #000;
	border-color: #000;
}
#actionPrompt,
#discardStepContainer > .discardPrompt
{ background: linear-gradient(to bottom, var(--main-background-color), #054583, var(--main-background-color)) }
#actionPrompt { padding-bottom: 5px }
.actionTitle { padding: 1px 5px; }
.actionTitle *
{
	display: inline-block;
	vertical-align: middle;
	filter: drop-shadow(0px 0px 5px var(--button-background-bright));
}
.actionTitle > h2
{
	width: 80%;
	font-size: 18px;
	font-family: 'Exo 2', sans-serif;
	padding-left: 2%;
}
.actionTitle > .actionIcon
{
	width: 20%;
	border-radius: 15%;
}
.actionTitle + .instructions { border-top: 2px solid #fff }
#actionInterface { font-family: 'Ropa Sans', sans-serif }
#actionInterface > .rules
{
	padding: 5px 2% 0 2%;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
#actionInterface > .rules,
#actionInterface > .instructions,
.shareableCards
{
	font-size: 14px;
}
#actionInterface > .rules > p
{
	text-align: left;
	padding: 0 1%;
	margin-bottom: 5px;
}
.rules > p.specialAbilityRule
{
	border-top: 1px dashed #fff;
	padding-top: 7px !important;
}
#actionInterface > .rules li { margin-left: 3% }
#actionInterface > .playerCard { cursor: pointer }
#actionInterface > .instructions 
{
	padding: 3%;
	padding-bottom: none;
}
#actionInterface > .instructions + .discardSelections { margin-top: -2.5% }
#actionInterface .eventCardFull + .instructions { text-align: center }
#actionPrompt .playerCard
{
	font-size: 14px;
	width: 94%;
	margin: 0 3% 1px 3%;
}
#actionInterface > .playerCard
{ margin-bottom: 5px }
#actionPrompt .eventCardFull
{
	display: inline-block;
	width: 90%;
	margin: 3px 5%;
	font-size: 12px;
}
.discardPrompt .playerCard { margin-bottom: 5px; }
.actionPromptOption
{
	font-size: 16px;
	margin-bottom: 5px;
	padding: 2px 0;
}
#btnCancelAction
{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: 'Exo 2';
	font-size: 11px;
	cursor: pointer;
}
#btnCancelAction > * { vertical-align: middle }
#btnCancelAction span:first-of-type
{
	font-size: 15px;
	font-weight: 700;
	margin: 0 6.5%;
}
#actionInterface .diseaseCube
{
	display: inline-block;
	width: 25%;
	margin-left: 5%;
	cursor: pointer;
}
#actionInterface .diseaseCube.disabled { pointer-events: none }
.actionInterfaceDivision
{
	text-align: center;
	font-size: 18px;
	padding: 20px 0 7px 0;
	width: 100%;
	margin-top: 10px;
	border: none;
	background-color: var(--main-background-color) !important;
	filter: drop-shadow(0px 0px 3px #fff);
}
.actionInterfaceDivisionLine
{
	width: 96%;
	height: 1px;
	background-color: #fff;
	z-index: 1;
	margin: 0 2% -17px 2%;
}
.actionInterfaceDivision h2
{
	z-index: 2;
	background-color: var(--main-background-color) !important;
	width: 17%;
	margin-left: 41.5%;
	font-family: 'Exo 2', sans-serif;
	font-size: 26px;
}
.actionInterfaceDivision + .discardSelections { margin-top: 3% }
.diseaseColorOption
{
	display: inline-block;
	margin: 2px;
	height: 50px;
	width: 50px;
	border: 2px solid #fff;
}

.shareableCards
{
	width: 94%;
	margin: 0 3%;
	padding: 5px 1%;
	background-color: #353535;
}
.actionInterfaceDivision + .shareableCards { margin-top: 10px }

.shareableCards > p
{
	border-bottom: 1px solid #494949;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.shareableCards .playerCard { cursor: pointer !important }
.btnRelocateStation
{
	width: 98%;
	margin: 1%;
}
.btnRelocateStation img
{
	width: 20px;
	float: left;
	margin: -2px -30px 0 10px;
}

.shareableCards p
{
	text-align: center;
}

.roleTag
{
	padding: 1px 3px;
	border-radius: 3px;
	white-space: nowrap;
}
.playerOptions { padding: 0 3%; }
.playerOptions .roleTag
{
	display: block;
	text-align: center;
	border-radius: 0;
	margin-bottom: 5px;
	cursor: pointer;
}
.specialAbilityTag
{
	text-align: center;
	margin: 0 3%;
	padding: 2px;
	border-radius: 3px;
}
.hoverInfo:not(.concealed)
{
	font-family: sans-serif;
	font-weight: 700;
	border-bottom: 1px dashed #67acc8;
	white-space: nowrap;
	cursor: help;
}
sup {font-size: xx-small; vertical-align: top; margin-left: 1px; padding: 0 1px }
#specialEventBanner
{
	position: absolute;
	z-index: 10;
	width: 100%;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	padding: 1%;
}
.specialEventDetails
{
	font-size: 24px;
}
.specialEventImg
{
	position: absolute;
	width: 8%;
	left: 46%;
	z-index: 10;
}


.procedureContainer
{
	padding: 3px 1%;
	font-size: 12px;
	border: 1px solid #fff;
	margin: 0 1% 4px 1%;
	margin-top: 0;
	background-color: #043d77;
}
.procedureContainer > *
{
	padding: 1px 2px;
	color: #aaa;
}
.procedureContainer .title
{
	font-size: 14px;
	border-bottom: 1px solid #fff;
	margin-bottom: 2px;
	color: #fff;
}
#turnProcedureContainer .title
{ width: 83% }
#turnProcedureInfo, .playStepInfo { font-size: 11px }
#turnProcedureInfo
{
	line-height: 14px;
	vertical-align: text-top;
	margin-left: 5px;
}
.playStepInfo { margin-left: 5px }
.playStepInfo:hover { color: #fff }
.procedureContainer .substep
{
	margin-left: 6%;
	font-size: 11px;
}
.procedureContainer .highlighted span:not(.playStepInfo)
{
	color: #fff;
	font-size: 14px;
	filter: drop-shadow(0px 0px 3px var(--button-background-bright));
}

#quarantineArea
{
	background-image: url("../images/quarantineArea.jpg");
	z-index: 2;
	opacity: 0;
}

#forecastContainer { margin-bottom: 10px }
#forecastContainer, #forecastContainer .veil { background-color: var(--dark-grey-background) }
#forecastContainer .concealed { color: var(--dark-grey-background); border: none }
#forecastContainer > p
{
	text-align: center;
	padding: 5px 0;
	font-size: 12px;
}
#forecastContainer .tooltip
{
	font-size: 14px;
}

#setupProcedureContainer
{
	margin-bottom: -2px;
}
#setupContainer h4
{
	padding: 5px;
	margin-bottom: 10px;
	font-weight: 400;
}
#skipSetupButtons
{
	margin: 0 1% 4px 1%;
	height: 20px;
	border: 1px solid #fff;
	border-top: none;
}
.btnSkip
{
	display: inline-block;
	width: 50%;
	text-align: center;
	font-size: 13px;
	padding: 2px 0 1px 0;
	font-family: 'Ropa Sans', sans-serif;
	background-color: #1282b3;
	cursor: pointer;
}
#btnSkipSetup { border-left: 1px solid #fff }
.btnSkip.btnDisabled { border: none; cursor: progress }
#skippingSetupMsg { margin-top: 200px }
#roleSetupContainer, #preparePlayerDeckContainer
{
	padding: 0 12%;
}
#roleSetupContainer .name
{
	border-bottom: none;
}
#roleSetupContainer .role
{
	border: none;
}
.roleContainer { margin-bottom: 10px }
.slotMachine,
#roleSetupContainer .role
{
	text-align: center;
	font-size: 14px;
}
.slotMachine
{
	overflow: hidden;
	border-radius: 2px;
}
.slotMachineOption
{
	border-bottom: 1px solid #000;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
.slotMachine .selectionWindow
{
	border-top: 4px solid #fff;
	border-bottom: 4px solid #fff;
	z-index: 5;
}
.slotMachineShadow, .slotMachine .selectionWindow
{
	position: absolute;
	width: 14.75%;
}
.slotMachineShadow
{
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, .9),
		rgba(0, 0, 0, .6),
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .6),
		rgba(0, 0, 0, .9))
}
.slotMachine, .slotMachineShadow { height: 90px; }

.roleContainer .playerCard,
.playerCard.drawing
{
	height: 16px;
	line-height: 16px;
	font-size: 12px;
}
.playerCard.drawing { transition: height, line-height, font-size 0.5s }
.roleContainer .playerCard
{
	width: 92%;
	margin-left: 4%;
	margin-bottom: 4px;
}
.playerCard .population
{
	display: block;
	font-size: 10px;
	line-height: 10px;
	font-family: 'B612 Mono', monospace;
}
.roleContainer .playerCard .population
{
	font-size: 9px;
	line-height: 9px;
}
.popRank
{
	position: absolute;
	font-size: 18px;
	font-family: 'B612 Mono', monospace;
	font-weight: 400;
	z-index: 8;
}
#roleSetupContainer .playerPanel
{
	width: 100%;
	border: 1px solid #fff;
}

#preparePlayerDeckContainer > div
{
	margin-bottom: 30px;
}
#preparePlayerDeckContainer .playerCard
{
	height: 20px;
	line-height: 20px;
	font-size: 16px;
}
#preparePlayerDeckContainer img
{
	width: 20px;
}

#errorContainer
{
	padding: 3%;
	font-family: 'Ropa sans', sans-serif;
	font-weight: 400;
}
#errorContainer h3
{
	font-size: 22px;
	margin-bottom: 5px;
}
#curtain #errorContainer * { text-align: left !important }
a,
a:visited
{ color: var(--epidemic-green) }
a:hover { cursor: pointer }
#sideMenu a { text-decoration: underline }

button.hamburger,
#sideMenu,
#sideMenuTitle
{ position: absolute }
button.hamburger
{
	z-index: 49;
	width: 3%;
	right: 0.3%;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background-color: var(--button-background);
}
button.hamburger:hover,
.hamburger:hover
{ background-color: var(--button-background-bright) }
button.hamburger.is-active
{
	top: -1px;
	right: 0;
	background-color: #b10e10;
	transition: background-color 0.2s 0.15s;
}
button.hamburger.is-active:hover { background-color: #ef282a }
button.hamburger:not(.is-active)
{ transition: top, right 0.2s 0.15s }
#sideMenu
{
	z-index: 40;
	display: inline-block;
	background: linear-gradient(to top, var(--main-background-color), #054583);
	border-left: 2px solid #fff;
	font-family: 'Exo 2', sans-serif;
	overflow-y: scroll;
	overflow-x: hidden;
	margin-top: 28px;
}
#lobby #sideMenu
{
	top: 0;
	margin-top: 0;
	filter: drop-shadow(-2px 0px 4px #000);
	border: none;
	width: 25%;
	min-width: 210px;
}
#sideMenu,
#sideMenuTitle
{
	display: inline-block;
	left: 100%;
}
#sideMenu.is-active,
#sideMenuTitle.is-active
{ left: var(--board-width-percentage) }
#lobby #sideMenu.is-active
{ left: 75% }
#sideMenu.is-active,
#sideMenu:not(.is-active),
#sideMenuTitle.is-active,
#sideMenuTitle:not(.is-active)
{
	transition: left 0.15s;
}
#sideMenuTitle
{
	z-index: 41;
	padding: 3px 0 3px 10px;
	font-size: 18px;
	font-family: "Audiowide", sans-serif;
	background-color: var(--dark-grey-background);
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
#sideMenuTitle h2
{ display: inline-block }
#sideMenuTitle p
{
	font-family: "Exo 2", sans-serif;
	font-size: 17px;
}
#sideMenuTitle img
{
	display: block;
	width: 15%;
	margin: 10px;
}
#sideMenu > .button
{
	width: 100%;
	margin: 3px 0 0 0;
	font-size: 17px;
	text-align: left;
	padding: 10px;
	z-index: 42;
}
.buttonChevron
{
	position: absolute;
	font-family: 'B612 Mono';
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg); /* Safari */
	-moz-transform: rotate(180deg); /* Firefox */
	-ms-transform: rotate(180deg); /* IE */
	-o-transform: rotate(180deg); /* Opera */
}
.buttonChevron.rightChevron
{
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg); /* Safari */
	-moz-transform: rotate(90deg); /* Firefox */
	-ms-transform: rotate(90deg); /* IE */
	-o-transform: rotate(90deg); /* Opera */
}
#sideMenu > .button .buttonChevron
{
	right: 12px;
	font-size: 32px;
	line-height: 6px;
}
#sideMenu > .button .buttonChevron.rightChevron
{
	right: 20px;
	line-height: 22px;
}
.secondaryButtonContainer,
.tertiaryButtonContainer
{
	width: 100%;
	display: block;
}
.secondaryButtonContainer .button,
.tertiaryButtonContainer .button
{
	width: 97%;
	margin: 1px 0 0 3%;
	padding-right: 20px;
	font-size: 14px;
	text-align: left;
	background-color: #0b668d;
	position: relative;
	z-index: 41;
}
.tertiaryButtonContainer .button
{
	margin-left: 6%;
	padding-top: 0;
	padding-bottom: 0;
}
.secondaryButtonContainer .button:hover
{
	background-color: var(--button-background-bright);
	padding-left: 8px;
	padding-right: 12px;
}
#sideMenu .button, #sideMenu .button:hover
{ transition: padding .2s }
.secondaryButtonContainer .buttonChevron
{
	right: 1px;
	margin-left: 3px;
	font-size: 24px;
	line-height: 4px;
}
.secondaryButtonContainer .buttonChevron.rightChevron
{
	right: 6px;
	line-height: 18px;
}
.tertiaryButtonContainer > .button > .buttonChevron
{ right: 18px }
.tertiaryButtonContainer > .button > .buttonChevron.rightChevron
{ right: 24px }
#sideMenu > .button:not(.confirming):hover
{
	padding-left: 15px;
	padding-right: 5px;
}

.sideMenuContent
{
	margin: 2px 2px 0 6%;
	font-family: "Ropa sans", sans-serif;
	font-size: 14px;
	line-height: 15px;
}
.tertiaryButtonContainer .sideMenuContent
{ margin-left: 9% }
.sideMenuContent h4,
.sideMenuContent h5
{
	display: inline-block;
	font-size: 16px;
}
.sideMenuContent h4
{
	font-family: 'Exo 2', sans-serif;
	border-bottom: 1px solid #fff;
}
.sideMenuContent h5
{
	font-weight: 400;
	text-decoration: underline;
}
.sideMenuContent p
{ margin-bottom: 4px }
.sideMenuContent .hoverInfo
{ font-size: 13px }
#metaInfo.info
{
	font-size: 14px;
	line-height: 14px;
	vertical-align: text-top;
}

#btnAbandon.confirming
{
	padding: 10px 5%;
	background-color: var(--dark-grey-background);
	cursor: default;
}
#btnAbandon.confirming > .button
{
	display: inline-block;
	width: 45%;
	margin: 0;
	pointer-events: all;
}

.tooltip.wideTooltip
{ max-width: 35% }
#container > .tooltip,
#lobby > .tooltip
{
	z-index: 49;
	max-width: 20%;
}

@media screen and (min-width: 1200px)
{
	#setupProcedureContainer
	{ font-size: 15px }
	#setupProcedureContainer .title
	{ font-size: 18px }
	#setupProcedureContainer .highlighted span
	{ font-size: 16px }
	#skipSetupButtons
	{ margin-bottom: 8% }
	.roleContainer
	{ margin-bottom: 12px }
	.slotMachine,
	#roleSetupContainer .role
	{ font-size: 16px }
	.slotMachine, .slotMachineShadow
	{ height: 100px }

	.roleContainer .playerCard,
	.playerCard.drawing
	{
		height: 20px;
		line-height: 20px;
		font-size: 14px;
	}
	.popRank
	{
		font-size: 22px;
	}

	#preparePlayerDeckContainer > div
	{
		margin-bottom: 40px;
	}
	#preparePlayerDeckContainer .playerCard
	{
		height: 24px;
		line-height: 24px;
		font-size: 16px;
	}
	#preparePlayerDeckContainer img
	{
		width: 24px;
	}
	
	.tooltip { max-width: 26% }
	.tooltip,
	.eventDetails
	{ font-size: 14px }
	.tooltip .warning { font-size: 25px }
	#rightPanel .tooltip { max-width: 210px }
	.eventTypeTooltip h3
	{
		font-size: 20px;
	}
	.eventTypeTooltip .actionNotPossible
	{
		padding: 2px 0;
	}
	.eventTypeTooltip p
	{
		margin-top: 3px;
		line-height: 16px;
	}
	.eventDetails .title
	{
		font-size: 20px;
	}
	.eventDetails  .title > .eventTypeInfo
	{
		font-size: 14px;
		line-height: 21px;
	}
	.eventDetails .playerCard
	{
		margin: 3px 0;
	}
	.playerCard .population
	{
		font-size: 12px;
		line-height: 12px;
	}
	.roleContainer .playerCard .population
	{
		font-size: 11px;
		line-height: 11px;
	}
	.eventDetails .hand { padding: 5px 0 }
	.largeText { font-size: 20px }

	#topPanel .title,
	#infectionDiscardContainer .title,
	.bottomPanelDiv .title
	{
		font-size: 16px;
	}
	#topPanel .info,
	.bottomPanelDiv .info
	{
		font-size: 12px;
		line-height: unset;
	}
	.cubeSupply p
	{
		font-size: 18px;
	}

	.playerCard
	{
		font-size: 14px;
	}

	.playerPanel-2 .role
	{
		font-size: 18px;
		padding-bottom: 2px;
	}
	.playerPanel-3 .role
	{ font-size: 17px }
	.playerPanel-4 .role
	{
		font-size: 20px;
		line-height: 23px;
	}

	.btnCollapseExpand > .numCardsInHand
	{
		font-size: 13px;
		padding: 3px 0;
	}
	.btnCollapseExpand > div
	{
		font-size: 20px;
		line-height: 12px;
	}

	.procedureContainer
	{
		padding: 5px 3%;
		font-size: 14px;
		margin: 0 1% 8px 1%;
	}
	.procedureContainer > *
	{
		padding: 1px 3px;
	}
	.procedureContainer .title
	{
		font-size: 15px;
		margin-bottom: 3px;
	}
	#turnProcedureInfo, .playStepInfo { font-size: 12px }
	#turnProcedureInfo
	{
		line-height: 18px;
	}
	.playStepInfo { margin-left: 10px }
	.playStepTooltip { top: 5 }
	.procedureContainer .substep
	{
		margin-left: 6%;
		font-size: 13px;
	}
	.procedureContainer .highlighted span:not(.playStepInfo)
	{
		font-size: 15px;
	}

	#indicatorContainer
	{ padding-top: 3px }
	#indicatorContainer > *
	{ margin-bottom: 4px }
	#stepIndicator
	{ font-size: 16px }
	#stepIndicator .info
	{ font-size: 12px }
	#stepIndicator .eventCardInfo { font-size: 14px }
	#roleIndicator
	{ font-size: 20px }

	.actionCategory h2 { font-size: 14px }
	.actionName
	{
		width: 67%;
		font-size: 18px;
	}
	.actionInfo
	{
		width: 5%;
		font-size: 12px;
	}

	.eventHistoryButton
	{
		font-size: 18px;
	}
	#btnUndo
	{
		font-size: 22px;
	}

	#cureMarkerContainer .title
	{
		font-size: 20px;
	}
	#cureMarkerContainer .info
	{
		font-size: 14px;
	}

	#researchStationSupplyContainer .researchStation
	{
		margin-left: 5%;
		margin-top: 0;
	}
	#researchStationSupplyCount
	{
		font-size: 22px;
	}

	.roleCard
	{
		width: 20%;
		font-size: 16px;
	}
	.roleCard h3,
	.eventCardFull h3
	{
		font-size: 18px;
	}
	.eventCardFull p
	{
		font-size: 14px;
	}
	.eventCardFull h5
	{
		font-size: 14px;
	}
	#actionPrompt .eventCardFull
	{
		width: 82%;
		margin: 5px 9%;
	}
	#forecastContainer > p,
	#forecastContainer .tooltip
	{ font-size: 16px }
	
	#btnCancelAction
	{
		font-size: 14px;
	}
	#btnCancelAction span:first-of-type
	{
		font-size: 18px;
	}

	.actionTitle { padding: 5px }
	.actionTitle > h2
	{
		font-size: 21px;
	}

	#actionInterface > .rules
	{
		padding: 8px 2% 0 2%;
	}
	#actionInterface > .rules > p
	{
		margin-bottom: 8px;
	}

	#actionInterface > .rules,
	#actionInterface > .instructions,
	.shareableCards
	{
		font-size: 16px;
	}

	.actionPromptOption
	{
		font-size: 20px;
	}

	#actionPrompt .playerCard
	{
		font-size: 16px;
		margin-bottom: 2px;
	}

	.btnConfirm
	{
		font-size: 16px;
		line-height: 16px;
		width: 75%;
		padding: 5px;
		margin-left: 12.5%;
	}

	.playerOptions .roleTag
	{
		font-size: 18px;
	}

	.cardsToKeep .instructions
	{
		font-size: 14px;
		margin: 0 0 6px 0;
		padding: 3px;
	}
	.cardsToKeep > p,
	.discardSelections > p,
	.discardPrompt p span
	{
		font-size: 18px;
	}
	#actionInterface > .discardPrompt .playerCard
	{
		margin-bottom: 2px;
	}

	#cardDrawContainer .button,
	#infectCitiesContainer .button,
	#epidemicContainer .button
	{
		font-size: 20px;
	}

	#boardContainer > .epidemicFull
	{
		width: 23.7%;
	}
	.epidemicFull h2 { font-size: 18px }
	.epidemicFull div	
	{
		padding: 8px 12px;
	}
	.epidemicFull h3 { font-size: 15px }
	.epidemicFull h3 img
	{
		width: 17px;
		margin-left: 8px;
	}
	.epidemicFull p
	{
		font-size: 12px;
	}

	button.hamburger
	{ width: 2.9% }

	#sideMenu
	{ margin-top: 34px }
	#sideMenuTitle
	{
		padding: 5px 0 0 10px;
		font-size: 24px;
	}
	#sideMenuTitle p
	{ font-size: 20px }
	#sideMenu > .button
	{ font-size: 20px }
	#sideMenu > .button .buttonChevron
	{
		right: 15px;
		line-height: 10px;
	}
	#sideMenu > .button .buttonChevron.rightChevron
	{ line-height: 25px }
	.secondaryButtonContainer .buttonChevron
	{ line-height: 8px }
	.secondaryButtonContainer .buttonChevron.rightChevron
	{ line-height: 20px }
	.secondaryButtonContainer .button,
	.tertiaryButtonContainer .button
	{ font-size: 16px }
	.secondaryButtonContainer .button
	{ padding-right: 12px }
	.secondaryButtonContainer .button:hover
	{ padding-right: 4px }
	.tertiaryButtonContainer .button
	{ padding-right: 32px }
	.tertiaryButtonContainer > .button > .buttonChevron
	{ right: 22px }
	.tertiaryButtonContainer > .button > .buttonChevron.rightChevron
	{ right: 28px }

	.sideMenuContent
	{
		font-size: 16px;
		line-height: 18px;
	}
	.sideMenuContent h4,
	.sideMenuContent h5
	{ font-size: 17px }
	.sideMenuContent p
	{ margin-bottom: 5px }
	.sideMenuContent .hoverInfo
	{ font-size: 15px }
}

@media screen and (min-width: 1400px)
{
	#setupProcedureContainer
	{ font-size: 16px }
	#setupProcedureContainer .title
	{ font-size: 20px }
	#setupProcedureContainer .highlighted span
	{ font-size: 19px }
	#skipSetupButtons
	{ height: 22px }
	.btnSkip
	{
		font-size: 15px;
		margin-top: 2px;
		padding-top: 2px;
	}
	.roleContainer
	{ margin-bottom: 15px }
	.slotMachine,
	#roleSetupContainer .role
	{ font-size: 18px }
	.slotMachine, .slotMachineShadow
	{ height: 110px }

	.roleContainer .playerCard,
	.playerCard.drawing
	{
		height: 24px;
		line-height: 24px;
		font-size: 16px;
	}
	.popRank
	{
		font-size: 26px;
	}
	
	#setupContainer h4
	{
		font-size: 20px;
	}
	#preparePlayerDeckContainer > div
	{
		margin-bottom: 50px;
	}
	#preparePlayerDeckContainer .playerCard
	{
		height: 28px;
		line-height: 28px;
		font-size: 18px;
	}
	#preparePlayerDeckContainer img
	{
		width: 28px;
	}

	.tooltip { max-width: 28% }
	.tooltip,
	.eventDetails
	{
		font-size: 16px;
	}
	.tooltip .warning { font-size: 30px }
	#rightPanel .tooltip { max-width: 250px }
	.eventTypeTooltip h3,
	.eventDetails .title
	{
		font-size: 22px;
	}
	.eventTypeTooltip h3
	{
		margin-bottom: -3px;
	}
	.eventTypeTooltip .actionNotPossible
	{
		padding: 3px 0;
	}
	.eventTypeTooltip p
	{
		margin-top: 8px;
		line-height: 18px;
	}
	.eventDetails .title
	{
		padding-bottom: 2px;
	}
	.eventDetails  .title > .eventTypeInfo
	{
		font-size: 14px;
		line-height: 26px;
	}
	.playerCard .population,
	.roleContainer .playerCard .population
	{
		font-size: 14px;
		line-height: 14px;
	}
	.eventDetails .hand { padding: 5px 0 }
	.eventDetails .infectionCard .cityName
	{
		margin-top: 4px;
	}
	.largeText { font-size: 24px }

	#topPanel .info,
	.bottomPanelDiv .info
	{ line-height: 16px }
	#turnProcedureInfo
	{ line-height: unset }

	#btnUndo
	{
		font-size: 26px;
	}

	#boardContainer > .eventCardFull
	{
		width: 16%;
	}
	.eventCardFull p
	{
		font-size: 15px;
	}
	#forecastContainer > p,
	#forecastContainer .tooltip
	{ font-size: 18px }

	.playerPanel-2 .role
	{
		font-size: 22px;
		padding-bottom: 4px;
	}
	.playerPanel-3 .role
	{ font-size: 20px }
	.playerPanel-4 .role
	{
		font-size: 22px;
		line-height: 25px;
	}

	#roleIndicator
	{
		font-size: 22px;
	}

	.actionCategory h2
	{
		font-size: 16px;
		padding-top: 5px;
	}
	.actionName
	{
		width: 67%;
		font-size: 20px;
	}
	.actionInfo
	{
		width: 5%;
		font-size: 12px;
	}

	.actionTitle > h2
	{
		font-size: 24px;
	}

	#actionInterface > .rules,
	#actionInterface > .instructions,
	.shareableCards
	{
		font-size: 18px;
	}

	#actionPrompt > .playerCard
	{
		font-size: 18px;
	}

	.btnConfirm
	{
		font-size: 18px;
		line-height: 18px;
		width: 80%;
		margin-left: 10%;
	}

	.playerOptions .roleTag
	{
		font-size: 20px;
	}

	.cardsToKeep .instructions,
	.discardPrompt .playerCard
	{
		font-size: 16px;
	}

	#cardDrawContainer > h2
	{
		font-size: 36px;
	}

	#epidemicContainer > .epidemicFull
	{
		width: 90%;
		margin-left: 5%;
	}
	#boardContainer > .epidemicFull
	{
		width: 21%;
	}
	.epidemicFull h2 { font-size: 18px }
	.epidemicFull div	
	{
		padding: 8px 12px;
	}
	.epidemicFull p
	{
		font-size: 12px;
	}

	#sideMenuTitle p
	{ font-size: 24px }

	#lobby .roleCard
	{ width: 14% }
}

@media screen and (min-width: 1920px)
{
	#setupProcedureContainer
	{ font-size: 20px }
	#setupProcedureContainer .title
	{ font-size: 24px }
	#setupProcedureContainer .highlighted span
	{ font-size: 21px }
	#skipSetupButtons
	{ height: 24px }
	.btnSkip
	{
		font-size: 16px;
		margin-top: 2px;
		padding-top: 3px;
	}
	#skipSetupButtons,
	.roleContainer
	{ margin-bottom: 40px }
	.slotMachine,
	#roleSetupContainer .role
	{ font-size: 22px }
	.slotMachine, .slotMachineShadow
	{ height: 134px }

	.roleContainer .playerCard,
	.playerCard.drawing
	{
		height: 24px;
		line-height: 24px;
		font-size: 20px;
	}
	.popRank
	{
		font-size: 34px;
	}

	#setupContainer h4
	{
		font-size: 28px;
	}
	#preparePlayerDeckContainer > div
	{
		margin-bottom: 80px;
	}
	#preparePlayerDeckContainer .playerCard
	{
		height: 38px;
		line-height: 38px;
		font-size: 28px;
	}
	#preparePlayerDeckContainer img
	{
		width: 38px;
	}
	
	.tooltip { max-width: 30% }
	.tooltip,
	.eventDetails
	{
		font-size: 18px;
	}
	.tooltip .warning { font-size: 32px }
	#rightPanel .tooltip { max-width: 300px }
	.eventTypeTooltip h3,
	.eventDetails .title
	{
		font-size: 28px;
	}
	.eventTypeTooltip h3
	{
		line-height: 28px;
		padding: 2px 0 0 0;
		margin-bottom: -5px;
	}
	.eventTypeTooltip h3 + p
	{
		padding-top: 8px;
	}
	.eventTypeTooltip p
	{
		line-height: 20px;
		margin-top: 12px;
	}
	.eventTypeTooltip > p:first-of-type
	{
		margin-top: 4px;
	}
	.eventTypeTooltip .actionNotPossible + p
	{
		margin-top: 6px;
	}
	.eventDetails .title
	{
		padding-bottom: 4px;
	}
	.eventDetails  .title > .eventTypeInfo
	{
		font-size: 18px;
		line-height: 30px;
	}
	.playerCard .population,
	.roleContainer .playerCard .population
	{
		font-size: 16px;
		line-height: 16px;
	}
	.eventDetails .hand { padding: 7px 0 }
	.eventDetails .infectionCard .cityName
	{
		margin-top: 4px;
	}
	.eventDetails .populationRank { font-size: 32px }
	.largeText { font-size: 30px }

	#topPanel .title,
	#infectionDiscardContainer .title,
	.bottomPanelDiv .title
	{
		font-size: 21px;
	}
	.cubeSupply p
	{
		font-size: 26px;
		margin-top: -4px;
	}
	.cubeSupply .diseaseCube
	{
		width: 67%;
		margin: 0 14%;
	}

	#topPanel .info,
	.bottomPanelDiv .info
	{
		font-size: 18px;
		line-height: 20px;
		vertical-align: text-top;
	}

	#infectionDeckContainer img
	{
		width: 39%;
		margin: 2% 30.5% 1% 30.5%;
	}

	.procedureContainer
	{
		font-size: 20px;
	}
	.procedureContainer .title
	{
		font-size: 24px;
	}
	#turnProcedureInfo
	{
		font-size: 18px;
		line-height: 26px;
	}
	.playStepInfo
	{
		font-size: 16px;
	}
	.procedureContainer .substep
	{
		font-size: 17px;
	}
	.procedureContainer .highlighted span:not(.playStepInfo)
	{
		font-size: 21px;
	}

	.eventHistoryButton
	{
		font-size: 24px;
	}
	#btnUndo
	{
		font-size: 34px;
	}

	#cureMarkerContainer .title
	{
		font-size: 28px;
	}
	#cureMarkerContainer .infoContainer
	{
		margin-bottom: -3px;
	}
	#cureMarkerContainer .info
	{
		font-size: 18px;
		vertical-align: text-bottom;
	}

	#researchStationSupplyContainer .researchStation
	{
		width: 21%;
	}
	#researchStationSupplyCount
	{
		font-size: 32px;
	}

	#playerDeckContainer img
	{
		margin: 4% 30%;
	}

	.playerCard
	{
		border-top-left-radius: 8px;
		border-bottom-right-radius: 8px;
		font-size: 18px;
	}

	.playerPanel-2 .role
	{ font-size: 28px }
	.playerPanel-3 .role
	{ font-size: 26px }
	.playerPanel-4 .role
	{
		font-size: 26px;
		line-height: 34px;
	}

	.btnCollapseExpand > .numCardsInHand
	{
		font-size: 20px;
	}
	.btnCollapseExpand > div
	{
		font-size: 24px;
		line-height: 14px;
	}

	#indicatorContainer
	{
		padding: 3px 0;
	}
	#indicatorContainer > *
	{ margin-bottom: 6px }
	#stepIndicator
	{ font-size: 22px }
	#stepIndicator .info
	{ font-size: 18px }
	#stepIndicator .eventCardInfo
	{ font-size: 20px }
	#roleIndicator
	{ font-size: 30px }

	.actionCategory h2
	{
		font-size: 20px;
		margin: 10px 0 0 4px;
	}
	.actionName
	{
		font-size: 25px
	}
	.actionInfo
	{
		font-size: 18px;
	}

	#boardContainer > .epidemicFull
	{
		width: 250px;
	}
	.epidemicFull h2
	{
		font-size: 24px;
	}
	.epidemicFull > div
	{
		padding: 10px;
	}
	.epidemicFull h3 { font-size: 16px }
	.epidemicFull h3 img
	{
		width: 18px;
		margin-left: 10px;
	}
	.epidemicFull p
	{
		font-size: 12px;
		padding: 3px 0 0 12px;
	}

	.roleCard
	{ width: 16% }
	#lobby .roleCard
	{ width: 13% }
	.roleCard,
	.eventCardFull
	{ font-size: 18px }
	.roleCard h3,
	.eventCardFull h3,
	#actionPrompt > .eventCardFull h3
	{
		font-size: 24px;
	}
	#boardContainer > .eventCardFull
	{
		width: 15%;
	}
	.eventCardFull h5
	{
		font-size: 17px;
		padding: 10px 3px 0 5px;
	}
	.eventCardFull p
	{
		font-size: 18px;
	}
	#actionPrompt .eventCardFull
	{
		width: 70%;
		margin: 10px 15%;
	}
	#forecastContainer > p,
	#forecastContainer .tooltip
	{ font-size: 20px }

	.actionCategory h2 { font-size: 21px }
	.actionName
	{
		font-size: 24px;
	}
	.actionInfo
	{
		font-size: 19px;
	}

	#btnCancelAction
	{
		font-size: 20px;
	}
	#btnCancelAction span:first-of-type
	{
		font-size: 26px;
	}

	.actionTitle > h2
	{
		font-size: 32px;
	}

	#actionInterface > .rules,
	#actionInterface > .instructions,
	.shareableCards
	{
		font-size: 22px;
	}
	#actionInterface > .rules
	{
		padding: 10px 3% 0 3%;
	}
	#actionInterface > .rules > p
	{
		margin-bottom: 12px;
	}

	.actionPromptOption
	{
		font-size: 28px;
	}

	#actionPrompt .playerCard,
	#discardStepContainer .playerCard
	{
		font-size: 22px;
		margin-bottom: 3px;
	}

	.btnConfirm
	{
		font-size: 24px;
		padding: 14px 0;
	}

	.playerOptions .roleTag
	{
		font-size: 24px;
		padding: 4px 0 2px 0;
	}

	.cardsToKeep .instructions
	{
		font-size: 18px;
	}
	#discardStepContainer .cardsToKeep .instructions
	{
		font-size: 20px;
	}
	.cardsToKeep > p,
	.discardSelections > p,
	.discardPrompt p span
	{
		font-size: 26px;
	}

	#actionInterface > .discardPrompt .playerCard
	{ margin-bottom: 3px }
	#discardStepContainer .playerCard
	{ margin-bottom: 5px }

	#cardDrawContainer .button,
	#infectCitiesContainer .button,
	#epidemicContainer .button
	{
		font-size: 26px;
		padding: 10px;
	}

	#cardDrawContainer .playerCard
	{
		width: 96%;
		height: 40px;
		line-height: 40px;
		font-size: 24px;
	}
	#cardDrawContainer .playerCard,
	.epidemicFull
	{
		margin: 25px 2%;
	}

	#cardDrawContainer > h2
	{
		font-size: 46px;
	}

	#boardContainer > .epidemicFull
	{
		width: 21.5%;
	}
	.epidemicFull h2 { font-size: 22px }
	.epidemicFull div
	{
		padding: 12px 14px;
	}
	.epidemicFull h3 { font-size: 20px }
	.epidemicFull p
	{
		font-size: 16px;
	}

	button.hamburger
	{ width: 2.5% }

	#sideMenu
	{ margin-top: 54px }
	#sideMenuTitle
	{
		padding: 5px 10px;
		font-size: 36px;
	}
	#sideMenuTitle p
	{ font-size: 32px }
	#sideMenu > .button
	{ font-size: 26px }
	#sideMenu > .button .buttonChevron
	{
		font-size: 36px;
		right: 12px;
	}
	#sideMenu > .button .buttonChevron.rightChevron
	{ line-height: 32px }
	.secondaryButtonContainer > .button
	{ font-size: 24px }
	.secondaryButtonContainer .buttonChevron
	{
		font-size: 30px;
		line-height: 12px;
	}
	.secondaryButtonContainer .buttonChevron.rightChevron
	{
		right: 8px;
		line-height: 30px;
	}
	.secondaryButtonContainer .button
	{ font-size: 23px }
	.tertiaryButtonContainer .button
	{
		font-size: 21px;
		padding-top: 1px;
		padding-bottom: 1px;
	}
	.secondaryButtonContainer .button,
	.tertiaryButtonContainer .button
	{ padding-right: 0 }
	.tertiaryButtonContainer > .button > .buttonChevron
	{
		right: 28px;
		line-height: 9px;
	}
	.tertiaryButtonContainer > .button > .buttonChevron.rightChevron
	{
		right: 36px;
		line-height: 26px;
	}

	.sideMenuContent
	{
		font-size: 18px;
		line-height: 22px;
	}
	.sideMenuContent h4,
	.sideMenuContent h5
	{ font-size: 20px }
	.sideMenuContent p
	{ margin-bottom: 8px }
	.sideMenuContent .hoverInfo
	{ font-size: 19px }
	#metaInfo.info
	{
		font-size: 20px;
		line-height: 18px;
	}
}