* {
    box-sizing: border-box;
}
html {overflow: hidden;}
body {background: url(../images/irongrip.png);}
#imgContainer {max-width:100%;display:block;width:100%;text-align: -webkit-center; text-align: -moz-center;}
#imagesTable {max-width:100%;border-collapse:collapse;}
.tile {
/*width:100%;*/
    max-height: 95vh;
    max-width: 95vw;
}
.hidden {display:none;}
button, input, #imgFile {
	font-size:1.1em;
    /* width: 90%;*/
    margin-bottom: 0.3em;
    /*max-width: 320;*/
}
buttons {display:block;width:100%;position:fixed;bottom:0;left:0;text-align: center;white-space:nowrap;overflow-x:auto;}
.selected {background:rgb(86, 255, 86);}
getImages {position:fixed;bottom:2.3em;width:2em;}
cloudImages {position:absolute;top:8px;border:1px solid white;width:145px;min-height:10%;max-height:98%;overflow-y:scroll;background:white;}
forceScroll {position:absolute;height:101%;width:1px;top:0;left:0;background:transparent;}
.thumb {width:100%;border-bottom:2px solid white;}
settings {position:fixed;bottom:2.3em;width:2em;}
fonts {position:fixed;bottom:2.3em;width:5em;}
where {position:fixed;bottom:2.4em;white-space:nowrap;}
.whBtn{    
	height: 1.8em;
    width: 1.8em;
    margin-bottom: 0;
	}
sizes {position:fixed;bottom:1.86rem;transform:rotate(-90deg);transform-origin: left;}
colors {position:fixed;bottom:2.6em;left:0;text-align: center;}
textContainer {
	position:absolute;
	border:3px dashed transparent;
	background:transparent;
	padding:3px;
	cursor:move;
	min-width:2em;
	white-space:normal;
	overflow:hidden;
	word-break: break-word;
	line-height:1.2;
	top:0px;
	left:0px;
	border-radius:3px;
	text-align : center;
	caret-color : lime;
	}
.textLines {cursor:text;display:inline-block;}

#infoDiv {
	position:absolute;top:0;left:0;
	background:url(../images/irongrip.png);
	width:100%;
	min-height:100%;
	z-index:100;
    max-height: 100%;
    overflow-y: auto;
	color: white;
	font-size:1.1em;
	font-family: Fira Sans Extra Condensed;
	}
#infoHide {cursor:pointer;position:fixed;right:28px;top:10px;font-size:1.5em; background: transparent; color:white !important;}
.infoSpan {
	display:flex;
    width:450px;
    margin:auto;
    height:100%;
    flex-direction: column;
	padding: 10px;
	}
.infoSpanContent {flex:1;background:rgba(0, 255, 255, 0.07);text-align:center;}
infoLine {display:flex;padding:10px;padding:10;margin:10;border-radius:3px;text-align:justify;}
a {font-size:1.1em;color:white;}
/*contenteditable placeholder start*/
/*
[contenteditable=true] {
    border: solid 1px;
    min-height: 1.2em;
}
*/
[contenteditable=true]:empty:before {
    content: attr(data-placeholder);
    /*color: darkgrey;*/
}
/*contenteditable placeholder end*/

.subSquare {border-top:1px solid red;border-left:1px solid red;position:relative;top:-1;left:-1;display:block;float:left;}
.rotate90 {transform: rotate(90deg);}
.caps {text-transform: uppercase;}

loader {
  position:absolute;
  top: 45vh;
  left: 45vw;
  border: 1vw solid #8080807a;
  border-radius: 50%;
  border-top: 1vw solid #ffc107;
  width: 10vw;
  height: 10vw;
  -webkit-animation: spin 3s linear infinite; /* Safari */
  animation: spin 3s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.gradBckg {
padding-top: 1em;
display:inline-block;
background: linear-gradient(to right,white,black 22%, hsl(1,100%,50%),hsl(45,100%,50%),hsl(89,100%,50%),hsl(133,100%,50%),hsl(177,100%,50%),hsl(221,100%,50%),hsl(265,100%,50%), hsl(309,100%,50%), hsl(355,100%,50%));
}
#colorPicker {
	position:fixed;
	bottom:6.0rem;
    transform: rotate(-90deg);
	border: 2px solid grey;
	border-radius:3px;
	width: 15em;
}
#color, #alpha {
	margin: 0;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

/*input slider*/
input[type=range] {
  -webkit-appearance: none;
  /*width: 100%;
  margin: 15.8px 0;*/
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 0px 0px 1px rgba(13, 13, 13, 0.7);
  background: rgba(239, 239, 239, 0.7);
  border-radius: 1.3px;
  border: 0.2px solid #f0f0f0;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #ededed;
  height: 32px;
  width: 21px;
  border-radius: 3px;
  background: rgba(239, 239, 239, 0.7);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -12px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(252, 252, 252, 0.7);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 0px 0px 1px rgba(13, 13, 13, 0.7);
  background: rgba(239, 239, 239, 0.7);
  border-radius: 1.3px;
  border: 0.2px solid #f0f0f0;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #ededed;
  height: 40px;
  width: 21px;
  border-radius: 3px;
  background: rgba(239, 239, 239, 0.7);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgba(226, 226, 226, 0.7);
  border: 0.2px solid #f0f0f0;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 0px 0px 1px rgba(13, 13, 13, 0.7);
}
input[type=range]::-ms-fill-upper {
  background: rgba(239, 239, 239, 0.7);
  border: 0.2px solid #f0f0f0;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 0px 0px 1px rgba(13, 13, 13, 0.7);
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #ededed;
  height: 40px;
  width: 21px;
  border-radius: 3px;
  background: rgba(239, 239, 239, 0.7);
  cursor: pointer;
  height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(239, 239, 239, 0.7);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(252, 252, 252, 0.7);
}