body
{
	padding:0;
	margin:0;

	font-family: "Calibri", "Carlito", "Arial";
}

.hidden
{
	display:none;
	visibility: hidden;
}

#map
{
	height: 100vh;
	width: 100vw;

	margin: 0;
	padding: 0;

	background-color: #f0f1f5;

	overflow: hidden;
}

#loadbox
{
	position: absolute;

	top: 40vh;
	left: 25vw;

	width: 50vw;
	height:20vh;

	background-color: rgba(10, 18, 41, 0.8);

	box-shadow: 5px 5px 10px black;
}

#loadtext
{
	position: fixed;
	top: 45vh;
	left:0;

	width: 100vw;
	text-align: center;

	font-size: 3vh;
	color:white;
}

#loadbar
{
	width: 40vw;
	height: 5vh;

	position: fixed;
	top: 50vh;
	left: 30vw;

	background-color: grey;
}

#loadfilledbar
{
	background-color: #b0942e;

	height: 100%;
}

#loadratio
{
	position: fixed;
	top: 51vh;
	left:0;

	width: 100vw;
	text-align: center;

	font-size: 3vh;
}

#coordsbox
{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10000;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-top: 0.5rem;
	padding-right: 1rem;
	background-color: rgba(0,0,0,0.4);
	color: white;
	width: 100vw;
}

#mousecoordinates
{
	padding-right: 1rem;
}

#mousecoordinates.locked
{
	color: #ceedc0;
}

#coordsinfo
{
	font-style: italic;
}

#infobox
{
	position: fixed;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;

	top: 0;
	right: 0;

	height: 100vh;
	width: 3vw;

	background-color: rgba(10, 18, 41, 0.8);
	color: white;

	box-shadow: 5px 5px 10px grey;

	transition: all 0.5s;
}

#ibmain
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 0;
	overflow: hidden;
}

#infobox h1
{
	display: block;
	margin:0;
	padding:0;
	font-size: 1.5em;
	text-align: center;

	white-space: nowrap;

	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

#ibcontent
{
	flex-grow: 1;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;

	width: 25vw;
}

#provinfo, #countryinfo
{
	user-select: none;
}

#countryinfo
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	padding-bottom: 0.5rem;
}

h2#countryname
{
	margin:0;
	font-size: 1.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	width: 100%;
	padding-top: 0.5rem;

	border-top: solid 1px rgba(255,255,255,0.5);
}

#provinfo
{
	margin-top: 1rem;
	background-color: rgba(255,255,255,0.1);
}

#provinfo h2
{
	margin: 0;
	font-size: 1.2rem;
	font-weight: bold;

	padding-left: 0.5rem;
	margin-bottom: 0.5rem;

	background: rgba(255,255,255,1);
	color: rgba(10, 18, 41, 0.8);
}

#provinfo .infoline
{
	padding-left: 1rem;
}

.miniflag
{
	display: inline;
	height: 1rem;
}

#influence
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	margin-top: 1rem;
}

#influence h3
{
	margin: 0;

	background-color: rgba(255,255,255,0.8);
	color: rgba(10, 18, 41, 0.8);
	padding-left: 1rem;
	margin-bottom: 0.5rem;
}

#culturallabel svg
{
	fill: #ac25d9;
	stroke: #ac25d9;
}

#economiclabel svg
{
	fill: #bfbf21;
	stroke: #bfbf21;
}

#intelligencelabel svg
{
	fill: #10ad37;
	stroke: #10ad37;
}

#countrypics
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 100%;
}

#leader
{
	display: block;
	width: 30%;
}

#flag
{
	display: block;
	width: 60%;
}

#gotocountry
{
	margin-top: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	width: 100%;
	border: solid 1px white;
	transition: all 0.3s;
	color: white;
	text-decoration: none;
}

#gotocountry:hover
{
	background-color: white;
	color: rgba(10, 18, 41, 0.8);
}

#ibslider
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width:3vw;

	background-image: linear-gradient(270deg, rgba(100, 100, 100, 0.3), transparent);
}

#ibslider::before
{
	color: #b0942e;
	content: "<";
	font-size: 3vw;
}

