/* Main board window */

body {
	overflow: hidden;
}

#board-viewport {
	height: 100vh;
	width: 100vw;
	position: absolute;
	z-index: 0;
	overflow: hidden;
}

.above-board {
	z-index: 10;
}

.below-board {
	z-index: -1;
}

#end-turn-btn {
	margin-left: 15px;
}

.pointer {
	cursor: pointer;
}

.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#turn-display-container {
	margin-left: 15px;
	margin-top: 15px;
}

.turn-square {
	display: inline-block;
	border: 1px solid black;
	border-right-width: 0px;
}

.turn-square:first-of-type {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.turn-square:last-of-type {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-right-width: 1px;
}

.selected-turn-square {
	box-shadow: inset 0 0 7px black, 0 0 7px black;
}

/* Hand */

#hand-resources > .navbar-btn + .navbar-btn,
#hand-dev-cards > .navbar-btn + .navbar-btn {
	margin-left: 10px;
}

.circle {
	border-radius: 50%;
}

.card-circle {
	background-color: #BBBBBB;
	height: 40px;
	width: 40px;
}

.card-circle > img {
	margin-top: 2.6px;
	height: 100%;
	width: 100%;
	z-index: 6;
}

.card-circle > img[src="images/icon-year-of-plenty.svg"] {
	margin-top: -1px;
}

/* Messages */

#message-container > div {
	margin-left: 10%;
	margin-right: 10%;
	border-radius: 4px 4px 0px 0px;
	background-color: #FFFFFF;
	padding-top: 5px;
	padding-bottom: 5px;
}

#message-container > div > * {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

.message-popup-animation {
	animation-name: message-popup;
	animation-duration: 0.5s;
}

@keyframes message-popup {
	from {
		transform: translate(0px, 40px);
	}

	to {
		transform: translate(0px, 0px);
	}
}

/* Right menu */

.right-tab-content {
	padding-right: 0px;
	padding-left: 0px;
}

.nav-pills.nav-stacked {
	padding-right: 0px;
}

#right-tab-tabs > li {
	border-radius: 4px 0px 0px 4px;
}

#right-tab-tabs > li > a {
	border-radius: inherit;
}

.right-tab {
	background-color: #FFFFFF;
}

.right-tab-pane {
	height: 100vh;
	background-color: #FFFFFF;
}

.navbar-right {
	padding-right: 15px;
}

.navbar-btn {
	padding-left: 2px;
	padding-right: 2px;
}

.right-inner-tabs:first-child {
	padding-left: 10px;
}

/* Player tab */

#player-tabs-content {
	height: 100%;
}

.player-tab-pane {
	padding: 10px;
	height: 100%;
}

.player-tab-panel {
	margin-bottom: 10px;
}

.player-name {
	margin-bottom: 15px;
}

.panel-title-small {
	margin-top: 0px;
	margin-bottom: 0px;
}

.player-tab-vp-icon {
	height: 40px;
	width: 40px;
}

.player-victory-points {
	margin-bottom: 0px;
}

.playing-to {
	margin-top: 0px;
}

.longest-road-banner, .largest-army-banner {
	padding: 0px;
	border: 1px solid black;
	border-radius: 5px;
	margin-bottom: 10px;
}

.longest-road-banner img, .largest-army-banner img {
	height: 30px;
	width: 30px;
	margin-left: 10px;
}

/* Build tab */

.build-btn {
	margin-bottom: 15px;
}

.build-circle {
	background-color: #BBBBBB;
	height: 20px;
	width: 20px;
	margin-bottom: 5px;
	display: inline-block;
}

.build-circle > img {
	margin-top: 1.3px;
	height: 100%;
	width: 100%;
	z-index: 6;
}

.build-circle-list-number {
	float: left;
	margin-right: 4px;
	margin-left: 15px;
}

.build-circle-list {
	float: left;
	margin-right: 3px;
}

/* Trade tab */

.trade-row > div {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
}

.interplayer-trade-panel {
	margin-left: 10px;
	margin-right: 10px;
}

.inline-trade-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 5px;
}

.inline-trade-icon > img {
	height: 100%;
	width: 100%;
	margin-top: -1px;
}

#to-give-panel {
	margin-top: 10px;
}

#to-give-container, #to-get-container {
	padding: 0px;
}

.to-give-list-item, .to-get-list-item {
	margin-left: 5px;
	margin-right: 5px;
}

#to-give-container > p, #to-get-container > p {
	margin-top: 2px;
	margin-bottom: 2px;
}

.trade-circle {
	display: inline-block;
	height: 35px;
	width: 35px;
	margin-right: 5px;
}

.trade-circle > img {
	margin-top: 2.2px;
	height: 100%;
	width: 100%;
}

.wildcard-circle {
	background-color: white;
	border: 2px solid black;
}

#bank-trade-tab {
	padding: 0px 10px 10px 10px;
}

.bank-to-give-container, .bank-to-get-container {
	display: inline-block;
	margin-right: 10px;
}

.trade-rate-container {
	letter-spacing: -1.5px;
}	

.trade-rate-container strong {
	letter-spacing: normal;
}

.last-to-give-get-container {
	margin-right: 0px;
}

.bank-to-give-container .trade-circle,
.bank-to-get-container .trade-circle {
	margin-right: 0px;
}

.bank-to-give-container > h5 {
	margin-top: 5px;
}

.bank-to-get-container {
	margin-top: 5px;
}

.to-give-circle-container, .to-get-circle-container {
	padding: 10px;
	margin: -10px;
}

#bank-give-amount-label {
	margin-top: 15px;
}

#bank-give-amount {
	margin-top: 0px;
}

#bank-trade-amount-container {
	margin-top: 10px;
	margin-bottom: 0px;
}

