/*
--------------------------------------------------------------------------------------
area login
*/

.cols-content {
   position: relative;
   display: table;
   padding: 80px;
   height: 100vh;
   margin: 0 auto;
}

.cols-content > div {
   position: relative;
   vertical-align: middle;
   display: table-cell;
}

.cols-content > div:nth-child(1) {
   width: 50%;
   padding-right: 80px;
}

.cols-content > div:nth-child(1) > figure {
   position: relative;
   display: block;
   max-width: 230px;
   padding-bottom: 20px;
   margin: 0;
}

.cols-content > div:nth-child(1) > figure > img {
   max-width: 100%;
}

.cols-content > div:nth-child(1) > h1,
.cols-content > div:nth-child(1) > h2,
.cols-content > div:nth-child(1) > h3,
.cols-content > div:nth-child(1) > h4,
.cols-content > div:nth-child(1) > p,
.cols-content > div:nth-child(1) > form {
   max-width: 500px;
}

.cols-content.evaluation-test > div:nth-child(1) > h1,
.cols-content.evaluation-test > div:nth-child(1) > h2,
.cols-content.evaluation-test > div:nth-child(1) > h3,
.cols-content.evaluation-test > div:nth-child(1) > h4,
.cols-content.evaluation-test > div:nth-child(1) > p,
.cols-content.evaluation-test > div:nth-child(1) > form {
   max-width: 500px;
}

.cols-content > div:nth-child(1) > h1,
.cols-content > div:nth-child(1) > h2,
.cols-content > div:nth-child(1) > form {
 padding: 10px 0px;
}

.cols-content > div:nth-child(2) {
   width: 50%;
}

.cols-content > div:nth-child(2) > figure {
   position: relative;
   display: block;
}

.cols-content > div:nth-child(2) > figure > img {
   max-width: 100%;
}

/*
--------------------------------------------------------------------------------------
area evaluation-test
*/

.evaluation-test-begin > div:nth-child(1) > figure {
   position: fixed;
   top: 40px;
   right: 40px;
}

.evaluation-test {
   position: relative;
   display: none;
}

.evaluation-test.active {
   display: table;   
}

.evaluation-test > div {
   position: relative;
   vertical-align: middle;
   display: table-cell;
}

.evaluation-test > div:nth-child(1) {
   width: 50%;
   padding-right: 80px;
}

.evaluation-test > div:nth-child(1) > figure {
   position: fixed;
   top: 40px;
   right: 40px;
   max-width: 130px;
}

.evaluation-test > div:nth-child(1) > figure > img {
   max-width: 100%;
}

.evaluation-test > div:nth-child(1) > h1 {
   padding: 40px 0px;
}

.evaluation-test > div:nth-child(1) > form {
   padding: 20px 0px;
}

.evaluation-test > div:nth-child(2) {
   width: 50%;
}

.evaluation-test > div:nth-child(2) > figure {
   position: relative;
   display: block;
}

.evaluation-test > div:nth-child(2) > figure > img {
   max-width: 100%;
}

.evaluation-test > div > form {
   position: relative;
}

.evaluation-test > div > form {
   position: relative;
}

.evaluation-test > div > form > div.part {
   position: relative;
   display: none;
}

.evaluation-test > div > form > div.part.active {
   position: relative;
   display: block;
}

.evaluation-test > div > h2 {
   font-style: normal;
   font-weight: normal;
   font-size: 20px;
   color:var(--text-color);
}

.evaluation-test > div > form > .part > h3 {
   font-style: normal;
   font-weight: normal;
   font-size: 40px;
   line-height: 120%;;
   color:var(--text-color);
}

.evaluation-test > div > form > .part > h3 > b {
   color:var(--highlight-b-color);
}

.evaluation-test > .timer {
   position: fixed;
   display: block;
   bottom: 0px;
   left: 0px;
   height:20px;
   background-color: #484854;
   width: 100%;
}

.evaluation-test > .timer > span {
   position: relative;
   display: table;
   width: 0px;
   height: 100%;
   background-color: var(--highlight-b-color);
   transition:1s;
   -o-transition:1s;
   -ms-transition:1s;
   -moz-transition:1s;
   -webkit-transition:1s;
   transition-timing-function: linear; 
}

.evaluation-test > .timer > .countdown {
   position: absolute;
   top:-60px;
   right: 20px;
   font-style: normal;
   font-weight: normal;
   font-size: 40px;
   letter-spacing: -1px;
   color: var(--text-color);
}

.evaluation-test-result {
   position: relative;
   display: block;
}

.evaluation-test-result > div {
   position: relative;
   display: block;
   padding: 10px 0px;
}

.evaluation-test-result > div {
   position: relative;
   display: block;
   padding: 10px;
   border-radius: 10px;
   margin-bottom: 10px;
   background: var(--box-bg);
   box-shadow: var(--box-shadow);

}

.evaluation-test-result > div > h3 {
   position: relative;
   display: block;
   font-size: 20px;
}

.wrong {
   color:var(--error-color);
}

.correct {
   color:var(--ok-color);
}

.evaluation-test-result > div.text-area {
   margin: 10px 0px;
   background: var(--box-bg);
   box-shadow: var(--box-shadow);
   border-radius: 10px;;
   padding: 15px;
}

.evaluation-test-result > div.text-area > p:nth-child(1) {
   position: relative;
   display: block;
   font-size: 14px;
   font-weight:bold;
   color:var(--text-color);
   opacity: .5;
}

.evaluation-test-result > div.text-area > p:nth-child(2)  {
   position: relative;
   display: block;
   font-size: 24px;
   color:var(--text-color);
}

.evaluation-test-result {
   max-width: 500px;
}

/*
list
*/

.dashboard .navigator-wrapper div.clients {
   position: relative;
   display: inline-block;
   vertical-align: top;
   width: 80%;
}


/*
--------------------------------------------------------------------------------------
area dashboard
*/

.dashboard {
   position: relative;
   display: block;
}

/*
dashboard header
*/

.dashboard div.header {
   position: relative;
   display: block;
   border-bottom: 2px solid rgba(174, 174, 177, 0.25);
   padding-bottom: 20px;
}

.dashboard div.header.no-border {
   border-bottom:none;
   padding-bottom: 40px;
}

.dashboard div.header > div {
   position: relative;
   display: inline-block;
   vertical-align: middle;
}

.dashboard div.header > div > figure {
   position: relative;
}

