/* Reset  */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul,ul li{list-style:none}
a{margin:0;padding:0;outline:0}
table{border-collapse:collapse;border-spacing:0}
span,input,select{vertical-align:middle}
/* box-model fix */
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

/* =======================
================= GENERAL
==========================*/
/* set color to flash object so it matches the color of the background*/
object { color: #777777;}
html{
  min-height: 100%;
}


body{
  font: 400 14px 'Lato',Arial, Helvetica, sans-serif;
  color: #777777;
  min-height: 100vh;
  background: url(../images/bg.jpg) bottom right #64a0d2 no-repeat fixed;
  /* padding-bottom: 25px; */
}

@media(min-width:991px){
  .sectionitem-answer-wrapper {font-size:.75em;}
  .speaker-wrapper.match-text {font-size:.75em;}
  .container:not(.report) {
      width: 670px;
  }
}

@media(min-width:1200px){
  .sectionitem-answer-wrapper {font-size:.75em;}
  .speaker-wrapper.match-text {font-size:.75em;}
  .container:not(.report) {
      width: 720px;
  }
  .landing-page .container {
    width:970px;
  }
}

@media(min-width:1400px){
  body {font-size:14px;}
  .container:not(.report) {
      width: 1170px;
  }
}

@media(min-width:1090px) {
  .sectionitem-action {margin:0 2px;}
  .push-right-1 {margin-right:0px;}

}
@media(max-width:1540px) {
  .sectionitem-action {margin:0 2px;}
  .push-right-1 {margin-right:0px;}

}

a{
  color: #de0000;
}
a:focus{
  outline: none;
}
h1{
  font-size: 1.5em;
  color: #000;
}
h2{
  font-weight: 400;
  font-size: 1.25em;
}
h3{
  font-size: 1em;
  font-weight: 700;
}
.well{
  background:rgb(231,231,231);
  margin-bottom:10px;
}
.well.content-box {margin-bottom:10px; margin-top:15px;}
.well h2 {margin-bottom:10px;}

.btn-big{
  background: #6a6a6a;
  border: none;
  padding: 5px 45px;
  text-align: center;
  border-radius: 50px;
  border-bottom: solid 5px #424242;
  color: #fff;
  font-size: .9em;
}
.prev-btn {cursor: pointer;}
.next-btn {cursor: pointer;}
@media(max-width:767px){
  .btn-big {padding:5px 25px;}

}
@media(max-width:767px){
  .prev-btn {padding: 10px calc(21% - 10px)!important;}
  .next-btn {padding: 10px calc(29% - 10px)!important;}
  .btn-restart, .btn-start, .btn-back{
    padding: 8px calc(20% - 30px);
  }
}
.btn-big:hover, .btn-big:active{
  background: #424242;
}
.btn-big-default{
  background: #d1d1d1;
  border-color: #a7a7a7;
}
.btn-big-default:hover, .btn-big-default:active{
  background: #a7a7a7;
}
.btn-big-success{
  background: #72c380;
  border-color: #518e5b;
}
.btn-big-success:hover, .btn-big-success:active{
  background: #518e5b;
}
.btn-big-danger{
  background: #de0000;
  border-color: #9c0000;
}
.btn-big-danger:hover, .btn-big-danger:active{
  background: #9c0000;
}
.btn-big-progress{
  background: #f79d19;
  border-color: #c2790e;
}
.btn-big-progress:hover, .btn-big-progress:active{
  background: #c2790e;
}
.btn-restart, .btn-start{
  background: #de0000;
  border: none;
  padding: 0 25px;
  padding-top:1px;
  line-height:1.5em;
  text-align: center;
  border-radius: 50px;
  border-bottom: solid 5px #9c0000;
  color: #fff;
  font-size: 1em;
}
.btn-start {
  background: #72c380;
  border-color: #518e5b;
}
.btn-restart:hover, .btn-restart:active{
  background: #9c0000;
}
.btn-start:hover, .btn-start:active{
  background: #518e5b;
}
.btn-start.disabled, .btn-restart.disabled {
  opacity:.6;
  pointer-events:none;
}

.padding-speaker-wrapper{
  padding-top: 15px;
}
.btn-back{
  background: #f79d19;
  border: none;
  padding: 0 25px;
  padding-top:1px;
  line-height:1.5em;
  text-align: center;
  border-radius: 50px;
  border-bottom: solid 5px #c2790e;
  color: #fff;
  font-size: 1em;
}
.btn-back:hover, .btn-back:active{
  background: #c2790e;
}
/* =======================
==== Landing Page
==========================*/
.center
{
      margin-top: 3px;
  text-align: center;
}
.disabled-btn, .disabled-btn:hover
{
    background: rgb(206, 198, 198);
    color: gray;
    border-bottom-color: gray;
}
.landing-page{
  background: url(../images/landing-bg.jpg) center top no-repeat fixed;
  background-size: cover;
}
.landing-tagline{
  color: #fff;
  margin: 5% auto;
}
.landing-tagline h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 2.8em;
  margin-bottom: 5px;
  letter-spacing: 2px;
}
.landing-tagline h1 span{
  font-size: 2.2em;
  letter-spacing: 3px;
}
.landing-tagline p {
  text-transform: uppercase;
  font-size: 3.5em;
  margin-bottom: 15px;
}
.login-wrapper .nav-tabs > li{
  width: 50%;
  text-align: center;
  border-top: none;
}
.login-wrapper{
  background: #fff;
}
.login-wrapper .tab-content{
  padding: 45px 0;
}
.login-wrapper form label{
  display: block;
}
.login-wrapper form input[type='text'], .login-wrapper form input[type='password'], .login-wrapper form input[type='email']{
  border: none;
  width: 100%;
}
.login-wrapper form .form-item{
  padding: 20px 25px 20px;
  border-top: solid 1px #ddd;
}
.login-wrapper form .form-item:first-child{
  margin-top: 20px;
}
.fb-login{
  display: block;
  background: url(../images/fb-btn.png) no-repeat left top #3b5998 ;
  color: #fff;
  text-align: center;
  padding: 24px 0;
}
.fb-login:hover, .fb-login:active{
  background: url(../images/fb-btn.png) no-repeat left top  #283d68;
  color: #fff;
}

