#content{padding-top: 80px;}


#header #navigation{
position: absolute;
left: 0;
right: 0;
top:14px;
}
#header #control{
position: absolute;
right: 0;
top:14px;
}
#header #control a{overflow:hidden;padding: 0 10px;}
#header #control .user {
float: left;
display: block;
font-size: 80%;
padding-top: 9px;
}
#header #control img {
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
float: left;
max-width: 44px;
max-height: 44px;
margin: 0 0 0 10px;
}

#header #control .material-icons{
border: 1px solid #ddd;
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
padding: 9px;
}

#grade_progress {
position: absolute;
left: 0;
right: 0;
top: 50px;
margin: 0 auto;
text-align: center;
font-size: 180%;
font-weight: bold;
}
#grade_progress .meta{display:block;font-size:50%}


.switch{position:relative;cursor:pointer;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.subscriptionHeader{padding:4%;background:white;margin-top:10px;}
.subscriptionHeader img{max-width:50px;float: left;margin-right:20px;}
.subscriptionHeader .button{}
.subscriptionHeader h3{margin-top:10px}
.subscriptionContent{display:none;padding:4%;background:#f1f1f1;border-top:1px solid #ddd;}
.subscriptionContent.show{display:block}

.switch .auxmenu{position: absolute;
right: 20px;
top: 20px;}


.page-tabs{overflow:hidden;padding-top:3%}
.page-tabs ul{margin: 0;padding: 0;}
.page-tabs li{    display: inline-block;
margin: 0;
list-style: none;
}
.page-tabs li a{padding: 0 30px;
margin: 0;
display: block;
text-decoration: none;
font-weight: 600;
height: 50px;
line-height: 50px;color:white}

.page-tabs li.active a{background:#fff;color:#523167}

.tabs input {
position: absolute;
opacity: 0;
z-index: -1;
}

.tabs {
overflow: hidden;
}

.tab {
width: 100%;
color: white;
overflow: hidden;
}
.tab-label {
display:block;
overflow:hidden;
padding: 14px 20px;
font-size: 90%;
background: #523167;
border-bottom: 1px solid #392248;
font-weight: bold;
cursor: pointer;
position:relative
}
.tab-label:hover {
background: #392248;
}
.tab-label::after {
content: "\276F";
width: 1em;
height: 1em;
text-align: center;
transition: all .35s;
position:absolute;
right:10px;
top:14px
}
.tab-content {
max-height: 0;
padding: 0 1em;
color: #392248;
background: white;
transition: all .35s;
}
#sidebar .tab-content a{font-size:80%;padding: 7px 0;overflow:hidden;}



#sidebar .lesson_number{
display: block;
float: left;
font-size: 80%;
margin-right: 10px;
width:20px
}

#sidebar .lesson{
position: relative;
display: table;
line-height: 1.4;
text-align: left;
}

.tab-close {
display: flex;
justify-content: flex-end;
padding: 1em;
font-size: 0.75em;
background: #392248;
cursor: pointer;
}
.tab-close:hover {
background: #392248;
}

input:checked + .tab-label {
background: #392248;
}
input:checked + .tab-label::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
input:checked ~ .tab-content {
/*max-height: 100vh;*/
padding: 1em;
}




.container {
width: 80%;
margin:0 auto;
}

#course_progress .button{position:absolute;right:4%;top:34px;margin:0}

.informational{
float: left;
font-size: 100%;
text-transform: uppercase;
margin: 6px;
}
.progressbar i{position:absolute;left:0;right:0;top:4px;z-index:999}
.progressbar{margin:0;padding:0;text-align:center}
.progressbar li {
list-style: none;
display: inline-block;
width: 12%;
position: relative;
text-align: center;
cursor: pointer;
color:white;
margin:0;
}
.progressbar li:before {
content:"";
width: 26px;
height: 26px;
line-height : 26px;
border: 3px solid #523167;
border-radius: 100%;
display: block;
text-align: center;
margin: 0 auto;
background-color: #392248;
z-index: 998;
position: relative;
}
.progressbar li:after {
content: "";
position: absolute;
width: 100%;
height: 3px;
background-color: #523167;
top: 15px;
left: -50%;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active:before {
border-color: #049adf;
background: #049adf;
} 
.progressbar li.active + li:after {
background-color: #049adf;
}