/*!
 * Module pages/structural styles
 * Some elements can be customized based on requirements
 */
* {
  margin: 0;
  padding: 0
}
html, body {
  overflow: hidden;
  height: 100%;
}
div {
  position: relative
}
.clearfix:before, .clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden
}
.clearfix:after {
  clear: both
}
.clearfix {
  zoom: 1
}
@-ms-viewport {
  width: auto !important;
}
#loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.8;
  filter: alpha(opacity=80);
  text-align: center;
  font-weight: 700;
  color: #CCC;
  z-index: 1000
}
#loading img {
  margin-top: 200px
}
#wrapper {
  overflow: hidden;
  left: 0;
  top: 5em;
  width: 1024px;
  height: 100%;
  z-index: 99;

}

#wrapper #content {
  width: 100%;
  height: 100%;
  display: inline-block;
  margin: 0;
  z-index: 99;
 -webkit-overflow-scrolling: touch;
}

#wrapper.scrollable {
  overflow-y: auto !important;
}
#wrapper #content.scrollable {
  height: auto;
}
#wrapper #content .page .pagecontent {
  position: relative;
  padding: 0 1.7em 1em 1.7em;
  max-width: 1024px;
  min-height: 1em;
  margin: auto;
}
#wrapper #content .page .pagecontent.full {
  padding: 0 0 1em 0
}
#wrapper #content .page .pagecontent-wrapper-bkg {
  width: 100%;
  height: 98.7%;
}
@media (max-width: 767px) {
  #wrapper #content .page .pagecontent {
    padding: 0.25em 0 1.5em 0;
  }
}
#screen {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10001;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  background-color: #000
}
#top-menu-nav {
  position: fixed;
  top: 0;
  width: 100%;
  min-height: 5em;
  z-index: 100
}
#top-menu-nav-ui {
  height: 2em;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 5px;
  z-index: 105
}
#top-menu-nav-ui #progress {
  width: 25%;
  height: 10px;
  position: relative;
  margin-top: 12px;
  float: right
}
#top-menu-nav-ui #progress span {
  display: block;
  height: 10px;
  position: relative;
  overflow: hidden;
  border-right: solid 3px #FFF
}
#top-menu-nav-ui #pagecount {
  width: auto;
  float: right;
  margin: 6px 20px
}
#global-ui-menu-tab.tab-close {
  background: url(../../images/shared/close-X_white3.png) center 0 no-repeat #329ed6 !important;
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}
.ui-menu-item {
  opacity: 0.4;
  filter: alpha(opacity=40);
  cursor: pointer;
  height: 2em;
  border: none;
  border-right: solid 1px #33393c;
  border-left: solid 1px #5c6366;
  float: left;
  width: 3.4em;
}
.ui-active.on, .ui-active.text-on {
  opacity: 1;
  filter: alpha(opacity=100);
}
.ui-disabled, .ui-impediment, #global-ui-right.ui-disabled a, #global-ui-left.ui-disabled a {
  opacity: 0.2;
  filter: alpha(opacity=10);
  cursor: default;
}
.global-ui-text.ui-active.text-on, .global-top-ui-text.ui-active.text-on {
  background-image: url(../../images/global/Text_icon_OFF.png);
}
#header {
  width: 100%;
  z-index: 104;
  float: left;
  min-height: 2.5em;
  display: flex;
}
@media only screen and (min-width: 300px) and (max-width: 768px) {
  #header {
    padding-bottom: 0.25em;
    display: block;
  }
}
#header #course-title {
  font-size: 110%;
  float: left;
  height: auto;
  width: auto;
  margin-left: 170px
}
#header #topic-title, #header #page-title {
  float: left;
  font-size: 110%;
  margin-left: 5%;
}
/*
#menunav .global-ui-menu-button {
	float: left;
	width: 56px;
	height: 30px;
	cursor: pointer;
	text-align: center;
	zoom: 1;
	background-color: #06C;
	color: #FFF;
	font-weight: 700;
	padding: 3px 0
}
#menunav .global-ui-menu-button:hover, #menunav .global-ui-menu-button.on {
	background-color: #03F
}*/
#menunav .global-top-menu-content {
  overflow: hidden;
  height: 100%;
  width: 100%;
  float: left;
  padding: 0
}
#menunav .global-top-menu-content .global-top-menu-content-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0
}
#menunav .global-top-menu-content .global-top-menu-content-scroll li {
  border-top: solid 1px #bcbcbc;
  border-bottom: solid 1px #fff;
  cursor: pointer;
  z-index: 51;
  list-style-type: none;
  background: none;
  padding: 5px 10px 5px 28px
}
#menunav .global-top-menu-content .global-top-menu-content-scroll li a {
  text-decoration: none;
  color: unset;
}
#menunav .global-top-menu-content .global-top-menu-content-scroll li.completed {
  background: url(../../images/global/menu-check-completed2.png) no-repeat 5px 7px
}
#menunav .global-top-menu-content .global-top-menu-content-scroll li.current {
  background-color: paleturquoise;
}
#menunav .global-top-menu-content .global-top-menu-content-scroll li:hover {
  background-color: #c2c2c2
}
#help-panel .menu-nav-tip-util {
  left: 72px
}
#resources-panel .menu-nav-tip-util {
  left: 127px
}
#panel-header {
  float: left;
}
.global-ui-text, .global-top-ui-text {
  background: url(../../images/global/Text_icon2_OFF.png) no-repeat center center;
  border: none;
  width: 2.5em;
  height: 1.8em;
}
.global-top-ui-text {
  background: url(../../images/global/Text_icon_OFF.png) no-repeat center center;
}
.menu-slideout {
  position: absolute;
  top: 2.4em;
  left: -25em;
  width: 25em;
  height: 100%;
  font-size: 10pt;
  z-index: 10002;
  border-right: 1px solid #888;
  background: #d6d7d7
}
.menu-nav-tip, .menu-nav-tip-util {
  position: absolute;
  top: -8px;
  width: 17px;
  height: 8px;
  background: url(../../images/global/panel_tip.png);
  left: 19px
}
.panel-header {
  font-size: 120%;
  cursor: default !important;
  border-top: none !important;
  padding: 9px 10px 10px 28px
}
.menu-topic-header {
  font-weight: 700;
  color: #FFF;
  text-transform: uppercase;
  cursor: default !important;
  border-top: none !important;
  padding: 5px 10px 5px 48px
}
.global-ui-menu-nav {
  width: 100%;
  height: 30px;
  background-color: #b9b9b9;
  cursor: pointer
}
#global-ui-menu-nav-up-icon {
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  background: url(../../images/global/menu-icon-up.png) no-repeat center center;
  background-repeat: no-repeat
}
#global-ui-menu-nav-down-icon {
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  background: url(../../images/global/menu-icon-down.png) no-repeat center center
}
#global-ui-menu {
  width: 44px;
  height: 30px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto
}
#global-ui-menu-tab {
  background: url(../../images/global/TOC_OFF.png) no-repeat center center
}
#global-ui-resources {
  background: url(../../images/global/Resources_OFF.png) no-repeat center center
}
#global-ui-help {
  background: url(../../images/global/Help_OFF.png) no-repeat center center
}
#global-ui-audio.off {
  background: url(../../images/global/Audio_ON_OFF.png) no-repeat center center;
}
#global-ui-audio.aud-off {
  background: url(../../images/global/Audio_OFF_OFF.png) no-repeat center center;
}
#global-ui-cc {
  background: url(../../images/global/CC_icon_OFF.png) no-repeat center center;
}
#global-ui-close {
  background: url(../../images/global/Close_X_OFF.png) no-repeat center center;
  float: right !important;
}
#global-ui-left-top {
  background: url(../../images/global/back_btn_top.png) no-repeat center center;
}
#global-ui-left-top.up {
  background: url(../../images/global/back_btn_top_up.png) no-repeat center center;
}
#global-ui-right-top {
  background: url(../../images/global/next_btn_top.png) no-repeat center center;
}
#global-ui-right-top.down {
  background: url(../../images/global/next_btn_top_down.png) no-repeat center center;
}
#back-next-top {
  display: none
}
#global-ui-left, #global-ui-right {
  position: absolute;
  top: 40%;
  right: 0;
  width: 33px;
  height: 90px;
  border: none;
  z-index: 105;
  cursor: pointer;
}
#global-ui-left {
  left: 0;
}
#global-ui-left a, #global-ui-right a {
  width: 36px;
  height: 90px;
  background-image: url(../../images/global/Back_Next_btns.png);
  background-repeat: no-repeat;
  display: block;
  z-index: 1000;
  outline: none;
  outline-style: none;
  text-decoration: none;
  border: none
}
#global-ui-right a {
  background-position: top right
}
#global-ui-right.ui-active a:hover {
  background-position: bottom right
}
#global-ui-left.ui-active a:hover {
  background-position: bottom left
}
#global-alert-popup-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10400
}
div.alert-popup-container {
  margin: 5% auto;
  width: 21em;
  z-index: 10500
}
.alert-popup-container div.global-alert-header-top {
  background: url(../../images/global/popup_bkg_sq.png) repeat-x 0 1px #5c5c5c;
  height: 36px;
  width: 100%;
  -webkit-border-top-left-radius: 25px;
  -webkit-border-top-right-radius: 25px;
  -moz-border-radius-topleft: 25px;
  -moz-border-radius-topright: 25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.alert-popup-container div.global-alert-header-top .header-content-left {
  float: left;
  color: #FFF;
  font-size: 15pt;
  margin: 9px 0 0 40px
}
.alert-popup-container .popup-content-wrapper {
  background-color: #dcdcdc;
  width: 100%;
  display: inline-block;
  -webkit-border-bottom-right-radius: 25px;
  -webkit-border-bottom-left-radius: 25px;
  -moz-border-radius-bottomright: 25px;
  -moz-border-radius-bottomleft: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
}
.alert-popup-container .popup-content-wrapper .alert-popup-content .alert-popup-content-inner {
  width: 82%;
  color: #444d52;
  font-size: 10pt;
  margin: auto;
  padding-top: 20px;
}
.alert-popup-container .popup-content-wrapper .alert-popup-content .button {
  border-radius: 8px;
  height: 30px;
  width: 268px;
  background: url(../../images/global/pop_alert_act_btn_bkg.png) center top no-repeat;
  text-align: center;
  color: #FFF;
  cursor: pointer;
  margin: 15px auto
}
.alert-popup-container .popup-content-wrapper .alert-popup-content .button:hover {
  background: url(../../images/global/pop_alert_act_btn_bkg.png) center bottom no-repeat
}
.alert-popup-container .popup-content-wrapper .alert-popup-content .button .button-inner {
  padding-top: 15px;
  line-height: 0
}
#global-resources-alert {
  width: 24em;
  height: 26em;
}
#global-resources-alert .resources-alert-content, #global-help-alert .help-alert-content {
  padding: 0 25px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#global-resources-alert .resources-alert-content tr td, #global-help-alert .help-alert-content tr td {
  color: #425968;
  line-height: normal;
  font-size: 10pt;
  padding: 5px 0;
}
#global-help-alert {
  height: 100%;
  display: block;
}
#wrapper #content .page {
  float: left;
  overflow: hidden;
  overflow-y: auto;
  min-height: 1em;
  height: auto;
}

