.exp{
		position: absolute;
		top: 0em;
		left:0em;
		width:87em;
		height:55.3em;
		border:5px;
		border-style:groove;
		background-color:white;
	}
	.button {
		margin:auto;
		display:block;
    background: #228b22;
    color: white;
    padding: 10px 10px;
    border: none;
    border-radius: 3px;
	}
	.button:hover{
		cursor:pointer;
		font-size:18px;
	}
	.font {
		font-size:15px;
	}
	.top{
		height:400px;
		width:400px;
		position:absolute;
		top:90;
		left:0;
		font-size:20px;
	}
	.graph{
		width: 400px;
		height: 400px;
		position: absolute;
		top: 500;
		left: 50;
		z-index: 10;
	}
	.calc{
		position:absolute;
		right:105px;
		top:250px;
	}
	.no-js #loader { display: none;  }
	.js #loader { display: block; position: absolute; left: 100px; top: 0; }
	#se-pre-con {
		position: fixed;
		left: 0px;
		background-color:white;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 9999;
		text-align:center;
	} 
	.load{
		top: 50%;
    position: absolute;
	font-family:cursive;
	font-size:1.3em;
    left: 50%;
    transform: translate(-50%, -50%);
}
	
        /* toggle in label designing */
        .toggle {
            position : relative ;
            display : inline-block;
            width : 50px;
            height : 24px;
			top:7px;
            background-color: red;
            border-radius: 30px;
            border: 2px solid gray;
        }
                
        /* After slide changes */
        .toggle:after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            top: 0.3px; 
            left: 0px;
            transition:  all 0.5s;
        }
      
        /* Checkbox cheked effect */
        .checkbox:checked + .toggle::after {
            left : 29px; 
        }
                
        /* Checkbox cheked toggle label bg color */
        .checkbox:checked + .toggle {
            background-color: #044ca3;
        }
                
        /* Checkbox vanished */
        .checkbox { 
            display : none;
        }
	.instruct{
		float:right;
	}
	
	.modal {
		display: none;
		position: fixed;
		z-index: 11;
		padding-top: 100px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%; 
		overflow: auto;
		background-color: rgb(0,0,0); 
		background-color: rgba(0,0,0,0.4);
	}
	.modal-content {
		background-color: #fefefe;
		margin: auto;
		padding: 20px;
		border: 1px solid #888;
		width: 80%;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s
	}
	@-webkit-keyframes animatetop {
		from {top:-300px; opacity:0} 
		to {top:0; opacity:1}
	}
	@keyframes animatetop {
		from {top:-300px; opacity:0}
		to {top:0; opacity:1}
	}
	.close {
		color: #ffffff;
		float: right;
		font-size: 28px;
		font-weight: bold;
	}
	.close:hover,
	.close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
	}
	.modal-header {
		padding: 2px 16px;
		background-color: #044ca3;
		color: white;
	}
	.modal-body {padding: 2px 16px;}
	.modal-footer {
		padding: 2px 16px;
		background-color: #044ca3;
		color: white;
	}