@charset "UTF-8";
/*************************************************************************
 * Draw-A-Thing Copyright © 2018, Ellusionist.com, Inc
 * 
 * ELLUSIONIST CONFIDENTIAL
 * __________________
 * 
 *  2017 Ellusionist.com, Inc 
 *  All Rights Reserved.
 * 
 * NOTICE: All information contained herein is, and remains
 * the property of Ellusionist.com, Inc and its suppliers,
 * if any. The intellectual and technical concepts contained
 * herein are proprietary to Ellusionist.com, Inc
 * and its suppliers and may be covered by U.S. and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * You are strictly prohibited to disseminate, reproduce, modify, reverse engineer, 
 * decompile, disassemble, copy, publish, rent, lend, lease or derive works 
 * from this software or circumvent any technical protection measures contained herein
 * unless prior written permission is obtained from Ellusionist.com, Inc.
 */

#canvascontainer {
	height:100hv;/*calc(100vh - (100vw/10) - 20px);*/
	width: 100vw;
	border-width: 1px;
	border-color: black;
	position:relative;
}
#sig-canvas{
	position: absolute;
	width: 100%;
	height: 100%;
	float: left;
	top:0;
	left:0;
	z-index: 1;
}
#headerBanner{
	width: 100%;
	height:10px;
	background-color:rgb(143, 175, 244);
	float: left;
	display: block;
	font-family: 'chalkduster';
}
#titleBanner{
	font-weight: 700;
	font-size: 1.5em;
	text-align: center;
	width: 100%;
	float: left;
	display: block;
	font-family: 'chalkduster';
}
.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap; 
	align-items: stretch;
}

.flex-cell {
  /*max-width: 14%;*/
  flex: 1 1 calc(100vw/10);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1rem;
  box-sizing: border-box;

}

.flex-cell:before {
  content: '';
  display: table;
  padding-top: 100%;
}

.flex-item {
  flex-grow: 1;  
  display: flex;
  justify-content: center;
  align-items: center;
	width:14%;
}
#colourContainer{
	position: absolute;
	height:calc(100vw/10);
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 100%;
	z-index: 10;
	bottom:15px;
}
#footer{
	position: fixed;
	margin: 0px auto;
	text-align: center;
	font-size: 0.3em;
	z-index: 11;
	width: 100%;
	bottom:1px;
}
.colourButton{
	/*width: 11vw;
    height: 11vw;*/
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
	margin: 1vw;
	/*float: right;*/
	height: calc(100vw/10);
width: calc(100vw/10);
}
.clearButton{
	/*padding-right: 5vw;
	width: 10vw;
	height: 10vw;*/
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
	margin: 1vw;
	/*float: left;*/
	vertical-align: bottom;
		height: calc(100vw/10);
width: calc(100vw/10);
}
.selected{
	border-width: 4px;
	border-style: solid;
	border-color: black;
}
#red{
	background: red;
}
#orange{
	background: orange;
}
#yellow{
	background: yellow;
}
#green{
	background: green;
}
#blue{
	background: blue;
}
#black{
	background: black;
}
body, html {
	font-family: -apple-system;
	position: fixed;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	background-color:#FFF;
	/*height: 100vh;*/
	width: 100vw;
	/*height:calc(100vh - constant(safe-area-inset-bottom));
	height:calc(100vh - env(safe-area-inset-bottom));	*/
}