#ibshow:hover ~ #infobox #ibslider
{
	background-color: rgba(255,255,255,0.1);
}

#ibshow:checked ~ #infobox #ibslider::before
{
	content: ">";
}

#ibshow
{
	position: fixed;

	width:3vw;
	height:100vh;
	top: 0;
	right: 0;

	z-index: 3000;
	opacity: 0;

	margin:0;
	padding:0;

	transition: all 0.5s;
}

#ibshow:active, #ibshow:focus
{
	outline: none;
}

#ibshow:hover
{
	cursor: pointer;
}

#ibshow:checked
{
	right: 27vw;
}

#ibshow:checked ~ #infobox
{
	right:0;
	width: 30vw;
}

#ibshow:checked ~ #infobox #ibmain
{
	width: 27vw;
}

#modebox
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;

	margin-top: 1rem;
}

.radioform
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

input[type="radio"]
{
	display:none;
}

.radioform label
{
	width: 50%;
	text-align: center;
	border: solid thin white;

	transition: all 0.3s;
}

.radioform label:hover
{
	cursor: pointer;
	color:  rgba(10, 18, 41, 0.8);
	background-color: white;
}

.radiolabel svg
{
	height: 1.5rem;
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	stroke: white;
	fill: white;
	transition: all 0.3s;
}

input[type="radio"]:checked + .radiolabel > svg, .radiolabel:hover svg
{
	stroke:  rgb(64, 77, 96);
	fill:  rgb(64, 77, 96);
}

input[type="radio"]:checked + .radiolabel
{
	cursor: pointer;
	color:  rgba(10, 18, 41, 0.8);
	background-color: white;
}

#selectinfo, #focusinfo
{
	background-color: rgba(255,255,255,0.1);

	padding-top: 0.5rem;
	font-weight: bolder;
	text-align: center;
}

#selectinfo
{
	padding-bottom: 0.5rem;
}

#selectform
{
	margin-top: 1rem;
}

#lotoggle
{
	display: block;
	position: fixed;
	top: 3vw;
	left: 3vw;
	width: 3vw;
	height: 3vw;
	background-image: url('/img/map/layers.png');
	background-size: 3vw;
	background-color: white;
	border: solid;
	border-width: 2px;
	border-color: rgb(50,50,50);
	border-radius: 0.5rem;
	transition: all 0.3s;
}

#loshow
{
	position: fixed;
	top: 3vw;
	left: 3vw;
	width: 3vw;
	height: 3vw;
	opacity: 0;
	padding: 0;
	margin: 0;
	z-index: 1000;
}

#loshow:hover
{
	cursor: pointer;
}

#loshow:hover ~ #lotoggle
{
	background-color: rgb(200,200,200);
}

#layeroptions
{
	display: none;
	position: fixed;
	top: 3vw;
	left: 6vw;
	background-color: white;
	border: solid;
	border-radius: 0.3rem;

	margin-left: 0.5rem;
	padding: 0.5em;
}

#loshow:checked ~ #layeroptions
{
	display: block;
}

#layeroptions label:hover
{
	cursor: pointer;
}

label
{
	user-select: none;
}

#mapSvg
{
	display: inline;
	background-color: #5e8c92;

	margin:0;
	padding:0;
}

#mouseHex
{
	stroke-width:3px;
	stroke:purple;
	fill:none;
	stroke-opacity:0.5;
}

.water
{
	fill:#5e8c92;
}

.ground
{
	fill:#eadec0;
	filter: drop-shadow(0px 0px 100px rgb(0 0 0 / 0.6));
}

#countryarealayer > g
{
	transition: opacity 1s linear;
}

#countryarealayer > g:hover
{
	cursor: pointer;
	opacity: 0.7;
}

#countryarealayer > g.focused, .province.focused, .province.focused:hover
{
	opacity: 0.5;
}

#countryborderlayer path {
	stroke: #efb319;
	stroke-width: 20px;
	fill:none;
}

path.province:hover
{
	cursor: pointer;
	opacity: 0.7;
}

#countrylayer > g
{
	transition: opacity 1s linear;
}

#countrylayer > g.focused
{
	opacity: 0.5;
}

#countrylayer path
{
	stroke: white;
}

