[hidden] { display: none; }

canvas {
	background-color: #eeeeff; /*#FEFEFE;*/

	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 1000px;
    /*border: 1px solid #DDDDDD;*/

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    /*image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Safari
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: pixelated;                 // Awesome future-browsers
    -ms-interpolation-mode: nearest-neighbor;   // IE*/
}

@font-face {
  font-family: 'OpenSans';
  src: url("../fonts/OpenSans-Regular.ttf") format("opentype")
}

input.inputText {
    width: 150px;
    font-size: 16px;
    border-radius: 10px;
    text-align: center;
}

input:focus{
    outline: none;
}

#redBorderBox {
    width:170px;
    height:120px;
    border: 4px solid red;
    border-radius: 10px;
    /*z-index: 999;*/
    pointer-events: none;
}

#greenBorderBox {
    width:170px;
    height:120px;
    border: 4px solid green;
    border-radius: 10px;
    /*z-index: 999;*/
    pointer-events: none;
}

.closeButton {
    text-align:right; 
    float:right;
    cursor: pointer;
    font-size: 18px;
    color: #444444; 
    /*#ee1a28*/
}







div {
  /*background: red;*/
  margin: 0px;
}

table {
  /*border: 2px solid black;*/
  margin-left: auto;
  margin-right: auto;
}

td {
  padding: 5px 20px;
  /*border: 1px solid lightgrey;*/
}

th {
    /*border: 1px solid lightgrey;  */
    padding:5px 20px;
}


#icmChop input {
    background-color: #f2fff2;
}

#chopChop input {
    background-color: #fff2f2;
}

/*input {
    text-align: center;
    border-radius: 10px;
    height:20px;
    font-size:14px;
}*/

body {
    font-family: 'Open Sans', sans-serif;
    /*text-align:center; */
    background-color:transparent;
}

h2 {
    color:#333;
    font-size: 24px;
    font-weight: bold;
}

h3 {
    margin-top:-20px;
    margin-bottom: 20px;
    color:#777;
    font-size: 16px;
}

button {
    font-size: 20px;
    color: white;
    border-radius: 10px;
    background-color: #ee1a28; /*#686892;*/
    padding: 10px 30px;
    cursor: pointer;
    border: 1px solid grey;
}

button.small:focus,
button.smaller:focus {
    outline:0;
}

button.small {
    font-size: 14px;
    border-radius: 15px;
    background-color: #8181b5; /*#686892;*/
    min-width: 40px;
    text-align: center;
    padding:4px 8px;
    cursor: pointer;
    margin: 2px 1px 0px 0px;
}

button.smaller {
    font-size: 12px;
    border-radius: 10px;
    background-color: #8181b5;
    min-width: 30px;
    text-align: center;
    padding:0;
    cursor: pointer;
    margin: 0px -2px 0px 0px;
}


#divLightboxCompute {
    background-color: white;
    /*background-image: url(../img/aptLogoAlpha.png); */                                /****** PUT BACK ******/
    background-repeat: no-repeat;
    background-position: center; 
    width: 900px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 25px;
    padding:10px;

    border: 1px solid whitesmoke;
   /* box-shadow: 4px 4px 4px #999;*/

    text-align:center;

    /*overflow-y:auto;*/
}

#numPlayers {
    font-weight: bold;
}

#errorMsg {
    color:red;
}


/* Tooltip container */
.tooltip {
    background-image:url(../assets/images/icons/question_mark_15.png);
    width:15px;
    height:15px;
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;  If you want dots under the hoverable text */
    cursor:pointer;
    /*display: none;*/                                                                      /****** PUT BACK ******/
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: lightyellow;
    color: #000;
    text-align: left;
    padding: 5px 8px;
    border-radius: 4px;
    border-color: #aaa;
    border-style: solid;
    border-width: 1px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 9999;

    /*margin-left: -135px;*/
    /*margin-top: 25px;*/
    left: -145px;
    bottom: 30px;

    font-weight: normal;

    box-shadow: 2px 2px 3px #666;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}