/* GENERAL */

* {
  box-sizing: border-box;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: keep-all;
}

body {
  background-color: #f0f0f0;
}

.error {
  color: #3b3a30;
  /*background: #eaece5;*/
  background-color: #c94c4c;
  padding: 1vh;
  font-size: 1.0em;
  font-family: "Arial";
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.warning {
  color: #3b3a30;
  /*background: #eaece5;*/
  /*background-color: #c94c4c;*/
  background-color: #c0ded9;
  padding: 1vh;
  font-size: 1.0em;
  font-family: "Arial";
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.info {
  color: #3b3a30;
  background-color: #eaece5;
  padding: 1vh;
  font-size: 1.0em;
  font-family: "Arial";
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.success {
  background-color: #c5d5c5; 
  /*background: #eaece5;*/
  color: #3b3a30;
  padding: 1vh;
  font-size: 1.0em;
  font-family: "Arial";
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.mobilebreak{
}

@media only screen and (max-width: 800px) {
  
 .mobilebreak{
   display: block;
 }
}

/* HEADERS */

h1 {
  color: #9fa9a3;
  font-family: "Times New Roman";
}

h2 {
  text-align: center;
  font-size: 1.5em;
  background-color: #c5d5c5;
  font-family: Arial;
  position: sticky;
  top: 51px;
  z-index: 1;
}

@media only screen and (max-width: 600px) {

  h2 {
   font-size: 1em;
  }
}

h3 {
  text-align: center;
  font-size: 1.1em;
  background-color: #c5d5c5;
  font-family: Arial
}

.mobile_leftalign {
}

@media only screen and (max-width: 600px) {
  .mobile_leftalign{
    margin-right: 165px;
    z-index: 4;  
  }
}

/* IMAGES */

img {
  max-width: 100%;
  height: auto;
  /*-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));*/
}

.poster {
  border: 1px solid #3b3a30;
  margin: auto;
  /*-webkit-box-reflect: unset;*/
  display: block;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1); 
}

/* FORMS */

.formheader { 
  position: sticky;
  text-align: center;
  top: 51px;
  background-color: #c0ded9;
  color: #3b3a30;
  z-index: 1;
}

fieldset { 
 background-color: #eaece5;
 font-family: "Verdana";
 color: #3b3a30;
 border-radius: 7px;
 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

fieldset input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], fieldset select {
  width: 100%;
  padding: 6px 10px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #9fa9a3;
  border-radius: 2px;
  box-sizing: border-box;  
  font-family: "Verdana";
  color: #3b3a30;
  font-size: 1.0em;
}

input[type=text].compactfieldset {
  width: 10%;
  padding: 3px 5px;
}

input[type=number].compactfieldset {
  width: 4%;
  padding: 3px 5px;
}

input[type=number].mediumfieldset {
  width: 6%;
  padding: 3px 5px;
}

input[type=text].substitutefieldset {
  width: 65%;
  padding: 3px 5px;
}

input:required {
  background-color: #e3e0cc;
}

input:invalid, textarea:invalid {
  background-color: #eea29a;
}

select.compactfieldset {
  width: 9%;
  padding: 3px 5px;
  font-size: 1.0em;
  margin: 10px 10px;
}

select.mediumfieldset {
  width: 50%;
  padding: 3px 5px;
  font-size: 1.0em;
  margin: 10px 10px;
}

select.autofieldset {
  width: auto;
  padding: 3px 5px;
  font-size: 1.0em;
  margin: 10px 10px;
}


@media only screen and (max-width: 800px) {
  
 input[type=text].compactfieldset {
    width: 100px;;
 }

 input[type=number].compactfieldset {
    width: 40px;
 }

 select.compactfieldset {
    width: 90px;
 }
}

.compactfieldset_readonly {
  visibility: hidden;
}

fieldset select option:hover {
  background-color: #b2c2bf;
  color: #3b3a30;
}

fieldset option:checked {
  background-color: #b2c2bf;
  color: #3b3a30;
}

fieldset a:link {
  color: #9fa9a3;
  text-decoration: none;
}

fieldset a:visited {
  color: #9fa9a3;
  text-decoration: none;
}

fieldset a:hover {
  color: #c0ded9;
  text-decoration: none;
}

fieldset a:active {
  color: #9fa9a3;
  text-decoration: none;
}

fieldset input[type=submit] {
  width: 100%;
  background-color: #3b3a30;  
  color: #f0f0f0;
  padding: 7px 10px;
  margin: 8px 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5em;
}

.magicbutton {
  width: 100%;
  background-color: #3b3a30;
  font-family: "Verdana";  
  color: #f0f0f0;
  padding: 7px 10px;
  margin: 8px 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5em;
  text-align: center;
}

fieldset input[type=submit]:disabled {
 background-color: #9fa9a3;
 opacity: 0.6;
 cursor: not-allowed;
}

fieldset input[type=submit]:hover {
  background-color: #9fa9a3;
  color: #f0f0f0;
}

fieldset input[type=file] {
  padding: 0px 5px;
  margin: 8px 0;
}

fieldset input::file-selector-button {
  padding: 0.5em;
  border: thin solid grey;
  border-radius: 3px;
  background-color: #c5d5c5;
  color: #3b3a30;
}

fieldset input::file-selector-button:hover {
  background-color: #c0ded9;
  color: #eaece5;
  cursor: pointer;
}

/* INPUT */

.checkboxblock {
  break-inside: avoid;
  white-space: nowrap;
}

input[type=checkbox]
{
  accent-color: #f0f0f0;
}

input[type=radio]
{
  accent-color: #3b3a30;
}

input[type=search] {
 width: 10%;
 background-image: url('pic/searchicon.ico');
 background-position: 0px 0px;
 background-repeat: no-repeat;
 padding-left: 20px;
 transition: width 1s ease-in-out;
 margin: 0 3px;
}

input[type=search]:focus {
  width: 14%;
}

@media only screen and (max-width: 800px) {
  input[type=search] {
    width: 45%;
  }
   
  input[type=search]:focus {
    width: 60%;
  } 
}

textarea {
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  padding: 6px 10px;
  margin: 8px 0;
  border: 1px solid #9fa9a3;
  border-radius: 2px;
  font-family: "Verdana";
  color: #3b3a30;
  font-size: 1.0em;
}

.narrowtextarea {
  height: 80px;
}

textarea.hugeeditor {
  height: 35vh; 
}

@keyframes groweditor {
  0% {transform: scaleY(0);}
  100% {transform: scaleY(1);}
}

iframe.hugeeditor {
  display: none;
  height: 35vh;
  animation: groweditor 0.5s 1;
}

iframe.imagelist {
  height: 20vh;
  animation: groweditor 0.5s 1;
  border: 1px solid #9fa9a3;
  background-color: #eaece5;
}

iframe.tutorial {
  height: 80vh;
  border: none;
}

.hiddentexteditor {
  line-height: 2;
  padding: 10px 0;
}

.restricted {
  background-color: #e4d1d1;
}

.invalid {
  background-color: #eea29a;
}

.menuseparator {
  color: #3b3a30; 
}

.menutext {
}

@media only screen and (max-width: 850px) {

  .menutext {
    display: none;
  }
  
}

.mobile_only {
  display: none;
}

@media only screen and (max-width: 850px) {

  .mobile_only {
    display: block;
  }
  
}
/* INDIVIDUAL */

#previewtogglebutton {
  float: right;
}

#previewbutton {
  display: none;
}

/* MENU */

li.menu input[type=submit] {
  background-color: #eaece5;
  color: #3b3a30; 
  padding: 19px;
  margin: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

li.menu input[type=submit]:hover {
  background-color: #b2c2bf;
  color: #f0f0f0;
}

.rightmenu {
  float: right;
}

.leftmenu {
  float: left;
}

nav {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100%;
  background-color: rgba(234, 236, 229, 0.8);
  border: 1px solid #c5d5c5;
  /*padding: 1vh;
  border-radius: 7px;
  opacity: 0.9;*/
  display: inline-block;
}

.account_dashboard {
  background-color: #e3e0cc;
  z-index: 1;
  /*overflow: hidden;
  text-overflow: ellipsis;*/
  margin: 0 3px;
  float: left;
  border: 1px solid #c5d5c5;
  padding: 10px;
}

a.dashboardlink:link {
  color: #3b3a30;
}

a.dashboardlink:visited {
  color: #3b3a30;
}

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #eaece5;
  display: inline-block;
  z-index: 3;
}

@media only screen and (max-width: 600px) {

 nav {
   top: 50px;
  }
  
 nav.notloggedin {
   top: 0;
 }
 
 .account_dashboard {
    position: absolute;
    top: -50px;
    left: 0;
    margin: 0;
    width: 100%;
 }
}

li.menu {
  float: left;
  margin: auto;
  border: 1px solid #c5d5c5;
  border-radius: 5px;
  padding: 10px;
  font-family: "Garamond";
  z-index: 3;
  /* NEW */
  text-align: center;
  transition: all 0.3s ease;
}

li.menubutton {
  padding: 0;
  /* NEW */
  transition: all 0.3s ease;
}

li.nopad {
  padding: 0;
}

.languageflag {
 cursor: pointer;
 padding: 0;
 border-radius: 5px;
 border: 1px solid #c5d5c5;
}

.languageflag:hover {
 background-color: #b2c2bf; 
}

img.languageflag {
 position: relative;
 top: 2px;
}

li.menu:hover {
  background-color: #b2c2bf;
  color: #f0f0f0; 
}

li.menu a {
  text-decoration: none;
  color: #3b3a30; 
}

li.menu a:link {
  color: #3b3a30;
}

li.menu a:visited {
  color: #3b3a30;
}

li.menu a:hover {
  color: #f0f0f0;
}

.buttonicon {
  color:  #c0ded9;
}

/*.button {
}*/

.disabled {
 opacity: 0.6;
 cursor: not-allowed;
}

.contentbutton {
  color: #c0ded9;
}

.contentbutton:hover{
  color: #77a8a8;
}

/* PAGE SPECIFIC */ 

.couponlist {
  font-size: 1em;
  color: #9fa9a3;
}

.paymentinfo {
  padding: 2vh;
  font-size: 1.3em;
  text-align: center;
  font-weight: bold;
  color: #3b3a30;
  font-family: "Verdana";
}

.contentdescription {
  font-family: "Georgia";
  color: #3b3a30;
  background-color: #e3e0cc;
  opacity: 0.9;
  resize: vertical;
  border-radius: 0 0 15px 0;
  padding: 15px;
  text-align: justify;
}

.priceinfo {
  font-family: "Arial";
  color: #3b3a30;
  font-size: 0.9em;
  background-color: #f0f0f0;
}

p.thumbnaileditor{
  margin: auto;
}

/*
img.thumbnaileditor{
 -webkit-box-reflect: unset;
}*/

.editoricon {
  font-size: 100%;
}

/* LINKS */

a:link {
  color: #9fa9a3;
  text-decoration: none;
}

a:visited {
  color: #9fa9a3;
  text-decoration: none;
}

a:hover {
  color: #3b3a30;
  text-decoration: none;
}

a:active {
  color: #9fa9a3;
  text-decoration: none;
}

/* PARTS */

.hugearrow {
  color: #e3e0cc;
  font-size: 1500%;
}

.hugearrow:hover {
  color: #3b3a30;
}

/* CONTENTBROWSER */

.contentbrowser { 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: space-around;
}

.contentbrowser_element {
  flex-basis: 325px;
  flex-basis: 250px;
  /*max-width: 350px;*/
  border: solid 1px;
  /*border-radius: 0 10px 10px 0;*/
  /*background-color:	#eaece5;*/
  background-color: white;
  padding: 6px;
  text-align: center;
  border-collapse: collapse;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 1px 5px 0 rgba(0, 0, 0, 1);
  margin: 3px;
  font-family: "Arial";
}

.contentbrowser_element:hover {
  border-style: ridge;
}

.contenttitle {
  color: #3b3a30;
}

/* VIDEO */

video {
  width: 100%;
  border-style: groove;
  object-fit: scale-down;
  height: auto;
}

.tutorialvideo {
  display: block;
  object-fit: scale-down;
  height: 500px;
  /*width: auto;*/
  margin: 0 auto;
}

/* TABLE */

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #3b3a30;
  color: #3b3a30;
  /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);*/
}

