:root {
	--main-colour: #275495);
	--selection-colour: rgb(192, 39, 39, .25);
	--secundary-colour: rgb(192, 39, 39, .25);
	
	--mes-windoes: #f38cc3;
	--mes-text: #831f8a;
	--mes-menu-icons: #e61484;
	--lightpink: #ffa7e3;
	--ivory: #fffdea;
	--cuteaqua: #9ccaff;
	--blightpurple: #a9a5ff;
	--aqua: #afffdc;
}

::selection {
	background: var(--selection-colour);
	text-shadow: none;
}
::-moz-selection { /* Code for Firefox */
	background: var(--selection-colour);
	text-shadow: none;
}

body {
	margin: 0;
	font-size: /*0.8125*/2.5vh;
	font-family: "Sitka Text";
	line-height: 3.5vh;
	word-break: normal;
	hyphens: manual;
	font-optical-sizing: auto;
	overflow: hidden;
}

*, ::before, ::after {
	font-kerning: auto;
	font-variant-ligatures: common-ligatures contextual;
	font-variant-numeric: lining-nums proportional-nums;
	font-weight: 400;
}

body strong {
	font-weight: 700;
}

button {
	align-items: center;
	appearance: none;
	background-color: #FCFCFD;
	border-radius: 0.5vh;
	border-width: 0;
	box-shadow: rgba(45, 35, 66, 0.4) 0 0.2vh 0.4vh,rgba(45, 35, 66, 0.3) 0 0.7vh 1.3vh -0.3vh,#D6D6E7 0 -0.4vh 0 inset;
	box-sizing: border-box;
	color: #36395A;
	cursor: pointer;
	display: inline-flex;
	font-family: "JetBrains Mono",monospace;
	height: 4.8vh;
	justify-content: center;
	line-height: 1vh;
	list-style: none;
	overflow: hidden;
	padding-left: 1.6vh;
	padding-right: 1.6vh;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: box-shadow .15s,transform .15s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	will-change: box-shadow,transform;
	font-size: 2.25vh;
}

button:focus {
	box-shadow: #D6D6E7 0 0 0 0.15vh inset, rgba(45, 35, 66, 0.4) 0 0.2vh 0.4vh, rgba(45, 35, 66, 0.3) 0 0.7vh 1.3vh -0.3vh, #D6D6E7 0 -0.3vh 0 inset;
}

button:hover {
	box-shadow: rgba(45, 35, 66, 0.4) 0 0.4vh 0.8vh, rgba(45, 35, 66, 0.3) 0 0.7vh 1.3vh -0.3vh, #D6D6E7 0 -0.3vh 0 inset;
	transform: translateY(-2px);
}

button:active {
	box-shadow: #D6D6E7 0 0.3vh 0.7vh inset;
	transform: translateY(2px);
}

/* The slider itself */
.slider {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 100%; /* Full-width */
	height: 3vh; /* Specified height */
	background: #eee; /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
	opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 3vh; /* Set a specific slider handle width */
	height: 3vh; /* Slider handle height */
	background: var(--secundary-colour); /* Green background */
	cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
	width: 3vh; /* Set a specific slider handle width */
	height: 3vh; /* Slider handle height */
	background: var(--secundary-colour); /* Green background */
	cursor: pointer; /* Cursor on hover */
}

h1 {
	font-size: 4vh;
	text-decoration: underline;
	text-decoration-color: var(--secundary-colour);
	text-decoration-thickness: 1.25vh;
}

h2 {
	font-size: 3vh;
	text-decoration: underline;
	text-decoration-color: var(--secundary-colour);
	text-decoration-thickness: 1vh;
}

/* tooltips */

.tooltip .tooltiptext {
	visibility: hidden;
	width: 0vmin;

	/* Position the tooltip */
	position: absolute;
}

.tooltiptext::before {
	content: "Effects\A";
	text-decoration: underline;
	text-decoration-color: var(--secundary-colour);
	text-decoration-thickness: 1vh;
	white-space: pre;
	word-wrap: break-word;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	width: auto;
	max-width: 60vmin;
}

