[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}


/* To prevent long-press that will bring up copy-paste dialog. */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  -ms-touch-callout: none;
  touch-callout: none;
  outline: 0; /* To prevent blue-box outline after click: http://stackoverflow.com/questions/21719306/getting-rid-of-a-blue-box-around-button-when-pressed */
}

textarea, input {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

.slowlyAppear {
  animation: slowlyAppear 0.5s linear;

}

.R {
  /*border: 0.5px solid grey;*/
  /*background-color: rgb(255, 128, 170);*/
  background-color: rgb(240,113,171);
  border-radius: 10%;
  /*opacity: 0.8;*/
}

.G {
  /*border: 1% solid grey;*/
  /*background-color: rgb(71, 209, 71);*/
  background-color: rgb(185,133,187);

  /*border: 12% solid grey;*/
  /*background-color: rgb(71, 209, 71);*/
  border-radius: 10%;
  /*opacity: 0.8;*/
}

.B {
  /*border: 0.5px solid grey;*/
  /*background-color: rgb(51, 204, 255);*/
  background-color: rgb(88,165,219);
  border-radius: 10%;
  /*opacity: 0.8;*/
}

.Y {
  /*border: 0.5px solid grey;*/
  /*background-color: rgb(246, 246, 85);*/
  background-color: rgb(243, 177, 97);
  border-radius: 10%;
  /*opacity: 0.8;*/
}


@keyframes slowlyAppear {
  from {opacity: 0.1;}
  to {opacity: 1;}
}

/* the following is the style of the game */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed!important;
}

#gameArea {
    margin-top: 10px;
    background-color: ghostwhite;
    height: 100px;
}

#boardArea {
    height: 100%;
}

.gameRow {
    position: absolute;
}

.gameBox {
    border: 0.5px solid lightgrey;
    /*background-color: lightgoldenrodyellow;*/
    background-color: rgb(247, 247, 247);
    border-radius: 10%;
}

.help-tip {
	position: absolute;
    bottom:5px;
    left: 5px;
    z-index:10;
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 22px;
	line-height: 42px;
	cursor: default;
}



.center {
    margin: 2%;
    text-align: center;
    font-size: 2em;
}

.div-inline1 {
    display:inline;
    font-size: 0.5em;
    font-weight: 900;
}

.div-inline2{
    display:inline;
    font-size: 0.5em;
    font-weight: 900;
}

.div-inline3{
    display:inline;
    font-size: 0.5em;
    font-weight: 900;
}

.currentPlayer {
  color: #20B2AA;
}

.opponentPlayer {
  color: #20B2AA;
}
#gameHelper button{
    border: 1px grey;
    border-radius: 5%;
    background-color: lightblue;
}
.rowBox {
    border-left: 1px grey;
    /*background-color: lightgoldenrodyellow;*/
    background-color: rgb(247, 247, 247);

}

.multiple {
    display:inline;
    margin: 15%;
    text-align: center;
    font-family: Georgia;
    font-size: 2em;
    color: lightgrey;
}
.multiplex {
    display:inline;
    margin: 15%;
    text-align: center;
    font-family: Georgia;
    font-size: 1em;
    color: lightgrey;
}

img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/* To prevent long-press that will bring up copy-paste dialog. */
/** {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  -ms-touch-callout: none;
  touch-callout: none;
  outline: 0; /* To prevent blue-box outline after click: http://stackoverflow.com/questions/21719306/getting-rid-of-a-blue-box-around-button-when-pressed */
/*}
textarea, input {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}*/
/*
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}*/

/* Help screen uses a carousel and a modal dialog. */
.carousel-indicators li {
  background-color: black !important;
}
.carousel-indicators .active {
  background-color: green !important;
}
.modal-dialog {
  z-index: 1001;
}
.overlayModal {
  background: rgba(0,0,0,0.5);
  text-align:center;
  z-index: 1000;
  position: absolute;
  left: 0px;
  top: 0px;
  width:100%;
  height:100%;
  transition: visibility 0s linear 0.25s, opacity 0.25s linear;
  -moz-transition: visibility 0s linear 0.25s, opacity 0.25s linear;
  -webkit-transition: visibility 0s linear 0.25s, opacity 0.25s linear;
}
.zeroOpacity {
  visibility: hidden;
  opacity: 0;
}
.oneOpacity {
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}
.modal-backdrop {
  z-index: 1000;
  position: absolute;
  left: 0px;
  top: 0px;
  width:100%;
  height:100%;
}