#feedback{visibility:hidden}
#helpl{
	padding:5px;
}.tooltiptext {
    background-color: #ffffc7;
    border: 1px solid #ddc;
    box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
    color: #000;
    font-family: sans-serif;
    font-size: 9pt;
    opacity: 0.9;
    padding: 2px;
    position: absolute;
    z-index: 4000;

	/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
	/*opacity: 0;
visibility: hidden;
	*/
	transition: opacity .5s;
  }

  .classL{
	border-radius:10px;
	margin:5px;
	padding:0px 5px 45px 5px;
	position:relative;
	background:rgb(180, 208, 216);
}
#clsGrid{
	display:grid;
	grid-template-columns:auto 280px;
}
#teachGrid{
	display:grid;
	grid-template-columns:280px auto ;
}
#coursesD{
	display:grid;
	grid-template-columns: 1fr 1fr;
}
.trybtn{
	color:#fff;
	padding:5px;
	border-radius:25px;
	width:50%;
	left:25%;
	background:#4932cf;
	position:absolute;
	bottom:10px;
	border:0px;
	margin:1px;
}
.contentDl{
	color:#fff;
	padding:1px 20px 1px 20px;
	margin:2px;
	border-radius:5px;
	border:0px;

	background:blue;
	font: size 10px;}
.assignbtn{
	color:#fff;
	padding:1px 10px 1px 10px;
	margin:2px;
	border-radius:5px;
	border:0px;

	background:green;
	font: size 10px;}
.btnCrs{
	padding:6px 12px;
	border-radius:4px;
	text-align:center;
	width:250px;
	margin:2px;
}
#clsBox{
	display:grid;
	border:solid;
	margin:10px;
	border-radius:5px;
	background-color:rgb(180, 208, 216);
	padding:5px;
	text-align:center;
}
#clsBox2{
	display:block;
	border:solid;
	margin:10px;
	border-radius:5px;
	background-color:rgb(180, 208, 216);
	padding:5px;
}
#clsRt{
	background-color:#ccc;
	padding:15px;
	margin:5px;
	border-radius:10px;
}

.sbtnt{
	font-weight: bold;
}
.sbtn{
	width:240px;
	height:60px;
}
.viewCodeI{
background:#aaa;
}
#signBox{
	display:grid;
	grid-template-columns:1fr 1fr;
	display:grid;
}
#signR{
	border-radius:0px 15px 15px 0px;
	background-color:#ccf;
	padding:30px;
	text-align:center;
}
#signL{
	border-radius:15px 0px 0 15px;
	background-color:#cfc;
	padding:30px;
}
.bType{
	font-weight: bold;
	font-size: 30px;
	width:140px;
	height:80px;
	margin:20px;
	border-radius:10px;
	border:solid;
}
.bMv{position:relative;left:140px;width:220px}
.icondesc {
	display: inline-block;
	width: 300px;
	background: #fff;
	text-align: center;
	padding: 10px;
	margin: 10px
}

.topmsg {
	margin: 15px;
	width: 400px;
	color: black;
	background: yellow;
}

#vstep {
	position: relative;
	top: 40px;
	background: white;
	z-index: 1
}

#video2 {
	position: relative;
	top: -20px
}

h2 {
	margin-top: 0px;
}

.boxt {
	margin: 10px;
	text-align: center
}

.boxes {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	z-index: 2;
	position: relative;
}

.boxV {
	padding-bottom: -20px;
}

.boxesV {
	display: grid;
	gap: 20px;
	grid-template-columns: 800px 1fr;
}

@media (max-width: 1200px) {
	.boxesV {
		grid-template-columns: minmax(50px, auto);
		gap: 0px;
	}
}

@media (max-width: 900px) {
	.boxes {
		grid-template-columns: minmax(50px, auto);
		gap: 0px;
	}
}

.bBoxes {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, 200px);
	justify-content: center;
}

.bBox {
	text-align: center;
}

