chamilo-lms2/assets/css/scss/_base.scss

// BASE CSS

html, html a, body {
  -webkit-font-smoothing: antialiased;
  height: auto;
}

a {
  transition: all 0.3s ease-in-out;
}

body {
  background: $page-background;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-secondary;
  letter-spacing: 0.5px;
  line-height: 1.2;

  a {
    font-family: $font-secondary;
  }

  small {
    font-weight: 300;
    color: lighten($default-dark, 5%);
  }
}
h5, h6{
  font-size: .875rem;
}
p {
  font-family: $font-primary;
  line-height: 1.9;
  color: #666666;
}

.lead {
  font-size: 18px;
}

ul {
  margin-bottom: 0;
}

a {
  color: $default-link;

  &:hover,
  &:focus {
    text-decoration: none;
    color: darken($default-link, 20%);
  }

  &:focus {
    outline: none;
  }

  &.text-gray {
    &:hover,
    &:focus,
    &.active {
      color: $default-dark !important;
    }
  }
}

:focus {
  outline: none;
}

hr {
  border-top: 1px solid $border-color;
}
.main{
  .container-fluid{
    padding: 0 10px;
    @include large($breakpoint-xl){
      width: 95%;
    }
    @include portrait($breakpoint-sm, $breakpoint-md){
      width: 100%;
    }
    @include landscape($breakpoint-sm) {
      width: 100%;
    }
  }
}

/*** TABS ***/
.nav-tabs{
  margin-bottom: 10px;
}
.tab-content{
  margin-top: 1rem !important;
  &.card-body{
    padding: 0.5rem;
  }
}

/****** BOOTSTRAP SELECT ******/
.custom-select::-ms-expand {
  display: none;
}
.custom-select{
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}
.bootstrap-select{
  .dropdown-toggle{
    &:after{
      display: none;
    }
  }
}

.select2-container--default{
  .select2-selection--single {
    background-color: #fff;
    border: 1px solid $select-color;
    border-radius: 4px;
    height: 40px !important;
    line-height: 40px;
    .select2-selection__rendered{
      line-height: 40px;
    }
    .select2-selection__arrow{
      height: 40px;
      b{
        border-color: #495057 transparent transparent transparent;
        border-width: 6px 5px 0 5px;
        left: 20%;
      }
    }
  }
}

// ---------------------------------------------------------
// APP
// ---------------------------------------------------------

.app-header{
  .nav-item{
    .nav-link{
      .img-avatar{
        border: 2px solid $grey-600;
      }
    }
  }
}
.app-elevator{
  border: none;
  background: transparent;
  z-index: 999998;
  transform: translateZ(0px);
  position: fixed;
  transition: opacity 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s, top, bottom;
  opacity: 1;
  margin: 10px 20px;
  right: 0px;
  bottom: 50px;
  display: none;
}
// ---------------------------------------------------------
// SECTION INTRODUCTION TOOLS
// ---------------------------------------------------------

.section-intro{
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  .toolbar{
    text-align: right;
  }
  .help{
    text-align: center;
  }
}

