/*
footer
*/

footer {
    position: fixed;
    right: 10px;
    top: 20px;
    z-index: 2;
 }
 
 footer > div.container {
    position: relative;
    display: block;
 }
 
 /*
 footer for classes
 */
 
 footer.conference {
    position: fixed;
    right: initial;
    top: initial;
    bottom: 0px;
    left: 0px;
    z-index: 3;
    width: 100%;
    padding: 0px!important;
 }
 
 footer.conference > div.container {
    position: relative;
    display: block;
    width: 100%;
    padding: 0px!important;
 }
 
 footer.conference > div.container > h1 {
    font-size: 18px;
    padding: 0px 20px;
    position: absolute;
    font-weight: 200;
    top: -60px;
 }
 
 footer.conference > div.container > ul {
    position: relative;
    display: table;
    min-height: 74px;
    height: 74px;
    table-layout: fixed;
    background: linear-gradient( #353A40 , #16171B );
    width: 100%;
    z-index: 2;
 }
 
 footer.conference > div.container > ul > li {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 15px;
    border-right: solid 2px #353740;
    max-width: 160px;



 }

 footer.conference > div.container > ul > li.ignore-lock {
   background-image: url(../../../../files/img/frontend/ignore-lock.svg);
   background-repeat: no-repeat;
   background-position: bottom 10px right 10px;
   background-size: 14px;
}
 
 footer.conference > div.container > ul > li.locked {
    background-image: url(../../../../files/img/frontend/locked.svg);
    background-repeat: no-repeat;
    background-position: bottom 10px right 10px;
 }
 
 footer.conference > div.container > ul > li.unlocked {
    background-image: url(../../../../files/img/frontend/unlocked.svg);
    background-repeat: no-repeat;
    background-position: bottom 10px right 10px;
 }

 footer.conference > div.container > ul > li.unlocked > a > span {
    color:var(--highlight-color);
 }
 
 footer.conference > div.container > ul > li:after {
     bottom: 100%;
     left: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-color: rgba(53, 58, 64, 0);
     border-bottom-color: #353A40;
     border-width: 8px;
    margin-left: -8px;
 }

 /* help */

 
.foot.button.help {
   position: fixed;
   bottom: 20px;
   right: 20px;
}

.foot.button.help > .user-drop {
   top:auto;
   left: auto;
   right:0px;
   bottom: -400px;
}

.foot.button.help.active > .user-drop {
	display: table;
   opacity: 1;
   z-index: 1;
   top:auto;
   left: auto;
   right:0px;
   bottom: 0px;
}

 

@keyframes pulse {
	0% {
		transform: scale(0.95);
		/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/
	}

	70% {
		transform: scale(1.5);
      /*box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/
	}

	100% {
		transform: scale(0.95);
		/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/
	}
}

footer.conference > div.container > ul > li > a {
   position: relative;
   display: block;
   font-style: normal;
   font-weight: normal;
   font-size: 11px;
   line-height: 100%;

   /* or 100% */
   text-align: center;

   /* grey */
   color: #7F8489;
}

footer.conference > div.container > ul > li > a:hover {
   color: #ffffff;
   text-decoration: underline!important;
}

footer.conference > div.container > ul > li > a > span {
   font-style:  inherit;
   font-weight:  inherit;
   font-size:  inherit;
   line-height:  inherit;
   color: inherit;
}

/* lock unlock */

footer.conference > div.container > ul > li > a.perm {
   position: absolute;
   display: block;
   font-style: normal;
   font-weight: normal;
   
   background-repeat: no-repeat;
   background-position: center center;
	width:16px;
   height:16px;
   
   bottom:3px;
   right: 3px;

}

footer.conference > div.container > ul > li > a.perm.lock {
   background-image: url(../../../../files/img/frontend/unlocked.svg);
}


footer.conference > div.container > ul > li > a.perm.unlock {
   background-image: url(../../../../files/img/frontend/locked.svg);
}


/* lock unlock */

footer.conference > div.container > div.lesson {
   position: absolute;
   bottom: -100vw;
   left: 0px;
   display: block;
   background-color: #fff;
   /*border-radius: 20px;*/
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;
   padding: 20px 20px 20px 20px;
   padding: 0px 0px 20px 0px;
   /*width: 100%;*/
   z-index: 1;

   -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
   transition:.5s;

   /*overflow-y: auto;*/
   
   max-height: -moz-calc(100vh - 104px);
   max-height: -webkit-calc(100vh - 104px);
   max-height: calc(100vh - 104px);
}

footer.conference > div.container > div.lesson.active {
   bottom: 54px;
}

footer.conference > div.container > div.lesson > div.container {
   position: relative;
   display: block;
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;
   overflow: hidden;

}

footer.conference > div.container > div.lesson > div.container * {
   color: #000;
}

.lesson-container.active[data-profile="user"]   {
   /* user scrollmenu */
   padding-left: 80px;
}

footer.conference > div.container > div.lesson.active >  a.close {
   position: absolute;
   top: 10px;
   right: 10px;
   background-color:  #F7555C;;
   border-radius: 100%;
   width: 32px;
   height: 32px;
   text-align: center;
   vertical-align: middle;
   z-index: 1;
}


footer.conference > div.container > div.lesson.active >  a.close:before {
   position: relative;
   display: block;
   color:#ffffff;
   font-size: 14px;
   font-weight: bold;
   line-height: 32px;
   content:'X';
}


footer.conference > div.container > div.lesson > div.clients {
   position: absolute;
   top: 0px;
   left: 0px;
   display: block;
   background-color: #fff;
   padding: 20px;
   border-radius: 20px;
   z-index: 1;

   height: 96%;
   box-shadow: var(--box-shadow);
   overflow-y: scroll;
}

footer.conference > div.container > div.lesson > div.clients > h3 {
   color: #000;
   padding: 10px 0px;
}

footer.conference > div.container > div.lesson > div.clients > ul {
   position: relative;
   display: block;
}

footer.conference > div.container > div.lesson > div.clients > ul > li {
   position: relative;
   display: block;
}

footer.conference > div.container > div.lesson > div.clients > ul > li:after {
   position: absolute;
   top: 0px;
   right: 0px;
   width: 20px;
   height: 20px;
   font-size: 14px;;
   border-radius: 100%;
   font-weight: normal;
   text-align: center;
   line-height: 20px;
   overflow: hidden;
   font-family: "Material Icons";
}

footer.conference > div.container > div.lesson > div.clients > ul > li[data-status='initial'] {
   position: relative;
}

footer.conference > div.container > div.lesson > div.clients > ul > li[data-status='initial']:after {
   position: relative;
}

footer.conference > div.container > div.lesson > div.clients > ul > li[data-status='evaluated'] {
   position: relative;
   opacity: .5;
}

footer.conference > div.container > div.lesson > div.clients > ul > li[data-status='evaluated']:after {
   color:#fff;
   background-color: rgb(34, 219, 127);
   content:'';
}

footer.conference > div.container > div.lesson > div.clients > ul > li[data-status='must-evaluate'] {
   position: relative;
}

footer.conference > div.container > div.lesson > div.clients > ul > li[data-status='must-evaluate']:after {
   background-color: transparent;
   color: rgb(255, 38, 0);
   font-size: 20px;
   font-weight: normal;
   content:'';
}

footer.conference > div.container > div.lesson > div.clients > ul > li > a {
   position: relative;
   display: block;
}

footer.conference > div.container > div.lesson > div.clients > ul > li > a > figure {
   width: 50px;
   height: 50px;
}

footer.conference > div.container > div.lesson > div.clients > ul > li > a > span {
   font-size: 10px;
   color:#000;
   text-align: center;
   padding: 5px 0px;
}