/* Base Elements */
.annotation {
font-weight: 700;
text-decoration: underline;
text-decoration-skip: edges;
}
.annotation-alert {
position: fixed;
top: 32px;
}
.badge-tag-info {
font-weight: 500;
color: #17a2b8;
background-color: #def4f3;
}
.bg-gradient-transparent {
background: linear-gradient(to bottom, transparent, #343a40);
}
.btn-xs,
.btn-group-xs > .btn {
padding: 0.2rem 0.2rem;
font-size: 0.75rem;
line-height: 1.5;
border-radius: 0.2rem;
}
.card-img-overlay-custom {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
.nav-tabs .nav-link {
color: inherit;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #17a2b8 !important;
background-color: #fff;
border-color: #fff #fff #17a2b8;
font-weight: 500;
}
.rounded-bottom-xl {
border-bottom-right-radius: 0.5rem !important;
border-bottom-left-radius: 0.5rem !important;
}
.rounded-top-xl {
border-top-right-radius: 0.5rem !important;
border-top-left-radius: 0.5rem !important;
}
.rounded-xl {
border-radius: 0.5rem !important;
}
.shadow-top {
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.125) !important;
}
/* Media Elements */
.carousel {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.carousel .slide {
display: inline-block;
margin-right: 0.5rem;
}
.carousel .slide:last-child {
margin-right: 0;
}
.lesson-tile {
color: #818182;
background: #f8f9fa linear-gradient(180deg, #f8f9fa, #fefefe) repeat-x;
border-color: #fdfdfe;
}
.lesson-tile hr {
border-top-color: #ececf6;
}
.lesson-tile .alert-link {
color: #686868;
}
.media img {
width: 100px;
}
.slide::-webkit-scrollbar {
display: none;
}
.slide img {
width: 240px;
}
/* Loading Elements*/
.loading-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
background-color: #ffffff;
width: 100%;
height: 100%;
display: table;
}
.loading-wrapper {
display: table-cell;
vertical-align: middle;
}
/* Modal & Video Elements */
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: table;
}
.modal-wrapper {
display: table-cell;
vertical-align: top;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
width: 100%;
height: 0;
margin: 0 auto;
}
.video-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Audio elements */
.audio-player-wrapper {
width: 100%;
height: 130px;
background-color: #ffffff;
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.125) !important;
position: fixed;
right: auto;
bottom: 0;
left: auto;
z-index: 1030;
}
.audio-player-progress-alert {
position: fixed;
bottom: 130px;
}
.audio-player-scrubber {
width: 80%;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
.audio-player-scrubber progress {
width: 100%;
}
.audio-player-scrubber progress[value] {
-webkit-appearance: none;
appearance: none;
background-color: #cacaca;
color: #4a4a4a;
height: 4px;
}
.audio-player-scrubber progress[value]::-webkit-progress-bar {
background-color: #cacaca;
color: #4a4a4a;
}
.audio-player-scrubber progress::-webkit-progress-value {
background-color: #4a4a4a;
}
.audio-player-controls {
width: 100%;
}
#audioSwitch {
position: absolute;
right: 10px;
bottom: 10px;
}
#btnSlider {
position: relative;
left: -1%;
top: -22px;
}
#btnPlay {
width: 50px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -25px;
bottom: 25px;
background-image: url("data:image/svg+xml,");
background-size: 50px 50px;
}
#btnPlay.playing {
background-image: url("data:image/svg+xml,");
}
#btnBack15 {
width: 40px;
height: 40px;
position: absolute;
left: 23%;
bottom: 30px;
background-image: url("data:image/svg+xml,");
background-size: 40px 40px;
}
#btnForward15 {
width: 40px;
height: 40px;
position: absolute;
right: 23%;
bottom: 30px;
background-image: url("data:image/svg+xml,");
background-size: 40px 40px;
}
/* Form elements */
.borderless-select-arrow {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
no-repeat right 0 center/8px 10px;
height: 24px;
}
.switch {
position: relative;
display: inline-block;
width: 41px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: '';
height: 19px;
width: 19px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #17a2b8;
}
input:focus + .slider {
box-shadow: 0 0 1px #17a2b8;
}
input:checked + .slider:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
.slider.round {
border-radius: 25px;
}
.slider.round:before {
border-radius: 50%;
}
input[class='borderless-input-right'] {
border: none;
background-color: none;
outline: 0;
width: 150px;
height: 24px;
text-align: right;
overflow: auto;
}
input[class='borderless-input-right']:focus {
border: none;
background-color: none;
outline: 0;
}