// ---------------------------------------------------------
// TABLES
// ---------------------------------------------------------
.card-action{
  .page-select{
    width: 30%;
    @include large($breakpoint-xl){
      width: 30%;
    }
    @include portrait($breakpoint-sm, $breakpoint-md){
      width: 100%;
    }
    @include landscape($breakpoint-sm) {
      width: 100%;
    }
  }
  .page-number{
    display: inline-block;
    text-align: center;
    width: 100%;
    @include large($breakpoint-xl){
      display: inline-block;
      text-align: center;
    }
    @include portrait($breakpoint-sm, $breakpoint-md){
      display: inline-block;
      text-align: center;
    }
    @include landscape($breakpoint-sm) {
      display: none;
    }
  }
  .page-nav{
    text-align: right;
    @include large($breakpoint-xl){
      text-align: right;
    }
    @include portrait($breakpoint-sm, $breakpoint-md){
      text-align: center;
    }
    @include landscape($breakpoint-sm) {
      text-align: center;
    }
  }
  .page-action {
    text-align: left;
    @include large($breakpoint-xl){
      text-align: left;
    }
    @include portrait($breakpoint-sm, $breakpoint-md){
      text-align: center;
    }
    @include landscape($breakpoint-sm) {
      text-align: center;
    }
  }
}
.table-hover{
  tbody{
    tr:hover{
      background-color: #f9f9f9;
    }
  }
}
.table{
  .row_selected {
    background-color: $row-table-select;
  }
  th, td{
    padding: 12px 8px;
  }
  .checkbox{
    margin-top: -1px;
    margin-bottom: 0;
    padding: 0;
    width: 15px;
    position: relative;
    display: block;
    label{
      cursor: pointer;
      padding-left: 0;
      color: rgba(0,0,0, 0.5);
      min-height: 20px;
      margin-bottom: 0;
    }
    input[type=checkbox] {
      opacity: 0;
      position: absolute;
      margin: 0;
      z-index: -1;
      width: 0;
      height: 0;
      overflow: hidden;
      left: 0;
      pointer-events: none;
      &:focus + .checkbox-material .check:after {
        opacity: 0.2;
      }
      &:checked {
        & + .checkbox-material .check {
          background: #2196F3;
        }
        & + .checkbox-material .check:before {
          color: #FFFFFF;
          box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
          animation: checkbox-on 0.3s forwards;
        }
      }
    }
    .checkbox-material {
      vertical-align: middle;
      position: relative;
      top: 3px;
      padding-right: 5px;
      &:before{
        display: block;
        position: absolute;
        left: 0;
        content: "";
        background-color: rgba(0, 0, 0, 0.84);
        height: 20px;
        width: 20px;
        border-radius: 100%;
        z-index: 1;
        opacity: 0;
        margin: 0;
        transform: scale3d(2.3, 2.3, 1);
        animation: rippleOn 500ms;
      }
      .check{
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid rgba(0,0,0, .54);
        overflow: hidden;
        z-index: 1;
        border-radius: 3px;
        &:before{
          position: absolute;
          content: "";
          transform: rotate(45deg);
          display: block;
          margin-top: -3px;
          margin-left: 7px;
          width: 0;
          height: 0;
          background: red;
          box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
          animation: checkbox-off 0.3s forwards;
        }
      }
    }
  }
  .avatar-user{
    position: relative;
    display: block;
    width: 100%;
    .is-admin{
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .is-active{
      position: absolute;
      left: 10px;
      bottom: -10px;
    }
    .avatar{
      border: 1px solid #cdcdcd;
    }
  }
  .cut-email{
    width:150px;
    height:20px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    display: inline-block;
    &:hover{
      width: 100%;
      white-space: initial;
      overflow: visible;
      cursor: pointer;
      display: inline-block;
    }
  }
  .toolbar-table{
    display: inline-block;
    width: 200px;
    @include large($breakpoint-xl){
      width: 100%;
    }
    @include portrait($breakpoint-sm, $breakpoint-md){
      width: 200px;
    }
    @include landscape($breakpoint-sm) {
      width: 200px;
    }
    img{
      border: 1px solid #cdcdcd;
      background-color: #ffffff;
      padding: 4px;
      border-radius: 5px;
      &:hover{
       background-color:#cdcdcd;
      }
    }
    .blackboard_hide{
      display: none;
    }
  }
  .th-header{
    a{
      color: $grey-900;
    }
  }
}

// ---------------------------------------------------------
// FULL CONTAINER
// ---------------------------------------------------------

.full-container {
  left: $offscreen-size;
  min-height: calc(100vh - #{$header-height});
  position: absolute;
  right: 0;
  top: $header-height;
  transition: all 0.2s ease;

  @include between($breakpoint-md, $breakpoint-xl) {
    left: 0;
    padding-left: $collapsed-size;
  }

  @include to($breakpoint-md) {
    left: 0;
  }
}

// ---------------------------------------------------------
// COLLAPSE STATE
// ---------------------------------------------------------

.is-collapsed {
  .page-container {
    padding-left: $collapsed-size;

    @include to($breakpoint-md) {
      padding-left: 0;
    }

    @include between($breakpoint-md, $breakpoint-xl) {
      padding-left: $offscreen-size;
    }
  }

  .full-container {
    left: $collapsed-size;

    @include to($breakpoint-md) {
      left: 0;
    }

    @include between($breakpoint-md, $breakpoint-xl) {
      left: $offscreen-size;
      padding-left: 0;
    }
  }
}

// ---------------------------------------------------------
// @Text Align
// ---------------------------------------------------------

.ta-c { text-align: center !important; }
.ta-l { text-align: left !important; }
.ta-r { text-align: right !important; }

// ---------------------------------------------------------
// @Font Size
// ---------------------------------------------------------

.fsz-xs   { font-size: 0.75rem !important; }
.fsz-sm   { font-size: 0.87rem !important; }
.fsz-def  { font-size: 1rem !important; }
.fsz-md   { font-size: 1.15rem !important; }
.fsz-lg   { font-size: 1.4rem !important; }
.fsz-xl   { font-size: 1.7rem !important; }

// ---------------------------------------------------------
// @Font Weight
// ---------------------------------------------------------

.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

// ---------------------------------------------------------
// @Line Height
// ---------------------------------------------------------

.lh-0    { line-height: 0 !important; }
.lh-1    { line-height: 1 !important; }
.lh-3\/2 { line-height: 1.5 !important; }

.box-header{
  color: $grey-900;
  display: block;
  padding: 0;
  position: relative;
  .box-title{
    font-weight: 500;
    color: #404852;
    margin-bottom: 22px;
    font-size: 14px;
    text-transform: capitalize;
  }
}
.carousel-item img{
  max-width: 100%;
  height: auto;
}
//card cropper
.card-cropper{
  padding-top: 1em;
  padding-bottom: 1em;
  .cropCanvas{
    padding-bottom: 1em;
  }
}

.card{
  border: 1px solid $card-border-color;
  border-radius: 0.25rem;
  margin-bottom: 10px;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.025);
  &.card-description{
    border: none;
    box-shadow: none;
  }
  .card-header{
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    color: inherit;
    background-color: #f1f8ff;
    border-bottom: 1px solid #e5e9f2;
    .card-title{
      margin-bottom: 0;
      font-weight: normal;
      color: #316dab;
    }
  }
}
/*** GRID CATALOG ***/
.list-course{
  display: grid;
  grid-gap: 1rem;
  grid-row-gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  @include portrait($breakpoint-sm, $breakpoint-md){
    grid-template-columns: repeat(3, 1fr);
  }
  @include landscape($breakpoint-sm) {
    grid-template-columns: repeat(1, 1fr);
  }
}
.tool-view{
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 2rem;
  .controls{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
/* CATEGORY CLASSIC */
.category-list{
  display: grid;
  grid-gap: 1rem;
  grid-row-gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  @include portrait($breakpoint-sm, $breakpoint-md){
    grid-template-columns: repeat(2, 1fr);
  }
  @include landscape($breakpoint-sm) {
    grid-template-columns: repeat(1, 1fr);
  }
  .card-category{
    border: 1px solid #dee2e6;
    border-bottom-width: 5px;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
    align-items: center;
    cursor: pointer;
    position: relative;
    .card-body{
      padding: 0;
      .image-container{
        position: relative;
        width: 100%;
        height: 100%;
        color: #ffffff;
        overflow: hidden;
        margin: auto;
        .thumbnail{
          &:before{
            content: "";
            background-color: #000;
            z-index: 1;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: .35;
          }
        }
        &:hover img{
          transform: scale(1.2);
        }
        img{
          position: absolute;
          top: -50%;
          left: 0;
          bottom: 25%;
          right: 0;
          transition: all 1s ease;
          width: 100%;
          height: auto;
        }
        .image-content{
          position: relative;
          z-index: 1;
          text-align: center;
          .title{
            font-size: 18px;
          }
          .courses{
            font-size: 12px;
          }
          a{
            color: $default-white;
            display: block;
            width: 100%;
            padding-top: 5%;
            padding-bottom: 5%;
          }
        }
      }
      @include portrait($breakpoint-sm, $breakpoint-md){
        padding: 0;
      }
      .title{
        font-size: 16px;
        a{
          color: $grey-800;
        }
      }
    }
  }
}

/** GRID SESSION **/

.grid-session{
  display: grid;
  grid-gap: 1rem;
  grid-row-gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  @include portrait($breakpoint-sm, $breakpoint-md){
    grid-template-columns: repeat(2, 1fr);
  }
  @include landscape($breakpoint-sm) {
    grid-template-columns: repeat(1, 1fr);
  }
  .item-session{
    flex: auto;
    break-inside: avoid;
    display: inline-table;
    .card-session{
      .card-body{
        padding: 0;
        .card-inside{
          padding: 0.8rem 0.8rem 0.8rem 0;
        }
      }
      .card-title{
        font-size: 14px;
      }
    }
    .card-list{
      margin-top: 0;
    }
  }
}

.tab-content{
  border: none;
  margin-top: 2rem;
  .tab-pane{
    padding: 0;
  }
}
/** LIST SETTINGS **/
.list-settings{
  display: grid;
  grid-gap: 1rem;
  grid-row-gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  @include large($breakpoint-xl){
    grid-template-columns: repeat(4, 1fr);
  }
  @include portrait($breakpoint-sm, $breakpoint-md){
    grid-template-columns: repeat(2, 1fr);
  }
  @include landscape($breakpoint-sm) {
    grid-template-columns: repeat(1, 1fr);
  }
  .item-setting{
    display: -webkit-flex;
    display: flex;
    .card{
      display: inline-block;
      width: 100%;
      .card-description{
        color: $grey-700;
      }
    }
    .list-group{
      .list-group-item{
        padding: 0.45rem 0.75rem;
      }
    }
  }
}

/* COURSE PREVIEW */

.card-view{
  .category {
    position: absolute;
    border-radius: 10px;
    background-color: #FFCC00;
    color: #000000;
    font-weight: bold;
    padding: 0.2rem 0.8rem;
    top: -0.8rem;
    left: 0.5rem;
    font-size: 12px;
    z-index: 1;
  }
  &.card-course-classic{
    width: 425px;
  }
  &.card-course{
    width: 328px;
  }
  margin: auto;
  .doc-preview{
    .preview-lg{
      width: 326px;
      height: 185px;
      background-color: $grey-500;
    }
    .preview-sm{
      width: 160px;
      height: 90px;
      background-color: $grey-500;
    }
    .img-preview{
      float: left;
      margin-right: .5rem;
      overflow: hidden;
      text-align: center;
    }
  }
  .card-body{
    padding: 0;
    .name{
      font-size: 12px;
      color: $grey-700;
    }
    .title{
      color: $default-link;
      font-size: 16px;
    }
    .card-inside{
      padding: 0.8rem 0.8rem 0.8rem 0;
    }
  }
}

/* COURSE CLASSIC */

.grid-course{
  display: grid;
  grid-gap: 1rem;
  grid-row-gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  @include large($breakpoint-xl){
    grid-template-columns: repeat(3, 1fr);
  }
  @include portrait($breakpoint-sm, $breakpoint-md){
    grid-template-columns: repeat(2, 1fr);
  }
  @include landscape($breakpoint-sm) {
    grid-template-columns: repeat(1, 1fr);
  }
  .card-course-classic{
    border: 1px solid #dee2e6;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
    align-items: center;
    &.card-special{
      background-color: #f6fcff;
    }
    .category{
      position: absolute;
      border-radius: 10px;
      background-color: $default-yellow;
      color: $default-black;
      font-weight: bold;
      padding: 0.2rem 0.8rem;
      top: -0.8rem;
      left: 0.5rem;
      font-size: 12px;
    }
    .card-body{
      padding: 0;
      .card-inside{
        padding: 0.8rem 0.8rem 0.8rem 0;
      }
      @include portrait($breakpoint-sm, $breakpoint-md){
        padding: 0.8rem;
      }
      .title{
        font-size: 16px;
      }
    }
  }
}

.checkbox_delete_picture{
  padding-top: 1em;
}

/* COURSE GRID */
.card-session{
  .category{
    position: absolute;
    border-radius: 10px;
    background-color: $default-yellow;
    color: $default-black;
    font-weight: bold;
    padding: 0.2rem 0.8rem;
    top: -0.8rem;
    left: 0.5rem;
    font-size: 12px;
  }
  .card-body{
    .card-date{
      font-size: 12px;
      color: $grey-600;
    }
    .card-details{
      font-size: 12px;
      color: $grey-600;
    }
    .card-list{
      .list-group{
        .list-group-item{
          padding: 0.75rem;
        }
      }
    }
  }
}
.card-course{
  transform: perspective(1px) translateZ(0);
  transition-property: box-shadow;
  transition-duration: 0.3s;
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.15);
  background-color: $default-white;
  &:hover,
  &:focus{
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.20);
  }
  &.card-category{
    .card-subtitle{
      font-size: 12px;
    }
  }
  .card-image{
    position: relative;
    .card-tools{
      position: absolute;
      bottom: 0;
      left: 0;
      .btn-sm{
        border-radius: 0;
      }
    }
  }
  .card-ranking{
    font-size: 12px;
  }
  .category{
    position: absolute;
    border-radius: 10px;
    background-color: $default-yellow;
    color: $default-black;
    font-weight: bold;
    padding: 0.2rem 0.8rem;
    top: -0.8rem;
    left: 0.5rem;
    font-size: 12px;
  }
  .card-body{
    padding: 0.5rem 0.25rem;
    .card-title{
      margin-bottom: 0.5rem;
      .title{
        font-size: 16px;
        font-weight: bold;
        line-height: 22px;
      }
    }
    .card-author{
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .list-name{
        font-size: 12px;
        color: $grey-700;
        cursor: pointer;
      }
      .name{
        font-size: 12px;
        white-space: nowrap;
        color: $grey-700;
        display: inline-block;
        &:after{
          content: ", ";
        }
        &:last-child{
          &:after{
            content: " ";
          }
        }
      }
    }
  }
}
/***** RANKING ****/

.rating-stars ul {
  list-style-type:none;
  padding:0;
  -moz-user-select:none;
  -webkit-user-select:none;
  li{
    &.star{
      display:inline-block;
      i{
        &.fa{
          font-size:1.25em;
          color:#c3c3c3;
        }
      }
      &:hover{
        i{
          &.fa{
            color:#FFCC36;
          }
        }
      }
      &.selected{
        i{
          &.fa{
            color:#FF912C;
          }
        }
      }
    }
  }
}


/******************* ACCORDION B4 *****************/
.accordion-b4 {
  .card {
    border: 0 none;
    box-shadow: none;
  }
  .card-header {
    padding: 0;
    background: #fff;
    border: none;
  }
  .card-title a {
    display: block;
    position: relative;
    font-size: 18px;
    margin-bottom: 15px;
    padding: 10px 5px;
    border: none;
    border-bottom: 1px solid #cdcdcd;
    transition: all 0.10s linear 0s;
    cursor: pointer;
    &.collapsed {
      color: #808080;
    }
    i {
      color: $menu-background;
      position: absolute;
      top: 15px;
      left: 20px;
      font-size: 20px;
    }
    &:before {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 36px;
    }
    &.collapsed {
      &:before {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 36px;
        border: 0 none;
      }
      &:hover {
        color: #6a6060;
      }
    }
    &:after {
      content: "\f106";
      font-family: "Font Awesome 5 Free", serif;
      font-weight: 900;
      color: $menu-secondary;
      font-size: 20px;
      line-height: 20px;
      position: absolute;
      top: 14px;
      right: 10px;
    }
    &.collapsed:after {
      font-family: "Font Awesome 5 Free", serif;
      font-weight: 900;
      font-size: 20px;
      line-height: 20px;
      position: absolute;
      top: 18px;
      right: 10px;
      content: "\f107";
      color: #808080;
    }
  }
}

/*** TOOLS START COURSE ***/
.start-course{
  text-align: center;
  .image-course{
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
  .start-info{
    padding-top: 1rem;
    margin-top: 1rem;
  }
}
.grid-start{
  display: grid;
  grid-gap: 1rem;
  grid-row-gap: 16px;
  grid-template-columns: repeat(5, 1fr);
  @include large($breakpoint-xl){
    grid-template-columns: repeat(5, 1fr);
  }
  @include portrait($breakpoint-sm, $breakpoint-md){
    grid-template-columns: repeat(3, 1fr);
  }
  @include landscape($breakpoint-sm) {
    grid-template-columns: repeat(2, 1fr);
  }
  .items-tools{
    display: flex;
    justify-content: center;
    align-items: center;
    .item{
      display: inline-block;
      width: 100%;
      text-align: center;
      padding-top: 1rem;
      padding-bottom: 1rem;
      margin-top: 1rem;
    }
  }
}

/*** TOOLS COURSE  ***/

.grid-tools{
  display: grid;
  grid-gap: 1rem;
  grid-row-gap: 16px;
  grid-template-columns: repeat(6, 1fr);
  @include large($breakpoint-xl){
    grid-template-columns: repeat(7, 1fr);
  }
  @include portrait($breakpoint-sm, $breakpoint-md){
    grid-template-columns: repeat(3, 1fr);
  }
  @include landscape($breakpoint-sm) {
    grid-template-columns: repeat(2, 1fr);
  }
  .items-tools{
    display: flex;
    justify-content: center;
    align-items: center;
    .tools{
      width: 140px;
      height: 160px;
      display: block;
      float: left;
      text-align: center;
      cursor: pointer;
      position: relative;
      background-color: transparent;
      &.cursor-none{
        cursor: inherit;
      }
      .big_icon{
        position: absolute;
        width: 84px;
        height: 84px;
        top: 40%;
        margin-top: -50px;
        left: 44%;
        margin-left: -32px;
        text-align: center;
        border: 2px solid rgba(216, 216, 216, 0.37);
        box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.16);
        border-radius: 10px;
        &:hover{
          box-shadow: 0 0.28rem 0.6rem rgba(0,0,0,.2);
        }
        img{
          transition: transform .2s ease-in;
          padding-top: 10px;
          &:hover{
            transform: scale(1.15);
          }
        }
        a{
          display: block;
          overflow: hidden;
        }
      }
      .content{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        .name{
          padding-top: 5px;
          padding-bottom: 5px;
        }
      }
    }
  }
}

/****** SOCIAL ******/
.profile {
  .profile-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    text-align: left;
    overflow: hidden;
    &.profile-bg-blur {
      img {
        filter: blur(10px) brightness(.85);
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .btn-toolbar{
    margin-left: 17px;
    a{
      margin-right: 5px;
    }
  }
}
.user-panel{
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 500;
  z-index: 3;
  &.user-panel-column{
    flex-direction: column;
    text-align: center;
    .user-panel-image{
      margin-right: 0;
      margin-bottom: 8px;
    }
    .user-panel-info{
      line-height: 23px;
      p{
        margin: 0;
      }
      small{
        font-size: 14px;
        display: block;
        font-weight: 400;
        line-height: 14px;
      }
    }
  }
}
.groups-messages{
  .date{
    font-size: 12px;
  }
}

/****** CALENDAR ******/

.fc-day-grid-event{
  border: none;
  padding: 6px 12px 6px 22px;
  font-weight: 500;
  color: #ffffff !important;
  cursor: pointer;
  border-radius: 4px;
}

/****** ACTIONS ******/

.actions {
  background: #ffffff;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  .btn-export{
    padding: 0;
  }
  img {
    padding: 3px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    background: #ffffff;
    &:hover {
      background: #ededed;
    }
  }
  a {
    text-decoration: none;
    margin-right: 10px;
    &:hover {
      text-decoration: none;
    }
  }
  .form-group{
    margin-bottom: 0;
  }
  .btn-toolbar {
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0 0 0 5px;
    background: #ffffff;
    img {
      background: none;
      border: none;
    }
    &:hover {
      background: #ededed;
    }
  }
  .actions-pagination {
    float: right;
    margin-top: 2px;
    * {
      display: inline-block;
      float: none;
      margin: 0;
      padding: 0;
    }
    img {
      margin: 6px;
      padding: 0;
    }
  }
}
/****** EXERCISE ******/

.card-exercise{
  margin-bottom: 20px;
  .list-exercise{
    list-style: none;
    margin: 0;
    padding: 0;
    li{
      display: inline-block;
    }
  }
}
.list-exercise{
  .list-group{
    .list-group-item{
      .toolbar{
        margin-top: 10px;
        a{
          img{
            border: 1px solid #cdcdcd;
            background-color: #ffffff;
            padding: 2px;
            border-radius: 4px;
          }
        }
      }
      .score-list{
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 12px;
      }
      .description{
        width:100%;
      }
    }
  }
}
.main-question{
  margin-bottom: 20px;
  margin-top: 20px;
  .title{
    margin-bottom: 10px;
    margin-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #cdcdcd;
  }
  .description{
    margin-bottom: 10px;
  }
  .options{
    padding: 0.8em;
    label{
      display: block;
      margin-bottom: 18px;
      font-weight: bold;
      &.radio, &.checkbox{
        min-height: 18px;
        margin-left: 25px;
      }
      input[type="radio"]{
        margin-left: -25px;
        &.checkradios{
          border-radius: 50px;
        }
      }
      input[type="checkbox"]{
        margin-left: -25px;
        &.checkradios{
          border-radius: 5px;
        }
      }
      .checkradios
      {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: inline-block;
        position: relative;
        background-color: #ffffff;
        color: #666;
        top: 10px;
        height: 30px;
        width: 30px;
        border: 1px solid #cdcdcd;
        cursor: pointer;
        margin-right: 7px;
        outline: none;
        &:checked::before
        {
          position: absolute;
          font: 13px/1 'Open Sans', sans-serif;
          left: 11px;
          top: 7px;
          content: '\02143';
          transform: rotate(40deg);
        }
        &:hover
        {
          background-color: #f7f7f7;
        }
        &:checked
        {
          background-color: #f1f1f1;
        }
      }

    }
    p{
      line-height: 1em;
      display: contents;
    }
  }
  //Matching Draggable answer
  .drag_question{
    min-height: 4em;
    width: 100%;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
    ._jsPlumb_endpoint {
      z-index: 50;
    }
    .window {
      border: 1px solid #dddddd;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      cursor: pointer;
      min-height: 65px;
      padding: 25px;
      margin-left: 5px;
      margin-right: 5px;

      &.window_left_question {
        padding: 10px 25px 10px 10px;
        text-align: right;
        background: #f2f9fe; /* Old browsers */
        background: -moz-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f9fe), color-stop(100%, #d6f0fd)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* IE10+ */
        background: linear-gradient(to bottom, #f2f9fe 0%, #d6f0fd 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f9fe', endColorstr='#d6f0fd', GradientType=0); /* IE6-9 */

      }
      &.window_right_question {
        padding: 10px 10px 10px 25px;
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* IE10+ */
        background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0); /* IE6-9 */
      }
    }
    .indent{
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 14px;
    }
    .round{
      border-radius: 0.8em;
      color: #666666;
      display: inline-block;
      font-weight: bold;
      line-height: 1.6em;
      margin-right: 5px;
      text-align: center;
      width: 1.6em;
    }
    .number{
      background: #ffffff;
      border: 1px solid #cdcdcd;
    }
    .letter{
      background: #ffffff;
      border: 1px solid #cdcdcd;
    }
    .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
      width: 100px;
    }
    .hidden{
      display: none;
    }

  }
  .fill-blank{
    .form-control{
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
}
/*** PLUGINS ***/

/*** REPORTS ***/
.item-report {
  text-align: center;
  .item-report-number {
    font-size: 35px;
    font-weight: bold;
    color: #666666;
  }
}
.card-box{
  .icon-big{
    font-size: 2.5em;
    min-height: 64px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    margin-left: 25px;
    i{
      line-height: 66px;
      color: #fff;
    }
  }
  .icon-student {
    background: #f1c435;
  }
  .icon-studentboss {
    background: #4b73eb;
  }
  .icon-teachers {
    background: #50bbc1;
  }
  .icon-humanresources {
    background: #68ceeb;
  }
  .numbers{
    text-align: left;
    h2 {
      font-size: 3.2em;
      margin: 0;
      padding: 0;
      color: #666666;
    }
  }
}

.easy-donut{
  .easypiechart {
    position: relative;
    text-align: center;
    width: 120px;
    height: 120px;
    margin: 20px auto 10px auto;
    .percent {
      display: block;
      position: absolute;
      font-size: 26px;
      top: 38px;
      width: 120px;
    }
  }
  .easypiechart-link {
    padding-bottom: 5px;
    padding-top: 5px;
    display: inline-block;
    width: 100%;
    text-align: center;
  }
}

#easypiechart-blue {
  .percent {
    color: #30a5ff;
  }
}

#easypiechart-teal {
  .percent {
    color: #1ebfae;
  }
}

#easypiechart-orange {
  .percent {
    color: #ffb53e;
  }
}