.ctabutton {
	font-size: 24px;
	padding: 10px 30px;
	background: #4932cf;
	color: #fff;
	border-radius: 50px;
	font-weight: 700;
	margin: 15px;
}

.ibox {
	padding: 5px 10px;
	border: 1px solid #888;
	text-align: center;
	background: #5BC0DE;
	color: #fff;
	display: inline-block;
}
.box{
	width: 80px;
	  height:30px;
	margin: 1px;
	padding: 3px 1px 1px 1px ;
	border: 1px solid #888;
	text-align: center;
	  background:#5BC0DE;
	  color:#fff;
	  display:inline-block;
  }
.boxs {
	background: #fff;
	color: #000;
	border: 1px solid #5BC0DE;
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

.rtalign {
	font-size: 12px;
	text-align: center;
}

.farbtastic {
	position: relative;
}

.farbtastic * {
	position: absolute;
	cursor: crosshair;
}

.farbtastic,
.farbtastic .wheel {
	width: 195px;
	height: 195px;
}

.farbtastic .color,
.farbtastic .overlay {
	top: 47px;
	left: 47px;
	width: 101px;
	height: 101px;
}

.farbtastic .wheel {
	background: url(/lib/wheel.png) no-repeat;
	width: 195px;
	height: 195px;
}

.farbtastic .overlay {
	background: url(/lib/mask.png) no-repeat;
}

.farbtastic .marker {
	width: 17px;
	height: 17px;
	margin: -8px 0 0 -8px;
	overflow: hidden;
	background: url(/lib/marker.png) no-repeat;
}

.nav-tabs>li.active>a {
	background-color: #fff;
	color: #000;
	border-style: solid;
	border-width: 1px;
	border-color: #5BC0DE;
	border-radius: 15px 15px 0px 0px;
	border-bottom-style: none;
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

.nav-tabs>li.active>a:hover {
	background-color: #fff;
	color: #000;
	border-style: solid;
	border-width: 1px;
	border-color: #888;
	border-radius: 15px 15px 0px 0px;
}

.nav-tabs>li>a:hover {
	background-color: #39b3d7;
	color: #fff;
	border-style: solid;
	border-width: 1px;
	border-color: #888;
	border-radius: 15px 15px 0px 0px;
}

.nav-tabs>li>a {
	background-color: #5bc0de;
	color: #fff;
	border-style: solid;
	border-width: 1px;
	border-color: #888;
	border-radius: 15px 15px 0px 0px;
}

.btn-info {
	border-color: #888;
}

button.icon {
	font-family: 'Glyphicons Halflings';
}

.levm {
	cursor: hand;
	cursor: pointer;
}

.goog-palette-colorswatch {
	height: 13px;
	width: 15px;
	border: 1px solid #666;
}

.ace_gutter-cell.ace_breakpoint {
	border-radius: 20px 0px 0px 20px;
	box-shadow: 0px 0px 1px 1px red inset;
}

.ace_bg {
	background: #ffaaaa;
	position: absolute;
	z-index: 2
}

.levmrk1 {
	cursor: hand;
	cursor: pointer;
	position: relative;
	top: 1px;
	left: 2px;
	color: green;
	padding: 3px;
}

.levmrk2 {
	color: #444;
	padding: 3px;
}

.levmrk3 {
	cursor: hand;
	cursor: pointer;
	color: #3985c7;
	padding: 3px;
}

dt {
	margin-left: 50px
}

dd {
	margin: 0px 0px 20px 100px
}

#container {
	width: 200px;
}

.rectangle-speech-border {
	position: absolute;
	padding: 1px 15px;
	margin: 1em 0 3em;
	border: 3px solid #5a8f00;
	text-align: center;
	color: white;
	background-color: black;
	/* css3 */
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

.rectangle-speech-border:before {
	content: "";
	position: absolute;
	z-index: 10;
	bottom: -23px;
	left: 9px;
	width: 23px;
	height: 20px;
	border-style: solid;
	border-width: 0 3px 3px 0;
	border-color: #5a8f00;
	background: transparent;
	/* css3 */
	-webkit-border-bottom-right-radius: 80px 98px;
	-moz-border-radius-bottomright: 80px 98px;
	border-bottom-right-radius: 80px 98px;
	/* reduce the damage in FF3.0 */
	display: block;
}

.rectangle-speech-border:after {
	content: "";
	position: absolute;
	z-index: 10;
	bottom: -23px;
	left: 6px;
	width: 13px;
	height: 20px;
	border-style: solid;
	border-width: 0 3px 3px 0;
	border-color: #5a8f00;
	background: transparent;
	/* css3 */
	-webkit-border-bottom-right-radius: 40px 50px;
	-moz-border-radius-bottomright: 40px 50px;
	border-bottom-right-radius: 40px 50px;
	/* reduce the damage in FF3.0 */
	display: block;
}


/* creates a white rectangle to cover part of the oval border*/

.rectangle-speech-border> :first-child:after {
	content: "abc";
	position: absolute;
	bottom: -10px;
	left: 11px;
	width: 12px;
	height: 15px;
	background: black;
}


/* ============================================================================================================================
== OVER THOUGHT BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */

.oval-thought-border {
	position: relative;
	padding: 5px 1px;
	margin: 1em auto 80px;
	border: 3px solid #c81e2b;
	text-align: center;
	color: #333;
	background: #fff;
	border-radius: 240px / 140px;
}


/* creates the larger circle */

.oval-thought-border:before {
	content: "";
	position: absolute;
	z-index: 10;
	bottom: -20px;
	left: 70px;
	width: 25px;
	height: 25px;
	border: 3px solid #c81e2b;
	background: #fff;
	/* css3 */
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	/* reduce the damage in FF3.0 */
	display: block;
}


/* creates the smaller circle */

.oval-thought-border:after {
	content: "";
	position: absolute;
	z-index: 10;
	bottom: -30px;
	left: 55px;
	width: 12px;
	height: 12px;
	border: 3px solid #c81e2b;
	background: #fff;
	/* css3 */
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	/* reduce the damage in FF3.0 */
	display: block;
}


/*media2*/
#app {
	visibility: hidden;
	background: #fff;
	display: grid;
	grid-template: "aLeft aRight" / 2fr 3fr;
	width: 100%;
	height: 100%;
	gap: 10px;
}

#wBtns {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: end
}