tr {
  background-color: #eaece5;
}

tr:nth-child(even) {
    background-color: white;
}

tr:hover {
}

th {
  padding: 10px;
  background-color: #9fa9a3;
  color: #eaece5;
}

td {
  padding: 5px;
}

/*
div.filters {
  position: absolute;
  left: 0;
}
*/

.column {
  float: left;
  width: 20%;
  padding: 15px; 
}

.mini {
  text-align: center;
  font-size: 0.8em;
  font-family: "Courier New";
}

.footerlink a:link {
  color: #b2c2bf;
}

.footerlink a:visited {
  color: #b2c2bf;
}

.footerlink a:active {
  color: #b2c2bf;
}

.footerlink a:hover {
  color: #9fa9a3;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

footer {
  background-color: #eaece5;
  border: 1px solid #c5d5c5;
  border-radius: 5px;
}

.disablesite {
  position: fixed;
  bottom: 0;
  right: 0;
  top:0;
  left:0;
  height:100%;
  width:100%;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-image: linear-gradient(to right, mintcream, white);
  z-index: 5;
  opacity: 0.5;
}

.cookieconsent {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #3b3a30;
  color: #f0f0f0;
  width: 30%;
  padding: 15px;
  opacity: 1;
  z-index: 6;
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.cookieconsentbutton {
  margin: 5px;
}

.timestamp {
 text-align: right;
 font-size: 70%;
 color: #9fa9a3;
}

.content_type_blogpost {
  border: 3px solid green;
}

.content_type_blogpost:hover {
  border: 2px double green;
}

.content_type_document {
  border: 3px solid blue;
}

.content_type_document:hover {
  border: 2px double blue;
}

.content_type_video {
  border: 3px solid red;
}

.content_type_video:hover {
  border: 2px double red;
}

.content_type_audio {
  border: 3px solid yellow;
}

.content_type_audio:hover {
  border: 2px double yellow;
}

.content_type_poster {
  border: 3px solid purple;
}

.content_type_poster:hover {
  border: 2px double purple;
}        

.content_type_physical {
  border: 3px solid black;
}

.content_type_physical:hover {
  border: 2px double black;
}

.content_type_quiz {
  border: 3px solid darkorange;
}

.content_type_quiz:hover {
  border: 2px double darkorange;
}

.content_type_sequence {
  border: 3px solid gold;
}

.content_type_sequence:hover {
  border: 2px double gold;
}

.searchbox {
 background-color: #e3e0cc;
 padding: 2px 5px;
 border: 1px solid #3b3a30;
 border-radius: 5px;
 position: sticky;
 top: 80px;
 z-index: 2;
 text-align: center;
}

@media only screen and (max-width: 600px) {
  .searchbox {
    top: 100px;
  }
  
  .searchbox_nologin {
    top: 80px;
  }
}

.anchor {
}

.longtext {
  width: 100%;
  padding: 3px 3px 30px;
  /*margin: 8px 0;*/
  /*border: 1px solid #ccc;*/
  /*border-radius: 4px;*/
  display: inline-block;
  box-sizing: border-box;  
  font-family: "Verdana";
  color: #3b3a30;
  font-size: 1.0em;
  /*background-color: #eaece5;*/
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 1);*/
  text-align: justify;
}

.longtext a:link {
  color: #9fa9a3;
}

.longtext a:visited {
  color: #9fa9a3;
}

.longtext a:hover {
  color: #3b3a30;
}

.longtext a:active {
  color: #9fa9a3;
}

iframe {
  width: 100%;
  height: auto;
}

.dashboardicon {
 position: relative;
 bottom: -6px;
}

.dashboardmoney{
 color: #405d27; 
}

.dashboardgold{
 color: #ffef96; 
}

.dashboardgems{
 color: #f0f0f0; 
}

.dashboardxp{
 color: #c94c4c; 
}

.dashboardvotingtoken{
 color: #92a8d1; 
}

.dashboardstreak{
 color: #ee82ee; 
}

.dashboardwarning{
 color: rgb(255, 0, 0); 
}

.contentmenu {
  float: right;
  /* NEW */
  /*transition: all 0.3s ease;*/
}

.savinganimation {
  color: #f0f0f0;
  animation-name: saving_animation;
  animation-duration: 1s;
}

.savinganimation_infinite {
  color: #f0f0f0;
  animation-name: saving_animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes saving_animation {
  0%   {color: #f0f0f0;}
  10%  {color: #c5d5c5;}
  20%  {color: #9fa9a3;}
  30%  {color: #e3e0cc;}
  40%  {color: #eaece5;}
  50%  {color: #b2c2bf;}
  60%  {color: #c0ded9;}
  70%  {color: #3b3a30;}
  80%  {color: #b2c2bf;}
  90%  {color: #e3e0cc;}
  100% {color: #c5d5c5;} 
}

li.dropdown {
  display: block;
  margin: auto;
  float: left;
  border: 1px solid #c5d5c5;
  border-radius: 5px;
  padding: 10px;
  font-family: "Garamond";
  color: #3b3a30;
  /* NEW */
  transition: all 0.3s ease;
}

li.dropdown:hover {
  background-color: #b2c2bf;
  color: #f0f0f0;
}

li .dropdown:hover {
  background-color: #b2c2bf;
}

.tagblock {
  border: thin solid #e3e0cc;
  padding: 8px 3px;
  border-radius: 5px; 
  margin: 2px;
  break-inside: avoid;
  white-space: nowrap;
  @-moz-document url-prefix() {
    white-space: normal;
  }
}

.tagblock:hover {
  background-color: #f0f0f0;
}

.taglist {
  float: left;
  font-size: 0.9em;
  color: #c0ded9;
  font-family: "Tahoma";
}

.taglist a:link {
  color: #9fa9a3;
}

.taglist a:visited {
  color: #9fa9a3;
}

.taglist a:active {
  color: #9fa9a3;
}

.taglist a:hover {
  color: #3b3a30;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 10px;
  margin-left: -10px;
  z-index: 3;
  border-radius: 5px;
  background-color: #eaece5;
  border: 1px solid #9fa9a3;
  font-family: "Garamond";
  box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.75); 
}

.dropdown-content a {
  display: block;
  text-decoration: none;
  padding: 5px;
  border: 1px solid #c5d5c5;
}

.dropdown-content a:visited {
  color: #3b3a30;
}

.dropdown-content a:hover {
  background-color: #b2c2bf;
  color: #f0f0f0;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.leftbrowserarrow {
  float: left; 
  font-size: 0.8em;
  /*max-height: 33px;*/
}

.rightbrowserarrow {
  float: right; 
  font-size: 0.8em;
  /*max-height: 33px;*/
}

.calendar {
  text-align: right;
  border: 1px solid #b2c2bf;
  vertical-align: top;
}

.calendar:hover {
  background-color: #e3e0cc;
}

.calendartable {
  table-layout: fixed;
}

.today {
  background-color: #c0ded9;
}

.activeday {
  background-color: #e3e0cc; 
}

.outside_of_active_month {
 background-color: #f0f0f0;
}

.outside_of_active_month a:link {
 color: #b2c2bf;
}

.outside_of_active_month a:visited {
 color: #b2c2bf;
}

.outside_of_active_month a:active {
 color: #b2c2bf;
}

.holiday {
 color: #c94c4c;
}

.passiveholiday {
  color: #f7cac9;
}

.noholiday {
 color: #3b3a30;
}

.newentryfooter {
  text-align: center;
}

.calendarthumbnail {
  border: 1px solid #3b3a30;
  /*-webkit-box-reflect: unset;*/
  float: left;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 15px;
  padding: 3px;
}

.dayinfo {
  padding: 12px 20px;
  margin: auto;
  margin-top: 5px;
  border: 1px solid #c0ded9;
  font-family: "Trebuchet MS";
  color: #3b3a30;
  font-size: 1.0em;
  text-align: justify;
  background-color: #eaece5;
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.shortdayinfo {
  width: 98%;
  background-color: #f0f0f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.29);
  padding: 3px 3px;
  border-radius: 0 5px 0 5px;
  margin: 0 0 3px 0;
  border: thin groove #eaece5;
  font-size: 0.9em;
  overflow: hidden;
  max-height: 200px;
}

.privatecalendarentry {
  border: thick groove #9fa9a3;
}

.bigprivatecalendarentry {
  background-color: #c0ded9;
}

.dayinfoimage {
  float: left;
  padding: 10px;
}

.dayinfotitle {
  font-size: 1.2em;
  font-family: "Trebuchet MS";
}

.dayinfotimes {
  font-size: 0.9em; 
  color: #9fa9a3;
  font-family: "Trebuchet MS";
}

.dayinfodetails {
  font-size: 1em;
  text-align: justify;
  color: #3b3a30; 
  font-family: "Trebuchet MS";
}

.dayinfolink {
  font-size: 0.9em;
  color: #3b3a30;
}

.dayinfolink a:visited {
  color: #9fa9a3;
}

.dayinfolink a:active {
  color: #9fa9a3;
}

.dayinfolink a:link {
  color: #9fa9a3;
}

.dayinfolink a:hover {
  color: #c5d5c5;
}

.containerminimisebutton {
 float: right;
 max-height: 28px;
}

.container {
}

.tagcloud {
  background-color: #f0f0f0;
  padding: 2px 5px;
  /*border: 1px solid #3b3a30;*/
  border: 1px solid #c5d5c5;
  border-radius: 5px;
  margin: 5px;
  overflow-y: auto;
  max-height: 100px;
}

.calendar_favorite {
  color: yellow;
}

.calendar_unfavorite {
  color: #e3e0cc;
}

.blogpostimage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #3b3a30;
  /*margin: auto;*/
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 1px 5px 0 rgba(0, 0, 0, 1); 
}

.newsimage {
  vertical-align: middle;
  border: 1px solid black;
  margin:10px;
}

.ABoption_container { 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: space-around;
}

.ABoption {
  flex-basis: 500px;
  border: solid 1px #3b3a30;
  background-color: #f0f0f0;
  padding: 10px 20px;
  border-collapse: collapse;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 1px 5px 0 rgba(0, 0, 0, 1);
  margin: 3px;
  text-align: center;
}

.smallogo {
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.nowrap {
  break-inside: avoid;
  white-space: nowrap;
}

.surveythumbnail {
  vertical-align: middle;
}

.newsthumbnail {
  vertical-align: middle;
  border: 1px solid #3b3a30;
  margin:10px;
}

.draftcopy{
  color: #e3e0cc;
}

.submittedcopy {
  color: #ffef96; 
}

.approvedcopy {
  /*color: #c0ded9;*/
  color: green;
}

.rejectedcopy {
  color: #c94c4c;
}

.unprocessed_media {
  color: #c94c4c;
}

.newelement {
  color: #c94c4c;
}

.xpbutton {
  margin: auto;
  text-align: center;
}

.xpbutton input[type=submit]{
  background-color: #c94c4c;
  color: #eaece5;
  padding: 7px 10px;
  border: 1px solid #f0f0f0;
  border-radius: 0 15px;
  cursor: pointer;
  font-size: 1.2em;
}

.xpbutton input[type=submit]:hover{
  color: white;
  border-radius: 15px 0;
}

#validate {
  background-color: green;
}

#validate:hover {
  background-color: #9fa9a3;
}

#reject {
  background-color: #c94c4c;
}

#reject:hover {
  background-color: #9fa9a3;
}

/* CHECK */
.rankimage {
  float: right;
  margin: -25px 5px 0px 0px;
  border: 1px solid #3b3a30; 
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
  border-radius: 150px;
}

@media only screen and (max-width: 800px) {

  .rankimage {
  margin: 0px 20px 0px 10px;
  float: none;
  }
}

.progressboard {
 padding: 10px;
 font-size: 1.1em;
 font-family: "Tahoma";
 color: #9fa9a3;
 text-align: left;
 /*height: 220px;*/
}

.meter_left {
  float: left;
  font-size: 1.0em;
  font-family: "Tahoma";
  color: #3b3a30;
}

.meter_right {
  float: right;
  font-size: 1.0em;
  font-family: "Tahoma";
  color: #3b3a30;
}

.progressreport {
  width: 100%;
  margin: 25px 0 0 0;
  border: 1px ridge #c5d5c5;
  border-radius: 25px;
  background-color: #f0f0f0; 
}

.progressbar {
  padding: 8px;
  display: inline-block;
  text-align: center;
  margin: 1px;
  border-radius: 25px 25px 25px 25px;
  font-size: 0.7em;
  font-family: "Arial";
  color: #eaece5;
  background-image: linear-gradient(to right, #c5d5c5, #c0ded9);
  border: 1px solid #f0f0f0;
  white-space: nowrap;
}

.skillmatrix {
  width: 100%;
  background-color: #eaece5;
  font-family: "Verdana";
  color: #3b3a30;
  border-radius: 7px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
  margin-inline: 2px;
  border-width: 2px;
  border-style: groove;
  border-color: threedface;
  border-image: initial;
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
}

.skillmatrixgraph {
  border: none;
  font-size: 1.0em;
  font-family: "Trebuchet MS";
  color: #3b3a30;
}

.skillmatrixcolumn {
  display: inline-block;
  text-align: center;
  width: 95%;
  border: none;
  border-radius: 0 10px 0 0;
}

.skillmatrixcolumnwrapper{
  min-width: 40px;
}

.skillmatrixgoalcolumn {
  display: inline-block;
  width: 1%;
  border: 1px solid #e3e0cc;
}

.skill_general {
 /*background-color: #c5d5c5;*/
 background-color: #c0ded9;
 background-image: linear-gradient(#c0ded9, #c5d5c5);
}

.skill_1 {
  /*background-image: linear-gradient(#c94c4c, #3b3a30);*/
  background-image: linear-gradient(red, darkred);
}

.skill_2 {
  background-image: linear-gradient(orange, darkorange);
}

.skill_3 {
  background-image: linear-gradient(lightyellow, yellow);
}

input[type=submit].skillbutton {
  /*background-color: #3b3a30;*/
  /*color: #f0f0f0;*/
  padding: 0;
  margin: 0;
  font-size: 1.0em;
}

.skillprogressreport {
  display: flex;
  align-items: baseline;
}

@media only screen and (max-width: 800px) {
  
.skillprogressreport {
   display: block;
 }
}

.smallprogressbar_container {
 flex-grow:1;
}

.smallmeter_left {
  float: left;
  font-size: 0.5em;
  font-family: "Tahoma";
  color: #3b3a30;
}

.smallmeter_right {
  float: right;
  font-size: 0.5em;
  font-family: "Tahoma";
  color: #3b3a30;
}

.smallprogressreport {
  width: 100%;
  margin: 10px 0 0 0;
  border: 1px ridge #c5d5c5;
  border-radius: 5px;
  /*background-color: #f0f0f0;*/ 
}

.ahead_schedule {
  background-color: #405d27; 
}

.behind_schedule {
  background-color: #c94c4c;
}

.smallprogressbar {
  padding: 0px;
  display: inline-block;
  text-align: center;
  margin: 1px;
  border-radius: 5px 5px 5px 5px;
  font-size: 1em;
  font-family: "Arial";
  color: #eaece5;
  background-image: linear-gradient(to right, #c5d5c5, #c0ded9);
  border: 1px solid #f0f0f0;
  white-space: nowrap;
}

.achievement-board {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
  margin: 25px;
}

.achievement {
  text-align: center;
  /*max-width: 150px;*/
}

.medal {
  width: 100px;
  height: 100px;
  border-radius: 40%;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 10px rgba(0, 0, 0, 0.1);*/
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
  border: 4px double #3b3a30;
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*position: relative;*/
}

.goldmedal
{
 /*background: radial-gradient(circle, #ffd700 60%, #f0c500 90%);*/
 background: conic-gradient(#ffef96, gold, goldenrod, gold, yellow);
}

.nomedal
{
  /*background: radial-gradient(circle, darkgrey 60%, grey 90%);*/
  background: conic-gradient(#f0f0f0, #c5d5c5, #9fa9a3, #e3e0cc, #3b3a30, #c0ded9, #b2c2bf, #eaece5)
}
/*
.medal::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #b8860b;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}*/

.achievementvalue {
  font-size: 24px;
  /*font-weight: bold;*/
  color: #f0f0f0;
  /*text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);*/
  font-family: "Verdana";
}

.nonexistant {
 width: 1px;
 height: 1px;
}

.image_with_text {
 display: flex;
 align-items: flex-start;
}

.embeddedimage {
 margin-right: 10px;
}

.dynamicimage {
  max-width: 25vw;
  height: auto;
}

.mediumicon {
 font-size: 125%;
}

.rating_progress {
  font-weight: bold;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 /*background: linear-gradient( to right, gold 70%, grey 0 );*/
}

.contentbrowser_header {
  overflow: hidden;
  padding: 10px;
}

.contentbrowser_left {
  float: left;
}

.contentbrowser_right {
  float: right;
}

.rating_background {
 color: gray;
 cursor: pointer;
}

.rating_highlight {
 color: gold;
 cursor: pointer;
}

.rating_background:hover {
 color: blue;
}

.rating_highlight:hover {
 color: blue;
}

.ratingbutton {
  margin: auto;
  text-align: center;
  font-size: 2.0em;
}

.ratingbutton_small {
  font-size: 1.3em;
}

.ratingtext {
 font-family: "Verdana";
 color: #3b3a30;
 font-size: 0.6em;  
 padding: 5px;
}

.ratingtext_small {
 font-size: 0.6em;  
 padding: 3px;
}

.welcome {
  font-family: "Arial";
  color: #3b3a30;  
  background-color: #f0f0f0;
  border-radius: 0 0 15px 0;
  padding: 10px;
  text-align: justify;
  font-size: 1.1em;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

tr.content_workflow_suggested {
  background-color: #ffef96;
}

tr.content_workflow_accepted {
  background-color: cadetblue;
}

tr.content_workflow_rejected {
  background-color: #c94c4c;
}

tr.content_workflow_inprogress {
  background-color: #92a8d1;
}

tr.content_workflow_closed {
  background-color: lightgreen;
}

.exam_finish_button {
   background-color: #3b3a30;  
  color: #f0f0f0;
  padding: 7px 10px;
  margin: 8px 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5em;
}

.exam_finish_button:disabled {
 background-color: #9fa9a3;
 opacity: 0.6;
 cursor: not-allowed;
}

.exam_finish_button:hover {
  background-color: #9fa9a3;
  color: #f0f0f0;
}

.exam_answer_button {
  padding: 15px;
  width: 99%;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  color: #3b3a30;
  font-family: "Georgia";
}

.exam_answer_button:disabled {
  cursor: not-allowed;
  opacity: 0.6;       
  /*border: 1px solid #aaa;*/
}

.exam_answer_button:hover {
  border-color: #c5d5c5;
}

.exam_answer_unselected {
  border: outset;
  background-color: #b2c2bf;
}

.exam_answer_selected {
  border: inset;
  background-color: #eaece5;
}

.examresults {
 text-align: center;
 font-size: 1.0em;
 color: #9fa9a3;
 font-family: "Trebuchet MS";
}

.examevaluation{
 font-size: 1.1em;
 line-height: 1.6;
 padding: 15px;
 margin: 1%;
 border: groove;
 background-color: #eaece5;
 color: #3b3a30;
 font-family: "Arial";
 border: double;
 border-radius: 5px;
 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.exam_eval_details {
 text-align: center;
}

.rightanswer {
 color: green; 
 font-size: 2.0em;
 text-align: center;
 font-family: "Brush Script MT";
 border: double;
 padding: 15px;
 width: 100%;
 border-radius: 50px;
 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.wronganswer {
 color: #c94c4c;
 font-size: 2.0em;
 text-align: center;
 font-family: "Brush Script MT";
 border: double;
 padding: 15px;
 width: 100%;
 border-radius: 50px;
 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.9), 0 2px 5px 0 rgba(0, 0, 0, 1);
}

.passed {
 background-color: green;
}

.failed {
 background-color: #c94c4c;
}

@keyframes blink {
   0% {opacity:1;}
  50% {opacity:0;}
 100% {opacity:1;}
}

.blinking_text {
 font-size: 30px;
 color: #c0ded9;
 font-family: "Courier New";
 border: 5px solid #c0ded9;
 border-radius: 25px;
 text-align: center;
 width: 25%;
 animation: blink 1s infinite;
}

.exam_progressbar
{
  padding: 1px;
  display: inline-block;
  margin: 1px;
  color: #eaece5;
  white-space: nowrap;
}

.exam_progress_container
{
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  border: inset;
}

.exam_progress_correct{
  background-color: green;
}

.exam_progress_incorrect{
  background-color: red;
}

.exam_progress_noanswer{
  background-color: lightgray;
}

.tree_ident{
  margin-left: 10px;
}

.appearonhover{
 visibility:hidden;
 opacity: 0;
 transition: opacity 0.3s;
}

.appearonhover_container:hover .appearonhover{
 visibility:visible;
 opacity: 1;
}

input[type=text].tree_text_area {
  width: 80%;
  padding: 3px 5px;
}

.complete{
  color: green;
}

.incomplete{
  color: darkred;
}

.sequence_chapter_button {
  padding: 15px;
  width: 99%;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  color: #3b3a30;
  font-family: "Georgia";
  background-color: #e3e0cc;
  text-align: justify;
}

.sequence_chapter_button:hover {
  border-color: #c5d5c5;
}

.centerbutton {
  margin-left: 40%;
  margin-right: 40%;
  text-align: center;
  background-color: #eaece5;
  font-size: 1.3em;
  border: 1px solid #c5d5c5;
  border-radius: 5px;
  padding: 10px;
  font-family: "Garamond";
  transition: all 0.3s ease;
}

.centerbutton:hover {
  background-color: #b2c2bf;
}

.podcast {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 /*background-color: black;*/
 border-radius: 20px;
 border: solid;
}

/* CHOICES 
 color: #f0f0f0;
 color: #c5d5c5;
 color: #9fa9a3;
 color: #e3e0cc;
 color: #eaece5;
 color: #b2c2bf;
 color: #c0ded9;
 color: #3b3a30;
 
 font-family: "Arial";
 font-family: "Verdana";
 font-family: "Tahoma";
 font-family: "Trebuchet MS";
 font-family: "Times New Roman";
 font-family: "Georgia";
 font-family: "Garamond";
 font-family: "Courier New";
 font-family: "Brush Script MT";
 
 dotted
 dashed
 solid
 double
 groove
 ridge
 inset
 outset
*/