#easypiechart-red{
  .percent {
    color: #ef4040;
  }
}

/*** CROP-CROPPER IMAGE ***/
.card-cropper{
  img{
    width: 300px;
  }
}

/****** GALERY ******/

.gallery{
  .img-gallery {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 5px;
  }
  .photo {
    display: block;
    padding-bottom: 100%;
    overflow: hidden;
  }
  .frame {
    background-color: #eeeeee;
    display: block;
    width: 100%;
  }
  .canvas-one {
    margin-bottom: 30px;
  }
  .canvas-two {
    margin-right: 30px;
    flex-shrink: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    display: block;
    position: relative;
  }
}

/****** EXERCISE RESULTS ******/

.ribbon {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 5px;
  .rib {
    height: 40px;
    width: 180px;
    display: block;
    line-height: 1.3;
    left: -2px;
    top: 0;
    color: #cfcfcf;
    margin: 0;
    padding: 2px 10px;
    position: relative;
    background: #333;
    border-radius: 4px 0 0 0;
    h3 {
      color: white;
      font-size: 16px;
      float: left;
      line-height: 16px;
      padding-top: 5px;
      margin: 0;
    }
  }
  &.rib-error, &.ribbon-total-error {
    background: #ff3019;
    border-top: none;
    border-bottom: none;
    float: left;
  }
  &.rib-warning {
    background: orange;
    border-top: none;
    border-bottom: none;
    float: left;
  }
  &.rib-gray {
    background: #cccccc;
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    float: left;
  }
  &.rib-success, &.ribbon-total-success {
    background: #86B404;
    border-top: none;
    border-bottom: none;
    float: left;
  }
}
/**** LP COLLAPSE CATEGORY ****/
.learnpath-item{
  &:hover{
    .lp-actions{
      opacity: 1;
    }
  }
}
.progress{
  border: 1px solid #d5d5d5;
}
.lp-accordion{
  .learning-lessons{
    margin-bottom: 2rem;
  }
  .card{
    margin-bottom: 0;
  }
  .btn-link{
    display: inline-block;
    width: 100%;
    padding: 0;
    text-align: left;
    font-weight: 500;
  }
  .float-actions{
    position: absolute;
    right: 17px;
    top: 12px;
  }
  .list-group{
    .list-group-item{
      padding: 0.75rem 0;
      &:first-child{
        border: none;
      }
      .title{
        font-size: 14px;
        font-weight: normal;
      }
      .extra {
        padding-left: 26px;
        font-size: 12px;
        color: #868686;
      }
      .list-allowed{
        margin-bottom: 5px;
        font-size: 12px;
        list-style: none;
        padding: 0;
      }
      .progress{
        margin-bottom: 10px;
      }
    }
  }
  .lp-actions{
    opacity: 0;
    margin-top: 10px;
    transition: opacity 1s;
    a{
      img{
        border: 1px solid #cdcdcd;
        background-color: #ffffff;
        padding: 2px;
        border-radius: 4px;
        &:hover{
          background-color: #cdcdcd;
        }
      }
    }
  }
}
/***** PROMOTIONS *****/