.close-gray {
  background-image: url(../../images/shared/closeX_gray.png);
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 10;
}
.close-gray:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
@media (min-width: 1024px) {
  .ui-menu-item.ui-active.off:hover {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@media only screen and (min-width: 300px) and (max-width: 769px) {
  html, body {
    width: 100%;
    height: 100%;
  }
  #header #course-title {
    font-size: 80%;
    width: 100%;
    margin: 0;
  }
  #header #course-title .header-inner {
    margin: 10px 0 0 120px;
    line-height: 100%;
  }
  #header #topic-title, #header #page-title {
    font-size: 80%;
    line-height: 100%;
    margin-left: 120px;
    width: 100%
  }
}
@media (max-width: 767px) {
  .menu-nav-tip, .menu-nav-tip-util {
    display: none
  }
  div.alert-popup-container {
    width: 90%;
  }
  #global-ui-right, #global-ui-left {
    display: none !important;
    visibility: hidden;
    opacity: 0
  }
  #progress {
    display: none
  }
  #top-menu-nav-ui #pagecount {
    margin: 6px 0
  }
  #back-next-top {
    margin-left: 0.5em;
    float: left;
    display: block;
  }
  .ui-menu-item {
    width: 2.5em;
  }
}
.slide-content {
  -webkit-transition-duration: 500ms;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.modal-header .btn-close {
  width: 36px;
  height: 36px;
  opacity: 0.5;
  background: url(../../images/global/closewin.png) no-repeat;
  margin: 0;
  padding: 0;
}
.modal-header .btn-close span {
  opacity: 0.01;
}

.transition-base {
  transition: visibility .5s linear, opacity .5s linear;
}

.invisible0 {
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 767px) {
  #wrapper::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  #wrapper::-webkit-scrollbar:vertical {
    width: 14px;
  }
  #wrapper::-webkit-scrollbar:horizontal {
    height: 20px;
  }
  #wrapper::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
  }
}