body {
    margin: 0;
    font-family: 'Source Sans Pro Topnav', sans-serif;
    padding-top: 9vh;
    
}
#app {
    height: 100%;
    .nav-bar {
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        
        display: flex;
        align-items: center;
        padding: 0px 13%;
        background-color: #F5F5F5;
        overflow: hidden;
        font-size: 1.2em;

        .nav-icon {
            display:flex;
            align-items: center;
            img {
                max-width: 100%;
                height: auto;
                border-radius: 5px;
            }
            /* flex-grow: 1; */
            /* font-size: 1.5rem; */
            margin-right: 5px;
        }
        text-align: center;

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0.8vh 0;
            overflow: hidden;
            
            display: flex;

            
            li {
                display: block;
                text-align: center;
                padding: 1.5vh 1.4vw;
                a {
                    text-decoration: none;
                    color: black;
                }
                border-radius: 3vh;
            } 

            li:hover {
                cursor: pointer;
                background-color: rgba(0, 128, 128, 0.3);
            }
        }

        
        /* a:hover:not(.active) {
         background-color: #D3D3D3;
        }
        .active {
         background-color: #D3D3D3;
        } */
     }

    main {
        margin: 2vh 12% 9vh 12%;
        text-align: center;
        overflow: auto;
        
        .title {
            font-size: 2.3em;
            color:black;
        }
        .description{
            font-size: 1.4em;
            margin-bottom: 3vh;
        }
        .redirect {
            font-size: 1.5em;
        }

        .text-and-img {
            padding: 2vh;
            border-radius: 2.25vh;
            display: flex;
            justify-content: space-between;
            .text {
                text-align: left;
                /* float:left; */
                p {margin-top: 1.5vh;}
                font-size: 1.25em;
            }
            
            #last {
                margin-left: auto
            }
            

            img {
                width: 20vh;
            } 

            #metagraph {
                width: 42vh;
            }

        }
        .content {
            text-align: left;
            > p {
                margin: 0;
            }
        }

        .text-and-command {
            margin: 3vh 0;
            > div {
                margin-top: 1.5vh;
            } 
            .well p {
                margin: 0;
            }
            .command-description {
                max-width: 75%;
                li {
                    margin-bottom: 0.3vh;
                }

                div {
                    display: inline-block;
                    padding: 0.3vh;
                    margin-bottom: 0
                }
            }           
        }


        #home{

            p.home--title {
                font-size: 1em;
                color: red;
                margin-bottom: 1.5vh;
            }
            
            
            p {
                font-size: 2em;
                color: black;
                margin-bottom: 2vh;
            }

            
            img{
                max-width: 70%;
                height: auto;
            }
        } 

        #overview {
            #architecture {
                border-radius: 3vh;
                box-shadow: 0 0 4.5vh rgba(0, 128, 128, 0.3);
                img {
                    max-width: 90%;
                    
                    /* border: 2px solid #009879;  */
                }
            }
            
        }

        .intro {
            display:flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 5vh;
            div {
                color: black;
                font-size: 1.2em;
                padding: 2.25vh;
                background-color: rgba(0, 128, 128, 0.3);
                margin: 1.2vh 1.2vw 1.5vh 1.2vw;
                border-radius: 7.5vh;
                box-shadow: 0 0 0.75vh rgba(0, 0, 0, 0.15);
                cursor: default;
            }
            :first-child {
                margin-left: 0;
            }
            :last-child {
                margin-right: 0;
            }

        }

        .labels {
            display: flex;
            flex-direction: row;
            justify-content: center;
            font-size: 1.5em;
            margin-top: 2.75vh;
            div {
                margin: 0px 2vw;
            }
            :first-child {
                margin-left: 0;
            }
            :last-child {
                margin-right: 0;
            }
        }
    }

    #footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #014d4e;
        color: white;
        padding: 2.25vh 15%;
        p {
            margin: 0;
        }
        margin-top: 1.5vh;
    }
}

.chosen_service {
    background-color: rgba(0, 128, 128, 0.3);
}

hr {
    margin: 1vh 0;
    border: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #fff;
}

.gap {
    background-color: rgba(0,128,128,0.1);
}

#shothound_result {
    /* position: absolute;
    top: 5vh;
    left: 40vw; */
    height: 60vh;
    cursor:pointer;
}

.shothound_table {
    border-collapse:separate;
    min-width:100%;
    max-height: 100%;
    margin:0 auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    /* overflow: scroll; */
    overflow-y:scroll;
    display: block;
    border-bottom: 2px solid #009879;
    box-sizing: border-box;
    border-radius: 3vh;
    border-spacing: 0;
}

.shothound_table{
    thead {
      /* border-bottom: 2px solid black; */
      position: sticky;
      top: 0;

      th {
        background-color: teal;
        color: white;
        /* border-bottom: 2px solid black; */

      }

      tr{
        border-bottom: 2px solid black;
      }

      :after {
        content: "";
        display: block;
      }
      
    }


    tr {
      text-align:left;
      background-color: whitesmoke;
      color: black;
    }
  }
  
  
  .shothound_table th,
  .shothound_table td {
    padding:12px 15px;
  }
  
  .shothound_table tbody tr {
    text-align:left;
    border-bottom: solid 1px #dddddd;
    > td {
        /* position: relative; */
        z-index: 1;

    }
  }
  
  .shothound_table tbody > tr:nth-of-type(even) {
    background-color:whitesmoke;
  }
  .shothound_table tbody > tr:nth-of-type(odd) {
    background-color:white;
  }
  .shothound_table tbody tr:hover {
    background-color: #F1FBF7; /* Add a highlight effect on hover */
  }
  td:first-child:hover, th:hover {
    cursor: default; /* Change this to the desired background color on hover */
}

#iframe-container {
    text-align: center !important; /* Center child elements horizontally */
    height: 60vh; /* Full viewport height */
    display: flex;
    align-items: center; /* Center vertically */
    margin-top: 3vh;

    iframe {
        display: inline-block;
        width: 70%; /* Adjust the width as needed */
        height: 100%; /* Adjust the height as needed */
        margin: auto;
    }
}

#publications, #contact {
    div {
        margin-top: 5vh;
        p, li {
            text-align: left;
            font-size: 1.25em;
        }
    }
}