.promotions {
  border-bottom: 1px solid #DDD;
  margin-top: 30px;
  .promo {
    background-color: #D1D1D1;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    h4 {
      font-size: 18px;
      font-weight: bold;
      a {
        color: #666;
      }
    }
  }
  .courses {
    background-color: #FAFAFA;
    vertical-align: middle;
    border-right: 1px solid #DDD;
  }
  .title {
    font-size: 16px;
    background-color: #DFDFDF;
  }
  .cycles {
    background-color: #F3F3F3;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    border-right: 1px solid #DDD;
    h4 {
      font-size: 14px;
      font-weight: bold;
    }
    a {
      color: #66666C;
      &:hover {
        color: initial;
      }
    }
  }
}
.career p {
  padding-left: 10px;
}
/****** WHOISONLINE ******/

#whoisonline {
  .items-user {
    text-align: center;
    padding: 15px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ECF0F1;
    margin-bottom: 20px;
    min-height: 250px;
  }
  .items-user-name {
    font-size: 12px;
    padding-top: 10px;
    line-height: 15px;
  }
}

/****** FORM REGISTER ******/

.terms-conditions {
  padding: 15px 10px;
  background-color: #DDD;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.help-registration {
  background-color: #ececec;
  box-shadow: none;
}

#registration {
  input[name='status'] {
    position: relative !important;
    margin-left: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
  }
  input.register-profile[value='5']:after {
    position: relative;
    top: 0;
    display: block;
    content: ' ';
    background: url('#{$svg-path}/coursestudent_na.svg');
    width: 132px;
    height: 132px;
    border-radius: 0;
    -webkit-transition: color 1s, -webkit-box-shadow 1s;
    transition: box-shadow 1s, color 1s, -webkit-box-shadow 1s;
    border: 4px solid #FFFFFF;
  }
  input.register-profile[value='5']:checked:after {
    -webkit-box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    background: url(#{$svg-path}/coursestudent.svg);
    border-color: #E4CE80;
    transition: all 250ms ease;
    will-change: transition;
    top: 5px;
  }
  input.register-profile[value='1']:after {
    position: relative;
    top: 0;
    display: block;
    content: ' ';
    background: url(#{$svg-path}/coursemanager_na.svg);
    width: 132px;
    height: 132px;
    border-radius: 0;
    -webkit-transition: color 1s, -webkit-box-shadow 1s;
    transition: box-shadow 1s, color 1s, -webkit-box-shadow 1s;
    border: 4px solid #FFFFFF;
  }
  input.register-profile[value='1']:checked:after {
    -webkit-box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    background: url(#{$svg-path}/coursemanager.svg);
    border-color: #76CDE4;
    transition: all 250ms ease;
    will-change: transition;
    top: 5px;
  }
  .progress {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 10px;
  }
  #status-group{
    .radio {
      display: inline-block;
      position: relative;
      label{
        p{
          text-align: center;
          padding-top: 5px;
          padding-bottom: 5px;
        }
      }
    }
  }
}

#custom-icons{
  .items-tools {
    padding: 10px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    min-height: 185px;
    margin-bottom: 20px;
    text-align: center;
  }
  .name-tools {
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .page-header {
    margin: 20px 0 20px;
    border-bottom: 1px solid #CCCCCC;
  }
}

.help-course {
  background-color: #EEEEEE;
  color: #666;
  border: 1px dashed #B0B0B0;
  border-radius: 5px;
  padding: 1em;
  margin-bottom: 1em;
  text-align: center;
}

.my-progress{
  .profile-user {
    padding: 10px;
  }
  .username {
    font-size: 20px;
    text-align: center;
  }
  .progress {
    margin-bottom: 0;
  }
  .star-progress{
    .fa-star {
      color: #e4c200;
    }
    .fa-star.in {
      color: #c2c2c2;
    }
  }
  .list-course {
    padding: 0;
    margin: 0;
    li {
      display: block;
      padding-top: 5px;
      padding-bottom: 5px;
      a {
        color: #666;
        &.active {
          color: #00829C;
        }
      }
    }
  }
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}

/****** BLOG ******/

.blog {
  padding: 0;
  .title-post {
    font-size: 30px;
    margin-bottom: 10px;
    letter-spacing: 0;
    margin-top: 5px;
  }
  .media{
    .avatar {
      width: 70px;
    }
  }
  .comments-post {
    margin-top: 50px;
    margin-bottom: 20px;
    .title {
      padding-bottom: 20px;
    }
    .media {
      border-top: 1px solid #eaeaea;
      padding-bottom: 10px;
      padding-top: 10px;
      margin-bottom: 10px;
      overflow: visible;
      .media-body {
        overflow: visible;
      }
    }
  }
  .content-post {
    margin-top: 15px;
    margin-bottom: 15px;
    p {
      font-size: 15px;
    }
  }
  .info-post {
    display: block;
    border-bottom: #eaeaea 1px dotted;
    padding-bottom: 10px;
    span {
      margin-right: 20px;
      color: #888;
    }
  }
  .article-post {
    margin-bottom: 20px;
    margin-top: 10px;
  }
  article{
    header{
      padding-top: 0;
    }
  }
}

/****** SOCIAL MEDIA ******/

.share-social-media {
  background-color: #FFF;
  margin-bottom: 5px;
  padding: 10px 5px 5px 5px;
  font-size: 12px;
  .sharing-buttons {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
    li {
      display: inline-block;
      padding-right: 5px;
      padding-left: 5px;
    }
  }
}

.btn-facebook{
  &.btn-inverse {
    color: #3B5998;
    background-color: transparent;
    border-color: rgba(59, 89, 152, 0.3);
    &:hover{
      color: #FFF;
      background-color: #3B5998;
      border-color: #3B5998;
    }
  }
}
.btn-twitter{
  &.btn-inverse {
    color: #00ACED;
    background-color: transparent;
    border-color: rgba(0, 172, 237, 0.3);
    &:hover {
      color: #FFF;
      background-color: #00ACED;
      border-color: #00ACED;
    }
  }
}
.btn-linkedin{
  &.btn-inverse {
    color: #0077b5;
    background-color: transparent;
    border-color: rgba(7, 119, 181, 0.3);
    &:hover{
      color: #FFF;
      background-color: #0077b5;
      border-color: #0077b5;
    }
  }
}
/****** GLOSSARY *****/
.glossary{
  .title{
    font-size: 1.65rem;
    text-align: center;
  }
  .item-glossary{
    border-bottom: 1px solid #dddddd;
    h5{
      margin-bottom: 0;
      font-weight: bold;
      color: #5b6be8;
      font-size: 1.15rem;
    }
  }
}

/****** FORUM CSS ******/

.forum{
  .card{
    margin-bottom: 0;
    .card-header{
      padding: 0.25rem;
      .btn{
        padding: 0;
        margin: 0;
      }
      .float-actions{
        position: absolute;
        right: 17px;
        top: 10px;
      }
    }
  }
  .list-forum{
    .card{
      border: none;
      box-shadow: none;
      &:hover{
        .toolbar{
          opacity: 1;
          transition: opacity 1s;
        }
      }
      .toolbar{
        opacity: 0;
        margin-left: 5px;
        img{
          border: 1px solid #cdcdcd;
          background-color: #ffffff;
          padding: 2px;
          border-radius: 4px;
        }

      }
    }
    .d-flex{
      border-bottom: 1px solid #dddddd;
    }
    .avatar{
      img{
        border: 1px solid #cdcdcd;
      }
    }
    .forum-threads{
      font-size: 12px;
      list-style: none;
      margin: 0;
      padding: 0;
      color: #666666;
      li{
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
      }
    }
  }
}


/****** ABOUT COURSE AND SESSION ******/
.about{
  .share-social-media {
    padding: 10px 0 0 0;
    .sharing-buttons {
      list-style: none;
      margin: 0 0 10px 0;
      padding: 0;
      li{
        padding-left: 0;
      }
    }
  }
  .topics{
    .title-info {
      margin: 30px 0 20px 0;
      border-bottom: 1px solid #ddd;
      padding-bottom: 15px;
    }
  }
  .course-tags{
    width: 100%;
    margin-top: 10px;
    li{
      span{
        position: relative;
        display: inline-block;
        padding: 0 3px;
        height: 20px;
        line-height: 20px;
        font-weight: 600 !important;
        background: #D7E3E6 !important;
        border-radius: 0 3px 3px 0 !important;
        -webkit-transition: none 0.15s ease-in-out;
        -o-transition: none 0.15s ease-in-out;
        transition: none 0.15s ease-in-out;
        &:before{
          display: inline-block;
          content: "";
          top: 0;
          left: -8px;
          position: absolute;
          width: 0;
          height: 0;
          border-right: 8px solid #D7E3E6;
          border-bottom: 10px solid transparent;
          border-top: 10px solid transparent;
        }
        &:after{
          z-index: 1;
          content: "";
          top: 8px;
          left: -3px;
          position: absolute;
          width: 4px;
          height: 4px;
          background-color: #F2F2F2;
          border-radius: 10px;
        }
      }
    }
  }
  .course-short{
    padding-top: 5px;
    padding-bottom: 5px;
    ul{
      display: inline-block;
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
      li{
        display: inline-block;
        &.author{
          font-weight: bold;
          margin-right: 5px;
        }
      }
    }
  }
  .coach-information{
    width: 100%;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
    .coach-header{
      display: flex;
      align-items: center;
      flex-flow: row;
      .coach-avatar{
        width: 180px;
        margin-right: 20px;
      }
      .coach-title{
        flex-flow: column;
        align-items: flex-start;
        display: flex;
      }
    }
  }
}

/****** Sequence ******/

#parents {
  text-align: center;
  .parent {
    display: inline-block;
    width: 125px;
    padding: 5px;
    &.parent-deleted{
      .sequence-course {
        text-decoration: line-through;
      }
    }
    .big-icon {
      background-color: #ECF0F1;
      padding: 10px;
      text-align: center;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      position: relative;
      .sequence-course {
        font-size: 12px;
      }
      .sequence-id {
        border-radius: 50%;
        background-color: #E74C3C;
        width: 20%;
        color: #ffffff;
        position: absolute;
        right: 5px;
        top: 5px;
      }
      .sequence-deleted {
        font-size: 12px;
      }
    }
  }
  .sequence-plus-icon {
    color: #CCCCCC;
    padding: 0 10px;
  }
}

