#fh5co-text2hpo {
  padding: 4em 0;
  clear: both;
}
@media screen and (max-width: 768px) {
  #fh5co-text2hpo
}



@font-face {
  font-family: 'text2hpo';
  src: url('../fonts/text2hpo/text2hpo.eot?39372037');
  src: url('../fonts/text2hpo/text2hpo.eot?39372037#iefix') format('embedded-opentype'),
       url('../fonts/text2hpo/text2hpo.woff2?39372037') format('woff2'),
       url('../fonts/text2hpo/text2hpo.woff?39372037') format('woff'),
       url('../fonts/text2hpo/text2hpo.ttf?39372037') format('truetype'),
       url('../fonts/text2hpo/text2hpo.svg?39372037#text2hpo') format('svg');
  font-weight: normal;
  font-style: normal;
}

 [class^="text2hpoicon-"]:before, [class*=" text2hpoicon-"]:before {
  font-family: "text2hpo";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text2hpoicon-video:before { content: '\e800'; } /* ' ' */
.text2hpoicon-database:before { content: '\e801'; } /* ' ' */
.text2hpoicon-wrench:before { content: '\e802'; } /* ' ' */
.text2hpoicon-search:before { content: '\e803'; } /* ' ' */
.text2hpoicon-help-circled:before { content: '\e804'; } /* ' ' */
.text2hpoicon-annotation:before { content: '\e805'; } /* ' ' */
.text2hpoicon-flag-empty:before { content: '\f11d'; } /* ' ' */
.text2hpoicon-ellipsis-vert:before { content: '\f142'; } /* ' ' */
.text2hpoicon-doc-text-inv:before { content: '\f15c'; } /* ' ' */
.text2hpoicon-history:before { content: '\f1da'; } /* ' ' */
.text2hpoicon-trash:before { content: '\f1f8'; } /* ' ' */



.panel-default > .panel-heading {
  height: 48px;
  background-color: #e1e7ed;
}

.panel-default > .panel-footer {
  border: none;
  background-color: #fff;
}

.btn-link {
  color: black;
}

#div_total_match_num{
  font-weight: bold;
  color:       black;
  margin:      5px;
  border:      none; 
  font-size:   15px;
}

#ul_matches {
  height:        465px;
  overflow-y:    scroll;
  border-top:    1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size:     15px;
  color:         black;
}

#ul_matches li.hpo {
  margin:  5px;
  padding: 0.5em 0.5em 0.5em 0.5em;
  border-radius: 5px;
}

#ul_matches li.hpo::before {
  content:     "\2022";
  color:       red;
  font-weight: 900;
  display:     inline-block; 
  width:       1em;
}


#ul_matches li.hpo div.hpo_ctl {
  display:  inline-block;
  position: absolute;
  bottom:   12px;
  right:    6px;
}


#ul_matches li.hpo div.hpo_ctl ul li A:hover{
  text-decoration: none;
  border:          none;
}

#ul_matches li.hpo div.hpo_ctl ul li:hover{
  background-color: yellow;
  border:           1px solid black;
}

#ul_matches li.hpo span.hpo_match_title2 {
  color: #00000070;
}

#ul_matches li.hpo span.hpo_match_title1::before {
  content:     "\2022";
  display:     inline-block;
  color:       #00000070;
  width:       0.7em;
}

#ul_matches li.hpo span.hpo_match {
  background-color: #4BA084;
  color:            white;
  padding:          5px 10px 5px 10px;
  margin-top:       20px;
  margin-bottom:    20px;
  border-radius:    5px;
}


#ul_matches li.hpo div.hpo_detail {
  width:        100%;
  margin-left:  1em;
  margin-right: 5px;
  margin-top:   10px;
  padding:      0em 0em 0.1em 0em;
  display:      none;
}

#ul_matches li.hpo div.hpo_detail p {
  margin-bottom: 10px;
  margin-right:  15px;
}


#ul_matches li.hpo div.hpo_detail a {
  margin-left:   0px;
  margin-bottom: 8px;
  font-size:     12px;
  font-weight:   bolder;
}

#ul_matches li.hpo div.hpo_detail label {
  font-size:   11px;
  font-weight: bold;
  color:       red;  
  border:      1px solid red;

  position:  absolute;
  bottom:    7px;
  right:     60px;

}

#ul_matches li.hpo.without_symptoms::before {
  color:     blue;
}

