// 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;
}