* {	

	box-sizing: border-box;

	outline: none;	

	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

	border:0px;



}





#app-body-app {

	margin: 0px; 

	min-width: 0px;

	top: 0px; 

	left: 0px;

	background-color: #ffffff;

	width: 100%;

	height: 100%;

	overflow-x: auto;

	-ms-overflow-style: none;

	padding: 0px;

}





#app-container-app{

	width: 90%;

	height: 100%;

	padding: 0px;

	margin: 30px 5% 0px 5%;

	background-color: #ffffff;

	display: flex;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: flex-start;

	text-align: center;

	flex-direction: column;

}



#app-container-break{

	width: 100%;

	height: 30px;



}







#app-container-inputs{

	width: 100%;

	height: auto;

	padding: 0px;

	margin: 10px;

	display: flex;

	flex-direction: column;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: flex-start;

	text-align: left;

	background-color: #f9f9fc;

	border: #f3f3f9 1px solid;

	border-radius: 6px;

	position: relative;

	top:20px;

	margin-top: 0px;

	z-index: 100;

	

	border-bottom: #f3f3f9 10px solid;

	



}







#app-container-results{

	width: 100%;

	height: 100%;

	padding: 0px;

	margin: 10px;

	margin-top: 0px;

	display: flex;

	flex-direction: column;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: flex-start;

	text-align: left;

	background-color: #f9f9fc;

	border: #f3f3f9 1px solid;

	border-radius: 6px;

	z-index: 0;

}







#inputs-head{

	width: auto;

	font-size: 1.4em;

	font-weight: bold;

	line-height: 40px;

	padding: 20px;

}





.results-subhead{

	width: auto;

	font-size: 1.5em;

	font-weight: bold;

	line-height: 40px;

	padding: 40px 20px 0px 20px;

	color: #999999;

	display: none;

}





.inputs-row{

	width: auto;

	height: 100%;

	padding: 0px;

	display: flex;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: center;

	text-align: left;

}



#results-row-oriented-stresses{

	width: auto;

	height: 100%;

	padding: 0px;

	display: flex;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: center;

	text-align: left;

}

#results-head{

	width: 100%;

	font-size: 1.4em;

	font-weight: bold;

	line-height: 40px;

	padding: 20px;

}





.inputs-title{

	width: auto;

	font-size: 1.5em;

	line-height: 40px;

	padding: 20px 5px 20px 20px;

}





.input-input{

	width: 150px;

	height: 50px;

	background-color: #ffffff;

	border: #ceced3 1px solid;

	border-radius: 6px;

	font-size: 1.5em;

	line-height: 50px;

	padding-left: 5px;

	color: #666666;

}

.input-input:focus{

	border: #666666 1px solid;

	color: #000000;

}



.slidecontainer {

  	width: 100%;

  	display: flex;

	flex-direction: row;

	justify-content: center;

	align-content: center;

	align-items: center;

	text-align: center;

	font-size: 1.4em;

}







.slider {

  -webkit-appearance: none;

  width: 100%;

  height: 25px;

  background: #d3d3d3;

  outline: none;

  opacity: 0.7;

  -webkit-transition: .2s;

  transition: opacity .2s;

	border-radius: 6px;

}



*:disabled {

  opacity: 0.3;

}



.slider:hover {

  opacity: 1;

}



.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 25px;

  height: 35px;

  background: #a4a6b4;

  cursor: pointer;

	border-radius: 6px;

}



.slider::-moz-range-thumb {

  width: 25px;

  height: 25px;

  background: #04AA6D;

  cursor: pointer;

}





#results-waiting{

	width: auto;

	height: 100%;

	padding: 30px;

	font-size: 1.3em;

	line-height: 50px;

	color: #999999;

	padding-left: 100px;

}





.results-row{

	width: auto;

	height: 100%;

	padding: 0px;

	display: none;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: center;

	text-align: left;

}