#ul_matches li.hpo.without_symptoms div.hpo_detail label {
  color:     blue; 
  border:    1px solid blue;
}
#ul_matches li.hpo.chosen {
  border: 2px solid red;
}
#ul_matches li.hpo.chosen.without_symptoms {
  border: 2px solid blue;
}
#ul_matches li.hpo.chosen div.hpo_detail {
  display:     block;
}

#ul_matches li.hpo.chosen span.hpo_match_title1::before {
  content:     "\2794";
  width:       1em;
}
#ul_matches li.hpo.chosen span.hpo_match_title2 {
  opacity:     0;
}





#textarea_userinput {
  font-size:16px;
  color: black;
  magin:0px;
  padding:5px;
  width:100%;
  height:130px;
  resize:none;
}

#p_parsed_text {
  height:500px;
  resize: none;
  border-radius:5px;
  border: 1px solid #ccc;
  overflow: auto;
  font-size: 15px;
  color:     black;
  margin:    0px;
  padding:   10px;
}

#p_parsed_text::selection {
  background: #ffb7b7;
}
#p_parsed_text::-moz-selection {
  background: #ffb7b7;
}

#p_parsed_text span {
  border-bottom: solid 2px #ffb7b7;
}

#p_parsed_text span.chosen {
  background-color: #ffcccc;
  border-bottom: solid 2px red;
}

#p_parsed_text span.without_symptoms {
  border-bottom: solid 2px #b2e8f9;
}

#p_parsed_text span.without_symptoms.chosen {
  background-color: #b2e8f9;
  border-bottom: solid 2px blue;
}

#tbl_hpolist {
  color: black;
}

#tbl_hpolist tr{
  height: 48px;
}


#tbl_hpolist td.hpo_id::before {
  content:     "\2022";
  color:       red;
  font-weight: bold;
  display:     inline-block;
  width:       1em;
}

#tbl_hpolist td.hpo_id.without_symptoms::before {
  color:       blue;
}

#tbl_hpolist span.label {
  margin-top : 20px;
  margin-bottom: 20px;
  border-radius:5px;
  font-size: 13px;
  font-weight: bold;
  color:     red;
  border:    1px solid red;
}

#tbl_hpolist span.label.without_symptoms {
  color: blue;
  border:    1px solid blue;
}


#tbl_hpolist ul li A:hover{
  text-decoration: none;
  border: none;
}

#tbl_hpolist ul li:hover{
  background-color:yellow;
  border:           1px solid black;
}



#div_selectionPopup{
  display:       none;
  padding-left:  0;
  padding-right: 0;
  padding-top:   9px;
  position:      absolute;
  z-index:       999
}

#div_selectionPopup ul{
  list-style:       none;
  margin:           0 0 -4px 0;
  padding:          0.1em;
  overflow:         hidden;
  background-color: #fff;
  border:           1px solid #808080;
  font-size:        15px;
}

#div_selectionPopup ul li{
  white-space: nowrap;
  padding:     0;
  text-align:  left;
  color:       #000000;
  cursor:      pointer;
  border: 1px solid #ddd;
}

#div_selectionPopup ul li A{
  display:     block;
  width:       100%;
  padding:     2px 5px 2px 5px;
  color:       black;
}

#div_selectionPopup ul li A:hover{
  text-decoration: none;
  border: none;
}

#div_selectionPopup ul li:hover{
  background-color:yellow;
  border:           1px solid black;
}

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.svg-demo:before { 
  display: inline-block; 
  content: ''; 
  
            /* Using the background-image and 
               its related properties to add 
               the SVG content */ 
  background-image: url('../images/annotation.svg'); 
  background-size: 16px 16px;
  margin-left:  0;
  margin-right: 2px;
  vertical-align:bottom;
  height: 16px; 
  width: 16px; 
  color: #00000070;
} 

/* Style The Dropdown Button */
.dropbtn {
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.mydropdown {
  position: relative;
  display: inline-block;
  margin-right: 5px;
}

/* Dropdown Content (Hidden by Default) */
.mydropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 60px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.mydropdown-content a {
  color: black;
/*  padding: 4px 2px;*/
  text-decoration: none;
  display: block;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

/* Change color of dropdown links on hover */
.mydropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.mydropdown:hover .mydropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.mydropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.dropdown-item {
  cursor: pointer;
}

.dropdown-item:hover{
  background-color:yellow;
}