/* Special appearances for buttons and separator elements */
select{
  font-family: fontAwesome;
}

/*Subject Button Appearance*/
.btn-subject {
  color: white;
  background-color: #0ab60a;
  border-color: #0ab60a;
  touch-action: manipulation;
}
.btn-subject:hover {
  color: white;
  background-color: #03a003cc;
  border-color: #03a003cc;
}

/*Predicate Button Appearance*/
.btn-predicate {
  color: white;
  background-color: #ffbf00;
  border-color: #ffbf00;
}
.btn-predicate:hover {
  color: white;
  background-color: #b88a00;
  border-color: #b88a00;
}

/*Object Button Appearance*/
.btn-object {
  color: white;
  background-color: #0101df;
  border-color: #0101df;
}
.btn-object:hover {
  color: white;
  background-color: #00009c;
  border-color: #00009c;
}

/*Optional Button Appearance*/
.btn-optional {
  color: white;
  background-color: rgb(0, 219, 219);
  border-color: rgb(0, 219, 219);
}
.btn-optional:hover {
  color: white;
  background-color: rgb(0, 177, 177);
  border-color: rgb(0, 177, 177);
}

/*Noun Button Appearance*/
.btn-noun {
  color: white;
  background-color: #00b0e6;
  border-color: #00b0e6;
  opacity: 0.5;
}
.btn-noun:hover,
.btn-noun:focus {
  color: white;
  background-color: #0085ad;
  border-color: #0085ad;
}

/*Verb Button Appearance*/
.btn-verb {
  color: white;
  background-color: #fd2a7b;
  border-color: #fd2a7b;
  opacity: 0.5;
}
.btn-verb:hover,
.btn-verb:focus {
  color: white;
  background-color: #aa0259;
  border-color: #aa0259;
}

/*Adjective Button Appearance*/
.btn-adjective {
  color: white;
  background-color: #01df01;
  border-color: #01df01;
  opacity: 0.5;
}
.btn-adjective:hover,
.btn-adjective:focus {
  color: white;
  background-color: #008800;
  border-color: #008800;
}

/*Named Entity Button Appearance*/
.btn-namedEntity {
  color: white;
  background-color: #52006b;
  border-color: #52006b;
  opacity: 0.5;
}
.btn-namedEntity:hover
.btn-namedEntity:focus {
  color: white;
  background-color: #52006bbd;
  border-color: #52006bbd;
}

/*POS-Label element appearance*/
pos {
  font-size: x-small;
  text-decoration: none;
}

/*Separator element appearance*/
sep:before{
  color: white;
  content: "][";
  font-size: 125%;
}

sep:hover,
sep:focus {
  color: black;
}
/*Separator subclasses appearances*/
.sep-start:before {
  content: " [";
  color: #00009c;
}

.sep-mid:before {
  content: "][";
  color: #00009c;
}

.sep-end:before {
  content: "] ";
  color: #00009c;
}

/*Code block appearance */
pre {
  font-family: Arial, Helvetica, sans-serif;
}

select.marked-list option.comment {
  background-color: #fffac7;
}

.warning {
  background-color: rgba(252, 138, 138, 0.85);
}

.done {
  background-color: #89c97f;
}

.favourite::after{
  font: var(--fa-font-solid);
  content: "\f005";
}

.warning-icon::after {
  font: var(--fa-font-solid);
  content: "\f071";
}

.done-icon::after {
  font: var(--fa-font-solid);
  content: "\f058";
}

.comment-icon::after {
  font: var(--fa-font-solid);
  content: "\f075";
}

/* feedback buttons and comment field*/
.icon::before {
  /* removed font- based rules */
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.btn-favourite::before{
  font: var(--fa-font-solid);
  content: "\f005";
  color: white;
}

.btn-done::before{
  font:var(--fa-font-solid);
  content:"\f058";
  color: #89c97f;
}

.btn-comment::before{
  font:var(--fa-font-solid);
  content: "\f075";
  color: #fffac7;
}

.btn-warning::before{
  font:var(--fa-font-solid);
  content:"\f071";
  color: rgb(252, 138, 138);
}

.btn-save::before{
  font: var(--fa-font-solid);
  content: "\f0c7";
  color: rgba(107, 124, 150, 0.85);
}

.btn-is-saved::before{
  font: var(--fa-font-solid);
  content: "\f0c7";
  color: rgb(137, 201, 127)
}

.btn-not-saved::before{
  font: var(--fa-font-solid);
  content: "\f0c7";
  color: rgba(252,138,138,0.85)
}

.toggle{
  background-color: rgba(65, 74, 82, 0.85);
  border: 3px inset rgba(90, 106, 129, 0.85);
  border-radius: 7px;
}