.border-sequence {
  background: url("#{$img-path}line.png") repeat-x 0 35px;
}

.arrow-sequence {
  height: 68px;
  background: url("#{$img-path}icons/48/sequence-arrow.png") no-repeat center 15px;
  margin-top: 10px;
  padding-top: 10px;
}


#resource {
  text-align: center;
  .parent {
    display: inline-block;
    padding: 5px;
    width: 15%;
    .big-icon {
      background-color: #eeffaa;
      padding: 10px;
      text-align: center;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      position: relative;
      .sequence-course {
        font-size: 12px;
      }
      .sequence-id {
        border-radius: 50%;
        background-color: #E74C3C;
        width: 20%;
        color: #ffffff;
        position: absolute;
        right: 5px;
        top: 5px;
      }
      .sequence-deleted {
        font-size: 12px;
      }
    }
  }
}

#children {
  text-align: center;
  .parent {
    display: inline-block;
    padding: 5px;
    width: 15%;
    .big-icon {
      background-color: #feffd6;
      padding: 10px;
      text-align: center;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      position: relative;
      .sequence-course {
        font-size: 12px;
      }
      .sequence-id {
        border-radius: 50%;
        background-color: #E74C3C;
        width: 20%;
        color: #ffffff;
        position: absolute;
        right: 5px;
        top: 5px;
      }
      .sequence-deleted {
        font-size: 12px;
      }
    }
  }
}
/****** OPEN BADGES ******/

.openbadges-introduction {
  line-height: 30px;
  margin-bottom: 30px;
  .title {
    text-align: center;
    margin-bottom: 20px;
    color: #456176;
    font-size: 35px;
  }
  .title {
    text-align: center;
    margin-bottom: 20px;
    color: #456176;
    font-size: 35px;
  }
  .sub-title {
    color: #456176;
    text-align: center;
    font-size: 20px;
  }
  .badges-tablet {
    padding-top: 15px;
  }
  .block-content {
    padding-top: 30px;
    padding-bottom: 30px;
    p {
      padding-left: 5%;
      font-size: 14px;
    }
    &.block-title{
      background-color: #e2eceb;
      border: 1px solid #456176;
      padding: 5px 10px;
      font-size: 16px;
      color: #456176;
    }
  }
  .block-edit {
    padding-top: 15px;
    padding-bottom: 30px;
    &.block-title{
      background-color: #e2eceb;
      border: 1px solid #456176;
      padding: 5px 10px;
      font-size: 16px;
      color: #456176;
    }
  }
}

