@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

@keyframes searchMoveUp{
    from{
        top:50%
    }
    to{
        top:20%
    }
}
@keyframes dashboardMoveUp{
    from{
        top:100%;
        opacity: 0;
    }
    to{
        
        top:60%;
        opacity: 1;
    }
}

*{
    margin:0;
    padding:0;
    outline: none;
    box-sizing: border-box;
    font-family: 'Comfortaa', cursive;
}

.searchContent{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:100%;
}
.searchbox{
    position: relative;
    left:50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,0.6);
    padding:15px;
    width:85%;
    border-radius: 5px;;
    display:flex;
    justify-content: space-between;

}

.searchbox .input{
    width:85%;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
}


.searchText{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.searchbtn{
    background: #ffec00;
    width:10%;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
}

.searchbtn .fas{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 18px;
}
.searchListDiv{
    
    z-index: 3;
    position: relative;
    margin-top:20px;
    left:50%;
    width:85%;
    border-radius: 5px;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,0.6);
    height: fit-content;
    max-height: 110px;
    overflow: auto; 
}
.searchOpt{
    
    color: white;
    border-bottom: 2px solid rgb(65, 64, 64);
    border-radius: 5px;
    display:flex;
    justify-content: space-between;
    padding: 15px 20px;
    font-weight: bold;
}
.drugOpt{
    
    margin: 10px;
    padding:10px;
    color:white;
    background: rgba(0,0,0);
    opacity:0.7;
    border-radius: 10px;
    display:flex;
}
.aSearchTag{
    width:fit-content;
    margin: 3px;
    padding:10px;
    color:white;
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
    display:flex;
}
.searchTags{
    display: flex; 
    position: absolute;
}

body{
    overflow: hidden;
    background-color: #F0E7D8;
}

.dashboard{
    display:flex;
    opacity:0;
    position: relative;
    height:80%;
    top:100%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.graphTitle{
    font-size: 1.5em;
    text-align: center;
    color: black;
    font-weight: bolder;
}

.boardTitle{
    padding: 5%;
    text-align: center;
    color: white;
}
.boardSubtitle{
    padding: 2%;
    font-size: 0.9em;

    text-align: center;
    color: white;
}

.pannelText{
    padding: 5%;
    font-size: 0.9em;
    text-align: center;
    color: white;
}

.drugBoard{
    border-style: none solid none none;
    border-width: 4px;
    border-color: rgb(103, 8, 167);

    width:20%;    
    margin-left: 5px;
}

.drugBoard,.NLPPannel{
    background-color: #B00020;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border-radius: 5px;
    height:99%;
}
.drugBoard:hover,.NLPPannel:hover{
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.graphHolder{
    width:55%;
    display: block;
}

.graphPannelTitle{
    width:100%;
    height:5%;
}
.graphPannel{
    width:100%;
    height:95%;

}

.NLPPannel{
    width:25%;
    margin-right: 5px;
}

.bar_rect{
    z-index:100;
}


svg {
    font-size: 0.8em;
    shape-rendering: crispEdges;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
  }

  path.domain {
    stroke: none;
  }
 
  .y .tick line {
    stroke: #ddd;
  }

  .loadingScreen{
      z-index: 1000;
      position: absolute;
      opacity: 0.7;
      width: 100%;
      height: 100%;
      background-color: white;
      background-image: url('assets/loading.gif');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
  }

  .topNLP,.midNLP,.bottomNLP{
    border-style: none none none solid;
    border-width: 4px;
  }

  .topNLPHeader,.midNLPHeader,.bottomNLPHeader,.topNLPConHeader{
    width:100%;
    height:5%;
  }

.topNLP{
    border-color: blue;
    width:100%;
    height:30%;
    padding:4%;
    border-radius: inherit;
}

.midNLP{
    border-color: rgb(58, 29, 112);
    width:100%;
    height:30%;
    border-radius: inherit;
}

.bottomNLP{
    border-style: none none none solid;
    border-width: 4px;
    border-color: blue;
    width:100%;
    height:15%;
    border-radius: 0px 0px 0px 5px;
}




.HBCbar {
    fill: #FFFFBF;
    stroke:#B6B486;
    stroke-width:1px;
    stroke-opacity:0.9;
}

.HBCaxis {
    font-size: 0.8em;
}

.HBCaxis path,
.HBCaxis line {
    fill: none;
    display: none;
}
.HBCaxis text{
    fill: white;
  }  

.HBClabel {    
    font-size: 0.8em;
    fill:white;
}