#user22 {
	position: absolute;
	top: 0px;
	right: 0px;
}

.rows {
	display: grid;
}

.rowsLt {
	grid-area: aLeft;
	display: grid;
	grid-template-rows: 59px auto auto auto auto 1fr
}

.rowsRt {
	grid-area: aRight;
	display: grid;
	grid-template-rows: auto auto auto 3fr;
}

.right {
	text-align: right
}

#ltTop {
	display: grid;
	grid-template-columns: 70px 1fr auto;
	gap: 5px;
}

#rtTop {
	display: grid;
	grid-template-columns: 4fr 1fr auto;
}

#tabHelp {
	display: grid;
	grid-template-columns: 3fr 1fr;
}

#fileMT {
	font-weight: bold
}

.bord {
	border: solid;
}

#bigToolR {
	display: none
}

#bigToolL {
	position: relative;
	display: block
}

#userR {
	display: block
}

#userL {
	display: none
}

#dhome {
	bottom: 17px;
	right: 1px;
	position: absolute
}

#dcontainer {
	height: 400px;
	width: 400px;
	position: relative;
}

#codeT2 {
	display: grid;
	grid-template-columns: auto 1fr;
	border-radius: 15px 0px 0px;
	background-color: rgb(221, 221, 221);
}

#fileD {
	z-index: 202;
	position: fixed;
	top: 25px;
	left: 75px;
}

#fileM {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px;
}

#menuBtns {
	display: grid;
	grid-template-columns: auto auto auto auto;
}

#demo {
	background: #c8c8c8;
	color: black;
	z-index: 1;
}

.scode {
	text-align: left;
	position: absolute;
	border-style:solid;border-width:1px;border-color:gray;display:none;
}