#bank-trade-amount-input {
	width: 80px;
	display: inline-block;
}

.highlighted-to-give-get-circle {
	background: radial-gradient(closest-side, rgba(255,255,0,1), rgba(255,255,0,1) 50%, rgba(255,255,0,0) 100%);
}

#bank-trade-btn {
	margin-top: 5px;
}

/* Options Tab */

#exit-game-toggle-btn {
	margin-top: 10px;
}

/* Board */

.brick-color {
	background-color: #945D3F;
}

.wood-color {
	background-color: #408754;
}

.wheat-color {
	background-color: #EAC932
}

.ore-color {
	background-color: #A1AFDA;
}

.sheep-color {
	background-color: #83B94E;
}

.desert-color {
	background-color: #C5BA96;
}

.sea-color {
	background-color: #B5D7E5;
}

.wildcard-color {
	background-color: #FFFFFF;
}

.hexagon-wrapper {
  text-align: center;
  position: absolute;
  display: inline-block;
  z-index: 1;
}

.hexagon {
  height: 100%;
  width: 57.735%;
  display: inline-block;
  z-index: 1;
}

.hexagon:before {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(60deg);
  z-index: 1;
}

.hexagon:after {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(-60deg);
  z-index: 1;
}

.hexagon, .hexagon:before, .hexagon:after {
	/*border-top: 1px solid black;*/
	/*border-bottom: 1px solid black;*/
}

.number-circle {
	position: absolute;
	text-align: center;
	vertical-align: middle;
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
	z-index: 2;
}

.number-circle-color {
	background-color: #FAEDDA;
}

.number-circle-highlighted {
	box-shadow: 0px 0px 3px 3px rgba(255,255,0,0.5);
	cursor: pointer;
}

.red-number {
	color: #D35443;
}

.dots-container {
	display: inline-block;
}

.number-dot {
	height: 10px;
  	width: 10px;
  	float: left;
  	margin-left: 2px;
  	background-color: black;
}

.red-number-dot {
	background-color: #D35443;
}

.desert-circle {
	background-color: transparent;
	box-shadow: none;
}

.sea-circle {
	box-shadow: none;
}

.robber-icon {
	width: 85%;
	height: 85%;
	display: inline-block;
	vertical-align: middle;
}

.port-icon {
	width: 100%;
	height: 100%;
	margin-top: 2.9px;
}

.port-circle {
	position: absolute;
	border: solid 1px black;
	width: 50px;
	height: 50px;
	z-index: 0;
}

.intersection {
	position: absolute;
	z-index: 4;
}

.settlement-icon {
	stroke: black;
	stroke-width: 0.5px;
	position: absolute;
 }
 
.city-icon {
	stroke: black;
	stroke-width: 3px;
	position: absolute;
}

.intersection-select {
	background-color: transparent;
	position: absolute;
	z-index: 7;
}

.path {
	position: absolute;
	border-radius: 5px;
	/*border-left: 1px solid black;*/
	/*border-right: 1px solid black;*/
	z-index: 0;
}

.path-select {
	position: absolute;
	border: radius 5px;
	z-index: 2;
}

.highlighted {
/*	animation-duration: 1s;
	animation-name: highlight-pulse;
	animation-direction: alternate;
	animation-iteration-count: infinite;*/
	background: radial-gradient(closest-side, rgba(255,255,0,1), rgba(255,255,0,0.5) 65%, rgba(255,255,255,0) 100%);
	cursor: pointer;
}

.highlighted-path {
	/*background: rgba(255,255,0,0.75);*/
	background: linear-gradient(to bottom, rgba(255,255,0,0), rgba(255,255,0,1) 40%, rgba(255,255,0,1) 60%, rgba(255,255,0,0) 100%);
	cursor: pointer;
}

/*@keyframes highlight-pulse {
	0% {
		background: rgba(255,255,0,0.75);
	}

	100% {
		background: none;
	}
}*/

/* Modal stylings */
.inline-circle {
	display: inline-block;
	height: 20px;
	width: 20px;
}

.inline-circle > img {
	height: 100%;
	width: 100%;
}

.monopoly-circle-container {
	display: inline-block;
	padding: 10px;
	margin-left: -7.5px;
	margin-right: -7.5px;
}

.monopoly-circle {
	height: 50px;
	width: 50px;
}

.monopoly-circle > img {
	margin-top: 3.3px;
	height: 100%;
	width: 100%;
}

.highlighted-monopoly-circle {
	background: radial-gradient(closest-side, rgba(255,255,0,1), rgba(255,255,0,1) 50%, rgba(255,255,0,0) 100%);
}

.yop-resource-container {
	display: inline-block;
	width: 70px;
	margin-left: 5px;
}

.yop-circle {
	height: 60px;
	width: 60px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
}

.yop-circle > img, .discard-circle > img {
	margin-top: 3.3px;
	height: 100%;
	width: 100%;
}

.discard-circle {
	height: 60px;
	width: 60px;
	margin-bottom: 5px;
	margin-left: 10px;
	margin-right: 10px;
}

.discard-resource-container {
	display: inline-block;
	width: 80px;
	margin-left: 5px;
}

.welcome-inline-color {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

#welcome-turn-order-container {
	font-size: 20px;
}

.review-to-give-list-item, .review-to-get-list-item {
	margin-bottom: 5px;
}

.trade-responses-to-give-list-item, .trade-responses-to-get-list-item {
	margin-bottom: 5px;
}

.modal-footer-center {
	text-align: center;
}

#dice-distribution-container {
	display: inline-block;
	width: 300px;
	height: 300px;
}

#game-settings-container {
	margin-bottom: 10px;
}

#message-history-list {
	max-height: 300px;
	overflow-y: auto;
	margin-bottom: 0px;
}