/* tables */

table, th, td {
	border: 0.5vh solid var(--secundary-colour);
}

th, td {
	padding: 0.5vh;
}

table {
	margin-bottom: 2vh;
}

th {
	font-weight: 700;
}

/* MAIN GAME CSS */

div#mainGameBackground {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	background-image: url(images/grainy-bg.jpg) !important;
	background-color: #F5F2E8 !important;
	background-size: cover !important;
	z-index: 1 !important;
}

#mainGameDiv {
	z-index: 10 !important;
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	background-image: url(grainy-bg.jpg) !important;
	background-color: #F5F2E8 !important;
	background-size: cover !important;
	z-index: 1 !important;
	
	overflow: hidden;
}

#mainGameTopRightButtons {
	z-index: 12 !important;
	position: absolute;
	top: 0vh;
	right: 0vh;
	height: 5vh !important;
}

#mainGameTopLeftInfo {
	height: 5vh;
	width: 30%;
	position: absolute;
	left: 16.75%;
}

/* transient menus */

.transientMenu {
	position: absolute; 
	width: 90%; 
	left: 5%; 
	top: 5%; 
	height: 90%;
	overflow-y: auto !important;
	z-index: 120;
}

/* trans quarter menu */

div#transQuarterEventsContainer {
	display: flex;
	flex-wrap: wrap;
	column-count: 1;
	
	box-shadow: #D6D6E7 0 0.3vh 0.7vh inset;
	transform: translateY(2px);
	padding-top: 2vh;
	padding-bottom: 2vh;
	margin-bottom: 2vh;
}

div.transQuarterEvent {
	margin: 0.5vh;
	padding-bottom: 1vh;
}

/* government approval div */

div#groupApprovalDiv {
	position: absolute;
	left: 0vh;
	top: 0vh;
	height: 100% !important;
	width: 16% !important;
	padding: 0vh 0vh !important;
	margin: 0vh 0vh !important;
	
	overflow-y: scroll !important;
	overflow-x: hidden !important;
	
	font-size: 2vh !important;
	line-height: 2.1vh !important;
	
	z-index: 99;
}

.groupHeader {
	text-decoration: underline;
	text-decoration-color: var(--secundary-colour);
	text-decoration-thickness: 0.85vh;
}

/* popups */

#mainGamePopupContainer {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0vh;
	left: 0vh;
}

.popup {
	position: relative;
	background: white;
	color: var(--main-colour);
	border: 1vh solid var(--secundary-colour);
	border-radius: 10vh;
	z-index: 999 !important;
	padding: 1vh;
	margin: 1vh;
	
	line-height: 0vh;
	display: flex;
	justify-content: center;
}

/* nameplates */

.nameplate {
	height: auto;
	position: absolute;
	width: auto;
	z-index: 850 !important;
	
	background-color: #FCFCFD;
	border-radius: 0.5vh;
	border-width: 0;
	box-shadow: rgba(45, 35, 66, 0.4) 0 0.2vh 0.4vh,rgba(45, 35, 66, 0.3) 0 0.7vh 1.3vh -0.3vh,#D6D6E7 0 -0.4vh 0 inset;
	box-sizing: border-box;
	padding-left: 0.5vh;
	padding-right: 0.5vh;
}

/* main canvas */

#mainGameCanvasDiv {
	z-index: 90;
	top: 12%;
}
#mainGameCanvas {
	background: #fff;
}

/* coalitioning */

#coalitionDiv {
	padding-bottom: 2.5%;
}

.transQuarterEvent > #coalitionDiv { /*if its not the first time making a coalition, so if its embedded into a trans quarter event and not a scripted event */
	padding-bottom: 5%;
}

/* SETTINGS MENU CSS */

#settingsMenu {
	position: absolute;
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	background: #eee;
	opacity: 0.9;
	z-index: 200;
	border-radius: 1vh;
	text-align: center;
}
#settingsMenuCloseSettingsMenuButton {
	position: absolute;
	top: 0vh;
	right: 0vh;
	height: 5vh !important;
}


