:root {
	--primary: #ffce00;
	--secondary: #ff8400;
	--dark: #212121;
	--light: #f3f3f3;
	--width: 600px;
	--height: 725px;
	--size-height: 200px;
	--chkBx-h-w: 18px;
	--color-btns: 35px;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.card {
	margin: 20px auto 0;
	width: var(--width);
	height: var(--height);
	overflow-y: auto;
}
.card__inner {
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
	/* cursor: pointer; */
	position: relative;
}
.card__inner.is-flipped {
	transform: rotateY(180deg);
}
.card__face {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0px 3px 18px 3px rgba(0,0,0,0.2);
	padding: 12px;
}
.card__face--front {
	background-image: linear-gradient(to bottom, var(--primary), var(--secondary));
	display: block;
}
.card__face--back {
	background-color: var(--light);
	transform: rotateY(180deg);
}
.grid-container {
	display: grid;
	grid-template-columns: 4fr 9fr 10fr;
	min-width: 100%;
	min-height: 94vh;
	min-height: 94vh;
	height: 100%;
	border: 1px solid black;
}
.grid-item {
	display: flex;
	align-items: baseline;
	justify-content: right;
	display: block;
	min-width: 100%;
	min-height: 40px;
}
.grid-item:nth-child(odd) {
	background-color: #ffffff;
}
.grid-item:nth-child(even) {
	background-color: #f1f1f1;
	background-color: #ffffff;
}
#grid-item-1 {
	overflow: hidden;
	overflow-y: scroll;
	max-height: 99vh;
}
#grid-item-2 {
	display: block;
}
.wrdWrap {
	white-space: pre;
	overflow-y: hidden;
}
.txtarea {
	resize: none;
	border: none;
	outline: none;
	height: calc(var(--height) - 85px);
	width: calc(var(--width) - 20px);
	font-size: 14px;
	font-family: 'Courier New', Courier, monospace;
	background-color: var(--dark);
	color: #03f203;
	border-radius: 12px;
	padding: 8px;
}
.chkBox {
	display: flex;
	border: 1px solid #d4d4d4;
	background:linear-gradient(to bottom, #ffffff 5%, #d4d4d4 100%);
	background-color:#ffffff;
	/* margin-bottom: 8px; */
	margin: 4px;
	border-radius: 12px;
	padding: 3px 12px;
	display: flex;
	letter-spacing: 2px;
}
.chkBox-sm {
	width: 90px;
}
.chkBox-md {
	width: 160px;
}
.chkBox-lg {
	width: 220px;
}
.chkBox label,
.block label {
	margin-left: 8px;
}
.chkBox input[type=checkbox],
.block input[type=checkbox] {
	height: var(--chkBx-h-w);
	width: var(--chkBx-h-w);
}
.block input[type=checkbox] {
	margin-left: 12px;
}
.chkBox-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
#copyBtnDiv {
	display: flex;
	justify-content: center;
}
.copyTxt {
	border: none;
	outline: none;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background-color: transparent;
}
.card__face #textDiv {margin-top: 14px;}
#fontSize {width: 100%;}
.block {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.block div {padding: 3px;}
.card__face input[type=text],
select {
	font-size: 14px;
	width: 170px;
	border-radius: 4px;
}
.toggle-button {
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	background-color:#768d87;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 35px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
}
.toggle-button:hover {
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	background-color:#6c7c7c;
}
.toggle-button:active {
	position:relative;
	top:1px;
}
.itemBox {
	margin-bottom: 24px;
	height: 300px;
	border: 1px solid black;
	width: 96%;
	margin: 4px ;
	border: 5px outset #bdbdbd;
	border-radius: 12px;
	display: grid;
	justify-content: center;
	align-items: center;
}
input[type=color] {
	width: var(--color-btns);
	height: var(--color-btns);
}
.display-button {
	position: relative;
	top: 40%;
}
.colorBtns {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	/* bottom: -50px; */
	/* border: 1px solid black; */
}
.locked {
	display: none;
}
#fontFamily,
#fontFamily option {
	text-transform: capitalize;
}
.dispItem {
	width: 100%;
	height: 96px;
	display: grid;
	justify-content: center;
	align-items: center;
	/* border: 1px solid black; */
}
.dispItem:nth-child(odd) {
	background-color: #f5f5f5;
}
.dispItem:nth-child(even) {
	background-color: #e8e8e8;
}

/* Range Sliders */
input[type=range] {
	width: 100%;
	margin: 4.5px 0;
	background-color: transparent;
	-webkit-appearance: none;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	background: #0d63b3;
	border: 1.8px solid #010101;
	border-radius: 8px;
	width: 100%;
	height: 7px;
	cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
	margin-top: -6.3px;
	width: 16px;
	height: 16px;
	background: #ffffff;
	border: 3.2px solid #000000;
	border-radius: 11px;
	cursor: pointer;
	-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #0e6ec6;
}
input[type=range]::-moz-range-track {
	background: #0d63b3;
	border: 1.8px solid #010101;
	border-radius: 8px;
	width: 100%;
	height: 7px;
	cursor: pointer;
}
input[type=range]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: #ffffff;
	border: 3.2px solid #000000;
	border-radius: 11px;
	cursor: pointer;
}
input[type=range]::-ms-track {
	background: transparent;
	border-color: transparent;
	border-width: 5.5px 0;
	color: transparent;
	width: 100%;
	height: 7px;
	cursor: pointer;
}
input[type=range]::-ms-fill-lower {
	background: #0c58a0;
	border: 1.8px solid #010101;
	border-radius: 16px;
}
input[type=range]::-ms-fill-upper {
	background: #0d63b3;
	border: 1.8px solid #010101;
	border-radius: 16px;
}
input[type=range]::-ms-thumb {
	width: 16px;
	height: 16px;
	background: #ffffff;
	border: 3.2px solid #000000;
	border-radius: 11px;
	cursor: pointer;
	margin-top: 0px;
}
input[type=range]:focus::-ms-fill-lower {
	background: #0d63b3;
  }
input[type=range]:focus::-ms-fill-upper {
		background: #0e6ec6;
}
@supports (-ms-ime-align:auto) {
	input[type=range] {
		margin: 0;
	}
}