/* Define colors here */

:root {
  --ig-status-text-color: #333333; /* 1. IG Title and status text color */
  --navbar-bg-color: #1f4d2e; /* 2. Header container color */
  --footer-bg-color: #666e68; /* 3. Footer background color*/
  --footer-container-bg-color: #1f4d2e; /* 4. Footer container color */
  --stripe-bg-color: #668877; /* 5. Header strip color */

  --btn-hover-color: #33804a;  /* 6. Menu button hover color */
  --btn-active-color: #43a862; /* 7. Menu button active color */
  --btn-text-color: #ddffee; /* 8. Menu button text color */
  --btn-gradient-start-color: #33aa77; /* 9. Menu item gradient start color */
  --btn-gradient-end-color: #209966; /* 10. Menu item gradient end  color */
  --btn-gradient-start-color-alpha: #ff33aa77; /* 11. Menu item gradient start color (with alpha) */
  --btn-gradient-end-color-alpha: #ff209966; /* 12. Menu item gradient end color (with alpha) */
  --link-color: #24d160; /* 13. Hyperlink text color */
  --link-hover-color: #109030; /* 14. Hyperlink text hover color */

  --publish-box-bg-color: #ffffd0; /* 15. Publish box background color */
  --publish-box-border: 1px solid green; /* 16.  Publish box border definition */

  --toc-box-bg-color: #ddffee; /* 17.  TOC box background color */
  --toc-box-border: 1px solid green; /* 18. TOC box border definition */
  
  --stu-note-background-color: #ffccbb; /* 19. (STU) Note box background color */
  --stu-note-border-left-color: #ff6020; /* 20. (STU) Note box border color */

  --ig-header-color: #f5faf5; /* 21. Header color (sides) */
  --ig-header-container-color: #fdfffd; /* 22. Header container color (center) */

}

dl {
  display: flex;
  flex-flow: row wrap;
}
dt {
  flex-basis: 20%;
  padding: 2px 4px;
  text-align: left;
  margin-left: 3em;
}
dd {
  flex-basis: 70%;
  flex-grow: 1;
  margin: 0;
  padding: 2px 4px;
}

.feedback {
  color: #f0f0f0;
  padding:1px ;
  font-size: 80%;
  background-size: 17px 17px;
  background-position: left center;
  background-repeat: no-repeat;
  margin-left: 7px;
  padding-left: 7px;
  padding-right: 7px;
  float: none ; /* none or inline-end */
  border-radius: 6px; 
  border: 0.5px solid #ffffff;
}

.feedback:before {  /* 'feedback:before' or after for icon before or after text  */
  content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguMzE4NzIgMCAwIC4zMTg3MiAtMi4xNDYxIC0yLjE3NTcpIiBmaWxsPSIjODgyMjIyIj48cGF0aCBkPSJtNTUuNzM2IDEzLjYzNi00LjM2OC00LjM2MmMtMC40NTEtMC40NTEtMS4wNDQtMC42NzctMS42MzYtMC42NzdzLTEuMTg0IDAuMjI1LTEuNjM1IDAuNjc2bC0zLjQ5NCAzLjQ4NCA3LjYzOSA3LjYyNiAzLjQ5NC0zLjQ4M2MwLjkwMy0wLjkwMiAwLjkwMy0yLjM2NSAwLTMuMjY0eiIvPjxwb2x5Z29uIHBvaW50cz0iMjEuOTIyIDM1LjM5NiAyOS41NjIgNDMuMDIzIDUwLjYwNyAyMi4wMTcgNDIuOTY3IDE0LjM5Ii8+PHBvbHlnb24gcG9pbnRzPSIyNy45MTMgNDQuNjU0IDIwLjI3MyAzNy4wMjggMTguNjQyIDQ2LjI4Ii8+PHBhdGggZD0ibTQxLjM5MyA1MC40MDNoLTI4LjgwNnYtMjguODA2aDIwLjMyOWw1LjAxLTVoLTI3LjEwNmMtMS43NzkgMC0zLjIzNCAxLjQ1NS0zLjIzNCAzLjIzNHYzMi4zMzljMCAxLjc3OSAxLjQ1NSAzLjIzNCAzLjIzNCAzLjIzNGgzMi4zMzljMS43NzkgMCAzLjIzNC0xLjQ1NSAzLjIzNC0zLjIzNHYtMjMuMTIxbC01IDQuOTkxeiIvPjwvZz48L3N2Zz4K')!important;
}

.feedback:after {  /* 'feedback:before' or after for icon before or after text  */
  content: none !important;
  padding-left: 3px;
  padding-right: 3px;
}

.feedback:hover  {
  color: #101010;
  border: 0.5px solid #777;
  background-color: #f7f7f7;
}

figcaption {
  caption-side: top;
  font-weight: bold;
  font-size: smaller;
  text-align:center;
  width:100%;
}

figure {
  display : block;
  width: 100%;
  text-align: center;
  text-indent: 0;
  border: thin silver solid;
}

figure > img {
  max-width: 100%
}