.results-result{

	width: auto;

	min-width: 150px;

	font-size: 1.5em;

	padding: 10px 5px 10px 20px;

	line-height: 40px;

	padding-left: 0px;

	color: #000000;

	font-weight: bold;

	display: inline-block;

}



.results-element{

	width: 400px;

	height: 400px;

	background-color: #ffffff;

	border: #ceced3 1px solid;

	border-radius: 6px;

	margin-left:20px;

	

}



.results-Mohr{

	width: 800px;

	height: 600px;

	background-color: #ffffff;

	border: #ceced3 1px solid;

	border-radius: 6px;

	margin-left:20px;

	

}





table {

            width: auto;

            border-collapse: collapse;

            margin: 20px 0;


        }



tr{

	display: flex;

			flex-direction: row;

			justify-content: flex-start;

			align-items: center;

			align-content: center;


	width: 100%;

	

}

		td {

			display: flex;

			flex-direction: row;

			justify-content: center;

			align-items: center;

			align-content: center;

            padding: 10px;

            text-align: left;

           			min-height: 44px;

			height: auto;

			overflow: visible;
			
			

        }

        th {

            background-color: #004488;

            color: white;

        }

        tr:nth-child(odd) {

            background-color: rgba(0,0,0,0);

        }

        tr:nth-child(even) {

            background-color: #dedee4;

        }



        /* First cell (top-left) */

        .first-cell {

            background-color: white !important;

            border: none;

        }



        /* First column (header column) */

        .header-col {

            background-color: #99bbff; /* Denser blue for the first column */

            color: black;

            font-weight: bold;

        }



        /* Header row styling */

        .header-row th {

            background-color: #004488;

            color: white;

        }





/* Same basic styling with slight modifications */

.table-header {

    background-color: #004488;

    color: white;

}



.odd-row td {

    background-color: #e6f2ff;

}



.even-row td {

    background-color: #cce0ff;

}



.first-cell {

    background-color: rgba(0,0,0,0) !important;

    border: none;

}



.header-col {

    background-color: #99bbff;

    font-weight: bold;

}



.show-more, .show-less {

    color: #0f4477;

    cursor: pointer;

    text-decoration: none;

	padding-left: 10px;
	display: inline;

}



.show-more:hover, .show-less:hover {

    color: #1e90ff;
	text-decoration: underline;
}







@media only screen and (max-width:800px) {

#app-container-app{width: 100%; margin: 0px; max-width: 100%;}

#app-container-inputs{width: 100%; margin:0px; border-radius: 0px;max-width: 100%;}

#app-container-results{margin: 10px 0px 0px 0px; border-radius: 0;border:0px;border-top: #f3f3f9 1px solid;border-bottom: #f3f3f9 1px solid;}

#inputs-head{font-size: 1.4em; padding: 10px;}

.inputs-row{}

.inputs-title{font-size: 1.2em;	line-height: 30px;padding: 10px 5px 10px 10px;}

.input-input{width: 100px;height: 40px;	font-size: 1.2em;line-height: 40px;}

#results-head{font-size: 1.4em;line-height: 30px;padding: 10px;}

.results-subhead{font-size: 1.1em; line-height: 30px;padding: 20px 10px 0px 10px;}

.slider {height: 20px;}

.slider::-webkit-slider-thumb {width: 20px;height: 30px;}

.slider::-moz-range-thumb {width: 20px;height: 20px;}

#results-waiting{padding: 10px;	font-size: 1.2em;line-height: 30px;padding-left: 50px;}



.results-result{min-width: 85px;font-size: 1.2em;padding: 5px 0px 5px 0px;line-height: 30px;}



.results-element{width: 300px;height: 300px;margin-left:10px;}



.results-Mohr{max-width: 100%; width: 320px; height: 240px;margin-left:10px;}

.slidecontainer {font-size: 1.1em;}

td {flex-direction: column; justify-content: center; align-items: center; align-self: flex-start;align-content: flex-start; }


.show-more, .show-less {padding-left: 0px;}


}