body {
	background-color:#222;
	font-family: "Helvetica Neue", sans-serif;
	overflow: hidden; /* Hide scrollbars */
}

#draggable {
	position:relative;
	top:-70vh;
	left:-5vw; 
	display:block;
}
		
button {
	text-transform: uppercase;
	font-size: 3vw;
	padding: 3px 15px;
	color: black;
	line-height: 25px;
	background-color: #d4bc0b;
	border: none;
	cursor: pointer;
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px;
	transition: all 150ms ease-in;
	outline: none;
	vertical-align: middle;
	z-index:25;
}

button:hover {
    background-color: #ad8407;
}


button.btn_bid {
	position: fixed;
	width:6vw;
	height:3vh;
	top: 61vh;
	visibility: visible;
	font-size: 1vw;
	padding: 3px 15px;
	background-color: #a7b000;
	border-radius: 0.5vw;
}

#menuicon {
	position:fixed;
	width:2.5vw;
	height:2.5vw;
	left: 10.25vw;
	top:0.25vh;
	z-index:190;
}
#resetView {
	position:fixed;
	width:2.5vw;
	height:2.5vw;
	left: 13vw;
	top:0.25vh;
	z-index:190;
}
#newgamebtn {
	position:fixed;
	width:12vw;
	height:2.25vw;
	left: 10.25vw;
	top:6vh;
	z-index:190;
}
#teambtn {
	position:fixed;
	width:12vw;
	height:2.25vw;
	left: 10.25vw;
	top:12vh;
	z-index:190;
}
#skipturn {
	position:fixed;
	width:12vw;
	height:2.25vw;
	left: 10.25vw;
	top:18vh;
	z-index:190;
}
#rulesbtn {
	position:fixed;
	width:12vw;
	height:2.25vw;
	left: 10.25vw;
	top:24vh;
	z-index:190;
}


.teampick {
	background-color:#AAA;
	color:			#ebeded;
	position: 		absolute;
	top: 			20vh;
	width:			5vw;
	height:			5vh;
	border-radius: 	1vw;
	font-size: 		2vw;
	text-align: 	center;
	padding-top: 	0.1vw;
	z-index:		191;
}
.teampick#pickteam5{	background:#c70095; 	color:black;	right:15vw;	}
.teampick#pickteam4{	background:#b0040f; 	color:black;	right:22vw;	}
.teampick#pickteam3{	background:#e6a400; 	color:black;	right:29vw;	}
.teampick#pickteam2{	background:#53e61e; 	color:black;	right:36vw;	}
.teampick#pickteam1{	background:#22c2c7; 	color:black;	right:43vw;	}

.scoreboard {
	background-color:#AAA;
	color:			#ebeded;
	position: 		fixed;
	top: 			0vh;
	width:			5vw;
	height:			5vh;
	border-radius: 	0 0 0 1vw;
	font-size: 		2vw;
	text-align: 	center;
	padding-top: 	0.1vw;
	z-index:		220;
}
.scoreboard.magenta{background:#c70095; 	color:black;	right:9.5vw;	}
.scoreboard.red{	background:#b0040f; 	color:black;	right:13.5vw;	}
.scoreboard.yellow{	background:#e6a400; 	color:black;	right:17.5vw;	}
.scoreboard.green{	background:#53e61e; 	color:black;	right:21.5vw;	}
.scoreboard.cyan{	background:#22c2c7; 	color:black;	right:25.5vw;	}

#wait_for_turn_indicator {
	color: #c96170;
	text-align: center;
	padding-top: 3vh;
	text-transform: uppercase;
	font-size: 4vh;
	background-color:#592129;
	opacity: 0.8;
	position: 		fixed;
	top: 			2vh;
	left:			25vw;
	width:			40vw;
	height:			8vh;
	z-index:		201;
	margin: auto;
	border-radius: 2vh;
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px;
	transition: all 150ms ease-in;
	-webkit-animation: pulse linear 1s infinite;
	animation: pulse linear 1s infinite;
	visibility: hidden;
}
@-webkit-keyframes pulse {
	0% { opacity:0.8; } 
	50% { opacity:0.7; }
	100% { opacity:0.8; }
}
#turnindicator{
	background-color:#0d00bd;
	position: 		absolute;
	top: 			0vh;
	width:			4vw;
	height:			0.4vh;
	z-index:		301;
	visibility:		visible;
}
.turn_indicator_magenta	{ 	right:9.5vw;	width:5vw}
.turn_indicator_red		{	right:14.5vw;	}
.turn_indicator_yellow	{	right:18.5vw;	}
.turn_indicator_green	{	right:22.5vw;	}
.turn_indicator_cyan	{	right:26.5vw;	}
#teamind_1 {
	position: 		absolute;
	top: 			5.45vh;
	right:			27vw;
	width:			2vw;
	height:			2vh;
	z-index:		102;
	visibility:		hidden;
}
#teamind_2 {
	position: 		absolute;
	top: 			5.45vh;
	right:			23vw;
	width:			2vw;
	height:			2vh;
	z-index:		102;
	visibility:		hidden;
}
#teamind_3 {
	position: 		absolute;
	top: 			5.45vh;
	right:			19vw;
	width:			2vw;
	height:			2vh;
	z-index:		102;
	visibility:		hidden;
}
#teamind_4 {
	position: 		absolute;
	top: 			5.45vh;
	right:			15vw;
	width:			2vw;
	height:			2vh;
	z-index:		102;
	visibility:		hidden;
}
#teamind_5 {
	position: 		absolute;
	top: 			5.45vh;
	right:			11vw;
	width:			2vw;
	height:			2vh;
	z-index:		102;
	visibility:		hidden;
}

