#routing_matrix_wrapper {
    position: fixed;
    width: calc(100% - 32px);
    height: 100%;
    background-color: #ffffff;
    margin:  0px 0px 0px 0px;  /* Move under "View" bar*/
    padding: 20px 0px 0px 0px;
    z-index: -3;
}

#routing_matrix_div {
    position: fixed;
    float       : left;
    overflow    : scroll;
    width       : 70%;
    /* height is dynamically set in adjust_matrix_height() */
    box-sizing: border-box;
    will-change : transform, scroll-position;
    padding: px 10px 10px 0px;
}

#col_header_wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background-color: #ffffff;
    z-index: 6;
    display: table;  /* hack for "width: fit-contents" */
    
}
#col_header {
	position: absolute;
	top: 0px;
	/* "left" set in matrix.() */
	cursor: pointer;
}
#col_label {
    position: absolute;
}
#row_label {
	position: absolute;
	float: left;
	margin-left: 20px;
}

#row_header_wrapper {
    position: -webkit-sticky;
    position: sticky;
    left: 0; 
    z-index: 6; 
    background-color: #ffffff;
    float: left;
    margin-left: 20px;
}
#row_header {
	position: absolute;
	/* top is set in matrix.js/() */
	cursor: pointer;
}

#zoom_button_wrapper {
	position: fixed;
    background-color: #ffffff;
    float: left;
    z-index: 1;
    width:  270px;
    height: 100px;
    padding: 0px 0px 0px 20px;
}


#zoom_button_wrapper button {
}


#matrix {
	position: absolute;
	/* top, left values set in matrix.js */
	z-index : 0;
}


#matrix.busy {
	cursor: wait;
}


#inputs_label {
	position: absolute;
	left: 35px;
	bottom: 20px;
	width: 100%;
	transform: rotate(-90deg);
	transform-origin: bottom left;
}

.crosshair {
    position:absolute;
    display:none; 
    z-index: 6; 
    pointer-events: none; 
    will-change:transform, scroll-position;
    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s; /* Firefox < 16 */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;    
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

    

.crosshair_text {
	text-align: center; 
	background-color: rgba(255,255,180,0.7); 
	font-size:12px;
	padding:0; 
   -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;    	
   -webkit-touch-callout: none;
     -webkit-user-select: none;
      -khtml-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;            
}



.crosshair_h[data-size="1"] {
	min-height: 14px;
	max-height: 14px;
	/* "top" set in matrix.()" */
}
.crosshair_h[data-size="2"] {
	min-height: 30px;
	max-height: 30px;
	/* "top" set in matrix.()" */
}
.crosshair_h[data-size="4"] {
	min-height: 62px;
	max-height: 62px;
	/* "top" set in matrix.()" */
}
.crosshair_h .crosshair_text {
	float: right;
}
.crosshair_h[data-size="4"] .crosshair_text {
	margin: 22px 2px -2px 0px; 
	padding: 1px 5px 1px 5px;
	
}
.crosshair_h[data-size="2"] .crosshair_text {
	margin: 5px 12px -2px 0px; 
	padding: 1px 5px 1px 5px;
	
}
.crosshair_h[data-size="1"] .crosshair_text {
	margin:  -2px 9px -2px 0px;
	padding: 0px 5px 0px 5px; 
}



.crosshair_v[data-size="1"] {
	min-width: 14px;
	max-width: 14px;
	left: 200px;
}
.crosshair_v[data-size="2"] {
	min-width: 30px;
	max-width: 30px;
	left: 200px;
}
.crosshair_v[data-size="4"] {
	min-width: 62px;
	max-width: 62px;
	left: 200px;
}
.crosshair_v .crosshair_text {
    float: left;
    transform-origin : 0% 0%;
}
.crosshair_v[data-size="4"] .crosshair_text {
	margin: -4px -50px 20px 20px; 
	padding: 1px 5px 1px 5px;
}
.crosshair_v[data-size="2"] .crosshair_text {
	margin: -12px -50px 4px 5px;
	padding: 1px 5px 1px 5px;
}
.crosshair_v[data-size="1"] .crosshair_text {
	margin: -10px -50px -2px -2px; 
	padding: 0px 5px 0px 5px; 
}



#frame_container {
	position:absolute; 
	display:none;
	left: 200px;
	/* top set in matrix.() */  
	z-index: 5; 
	will-change:transform, scroll-position;
	cursor: pointer;
}

#frame_container.inside {
    cursor: cell;
}

#frame_container.busy {
	cursor: busy;
}

#frame {
	position: absolute; 
	z-index: 1;
}

#drag_select_container {
	position:absolute; 
	display:none;  
	z-index: 4; 
	will-change:transform, scroll-position;
}

#matrix-legend {
	display: block;
	float: right;
	width: 30%;
	height: 100%;
}

#matrix-legend ul  {
   list-style: none;
   margin-left: 1em;
   padding-left: 0;
   text-indent: -1em;
}

#matrix-legend ul i {
   text-indent: 0em;
}

#matrix-legend p, #matrix-legend li {
    margin: 0px;
    font-size: 12px;
}

#matrix-legend a {
    margin-left: 10px;
}

.legend-link {
    color: #0645AD;
    font-size: 14px;
}

.legend-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* https://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen 
 * Add class to routing_matrix_wrapper 
*/
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: none;
  background: lime; /* Just to visualize the extent */
  
}