.dashboard div.header > div > figure > img {
   position: relative;
   max-width: 100%;
}

.dashboard div.header > div:nth-child(1) {
   width: 20%;
}

.dashboard div.header > div:nth-child(2),
.dashboard div.header > div:nth-child(3) {
   width: 38%;
   border-left: 2px solid rgba(174, 174, 177, 0.25);
   margin-left: 20px;
   padding-left: 20px;
}

.dashboard div.bio {
   position: relative;
   display: table;
}

.dashboard div.bio > figure {
   position: relative;
   display:inline-block;
   vertical-align: middle;
   width: 100px;
   height: 100px;
   background-color: var(--highlight-b-color);;
   border-radius: 100%;
   overflow: hidden;
}

.no-image:after {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   font-size: 50px;
   color: var(--text-color);
   font-family: "Material Icons";
   content: '';
}

.dashboard div.bio > figure > img {
   border-radius: 100%;
   overflow: hidden;
   position: absolute;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

.dashboard div.bio > span {
   position: relative;
   display: table-cell;
   vertical-align: middle;
   padding-left: 20px;
   padding-right: 20px;
}

.dashboard div.bio > span > h2 {
   position: relative;
   margin-bottom: 8px
}

.dashboard div.bio > span > p {
   position: relative;
   padding: 0px 0px;
}

.dashboard div.bio > span > a {
   position: relative;
   padding: 0px 0px;
   font-size: 14px;
   color:var(--highlight-color);
}

.dashboard div.bio > span > p .highlight {
   text-transform: uppercase;
   font-size: inherit;
   font-weight: bold;
}

.dashboard div.area {
   position: relative;
   display: table;
}

.dashboard div.area > figure {
   position: relative;
   display: block;
   vertical-align: middle;
}

.dashboard div.area > figure > img {
   display: inline-block;
   vertical-align: middle;
   width: 50px;
   height: 50px;
   padding-right: 10px;
   filter: invert(0%) sepia(0%) saturate(1000%) hue-rotate(700deg) brightness(150%) contrast(100%);
}

.dashboard div.area > figure > h2 {
   position: relative;
   display: inline-block;
   vertical-align: middle;
}

.dashboard div.area > span {
   position: relative;
   display: block;
}

.dashboard div.area > span > p {
   position: relative;
   padding: 10px 0px;
}

.dashboard div.messages {
   position: relative;
   display: table;
}

.dashboard div.messages > ul {
   position: relative;
   display: table;
}

.dashboard div.messages > ul > li {
   position: relative;
   display: table;
   padding: 5px 0px;
}

.dashboard div.messages > ul > li.head a:before {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   width: 22px;
   height: 22px;
   background-image: url(../../../../files/img/frontend/bell.svg);
   background-size: contain;
   background-repeat: no-repeat;
   content:'';
}

.dashboard div.messages > ul > li.head > a {
   position: relative;
   display: table;
   font-weight: normal;
   font-size: 18px;
   line-height: 100%;
   color: var(--text-color);
}

.dashboard div.messages > ul > li > a {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
   line-height: 100%;
   color: var(--message-color);
}

.dashboard div.messages > ul > li > a > p {
   display: block;
   vertical-align: middle;
   color:var(--highlight-color);
   font-size: 10px;
   font-weight: bold;
}

div.messages.main {
   position: relative;
   display: table;
   padding: 20px 0px;
}

div.messages.main > ul {
   position: relative;
   display: table;
}

div.messages.main > ul > li {
   position: relative;
   display: table;
   padding: 10px 0px;
}

div.messages.main > ul > li > a {
   font-size: 20px!important;
}

div.messages.main > ul > li > a > p {
   font-size: 14px;
}

/* user menu */

 .user-menu {
	position: relative;
   display: block;
	z-index: 3;
}

 .user-menu > .call-action {
	position: relative;
	display: block;
   font-size: 14px;
   color:var(--highlight-color);
	cursor: pointer;
	z-index: 1;
}

.user-drop {
	position: absolute;
	display: table;
   top: -600px;
   left: 10px;
	opacity: 0;
	pointer-events: none;
	border-radius: 20px;
	text-align: left;
	z-index: 1;
	padding: 20px;
	transition: 5s;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
   -webkit-transition: .5s;
   background:var(--navigation-bg);
   z-index: -1;
   display: none;

   pointer-events: initial;
	-webkit-box-shadow: -10px 0px 31px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: -10px 0px 31px 0px rgba(0,0,0,0.39);
   box-shadow: -10px 0px 31px 0px rgba(0,0,0,0.39);
   
}

 .user-menu.active > .user-drop {
	display: table;
	top:-3px;
	right:-3px;
   opacity: 1;
   z-index: 1;
}

 .user-drop > a.close {
	position: absolute;
   display: inline-block;
   top: 0px;
   right: 0px;
	width: 40px;
	height: 40px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

 .user-drop > a.close:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	font-size: 20px;
	color: var(--text-color);
	font-family: "Material Icons";
	content:'';
}

 .user-drop > div.master {
	position: relative;
   display: table;
   width: 280px;
   text-align: left;
}


.user-drop > div.master > div {
	position: relative;
   display: inline-block;
   width:180px;
   text-align: left;
}

.user-drop > div.master > div:nth-child(2) {
   width:90px;
}

.user-drop > div.master > div h2 {
   color:var(--highlight-color);
   font-size: 36px;
   padding: 0px;
   text-align: left;
}

.user-drop > div.master > div h3 {
   color:var(--highlight-color);
   font-size: 14px;
   padding: 0px;
   text-align: left;
}

 .user-drop > div.master > div > figure.no-image:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 60px;
    color: var(--text-color);
    font-family: "Material Icons";
    content: '';
}

 .user-drop > div.master > div > figure {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 90px;
	height: 90px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	background-color: var(--highlight-b-color);
	color: var(--text-color);
	overflow: hidden;
	transition: 5s;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

 .user-drop > div.master > div > figure > img {
	display: block;
	position: relative;
	max-width: 100%;
}

.user-drop > div.master > div > a.upload-picture {
   position: absolute;
   bottom: -10px;
   left: -10px;
}

.user-drop > div.master > div > a.upload-picture:after {
  position: relative;
   border-radius: 100%;
   background-color: var(--highlight-color);
   color: var(--text-color-invert);
   font-size: 24px;
   font-family: "Material Icons";
   content: '';
   z-index: 1;
   display: block;
   padding: 8px;
   line-height: 100%;
   text-align: center;
   vertical-align: middle;

}

 .user-drop > div.master > h2 {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 10px;
	color: var(--text-color);
	font-size: 20px;
}

 .user-drop > ul {
	position: relative;
	display: table;
	padding: 10px;
	width:100%;
	white-space: nowrap;
	font-size:12px;
	color: var(--text-color);
	text-align: right;
}

 .user-drop > ul > li {
	position: relative;
	display: table;
	width:100%;
	padding:3px 0px;
	padding: 12px 0px;
	border-top: solid 1px var(--border-color);
}

 .user-drop > ul > li:last-child {
	border-bottom:none;
}

 .user-menu .user-drop ul li > a,
 .user-menu .user-drop ul li > div {
	position: relative;
	display: table;
	width:100%;
}

 .user-drop > ul > li > a > span {
	position: relative;
	display: table;
	width:100%;
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
	text-transform: uppercase;
}
.user-drop ul li:hover {
	color:#000000;
}

.user-drop ul li .icon {
	font-size: 28px;
	font-family: "Material Icons";
	float: right;
	display: table-cell;
	vertical-align: middle;
	padding: 0px 0px 0px 6px;
	background-size: cover;
	background-position: center;
	min-width: 24px;
	border-radius: 100%;
	overflow: hidden;
	margin-left: 8px;
}

/* user score */

.user-score {
   position: relative;
   display: block;
   padding: 20px 0px;
}

.user-score > span {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   padding-right: 10px;
}

.user-score > span {
   position: relative;
   display: inline-block;
   vertical-align: middle;
}

.user-score > span > div.rating i.fa {
   font-size: 28px !important;
   padding: 2px;
}

/*
dashboard box-set
*/

.box-set {
   position: relative;
   padding: 10px 0px;
   display: table;
}

.box-set > h3 {
   position: relative;
   display: block;
   padding:10px 0px;
   overflow: visible;
   color:var(--neutral-color);
   font-size: 22px;
   font-weight: 200;
}

.box-set > ul {
   position: relative;
   display: table;
   width: 100%;
   table-layout: fixed;
   height: 100%;
}

.box-set > ul > li  {
   position: relative;
   display: table-cell;
   vertical-align: top;
   padding:10px;
   height: inherit;
   /*max-width: 50%;*/
}

.icon-side {
   position: relative;
   display: inline-block;
   vertical-align: middle;
}

.icon-side > span ,
.icon-side > figure {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   color: inherit;
   font-size: inherit;
   font-family: inherit;
   
}

.no-margin {
   margin: 0px;
}

.icon-side > span {
   width: 75%;
}
.icon-side > figure {
   width: 25%;
}

.icon-side > figure > img {
   position: relative;
   display: block;
   width: 100%;
}

.box-set > ul > li.main {
   width: 55%;

   /*
   new_size with new boxes
   */
   width: 45%;
}


.box-set > ul > li.tiny {
   width: 20%;
}

.box-set > ul > li:nth-child(1)  {
   padding-left: 0px;
}

.box-set > ul > li:last-child  {
   padding-right: 0px;
}

.box-set > ul > li > a,
.box-set > ul > li > div {
   position: relative;
   padding:25px;
   display: table;
   width: 100%;
   height: inherit;
   background: var(--box-bg);
   box-shadow: var(--box-shadow);
   border-radius: 10px;
   background-repeat: no-repeat;
   display: inline-block;
   
}

.box-set > ul > li > a:hover,
.box-set > ul > li:hover > div {
   border: 1px solid rgba(255,255,255,0.08);
}

.box-set > ul > li{
   transition: all linear 160ms;
}

.box-set > ul > li:hover{ 
   transform: scale(1.05) !important;
   z-index: 2;
}

.box-set > ul > li > a.tinny,
.box-set > ul > li > div.tinny {
   padding: 00px;
   background-color: transparent!important;
   background: none!important;
   box-shadow: none;
}


.box-set > ul > li > a.highlight,
.box-set > ul > li > div.highlight {
   background: var(--box-bg-highlight);
   color:var(--box-text-color-highlight);
}

.box-set > ul > li > a.highlight.light-bg,
.box-set > ul > li > div.highlight.light-bg {
   background: var(--box-bg-highlight-light);
}

.box-set > ul > li > a.highlight > p,
.box-set > ul > li > div.highlight > p,
.box-set > ul > li > a.highlight > h2,
.box-set > ul > li > div.highlight > h2 {
   color:var(--box-text-color-highlight);
}

.box-set > ul > li > a > figure.overlay,
.box-set > ul > li > div > figure.overlay {
   position: absolute;
   display: block;
   width: auto;
   right: 30px;
   top: 50%;
   transform: translateY(-50%);
   text-align: right;
}

.box-set > ul > li > a > figure > img,
.box-set > ul > li > div > figure > img {
   position: relative;
   display: block;
   /*max-height: 90%;;*/

   max-width: 90%;;
}

.box-set > ul > li > a > p ,
.box-set > ul > li > div > p {
   padding: 10px 0px;
}

.box-set > ul > li > a.have-icon,
.box-set > ul > li > div.have-icon {
   padding-right: 40%;
}

.box-set.small > ul > li > a.have-icon,
.box-set.small > ul > li > div.have-icon {
   padding-right: 28%;
}

.box-set.small > ul > li > a.have-icon > figure.overlay,
.box-set.small > ul > li > div.have-icon > figure.overlay {
   top: 20px;
   transform: translateY(0);
}

.box-set > ul > li > a.have-icon > a.button, 
.box-set > ul > li > div.have-icon > a.button {
   z-index: 1;
}

.box-set.small > ul > li > a > p ,
.box-set.small > ul > li > div > p {
   padding: 10px 0px;
   font-size: 14px;
   color: #828282;
   line-height: 18px;
   font-weight: 200;
}

.box-set > ul > li > div.lesson-cover {
   position: relative;
}

.box-set > ul > li > div.lesson-cover > figure {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 30px;
   width: 190px;
}

.box-set > ul > li > div.lesson-cover > figure > img {
   position: relative;
}

.box-set > ul > li > div.lesson-cover > *:not(figure) {
   padding-left: 200px;
}

.box-set > ul > li > div.list-to-do {
   position: relative;
   display: block;
}

.box-set > ul > li > div.list-to-do > span {
   position: relative;
   display: block;
   padding: 10px 0px 10px 30px;
   font-size: 18px;
}

.box-set > ul > li > div.list-to-do > span:before {
   position: absolute;
   display: inline-block;
   left: 0px;
   vertical-align: middle;
   width: 20px;
   height: 20px;
   font-size:16px;
   background-color: var(--highlight-color);
   color:var(--text-color-invert);
   text-align: center;
   border-radius: 100%;
   font-family: "Material Icons";
   content:'';
}

/* */

.box-set > ul > li > div.teacher-class {
   position: relative;
   display: table;
}

.box-set > ul > li > div.teacher-class > span {
   position: relative;
   display: table-cell;
   vertical-align: middle;
   height: 100%;
   border-right: solid 1px rgba(255,255,255,.4);
   padding: 10px;
}

.box-set > ul > li > div.teacher-class > span:last-child {
   border-right: none;
}

.box-set > ul > li > div.teacher-class > span:nth-child(1) {

   background-image: url(../../../../files/img/frontend/vec-class.svg);
   background-repeat: no-repeat;
   background-position: top 20px right 20px;

   max-width: 270px;

}

.box-set > ul > li > div.teacher-class > span > h2 {
   padding: 80px 0px 40px;
}

.box-set > ul > li > div.teacher-class > span > div.timing {
   position: relative;
   display: block;
}

.box-set > ul > li > div.teacher-class > span > div.timing > div {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
}

.box-set > ul > li > div.teacher-class > span > div.timing > div.separator {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
   font-size: 20px;
   color:var(--text-color);
   vertical-align: middle;
   padding-bottom: 30px;
}

.box-set > ul > li > div.teacher-class > span > div.timing > div > figure {
   position: relative;
   display: block;
   margin: 0 auto;
   text-align: center;
   height: 73px;
   vertical-align: middle;
}

.box-set > ul > li > div.teacher-class > span > div.timing > div > figure > img {
   position: relative;
   display: block;
   max-width: 100%;
   margin: 0 auto;
   text-align: center;
   transform: translateY(-50%);
   top: 50%;
}

.box-set > ul > li > div.teacher-class > span > div.timing > div > p {
   position: relative;
  display: block;
  text-align: center;
  color:var(--text-color);
  font-size: 12px;
}

.box-set > ul > li > div.teacher-class > span > div.timing > div > p.large {
  font-size: 16px;
}

.box-set > ul > li > div.teacher-class > span > a.button {
   margin: 0 auto;
}

/* */

.client-list {
   position: relative;
   padding: 10px 0px;
   max-width: 540px;
}

.client-list > ul {
   position: relative;
   
}

.client-list > ul > li {
   position: relative;
   display: inline-block;
   vertical-align: top;
   padding: 10px 5px;
}


.client-list > ul > li > figure {
   position: relative;
   width: 80px;
   height: 80px;
   border-radius: 100%;
   overflow: hidden;
   background-color: var(--highlight-color);
}

.client-list > ul > li > figure.no-image:after {
   font-size: 60px;
}

.client-list > ul > li > figure > img {
   position: relative;
}

.client-list > ul > li.show-card {
   cursor: pointer;
}

.client-list > ul > li.show-card:hover > figure:before {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   font-size: 10px;
   text-align: center;
   color:var(--text-color);
   content: 'ver card';
   text-align: center;
   line-height: 80px;
   width: inherit;
   height: inherit;
   overflow: hidden;
   border-radius: 100%;
   background-color: rgba(0,0,0,.5);
   z-index: 2;;
}

.client-list > ul > li > p {
   position: relative;
   text-align: center;
   margin: 0 auto;
   padding: 5px 0px;
}

.client-list > ul > li > a {
   position: relative;
   margin: 0 auto;
}

figure.avatar {
   position: relative;
   width: 80px;
   height: 80px;
   border-radius: 100%;
   overflow: hidden;
   background-color: var(--highlight-color);
}

figure.avatar.no-image:after {
   font-size: 60px;
}

figure.avatar > img {
   position: relative;
}

/*
evolution-set
*/

.evolution-set {
   position: relative;
   display: block;
   padding: 20px 0px;
}

.evolution-set > nav {
   position: relative;
   display: block;
   padding: 10px 0px;
}

.evolution-set > nav > ul  {
   position: relative;
   display: block;
}

.evolution-set > nav > ul > li {
   position: relative;
   display: inline-block;
   padding: 5px;
}

.evolution-set > nav > ul > li:not(.active) > button:not(:hover) {
   position: relative;
   display: inline-block;
   background: #6C6C78!important;
   color:#ffffff!important;
   border: none;
}

.evolution-set > nav > ul > li > button:hover,
.evolution-set > nav > ul > li.active > button {
   display: inline-block;
}

.evolution-set > nav > ul > li > ul {
   position: relative;
   display: none;
}

.evolution-set > nav > ul > li.active > ul {
   display: inline-block;
}

.evolution-set > nav > ul > li > ul > li {
   position: relative;
   display: inline-block;
   color:#51515A;
   border-bottom: solid 4px #3E3C41;
}

.evolution-set > nav > ul > li > ul > li > a {
   position: relative;
   display: block;
   font-size: 14px;
   padding: 5px 10px;
   color: inherit;
}

.evolution-set > nav > ul > li > ul > li.active {
   color:#2D9CDB;
   border-bottom: solid 4px #2D9CDB ;
   opacity: .5;
}

.evolution-set > nav > ul > li > ul > li.active.current {
   opacity: 1;
}

.level-set {
   position: relative;
   display: block;
}

.level-set .progress {
   position: relative;
   display: inline-block;
   width: auto;
   vertical-align: middle;
   padding: 0px 50px 50px 0px;
}

.level-set .progress > .svg-container {
   position: relative;
   display: inline-block;
   vertical-align: top;
   vertical-align: middle;
   padding-right: 10px;
}

.level-set .progress > .svg-container > .icon {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   content: '';
   background-position: center;
   background-repeat: no-repeat;
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: 40%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
   -webkit-mask-size: 40%;
}

.level-set .progress > svg,
.level-set .progress > div.content {
   position: relative;
   display: inline-block;
   vertical-align: top;
   vertical-align: middle;
   padding-right: 10px;
}

.level-set .progress > div > div {
   position: relative;
   display: inline-block;
   vertical-align: middle;
}


.level-set .progress > div > span > div.up {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
   -webkit-mask-image: url(../../../../files/img/frontend/arrow-up.svg);
   mask-repeat: no-repeat;
   mask-position: center;
   mask-image: url(../../../../files/img/frontend/arrow-up.svg);
   content:'';
   width: 16px;
   height: 39px;;
   background-color: inherit;
   position: absolute;
   top: 50%;
   right: -20px;
   transform: translateY(-50%);
}

.level-set .progress > div >  span > div.down {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
   -webkit-mask-image: url(../../../../files/img/frontend/arrow-down.svg);
   mask-repeat: no-repeat;
   mask-position: center;
   mask-image: url(../../../../files/img/frontend/arrow-down.svg);
   content:'';
   width: 16px;
   height: 39px;;
   background-color: inherit;
   position: absolute;
   top: 50%;
   right: -20px;
   transform: translateY(-50%);
}

.level-set .progress > div > text {
   position: relative;
   display: block;
   vertical-align: top;
   font-style: normal;
   font-weight: bold;
   font-size: 20px;
   line-height: 24px;
   padding-bottom: 5px;
   font-weight: 200;
}

.level-set .progress > div > span {
   position: relative;
   display: block;
   vertical-align: top;
   font-style: normal;
   font-weight: normal;
   font-size: 50px;
   line-height: 40px;
}

.path-line {
   stroke-dasharray: 400;
   animation: draw .5s ease-in;
}

.path-singleline {
   stroke-dasharray: 4100;
   animation: draw-single .4s ease-in;
}

/* dashboard graph draw */

@keyframes dash {
   /*
   to {
      stroke-dashoffset: 0;
   }
   */
}

@keyframes draw {
   from {
      stroke-dashoffset: 400;
   }
   to {
      stroke-dashoffset: 800;
   }
}

@keyframes draw-single {
   to {
      stroke-dashoffset: 800;
   }
}


.level-set .progress.interactive {
   padding: 0px 15px 10px 15px;
}

.level-set .progress.interactive > .svg-container, 
.level-set .progress.interactive > div.content {
   display: table;
   margin: 0 auto;
   padding: 0px;
}

.level-set .progress > .svg-container {
   padding: 0px;
   display: table;
   margin: 0 auto;
}

.level-set .progress.interactive > div > span {
   display: none;
}

.level-set .progress.interactive > div > text {
   font-size: 10px;
   color:var(--text-color)!important;
   margin: 0 auto;
   text-align: center;
}

.level-set .progress > .display {
   position: relative;
   display: table;
   width: 100%;
   margin: 0 auto;
   border: solid 1px var(--border-color);
   padding: 2px 4px;
   font-size: 10px;
   text-align: center;
   border-radius: 10px;
}

.level-set .progress > .slider {
   position: absolute;
   height: 100%;
   top: 0px;
   left: 0px;
}

.level-set .progress > .slider > .container {
   top: 50%;
   transform: translateY(-50%);
}

.level-set .progress > .slider > div.container {
   position: relative;
}

.ui-state-default, .ui-widget-content 
.ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {
   background: none;
   border-radius: 100%;
   width: 16px;
   height: 16px;
   background-color: var(--text-color);
   border: none;
   left: -8px;
}

.ui-widget.ui-widget-content {
   border-width: 3px;
}

.ui-slider-vertical .ui-slider-range-min {
   bottom: 0;
   width: 6px;
   display: table;
   background: var(--text-color);
   left: -3px;
   bottom: -4px;
}


/*
calendar
*/

.calendar > .card > .calendar-header > h3 {
   color:var(--highlight-color);
}

.calendar > .card button.class-agenda {
   background-image: none;
   width: 100%;
   margin: 8px 0px;
   font-size: 12px;
   border-radius: 14px;

   text-align: right;
   padding: 4px 4px;

   color: var(--text-color);
}

.calendar > .card button.class-agenda > span  {
   position: relative;
   display: block;
   font-size: 0px;
}

.calendar > .card button.class-agenda > span > p  {
   display: inline-block;
   width: 48%;
   border-radius: 10px;

   margin-left: 2px;
   margin-bottom: 2px;
   text-align: left;
}

.calendar > .card button.class-agenda > span  > p > span {
   font-size: 11px;
   line-height: 120%;
   padding: 2px 6px;
   color: var(--bg-color);
}

.calendar > .card button.class-agenda > span > p:only-child {
   width: 96%;
}

.calendar > .card button.class-agenda > ul {
   display: none;
}

/**/

.calendar-drop > div.master > div h2 > span.welcome-class:before {
   background-color:var(--color-class-welcome);
}

/*
.calendar-drop > div.master > div h2 > span.welcome-class {
   color:var(--color-class-welcome);
}
*/

ul.caption > li.welcome-class:before {
   background-color:var(--color-class-welcome);
}

ul.caption > li.welcome-class {
   color:var(--color-class-welcome);
}

.calendar > .card button.class-agenda.welcome-class {
   background-color:var(--color-class-welcome);
}

.calendar[data-profile="user"] > .card button.class-agenda {
   background-color: transparent!important;
   padding: 0;
}

/**/

.calendar-drop > div.master > div h2 > span.unit-class:before {
   background-color:var(--color-class-unit);
}

/*
.calendar-drop > div.master > div h2 > span.unit-class {
   color:var(--color-class-unit);
}
*/

ul.caption > li.unit-class:before {
   background-color:var(--color-class-unit);
}

ul.caption > li.unit-class {
   color:var(--color-class-unit);
}

.calendar > .card button.class-agenda.unit-class {
   background-color:var(--color-class-unit);
}

/**/

.calendar-drop > div.master > div h2 > span.conversation-class:before {
   background-color:var(--color-class-conversation);
}

/*
.calendar-drop > div.master > div h2 > span.conversation-class {
   color:var(--color-class-conversation);
}
*/

ul.caption > li.conversation-class:before {
   background-color:var(--color-class-conversation);
}

ul.caption > li.conversation-class {
   color:var(--color-class-conversation);
}

.calendar > .card button.class-agenda.conversation-class {
   background-color:var(--color-class-conversation);
}

.calendar-drop > div.master > div h2 > span.special-class:before {
   background-color:var(--color-class-special);
}

ul.caption > li.special-class:before {
   background-color:var(--color-class-special);
}

ul.caption > li.special-class {
   color:var(--color-class-special);
}

.calendar > .card button.class-agenda.special-class {
   background-color:var(--color-class-special);
}

.time-aval h4,
.time-aval h3,
.time-aval h5,
.time-aval p {
   text-align:left;
}

.time-aval ul.caption {
   text-align: left;
}

/* drop */

.calendar-drop {
	position: absolute;
	display: table;
	opacity: 0;
	pointer-events: none;
	border-radius: 20px;
	text-align: left;
	z-index: 1;
	padding: 20px;
	transition: 5s;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
   -webkit-transition: .5s;
   background:var(--navigation-bg);
}

.calendar-drop.active {
	display: table;
	opacity: 1;
	pointer-events: initial;
	-webkit-box-shadow: -10px 0px 31px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: -10px 0px 31px 0px rgba(0,0,0,0.39);
	box-shadow: -10px 0px 31px 0px rgba(0,0,0,0.39);
}

 .calendar-drop > a.close {
	position: absolute;
   display: inline-block;
   top: 0px;
   right: 0px;
	width: 40px;
	height: 40px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

 .calendar-drop > a.close:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	font-size: 20px;
	color: var(--text-color);
	font-family: "Material Icons";
	content:'';
}

 .calendar-drop > div.master {
	position: relative;
   display: table;
   width: 280px;
   text-align: left;
}

.calendar-drop > div.master > div {
	position: relative;
   display: inline-block;
   width:180px;
   text-align: left;
}

.calendar-drop > div.master > div:nth-child(2) {
   width:90px;
}

.calendar-drop > div.master > div h2 {
   color:var(--highlight-color);
   font-size: 36px;
   padding: 0px;
   text-align: left;
}

.calendar-drop > div.master > div h2 > span:before {
   position: relative;
   display: block;
   vertical-align: middle;
   width: 60px;
   height: 10px;
   border-radius: 20px;
   margin-bottom: 10px;
   background-color: red;
   content: '';
}

.calendar-drop > div.master > div h2 > span {
   color:var(--text-color);
   font-size: 20px;
   padding: 0px;
   text-align: left;
}

 .calendar-drop > div.master > div > figure.no-image:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 60px;
    color: var(--text-color);
    font-family: "Material Icons";
    content: '';
}

 .calendar-drop > div.master > div > figure {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 90px;
	height: 90px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	background-color: var(--highlight-b-color);
	color: var(--text-color);
	overflow: hidden;
	transition: 5s;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

 .calendar-drop > div.master > div > figure > img {
	display: block;
	position: relative;
	max-width: 100%;
}

.calendar-drop > div.master > div > a.upload-picture {
   position: absolute;
   bottom: -10px;
   left: -10px;
}

.calendar-drop > div.master > div > a.upload-picture:after {
  position: relative;
   border-radius: 100%;
   background-color: var(--highlight-color);
   color: var(--text-color-invert);
   font-size: 24px;
   font-family: "Material Icons";
   content: '';
   z-index: 1;
   display: block;
   padding: 8px;
   line-height: 100%;
   text-align: center;
   vertical-align: middle;

}

.calendar-drop > div.master > h2 {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 10px;
	color: var(--text-color);
	font-size: 20px;
}

.calendar-drop  ul {
	position: relative;
	display: table;
	width:100%;
	white-space: nowrap;
	font-size:12px;
	color: var(--text-color);
   text-align: left;
   padding: 10px 0px;
}

 .calendar-drop  ul > li {
	position: relative;
	display: table;
	width:100%;
   font-size: 16px;
   font-weight: normal;
   padding: 8px 0px;
   padding-left: 30px;
   color:#AEAEB1;
   cursor: pointer;
}

.calendar-drop  ul > li:before {
   position: absolute;
   display: inline-block;
   top: 50%;
   left: 0px;
   transform: translateY(-50%);
   vertical-align: middle;
   font-weight: inherit;
   font-size:inherit;
   color:inherit;
   content: '';
   width: 12px ;
   height: 12px;
   margin-right: 5px;
   border-radius: 100%;
   border:solid 1px #AEAEB1 ;
   font-family: inherit;
}

.calendar-drop  ul > li:hover,
.calendar-drop  ul > li.active {
   color: var(--highlight-color)!important;
}

.calendar-drop  ul > li:hover:before,
.calendar-drop  ul > li.active:before {
   border: solid 4px var(--highlight-color) ;
}

.calendar-drop .button-container {
   padding-bottom: 0px;
}

/*
wrapper
*/

.dashboard .navigator-wrapper {
   position: relative;
   display: block;
   padding: 20px 0px;
}

.dashboard .navigator-wrapper div.navigator {
   position: relative;
   display: inline-block;
   vertical-align: top;
   width: 18%;
   padding-right: 20px;
}

.dashboard .navigator-wrapper div.navigator > ul {
   position: relative;
   display: block;
   padding: 20px 0px;
}

.dashboard .navigator-wrapper div.navigator > ul > li {
   position: relative;
   display: block;
   text-align: center;
   background-color: var(--calendar-navigator-bg);
   border-radius: 20px;
   padding: 10px;
   width: 100%;
   margin-bottom: 10px;
}

.dashboard .navigator-wrapper div.navigator > ul > li.active {
   opacity: .5;
}

.dashboard .navigator-wrapper div.navigator > ul > li.no-active {
   opacity: .5;
}

.dashboard .navigator-wrapper div.navigator > ul > li > a {
   position: relative;
   display: block;
   font-size: 14px;
   text-align: center;
   color: var(--calendar-navigator-text);
}

.dashboard .navigator-wrapper div.calendar {
   position: relative;
   display: inline-block;
   vertical-align: top;
   width: 80%;
}

.dashboard .navigator-wrapper div.calendar[data-unavaiable="true"] {
   opacity: .4;
   pointer-events: none;
}


/*
repository library
*/

.repo {
   position: relative;
   display: block;
   width: 100%;
   padding: 10px 0px;
   text-align: left;
}

.repo > div {
   position: relative;
   display: inline-block;
   vertical-align: top;
}

.repo.book > div:nth-child(1) {
   width: 35%;
}

.repo.book > div:nth-child(2) {
   width: 65%;
}

.repo > div > div.form-search {
   float: right;
}

.repo > div > h1,
.repo > div > h2,
.repo > div > h3,
.repo > div > h4 {
   position: relative;
   display: inline-block;
   vertical-align: middle;
}

.repo > div > ul {
   position: relative;
   display: inline-block;
   vertical-align:top;
}

.repo > div > ul > li {
   position: relative;
   display: inline-block;
   vertical-align:top;
   padding: 5px;
   overflow: hidden;
   pointer-events: none;
   opacity: .3;
}

.repo > div > ul > li.avaiable {
   pointer-events: initial;
   opacity: 1;
}

.repo > div > ul > li > a {
   position: relative;
   display: block;
   width: 184px;
   height: 278px;
   background: var(--checkbox-bg);
}

.repo > div > ul > li > a > figure {
   position: relative;
   display: block;
}

.repo > div > ul > li > a > figure > img {
   position: relative;
   display: block;
   max-width: 100%;
}

.repo > div > ul > li > a:after {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: left -25px top 5px;
   background-size: auto 70%;
   content: '';
   opacity: .05;
   left: 0px;

   mask-repeat: no-repeat;
   mask-size: auto 70%;
   mask-position: left -25px top 5px;
   background-color: var(--text-color);
}

.repo > div > ul > li > a.video:after {
   mask-image: url(../../../../files/img/frontend/video.svg);
}

.repo > div > ul > li > a.audio:after {
   mask-image: url(../../../../files/img/frontend/volume.svg);
}

.repo > div > ul > li > a.pdf:after {
   mask-image: url(../../../../files/img/frontend/pdf.svg);
}

.repo > div > ul > li > a.image:after {
   mask-image: url(../../../../files/img/frontend/image-gallery.svg);
}

.repo > div > ul > li > a > span {
   position: relative;
   display: block;
   font-size: 14px;
   color:var(--text-color);
   padding: 18px 20px 20px 0px;
   float: right;
}

.repo > div > ul > li > a > span:before {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   content:'';
   background-color:var(--block-color);
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 100%;
   width: 20px;
   height: 20px;
   background-size: 50%;
   margin-right: 5px;
}

.repo > div > ul > li > a > span > span {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 8px;
   width: 100%;
   content: '';
}

.repo > div > ul > li > a.video > span:before {
   background-image: url(../../../../files/img/frontend/video.svg);
}

.repo > div > ul > li > a.audio > span:before {
   background-image: url(../../../../files/img/frontend/volume.svg);
}

.repo > div > ul > li > a.pdf > span:before {
   background-image: url(../../../../files/img/frontend/pdf.svg);
}

.repo > div > ul > li > a.image > span:before {
   background-image: url(../../../../files/img/frontend/image-gallery.svg);
}

.repo > div > ul > li > a > div {
   position: absolute;
   display: block;
   bottom: 20px;
   padding-right: 10px;
   left: 20px;
}

.repo > div > ul > li > a > div > span {
   position: relative;
   display: block;
   color: var(--text-color);
}

.repo > div > ul > li > a > div > span:nth-child(1) {
   font-size: 13px;
}

.repo > div > ul > li > a > div > span:nth-child(2) {
   font-size: 18px;
}

/* help */

div.container.help {
   text-align: center;
   margin: 0 auto;
   width: 100%;
   text-align: center;
   margin: 0 auto;
   display: table;
}

div.container.help  > div.main {
   position: relative;
   display: table-cell;
   text-align: center;
   padding: 0px !important;
   margin: 0 auto;
   height: 100%;
   width: 100%;
   vertical-align: middle;
}

div.container.help > div.main > h2 {
   padding: 10px 0px;
   margin: 0 auto;
}

div.container.help > div.main > form {
   padding: 10px 0px;
   position: relative;
   display: block;
   margin:  0 auto;
   max-width: 600px;
}

div.container.help > div.main > form > input {
   width: 100%;
   text-align:left;
}

div.container.help > div.main > span {
   position: relative;
   display: block;
   margin: 0 auto;
   padding: 10px 0px;
}

div.container.help > div.main > span > h4 {
   position: relative;
   display: block;
   margin: 0 auto;
}

div.container.help > div.main > span > ul {
   position: relative;
   display: block;
   margin: 0 auto;
}

div.container.help > div.main > span > ul > li {
   position: relative;
   display: inline-block;
   padding: 5px;
  font-size: 14px;
  color:var(--highlight-color);
}

/* repo cat */

.repo > div > ul.cat {
   position: relative;
   display: inline-block;
   vertical-align:top;
}

.repo > div > ul.cat > li {
   position: relative;
   display: inline-block;
   display: table;
   vertical-align:top;
   padding: 5px;
   overflow: hidden;
   pointer-events: none;
   opacity: .3;
   display: table;

}

.repo > div > ul.cat > li.avaiable {
   pointer-events: initial;
   opacity: 1;
}

.repo > div > ul.cat > li > a {
   position: relative;
   display: block;
   width: 184px;
   height: 100px;
   font-size: 20px;
   color:var(--highlight-color);
   padding: 20px;
   background: var(--checkbox-bg);

   background: none;
   height: auto;
   font-size: 16px;
   padding: 5px 0px;
}

.repo > div > ul.cat > li > a:after {
   background-color: transparent;
}

/* repo faq */

.repo > div > ul.faq {
   position: relative;
}

.repo > div > ul.faq > li {
   position: relative;
   display: block;
}

.repo > div > ul.faq > li > h3 {
   position: relative;
   position: relative;
   display: block;
   font-weight: bold;
   padding: 10px 0px;
}

.repo > div > ul.faq > li > span {
   position: relative;
   padding-bottom: 20px;
   position: relative;
   display: block;
}

.repo > div > ul.faq > li > span > text {
   position: relative;
   max-width: 70%;
   position: relative;
   display: inline-block;
   vertical-align: top;
   padding-bottom: 10px;
}

.repo > div > ul.faq > li > span > figure {
   position: relative;
   max-width: 70%;
   padding-right: 10px;
   position: relative;
   display: inline-block;
   vertical-align: top;
}

.repo > div > ul.faq > li > span > figure > img {
   position: relative;
   display: block;
   max-width: 100%;
}

/* help  */

.repo.help > div:nth-child(1) {
   width: 30%;
}

.repo.help > div:nth-child(2) {
   width: 70%;
}

.repo.help > div > form {
   text-align: right;
}

.repo.help > div > form > input {
   width: auto;
   display: inline;
}

.help-no-result {
   float: right;
}

/* calendar */

.bg-active {
   position: relative;
   /* background-image: url(../../../../files/img/frontend/Intersect.svg);*/
}

.bg-inactive {
    background-image: url(../../../../files/img/frontend/Intersect.svg);
}

.bg-today {
   position: relative;
}

/* homework */

.homework-list  > ul {
   position: relative;
   display:-block;
   width: 100%;
   vertical-align:top;
}

.homework-list  > ul > li {
   position: relative;
   display: inline-block;
   width: 25%;
   vertical-align:top;
   padding: 5px;
   overflow: hidden;
   pointer-events: none;
   opacity: .3;
}

.homework-list  > ul > li.avaiable {
   pointer-events: initial;
   opacity: 1;
}

.homework-cover > a,
.homework-list  > ul > li > a {
   position: relative;
   display: block;
   background: var(--checkbox-bg);
   height: 100%;
   min-height: 180px;
}

.homework-cover > a > span ,
.homework-list  > ul > li > a > span {
   position: relative;
   display: block;
   font-size: 14px;
   color:var(--text-color);
   padding: 18px 20px 20px 0px;
   float: right;
}

.homework-cover >  a > span > span,
.homework-list  > ul > li > a > span > span {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 8px;
   width: 100%;
   content: '';
}

.homework-cover > a > div,
.homework-list  > ul > li > a > div {
   position: relative;
   display: block;
   padding: 50px 60px 20px 20px;
  
}

.homework-list  > ul > li.checked > a > div:before {
   position: absolute;
   display: inline-block;
   left: 20px;
   top: 25px;
   vertical-align: middle;
   width: 20px;
   height: 20px;
   font-size: 16px;
   background-color: var(--highlight-color);
   color: var(--text-color-invert);
   text-align: center;
   border-radius: 100%;
   font-family: "Material Icons";
   content: '';
}

.homework-cover > a > div > span,
.homework-list  > ul > li > a > div > span {
   position: relative;
   display: block;
   color: var(--text-color);
   font-size: 26px;
}

.homework-cover > a > figcaption,
.homework-list  > ul > li > a > figcaption {
   position: absolute;
   display: block;
   font-size: 100px;
   color:var(--text-color);
   right: 10px;
   bottom: 0px;
   opacity: .1;
   width: auto;
   height: auto;
   line-height: 100%;
}

.homework-cover,
.homework-title {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   width: 50%;
}

.homework-cover {
   height: 100%;
}

.homework-title > * {
   padding-left: 20px;
}

/* evaluation-list */

.evaluation-list {
   position: relative;
   background: var(--profile-bg-color);
   box-shadow: var(--box-shadow);
   border-radius: 20px;
   padding: 20px;

}

.evaluation-list > ul {
   position: relative;
   display: block;
}

.evaluation-list > ul > li {
   position: relative;
   display: block;
   /*padding-bottom: 20px;*/
}

.evaluation-list > ul > li > div {
   position: relative;
   display: block;
   padding: 10px 0px;
}

.evaluation-list > ul > li > div > span {
   position: relative;
   vertical-align: top;
}

.evaluation-list > ul > li > div > span:nth-child(2) {
   padding: 5px 20px;
}

.evaluation-list > ul > li > div > span > figure {
   position: relative;
}

.evaluation-list > ul > li > div > span > figure > img {
   position: relative;
}

.evaluation-list > ul > li > div > span > figcaption {
   position: relative;
   display: block;
   margin:0 auto;
   text-align: center;
   padding: 5px 0px;
   font-size: 12px;
   color:var(--text-color);
   font-weight: bold;
}

.evaluation-list .client-score {
   padding-bottom: 10px;
}

.evaluation-list .client-score > div.rating i.fa {
   font-size: 16px !important;
   padding: 2px;
}

/* */

.arrow {
   border: solid black;
   border-width: 0 3px 3px 0;
   display: inline-block;
   padding: 3px;
 }
 
 .arrow.right {
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
 }
 
 .arrow.left {
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
 }
 
 .arrow.up {
   transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
 }
 
 .arrow.down {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
 }

 /*
 special colors for special kids
 */

.bg-welcome-class {
   background-color:var(--color-class-welcome)!important;
}

.bg-unit-class {
   background-color:var(--color-class-unit)!important;
}

.bg-conversation-class:before {
   background-color:var(--color-class-conversation)!important;
}

.bg-conversation-class {
   background-color:var(--color-class-conversation)!important;
}

.bg-special-class {
   background-color:var(--color-class-special)!important;
}

.paginator {
   position: relative;
   display: block;
}

.paginator > ul {
   position: relative;
   display: block;
}

.paginator > ul > li {
   position: relative;
   display: inline-block;
   padding: 5px;
}

.paginator > ul > li > a {
   position: relative;
   display: block;
   font-size: 14px;
   color: var(--text-color);
   width: 18px;
   height: 18px;
   line-height: 18px;
   text-align: center;
}

.paginator > ul > li.active > a {
   position: relative;
   display: block;
   color: var(--bg-color);
   background-color: var(--highlight-color);
   border-radius: 100%;

}

ul.reach {
   position: relative;
   display: block;
   padding: 20px 0px;
   width: 100%;
}

.full-size {
   width: 100%;
}

ul.reach > li {
   position: relative;
   display: inline-block;
   vertical-align: top;
   padding-right: 10px;
}

ul.reach > li:first-child {
   padding-right: 9%;
}

ul.reach > li > a {
   position: relative;
   display: block;
}

ul.reach > li > a > figure {
   position: relative;
   display: block;
}

ul.reach > li > a > figure > img {
   position: relative;
   display: block;
   max-width: 100%;
}

.legal-footer {
   position: relative;
   display: table;
   width: 100%;
}

.legal-footer > span > ul,
.legal-footer > span > span, 
.legal-footer > span {
   position: relative;
   display: table-cell;
   vertical-align: middle;
}

.legal-footer > span > ul,
.legal-footer > span > span {
   display: inline-block;
}

.legal-footer > span a {
   text-decoration: underline!important;
}

.legal-footer > span:nth-child(2) {
   text-align: right;
}

.legal-footer p {
   font-size: 12px;
}

.legal-footer ul.social {
   padding-left: 10px;
}

.legal-footer ul.social > li {
   padding: 2px;
}

.legal-footer ul.social > li > a {
   background-color: #22DB7F;
   width: 25px;
   height: 25px;
   border-radius: 100%;
   overflow: hidden;
   display: block;
   vertical-align: middle;
   line-height: 22px;
}

.legal-footer ul.social > li > a {
   font-size: 12px;
}

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

   .safari_only { 


   }

   .box-set > ul {
   
      /*
      safari
      */
      min-height: 100%;
      height: auto;
   }
}}