.list-badges {
  padding: 0;
  margin: 0;
  list-style: none;
  .thumbnail {
    border-color: #bce8f1;
    display: inline-block;
    margin-right: 15px;
    padding: 0;
    vertical-align: top;
    width: 95px;
    a{
      img{
        margin-bottom: 4px;
        margin-top: 4px;
      }
      .caption{
        background: #D9EDF7;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        &:hover{
          width: auto;
          white-space: initial;
          overflow: visible;
          cursor: pointer;
        }
      }
    }
  }
}
/****** ISSUES ******/
#issues {
  width: 800px;
  height: 350px;
  overflow: hidden;
  li{
    width: 800px;
    height: 350px;
    list-style: none;
    float: left;
    &.selected{
      img{
        transform: scale(1.1, 1.1);
      }
    }
    img{
      float: left;
      margin: 10px 30px 10px 50px;
      background: transparent;
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); /* IE 6 & 7 */
      zoom: 1;
      transition: all 2s ease-in-out;
      transform: scale(0.7, 0.7);
    }
    h1{
      color: #ffcc00;
      font-size: 48px;
      margin: 20px 0;
      text-shadow: #000 1px 1px 2px;
    }
    p{
      font-size: 16px;
      margin-right: 70px;
      font-weight: normal;
      line-height: 22px;
    }
    }
  #grad_left,
  #grad_right {
    width: 100px;
    height: 350px;
    position: absolute;
    top: 0;
    #next {
      position: absolute;
      font-size: 70px;
      top: 170px;
      width: 22px;
      height: 38px;
      text-indent: -9999px;
      overflow: hidden;
      right: 0;
      background: url('#{$img-path}timeline/next.png') no-repeat 0 0;
      &:hover{
        background-position: 0 -76px;
      }
    }
    #prev {
      left: 0;
      position: absolute;
      font-size: 70px;
      top: 170px;
      width: 22px;
      height: 38px;
      text-indent: -9999px;
      overflow: hidden;
      background: url('#{$img-path}timeline/prev.png') no-repeat 0 0;
      &:hover{
        background-position: 0 -76px;
      }
    }
  }
}

#my_timeline {
  width: 900px;
  height: 350px;
  overflow: hidden;
  margin: 20px auto;
  position: relative;
  background: url('#{$img-path}timeline/dot.gif') left 45px repeat-x;
  #dates {
    width: 800px;
    height: 60px;
    overflow: hidden;
    li {
      list-style: none;
      float: left;
      width: 120px;
      height: 50px;
      font-size: 16px;
      text-align: center;
      background: url('#{$img-path}timeline/biggerdot.png') center bottom no-repeat;
    }
    a {
      line-height: 38px;
      padding-bottom: 10px;
      color: #cecece;
    }
    .selected {
      font-size: 20px;
      color: #666666;
    }
  }
}

/****** QUESTION ******/

