/* LAYOUT */
* { margin: 0; padding: 0;}
blockquote { margin-left: 20px;}
#breadcrumb { padding: 10px 0;}
#container { width: 775px; margin: 20px auto; border-collapse: collapse;}
#content { padding: 0 20px 20px 20px;}
#content ul { padding-left: 12px; list-style-type: none; margin-left: 20px;}
#content ul li.pdf { padding-left: 24px; margin-bottom: 3px; padding-bottom: 3px;}
#content ul li.user { padding-left: 31px; margin-bottom: 3px; padding-bottom: 3px; padding-top: 3px;}
#content ul li.lesson { padding-left: 24px; margin-bottom: 3px; padding-bottom: 3px;}
#content ul li.lesson_cert { padding-left: 24px; margin-bottom: 3px; padding-bottom: 3px;}
h2 { margin-bottom: 15px;}
h3, h4 { margin-top: 15px; margin-bottom: 8px;}
hr { margin-top: 25px;}
p { margin-bottom: 12px;}
table { border-collapse: collapse;}
#sim_table td, #sim_table th { padding: 4px;}
.welcome_link { padding-left:  20px;}
.online_offline_icon { margin: 0 0 -5px 5px;}
.section_divider { width: 690px; height: 25px; padding: 6px 0 0 35px; margin-top: 25px;}
.pdf { padding:  6px 0 8px 34px;}
.doc { padding:  6px 0 8px 34px;}

/* SKIN */
#container { background:url(skin/bg.jpg) repeat-y left top;}
a img { border: none;}
.moduleheader { background: #ccc;}
#sim_table td { border-bottom: 1px solid #CCC;}
#content ul li.pdf { background: url(../images/PDF-icon-small.gif) no-repeat left top;}
#content ul li.user { background: url(../images/users3.gif) no-repeat left top;}
#content ul li.lesson { background: url(../images/window_new.gif) no-repeat left top;}
#content ul li.lesson_cert { background: url(../images/window_new_cert.gif) no-repeat left top;}
.welcome_link { background: url(skin/arrow_left_blue.png) no-repeat left top;}
.section_divider { background: url(skin/section_divider.gif) no-repeat left top;}
.pdf { background: url(skin/icon-pdf.gif) no-repeat left top;}
.doc { background: url(skin/icon-doc.gif) no-repeat left top;}

/* TYPO */
body { font: normal .85em Arial, Helvetica, sans-serif;}
.section_divider { font-weight:bold; color: #fff;}

/* DEVELOPMENT & TROUBLESHOOTING */
/*img { border: solid 3px #0C6;}*/

.topnav {
  background-color: #00529e;
  height: 20px;
}

.navblue {
  background-color: #093256;
  height: 50px;
}

 .logo-image{
  margin-left: 10px;
    width: 100px;
    height: 46px;
    overflow: hidden;
    margin-top: -6px;
    filter: brightness(0) invert(1);
}

.navfooter {
  position: inherit;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #093256;
  height: 50px;
}

.fixedfooter {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #093256;
  height: 50px;
}

.lesson { 
  background-color: #404040;
}

a.lesson {
    color: #FFF !important;
  }

.lesson:hover {
  background-color: #212121;
}

.container {
  padding: 0px 200px;
}

.portlet {
  margin-top: 20px;
  padding-bottom: 10px;
  background: #eaeaea;
  height: 225px;
  white-space: nowrap;
  overflow: visible;
}

@media only screen and (max-width: 1407px) and (min-width: 1216px) {
  .portlet {
    height: 260px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media only screen and (max-width: 1215px) {
  .portlet {
    height: 400px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media only screen and (max-width: 1215px) and (min-width: 925px) {
  .libportlet {
    height: 900px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media only screen and (max-width: 924px) and (min-width: 890px) {
  .libportlet {
    height: 1100px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media only screen and (max-width: 815px) and (min-width: 700px) {
  .libportlet {
    height: 1400px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
@media only screen and (max-width: 699px) and (min-width: 200px) {
  .libportlet {
    height: 1700px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
@media only screen and (max-width: 1400px) and (min-width: 1216px){
  .libportlet {
    height: 600px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

.shortportlet {
  margin-top: 20px;
  padding-bottom: 10px;
  background: #eaeaea;
  height: 150px;
  white-space: nowrap;
  overflow: visible;
}
@media screen and (max-width: 1400px) {
  .shortportlet {
    height: 300px; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

.portlettitle{
  padding: 10px;
  color: #fff;
}

.libportlet {
  margin-top: 20px;
  padding-bottom: 10px;
  background: #eaeaea;
  height: 500px;
  white-space: nowrap;
  overflow: visible;
}

.libportlettitle{
  padding: 10px;
  color: #fff;
  word-wrap: break-word;
  white-space: normal;
}

@media only screen and (max-width: 1200px) and (min-width: 850px) {
  .libportlettitle {
    font-size: 12px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media only screen and (max-width: 849px) and (min-width: 600px) {
  .libportlettitle {
    font-size: 10px !important; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
  
.headerblue {
  background: #093256;
}
.libheaderblue {
  background: #093256;
  height: 70px;
}
.section {
  padding: 1em 1.5em !important;
}
.menusection {
  padding: 1em 1.5em;
}

.menucontent {
  padding: 15px;
  white-space: initial;
}

/* ACCORDION */
.accordion {
  background-color: #093256;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin: 3px;
  display: flex;
  justify-content: space-between;
}

.accordion::after {
      content: "\276F";
      width: 1em;
      height: 1em;
      text-align: center;
      transition: all .35s;
    }

.active::after {
  transform: rotate(90deg);;
}

.accordion-option .toggle-accordion {
  float: right;
  font-size: 16px;
  color: #6a6c6f;
}

.accordion-option .toggle-accordion:before {
  content: "Expand All";
}

.accordion-option .toggle-accordion.active:before {
  content: "Collapse All";
}

.toggle {
  position: absolute;
right: 10px;
top: 5px;
}

.glossary {
  background-color: #093256;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 3px;
}

.accpanel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  width:100%;
}
.sticky{
  position: fixed;
  bottom: 0;
}
.visible{
  padding: 0 18px;
  background-color: white;
  max-height: inherit;
  overflow: visible;
  transition: max-height 0.2s ease-out;
  width:100%;
}
table {
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 5px !important;
  background-color: #f3f4f6;
}

th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 5px !important;
  background-color: #fff;
  height: 30px;
}

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

/*.icon {
   -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}*/