/* #School */

.chat10-msg {
position:relative;
  width:100%;
  height:calc(100vh - 160px);
  background-color:white;
  overflow-y:scroll;overflow-x:hidden;
}

.chat2-msg {
position:relative;
  width:100%;
  height:calc(100vh - 135px);
  background-color:white;
  overflow-y:scroll;overflow-x:hidden;
}

.swing-notification {
  border: 0px solid #FFF;
  background-color: #FF6B6B;
  position: absolute;

  font-size: 12px;
  font-family:arial;
  color: #FFF;
  font-weight: 700;
  text-align:center;
   width: 20px;
  height: 20px;
  border-radius: 20px;
  line-height: 20px;  
  top: -10px;
  left: -15px;
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;   
-webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;  

}

.swing-notification-outside {


}


.swing-notification-outside:hover > .swing-notification {
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation-name: swing;
          animation-name: swing;

}


/* animation keyframes */
@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 1;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

.disableSelection {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.hs-icon {
   height:40px;   
   text-align:center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  //box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: none;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.hs-icon:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius:20px;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hs-icon:hover, .hs-icon:focus, .hs-icon:active { color: white; }
.hs-icon:hover:before, .hs-icon:focus:before, .hs-icon:active:before { -webkit-transform: scale(1); transform: scale(1); } 

.hs-icon .tooltip {
  opacity:0;
  font-family:Roboto;
  font-size:13px;
  visibility: hidden;
  width: 90px;
  background-color: #505356;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 4px; 
  position: absolute;
  z-index: 1;
  left:50%;
  margin-left: -40px;
  transition-duration: 300ms;
}

.hs-icon .tooltip-big { width:200px; }

.hs-icon .tooltip-bottom { top:100%; }

.hs-icon .tooltip-top { bottom: 100%; }

.hs-icon:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transition-property: visibility 0s linear 0s, opacity 300ms;
  transition-delay: 500ms;
}


.cursor { cursor:hand;cursor:pointer; }
div.myautoscroll::-webkit-scrollbar { width: 9px; }
div.myautoscroll::-webkit-scrollbar-thumb
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	background-color: #d8d8d8;
}

a {
  color:white; text-decoration:none;
  } 
a:hover {
  color:white; text-decoration:none;
  } 
textarea { resize: vertical; }

.contenteditable { resize: vertical; }
            
.menu {
  letter-spacing:1px;
  color: #ffffff;
  font-family: Alegreya Sans;
  font-size: 16.0px;
  font-weight: 700;
  padding-bottom:6px;
   
}

.menu-mobil {

  font-size: 30px;

}

.menu-inactive {
border-bottom:3px solid #273947;
}

.menu-active {
border-bottom:3px solid #20c5b9;
}

.menu-a,.menu-a:hover {
   color:white;
}


.test-button {

border: 2px solid #5890ff;
border-radius:4px;
height:44px;
color: #5790ff;
  font-family: Open Sans;
  font-size: 14.0px;
  font-weight: 700;

}

.test-progressbar-name {
color: #273946;
  font-family: Alegreya Sans;
  font-size: 14.0px;
  font-weight: 700;
  padding-left:15px;
}

.project-box-img {
background-size:cover;
background-repeat:no-repeat;
background-position:top center;

height:160px;
width:250px;
background-color:#ffffff;

}

