body {
    font-family: 'Courier New', monospace;
    background-color: #f0f8ff;
  }
  .logo-text{
    font-weight: bolder;
    font-size: 2rem;
  }
  .quicksand-font {
      font-family: "Quicksand", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
  }
  .qfs-1{
    font-size: 1rem !important;

  }
  .qfs-2{
    font-size: 1.5rem !important;
    font-weight: bolder;
    color: #6c757d;
  }
  .quicksand500-font {
      font-family: "Quicksand", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
  }
  .quicksand400-font {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
  .roboto-mono-font {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  }
  .red-hat-mono-font {
  font-family: "Red Hat Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  }
  .pt-mono-regular {
  font-family: "PT Mono", monospace;
  font-weight: 400;
  font-style: normal;
  }
  .roboto-sans-serif-font {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300 !important;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }
  .container {
    max-width: 1000px;
  }
  .verse-text {
    /*display: flex;
    flex-wrap: wrap;
    */
    text-align: left;
    background: #fff;
    /*padding: 1em;*/
    /*border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
    font-size: 2em;
    line-height: 1.5em;
    /*min-height: 3em; justify-content: center;
    gap: 2px;
    height: 9em;
    overflow-y: scroll; white-space: break-spaces;*/
    height: 10.5em;
    overflow-y: scroll;
    white-space: pre-wrap;
    letter-spacing: -3px;
  }
  .verse-text span {
    position: relative;
    color: #666;
    background-color: transparent;
    padding: 0 1px;
    margin: 0 1px;
    border-radius: 2px;
    height: 1.5em;
    /*white-space: pre;*/
  }
  .lesson {
    border: #eee 1px solid;
    padding: 1rem 2rem !important;
    margin: 0rem 1.5rem !important;
    border-radius: 5px !important;
    line-height: 6rem;

    /*border: #eee 1px solid;
    padding: 0 1rem !important;
    margin: 0rem 0.5rem !important;
    border-radius: 5px !important;

    border: #eee 1px solid;
    padding: 1rem 2.5rem !important;
    margin: 0rem 1.5rem 0rem 0rem !important;
    border-radius: 5px !important;
    line-height: 6.5rem !important;
    font-size: 3rem;*/
  }
  .correct {
    color: green !important;
    background-color: #d4edda !important;
    /*border: #a3cfbb 1px solid;*/
  }
  .incorrect {
    color: red !important;
    background-color: #f8d7da !important;
        /*border: #f1aeb5 1px solid;*/
  }
  .cursor {
    border-bottom: 2px solid #7284b7;
    font-weight: bolder;
    color: #7284b7;
    animation-name: blink;
    animation-duration: 800ms;
    animation-iteration-count: infinite;
  }
  .cursor.blink {
    animation: blink 1s step-start 0s infinite;
  }
  @keyframes blink {
    50% { border-color: transparent; }
  }
  .stats {
    margin-top: 1em;
    text-align: left;
    color: #6c757d;
  }
  .footer-devotional {
    margin-top: 2em;
     text-align: center;
    color: #555;
  }
  #hiddenInput {
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
  header {
    /*background-color: #7284b7;*/
    background: linear-gradient(180deg, #7284b7 0%, #3a5174 100%);
    color: white;
    /*padding: 0.5em;*/
    margin-bottom: 2em;
  }
  header a {
    color: #fff;
    /*margin: 0 -3px;*/
    text-decoration: none;
  }
  .bg-header{
    background-color: #004080;
    color: #fff;
  }
  footer {
    /*background-color: #7284b7;*/
    background: linear-gradient(180deg, #7284b7 0%, #3a5174 100%);
    color: white;
    padding: 1em;
    margin-top: 2em;
    text-align: center;
  }



  .progress {
    height: 2rem !important; background: #999 !important;
  }
  .progress-bar{
    overflow: unset !important;
    /*color: #333;*/
  }

  .fa-bar-chartdd {
    position: absolute;
    top: 195px; left: 0;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 2rem;
    color:#004080;
    z-index: 1;
  }

  .left-links {
    /*position: absolute;
    top: 135px; left: 0;*/
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    top: 14rem;
    z-index: 1;
    background-color: #fff;
    left: -1.75rem !important;
  }
  .left-links a { color:#7284b7; text-decoration: none !important; }
  .text-color-blue { color: #7284b7 !important;}
  .disable-scrollbars::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }
  .v-hide{
    display: none;
  }

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
.icon-link:hover{
  color:#3a5174;
  scale:1.25;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-blue {
  color: #fff;
  background-color: #7284b7;
  border-color: #7284b7; /*set the color you want here*/
}

.btn-light-blue {
  color: #fff;
  background-color: #4e73df;
  border-color: #4e73df; /*set the color you want here*/
}

.btn-green{
  color: #fff;
  background: #1cc88a;
  border-color: #1cc88a;
}

.btn-red{
color: #fff;
  background: #e74a3b;
  border-color: #e74a3b;
}

.btn-red:hover{
  background: #bb2d3b;
border-color: #bb2d3b;
color: #fff;
}
.btn-green:hover{
 border-color: #157347;
 background: #157347;
color: #fff;
}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active, .open>.dropdown-toggle.btn-blue {
  color: #fff;
  background-color: #3a5174;
  border-color: #285e8e; /*set the color you want here*/
}

.btn-light-blue:hover, .btn-light-blue:focus, .btn-light-blue:active, .btn-light-blue.active, .open>.dropdown-toggle.btn-light-blue {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0b5ed7; /*set the color you want here*/
}
.bg-card-border-blue{
  border: #7284b7 1px solid;
}
.bg-card-header-blue{
  /*background: #7284b7;*/
  background: linear-gradient(180deg, #7284b7 0%, #3a5174 100%);
    color: #fff;
}


.bg-card-border-red{
  border-left: rgb(255, 107, 107) 3px solid;
}
.bg-card-header-red{
  background: none;
  color: rgb(255, 107, 107);
}

.bg-card-border-yellow{
  border-left: rgb(255, 209, 102) 3px solid;
}
.bg-card-header-yellow{
  background: none;
  color: rgb(255, 209, 102);
}

.bg-card-border-green{
  border-left: rgb(6, 214, 160) 3px solid;
}
.bg-card-header-green{
  background: none;
  color: rgb(6, 214, 160);
}

.bg-card-border-blue2{
  border-left: rgb(17, 138, 178) 3px solid;
}
.bg-card-header-blue2{
  background: none;
  color: rgb(17, 138, 178);
}

.bg-card-border-purple{
  border-left: rgb(155, 93, 229) 3px solid;
}
.bg-card-header-purple{
  background: none;
  color: rgb(155, 93, 229);
}


.font-sm{
  font-size: 0.7rem;;
}
/*.offcanvas-btn {
left: 420px;
visibility: visible;
}

optional junk to toggle the button text
.offcanvas-btn span:last-child,
.offcanvas.show .offcanvas-btn span:first-child {
display: none;
}

.offcanvas.show .offcanvas-btn span:last-child {
display: inline;
}*/
.lessonToolTips{
  top: 85px !important;
  right: 96% !important;
}

.tooltipn .tooltiptextn {
  width: 140px;
  background-color: #6c757d;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 5px;
}

.tooltipn .tooltiptextn::after {
  content: "";
  position: absolute;
  top: 39px;
  left: 25px;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #6c757d;
  animation-name: blink;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #7284b7;
}

.blue-shadow{
  box-shadow: 0px 0px 10px 5px #d3d3d3 !important;
}
.blue-shadow-lg{
  box-shadow: 0px 5px 50px 10px #7284b7 !important;
}
button.active{
  font-weight: bolder;
  border-top: 2px solid !important;
}


@media screen and (max-width: 986px) {
  /*.logo-text{
    font-size: 2rem;
  }*/
  #mainColRight{
    display: none;
  }


}

@media screen and (max-width: 760px) {
  /*.logo-text span{
    display: none;
  }*/
  .verse-text, #refBeingTyped{
    font-size: 4vw;
  }
}