.question_options {
  .droppable {
    padding: 5px;
    text-align: center;
    background-color: #ECF0F1;
    border: dotted #dddddd 2px;
    border-radius: 4px;
    color: #666666;
    display: inline-block;
    width: 85%;
    margin-bottom: 0;
  }
  .droppable-item {
    background-color: #84bd00;
    color: #FFF;
    padding: 3px 0 3px 5px;
    .number{
      font-size: 16px;
      font-weight: bold;
      display: inline-block;
    }
  }
  .droppable{
    .gallery{
      .exercise-draggable-answer-option{
        margin-bottom: 0;
        background: #feffff;
        background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
        background: -webkit-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
        background: linear-gradient(to bottom, #feffff 0%, #d2ebf9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff', endColorstr='#d2ebf9', GradientType=0);
        border: 1px solid #DDDDDD;
        padding: 5px;
        border-radius: 5px;
        font-size: 12px;
        cursor: pointer;
      }
      .btn-secondary{
        background: #D9534F;
        color: #ffffff;
        border-color: #D43F3A;
        &:hover{
          background: #C9302C;
          color: #ffffff;
          border-color: #AC2925;
        }
      }
    }
  }
  .fill_blanks {
    padding: 20px 30px;
    box-sizing: border-box;
    img {
      max-width: 100%;
      display: block;
      height: auto !important;
    }
  }
  .exercise-draggable-answer {
    float: left;
    margin-bottom: 20px;
    min-height: 2em;
    min-width: 100%;
    &.list-inline{
      float: left;
    }
    li{
      cursor: move;
      margin: 0 20px 20px 0;
      padding: 5px 20px;
      text-align: center;
    }
    .touch-items {
      background: #ffffff;
      background-image: -webkit-linear-gradient(top, #ffffff, #cfcfcf);
      background-image: -moz-linear-gradient(top, #ffffff, #cfcfcf);
      background-image: -ms-linear-gradient(top, #ffffff, #cfcfcf);
      background-image: -o-linear-gradient(top, #ffffff, #cfcfcf);
      background-image: linear-gradient(to bottom, #ffffff, #cfcfcf);
      border-radius: 4px;
      color: #2e2e2e;
      font-size: 13px;
      padding: 5px 10px;
      border: solid #b0b0b0 1px;
      text-decoration: none;
      z-index: 100;
      &:hover{
        background: #ffffff;
        background-image: -webkit-linear-gradient(top, #ffffff, #b8d3e3);
        background-image: -moz-linear-gradient(top, #ffffff, #b8d3e3);
        background-image: -ms-linear-gradient(top, #ffffff, #b8d3e3);
        background-image: -o-linear-gradient(top, #ffffff, #b8d3e3);
        background-image: linear-gradient(to bottom, #ffffff, #b8d3e3);
        text-decoration: none;
      }
    }
  }
}

.card-quota {
  margin: 15px;
  font-weight: bold;
  color: #006633;
  text-align: center;
}
/****** LINKS ******/
.link-page{
  .list-group-item{
    .link-title{
      display: inline-block;
      width: 100%;
      .toolbar{
        float: right;
        opacity: 0;
      }
    }
    &:hover{
      .link-title{
        .toolbar{
          opacity: 1;
        }
      }
    }
  }
  .link-accordion{
    .card{
      margin-bottom: 0;
      .card-header{
        padding: .5rem;
        .title-card{
          padding-top: 5px;
          display: inline-block;
          padding-left: 10px;
        }
      }
    }
  }
}
/****** SKILLS ******/
.skill-options{
  .legend {
    border: 1px dashed #cccccc;
    padding: 1em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 1em;
    margin-top: 1em;
    background-color: #FFFFFF;
  }
  .skill-home {
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .btn-block {
    box-sizing: border-box;
    display: block;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  .accordion-inner {
    padding: 9px 15px;
    background-color: #FFFFFF;
  }
  .skill-winner {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      float: left;
      margin-right: 1em;
      padding-bottom: 1em;
      a {
        background: url("#{$img-path}icons/16/winner.png") no-repeat;
        padding-left: 1.5em;
        padding-bottom: 1em;
      }
    }
  }
}
.search-skill ul.holder li.bit-input input {
  width: 100%;
}

.skill-legend-basic {
  color: #3A87AD;
}

.skill-legend-add {
  color: #F89406;
}

.skill-legend-search {
  color: #B94A48;
}

.skill-legend-badges {
  color: #31A354;
}
.skill_partition {
  cursor: pointer;
  stroke: #000000;
  stroke-width: 0.5px;
}

.skill_root {
  box-shadow: 2px 2px 19px #aaa;
  border-radius: 6px;
  background-color: #ccc;
  border: 0.1em dotted #D4E06B;
  color: black;
  font-size: 0.9em;
  height: 4em;
  opacity: 0.8;
  padding-top: 0.9em;
  text-align: center;
  width: 120px;
  z-index: 40;
  position: relative;
}

.skill_child {
  box-shadow: 2px 2px 19px #aaa;
  border-radius: 6px;
  background-color: white;
  border: 0.1em dotted #D4E06B;
  color: black;
  font-size: 0.9em;
  height: 4em;
  opacity: 0.8;
  padding-top: 0.9em;
  text-align: center;
  width: 120px;
  z-index: 40;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
  position: relative;
}

.skills_chart{
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    padding-top: 20px;
    position: relative;
    li {
      float: left;
      text-align: center;
      list-style-type: none;
      padding: 20px 5px 0 5px;
      position: relative;
      &:before, &:after{
        content: '';
        position: absolute;
        top: 0;
        right: 50%;
        border-top: 1px solid #f80;
        width: 50%;
        height: 20px;
      }
      &:after{
        right: auto;
        left: 50%;
        border-left: 1px solid #f80;
      }
    }
  }
}

.skills_chart li:only-child::before, .skills_chart li:only-child::after {
  display: none;
}

.skills_chart li:only-child {
  padding-top: 0;
}

.skills_chart li:first-child::before, .skills_chart li:last-child::after {
  border: 0 none;
}

.skills_chart li:last-child::before {
  border-right: 1px solid #f80;
  border-radius: 0 5px 0 0;
}

.skills_chart li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

.skills_chart ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #f80;
  width: 0;
  height: 20px;
}

.skills_chart li a {
  border: 1px solid #f80;
  padding: 1em 0.75em;
  text-decoration: none;
  color: #333;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 0.85em;
  display: inline-block;
  border-radius: 5px;
  transition: all 500ms;
}

.skills_chart li a:hover {
  border: 1px solid #fff;
  color: #ddd;
  background-color: rgba(255, 128, 0, 0.7);
  display: inline-block;
}

.skills_chart > ul > li > a {
  font-size: 1em;
  font-weight: bold;
}

.skills_chart > ul > li > ul > li > a {
  width: 8em;
}


.survey-block {
  width: 100%;
  margin: auto;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.start-survey {
  margin-top: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
}

.survey-reports .list-group{
 .list-group-item{
   img {
     float: left;
     margin-right: 5px;
   }
   h4{
     font-weight: bold;
     font-size: 14px;
   }
 }
}

.survey-block{
  .title-survey-block {
    padding-top: 10px;
    padding-bottom: 10px;
    h3 {
      display: inline-block;
      margin-left: 10px;
    }
  }
 .table{
   .center {
     text-align: center;
   }
 }
}


/****** LIST TEMPLATE DOCUMENT ******/

#frmModel{
  display: block;
  height: 750px;
  ul {
    list-style: none;
    margin: 0;
    padding: 0 .5em 0 1em;
    li{
      text-align: center;
      padding-top: 1em;
      padding-bottom: 1em;
      .title, .description{
        padding-top: .5em;
        padding-bottom: .5em;
        width: auto;
        font-size: 12px;
        line-height: 16px;
      }
      &:hover{
        background-color: #FAFAFA;
        border: 1px solid #F2F2F2;
      }
    }
  }
}

/******  SHORT NAVIGATION MENU ******/

#toolnavbox {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 10px;
  left: 0;
  list-style: none;
  z-index: 9999;
  li{
    width: 100%;
    a{
      display: block;
      font-size: 12px;
      height: 35px;
      margin-left: -160px;
      .btn {
        text-align: right !important;
      }
      .icons{
        width: 70px;
      }
      .icons-text {
        width: 200px;
      }
      .text {
        width: 180px;
      }
    }
    .tool-img {
      margin-left: 5px;
    }
  }
}

#toolnavbox-two {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 10px;
  left: 0;
  list-style: none;
  z-index: 9999;
  li {
    width: 50px;
    a {
      display: block;
      margin-left: -2px;
      font-size: 12px;
      width: 50px;
      .btn {
        text-align: left !important;
      }
    }
    .tool-img {
      float: left;
      margin-right: 5px;
    }
  }
}

/****** COURSE TOOLBAR ******/
#toolshortcuts_horizontal {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 10px;
  text-align: center;
  .items-icon {
    padding: 0;
    display: inline-block;
    img {
      padding: 5px;
      border-radius: 5px;
      box-shadow: 0 1px 3px #C8C8C8;
      border: 1px solid #e6e6e6;
    }
  }
}

/****** SIMPLE INNER SCROLLBAR ******/

.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div {
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-inner > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-x {
  bottom: 2px;
  height: 8px;
  left: 0;
  width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-y {
  height: 100%;
  right: 2px;
  top: 0;
  width: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
  overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  opacity: 0.4;
}

.scrollbar-inner > .scroll-element .scroll-element_track {
  background-color: #e0e0e0;
}

.scrollbar-inner > .scroll-element .scroll-bar {
  background-color: #c2c2c2;
}

.scrollbar-inner > .scroll-element:hover .scroll-bar {
  background-color: #919191;
}

.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {
  background-color: #919191;
}

/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -12px;
}

.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -12px;
}

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -12px;
}

.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -12px;
}

/****** SCROLL WRAPPER ******/

.scroll-wrapper {
  overflow: hidden !important;
  padding: 0;
  position: relative;
  height: 300px;
  .scroll-content {
    border: none !important;
    box-sizing: content-box;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto;
  }
  .scroll-element{
    div {
      box-sizing: content-box;
    }
  }
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
  display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
  cursor: default;
}

.scroll-textarea {
  border: 1px solid #cccccc;
  border-top-color: #999999;
}

.scroll-textarea > .scroll-content {
  overflow: hidden !important;
}

.scroll-textarea > .scroll-content > textarea {
  border: none !important;
  box-sizing: border-box;
  height: 100% !important;
  margin: 0;
  max-height: none !important;
  max-width: none !important;
  overflow: scroll !important;
  outline: none;
  padding: 2px;
  position: relative !important;
  top: 0;
  width: 100% !important;
}

.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
  height: 0;
  width: 0;
}
/****************************/

.date-attendance {
  color: #666;
  text-align: center;
  font-size: 12px;
  width: 150px;
  margin: auto;
  .blue {
    color: #2E75A3;
  }
  .grey {
    color: #666;
  }
}
#student-list-work {
  background-color: #ffffff;
  position: absolute;
  top: 0;
  right: 10px;
  border: 1px solid #ccc;
  width: auto;
  z-index: 3;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  #student-list-work {
    background-color: #ffffff;
    position: absolute;
    top: 0;
    right: 10px;
    border: 1px solid #ccc;
    width: auto;
    z-index: 3;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }
  #student-list-work .toolbar {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
  }

}
/****** RATING STAR ******/

.star-rating {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 125px;
  height: 25px;
  position: relative;
  overflow: hidden;
  background: url('#{$img-path}alt_star.png') top left repeat-x;
  li{
    padding: 0;
    margin: 0;
    width: 25px;
    height: 25px;
    float: left;
    a{
      display: block;
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-decoration: none;
      text-indent: -9000px;
      z-index: 20;
      position: absolute;
      padding: 0;
      overflow: hidden;
      &:hover{
        background: url('#{$img-path}alt_star.png') left bottom;
        z-index: 2;
        left: 0;
        border: none;
      }
      .one-star {
        left: 0;
        &:hover {
          width: 25px;
        }
      }
      .two-stars {
        left: 25px;
        &:hover {
          width: 50px;
        }
      }
      .three-stars {
        left: 50px;
        &:hover {
          width: 75px;
        }
      }
      .four-stars {
        left: 75px;
        &:hover {
          width: 100px;
        }
      }
      .five-stars {
        left: 100px;
        &:hover {
          width: 125px;
        }
      }
    }
    .current-rating {
      background: url('#{$img-path}alt_star.png') left center;
      position: absolute;
      height: 25px;
      display: block;
      text-indent: -9000px;
      z-index: 1;
    }
  }
}

.work_correction_file_upload{
  margin-bottom: 5px;
  margin-top: 5px;
  .button-load {
    position: relative;
    font-size: 10px;
    font-weight: normal;
    width: 100%;
    background: url("#{$img-path}icons/64/file_upload.png") no-repeat center 20px;
    padding-top: 70px;
  }
  .file_upload_small {
    border: 1px solid #AFDDE9;
    background: #D4E6F0;
    width: 100%;
    border-radius: 5px;
    padding-bottom: 5px;
  }
}

table.certaintyTable {
  margin : auto;
  border: 1px solid #7FC5FF;
  th {
    text-align: center;
    border-bottom: 1px solid #7FC5FF;
    background-color: #c9e0ff;
  }
  td {
    padding : 10px;
    .borderRight {
      border-right: 1px dotted #7FC5FF;
    }
    .firstLine {
      vertical-align: top;
      text-align: center;
    }
  }
  th{
    .globalChart {
      font-size : 18pt;
      line-height : 120%;
      padding : 20px;
    }
  }
}
/******  ******/
.count_down {
  font-size: 20px;
  font-weight: bold;
  color: #2E75A3;
  padding: 5px;
  text-align: center;
  margin-bottom: 10px;
  background: url(#{$img-path}clock-exercise.png) no-repeat center center #FFF;
  border: 1px solid #DDD;
  border-radius: 5px;
}

.time_warning_two {
  background: url(#{$img-path}clock-exercise.png) no-repeat center center #FFD700;
  border: 1px solid #FFCC00;
  color: #C00;
}

.time_warning_one {
  background: url(#{$img-path}clock-exercise.png) no-repeat center center #FB3A35;
  border: 1px solid #FB3A35;
  color: #FFF;
}

/****** ******/

.label_tag {
  padding: 1px 3px 2px;
  margin: 2px 3px 2px 0;
  background-color: #bfbfbf;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 3px;
  text-align: center;
  width: 155px;
  &.personal_event {
    background: #3366CC;
  }
  &.admin_event {
    background: red;
  }
  &.course_event {
    background: #458B00;
  }
  .group_event {
    background: #A0522D;
  }
  .session_event {
    background: #00496D;
  }
  .important {
    background-color: #c43c35;
  }
  .warning {
    background-color: #f89406;
  }
  .success {
    background-color: #46a546;
  }
  .skill {
    background-color: #46a546;
  }
  .course {
    background-color: #62cffc;
  }
}
/****** THEMATIC ******/
#thematic{
  .title-topics {
    font-size: 15px;
    color: #00829C;
    font-weight: bold;
  }
  .thematic-cont {
    padding: 15px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
  }
  .thematic-avatar {
    text-align: center;
    margin-bottom: 20px;
  }
  .img-fluid {
    display: inline-block;
  }
  .current {
    background-color: #EEEEEE;
    border: 1px dashed #B0B0B0;
    border-radius: 5px;
  }
  .toolbar-actions {
    height: 30px;
    display: block;
  }
  .arrow {
    background: url("#{$img-path}icons/22/arrow-up-collapse.png") no-repeat 99% center;
    &.collapsed{
      background: url("#{$img-path}icons/22/arrow-down-collapse.png") no-repeat 99% center;
    }
  }
  .thematic-advance {
    margin-top: 10px;
    display: inline-block;
  }
}
/****** MEDIA PLAYER ******/
.preview{
  .mejs__container {
    background: #aaa;
  }
  .mejs__controls {
    padding: 0 0 0 0;
    background: none;
  }
  .mejs__button{
    button {
      margin: 16px 6px;
    }
  }
}
/****** OPEN BADGES ******/

.create-openbadges {
  text-align: center;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.openbadges-img, .openbadges-view {
  text-align: center;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #b2b2b2;
}
/****** DROPZONE ******/
#dropzone {
  position: relative;
  overflow: hidden;
  direction: ltr;
  cursor: pointer;
  text-align: center;
  color: #333;
  font-weight: bold;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  line-height: 50px;
  background-color: #D4E6F0;
  border: 2px dashed #bbbbbb;
  font-size: 120%;
  margin-bottom: 0;
  &:hover{
    background: lawngreen;
  }
}
/****** SOCIAL PROFILE ******/

.social-post{
  .mediaPost {
    padding-top: 10px;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
  .sub-mediapost {
    padding-left: 20px;
    margin-left: 20px;
    .user-image{
      vertical-align: top;
      .avatar-thumb{
        border: 1px solid #dddddd;
        margin-bottom: 5px;
        margin-right: 5px;
      }
      img {
        width: 50px;
        height: 50px;
        max-width: 50px;
        max-height: 50px;
      }
    }
  }
  .top-mediapost{
    .user-image{
      vertical-align: top;
      .avatar-thumb{
        border: 1px solid #dddddd;
        margin-bottom: 5px;
        margin-right: 5px;
      }
      img {
        width: 50px;
        height: 50px;
        max-width: 50px;
        max-height: 50px;
      }
    }
  }
}

/****** MESSAGE ******/
.message-topic {
  padding: 15px;
  border-radius: 5px;
  display: inline-block;
  border: 1px solid #ECF0F1;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  width: 100%;
}
.message-post {
  border: 1px solid #ECF0F1;
  margin-bottom: 15px;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.message-select-box {
  float: left;
  display: inline;
  position: absolute;
  margin-top: 23px;
  margin-left: 20px;
}
.message-view {
  float: right;
  background: #F5E38E;
  border: 2px solid #EBCA4F;
  padding: 10px;
  width: 100px;
  position: relative;
  margin-top: 115px;
  margin-right: -100px;
}

/****** VIDEO CHAT ******/

#chat-video-panel .thumbnail video {
  background: #FFF url("#{$img-path}icons/128/camera-webrtc.png") no-repeat center center;
  display: block;
  min-width: 100%;
  width: 100%;
}

#listFriends{
  .list-group-item {
    border: none;
    padding: 0;
    font-size: 12px;
  }
  .help{
    font-size: 12px;
  }
  a{
    display: block;
    text-overflow: ellipsis;
    &.username{
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 120px;
    }
  }
  &:hover{
    background: none;
  }
}

.webcamclip_bg {
  width: 340px;
  height: 260px;
  border: 10px solid #00677C;
  border-radius: 25px;
}

.wami-container {
  height: 144px;
  position: relative;
}

/****** MAIN QUESTION ******/

.exercise_overview_options {
  background-color: #F9F9F9;
  border-radius: 10px;
  padding: 15px 0 15px 0;
  .left_option {
    float: left;
    margin: 12px 5px;
    width: 33%;
  }
  .center_option {
    float: left;
    margin: 15px 5px;
    text-align: center;
    width: 33%;
  }
  .right_option {
    float: right;
    margin: 12px 5px;
    text-align: right;
    font-size: 14px;
  }
}

.ribbon{
  .error {
    color: red;
  }
  .success {
    color: green;
  }
  .rib{
    &:before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      bottom: -11px;
      z-index: -10;
      border: 5px solid;
      border-color: #242424 transparent transparent transparent;
      left: 0;
    }
    &:after{
      right: 0;
    }
  }
  .rib-error{
    &:before {
      border-color: #cf0404 transparent transparent transparent;
    }
  }
  .rib-success{
    &:before {
      border-color: #4B610B transparent transparent transparent;
    }
  }
  .rib-gray{
    &:before {
      border-color: #ccc transparent transparent transparent;
    }
  }
  .rib-warning{
    &:before {
      border-color: darkorange transparent transparent transparent;
    }
  }
}

.form-separator {
  font-weight: bold;
  border-bottom: 2px solid #CCC;
  padding-bottom: 12px;
  color: #666;
  margin-bottom: 20px;
  margin-top: 20px;
}

.feedback-green {
  color: #33a10b;
  font-weight: bold;
}

.feedback-red {
  color: #ff3019;
  text-decoration: line-through;
  font-weight: bold;
}

.correct-answer {
  background-color: #D7E3E6;
  color: #000000;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
}
#toolshortcuts_horizontal {
  padding: 0 20px 2px 0;
  clear: right;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  width: 98%;
}

#toolshortcuts_vertical {
  padding: 0 0 2px 0;
  clear: right;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  width: 40px;
}

