@font-face {
    font-family: "Batman";
    src: url("../font/batmfa.ttf");
}
@font-face {
    font-family: "BatmanOpen";
    src: url("../font/batmfo.ttf");
}
html {
    scroll-behavior: smooth;
}
body {
    height:100%;
    background:black;
    color:white;
    max-width:100vw;
    overflow-x: hidden;
}
.navbar-brand img {
    max-height:40px;
    padding-right:1rem;
}
.navbar-brand {
    font-family:Batman;
    line-height:18px;
}
.navbar-nav h1 {
    font-family:Batman;
}
#homepageHeader {
    padding-top:80px;
    font-family:Batman;
    min-height:100vh;
}
#homepageHeaderLoggedIn {
    padding-top:80px;
}
@media screen and (min-width: 780px) {
    #homepageHeader {
        z-index:1;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 80px;
    }
    #homepageDetails {
        z-index:999;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 80px;
    }
}

#homepageDetails {
    background:#222;
}
#homepageDetails a {
    color:#ffc107;
}
#homepageDetails .btn-warning {
    color:#111;
    font-weight:bold;
}
.lessonWrapper {
    background:#333;
    padding:2rem;
}
.lessonWrapper .btn-warning {
    color:black;
}

.loginWrapper .btn {
    background:#ffc107;
    color:#111;
    font-weight:bold;
}
.plyr--audio .plyr__controls {
    padding: 10px;
    border-radius: inherit;
    background: #000;
    border: 1px solid darkblue;
    color: #fff;
}
.plyr--video {
    border: 1px solid darkblue;
}
#homepageHeaderLoggedIn a {
    color:#ffc107;
}
#homepageHeaderLoggedIn .card {
    background-color: #111;
    background-clip: border-box;
    border-radius: .25rem;
}
#studentSidebar {
    top:80px;
}
#studentSidebarInner {
    padding:10px 0;
    border-radius:10px;
    border:solid 2px rgba(255,193,7,0.5);
}
#studentLessonWrapper h4>a {
    color:white!important;
}
#studentLessonWrapper .card-body {
    padding:0;
}
#studentLessonWrapper p {
    padding-bottom:0;
    margin-bottom:0;
}
#studentSidebar hr, .searchResultWrapper hr {
    border:solid 2px rgba(255,193,7,0.5);
}
.sidebarLessonList li {
    border-top:solid 1px rgba(255,193,7,0.5);
}
.sidebarLessonList li:last-of-type {
    border-bottom:solid 1px rgba(255,193,7,0.5);
}
.sidebarLessonList li:hover {
    text-decoration:none;
    background:rgba(255,193,7,0.1);
}
.sidebarLessonList ul {
    padding-bottom:0;
    margin-bottom:0;
}
.sidebarLessonList a {
    text-decoration:none;
}
#studentLessonMain .btn-primary {
    color: white;
}
#studentLessonMain .btn-warning {
    color: black;
}
#studentLessonMain .btn-group-vertical {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lessonVideoWrapper {
    display:none;
}
.lessonTitle, .lessonDescription, .lessonPlayable {
    background:#111;
    padding:20px;
    border-radius:5px;
}
.embed-responsive.embed-responsive-16by9 {
    border: 1px solid darkblue;
}
.lessonCoverArt {
    max-width:300px;
}
.lessonVideo .btn-primary, .mp3Wrapper .btn-primary {
    border-radius:0;
}
.lessonVideo .btn-group, .mp3Wrapper .btn-group {
    border: solid 1px darkblue;
}
.mp3Header p, .mp4Header p {
    padding-bottom:3px;
    margin-bottom:0;
    background-color: #007bff;
    border-top: solid 3px darkblue;
    border-left: solid 1px darkblue;
    border-right: solid 1px darkblue;
}
.sideBarSearch .form-control {
    margin-left:10px;
}
.sideBarSearch .form-control:focus {
    box-shadow: none;
}
.card {
    color:black;
}
.newLessonBtn {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        background: #154629;
    }

    70% {
        background: #40e081;
    }

    100% {
        background: #154629;
    }
}
#lessonTable tr {
    color:white;
}
audio {
    width: 100%;
    max-width: 600px;
    border-radius: 5px;
    transform: scale(1.05);
}
.mp3Wrapper, .mp4Wrapper {
    padding:10px 5px 0 5px;
    background:#3490dc;
    border-radius: 3px;
}
.mp3Wrapper .btn-group, .mp4Wrapper .btn-group {
    border:none;
}

.btn-outline-available {
    color: #BE1CE3;
    border-color: #BE1CE3;
}

.btn-outline-available:hover, .btn-outline-available.active, .btn-available {
    color: #fff;
    background-color: #BE1CE3;
    border-color: #BE1CE3;
}
.badge-available {
    color: #fff;
    background-color: #BE1CE3;
}
.btn-outline-requested {
    color: #d86700;
    border-color: #D86700;
}

.btn-outline-requested:hover, .btn-outline-requested.active, .btn-requested {
    color: #fff;
    background-color: #D86700;
    border-color: #D86700;
}
.badge-requested {
    color: #fff;
    background-color: #D86700;
}
.lesson-updated-alert {
    -webkit-animation: color-change 6s infinite;
    -moz-animation: color-change 6s infinite;
    -o-animation: color-change 6s infinite;
    -ms-animation: color-change 6s infinite;
    animation: color-change 2s infinite;
}

@-webkit-keyframes color-change {
    0% { color: #154629; }
    50% { color: #49fd9a; }
    100% { color: #154629; }
}
@-moz-keyframes color-change {
    0% { color: #154629; }
    50% { color: #49fd9a; }
    100% { color: #154629; }
}
@-ms-keyframes color-change {
    0% { color: #154629; }
    50% { color: #49fd9a; }
    100% { color: #154629; }
}
@-o-keyframes color-change {
    0% { color: #154629; }
    50% { color: #49fd9a; }
    100% { color: #154629; }
}
@keyframes color-change {
    0% { color: #154629; }
    50% { color: #49fd9a; }
    100% { color: #154629; }
}
.tooltip.show {
    opacity: 1;
}
.tooltip-inner {
    background:rgba(56,193,114,1);
    border: solid 1px #fff;
}
.lesson-title-wrapper{
    padding:1rem;
    background:#222;
    color:white;
    -webkit-box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
    -moz-box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
    box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
    border-radius:1rem;
    margin-bottom:2rem;
}
.lyrics-wrapper {
    background:#000;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
    -moz-box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
    box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
}
.lyrics-wrapper h3 {
    background:#222;
    padding:10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
    -moz-box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
    box-shadow: 0px 0px 10px 3px rgb(52, 144, 220);
}
.badge-success:hover, .btn-success:hover, .btn-outline-success:hover, .btn-outline-success.active{
    color:white;
    background: #1f7a3d;
    border: #1f7a3d;
}
.badge-available:hover, .btn-available:hover, .btn-outline-available:hover, .btn-outline-available.active{
    background: #8c1cab;
    border: #8c1cab;
    color:white;
}
.badge-requested:hover, .btn-requested:hover, .btn-outline-requested:hover, .btn-outline-requested.active{
    background: #a25100;
    border: #a25100;
    color:white;
}