.trains_remaining {
	color:			#ebeded;
	position: 		fixed;
	top: 			0.1vh;
	font-size: 		1vw;
	z-index:		239;
}
#trains_remaining_5 { right:13vw;	}
#trains_remaining_4 { right:17vw;	}
#trains_remaining_3 { right:21vw;	}
#trains_remaining_2 { right:25vw;	}
#trains_remaining_1 { right:29vw;	}

.pool {
	position:fixed;
	top:0vh;
	left:0vw; 
	width: 10vw;
	height: 100vh;
	background-color: #111;
	z-index:90;
	visibility:visible;
}

.carddeck {
	position:absolute;
	top:1vh;
	left:1vw; 
	width: 8vw;
	height: 8vw;
	z-index:99;
}
.vancard {
	width: 8vw;
	height: 5.75vw;
	z-index:99;
}

#faceup0 {
	position:absolute;
	top:9vw;
	left:1vw; 
}
#faceup1 {
	position:absolute;
	top:15vw;
	left:1vw; 
}
#faceup2 {
	position:absolute;
	top:21vw;
	left:1vw; 
}
#faceup3 {
	position:absolute;
	top:27vw;
	left:1vw; 
}
#faceup4 {
	position:absolute;
	top:33vw;
	left:1vw; 
}

.routepool {
	position:absolute;
	top:40vw;
	left:2vw; 
	width: 6vw;
	height: 6vw;
	z-index:99;
}

.routepicker {
	position:absolute;
	top:0vh;
	left:0vw; 
	width: 10vw;
	height: 100vh;
	background-color: #111;
	z-index:90;
	visibility:hidden;
}
.routeoption {
	position:absolute;
	left:1vw; 
	width: 8vw;
	height: 8vw;
	z-index:99;
	background-color:#ebdf83;
}
.routeoptiontext {
	font-size:1.65em;
}
#routeoption0 {	top:10vw;	}
#routeoption1 {	top:20vw;	}
#routeoption2 {	top:30vw;	}
button.keepbtn {
	position:absolute;
	right:0vw; 
	bottom:0vh;
	width: 4vw;
	height: 1.5vw;
	z-index:100;
	background-color:#08a816;
	font-size:1em;
}
button.keepbtn:hover {
	background-color:#76e380;
}
button.discardbtn {
	position:absolute;
	left:0vw; 
	bottom:0vh;
	width: 4vw;
	height: 1.5vw;
	z-index:100;
	background-color:#bf0808;
	font-size:1em;
}
button.discardbtn:hover {
	background-color:#e37676;
}
button.acceptbtn {
	position:absolute;
	left:1vw; 
	bottom:1vh;
	width: 8vw;
	height: 3vw;
	z-index:99;
	background-color:#d4bc0b;
	font-size:2em;
}
button.acceptbtn:hover {
	background-color:#deca7a;
}

