scatterplot.css

.main text {
    font: 12px sans-serif;  
}


/* ------------------------- */
/* TABLE STYLING */
/* ------------------------- */
table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid lightyellow;
}

table-info-text, table-info-text.td {
    border-collapse: collapse;
    border: 1px solid lightblue;
    background-color: grey;
}
/* ------------------------- */



/* ------------------------- */
/* DROP DOWN MENU STYLING */
/* ------------------------- */
#graph-option-menus-container{
    display:grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto;
    justify-content: space-evenly;
    padding:20px;
    margin-bottom: 4px;
}

.menuItemText{
    padding:10px;
    font-size:1.2em;
    
}

#menuX, #menuY, #menuMarker, #menuScale{
    padding:10px;
    font-size:0.9em;

/*    float:left;*/
}

#menuX select, #menuY select, 
#menuMarker select, #menuScale select{
    font-size: 1.1em;
}

.menu-item-container{
    width:100%; 
    display:flex; 
    justify-content: space-between
}
/* ------------------------- */



/* ------------------------- */
/* GRAPH STYLING
/* ------------------------- */
.axis line, .axis path {
    shape-rendering: crispEdges;
    stroke: black;
    fill: none;
}

.axis-label {
  font-size: 1.5em;
  fill: #ffffff;
}
/* ------------------------- */


/* ------------------------- */
/* HEADER */
/* ------------------------- */
header{
    text-align: center;
    border-style: solid hidden solid hidden;
    border-width: 1px;
    padding:20px;
    box-shadow: 3px 3px 5px grey;
}
/* ------------------------- */



/* ------------------------- */
/* GRID FOR MAIN CONTAINERS
/* ------------------------- */
.container{
    margin:auto;
    width:1000px; 
    display:grid;
    grid-template-rows: 200px 70px auto;
    align-self: flex-start;
}

/* Text at the top to explain the tool */
#explanetion-container{
    padding:20px;
    margin-bottom: 4px;
}

/* Container for the file selection menus */
#file-selection{
    border-style: solid;
    border-width: 1px;
    border-color: rgb(201,95,71,0.1);
    box-shadow: 2px 2px 7px grey;
    padding:10px; /* If >15px the input button disappears in firefox */
    margin-bottom: 20px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

#graph-area{
    box-shadow: 2px 2px 7px grey;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(201,95,71,0.1);
    background: rgb(201,95,71,0.01);
}
/* ------------------------- */



/* ------------------------- */
/* GRAPH, TEXT and ANNOTATION CONTAINERS
/* ------------------------- */

#content-container{
    border-radius: 10px;
    padding:20px;
    margin-bottom: 4px;
    display:grid; 
    grid-template-columns: 580px auto;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}

#data-point-info-container, #data-point-text-container, #data-point-annotations-container, #svg-container{
    background-color:rgb(201,71,153,0.03);
    border-radius: 6px;
    padding:10px;
}

#data-point-text-field{
    border-radius: 6px;
    padding:10px;
    background-color:lightyellow;
}
/* ------------------------- */


/* ------------------------- */
/* FOOTER */
/* ------------------------- */
footer{
    background:rgb(90,204,72,0.4);
    padding:10px;
    text-align: center;
}
/* ------------------------- */



/* ------------------------- */
/* TOOLTIPS */
/* ------------------------- */
div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 70px;                  
  height: 18px;                 
  padding: 4px;             
  font: 12px sans-serif;        
  background: rgb(90,204,72,0.8);   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}