#freeprovlayer .province
{
	fill: #eadec0;
	stroke: #797a80;
	stroke-width: 2px;
}

#mapSvg[cultures="shown"] #freeprovlayer .province
{
	stroke: rgb(50,50,50);
}

#mapSvg[cultures="shown"] path[culture="Germano-scandinave"]
{
	fill: #2dbd8b;
}

#mapSvg[cultures="shown"] path[culture="Celtique"]
{
	fill: #4c4066;
}

#mapSvg[cultures="shown"] path[culture="Latine du nord"]
{
	fill: #1e3a63;
}

#mapSvg[cultures="shown"] path[culture="Latine du sud"]
{
	fill: #db681a;
}

#mapSvg[cultures="shown"] path[culture="Slave"]
{
	fill: #d8e041;
}

#mapSvg[cultures="shown"] path[culture="Finnoise"]
{
	fill: #42260d;
}

#mapSvg[cultures="shown"] path[culture="Grecque"]
{
	fill: #6e0760;
}

#mapSvg[cultures="shown"] path[culture="Turcique (tataro-mongole)"]
{
	fill:#2dcf60;
}

#mapSvg[cultures="shown"] path[culture="Sibérienne"]
{
	fill:#a59bab;
}

#mapSvg[cultures="shown"] path[culture="Afghano-pakistanaise"]
{
	fill:#7a5326;
}

#mapSvg[cultures="shown"] path[culture="Indienne"]
{
	fill:#eb4f44;
}

#mapSvg[cultures="shown"] path[culture="Chinoise"]
{
	fill:#f2d011;
}

#mapSvg[cultures="shown"] path[culture="Coréo-nippone"]
{
	fill:#e3a8c5;
}

#mapSvg[cultures="shown"] path[culture="Asiatique du sud-est"]
{
	fill:#8a2815;
}

#mapSvg[cultures="shown"] path[culture="Persane"]
{
	fill:#588a17;
}

#mapSvg[cultures="shown"] path[culture="Levantine"]
{
	fill:#178a2c;
}

#mapSvg[cultures="shown"] path[culture="Arabe"]
{
	fill:#034f02;
}

#mapSvg[cultures="shown"] path[culture="Maghrébine"]
{
	fill:#93ba06;
}

#mapSvg[cultures="shown"] path[culture="Noire africaine"]
{
	fill:#5e5339;
}

#mapSvg[cultures="shown"] path[culture="Océanienne / Polynésienne"]
{
	fill:#06baa8;
}

#mapSvg[cultures="shown"] path[culture="Précolombienne"]
{
	fill:#43b519;
}

#mapSvg[cultures="shown"] path[culture="Amérindienne"]
{
	fill:#f25030;
}

#mapSvg[cultures="shown"] path[culture="Inconnue"]
{
	fill: #9932a8;
}

#selectedprovlayer .province
{
	fill: #c7b163;
	stroke-width: 3px;
	stroke: #b0942e;
}

#mapSvg[cultures="shown"] #selectedprovlayer path.province
{
	fill: #c7b163;
	stroke-width: 3px;
	stroke: #b0942e;
}

.city > circle, .city > rect
{
	fill: white;
	stroke: black;
	stroke-width: 10px;
	transition: all 0.5s;
}

.city:hover > circle, .city:hover > rect {
	fill: #c7b163;
}

.city > text {
	opacity: 0;
	transition: opacity 0.5s;
	visibility: hidden;
	user-select: none;
	fill: white;

	-webkit-filter: drop-shadow( 0px 0px 10px black);
	filter: drop-shadow( 0px 0px 10px black);

	z-index: 6000000;
}

.city:hover > text {
	opacity: 1;
	visibility: visible;
}

#citylayer:hover circle, #citylayer:hover rect {
	opacity: 0.2;
}

#citylayer:hover .city:hover > circle, #citylayer:hover .city:hover > rect {
	opacity: 1;
}

#distMeasure
{
	stroke: rgb(200, 0, 0);
}

#distBox
{
	position: absolute;
	font-weight: bold;

	background-color: rgba(10, 18, 41, 0.8);
	color: white;
	padding: 0.5rem;
}