/* START MENU CSS */

#startMenuDiv {	
	height: 100%;
	width: 100%;
}

#startMenuDiv > hr {
	border-top: 0.15vh solid var(--main-colour);
	background: transparent;
	border-left: none;
	border-right: none;
}

#flippedDocument1 {
	position: absolute;
	left: 25%;
	top: 15%;
	transform: rotate(5deg);
	width: 30%;
	height: 15%;
	
	z-index: 101;
}
#flippedDocument2 {
	position: absolute;
	left: 40%;
	top: -5%;
	transform: rotate(-5deg);
	width: 30%;
	height: 15%;
	
	z-index: 102;
}
#flippedDocument3 {
	position: absolute;
	left: 32%;
	top: 10%;
	transform: rotate(4deg);
	width: 30%;
	height: 15%;
	
	z-index: 110;
}
#flippedDocument4 {
	position: absolute;
	left: -5%;
	top: -5%;
	transform: rotate(-15deg);
	width: 30%;
	height: 15%;
	
	z-index: 102;
}
#flippedDocument5 {
	position: absolute;
	left: 0%;
	top: 25%;
	transform: rotate(5deg);
	width: 30%;
	height: 15%;
	
	z-index: 102;
}
#flippedDocument6 {
	position: absolute;
	left: -5%;
	top: 50%;
	transform: rotate(-20deg);
	width: 30%;
	height: 15%;
	
	z-index: 102;
}
#flippedDocument7 {
	position: absolute;
	left: 25%;
	top: 55%;
	transform: rotate(15deg);
	width: 30%;
	height: 15%;
	
	z-index: 102;
}
#flippedDocument8 {
	position: absolute;
	left: 22.5%;
	top: -10%;
	transform: rotate(-10deg);
	width: 30%;
	height: 15%;
	
	z-index: 101;
}
#flippedDocument9 {
	position: absolute;
	left: 87%;
	top: 20%;
	transform: rotate(5deg);
	width: 15%;
	height: 15%;
	
	z-index: 102;
}
#flippedDocument10 {
	position: absolute;
	left: 60%;
	top: 45%;
	transform: rotate(-10deg);
	width: 30%;
	height: 15%;
	
	z-index: 102;
}
#flippedDocument11 {
	position: absolute;
	left: 55%;
	top: -5%;
	transform: rotate(-7deg);
	width: 30%;
	height: 15%;
	
	z-index: 101;
}
#flippedDocument12 {
	position: absolute;
	left: 80%;
	top: 65%;
	transform: rotate(6deg);
	width: 30%;
	height: 15%;
	
	z-index: 102;
}
#flippedDocument13 {
	position: absolute;
	left: 80%;
	top: -5%;
	transform: rotate(-5deg);
	width: 30%;
	height: 15%;
	
	z-index: 101;
}
#flippedDocument14 {
	position: absolute;
	left: 60%;
	top: 25%;
	transform: rotate(15deg);
	width: 30%;
	height: 15%;
	
	z-index: 101;
}
#flippedDocument15 {
	position: absolute;
	left: -5%;
	top: 70%;
	transform: rotate(-5deg);
	width: 30%;
	height: 15%;
	
	z-index: 101;
}

/* gocs */

.goc {
	background: /*var(--secundary-colour)*/#fff /*url("hammer-and-sickle.png") -5rem -5rem no-repeat*/ !important;
	border-left: 1vh solid var(--secundary-colour) !important;
	box-shadow: 0.1vh 0.1vh 0.4vh #27549582;
	color: var(--main-colour);
  
	width: 84%;
	padding: 0.2vh 1.75vh;
	margin: 1.5vh auto;
}

.goc hr {
	border-top: 0.05vh solid #275495 !important;
	background: transparent !important;
	border-left: none !important;
	border-right: none !important;
	color: var(--secundary-colour)
}

/* dumb and technical */

.clearFloatsAfter:after {
	content: "";
	display: table;
	clear: both;
}