/*		
	
	This file contains some CSS fixes for the SCP application, and some general CSS styling for specific portions of the application

*/


/*		
	
	Fixes for the canvas

*/


#canvasContainer{
  display: inline-block
}

#myCanvas{
    width: 100% !important; 
    //max-height: 768px;
    height: 100% !important;
    display: block; /* fix necessary to remove space at bottom of canvas */
    position: static; /* fixed or static */
}

/*		
	D3 

*/

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

/*		
	Animation
	https://stackoverflow.com/questions/21261452/ng-animate-with-ng-class-directive

*/

.fadeInt{
	width: 100%;
}

.fadeInt.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fadeInt.ng-enter.ng-enter-active {
  opacity:1;
}


/* For the affix menu bar */

body{
  position: relative;
}

.scrollPoint {
    position:fixed;
    top:0;
    z-index: 9999;
    display: inline !important;
   /*width: 100%;*/
    transition: all linear 0.2s;
    opacity:1;
    visibility: none;
    width: 100%;
    background-color: #212427!important;
}

.hide{
  background-color: grey;
}

.animate-show{
  display:block!important;
  -moz-transition:all linear 1s;
  -o-transition:all linear 1s;
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
  opacity:1;
  visibility: visible;
}

.animate-show-hide.ng-hide {
  opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.2s;
}

.check-element {
  border: 1px solid black;
  opacity: 1;
  padding: 10px;
}

.addedPaddingAffix{
  margin-top: 92px;
}

#d3Graph svg{
  width: 100%;
  /*background-color: lightsalmon;*/
 
  /*stroke: #71dec0;*/
  /*fill: #71dec0;
  color: #71dec0;*/

  letter-spacing: 0.5px; 
  font-size: 16px;
  font-family: 'NeueEinstellung', Helvetica, Arial, sans-ser;
}

#graphBody{
   display: flex;
   align-items: center;
}

/*the text labels on the graph (0.1, 0.2... etc)*/
.tick text{
  fill: #71dec0;
}

/*the gridlines*/
.tick line, .yaxis path, .domain{
  stroke: #b4bbbf;
  /*stroke: #71dec0;*/
}

/*the point values throughout the graph
Note css: https://stackoverflow.com/questions/16946878/how-do-i-select-an-element-that-has-a-certain-class
*/
text.midpoint , .pointValues{
    fill: #71dec0;
}

/*the grid lines on the graph*/



/*    
  
  For the underlying equation

*/

#walls_equation, #objects_equation, 
#audience_equation, #rtSabine_equation{
  font-size: 14px;
}

/*    
  
  For the various instances of dimensions

*/

.unitAppearance{
  font-size: 14px;
}