body {display:block;width: 100% !important;margin: 0;padding:0; background: #686868;font-family: Arial, sans-serif;font-size: 14px;color:#FFF;}
#viewport #content {max-width: 100%;}
.page-container {float: left;width: 100%;margin:0;position: relative;}
.menu-container {float:left;width: 100%;margin:0;}
.menu-container {}/*do not remove this line*/

header {display: block;width: 100%;position: relative;}
header .title {width: 100%;padding:10px 0;}
header .title .course-name {height: auto;font-size: 22px;font-weight: bold;padding:0 10px;}
header .title .course-name {}/*do not remove this line*/

.desktop-menu {display: block;width: 100%;}
.desktop-menu .container {overflow:auto; }
.desktop-menu .title {display: block;width: 100%;font-size: 18px;padding:10px 0;text-align: left;text-indent: 10px;position: relative;}
.desktop-menu .title {}/*do not remove this line*/
.desktop-menu .title-units-left-box {}
.desktop-menu .title-units {height: auto;margin: 0;text-indent: 22px;}
.desktop-menu .title-topics-left-box {}
.desktop-menu .title-topics {height: auto;margin: 0;}

.desktop-menu .units-container {float:left;width: 50%;margin:0;}
.desktop-menu .units-container .units {width: 100%;margin: 0;padding:10px 0;overflow: hidden;}
.desktop-menu .units-container .units a {float: left;clear: both;position:relative;margin:0 0 5px 42px;text-decoration: none;}
.desktop-menu .units-container .units a.selected {font-weight: bold;}

.desktop-menu .topics-container {float:right;width: 50%;margin:0;}
.desktop-menu .topics-container .topics {width: 100%;margin: 0;padding:10px 0;overflow: hidden;}
.desktop-menu .topics-container .topics .topic a {float: left;clear: both;position:relative;margin:0 0 5px 30px;text-decoration: none;}

.topics-container .topics .topic {overflow: auto !important;
    height: auto !important;}

.mobile-menu {float:left;width: 100%;margin:0;display: none;overflow: auto;}
.mobile-menu .container {overflow:auto; }
.mobile-menu .title {display: block;width: 100%;font-size: 18px;padding:10px 0;text-align: left;clear: both;position: relative;}
.mobile-menu .title {}/*do not remove this line*/
.mobile-menu .title-units-left-box {width: 4%;margin: 0 10px;float:left;background-color:#333333}
.mobile-menu .title-units {height: auto;overflow: hidden;margin: 0 10px 0 10px;}

.mobile-menu .units-container {float:left;width: 100%;margin:0;}
.mobile-menu .units-container .units a {float: left;position:relative;margin:0 0 0 30px;text-decoration: none;}
.mobile-menu .units-container .units a.selected {font-weight: bold;}

.mobile-menu .topics-container {float:right;width: 100%;margin:0;}
.mobile-menu .topics-container .topics {margin: 0 10px 0 30px;padding:10px 0 5px 0;clear:both;}
.mobile-menu .topics-container .topics .topic a {float: left;clear: both;position:relative;margin:0 0 5px 30px;text-decoration: none;}

.units-container .units {font-size: 18px;}
.units-container .units {}/*do not remove this line*/
.topics-container .topics {font-size: 14px;}
.topics-container .topics {}/*do not remove this line*/

a:hover {text-decoration: underline !important;}

span.units-status, span.topics-status {position:absolute;left:-20px;border:2px solid #000;height:8px;width:8px;}
span.units-status {top:6px;}
span.units-status {}/*do not remove this line*/
span.topics-status {top:3px;}
span.topics-status {}/*do not remove this line*/
.mobile-menu span.units-status {top:8px;}
.mobile-menu span.units-status {}/*do not remove this line*/
span.units-status.status-0 span, span.topics-status.status-0 span {display:none;}
span.units-status.status-1 span, span.topics-status.status-1 span {display:block;width:4px;height:8px;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;
                           -webkit-border-radius:4px 0 0 4px;}
span.units-status.status-2 span, span.topics-status.status-2 span {display:block;width:8px;height:8px;}
.desktop-menu .logo-container{ position:absolute;display: none;clear: both;min-height:102px; bottom: 15px;}
.desktop-menu img.logo{ position:absolute;margin:10px 5px 10px 22px;bottom: 0px;width:315px;}
.mobile-menu .logo-container{ position:relative;display: block;clear: both;min-height:102px}
.mobile-menu img.logo{ position:absolute;margin:10px 5px 10px 10px;bottom: 0px;right: 20px;float: right;width:160px;}

@media only screen and (min-width:961px) {
.desktop-menu .title-units-left-box {display:none;}
.desktop-menu .title-topics-left-box {display:none;}
}

@media only screen and (max-width:960px) {
    .desktop-menu {display:none;}
    .mobile-menu {display:block;}
    .mobile-menu .title-units-left-box {display:block;}
    .mobile-menu img.logo{ bottom: 20px;right: 20px;}
}

@media screen and (max-width: 1024px) {
    #viewport #content {margin-left: 0px;margin-right: 0px;}
}

.au-mm-editor-btn-close {
    position: absolute;
    z-index: 1001;
    right: 20px;
    top: 10px;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    cursor: pointer;
}

.au-mm-editor-btn-close:before, .au-mm-editor-btn-close:after {
    position: absolute;
    content: ' ';
    left: 8px;
    top: 4px;
    height: 10px;
    width: 2px;
    background-color: #fff;
}

.au-mm-editor-btn-close:before {
    transform: rotate(45deg);
}

.au-mm-editor-btn-close:after {
    transform: rotate(-45deg);
}

.ifr-hidde {
    display: none;
}