html, body{
  height:100%;
}

body {
	margin: 0;
	padding:0;
	background-color: #F8F9F9;
}


.tab-master {
	width: 100%;
	max-width: 898px;
	height: 100%;
	max-height: 498px; /* use this property to set the widget height*/
}

.tab-content {
	height: calc(100% - 42px); 
	border-left: 1px solid #C6CDD0;
	border-right: 1px solid #C6CDD0;
	border-bottom: 1px solid #C6CDD0;
	padding: 20px;
	overflow: hidden;
	
}

.tab-pane {
	height: 100%; 
}

.nav-pills > li, .nav-pills-sm > li {
  width: calc(99.9% / 5); /* change the denominator here to equal the number of tabs */
}

.nav > li > a {
    padding: 10px 2px;
}

/* class for equation descriptions in math course widgets */
.equationLabel {
width: 0; 
height: 0; 
display: inline-block; 
overflow: hidden;
}

/*custom*/
.wrap{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
}

#menu1 small, #menu5 small{
    font-size: 10px;
    position: absolute;
   
}

.left p{
	width: 200px;
}

.wave img, .frequency img{
	width: 105%;
}

/*measurement*/

.measurement img{
    width: 80%;
}

.right{
	width: 200px;
	position: absolute;
	right:-10px;
	top:100px;
}

.wave1, .wave2, .wave3{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom:3em;
}


.wave1 p, .wave2 p, .wave3 p{
	margin-left:.5em;
	margin-top:.2em;
}

.correct, .incorrect{
	margin-top:.2em;
}

.btn{
	margin-left:1em;
	padding:5px 10px;
	margin-bottom:1em;
}

.wave1 input, .wave2 input, .wave3 input{
    width:50px;
    height:30px;
}

.submit{
	margin-top:-2em;
	margin-left:7em;
}

#menu4 > div > div.right > button{
	margin-left:6em;
}

.show_me{
	margin-top:-2em;
	display: flex;
	flex-direction: row;
}

.right img, .wrong img{
	width:20px;
	height:20px;
	margin-left:.5em;
}

/*specrum*/

.spectrum{
	display: flex;
	flex-direction: row;
	position: relative;
}

.text{
	width:30%;
}

.diagram{
	width:71%;
}

.f, .w{
	margin-top:-1.5em;
}

.description{
	margin-top:-1em;
}

.scale img{
	width:100%;
	height:99.99%;
	margin-top: -.7em
}

.slider{
/*	border:1px solid black;*/
	height:50px;
	width:92.5%;
	margin-left:1.5em;
}

.change{
	/*border:1px solid black;*/
	height:120px;
	display: flex;
	flex-direction: row;
}

.wf{
	width:60%;
	border:1px solid black;
}

.energy{
	width:40%;
	border:1px solid black;
	border-left:0;
}

.labels{
	position: relative;
	display: flex;
	flex-direction: row;
}

#menu5 > div > div.diagram > div.scale > div > p{
	padding:0;
	margin:0;
	position: absolute;
	text-align: center;
	font-weight:bold;
}

.radio{
	left:45px;
	top:0px;
	color:#0E8515;
}
.mac{
	left:140px;
	top:0px;
}
.inf{
	left:250px;
	top:0px;
}
.visible{
	left:344px;
	top:-15px;
}
.ultra{
	left:410px;
	top:-15px;
}
.x{
	left:470px;
	top:0px;
}
.gamma{
	left:520px;
	top:-15px;
}

.line{
	width:1px;
	border-left:2px solid green;
	position: absolute;
	height:167px;
	bottom:168px;
	left:281px;
}

.title{
	color: #0E8515;
}

.title1{
	position: absolute;
	top:240px;
	color:#0E8515;
	font-weight: bold;
	left:350px;
}

.title2{
    position: absolute;
	top:240px;
	color:#0E8515;
	font-weight: bold;
	right:90px;
}

.mac_t, .inf_t, .visible_t, .ultra_t, .x_t, .gamma_t{
	display: none;
}

.energy{
	position: relative;
}

.legend{
	width: 100%;
}

.rect{
	background-color: rgba(243, 255, 93,.9);
	border-radius: 8px;
	width: 158px;
	height:10px;
	position: absolute;
	bottom:8px;
	left:45.5px;
}

.s:focus{
	border: 1px solid #80BDFA;
}

input[type=range]::-ms-tooltip {
    display: none;
}

#draggable{
	width: 30.5%;
	border:0;
}

.grid{
	position: absolute;
	bottom:0px;
	right:188px;
}

.ruler{
	margin-left:.8em;
	margin-top:-.5em;
}