.personal {
	position:fixed;
	top:0vh;
	right:0vw; 
	width: 9.5vw;
	height: 100vh;
	background-color: #111;
	z-index:90;
	visibility:visible;
	color:white;
}
.personal_cards {
	width: 7vw;
	height: 5vw;
	z-index:99;
}
#pvan0 {	position:absolute;	font-size:2em;	top:0vw;	right:0vw;	}
#pvan1 {	position:absolute;	font-size:2em;	top:5.25vw;	right:0vw;	}
#pvan2 {	position:absolute;	font-size:2em;	top:10.5vw;	right:0vw;	}
#pvan3 {	position:absolute;	font-size:2em;	top:15.75vw;right:0vw;	}
#pvan4 {	position:absolute;	font-size:2em;	top:21vw;	right:0vw;	}
#pvan5 {	position:absolute;	font-size:2em;	top:26.25vw;right:0vw;	}
#pvan6 {	position:absolute;	font-size:2em;	top:31.5vw;	right:0vw;	}
#pvan7 {	position:absolute;	font-size:2em;	top:36.75vw;right:0vw;	}
#pvan8 {	position:absolute;	font-size:2em;	top:42vw;	right:0vw;	}

#mycards0 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:white;}
#mycards1 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:grey;}
#mycards2 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:white;}
#mycards3 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:pink;}
#mycards4 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:red;}
#mycards5 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:orange;}
#mycards6 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:yellow;}
#mycards7 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:green;}
#mycards8 {	position:absolute;	font-size:2.5vw;	top:1.25vw;	right:7.5vw; color:cyan;}

.myroutesbtn {
	position:absolute;
	bottom:0.5vh;
	right:2vw; 
	width: 3vw;
	height: 3vw;
	z-index:101;
}

#actions_remaining {
	color: #AAA;
	position:absolute;	
	font-size:2em;	
	top:95vh;	
	left:1vw;
}

#my_route_collection {
	position:fixed;
	bottom:0vh;
	right:9.5vw; 
	width: 80.5vw;
	height: 18vh;
	background-color: #444;
	z-index:94;
	visibility:hidden;
	color:white;
}
.route_card {
	float: left;
	background-color: #DCD1BF;
	color: #222;
	font-size: 2.25vh;
	border-radius: 0.6vh;
	width: 25vw;
	margin: 0.7vh;
	padding: 0.3vh;
	position:relative;
}
.route_card_green {
	float: left;
	background-color: #c5e388;
	color: #222;
	font-size: 2.25vh;
	border-radius: 0.6vh;
	width: 25vw;
	margin: 0.7vh;
	padding: 0.3vh;
	position:relative;
}
.route_card_finished {
	position: absolute;
	background-color: #4287f5;
	border-radius: 0.6vh;
	width: 2vw;
	height: 100%;
	top:0;
	right:0;
}

.bus {
	width:3vw; 
	z-index:66; 
	position:absolute; 
	transform: rotate(0deg);
}
#bus_bag {
	visibility: visible; 
}

#payment_window {
	position: fixed;
	left: 25vw;
	top: 15vh;
	width: 50vw;
	height: 40vh;
	background-color: #333;
	font-size: 2vh;
	z-index:94;
	visibility:hidden;
	color:#CCC;
	padding:1vw;
}
#pay_cards {
	width: 6vw;
	height: auto;
	position:absolute;
	bottom: 1.5vh;
	right: 47%;
}
.paytext {
	position:absolute;
	bottom: 3vh;
	left: 30%;
	font-size: 3vh;
	color:#AAA;
}
button.bottomCancelButton {
	position: absolute;
	bottom: 2vh;
	right:2vw;
	width: 10vw;
	height: 1.75vw;
	z-index:100;
	background-color:#bf0808;
	font-size:2vh;
}
button.bottomCancelButton:hover {
	background-color:#f56342;
}
.cost_card {
	position:absolute;
	width: 6vw;
	height: auto;
	bottom: 18vh;
}
#cost1 { left: 2vw; }
#cost2 { left: 10vw; }
#cost3 { left: 18vw; }
#cost4 { left: 26vw; }
#cost5 { left: 34vw; }
#cost6 { left: 42vw; }
.cost_status {
	position:absolute;
	width: 2.5vw;
	height: auto;
	bottom: 27vh;
}
#cost1status { left: 4vw; }
#cost2status { left: 12vw; }
#cost3status { left: 20vw; }
#cost4status { left: 28vw; }
#cost5status { left: 36vw; }
#cost6status { left: 44vw; }


#gameboard_svg {
	position:absolute;
	top:0;
	left:0;
	width:200vw;
	height:200vh;
	z-index:90;
	visibility: hidden;
}
.node {
	border-radius:1vw;
	background-color:#A8F;
	opacity:0.7;
}
.path {
	float:left;
	stroke:rgb(252,186,3);
	stroke-width:0.8;
	opacity:0.7;
}