/* Only for Firefox */
@-moz-document url-prefix() {
  select#question_type_hidden option {
    padding: 10px 0px 10px 40px;
    background-repeat: no-repeat;
  }
  select#question_type_hidden option[value="1"] {
    background-image: url(#{$img-path}icons/32/mcua.png);
  }
  select#question_type_hidden option[value="2"] {
    background-image: url(#{$img-path}icons/32/mcma.png);
  }
  select#question_type_hidden option[value="3"] {
    background-image: url(#{$img-path}icons/32/fill_in_blanks.png);
  }
  select#question_type_hidden option[value="4"] {
    background-image: url(#{$img-path}icons/32/matching.png);
  }
  select#question_type_hidden option[value="5"] {
    background-image: url(#{$img-path}icons/32/open_answer.png);
  }
  select#question_type_hidden option[value="6"] {
    background-image: url(#{$img-path}icons/32/hotspot.png);
  }
  select#question_type_hidden option[value="7"] {
    background-image: url(#{$img-path}icons/32/mcma.png);
  }
  select#question_type_hidden option[value="8"] {
    background-image: url(#{$img-path}icons/32/mcma.png);
  }
  select#question_type_hidden option[value="9"] {
    background-image: url(#{$img-path}icons/32/mcmac.png);
  }
  select#question_type_hidden option[value="10"] {
    background-image: url(#{$img-path}icons/32/mcuao.png);
  }
  select#question_type_hidden option[value="11"] {
    background-image: url(#{$img-path}icons/32/mcmao.png);
  }
  select#question_type_hidden option[value="12"] {
    background-image: url(#{$img-path}icons/32/mcmaco.png);
  }
  select#question_type_hidden option[value="13"] {
    background-image: url(#{$img-path}icons/32/audio_question.png);
  }
  select#question_type_hidden option[value="14"] {
    background-image: url(#{$img-path}icons/32/mcmagl.png);
  }
  select#question_type_hidden option[value="16"] {
    background-image: url(#{$img-path}icons/32/calculated_answer.png);
  }
}
/****** EXERCISE MATFDC ******/

.certaint-score {
  height : 20px;
  margin-bottom: 10px;
  padding : 0;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
.chart-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 30px;
  width: 100%;
  margin: 0 auto;
}
.chart-title{
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #b3b3b3;
  text-transform: uppercase;
  background: #ecf0f1;
  padding-top: 10px;
}
.certaint-list-two, .certaint-list{
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 100%;
}
.certaint-list-two li{
  display: inline-block;
  margin-right: 10px;
  width: 40%;
}
.certaint-list li{
  width: 50%;
  margin: auto;
}
.certaint-list-two li:last-child{
  margin-right: 0;
}

.certaint-text{
  text-align: center;
  padding: 10px 5px;
}
.certaintyVerticalLine {
  float: left;
  border-left : 1px solid black;
  font-size: 0;
}

.certaintyQuizClearer {
  clear : both;
  font-size: 0;
  height:0
}
.chart-legend{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.chart-legend li{
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.square_color4{
  color: #1e9c55;
}
.square_color3{
  color: #b1e183;
}
.square_color2{
  color: #f6ba2a;
}
.square_color1{
  color: #f79b88;
}
.square_color0{
  color: #ed4040;
}
.levelbar_1 {
  background-color: #1e9c55;
  border: 1px solid #1e9c55;
}

.levelbar_2 {
  background-color: #b1e183;
  border: 1px solid #b1e183;
}

.levelbar_3 {
  background-color: #f6ba2a;
  border: 1px solid #f6ba2a;
}

.levelbar_4 {
  background-color: #f79b88;
  border: 1px solid #f79b88;
}

.levelbar_5 {
  background-color: #ed4040;
  border: 1px solid #ed4040;
}
.forum_low_description {
  color: #737780;
  font-style: italic;
  font-weight: normal;
}

.forum_attach_comment {
  color: #737780;
  font-style: italic;
  font-weight: normal;
}

.forum_message_left {
  width: 150px;
  vertical-align: top;
  border-right: 1px solid #aaa;
  background-color: #F7F7F7;
}

.forum_message_left_2_be_approved {
  width: 150px;
  vertical-align: top;
  border-right: 1px solid #aaa;
  background-color: #F7F7F7;
  color: #999;
}

.forum_message_post_title {
  font-weight: bold;
  background-color: #F7F7F7;
  height: 20px;
  font-size: 20px;
}

.forum_message_post_title_2_be_approved {
  color: #999;
  font-weight: bold;
  background-color: #F7F7F7;
  height: 20px;
}

.forum_message_post_text {
  margin-bottom: 10px;
  vertical-align: top;
  background: white;
}

.forum_message_post_text_2_be_approved {
  color: #999;
  margin-bottom: 10px;
  vertical-align: top;
}

// Convert classic 1.11.x styles into a v2 format.

.data_table {
  @extend .table;
  @extend .table-bordered;
  @extend .table-striped;
}
.pull-right {
  @extend .float-right;
}

.btn-default {
  @extend .btn-secondary;
}

.img-responsive {
  @extend .img-fluid;
}