.cardObject {
/*	width:133px;
	height:100px;
	float:left;*/
	border: 1px solid black;
	cursor: pointer;
}

.cardImage {
	width: 100%;
	float: left;
	clear: left;
}

.cardPlayer {
	border: 1px solid red;
}

.insideCard {
	position: absolute;
	bottom: 0px;
}

.boatsHolder {
	position:absolute;
	/*width:100px;*/
	/* height:40px; */
}

/*.isPossible {
	position:absolute;
	background-color:white;
	bottom: 0px;
}*/

.cardInfo {
	position:absolute;
	width:100px;
	height:20px;
}

.waterInfo {
	top: 0px;
	position:absolute;
}

.edge {
	position:absolute;
	bottom:20px;
}




/*.player1boat > .unitsHolder {
	position:absolute;
	width:100%;
	height:20px;
	bottom: 40%;
}*/

.diver {
	width: 20px;
  	height: 20px;
   	margin: auto;
	float: left;
	background-repeat: no-repeat;
}

.player1color {
	background-color: red;
}
.player2color {
	background-color: rgb(7, 163, 163);
}
.player3color {
	background-color: rgb(14, 122, 8);
}
.player4color {
	background-color: rgb(120, 122, 8);
}

.player1unit {
	background: radial-gradient(1.2em 1.2em at 50% 50%, red 50%, transparent 50%); 
}

.player2unit {
	background: radial-gradient(1.2em 1.2em at 50% 50%, rgb(7, 163, 163) 50%, transparent 50%);
}

.player3unit {
	background: radial-gradient(1.2em 1.2em at 50% 50%,  rgb(14, 122, 8) 50%, transparent 50%);
}

.player4unit {
	background: radial-gradient(1.2em 1.2em at 50% 50%, rgb(120, 122, 8) 50%, transparent 50%);
}

.possibleMove {
	position:absolute;
	background:
    linear-gradient(black, gray) 50% 0% / 100% 0.4em,
    linear-gradient(gray, black) 0 100% / 100% 0.4em, 
    linear-gradient(gray, gray) 0 50% / 0.4em 100%, 
    linear-gradient(gray, gray) 100% 0 / 0.4em 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.horizontalVerticalCard {
	background:
    linear-gradient(red, red) 50% 50% / 100% 1.2em,
    linear-gradient(red, red) 50% 50% / 1.2em 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.treasureHolder {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 25%;
}

.unitsHolderOne {
	position:absolute;
	width:20px;
	height:20px;
	bottom:41%;
	left: 42%;
}

.unitsHolderTwo {
	position:absolute;
	width:40px;
	height:20px;
	bottom:42%;
	left: 33%;
}

.unitsHolderThree, .unitsHolderFour {
	position:absolute;
	width:40px;
	height:40px;
	bottom:32%;
	left: 32%;
}

@media (max-width: 991.98px) {
	.treasureHolder {
		height: 50%;
		width: 50%;
		left: 25%;
	}
	.unitsHolderOne {
		bottom:35%;
		left: 35%;
	}
	.unitsHolderTwo  {
		bottom:35%;
		left: 24%;
	}
	.unitsHolderThree, .unitsHolderFour {
		bottom:15%;
		left: 15%;
	}
}

@media (max-width: 575.98px) {
	.unitsHolderOne {
		bottom:32%;
		left: 32%;
	}
	.unitsHolderTwo  {
		bottom:31%;
		left: 14%;	
	}
}

.outer-water {
	color: #ffffff;
	background-color: #3f48cc;
}

.shallows {
	color: #3f48cc;
	background-color: #99d9ea;
}