/*Header with image*/
html{
  height:100%;  
}

/* header {
    background-color: #34495e;
    background-image: linear-gradient(#34495e, #F8F8F8);
} */

/* image styles
 .img-wrap img {
    max-width: 23.5%;
    margin-left: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
} */

/*Body*/
body{
    background-color: #F8F8F8;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height:100%;

}
/*Form styles*/
.formText, form{
    position: relative;
    /* border-top: 4px solid red;
    border-bottom: 4px solid red; */
    margin: 2.5% 12% 2.5% 12%;
    padding:2.5% 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.formText{
    max-height: 35%;
    overflow: auto;
    border: 2px solid black;
}

 input[type]{
    border-radius: 8px;
    box-sizing: content-box;
    box-shadow: 2px 2px lightgray;
    text-transform: uppercase;
    height: 2.5vh;
    width: 17%;
    cursor: pointer;
}

input[type]:hover{
    background-color: antiquewhite;
    color: black;
} 

/*Footer*/
#footer-box{
    background-color: #34495e;
    text-align: center;
    padding-bottom: 2%;
    padding-top: 2.5%;
    color: #FFF;
    height:fit-content;
    margin-top: auto;
    
}

footer h1 {
    text-shadow: 2px 2px #000;
    font-size: 20px
}
footer h2 {
    text-shadow: 2px 2px #000;
    font-size: 15px
    
}

/*This is the search part*/
.search {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 25px;
    width: 100%;
}

.found {
    fill: #ff4136;
    stroke: #ff4136;
}

.popover-body{
    /* max-height: fit-content;*/
    max-width: fit-content;
    max-height: 500px;
    /* max-width: 500px; */
    overflow: auto;
    white-space:pre-wrap;
}

.popover{
    max-height: fit-content;
    max-width: fit-content;
    white-space:pre-wrap;
}