@media(max-width:767px){
  .landing-tagline h1 {
    font-size: 1.5em;
  }
}
/* =======================
==== LAYOUT, HEADER, FOOTER
==========================*/
header{
  background: rgb(231,231,231);
  border-bottom: 5px solid #de0000;
  margin-bottom: 10px;
}
.navbar{
  margin-bottom: 0;
}
.navbar a {color:rgb(119,119,119);}
.navbar a.active {color:#de0000;}
.navbar-toggle{
  border-color: #de0000;
}
.navbar-toggle .icon-bar{
  background: #de0000;
}
.navbar .navbar-nav{
}
.logo{
  border-right: 1px solid #999;
  display: block;
  font-size: 1.3em;
  line-height: 100%; /*kaj martin e ova 225%*/
  text-transform: uppercase;
}
@media(max-width:767px) {
  .logo {border:none;}
}
.main-nav {
  line-height: 3em;
}
.main-nav ul {margin:0;}
.main-nav ul li{
  display: inline-block;
}
.main-nav ul li a{
  padding: 5px 15px;
}
.header-profile{
  border-left: solid 1px #999;
  padding-top: 10px;
  padding-bottom: 8px;
  padding-left: 20px; /*kaj martin nema padding-left*/
  line-height: 30px;
  height:50px;
}
.header-profile img{
  border-radius: 50px;
  width: 30px;
  margin-left: 10px;
}
.breadcrumbs .well {background:rgb(242,242,242); padding:5px 10px;}


/* =======================
==== Inner pages
==========================*/
.profile-details{
}
.single-language{
  margin-bottom: 15px;
  overflow:auto;
}
.single-language.completed-language .language-desc small{
  color: #72c380;
}

.single-language .language-desc{
  line-height: 100%;
}
.single-language .language-desc small{
  font-size: .75em;
  color: #de0000;
}
.content-box p{
  margin: 15px 0;
  font-style: italic;
  text-align: center;

}

.content-box h3 span{
  color: #de0000;
  display: block;
  font-weight: 400;
  font-style: italic;
}


@media (max-width: 767px) {
  #UserPhoto .hover {bottom:0;}
}

/* =======================
==== Lesson pages center
==========================*/
.lesson-task-center{
  padding: 0 15px;
}
.lesson-task-center h1{
  margin-bottom:10px;
}
.lesson-task-center p {font-size:.85em;}
.task-image-wrapper-center{
  position:relative;
  overflow:hidden;
  width: 100%;
  margin-bottom: 5px;
  padding-top:66.67%;
  border:5px solid #D0D0D0;
  border-radius: 25px;
}
.task-image-wrapper-center1{
  position:relative;
  overflow:hidden;
  margin-bottom: 5px;
  border:5px solid #D0D0D0;
}
.task-image-center{
  width: 100%;
  min-height:100%;
  position:absolute;
  top:-500px;
  bottom:-500px;
  margin:auto;
}
.task-answer-center{
  border: none;
  border-bottom: solid 1px #d1d1d1;
  width: 100%;
  display: block;
  margin-bottom: 15px;
}
.tasks-wrapper-center{  position:relative;
  overflow:hidden;
  width: 100%;
  margin-bottom: 5px;
  padding-top:66.67%;
  border:5px solid #D0D0D0;
  border-radius: 25px;
}
.tasks-wrapper-center > div{
  position: relative;
}
.correct-task-center .task-image-wrapper-center{
  border-color:#009900;
}
.correct-task-center .task-image-wrapper-center{
  border-color:#009900;
}
.correct-task-center .task-answer-center{
  /*border-color: #72c380;*/
  color: #009900;
}
.incorrect-task-center .task-image-wrapper-center{
  border-color:#de0000;
}
.incorrect-task-center .task-answer-center{
  /*border-color: #de0000;*/
  color: #de0000;
}
.notify-ico-center{
  position: absolute;
  left: 0;
  top: -4px; /*kaj martin ova beshe -40px*/
  right: 0;
  bottom: 0;
  border: none !important;
  margin: auto;
  display:none;
}
.hidden-center {
  display: none;
}
/* =======================
==== Lesson pages
==========================*/
.lesson-task{
  padding: 0 15px;
}
.lesson-task h1{
  margin-bottom:10px;
}
.lesson-task p {font-size:.85em;}
.task-image-wrapper {
  position:relative;
  overflow:hidden;
  width: 100%;
  margin-bottom: 5px;
  padding-top:66.67%;
  border:5px solid #D0D0D0;
  border-radius: 25px;
}
.task-image{
  width: 100%;
  min-height:100%;
  position:absolute;
  top:-500px;
  bottom:-500px;
  margin:auto;
}
.task-answer{
  border: none;
  border-bottom: solid 1px #d1d1d1;
  width: 100%;
  display: block;
  margin-bottom: 15px;
}
.tasks-wrapper{
  margin-top:30px;
}
.tasks-wrapper > div{
  position: relative;
}
.correct-task .task-image-wrapper{
  border-color:#009900;
}
.correct-task .task-answer{
  /*border-color: #72c380;*/
  color: #009900;
}
.incorrect-task .task-image-wrapper{
  border-color:#de0000;
}
.incorrect-task .task-answer{
  /*border-color: #de0000;*/
  color: #de0000;
}
.notify-ico{
  position: absolute;
  left: 0;
  top: -4px; /*kaj martin ova beshe -40px*/
  right: 0;
  bottom: 0;
  border: none !important;
  margin: auto;
  display:none;
}
.hidden {
  display: none;
}


/* ovie se na skatch */
.courses .course-image {width:50px; max-width:40%; margin-right:10px;}

body {/*overflow-y:scroll;*/}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
.inactive {pointer-events:none;}
.relative {position:relative;}
.float-left {float:left;}
.float-right {float:right;}
.overflow {overflow:auto;}
.clear {clear:both;}
.well {border-radius:8px;}
.hspace {padding-left:15px; padding-right:15px;    padding-top: 15px;}
.push-bottom-1 {margin-bottom:10px;}
.push-bottom-2 {margin-bottom:20px;}
.push-right-1 {margin-right:10px;}
.nomargin {margin:0 !important;}
.invisible {opacity:0;}
*[data-toggle] {cursor:pointer;}
*[data-hidden="true"] {display:none;}
a.btn-big, a.btn-big:hover, a.btn-big:active, a.btn-back, a.btn-back:active, a.btn-back:hover {color:#fff; text-decoration:none;}

.color-success{color:#72c380;}
.color-danger{color:#de0000;}
.color-progress{color:#f79d19;}

.xl {font-size:3em;}

.answer {border-bottom:3px solid #dedede; padding-top:10px; padding-bottom:3px;}
.status {display:none; cursor:pointer; text-align: center;}
.status:hover, .status:active {text-decoration:none; color:white;}
.start .status.start {display:inline-block;}
.continue .status.continue {display:inline-block;}
.completed .status.completed {display:inline-block;}
.text-color .status.start, .text-color:hover .status.start, .text-color .status.start:hover {color:#de0000;}
.text-color .status.continue, .text-color:hover .status.continue, .text-color .status.continue:hover {color:#f79d19;}
.text-color .status.completed, .text-color:hover .status.completed, .text-color .status.completed:hover {color:#72c380;}

.play-icon {
  cursor: pointer;
}

.btn-big.completed{
  background: #72c380;
  border-color: #518e5b;
}
.btn-big.completed:hover, .btn-big.completed:active{
  background: #518e5b;
}
.btn-big.continue{
  background: #f79d19;
  border-color: #c2790e;
}
.btn-big.continue:hover, .btn-big.continue:active{
  background: #c2790e;
}

.breadcrumbs {font-size:.85em;}
.breadcrumbs h2 {margin:0; font-size:1em; line-height:1.9em;}
.breadcrumbs img {margin-right:10px; height:20px;}

.description {line-height:1.5em; margin-top:5px;}
.title {color:inherit; margin:-20px; padding:10px 20px; margin-bottom:15px; border-bottom:1px solid #ccc;}
.title .inner {line-height:1.2em; text-align: center;font-size: larger;}
.title .status {font-size:.8em; padding-top:10px; cursor:auto;}

.sectionitem, .sectionitem input {cursor:pointer;}
.sectionitem.focus, .sectionitem.focus input {cursor:auto;}
.sectionitem.focus .task-image-wrapper {border-color:#fff;}
.sectionitem.focus.incorrect-task .task-image-wrapper {border-color:#de0000;}
.sectionitem .input-wrapper {margin-left:35px;}
.sectionitem .input-wrapper.no-icon {margin-left:0;}
.sectionitem .task-answer {background:none; border:none; outline:none; padding-left:5px; overflow:hidden; resize:none; line-height:1.4em;}
.sectionitem.focus .task-answer {background:#fff;}
.sectionitem audio {display:none;}
.input-listen-ch-write{margin-left:5px!important;}
/* Help */
/* Ovie gi smeniv malce za pomoshta na hover da se pokazhuva i bez focus za da bide isto za site moduli;
.sectionitem .help {display:none; position:absolute; top:0; bottom:0; left:0; right:0; cursor:pointer;}
.sectionitem.focus .help {display:block;}
.sectionitem.focus .help {cursor:default;}
.sectionitem .help-icon {opacity:0; position:absolute; top:10px; right:10px; text-align:center; cursor:pointer; transition:all .2s linear;}
.sectionitem.focus:hover .help-icon, .sectionitem.focus.help-active .help-icon {display:block; opacity:1;}
*/
/*.sectionitem .help {display:none; position:absolute; top:0; bottom:0; left:0; right:0; cursor:pointer;}*/
.sectionitem. .help {display:block;}
.sectionitem. .help {cursor:default;}
.sectionitem .help-icon {opacity:0; position:absolute; top:10px; right:10px; text-align:center; cursor:pointer; transition:all .2s linear; z-index: 99}
.sectionitem:hover .help-icon, .sectionitem.focus.help-active .help-icon {display:block; opacity:1;}

.sectionitem .help-icon::before {
  content:'?';
  display:block;
  line-height:22px;
  font-size:1em;
  font-weight:bold;
  width:22px;
  border-radius:50%;
  color:#fff;
  background:rgba(0,0,0,.85);
}
.sectionitem.help-active .help-icon::before {content:'X';}
.sectionitem .help-content {
  opacity:0;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:15px;
  color:#fff;
  font-size:.75em;
  line-height:1.3em;
  background:rgba(0,0,0,.85);
  border-radius: 0 0 20px 20px;
  transition:all .2s linear;
}
.sectionitem.help-active .help-content {display:block; opacity:1;}
/*
.sectionitem.help-on-hover .help {display:block; }
.sectionitem.help-on-hover:hover .help-icon {display:block; opacity:1;}
*/
.audio-icon{
    padding-top: 10px;
    font-size: xx-large;
  }
.sectionitem-action {margin:0 5px;}
.audio-active .play-icon {color:#009900; cursor:inherit; pointer-events:none;}
.microphone {cursor:pointer;}
.mic-active .microphone {color:#de0000;}
.sectionitem .learning-content {margin-bottom:10px; line-height:1.5em; min-height:27px; text-align:start; }
.sectionitem.correct-task .learning-content {color:#009900;}

.speaker-wrapper {cursor:pointer; margin:auto;}
.speaker-wrapper.match-text {position:relative; text-align:center; background:#fff; border:2px solid #d0d0d0; max-width:calc(33.333333% - 30px); border-radius:8px; display:block; padding:10px; padding-left:20px;  margin-top:20px; min-height: 40px;}
.speaker-wrapper.match-text.audio-active {border-color:#009900;}
.speaker-wrapper.match-text .play-icon {position:absolute; left:5px; top:5px; bottom:0; height:16px; margin:auto;}

@media(max-width:767px){

  .sectionitem .help-icon {opacity:1; top:0; bottom:0; right:0; width:25px; background:rgba(0,0,0,.85);}
  .sectionitem .help-icon::before {position:absolute; top:50%; right:0; transform:translateY(-50%); width:25px; border-radius: 0 20px 20px 0; background:none;}
  .sectionitem .help-content {right:25px; top:0; border-radius:20px 0 0 20px;}
  /* martin added the following line; it gives the .match-text max width of 100% for sections listen-match and listen-match-text */

  .speaker-wrapper.match-text {position:relative; text-align:left; background:#fff; border:2px solid #d0d0d0; max-width:100%; border-radius:8px; display:block;padding:10px; padding-left:40px; min-height:1.9em; margin-top:20px;}
  .sectionitem-answer-wrapper {margin:1px 3px ; margin-top: 2px ; overflow: hidden;}
  .sectionitem-answer-wrapper {position:relative; display:block; text-align:left; padding-right:5px; border:2px solid #aaa; border-radius:8px; background:#fff; width:100% !important; vertical-align: top;}
  .sectionitem-answer-wrapper.disabled { background:none; width:50%;}
  .sectionitem-answer span {display:block; position: absolute; top: 50%; transform: translateY(-50%);overflow: hidden; text-overflow:ellipsis;height: 16px;
}


}

.correct-task {pointer-events:none;}
.btn, .btn-big, .btn-restart, .btn-start {transition:all .15s linear;}

.target-div .sectionitem-answer-wrapper {margin:1px 15px;}
.sectionitem-answer-wrapper {position:relative; text-align:left; display:inline-block; padding-right:5px; border:2px solid #aaa; border-radius:8px; background:#fff; width:calc(33.33333% - 30px); /*max-width:calc(33.33333% - 30px);*/  vertical-align: top;}
.sectionitem-answer-wrapper.disabled {background:none;}
.sectionitem-answer-wrapper div {display:block;}
.sectionitem-answer-wrapper .play-icon {height:16px; position:absolute; left:5px; top:5px; bottom:0; margin:auto;}
.sectionitem-answer-wrapper .sectionitem-answer {cursor:pointer;}
.sectionitem-answer {margin-left:40px; line-height:1em; padding:5px 0; min-height:46px; position:relative; overflow: hidden;}
.sectionitem-answer span {display:block; position: absolute; top: 50%; transform: translateY(-50%); overflow: hidden;  text-overflow:ellipsis;
}
.target-div {padding-top:15px; padding-bottom: 15px;}
.learning-content .sectionitem-answer-wrapper {width:100%; max-width:100%;}
.listen-text-match-text .learning-content {min-height:50px;}
.next .learning-content {background: #6E6E6E; border-radius:8px;}
.toggle-visible { display: none;}

.current-audio-text.disabled {opacity:.6;}


#Answer {min-height:5em;}
.floating-word {
  cursor:pointer;
  display:inline-block;
  padding:10px 15px;
  background:#bbb;
  color:white;
  border-radius:4px;
  margin:5px 2px;
  font-size:1.25em;
  position: relative;
}
.correct-task .floating-word {
  background:#009900;
}
.incorrect-task .floating-word {
  background:#de0000;
}
.floating-word.disabled {
  cursor:not-allowed;
  background:#ddd;
}

#UserPhoto {cursor:pointer; position:relative; min-height:30px;}
#UserPhoto img {border-radius:4px; min-width:100%;}
#UserPhoto input {display:none;}
#UserPhoto .hover {
  display:none;
  position:absolute;
  bottom:5px;
  right:5px;
  line-height:1em;
  padding:2px 10px;
  padding-bottom:5px;
  color:#fff;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.15);
  border-radius:4px;
}
#UserPhoto:hover .hover {display:block;}
.remember-button{
  display: flex;
}

.remember-padding{
      padding-right: 10px;
}

@media(max-width: 767px) {

  .back-icon {float:left; padding:12px 15px; line-height:1em; border-right:1px solid #ccc;}
  .back-icon:active {background-color:#ccc;}
  .breadcrumbs .well {padding:0;}
  .breadcrumbs .well.space {padding:15px;}
  .breadcrumbs .visible-xs h2 {line-height:3em; padding:0 12px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}

  .well {padding:15px;}

  .sectionitem input {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }

  #UserPhoto .hover {display:block;}
}


@media(min-width:768px){
  .col-fix {float:none; display:inline-block; vertical-align:top;}
}




/* animateShuffle */
.sectionitems-wrapper, .sectionitem, .learning-content, .task-image-wrapper  {transition : all .5s ease-out;}
.sectionitems-wrapper {position:relative; max-width:100%; margin-left:0;}
.sectionitems-wrapper.collapsed {max-width:0; margin-left:50%;}
.sectionitems-wrapper .sectionitem {transform:rotate(0deg);}
.sectionitems-wrapper.collapsed .sectionitem:nth-child(odd) {transform:rotate(360deg);}
.sectionitems-wrapper.collapsed .sectionitem:nth-child(even) {transform:rotate(-360deg);}
.sectionitems-wrapper.collapsed .task-image-wrapper {border-width:0;}
.sectionitems-wrapper .sectionitem .learning-content {opacity:1;}
.sectionitems-wrapper.collapsed .sectionitem .learning-content {opacity:0;}





/* Reports */
.report-col-title {padding-bottom:15px; border-bottom:1px solid #de0000; margin-bottom:15px;}
#report th .sortable:hover {background-color:#f5f5f5;}
#report.click-row tbody tr {cursor:pointer;}
#report .progress {position:relative; text-align:center; margin:0;}
#report .progress .bar {position:absolute; top:0; bottom:0; left:0; background-color:rgba(247,157,25,.25);}
#report .progress.completed .bar {background-color:rgba(114,195,128,.25);}
#report img {height:16px;}

.disable-7 .days-7,
.disable-30 .days-30,
.disable-36500 .days-36500
{pointer-events:none; color:inherit;}
.global-numbers {padding:15px; background:#fff; border:2px solid #333; border-radius:8px;}
.global-numbers.courses {border-color:#72c380; color:#72c380;}
.global-numbers.users {border-color:#f79d19; color:#f79d19;}
.global-numbers.time {border-color:#de0000; color:#de0000;}

.report .course-image {width:auto;}
.report .course-image img {height:18px;}

.report .charts {padding:30px 0;}



@media(min-width:1200px) {
  .global-numbers.time h2.xl {font-size:2em;}
}

@media(max-width:1199px) {
  .global-numbers.time h2.xl {font-size:3em;}
}

@media(max-width:991px) {
  .global-numbers.time h2.xl {font-size:2em;}
}

@media(max-width:767px) {
  .global-numbers {margin-bottom:15px;}
  .global-numbers.time h2.xl {font-size:3em;}
}


.learning-content-ls { text-align: start!important; padding-left:calc(33.333333% + 20px);}


/*  background: #72c380;
  border-color: #518e5b;

  background: #f79d19;
  border-color: #c2790e;

  background: #de0000;
  border-color: #9c0000;

  */
  .inline-block { display: inline-block;}
  .align-center {text-align: center;}