*{
	margin: 0;
	padding: 0;
}

html{
	height: 100%;
	width: 100%;
	position: fixed;
	overflow: hidden;
}

body{
	background-image: url("./bg.jpg");
	height: 100%;
}

.main-container{

	position: relative;
	margin: 0 auto;
	height: 100%;
	box-shadow: 0 0 40px rgba(0,0,0,0.4);
	max-width: 1000px;
}

.top-bar{
	background-color: #2c3e50;
	color: white;
	margin: 0 auto;
	height: 75px;
	font-size: 25px;
	line-height: 75px;
	padding: 0 10px;
	box-sizing: border-box;
}

.project-logo{
	position: absolute;
	display: inline-block;
}

.project-name{
	font-family: Cabin, sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 25px;
	margin-left: 55px;
	display: inline-block;
}

#app-container{
	background-color: #d2dae2;
	margin: 0 auto;
	position: relative;
	height: calc(100% - 75px);
}

.list-container{
	position: absolute;
	width: 30%;
	top: 0;
	left: 0;
	background-color: #34495e;
	box-sizing: border-box;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: 150ms;
}

.list-container > h2{
	color: white;
	font-size: 23px;
	font-family: Heebo, sans-serif;
	margin: 10px 12px;
	font-weight: normal;
}

.function-view{
	position: absolute;
	top: 0;
	right: 0;
	width: 70%;
	transition: 150ms;
	box-sizing: border-box;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#function-list{
	list-style-type: none;
	margin: 10px;
}

#function-list > li{
	background-color: rgba(255,255,255,0.6);
	padding: 10px;
	margin: 10px 0;
	margin-top: 0;
	transition: 150ms;
	cursor: pointer;
	border-radius: 7px;
	font-size: 20px;
}

#function-list > li:hover{
	/*color: white;*/
	background-color: rgba(255,255,255,0.8);
}

#function-list > li.selected{
	color: white;
	background-color: #2C3A47;
}

#function-form{
	margin-top: 40px;
	text-align: center;
	padding: 10px;
}

.parms-container{
	margin-top: -20px;
	padding: 10px;
}

.parm{
	background-color: rgba(0,0,0,0.12);
	padding: 10px;
	margin-top: 10px;
	border-radius: 7px;
}

.parm-label{
	font-family: Heebo;
	font-size: 20px;
}

.parm-value{
	width: 100%;
	box-sizing: border-box;
	border-radius: 7px;
	padding: 5px;
	font-size: 20px;
	border: none;
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.2);
	border-bottom: none; 
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

.parms-container.inline > .parm{
	display: inline-block;
	width: calc(50% - 30px);
	margin: 0 15px;
	box-sizing: border-box;
}

.align-center{
	text-align: center;
}

.action-btn{
	font-family: Heebo;
	background-color: rgba(0,0,0,0.12);
	color: black;
	font-size: 18px;
	padding: 10px;
	cursor: pointer;
	transition: 150ms;
	border-radius: 10px;
	border: none;
}

.result{
	margin: 20px 0;
	font-size: 25px;
	text-align: center;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20px;
	/*background-color: rgba(255,255,255,0.4);*/
}

#integration{
	display: none;
}

#integration.active{
	display: block;
}

#back{
	position: fixed;
	font-family: Heebo;
	background-color: #34495e;
	color: white;
	border-radius: 7px;
	display: none;
	padding: 5px 10px;
	cursor: pointer;
	margin: 10px;
	bottom: 0;
}

#close{
	position: absolute;
	right: 0;
	top: 0;
	margin: 50px;
	font-size: 50px;
	color: white;
	cursor: pointer;
}

#expo-container{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	z-index: 99;
	transition: 150ms;
}

#expo{
	display: block;
	position: absolute;
	width: 80%;
	background-color: white;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 50px;
	text-align: center;
	font-size: 25px;
}

#expo-container.shown{
	display: block;
}

@media (max-width: 600px) {
    .list-container {
        width: 100%;
    }

    .function-view{
    	width: 0;
    }

    #app-container.active .list-container {
    	width: 0;
    }

    #app-container.active .function-view{
    	width: 100%;
    }

    #back{
    	display: inline-block;
    }
}