html {scroll-behavior: smooth;}
body {min-height:100vh; background-color:black;}
.songTitle {font-size: 44px; font-weight:bold; }
.songLyrics {font-size: 36px; margin-top: 20px; margin-bottom: 100vh;}
.noRecords i {font-size:28px;}
.modal-header {border-bottom:1px solid #fff;}
.modal-footer {border-top:1px solid #fff;}
.content {padding:20px; color:#FFFF00;}
.chorus {font-style: italic; padding-left:40px;}
.authorName {font-size:24px;line-height:10px;}
.musicKey {font-size:24px;}
.songListing {color:#CCCC00; font-size:22px;}
.songListing:visited {color:#CCCC00;}
.songListing:hover {color:#FFFF00;}
.sideNav {display:flex;flex-direction:column;position:fixed;top:10px;right:10px;font-size:18px;}
.sideNav a {color:#0056b3;}
.sideNav a:hover {text-decoration:none; color:#007bff}
.sideNav .active, .sideNav a:hover.active {color:#FFFF00;}
.p0 {padding:0px;}
.passageTitle {font-size: 44px; font-weight:bold; }
.biblePassage {font-size: 36px; margin-bottom: 100vh;}
.standardStyle.hide {display:none;}
.slideStyle {position: fixed;top: 0;font-size: 36px;width:100%;height: 100%;text-align: center;display:none;}
.slideStyle.active {display:flex;justify-content: center;align-items: center;}
.slideStyle > div {position: absolute;display: none;}
.slideStyle > div.active {display: block;}
.bottomNav {position: fixed;bottom: 0;font-size: 18px;}
.bottomNav a {margin: 0 5px;}
.bottomNav a.active {color:#FFFF00;}
/* Style the tab */
.tab {overflow: hidden;display: flex; justify-content: center;}
  
/* Style the buttons that are used to open the tab content */
.tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer; border:1px solid #ccc; padding: 6px 16px; transition: 0.3s;}
  
/* Change background color of buttons on hover */
.tab button:hover {background-color: #ddd;}

/* Create an active/current tablink class */
.tab button.active {background-color: #ccc;}
  
/* Style the tab content */
.tabcontent {display: none;padding: 6px 12px;border-top: none;animation: fadeEffect 1s; /* Fading effect takes 1 second */}
.tab-container {display:flex;}
.book-chapter {display:flex; flex-wrap: wrap;}
.book-verse {display:flex; flex-wrap: wrap;}
.flex-col-10 {flex:10%;}
.modal-dialog {max-width:700px;}
.cls-book a, .cls-chapter a, .cls-verse a {padding:0 6px;transition:ease 320ms all;}
.cls-book a:hover {background-color:#007bff; color:#fff; text-decoration: none; outline: none;}
.cls-book.active a {background-color:#007bff; color:#fff; text-decoration: none; outline: none;}
.cls-chapter a:hover {background-color:#007bff; color:#fff; text-decoration: none; outline: none;}
.cls-chapter.active a {background-color:#007bff; color:#fff; text-decoration: none; outline: none;}
.cls-verse a:hover {background-color:#007bff; color:#fff; text-decoration: none; outline: none;}
.cls-verse.active a {background-color:#007bff; color:#fff; text-decoration: none; outline: none;}
.col-OT-book, .col-NT-book {height:330px; display:flex; flex-wrap: wrap; flex-direction: column; margin-left:-6px;}
.col-OT {width:50%;display:flex;flex-wrap: wrap;}
.col-NT {width:42%;display:flex;flex-wrap: wrap;}
.border-line {width:1px;height:100%;border:1px solid #d6d6d6;}

/*style with background video*/
.backgroundVideo {display:none; width:100%;height:auto;position:fixed; z-index:-1;}
.backgroundVideo.active {display:block;}
.backgroundVideo video {width:100%;}
.slide-overlay {position: absolute;width: calc(100% + 40px);height: calc(100% + 20px);background: #6c6c6c;opacity: 0.4;z-index: -1;margin-left: -20px;margin-top: -10px;}
.slide-title-overlay {height: calc(80% + 20px);}

.chordCls .chord-line {position: relative;}
.chordCls .chord-line:first-child {margin-top:42px}
.chordCls .chord-line .chord {position:absolute; top: -42px;}
.chordCls .chord-line .chord-fixed {position:relative; top: -42px;}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.mobile-search {display:none;}

@media screen and (max-width: 600px) {
    .passageTitle {font-size: 22px; }
    .biblePassage {font-size: 16px; margin-bottom: 100vh;}
    .mobile-search {display:block; position:fixed; bottom:20px; right:10px;}
    .mobile-search a {background: #fff; padding: 20px; border-radius: 50%; color:#000;}
    .tab-container {flex-wrap: wrap;}
    .col-border {display:none;}
    .col-OT, .col-NT {width:100%;}
    .songTitle {font-size: 28px; line-height:36px;}
    .authorName {font-size: 18px; line-height:14px;}
    .musicKey {font-size:18px;}
    .songLyrics {font-size: 24px; line-height:32px;}
    .chorus {padding-left: 20px;}
    .chordCls .chord-line .chord {top: -26px;}
    .chordCls .chord-line .chord-fixed {top: -26px;}
}

@media screen and (max-width: 400px) {
    .songLyrics {font-size: 100%;}
}