/* Stylings for LandingPageGraph.js Component.

Author: Adi Singh
*/

/*  This container takes up 100% of the screen space. Sets relative positioning so that all nodes
    inside this primary container can be positioned absolutely (meaning with percent offsets 
    from the top and left side of the screen).
*/
.lp_graph_container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100vh;
}

/*  Container for  the 'GTSFM Computational Graph Visualizer' header with orange background, black
    text, and large font. The header has a black border with a width that spans the entire screen.
*/
.navbar {
    height: 5%;
    width: 100%;
    background-color: #fcaf3e;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 1%;
    display: flex;
    align-items: center;
    padding-left: 2%;
    padding-right: 2%;
}

/*  Gives the 'GTSFM Computational Graph Visualizer' text a large font size and some spacing on the
    right.
*/
.gtsfm_header {
    font-size: 130%;
    margin-right: 10%;
}

/*  The area which renders all 43 nodes, edges connecting them, and plates. Makes the area span the
    entire width and height of the screen up to the tan navbad header. Gives a z-index of 1 so 
    other pop ups can appear on top of it.
*/
.gtsfm_graph {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/*  Styles the 'Scene Optimizer Scenes' Plate. Gives a blue, rectangular border around a large 
    majority of the nodes. Located in Second Quadrant of Screen. Z-index of 1 allows for pop 
    ups with greater z-index to overlay it.
*/
.loader_and_retriever {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 40%;
    height: 30%;
    border: 2px solid #0b8db5;
    padding-left: 1%;
    z-index: 1;
}

/*  Styles the 'Two View Estimator' Plate. Gives a blue, rectangular border around 9 nodes.
    Located in First Quadrant of Screen. Z-index of 1 allows for pop ups to overlay it.
*/
.two_view_estimator_plate {
    position: absolute;
    top: 13%;
    left: 30%;
    width: 31%;
    height: 37%;
    border: 2px solid #0b8db5;
    padding-left: 1%;  
    z-index: 1; 
}

/*  Makes the 'Two View Estimator' Plate have a gray background when hovered over. */
.two_view_estimator_plate:hover {
    background-color: whitesmoke;
    cursor: pointer;
}

/*  Styles the 'Sparse Multiview Optimizer' Plate. Gives a blue, rectangular border around 3 nodes
    Located in Third Quadrant of Screen. Z-index of 1 allows for pop ups to overlay it.
*/
.sparse_multiview_optimizer_plate {
    position: absolute;
    top: 68%;
    left: 40%;
    width: 20%;
    height: 22%;
    border: 2px solid #0b8db5;
    padding-left: 1%;   
    z-index: 1;
}

/*  Makes the 'Sparse Multiview Optimizer' Plate have a gray background when hovered over. */
.sparse_multiview_optimizer_plate:hover {
    background-color: whitesmoke;
    cursor: pointer;
}

/*  Styles the 'Averaging' Plate. Gives a blue, rectangular border around 7 nodes. Located in 
    Fourth Quadrant of Screen. Z-index of 1 allows for pop ups to overlay it.
*/
.correspondence_plate {
    position: absolute;
    top: 0%;
    left: 65%;
    width: 30%;
    height: 30%;
    border: 2px solid #0b8db5;
    padding-left: 1%;   
    z-index: 1;   
}

/*  Styles the 'Dense Multiview Optimizer' Plate. Gives a blue, rectangular border around 4 nodes.
    Located in Third Quadrant of Screen. Z-index of 1 allows for pop ups to overlay it.
*/
.sparse_reconstruction_plate {
    position: absolute;
    top: 31%;
    left: 0%;
    width: 29%;
    height: 66%;
    border: 2px solid #0b8db5;
    padding-left: 1%;   
    z-index: 1;
}

/* Gives each plate title a bold font and red coloring. */
.plate_title {
    color: red;
    font-weight: bold;
}