@import "../colors.less";
@import "../variables.less";
@import '../mixins.less';
@import "../elements.less";


a.list-group-item-success{
	color: @text-color;
	background: @base-color;
}

a.list-group-item-success:hover, a.list-group-item-success:focus{
	color: @text-color;
	background: darken(@base-color, 5%);
}

.card{
	padding-left: 0px;
	padding-right: 0px;
}

.panel-success{
	border-color: @base-color;
}

.card > .panel-body{
	padding: 15px 0px;
	p{
	text-align: left
	}
}


.card-container{
	h4 > strong{
		font-size: 20px;
		.weight-scale(6);
	}
}

.learning-cards{
  .card-container{
	 width: auto;
  }
  .well{
    background-color: #fff;
  }
  video.multimedia-option{
    max-width: 300px;
    height: auto;
  }

}

.multimedia-option-image{
	max-width: 80px;
	margin-bottom: 30px;
}

.topic-overlay{
  left: 16%;
  border-radius: 2px;
  width: 170px;
  height: 170px;
  .lock-overlay(@base-color, 42px, 40%);
}

.set-overlay{
  z-index: 200;
  border-radius: 2px;
  width: 100%;
  min-height: 72px;

  .lock-overlay(@base-color, 42px, 0%);
  .icon-container i{
    position: absolute !important;
    left: 48% !important;
    top: 25%;
  }
}

.learn-sets-container{
  h4{
    color: @learn-color;
  }
  hr{
    border-color: @learn-color;
  }
}

.practice-sets-container{
  h4{
    color: @practice-color;
  }
  hr{
    border-color: @practice-color;
  }
}

a.path-link{
  color: @base-color;
  margin-top: 10px;
  position: absolute;
  left: -65px;
  i{
    font-size: 28px !important;
  }
  &:hover{
    text-decoration: none;
    cursor: pointer;
  }
}

.header-strip{
  height: 60px;
  background: @base-color;
  margin-top:-22px;
  padding-top: 10px;
  h4{
    color: @text-color;
  }
}

.set-container{
  h4{
    font-family: 'Noto Sans Regular';
  }
}

button.suggestion{
  position: absolute;
  right: 50px;
  bottom: 100px;
  transition: box-shadow 0.4s;
  border-radius: 50%;
  z-index: 1000 !important;
  background-color: @base-color;
  color: @text-color;
  &:hover{
    .box-shadow(0 0 4px);
    background-color: @base-color;
    color: @text-color;
    outline: none;
  }
  &:focus{
    background-color: @base-color;
    color: @text-color;
    outline: none;
  }
  &:active{
    background-color: @base-color;
    color: @text-color;
    outline: none !important;
  }
}
