/*
* @license
* Copyright 2025 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/

/* * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#gmp-map-3d {
    height: 100%;
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    height: 100%;
    width: 100%;
}

#pipeSlider {
    /*position: absolute;*/
    /*bottom: 100px;*/
    /*right: 10px;*/
    writing-mode: vertical-lr;
    direction: rtl;
    width: 100%;
    vertical-align: bottom;
    /*z-index: 100;*/
}

#pointSlider {
    /*position: absolute;*/
    /*bottom: 100px;*/
    /*right: 60px;*/
    writing-mode: vertical-lr;
    direction: rtl;
    width: 100%;
    vertical-align: bottom;
    /*z-index: 100;*/
}

.card {
    padding: 20px;
    margin: 0;
    border-radius: 15px;

    z-index: 100;
    background: whitesmoke;
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);

    font-family: 'Helvetica Neue';
    font-weight: 400;
}

.altControl {
    display: grid;
    margin: 10px;
}

#controls {
    position: absolute;
    bottom: 40px;
    left: 330px;
    /*min-width: 250px;*/
    vertical-align: bottom;
    display: inline-flex;
}

#instructionsCard {
    position: absolute;
    bottom: 40px;
    left: 520px;
    /*min-width: 250px;*/
    vertical-align: bottom;
    display: inline-grid;
}

#statCard {
    position: absolute;
    bottom: 40px;
    left: 20px;
    min-width: 250px;
    vertical-align: bottom;
 }

#titleCard {
    position: absolute;
    top: 20px;
    left: 20px;
    vertical-align: bottom;
 }

#titleCard img{
    /*width: 120px;*/
 }