#logo {
	width: 80;
	height: 66
}

#lesson {
	opacity: 1;
	position: relative;
	background: #fff;
	padding: 2px;
	margin: 4px
}

#lessonS {
	border-radius: 15px 0px 0px 15px;
	border-style: solid;
	border-width: 1px;
	border-color: lightgray;
	background-color: white;
	z-index: 11;
	display: grid;
	grid-template-rows: auto auto;
}

#lessonHeader {
	display: grid;
	grid-template-columns: auto 1fr;
	border-radius: 15px 0px 0px;
	background-color: #ddd
}

#lessonBtns {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-content: end
}

#lessonHdr {
	margin-left: 12px;
}

#bigToolS {
	display: none
}

#showTerm {
	display: none
}

#showPrompt {
	display: none
}

#showGraph {
	display: none
}

#tourBgnd {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background: #000;
	opacity: 70%;
	z-index: 300
}

#tour {
	display: none;
	position: absolute;
	top: 20vh;
	left: 20vw;
	padding: 20px;
	background: #fff;
	border: 1px solid #5BC0DE;
	box-shadow: 0 0 30px rgba(81, 203, 238, 1);
	z-index: 301;
	padding: 5px;
}

@media (max-width: 850px) and (max-aspect-ratio: 2/2) {
	.btn {
		font-size: 10px
	}
	body {
		font-size: 10px
	}
}

@media (max-height: 650px) and (min-aspect-ratio: 2/2) {
	.btn {
		font-size: 10px
	}
	body {
		font-size: 10px
	}
}

@media (max-aspect-ratio: 2/2) {
	#app {
		grid-template: "aLeft" 50vh "aRight" 1fr
	}
	#bigToolS {
		display: block
	}
	#bigToolL {
		display: none
	}
	.rowsLt {
		grid-template-rows: 59px auto auto auto auto 1fr
	}
	#loginb {
		padding: 2px 4px 1px 4px
	}
}.book-container {
	perspective: 600px;
	position:relative;
	float:right;
	margin:12px;
  }

  @keyframes initAnimation {
	0% {
	  transform: rotateY(0deg);
	}
	100% {
	  transform: rotateY(-30deg);
	}
  }

  .book {
	width: 100px;
	height: 120px;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateY(-30deg);
	transition: 1s ease;
	animation: 1s ease 0s 1 initAnimation;
  }

  .book:hover {
	transform: rotateY(0deg);
  }

  .book > :first-child {
	position: absolute;
	top: 0;
	left: 0;
	background-color: red;
	width: 100px;
	height: 120px;
	transform: translateZ(10px);
	background-color: #01060f;
	border-radius: 0 2px 2px 0;
	box-shadow: 5px 5px 5px #666;
  }

  .book::before {
	position: absolute;
	content: ' ';
	background-color: blue;
	left: 0;
	top: 3px;
	width: 18px;
	height: 114px;
	transform: translateX(87px) rotateY(90deg);
	background: linear-gradient(90deg,
	  #fff 0%,
	  #f9f9f9 5%,
	  #fff 10%,
	  #f9f9f9 15%,
	  #fff 20%,
	  #f9f9f9 25%,
	  #fff 30%,
	  #f9f9f9 35%,
	  #fff 40%,
	  #f9f9f9 45%,
	  #fff 50%,
	  #f9f9f9 55%,
	  #fff 60%,
	  #f9f9f9 65%,
	  #fff 70%,
	  #f9f9f9 75%,
	  #fff 80%,
	  #f9f9f9 85%,
	  #fff 90%,
	  #f9f9f9 95%,
	  #fff 100%
	  );
  }

  .book::after {
	position: absolute;
	top: 0;
	left: 0;
	content: ' ';
	width: 100px;
	height: 120px;
	transform: translateZ(-10px);
	background-color: #01060f;
	border-radius: 0 2px 2px 0;
	box-shadow: -10px 0 50px 10px #666;
  }