.project-box {

height:250px;
width:250px;
background-color:#ffffff;

  box-shadow: 0px 2px 2px rgba:(0,0,0,0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
.project-box-text {
color: #333333;
  font-family: Open Sans;
  font-size: 12.0px;
  font-weight: 400;

padding-top:10px;
padding-left:25px;
padding-right:15px;
}
.project-box-name {
color: #273946;
  font-family: Alegreya Sans;
  font-size: 18px;
  font-weight: 700;

padding-top:25px;
padding-left:25px;
}

/* file upload */
.file-drop-area {
   cursor:hand;cursor:pointer;
   //box-sizing: border-box;
   text-align: center;
   border: 2px dashed #0087F7;
   border-radius: 5px;
   background: white;
   width:200px;
   min-height:200px;
   padding:5px;
}
.file-browser {
   opacity:0px;
   height:0px;
   width:0px;
}

/* classroom */
.classroom-users {
   //position:fixed;
   //right:0px;
   //bottom:0px;
   width:100%;
   height:90px;
}
.classroom-users-profil {
   float:left;
   width:60px;
   height:60px;
   background-size:cover;
   box-sizing: border-box;
   background-repeat:no-repeat;
   background-position:top center;
   border-radius:50px;
   padding-top:60px;
   font-family: Open Sans;
   font-size:10px;
   
}

.chat-window {
  width:100%;
  //border:1px solid #273947;
  
}
.chat-msg {
  width:100%;
  height:calc(100vh - 315px); 
  background-color:white;
  overflow-y:scroll;overflow-x:hidden;
}

.chat-msg::-webkit-scrollbar {
  background-color: white;

}

.chat-input {
  width:100%;
  height:75px;
  background-color:white;
    border-top:1px solid #e1e0e0;
  padding:0px;
  box-sizing: border-box; 
}  
.chat-textarea {
  width:100%;
  height:100%;
  float:left;
  border-bottom:3px solid #e1e0e0;
}
.chat-send-button {
  float:left;
  margin-left:20px;
}
.chat-content-msg {
   text-align:left;

   width:100%;
   padding:15px;
   box-sizing: border-box;
}
.chat-content-user {
   color:#5890ff;
   font-weight: 700;
   //padding-right:20px;
}
.chat-content-date {
   color:#b4b4b4;
}
.chat-teacher {
   background-color: #5890ff;
   color:white;
   border-radius:4px;
   padding:3px;
}
/* menu */
.menu-frame {

   z-index:9000;
   position:fixed;
   top:0px;
   left:0px;
   width:100%;
   background-color:#273947;
   border-bottom:solid 1px #c9ced1;

}
.menu-height { height:53px; }
.menu-content {

   margin:auto;
   width:100%;
   max-width:1300px;

}
.menu-logo {

   float:left;
   width:150px;
   padding-left:20px;
   font-family:Pacifico;font-size:30px;color:#b3f6ee;

}
.menu-logo-img { padding-top:10px; }
.menu-logged {

   box-shadow: 0px 1px 3px rgba:(0,0,0,0.25);
   background-color:white;
   z-index:100;
   border:1px solid #cccccc;
   border-right:1px solid #cccccc;
   border-bottom:1px solid #cccccc;
   position:absolute;
   top:60px;
   left:-200px;
   width:250px;
   font-family: Open Sans;
   font-size: 18.0px;
   font-weight: 400;
   padding:10px;

}

.menu-logged a {

   color:#333333;
   display: block;
   padding:4px;

}
/* window */
.window-frame {

   z-index:10000;
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   background-color: rgba(0, 0, 0, 0.6);

}
.window-content {

   background-color:white;
   width:60%;
   height:60%;
   margin-top:30px;
   padding:20px;
   text-align:left;

}
/* login */
.login-background {

   box-sizing: border-box;
   background-image:url('../../../img/bgf.jpg');
   width:100%;
   height:100%;
   min-height:100vh;
   background-size:cover;
   text-align:center;
   padding:20px;

}
.login-box {
 box-sizing: border-box;
   margin:auto;
   width:100%;
   max-width:445px;
   background-color: #f0efef;padding:25px;
   text-align:left;

}
.link {

  color: #4778fe;
  font-family: Open Sans;
  font-size: 14.0px;
  font-weight: 600;

}
.input-padding {margin-bottom:30px;}
.login-title {padding-top:83px;padding-bottom:43px;}
/* text content */
.text_content {

   margin:auto;
   padding: 20px;
   padding-top:30px;
   font-family:Open Sans;
   text-align:left;
   width:100%;
   max-width:960px;

   box-sizing: border-box;

}

/* home intro */
.home-background {
   
   width:100%;
   height:400px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
}
.home-background-img { background-image: url('/templates/default/img/background/bg.jpg'); }
.home-placeholder { opacity:0.9; background-image: url('/templates/default/img/background/bg_l.png'); }
.home-background-content {

   margin:auto;
   padding-top:80px;
   width:100%;
   max-width:900px;
   height:300px;
   text-align:center;

}
.home-slide {

box-sizing: border-box;
padding:20px;
   position:absolute;
   width:100%;
   max-width:900px;
   height:250px;
   color: #ffffff;
   font-family: Alegreya Sans;
   font-size: 26.0px;
   font-weight: 700;
   text-align:center;
   padding-top:20px;
      
}
.home-slide-button { padding-top:20px; }
/* home news */
.home-news {

   height:600px;
   width:100%;

}
.home-news-content {

   margin:auto;
   padding:20px;
   padding-top:50px;
   width:100%;
   max-width:1050px;
   box-sizing: border-box;

}
.home-news-box {

   width:33%;
   max-width:350px;
   height:100%;
   float:left;
   text-align:center;
   padding:20px;
   box-sizing: border-box;
   color: #333333;
   font-family: Open Sans;
   font-size: 18.0px;
   font-weight: 400;

}
/* home lessons */
.home-lessons {

   background-color:#f0f0f0;
   width:100%;

}
.home-lessons-content {

   margin:auto;
   width:1090px;
   text-align:center

}
.home-lessons-button {

   margin-top:80px;
   margin-bottom:80px;

}
.home-lessons-title { padding-bottom:40px; }
/* partners */
.partners-title { width:100%;text-align:center; }
.partners-content { width:750px;margin:auto; }
.partners-logo {
 
   float:left;
   width:250px;
   height:200px;
   background-size:80% auto;
   background-position:center center;
   background-repeat:no-repeat;

}
 
.title-1 {

 color: #273946;
  font-family: Alegreya Sans;
  font-size: 30.0px;
  font-weight: 700;
  padding-top:71px;

}

.title-2 {
 color: #273946;
  font-family: Alegreya Sans;
  font-size: 22.0px;
  font-weight: 700;
}

.title-3 {
  color: #ffffff;
  font-family: Alegreya Sans;
  font-size: 34.0px;
  font-weight: 700;
}

.title-4 {

color: #5790ff;
  font-family: Alegreya Sans;
  font-size: 22.0px;
  font-weight: 700;

}

.lessons-title {
   padding-top:60px;
   padding-bottom:60px;
   color:#273946;
}

/* dashboard */
.dashboard {

   box-sizing: border-box;
   width:100%;
   max-width:1100px;
   text-align:left;
   color:#273946;
   padding:20px;

}
.dashboard-hello {

   padding-top:50px;
   color:#273946;

}
.dashboard-wellcome {
   
   padding-bottom:40px;
   color: #333333;
   font-family: Open Sans;
   font-size: 18.0px;
   font-weight: 400;

}
.dashboard-tile {

   width:350px;
   background-color:white;

}

.home-button-1 {



color: #5790ff;
  font-family: Open Sans;
  font-size: 14.0px;
  font-weight: 600;
  border-radius: 3px;
  background: #ffffff;
  padding:10px;
  width:120px;
  border: 2px solid #ffffff;
  text-align:center;
  cursor:hand;cursor:pointer;
    letter-spacing:1.5px;
   margin-right:10px;
  padding-left:25px;
  padding-right:25px;
}

.home-button-2 {
border: 2px solid #ffffff;
color: #fffefe;;
  font-family: Open Sans;
  font-size: 14.0px;
  font-weight: 600;
  border-radius: 3px;

  padding:10px;
  width:120px;
  text-align:center; 
  cursor:hand;cursor:pointer;
      letter-spacing:1.5px;
   
  padding-left:25px;
  padding-right:25px;
}

input[type="text"],input[type="password"]
  {
   background-color: #ffffff;
   color: #333333;
  font-family: Open Sans;
  font-size: 18.0px;
  font-weight: 400;
  width:100%;
  height:48px;
  border:none;
  border-bottom:2px solid #9b9a9b;
  padding-left:9px;
  }

*:focus {
    outline: none;
}

input[type="text"]:focus,input[type="password"]:focus
  {

  border-bottom:4px solid #3497db;

  }
  
  input[type="button"],input[type="submit"] 
  {
  letter-spacing:1.5px;
   border:none;
   background:#5890ff;
   height:44px;
   color: #ffffff;
  font-family: Open Sans;
  font-size: 14.0px;
  font-weight: 600;
  padding:12px;
  padding-left:25px;
  padding-right:25px;
   cursor:hand;cursor:pointer; 
   border-radius:2px;
  }
  
  input[type="button"]:hover,input[type="submit"]:hover 
  {
  
   background:#82abfb;

  }  
  
  select 
  {
   background-color: #ffffff;
   color: #333333;
  font-family: Open Sans;
  font-size: 18.0px;
  font-weight: 400;
  width:100%;
  height:48px;
  border:none;
  border-bottom:2px solid #9b9a9b;
  padding-left:9px;
  }
.input-text {
padding-top:10px;
color: #666666;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 600;padding-bottom:4px;
}  
.element-text {
color: white;
  font-family: Open Sans;
  font-size: 12.0px;
  font-weight: 700;
}
.element-text2 {
color: white;
  font-family: Open Sans;
  font-size: 12.0px;
  font-weight: 700;
}
  
.help_bubble {
z-index:100;
 position:absolute;width: 300px;
  height: 21px;
  color: #ffffff;
  font-family: Open Sans;
  font-size: 12.0px;
  font-weight: 400;background: #05b398;top:0px;left:10px;padding-left:5px;padding-top:3px;
}

.help_bubble:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #05b398;
	border-width: 5px;
	margin-top: -5px;
}  


.help_bubble2 {
z-index:10000;
 position:absolute;width: 150px; max-width:300px;
  //height: 21px;
  color: #ffffff;
  font-family: Open Sans;
  font-size: 12.0px;
  font-weight: 400;background: #05b398;top:20px;left:0px;padding:10px;
}

.error-box {
width:100%;max-width:980px;background-color:#e74c3c;border:1px solid #bc463a;padding:10px;text-align:center;font-family:Open Sans;color:white;border-radius:4px;box-sizing: border-box; margin:auto;
}

.msg-box {
width:100%;max-width:980px;background-color:#00d6b2;border:1px solid #01bc9d;padding:10px;text-align:center;font-family:Open Sans;color:white;border-radius:4px;box-sizing: border-box; margin:auto;
}

html {
  margin:0px;
}
body {
  margin:0px;
  font-family: Open Sans;
  font-size: 14.0px;
}
form {
  margin:0px;
}
a {
  color:#2c81ba;
  text-decoration:none;
} 
a:hover {
  color:#2c81ba; 
  text-decoration:none;
}  

.content-header {
  width:100%;
  background-color:#f0f0f0;
  padding-bottom:20px;
}

.content-header-title {
  margin:auto;
  box-sizing: border-box;
  padding-left:20px;
  width:100%;
  max-width:960px;
  padding-top:60px;
  padding-bottom:40px;
  color:#273946;
}

.tag {
background-color:#00cc99;color:white;border:1px solid black;margin:3px;padding:3px;
}

.link-title {
   font-family: Open Sans;
   font-size: 18.0px;
   font-weight: 400;
   color: #5790ff;
}

.page-menu {
   height:50px;
   color: #333333;
   font-family: Lato;
   font-size: 14.0px;
   font-weight: 700;
   border-bottom:0px solid #ff9700;
}

.page-menu-active {
   border-bottom:6px solid #ff9700;
}

/* loading */
.spinner {
  margin: 100px auto;
  width: 100px;
  height: 80px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #00d6b2;
  height: 100%;
  width: 12px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


/* hamburger menu */
.nav-menu-links {
  padding-right:20px;  
}
.nav-menu-hamburger {
  display:none;
  cursor:hand;cursor:pointer;
  padding-right:20px;
  padding-top:15px;  
}

.dashboard-menu { display:block; }
.dashboard-left-menu { display:; }
.dashboard-mobile-menu { display:none; }
.community-img { display:block; }
.basic-element { display:default; }
.basic-element-none { display:none; }
.basic-button {  }
.basic-button-margin { margin-top:0px; }
.chat-table {height:calc(100vh - 53px);}
.basic-lesson {width:250px;margin-bottom:20px;float:left;margin-left:20px;}
.basic-table-td { width:20%; }
.basic-popup { width:60%; }
.basic-element-none-normal { display:none; }

@media screen and (max-width: 1000px) and (min-width: 0px) {

   .title-3 { font-size: 22px; }
   .dashboard-wellcome { font-size: 20px; }
   .dashboard-menu { display:none; }
   .dashboard-mobile-menu { display:block; }
   .dashboard-left-menu { display:none; }
   .community-img { display:none; }   
   .home-background-content { padding-top:20px; }
   .nav-menu-links { display:none; }
   .nav-menu-hamburger { display:block; }
   .home-lessons { display:none; } 
   .home-news-box { width:100%; max-width:none; float:none; }
   .home-news { height:auto; }
   .partners-content { display:none; }
   .partners-title { display:none; }
   .home-button-1 { display: inline-block; margin-right:0px; }
   .home-button-2 { display: inline-block; margin-top:10px; }
   .basic-element { display:none; }
   .basic-element-none { display:inline-block; }
   .chat-table {height:calc(100vh - 93px);}
   .basic-table-td { width:80%; }
   .basic-popup { width:90%; }
   
.basic-element-none-normal { display:inline; }

}

@media screen and (max-width: 500px) and (min-width: 0px) {

   .basic-button { width:100%; }
   .basic-button-margin { margin-top:10px; }
   .basic-lesson { width:100%;float:center;margin-left:0px;}

}