/* Stylings for MVOSummary.js Component.

Author: Adi Singh
*/

/* Styles the div containing all the multiview optimizer metrics text. Gives a light tango background
   with surrounding black border. Located in the second/third quadrant of the screen. 
*/
.mvo_container {
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: 2;
    border: 3px solid black;
    background-color: #fcaf3e;
    width: 55%;
    height: 40%;
    border-radius: 5px;
    padding: 1%;
}

/* Styles subcontainer div to take all the space within .mvo_container. Has relative positioning. */
.mvo_sub_container {
    position: relative;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

/* Makes each metrics header bold. */
.mvo_header {
    font-weight: 600;
}

/* Gives any text with the tag className="mvo_text" a lighter weight. Specically: Median Error, Min Error, and Max
Error.
*/
.mvo_text {
    font-weight: 400;
}

/* Makes each block of metrics text have spacing on its right side. */
.metrics_container {
    margin-right: 8%;
}

/* Positions the "Go Back" button in the bottom right corner. When hovered over, the mouse
   changes to a pointer.
*/
.go_back_btn {
    position: absolute;
    right: 0%;
    bottom: 15%;
    cursor: pointer;
}