html {
    margin: 0;
    padding: 0;
}
body {
    border: 0px solid red;
    color: white;
    background-color: #ccc;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    font-family: arial,helvetica,sans-serif;
    position: fixed;
    top: 0;
    left: 0;
}


/* menu ends */

/* SCREENS STYLES - common styles */

.screen {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -50%;
    left: 0%;
    background-color: #eeeeee;
    color: black;

    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

    overflow: hidden;
}

/* 
--------------------
top-bar 
--------------------
*/

.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #999;
    text-align: center;
    color: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    /* border-bottom: 1px solid #222; */
    line-height: 60px;
    font-size: 1.5em;

    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #7793dd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7793dd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7793dd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#7793dd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#7793dd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 0%,#7793dd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7793dd',GradientType=0 ); /* IE6-9 */

}
.top-padding-60{
    padding-top: 60px;
}

.bottom-margin-60 {
    padding-bottom: 60px;
}

.topBar-go-back {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2210.596%2C11.949%205.646%2C7%2010.596%2C2.05%208.475%2C-0.071%201.404%2C7%208.475%2C14.07%20%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 30px 30px;
    color: white;
    background-position: 13px center;
    width: 120px;
    height: auto;
    /* background-color: blue; */
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
    /* border-right: 1px solid rgba(255,255,255,0.5); */
    BORDER-RIGHT: 1px solid transparent;
    font-size: 18px;
    padding-left: 14px;
}

.topBar-go-back:hover {
    background-color: #00004a38;
}

/* top-bar ends */

/*
    General content
*/

.content {
    display: block;
    /* padding: 5px; */
    line-height: 18px;
}

label {
    padding: 5px;
    font-size: 14px;
    width: 100%;
    display: inline-block;
}

.scroll-this-content {
    overflow-y: scroll;
    width: 100%;
    height: 100%;

    height: 100px; /* Change this when we load the section */
    position: absolute;
    top: 60px;

}

.btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: #bfd255;
    text-align: center;
    color: white;
    border-radius: 3px;
    cursor: pointer;

    margin: 5px;

    background: #bfd255; /* Old browsers */
    background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
}

/* Startup Screen styles */
.startupScreen {
    background-color: white;
    z-index: 101;
    left: -0%;
    color: black;

    /*
    background: #ebf1f6;
    background: -moz-linear-gradient(top,  #ebf1f6 0%, #89c3eb 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(99%,#89c3eb));
    background: -webkit-linear-gradient(top,  #ebf1f6 0%,#89c3eb 99%);
    background: -o-linear-gradient(top,  #ebf1f6 0%,#89c3eb 99%);
    background: -ms-linear-gradient(top,  #ebf1f6 0%,#89c3eb 99%);
    background: linear-gradient(to bottom,  #ebf1f6 0%,#89c3eb 99%);
    */
    
    background-image: url("../img/simple-noise.png");

}

/* Paint section styles */
.section-paint {
    background: none;
    background-color: black;
    color: white;
    overflow: hidden;
}

/* About section styles */
.section-about {
    background-color: white;
    color: black;
    z-index: 100;
}

/* Choose colors section */
.colorPicker {
    background-color: black;
    /* background-image: url("../img/colorPicker.jpg"); */
    background-size: 100% 100%;
    height: 200px;
    left: 2%;
    position: relative;
    width: 96%;
    float: left;
    /* border: 1px solid white; */
    
    border: 1px solid #999;
    opacity: 0.3;
}

/* <div id="chk-color1" class="chk-label"><i></i>Random</div> */
.chk-label {
	line-height: 45px;
	height:45px;
	float: left;
	padding: 5px;
	position: relative;
}

.chk-label i {
	width:40px;
	height:40px;
	background-color: #fff;
	border-radius: 3px;
	border: 1px solid #ccc;
	float: left;
	display: block;
	margin-right: 5px;
}

#chk-v1, #chk-v2, #chk-v { 
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C4%2011%2C1%205.003%2C6.997%203%2C5%200%2C8%204.966%2C13%204.983%2C12.982%205%2C13%20%22%2F%3E%3C%2Fsvg%3E");
  background-color: green;
  width: 40px;
    height: 40px;
    position: relative;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    background-position: center center;
    background-color: green;
    background-size: 2em 2em;
    cursor: pointer;
    display: block;
}
/* grid */

.col-0 { left: 0% }
.col-1 { left: 10% }
.col-2 { left: 20% }
.col-3 { left: 30% }
.col-4 { left: 40% }
.col-5 { left: 50% }
.col-6 { left: 60% }
.col-7 { left: 70% }
.col-8 { left: 80% }
.col-9 { left: 90% }
.col-10 { left: 100% }

.w-0 { width: 0% }
.w-1 { width: 10% }
.w-2 { width: 20% }
.w-3 { width: 30% }
.w-4 { width: 40% }
.w-5 { width: 50% }
.w-6 { width: 60% }
.w-7 { width: 70% }
.w-8 { width: 80% }
.w-9 { width: 90% }
.w-10 { width: 10% }
.w-98 { width: 98% }

.jsonData {
    font-family: monospace;
}

#about-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 40px;
} 

#canvas-help-message {
    position: absolute;
    top: 30%;
    color: white;
    display: block;
    text-align: center;
    width: 100%;
    height: 0px;
    pointer-events: none;
    font-size: 1.6em;
    line-height: 95px;
}

/*
.safe-area{
    outline: 1px solid red;
    z-index: 1000;
    position: absolute;
    top: 35px;
    left: 35px;
    width: calc(100% - 70px);
    height: calc(100% - 70px);
}
*/